Customising the look of FuseGL

This thread is very much a Work in Progress. I'm no programmer, so this should explain how to change the visual appearance of FuseGL for other non-coders.

To make any changes to FuseGL's visual appearance, you'll be modifying is UserGUIConfig.xml, located in the Config folder of your FuseGL installation. You want to open this file with Notepad or similar text editor. As with anything, save a backup file somewhere safe in case you make a terrible mistake.

1: Changing a Sensor - Size and Location

If you've followed previous threads (http://www.mp3car.com/fb-documentati...-progress.html) then you'll already know how to add a basic Sensor to FuseGL to display readings. Here is a basic example, a Thermosensor, to get us started:

Attachment 67813

If we look at the UserGUIConfig file, this is what we'll see:

Code:

---

<?xml version="1.0" encoding="utf-8"?>
<FuseGL_User_Settings>
  <Persistant_Variables>
    <variable name="autoVariable___[Sensor - Temperature in Celcius[0,1] - TEMP 1]" first_value="0.0" type="double" />
  </Persistant_Variables>
  <User_Object type="FuseGL_Object">
    <setting type="string" name="GL - LBL - Sensor - Temperature in Celcius[0,1] - TEMP 1" />
    <image location="internal" path="FuseGL.Configurator.Configurator_IMG_Resources.UserButtonBackground" />
    <text text="(action){FuseGL.ExecuteCode(UpdateLabelText.cs;FuseGL_TextManipulation.InternalFlyCompile_UpdateLabelText;ChangeButtonTextOnVariablePersistant;{$[*].autoVariable___[Sensor - Temperature in Celcius[0,1] - TEMP 1]};{this};0.000;°C;)}" />
    <size width="180" height="135" />
    <location x="495" y="60" z="0" alignment="L" />
    <setting type="int" border_size="1" />
    <setting type="bool" mouse_cursor_to_hand_on_hover="false" />
    <events>
      <startup action="FuseGL.ExecuteCode" inputArgs="Sensors.cs;FuseGL_Sensors.Sensors;Initialize___TempSensor___Celcius;{FB.AnalogueInput(0.1)};{$[*].autoVariable___[Sensor - Temperature in Celcius[0,1] - TEMP 1]};" outputTo="this.text.text" />
    </events>
  </User_Object>
</FuseGL_User_Settings>

---

We have a Persistent Variable, which is the sensor itself. Then we have a User Object, which is the on-screen display of that sensor, and which also includes an Event, determining how the User Object changes according to the Persistent Variable. The object is displayed in a basic format determined by FuseGL.

But it's possible to change the Object from within the Config file. For starters, have a look at this part of the code:

Code:

---

  <size width="180" height="135" />
    <location x="495" y="60" z="0" alignment="L" />

---

This determines the size and location of your Sensor on the screen. Width and Height are obvious, and if you built your Sensor with FuseGL's drag and drop interface, you'll see that the numbers are divisible by 15 - the standard square of FuseGL's Configurator grid. The x and y variables locate the Sensor's top-left pixel, relative to the top-left of the screen, and again these are divisible by 15. But they don't have to be. If you want to redraw, resize or relocate your Sensor, just change these numbers, save the Config file and reload FuseGL.

2. Changing Sensor - Font, Image and Colour

With a Sensor created, we can now learn how to set attributes for it. Within the Config, the Sensor is an Object, and we can give it attributes in order to determine its Font, size and colour, and its background image, all of which are set to a standard by FuseGL's defaut settings.

The Sensor's Background Image is determined by the following code:

Code:

---

    <image location="internal" path="FuseGL.Configurator.Configurator_IMG_Resources.UserButtonBackground" />

---

As you see, FuseGL is looking internally. By switching this to "external", we can then set our own path to a background image, like so:

Code:

---

    <image location="external" path="background.png" />

---

As you do this, you can also set your border size to "0" to remove the ugly boundary around your image. And voila:

Attachment 67819

Note that by using .png files we can allow a degree of transparency for these images, allowing any background colour or image to show through.

In order to change the Font attributes for our sensor, we need to fiddle around with the part of our code marked "<text...".

