wtf GUI Frameworks... rant I guess

Everything else that doesn't fall into one of the other PB categories.
Zach
Addict
Addict
Posts: 1654
Joined: Sun Dec 12, 2010 12:36 am
Location: Somewhere in the midwest
Contact:

wtf GUI Frameworks... rant I guess

Post by Zach »

This is more of a rant than anything..

I've spent a lot of time looking at different GUI frameworks, for various platforms and various languages, and one thing rubs me pretty sore.. They cover some basic widgets/controls/gadgets/whateveryouwanttocallthem just fine for the most part.. But even slightly enhanced, popular deviations are left out in the cold..

As one example... A lot of applications I have used in the past, or still use, can do fancy things like multi-colored foreground/background with Text, etc.. Yet everywhere I go on the web I come across nothing but walls and walls of Articles/Code on what is apparently the only way to get this type of functionality:

Building a custom control / extending a base class. (worse yet most of it is in C/C++ which I can barely parse)

This really seems absurd to me.. I've seen examples of just getting the text to change color in a RichEditBox and it seems annoyingly complex and unnecessary if Framework developers would just wake up and make some more useful widgets (Hello Microsoft/GTK/Wx ?)

The truth is I am frustrated with being a beginner I suppose.. I just want to build a nice clean Interface for the TextRPG I want to do - but I can't even get a simple Window capable of displaying text 1 character at a time, in any combination of color/style/font that I might be able to think up.

Yes, I know I could just use a console - But I don't want a console application.. I'd like something slightly more modern / appealing to potential players. A familiar Windowed GUI.

I could open a screen on the GUI.. But it's not quite the same and I'd have to really code all the functionality by hand. Arguably doable with my experience, but would probably take just as long as trying to modify a RichEdit Control, and frustrate me to no end...

WebGadget - out of the question. Sorry. Just-won't-work for what I want to do.

Scintilla - hopeful, but somewhat contrived solution.. Plus I already need to write a lexer for my command parser, why would I want to write one to color text as well?


It would be nice to have a simple control to do this stuff, even web browsers can get it done these days! lol...
A glorified example a monkey could use, sans all the messy code required to actually do it

Code: Select all

TextAppendColored("Well, that was easy!", "red")

;// Or something slightly better, color Tag parsing

TextAppendColored("{blue}Well, {brown}that was {red}e{green}a{pink}s{blue}y{yellow}!")
Which could spit out.... respectively..
"Well, that was easy!"

"Well, that was easy!"
Thanks for listening.. If anyone does have a magical solution I'd be interested in hearing it.

Hell.. if anyone wants to build a magical solution that works too.. But I ask you guys for too much already.
Image
rrpl
Enthusiast
Enthusiast
Posts: 121
Joined: Fri Apr 18, 2008 7:22 am
Location: Australia

Re: wtf GUI Frameworks... rant I guess

Post by rrpl »

Hi Zach,

Not sure if this is what your looking for exactly.
Below is a simple example of how to change text color and background color in the editor gadget at runtime.
There are of course much bigger code includes in this forum that cover more advanced usage of the editor gadget.
But I thought if your just looking for some simple procedure to cover text and background text color only, then this may help.
However it is Window only solution.

Code: Select all

;RRPL - Example procedure to change text color and background color of edit gadget at runtime
EnableExplicit

