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.

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:

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.

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.

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.

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:

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.

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:

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.

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.

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.

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

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