If we want to change the Font, Size or Colour we need to add these bits of code to override the FuseGL defaults:

Code:

---

<User_Object type="FuseGL_Object">
...
<text size="20.0"...
/>
</User_Object>

---

3. Changing the Screen - Size

Playing with a Sensor or other Object within the FuseGL screen is crucial for displaying your data clearly, but this means nothing if you can't determine the size of the FuseGL screen. Therefore, we need to force FuseGL to fit to our size, whether it's a fixed pixel size or a percentage of the screen. To do this, we need to add some more code to the UserGUIConfig file.

Open up the file, and add this code:

Code:

---

<?xml version="1.0" encoding="utf-8" ?>
<FuseGL_User_Settings>
  ...
  <FuseGL_GUI_Settings>
    <setting type="size" name="gui_size" width="90%" height="600" />
    <setting type="int" gui_border_thickness="1" />
    <setting type="colour" gui_border_colour="85,85,85" />
  </FuseGL_GUI_Settings>
  ...
</FuseGL_User_Settings>

---

Notice that this new code, FuseGL_GUI_Settings, sits WITHIN the FuseGL_User_Settings, not underneath.

By adding this code, we're specifying three things about the FuseGL screen; its size, its border, and the colour of that border. Changing the size of the FuseGL screen is now as simple as changing the numbers determining the width and height in this new code, and these can be either a percentage of the whole screen (as in our example width) or a fixed pixel size (like our example height).

Before you make any changes, be aware that FuseGL will resize from the top-left corner, and that will have an impact on the location of any Objects you have on the screen, such as in lesson 1.

For example, we want to resize FuseGL to fit neatly around our single Sensor, so we resize the window to a width of 400 and a height of 200. However, our object has a location at x495, or 95 pixels further right than our screen can display, so we also need to change the location of that Object too. Since it's 180 wide, we'll place it at x110, so that its left and right margins are the same size. Making y 35 will have the same top-bottom effect. Which gives us this:

Attachment 67814

and the code to make it happen:

Code:

---

<?xml version="1.0" encoding="utf-8"?>
<FuseGL_User_Settings>
  <Persistant_Variables>
    <variable name="autoVariable___[Sensor - Temperature in Celcius[0,1] - TEMP 1]" first_value="0.0" type="double" />
  </Persistant_Variables>
  <User_Object type="FuseGL_Object">
    <setting type="string" name="GL - LBL - Sensor - Temperature in Celcius[0,1] - TEMP 1" />
    <image location="internal" path="FuseGL.Configurator.Configurator_IMG_Resources.UserButtonBackground" />
    <text text="(action){FuseGL.ExecuteCode(UpdateLabelText.cs;FuseGL_TextManipulation.InternalFlyCompile_UpdateLabelText;ChangeButtonTextOnVariablePersistant;{$[*].autoVariable___[Sensor - Temperature in Celcius[0,1] - TEMP 1]};{this};0.000;°C;)}" />
    <size width="180" height="135" />
    <location x="110" y="35" z="0" alignment="L" />
    <setting type="int" border_size="1" />
    <setting type="bool" mouse_cursor_to_hand_on_hover="false" />
    <events>
      <startup action="FuseGL.ExecuteCode" inputArgs="Sensors.cs;FuseGL_Sensors.Sensors;Initialize___TempSensor___Celcius;{FB.AnalogueInput(0.1)};{$[*].autoVariable___[Sensor - Temperature in Celcius[0,1] - TEMP 1]};" outputTo="this.text.text" />
    </events>
  </User_Object>
  <FuseGL_GUI_Settings>
    <setting type="size" name="gui_size" width="400" height="200" />
    <setting type="int" gui_border_thickness="1" />
    <setting type="colour" gui_border_colour="85,85,85" />
  </FuseGL_GUI_Settings>
</FuseGL_User_Settings>

---

What you should notice is that the FuseGL title bar uses some of the top margin of our screen - 30 pixels, to be exact. Also, our screen has a border of 1 pixel, as specified in our code (gui_border_thickness="1") with a grey colour (gui_border_colour="85,85,85"). Feel free to change that border as required.