Procedure colortext(Gadget,Color,BG_Color,StartColor,EndColor)
  Protected Highlight.CHARFORMAT2,ID
  #CFM_BACKCOLOR = $4000000
  ID=GadgetID(Gadget) ; turn PB ID into Win ID
  SendMessage_(ID, #EM_SETSEL,StartColor,EndColor) ; select text to change
  Highlight\cbSize = SizeOf(CHARFORMAT2) 
  Highlight\dwMask = #CFM_COLOR|#CFM_BACKCOLOR ;mask to change Text Color and Background Color
  Highlight\crBackColor = BG_Color ; set Background Color
  Highlight\crTextColor = Color ; Set Text Color
  SendMessage_(ID, #EM_SETCHARFORMAT, #SCF_SELECTION,Highlight) ; highlight and or change text color
  SendMessage_(ID, #EM_SETSEL, 0, 0) ; turn off selection
EndProcedure 

; test code ---------------------------------------------

If OpenWindow(0, 0, 0, 200, 150, "Color Text Example", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  EditorGadget (0, 0, 0, 200, 150) 
  AddGadgetItem(0, -1, "Well, that was easy!") 
  AddGadgetItem(0, -1, "Well, that was easy!")
  AddGadgetItem(0, -1, "Well, that was easy!")
  AddGadgetItem(0, -1, "Well, that was easy!")
  AddGadgetItem(0, -1, "Well!")
  SetActiveGadget(0) 
  SendMessage_(GadgetID(0), #EM_SETREADONLY, 1, 0) ; Editor gadget set to readonly
  SendMessage_(GadgetID(0), #EM_SETBKGNDCOLOR, 0,$DDFFFF) ; Initial background color for editor gadget

  ;color text
  colortext(0,$0000FF,$DDFFFF,0,20) ;red
  colortext(0,$FF0000,$DDFFFF,21,26) ;blue
  colortext(0,$000090,$DDFFFF,27,36) ;deeper red
  colortext(0,$0000FF,$DDFFFF,36,37) ;red
  colortext(0,$00AA00,$DDFFFF,37,38) ;green
  colortext(0,$00EEEE,$DDFFFF,38,39) ;yellow
  colortext(0,$FF0000,$DDFFFF,39,40) ;blue
  colortext(0,$00EEEE,$DDFFFF,40,41) ;yellow
  colortext(0,$0000FF,$DDCCFF,42,53) ;red with girly highlight
  colortext(0,$00FF00,$AA5500,53,62) ;green with man-ly highlight
  colortext(0,$DDFFFF,$000000,62,83) ;inverted text
  colortext(0,$FFFFFF,$808080,83,90) ;WELL!
  Repeat : Until WaitWindowEvent()=16
EndIf 
If you are only looking for a solution at application load time then you could just edit an rtf file and load it as rtf at the start of the application.
"What you are is what you have been. What you’ll be is what you do now.” -Buddha
Trond
Always Here
Always Here
Posts: 7446
Joined: Mon Sep 22, 2003 6:45 pm
Location: Norway

Re: wtf GUI Frameworks... rant I guess

Post by Trond »

Just draw your text to an image and display it in an imagegadget.
Zach
Addict
Addict
Posts: 1654
Joined: Sun Dec 12, 2010 12:36 am
Location: Somewhere in the midwest
Contact:

Re: wtf GUI Frameworks... rant I guess

Post by Zach »

I'm trying to avoid that at all costs, Trond.

I want to retain the capability to select/copy text from the Window if the user desires to paste it somewhere else, without having to code that functionality from scratch or (undesirably) ditch certain functionality altogether... Frankly I'd have no clue how to do that while working with text rendered onto an image.. Or if that can even be done with Bitmap Fonts, even..

rrpl's example is a good idea.. I found similar code posted by Freak and modified by Srod, from some time ago, so I am hoping to do something with that... I can address Linux down the road at this point.
Image
Zach
Addict
Addict
Posts: 1654
Joined: Sun Dec 12, 2010 12:36 am
Location: Somewhere in the midwest
Contact:

Re: wtf GUI Frameworks... rant I guess

Post by Zach »

Additionally..

That was a very basic and much easier to understand example than I anticipated.. Thanks, rrpl.

I am still wondering about a few things..What do "Starcolor / Endcolor" correspond to? Is that the positional start/stop range of the text I want to color?

I was wondering if it is possible to modify this for tag parsing (of my own made-up tags). The reason being that I want to use the editorgadget as a large area Window that holds dynamically generated text content.. i.e Text is added on the fly and it is not known beforehand what color a specific word in a specific line, at a specific position, might need to be colored.

I'm not sure what other concerns need to be addressed before rewriting the function in such a way. It looks like it is applying the colors after the text has been added.. So I guess I would need a way to determine that a word or letter needs to be colored, what color effects, and what its position is within the Editbox (it looks linear in your example, so may be easy to do this?)..

I've had several ideas goes off already, but then I'm not really sure the best way to do it...
Image
rrpl
Enthusiast
Enthusiast
Posts: 121
Joined: Fri Apr 18, 2008 7:22 am
Location: Australia

Re: wtf GUI Frameworks... rant I guess

Post by rrpl »

Zach wrote:Additionally..

That was a very basic and much easier to understand example than I anticipated.. Thanks, rrpl.

I am still wondering about a few things..What do "Starcolor / Endcolor" correspond to? Is that the positional start/stop range of the text I want to color?
Yes I know it was simple. I have to keep it simple so that I can understand it :lol: .
As you guessed the startcolor is the character to start from and the endcolor is the character to end at (whole of text).
You can also do this by line and character if you want - see Srod 's examples.
As for coloring on the fly, there are windows functions to get the characters selected by the user (by line or by whole of text).
See Srod 's examples again for this. If you give an example of what you are trying to achieve I or someone else can probably help you with a procedure to do it.
"What you are is what you have been. What you’ll be is what you do now.” -Buddha
Zach
Addict
Addict
Posts: 1654
Joined: Sun Dec 12, 2010 12:36 am
Location: Somewhere in the midwest
Contact:

Re: wtf GUI Frameworks... rant I guess

Post by Zach »

Sorry, I thought I had made that clear.

This is going to be a text display window, for my Text RPG. Coloring is not to be done by user-selection/highlighting actions, it must be done dynamically, using some sort of tagging system to indicate whatever is between the tags needs to be colored as specified. I might also like the option to let users define their own highlights, but that would be something to tackle much later, if I even decide I need it..

For now I just need something that can be fed a string, such as this example of a few lines (fed one at a time)

Code: Select all

;// These "TAGS" could be simple  color / font / style tags that all need to be applied individually
;// or the "TAGS" themselves could be simple  "Style" tags, based on a structure that specifies
;// the font face, color, and styling to apply?   Depends I guess.. But for now setting them up
;// to be just color tags is sufficient.

"<clrHeader>[Name of Town, Location]</clrHeader>"
"<clrDesc>You are standing around in the middle of town.  You feel great.</clrDesc>"
"<clrExts>Obvious Exits:</clrExts> North, South, East.
and spit it out so its colored the colors I want, for whatever the text is between those tags.. So the Start/Stop range thing works, its just that I need to run it through a Procedure of some sort that can calculate the position of the text in the EditorGadget after the tags have been removed from the string, and then apply the appropriate color to the position where that text should be.

Then we need to figure out a way to make that result "static", and account for the fact that text will be word-wrapped and the box will start scrolling once it is full.. The user has to be able to scroll up a reasonable amount (a couple hundred lines?) if desired, and the oldest content removed (1 line at a time) as newer lines are added.. All while maintaining the proper colors on the proper text..


It's probably more complex than it needs to be, but one idea I had was to use a buffer to mirror the contents of the text box, updating with it in real-time.. The difference being the buffer contains the raw strings with the tags included, and every time the screen is redrawn (line movement/text additions to the box) it would calculate the position of the text as it appears WITHOUT the tags in the EditorGadget, thus applying the proper "offset" to the color start/stop ranges for the entire text box contents..

But like I said...probably more complicated than it needs to be.. I certainly wouldn't know where to start with the math that's bound to be involved :|
Image
User avatar
TomS
Enthusiast
Enthusiast
Posts: 342
Joined: Sun Mar 18, 2007 2:26 pm
Location: Munich, Germany

Re: wtf GUI Frameworks... rant I guess

Post by TomS »

If you're going to use the editorgadget, you can use RTF formatting.
It's much like your pseudocode above ({red}this is a red text followed by a {blue}blue{black} word)

Code: Select all

OpenWindow(0, 0, 0, 400, 400, "", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
EditorGadget(0, 0, 0, 400, 400)

rtf.s = "{\rtf"                   			;Open RTF
rtf +   	"{\colortbl;"               	;Open ColorTable
rtf +       	"\red0\green0\blue0;"       ;Index 1 = black
rtf +       	"\red255\green0\blue0;"    	;Index 2 = red
rtf +       	"\red0\green150\blue0;"    	;Index 3 = dark green
rtf +       	"\red0\green0\blue255;"    	;Index 4 = blue
rtf +    	"}"                        		;Close ColorTable

rtf +    	"{"                        		;Open Group
rtf +       	"\cf1 Black \cf2 Red 	\par \cf3 Green \cf4 Blue"       ;Add colored Text
									  ; \par = New Line - this is Not needed If you use AddGadgetItem()
rtf +    	"}"                        		;Close Group

rtf + "}"                        			;Close RTF

SetGadgetText(0, rtf)

Repeat
   event = WaitWindowEvent(20)   
Until event = #PB_Event_CloseWindow
If you're using AddGadgetItem(), I'm afraid you have to put \rtf \colortbl etc in every single line. (But you can ofcourse only write the colors in the colortable that you really use in that line instead of 16 (or however many) colors that you might use in the whole text).

Ofcourse you can write a little pre-parser that creates rtf-code from

Code: Select all

{red}text {blue} more text
los
New User
New User
Posts: 6
Joined: Sun Apr 05, 2009 4:28 am
Location: USA

Re: wtf GUI Frameworks... rant I guess

Post by los »

Interesting TomS -- but how did you know that the EditorGadget accepts rtf formatting?
rrpl
Enthusiast
Enthusiast
Posts: 121
Joined: Fri Apr 18, 2008 7:22 am
Location: Australia

Re: wtf GUI Frameworks... rant I guess

Post by rrpl »

Removed forum duplication
Last edited by rrpl on Thu Feb 24, 2011 6:08 am, edited 1 time in total.
"What you are is what you have been. What you’ll be is what you do now.” -Buddha
rrpl
Enthusiast
Enthusiast
Posts: 121
Joined: Fri Apr 18, 2008 7:22 am
Location: Australia

Re: wtf GUI Frameworks... rant I guess

Post by rrpl »

wtf
Last edited by rrpl on Thu Feb 24, 2011 6:07 am, edited 1 time in total.
"What you are is what you have been. What you’ll be is what you do now.” -Buddha
rrpl
Enthusiast
Enthusiast
Posts: 121
Joined: Fri Apr 18, 2008 7:22 am
Location: Australia

Re: wtf GUI Frameworks... rant I guess

Post by rrpl »

Zach wrote:
This is going to be a text display window, for my Text RPG. Coloring is not to be done by user-selection/highlighting actions, it must be done dynamically, using some sort of tagging system to indicate whatever is between the tags needs to be colored as specified. I might also like the option to let users define their own highlights, but that would be something to tackle much later, if I even decide I need it..

For now I just need something that can be fed a string, such as this example of a few lines (fed one at a time)

... and spit it out so its colored the colors I want, for whatever the text is between those tags..
I can't help you much with the conversion of your code (havent done much of that), however in terms of the method of adding your lines to an editor gadget, the example code below gives you the basic pricipals of how this can be achieved.

Code: Select all

;rrpl - example procedure to change text and or background color as you add text to an editor gadget
EnableExplicit

;my procedure rewritten to set the color at the current cursor or selection position
Procedure Editor_SetTextColor(Gadget,Color,BG_Color)
  Protected Highlight.CHARFORMAT2,ID
  #CFM_BACKCOLOR = $4000000
  ID=GadgetID(Gadget) ; turn PB ID into Win ID
  Highlight\cbSize = SizeOf(CHARFORMAT2) 
  Highlight\dwMask = #CFM_COLOR|#CFM_BACKCOLOR ;mask to change Text Color and Background Color
  Highlight\crBackColor = BG_Color ; set Background Color
  Highlight\crTextColor = Color ; Set Text Color
  SendMessage_(ID, #EM_SETCHARFORMAT, #SCF_SELECTION,Highlight) ; highlight and or change text color
EndProcedure

; test code ---------------------------------------------

Define Event, TextColor=$000000,BackgroundColor=$DDFFFF

If OpenWindow(0, 0, 0, 520, 150, "Adding Colored Text to an Editor Gadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  EditorGadget (0, 0, 40, 520, 110) 
  StringGadget(1, 10, 10, 120, 20, "Test") ;can remove this is for display purpose only
  ButtonGadget(2, 140, 10, 90, 20, "Select Color")
  ButtonGadget(3, 240, 10, 150, 20, "Select Background Color")
  ButtonGadget(4, 400, 10, 100, 20, "Add New Line")
  AddGadgetItem(0, -1, "There is some text here,") 
  AddGadgetItem(0, -1, "please add some more")
  AddGadgetItem(0, -1, "") ;add a new line before inserting new text line
  SetActiveGadget(0) 
  SendMessage_(GadgetID(0), #EM_SETREADONLY, 1, 0) ; Editor gadget set to readonly
  SendMessage_(GadgetID(0), #EM_SETBKGNDCOLOR, 0,BackgroundColor) ; Set background color for editor gadget
  Repeat 
    Event = WaitWindowEvent() 
    Select Event 
      Case #PB_Event_Gadget 
        Select EventGadget() 
          Case 2
            TextColor = ColorRequester(TextColor)
            Editor_SetTextColor(0,TextColor,BackgroundColor)
            SendMessage_(GadgetID(0),#EM_REPLACESEL,0,GetGadgetText(1))
          Case 3
            BackgroundColor = ColorRequester(BackgroundColor)
            Editor_SetTextColor(0,TextColor,BackgroundColor)
            SendMessage_(GadgetID(0),#EM_REPLACESEL,0,GetGadgetText(1))
          Case 4
            AddGadgetItem(0, -1, "") ;add a new line before inserting new text line
        EndSelect 
    EndSelect 
  Until Event = #PB_Event_CloseWindow 
EndIf 
End
If there is no interaction from a user, the cursor position will stay at the bottom of the file, and you can continue adding colored text.

However it is possibly worth considering if your users wouldn't prefer to create the rtf file rather than a script. The script could then just load the rtf file. You will note from my example that if you select some text or move the cursor with the mouse the test text is inserted there instead of the bottom of the file. If you comment out ;SendMessage_(GadgetID(0),#EM_REPLACESEL,0,GetGadgetText(1)) you will notice that when you select text and then select a text color it changes the color of the existing text.
"What you are is what you have been. What you’ll be is what you do now.” -Buddha
Zach
Addict
Addict
Posts: 1654
Joined: Sun Dec 12, 2010 12:36 am
Location: Somewhere in the midwest
Contact:

Re: wtf GUI Frameworks... rant I guess

Post by Zach »

los wrote:Interesting TomS -- but how did you know that the EditorGadget accepts rtf formatting?
The Editorgadget is actually a Rich Edit control :mrgreen:
Image
Zach
Addict
Addict
Posts: 1654
Joined: Sun Dec 12, 2010 12:36 am
Location: Somewhere in the midwest
Contact:

Re: wtf GUI Frameworks... rant I guess

Post by Zach »

However it is possibly worth considering if your users wouldn't prefer to create the rtf file rather than a script. The script could then just load the rtf file.
I'm not sure I follow what you mean by this? If you mean what I think you mean, then this shouldn't be an issue. The window is for display purposes only, and will be in read-only mode (hoping that doesn't throw a wrench into anything). So the user should be unable to modify anything (and would have no need). The engine I am building is going to be for personal use, so the only one writing pseudo-code would be me in this instance. Fair point on the cursor position, but I am assuming there is a way to set it back to the appropriate position to continue adding text, with a simple check.

The text itself, will be dynamically loaded from the appropriate database columns corresponding to what is being displayed.. So there is no real way around writing some sort of syntax, that I can see.. If I had the time and inclination I could write an editing app to use a rich edit form with color options, etc and then parse that into tags when they are stored, but I'd rather write some tags into the DB columns' text at this point.

TomS: Thanks for that interesting example as well.. Is there somewhere I can read more about this?
Image
User avatar
TomS
Enthusiast
Enthusiast
Posts: 342
Joined: Sun Mar 18, 2007 2:26 pm
Location: Munich, Germany

Re: wtf GUI Frameworks... rant I guess

Post by TomS »

There's an official Doku by Microsoft: http://msdn.microsoft.com/de-de/library ... 10%29.aspx
It's not so easy to understand (at least for me).
So an easier way to learn new formatting sequences might be just creating a document in Wordpad. Then open the rtf document with your favorite plain text editor.
but beware. There's lots of stuff that's actually not really needed.
Microsoft likes to add lots of garbage and redundant information into their documents.
Just save a plain white page in Word as html and open it with a plin text editor...

There seems to be a problem with background color. It's ignored if you type in the command (\cbN N being the index of the colortable).
So different colors per line or even per word don't seem to work with rtf (at least with the PB Editorgadget).

EDIT: EditorGadget in ReadOnly mode still works like a charm with my code.
Post Reply