Announcement

Collapse
No announcement yet.

Customising the look of FuseGL

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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:

    Click image for larger version

Name:	Basic001.jpg
Views:	1
Size:	35.5 KB
ID:	2309460

    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.
    Last edited by Grrrmachine; 10-21-2012, 08:00 AM.
    http://sticksout.blogspot.com

  • #2
    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:

    Click image for larger version

Name:	Basic002.jpg
Views:	1
Size:	36.2 KB
ID:	2284867

    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>
    Last edited by Grrrmachine; 10-22-2012, 02:56 PM.
    http://sticksout.blogspot.com

    Comment


    • #3
      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:

      Click image for larger version

Name:	Basic003.jpg
Views:	1
Size:	23.0 KB
ID:	2284864

      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.
      Last edited by Grrrmachine; 10-21-2012, 08:22 AM.
      http://sticksout.blogspot.com

      Comment


      • #4
        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.
        Last edited by Grrrmachine; 10-21-2012, 12:41 PM.
        http://sticksout.blogspot.com

        Comment


        • #5
          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.
          Fusion Brain Version 6 Released!
          1.9in x 2.9in -- 47mm x 73mm
          30 Digital Outputs -- Directly drive a relay
          15 Analogue Inputs -- Read sensors like temperature, light, distance, acceleration, and more
          Buy now in the MP3Car.com Store

          Comment


          • #6
            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.
            Fusion Brain Version 6 Released!
            1.9in x 2.9in -- 47mm x 73mm
            30 Digital Outputs -- Directly drive a relay
            15 Analogue Inputs -- Read sensors like temperature, light, distance, acceleration, and more
            Buy now in the MP3Car.com Store

            Comment


            • #7
              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.
              http://sticksout.blogspot.com

              Comment


              • #8
                Originally posted by Grrrmachine View Post
                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.
                Fusion Brain Version 6 Released!
                1.9in x 2.9in -- 47mm x 73mm
                30 Digital Outputs -- Directly drive a relay
                15 Analogue Inputs -- Read sensors like temperature, light, distance, acceleration, and more
                Buy now in the MP3Car.com Store

                Comment


                • #9
                  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?
                  http://sticksout.blogspot.com

                  Comment


                  • #10
                    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.
                    http://sticksout.blogspot.com

                    Comment


                    • #11
                      So, any help on changing the font?
                      http://sticksout.blogspot.com

                      Comment


                      • #12
                        Originally posted by Grrrmachine View Post
                        So, any help on changing the font?
                        You can use "Verdana" built in, other than that you have to create a bitmap font to use as a texture. I made a program that does just this a while ago, I will look for the link. It is built into MDX Configurator as well if you have that. There are other programs that can give you the info too.

                        You will create an image that looks like the image attached and an XML file that describes where all the characters go and what they mean. Video cards can't render font's yet, so you have to make images. Every character of text drawn is actually a small scaled and cropped image drawn in the correct spot. I have only made the font and file for 2 fonts though. You could make a font whatever you wanted if you mapped it properly.

                        Image (Note you may have to import into a real image viewer, It is a transparent background with white font which with the forum's white background might just display blank and white):


                        Image link: http://image-host.us/images/verdana___0pR5JSidkh.png

                        XML:

                        Code:
                        <?xml version="1.0" encoding="utf-8" ?>
                        <font>
                          <setting type="string" name="verdana" />
                          <image name="fontImage" location="internal" path="FuseGL.GUI.Text.FontResourceFile.Verdana" />
                          <char location_topleft="1,0" location_bottomright="13,25" value="97" offsets="0,0,0,0"></char>
                          <char location_topleft="17,0" location_bottomright="30,25" value="98" offsets="0,0,0,0"></char>
                          <char location_topleft="32,0" location_bottomright="44,25" value="99" offsets="0,0,0,0"></char>
                          <char location_topleft="45,0" location_bottomright="58,25" value="100" offsets="0,0,0,0"></char>
                          <char location_topleft="61,0" location_bottomright="74,25" value="101" offsets="0,0,0,0"></char>
                          <char location_topleft="76,0" location_bottomright="85,25" value="102" offsets="0,0,0,0"></char>
                          <char location_topleft="86,0" location_bottomright="98,25" value="103" offsets="0,0,0,0"></char>
                          <char location_topleft="102,0" location_bottomright="114,25" value="104" offsets="0,0,0,0"></char>
                          <char location_topleft="118,0" location_bottomright="121,25" value="105" offsets="0,0,0,0"></char>
                          <char location_topleft="122,0" location_bottomright="130,25" value="106" offsets="0,0,0,0"></char>
                          <char location_topleft="133,0" location_bottomright="146,25" value="107" offsets="0,0,0,0"></char>
                          <char location_topleft="149,0" location_bottomright="152,25" value="108" offsets="0,0,0,0"></char>
                          <char location_topleft="155,0" location_bottomright="176,25" value="109" offsets="0,0,0,0"></char>
                          <char location_topleft="180,0" location_bottomright="192,25" value="110" offsets="0,0,0,0"></char>
                          <char location_topleft="195,0" location_bottomright="208,25" value="111" offsets="0,0,0,0"></char>
                          <char location_topleft="211,0" location_bottomright="224,25" value="112" offsets="0,0,0,0"></char>
                          <char location_topleft="226,0" location_bottomright="239,25" value="113" offsets="0,0,0,0"></char>
                          <char location_topleft="243,0" location_bottomright="252,25" value="114" offsets="0,0,0,0"></char>
                          <char location_topleft="253,0" location_bottomright="265,25" value="115" offsets="0,0,0,0"></char>
                          <char location_topleft="266,0" location_bottomright="276,25" value="116" offsets="0,0,0,0"></char>
                          <char location_topleft="278,0" location_bottomright="290,25" value="117" offsets="0,0,0,0"></char>
                          <char location_topleft="293,0" location_bottomright="307,25" value="118" offsets="0,0,0,0"></char>
                          <char location_topleft="308,0" location_bottomright="328,25" value="119" offsets="0,0,0,0"></char>
                          <char location_topleft="329,0" location_bottomright="343,25" value="120" offsets="0,0,0,0"></char>
                          <char location_topleft="345,0" location_bottomright="359,25" value="121" offsets="0,0,0,0"></char>
                          <char location_topleft="361,0" location_bottomright="373,25" value="122" offsets="0,0,0,0"></char>
                          <char location_topleft="0,25" location_bottomright="17,50" value="65" offsets="0,0,0,0"></char>
                          <char location_topleft="20,25" location_bottomright="34,50" value="66" offsets="0,0,0,0"></char>
                          <char location_topleft="36,25" location_bottomright="52,50" value="67" offsets="0,0,0,0"></char>
                          <char location_topleft="55,25" location_bottomright="71,50" value="68" offsets="0,0,0,0"></char>
                          <char location_topleft="75,25" location_bottomright="87,50" value="69" offsets="0,0,0,0"></char>
                          <char location_topleft="91,25" location_bottomright="103,50" value="70" offsets="0,0,0,0"></char>
                          <char location_topleft="104,25" location_bottomright="121,50" value="71" offsets="0,0,0,0"></char>
                          <char location_topleft="125,25" location_bottomright="140,50" value="72" offsets="0,0,0,0"></char>
                          <char location_topleft="143,25" location_bottomright="151,50" value="73" offsets="0,0,0,0"></char>
                          <char location_topleft="153,25" location_bottomright="162,50" value="74" offsets="0,0,0,0"></char>
                          <char location_topleft="166,25" location_bottomright="182,50" value="75" offsets="0,0,0,0"></char>
                          <char location_topleft="184,25" location_bottomright="196,50" value="76" offsets="0,0,0,0"></char>
                          <char location_topleft="199,25" location_bottomright="215,50" value="77" offsets="0,0,0,0"></char>
                          <char location_topleft="220,25" location_bottomright="234,50" value="78" offsets="0,0,0,0"></char>
                          <char location_topleft="238,25" location_bottomright="255,50" value="79" offsets="0,0,0,0"></char>
                          <char location_topleft="259,25" location_bottomright="271,50" value="80" offsets="0,0,0,0"></char>
                          <char location_topleft="273,25" location_bottomright="291,50" value="81" offsets="0,0,0,0"></char>
                          <char location_topleft="294,25" location_bottomright="310,50" value="82" offsets="0,0,0,0"></char>
                          <char location_topleft="311,25" location_bottomright="326,50" value="83" offsets="0,0,0,0"></char>
                          <char location_topleft="328,25" location_bottomright="344,50" value="84" offsets="0,0,0,0"></char>
                          <char location_topleft="346,25" location_bottomright="360,50" value="85" offsets="0,0,0,0"></char>
                          <char location_topleft="0,50" location_bottomright="17,75" value="86" offsets="0,0,0,0"></char>
                          <char location_topleft="19,50" location_bottomright="42,75" value="87" offsets="0,0,0,0"></char>
                          <char location_topleft="44,50" location_bottomright="60,75" value="88" offsets="0,0,0,0"></char>
                          <char location_topleft="62,50" location_bottomright="78,75" value="89" offsets="0,0,0,0"></char>
                          <char location_topleft="79,50" location_bottomright="94,75" value="90" offsets="0,0,0,0"></char>
                          <char location_topleft="96,50" location_bottomright="110,75" value="48" offsets="0,0,0,0"></char>
                          <char location_topleft="113,50" location_bottomright="124,75" value="49" offsets="0,0,0,0"></char>
                          <char location_topleft="127,50" location_bottomright="140,75" value="50" offsets="0,0,0,0"></char>
                          <char location_topleft="143,50" location_bottomright="155,75" value="51" offsets="0,0,0,0"></char>
                          <char location_topleft="158,50" location_bottomright="172,75" value="52" offsets="0,0,0,0"></char>
                          <char location_topleft="175,50" location_bottomright="187,75" value="53" offsets="0,0,0,0"></char>
                          <char location_topleft="190,50" location_bottomright="204,75" value="54" offsets="0,0,0,0"></char>
                          <char location_topleft="205,50" location_bottomright="219,75" value="55" offsets="0,0,0,0"></char>
                          <char location_topleft="221,50" location_bottomright="234,75" value="56" offsets="0,0,0,0"></char>
                          <char location_topleft="237,50" location_bottomright="250,75" value="57" offsets="0,0,0,0"></char>
                          <char location_topleft="253,50" location_bottomright="269,75" value="43" offsets="0,0,0,0"></char>
                          <char location_topleft="273,50" location_bottomright="281,75" value="45" offsets="0,0,0,0"></char>
                          <char location_topleft="283,50" location_bottomright="298,75" value="62" offsets="0,0,0,0"></char>
                          <char location_topleft="302,50" location_bottomright="317,75" value="60" offsets="0,0,0,0"></char>
                          <char location_topleft="322,50" location_bottomright="325,75" value="46" offsets="0,0,0,0"></char>
                          <char location_topleft="331,50" location_bottomright="334,75" value="58" offsets="0,0,0,0"></char>
                          <char location_topleft="339,50" location_bottomright="344,75" value="39" offsets="0,0,0,0"></char>
                          <char location_topleft="345,50" location_bottomright="356,75" value="34" offsets="0,0,0,0"></char>
                          <char location_topleft="357,50" location_bottomright="372,75" value="61" offsets="0,0,0,0"></char>
                        </font>
                        Attached Files
                        Fusion Brain Version 6 Released!
                        1.9in x 2.9in -- 47mm x 73mm
                        30 Digital Outputs -- Directly drive a relay
                        15 Analogue Inputs -- Read sensors like temperature, light, distance, acceleration, and more
                        Buy now in the MP3Car.com Store

                        Comment


                        • #13
                          You may find this interesting and useful: http://www.mp3car.com/fusion-brain/1...ml#post1489665

                          It is how to use Visual Studio to write custom code. A writeup will be coming eventually.
                          Fusion Brain Version 6 Released!
                          1.9in x 2.9in -- 47mm x 73mm
                          30 Digital Outputs -- Directly drive a relay
                          15 Analogue Inputs -- Read sensors like temperature, light, distance, acceleration, and more
                          Buy now in the MP3Car.com Store

                          Comment


                          • #14
                            Actually this is the more complete one here: http://www.mp3car.com/fb-documentati...mentation.html

                            Please let me know if this helps.
                            Fusion Brain Version 6 Released!
                            1.9in x 2.9in -- 47mm x 73mm
                            30 Digital Outputs -- Directly drive a relay
                            15 Analogue Inputs -- Read sensors like temperature, light, distance, acceleration, and more
                            Buy now in the MP3Car.com Store

                            Comment


                            • #15
                              I've just come back to this project after putting it on the back burner over winter. The amount of effort you've put into that write-up is incredible, and it's really given me a boost to get the FB back out and working again.

                              For a complete noob you've given me an overwhelming level of support, so I'll work through your write-up and get back to you on any inconsistencies or confusing points that show up. I won't ask you to teach me C#, but I'll show my working out for any other noobs to follow.

                              Thanks a lot for this!
                              http://sticksout.blogspot.com

                              Comment

                              Working...
                              X