4. Screen Colour and Image

FuseGL's default screen colour is a graphite grey colour. If you want something different, we need to go to our FuseGL_GUI_Settings and add the following code:

Code:

---

  <setting type="colour" gui_background_colour="23,24,25" />

---

This command, just like the gui_border_colour command, lets us determine the background colour using the RGB settings. The colour in the sample code above is FuseGL's default grey.

When it comes to the Background Image, this is recognised as an Object, just like our Sensor. That means we need to insert some code into the User_Settings, but not within the GUI_Settings. What's more, Objects will overlay eachother as layers, depending on their order within the UserGUIConfig file. That means the Background Image needs to be the first Object in the file, otherwise it will cover up the sensors. So at the top of the file, we want this code:

Code:

---

<?xml version="1.0" encoding="utf-8"?>
<FuseGL_User_Settings>
  <Persistant_Variables>
    ...
  </Persistant_Variables>
  <User_Object type="FuseGL_Object">
    <setting type="string" name="myBackgroundImage" />
    <image location="external" path="background.png" />
    <size width="100%" height="100%" />
    <location x="0" y="0" alignment="left" z="0.0" />
  </User_Object>
...

---

Two things are important here. First, notice that the image location is external, unlike all the other FuseGL objects which are internal. This means FuseGL is looking for info outside its own program. Second, notice the path. The file path starts in the root folder of the FuseGL installation, so organise your images into sub-folders accordingly.

Our image is set as a percentage to fill up the screen, and is again aligned to the top left pixel. As you change the screen size (which may be useful for embedding the application), the image will resize itself accordingly.

Also to point out in the first post, different alignment options exist. Positive X values for location move to the right of the screen always. Positive Y values move down the screen always. These can be negative values if desired. The options for alignment are (case INsensitive, i.e. doesn't matter):

Left -- The x and y are offset with the origin being the top left corner of the program. The image's origin is the top left corner of the image.
Right -- The x and y are offset with the origin being the top right corner of the program. The image's origin is the top left corner of the image.
Centre -- The x and y are offset with the origin being the exact centre of the program. The image's origin is the top left corner of the image.
Mouse -- The x and y are offset with the origin being the location of the mouse within the program. If the mouse exits the bounds of the program, the image will stay in the last position where the mouse was valid, then harshly re-orient itself when the mouse comes back in. The image's origin is the top left corner of the image.
Radial -- The x and y are offset with the origin being the exact centre of the program. However, the image's origin is actual the centre of the image, NOT the top left corner. Makes for easy centre based images.

Background image:

Code:

---

  <User_Object type="FuseGL_Object">
    <setting type="string" name="myBackgroundImage" />
    <image location="external" path="locationToYourBackgroundImage.png" />
    <size width="100%" height="100%" />
    <location x="0" y="0" alignment="radial" z="0.0" />
  </User_Object>

---

That should work. I am not able to test right now, but will be soon hopefully.

Thanks for the image code. By using "radial", the image loaded with its bottom-right pixel at the very centre of the screen. By changing "radial" to "left, the image loaded correctly across the screen, and resized itself as the screen was resized.

Quote:

---

Originally Posted by Grrrmachine

Thanks for the image code. By using "radial", the image loaded with its bottom-right pixel at the very centre of the screen. By changing "radial" to "left, the image loaded correctly across the screen, and resized itself as the screen was resized.

---

You should be able to use centre if you wanted a large image that didn't so much scale with the program as it did grow. Use an image larger than your max resolution, then at any resolution it will clip the extents. Some people might prefer that.

Great stuff, and the same code works for the background of other objects too (in this case the Sensor)

How about font? I've looked at the Trace file to see what FuseGL sets it as, but I don't know the code to override it in the sense of Font, size and colour. Any help with those commands?

As an extra, I've also managed to embed FuseGL into RideRunner very easily. The other option will be to hide the taskbar at the top, which I think is possible based on what I can see in the Trace file, but again, any help would be appreciated :D

I'll try and document this as thoroughly as possible, and then clean up this thread accordingly.