Board index FlightGear Development Aircraft Cockpit development

Best practice to change GUI text color dynamically?

Discussion about creating 2d and 3d cockpits.

Best practice to change GUI text color dynamically?

Postby Simworld2020 » Sun Apr 11, 2021 6:15 am

I have had success changing gui dialog box text color dynamically, but I'd like to learn whether or not there is an easier way or a best way.

My 2 methods so far:

1. "Overwrite" method. The text widged has a label that appears as off-white or light grey in the dialog box. The label is static. By creating another text widget with the same coordinates, and making the second text widget "live", i.e. "<live>1</live>" and assigning the widget a color and a property, the color of the text in the dialog box can be manipulated in real time. For example, just write the green text over the off-white text, and for the pilot, the text appears to change color from off-white to green.

Example:

Code: Select all
<text>  # Note: this widget is not "live".   Its label "Hello" is static.
      <row>4</row>
      <col> 2</col>
      <label>Hello</label
</text>
<text>  # Note:  this widget is "live", and is updated in real time as the property changes.
     <row>4</row>
     <col>2</col>
     <color>
            <red>0</red>
            <blue>0</blue>
            <green>1</green>
     </color>
     <live>1</live>
     <property>whatever/whatever/colored-label</property> #This property holds same text as static widget, the word "Hello".
</text>


The above method works for me, but I don't know whether or how the overwrite graphics would affect other users with different system capabilities.
I suspect this method may be "illegal" .

That's why I explored another option, which is method 2.

Method 2:

"Replace" method. Make both text widgets "live" and before writing the colored text to the location, remove the "default" text by setting its property to "".

Code: Select all
<text>  # This widget contains the default text stored in a property, and the widget is "live":
     <row>4</row>
     <col>2</col>
     <live>1</live>
     <property>whatever/whatever/not-colored-label</property>
</text>
<text>  # This widget contains the same text label in its property, but colored green:
     <row>4</row>
     <col>2</col>
     <color>
            <red>0</red>
            <blue>0</blue>
            <green>1</green>
      </color>
     <live>1</live> 
     <property>whatever/whatever/colored-label</property>
</text>


################

The "dialogs" readme explains how to make a text widget and how to color the text, but not how to change the color of the text dynamically.

I'm looking for the best way to change GUI dialog text color dynamically, as properties change.

Specifically:

Is method #1, the "overwrite" method, legal?
Is there a better way to change gui text dynamically other than my 2 methods?

Or, if you don't know how to do it but you remember an aircraft that has a dialog in which text color changes dynamically, please let me know the aircraft so I can download it and study its GUI dialogs.

Any help appreciated, and thanks!

Simworld2020
Flying the Cessna 172p and the DHC-6 Twin Otter.
Flightgear 2020.3.8
Lenovo Thinkpad W540
Windows 10 Pro, 64 bit
Intel core i7-4800MQ @ 2.7 GHz
32 Gb DDR3 RAM
NVIDIA Quadro K2100M with 2Gb RAM
Simworld2020
 
Posts: 41
Joined: Tue Dec 08, 2020 10:59 pm

Re: Best practice to change GUI text color dynamically?

Postby Hooray » Sun Apr 11, 2021 9:33 am

Like you discovered already, there are different ways - what's "best" depends usually on your use case.
For instance, you could also use the <visible> tag to toggle between different variants of a widget.
You can also use procedurally generated dialogs via Nasal.

In addition, there's obviously also the possibility to use Nasal and Canvas directly to render dialog boxes, which provides far more flexibility:

https://wiki.flightgear.org/Howto:Creat ... ialog_file
https://wiki.flightgear.org/Howto:Canva ... g_examples
https://wiki.flightgear.org/Canvas_Widget_Matrix
https://wiki.flightgear.org/Howto:Creat ... GUI_Widget
Image

Image

Image

A Canvas based UI dialog makes it even possible to use effects and shaders for individual widgets:
https://wiki.flightgear.org/Canvas_Deve ... 2F_Shaders
Image
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12186
Joined: Tue Mar 25, 2008 8:40 am

Re: Best practice to change GUI text color dynamically?

Postby Simworld2020 » Mon Apr 12, 2021 2:53 am

Thank you Hooray, lots of avenues to explore in the info you provided.
I found referenced also "canvas snippets" which give me a good starting place to practice some of the (for me) very advanced techniques you referenced.
A specific question, is it permissible to overwrite text of one color onto the same text of another color?
That is the simplest method I've found, would it disturb anyone's graphics?
My project is just about finished and I did it on an intel graphics laptop with no ALS and all shaders off, because that's the only way I can run Flightgear (Lenovo Thinkpad quad core coming next week!).
If the overwrite method is acceptable for all cases, I will just stick with it and will begin to learn more advanced nasal/canvas implementations for the next project.
Flying the Cessna 172p and the DHC-6 Twin Otter.
Flightgear 2020.3.8
Lenovo Thinkpad W540
Windows 10 Pro, 64 bit
Intel core i7-4800MQ @ 2.7 GHz
32 Gb DDR3 RAM
NVIDIA Quadro K2100M with 2Gb RAM
Simworld2020
 
Posts: 41
Joined: Tue Dec 08, 2020 10:59 pm

Re: Best practice to change GUI text color dynamically?

Postby Hooray » Mon Apr 12, 2021 6:03 pm

when using PUI, such dialogs tend to be procedurally created/updated - see the multiplayer/performance monitor dialogs for details

However, the Canvas stuff should work too - most aircraft devs tend to use the Canvas option, since that works regardless of the legacy UI (PUI) and it isn't specific to Qt5 enabled builds. The other option would obviously be Phi (mongoose)
Please don't send support requests by PM, instead post your questions on the forum so that all users can contribute and benefit
Thanks & all the best,
Hooray
Help write next month's newsletter !
pui2canvas | MapStructure | Canvas Development | Programming resources
Hooray
 
Posts: 12186
Joined: Tue Mar 25, 2008 8:40 am

Re: Best practice to change GUI text color dynamically?

Postby Simworld2020 » Fri Apr 16, 2021 5:03 pm

Very good Hooray, I continue to read up on it. Thanks again.
Flying the Cessna 172p and the DHC-6 Twin Otter.
Flightgear 2020.3.8
Lenovo Thinkpad W540
Windows 10 Pro, 64 bit
Intel core i7-4800MQ @ 2.7 GHz
32 Gb DDR3 RAM
NVIDIA Quadro K2100M with 2Gb RAM
Simworld2020
 
Posts: 41
Joined: Tue Dec 08, 2020 10:59 pm

Re: Best practice to change GUI text color dynamically?

Postby Octal450 » Fri Apr 16, 2021 6:48 pm

If you want an example of a complex dialog in Canvas, please check out: https://github.com/Octal450/MD-11/blob/ ... as/afs.nas

Kind Regards,
Josh
Skillset: JSBsim, Systems, Canvas, Autoflight/Control Systems, Basic Animations
Aircraft: MD-11 (Mainly), A320-family, MD-80, Contribs in a few others

Octal450's Hangar|Launcher Catalog
|MD Dev Discord|Airbus Dev Discord
User avatar
Octal450
 
Posts: 4894
Joined: Tue Oct 06, 2015 12:51 pm
Callsign: WTF411/Octal
Version: next
OS: Windows 7/10 x64

Re: Best practice to change GUI text color dynamically?

Postby Simworld2020 » Sat Apr 17, 2021 9:51 am

Josh,
I've read through the functions and can grasp what is going on conceptually, a good start.
I'd like to mention too how easy on the eyes that code is, very neat, something I'm working to improve here on my own projects.
I could never fly the MD-11 due to system limitations - until now - now I've got a new-to-me laptop that can handle it, I'll download the
aircraft and fly it and see that gui in action.
Bookmarked for future study, thanks much for the link,
John
Flying the Cessna 172p and the DHC-6 Twin Otter.
Flightgear 2020.3.8
Lenovo Thinkpad W540
Windows 10 Pro, 64 bit
Intel core i7-4800MQ @ 2.7 GHz
32 Gb DDR3 RAM
NVIDIA Quadro K2100M with 2Gb RAM
Simworld2020
 
Posts: 41
Joined: Tue Dec 08, 2020 10:59 pm

Re: Best practice to change GUI text color dynamically?

Postby Octal450 » Sun Apr 18, 2021 6:18 pm

Hi John
Glad I could help!

Haha - anyone who has collaborated on my aircraft can atest that I am very nit-picky about code formatting, I really like clean formatting :mrgreen:

Hope you enjoy the MD-11 and let me know if you have any questions

Kind Regards,
Josh
Skillset: JSBsim, Systems, Canvas, Autoflight/Control Systems, Basic Animations
Aircraft: MD-11 (Mainly), A320-family, MD-80, Contribs in a few others

Octal450's Hangar|Launcher Catalog
|MD Dev Discord|Airbus Dev Discord
User avatar
Octal450
 
Posts: 4894
Joined: Tue Oct 06, 2015 12:51 pm
Callsign: WTF411/Octal
Version: next
OS: Windows 7/10 x64


Return to Cockpit development

Who is online

Users browsing this forum: No registered users and 1 guest