No announcement yet.

Custom Gauge - ViSi UserImages - Full Demo

  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom Gauge - ViSi UserImages - Full Demo


    Here is a simple ViSi project, which illustrates how to use the User Images widget to create a custom Gauge.

    The Gauge was made in part by Photoshop, and another by the free tool called ImageMagick (I downloaded this one: - via this page:

    What we did was create the base of the gauge, which is the Gauge without the needle. We then created the Needle in its '0' position, and then used ImageMagick to rotate the image 300 degrees to make the 301 images which make up the full scale. Image Magick was then used again to overlay the 301 needle images onto the base of the gauge, making 301 full images of gauge with needle, which is what is required to make this custom gauge work.

    In ViSi, a new project was made using one of our display modules, I picked the uLCD-35DT. This was selected in WS4 and a very simple program was written to simulate the gauge moving backwards and forwards over its full range of movement.

    Attached is the ViSi project, which contains all 301 images. (

    Attached also is the base gauge image, and the needle at position 0 image, along with the 2 scripts made to automate the image generation process, firstly making the 301 images of the needle, and then combining those needle images with the base gauge image.

    You are welcome to ask questions as required.

    I hope this has been of some help Click image for larger version  Name:	AutoMeter87.png Views:	2 Size:	91.9 KB ID:	43022

    Attached Files
    Last edited by James_4DSystems; 28 March 2018, 10:08 AM. Reason: Added to forum attachments directly

  • #2
    Hello James,

    I'm new to all of this including Arduino, Raspberry Pi, and know nothing about programming. WS4 is perfect for people like me who want to create gauge layouts without the hassle of building the graphic images. I've been talking back and forth to Mark about a project and he suggested I post a question for you. I have 2 angular gauges, sized down and placed side-by-side. The one on the left is a problem because I need it to move the pointer in a counter clockwise direction. The only way to get the pointer down to 60 is to make it -60 on the min and -126 on the max. It displays the numbers in negative (minus signs) fashion. What can I do to change this? I haven't tried to use it yet and I'm hoping you can help. It's on a 7" monitor w/ HDMI, VGA, and video inputs so I can switch between sources.

    Click image for larger version

Name:	EFIS_4D SYS_JPG_Screen 800x480_4.jpg
Views:	1030
Size:	51.8 KB
ID:	44060


    • #3
      Hello PR_D,

      Yes I have seen your posts on our Ticket System.

      Did you follow what I said above? The method above uses a graphics editor called ImageMagick. If you don't want to create a base graphic and a graphic of a needle and then use the tools and instructions provided above, then this method is not for you.

      Yes, ViSi-Genie is great at doing all sorts of things without the User having to know how it does it, but what you are wanting to do is not a standard problem, and thus ViSi-Genie does not have an off the shelf solution for you. So you are going to have to get your hands dirty one way or another to achieve what you are wanting to do. Mark gave you 2 solutions to achieve it, and our products are very capable of doing either of them.

      If you are happy with your Angular Gauge, then you can use Marks suggestion of editing each of the graphics that WS4 generated manually, to get rid of the negative sign. This would be the easiest method as you dont have to create anything or use any graphics programs you have not used before.

      If you don't want to have to edit each of the graphics manually, then you need to do what I suggested in the post above, and create a base gauge and a needle image, and then automatically generate all the images using the approach above. This is not using WS4 to do any of it, its all done in your chosen image editor (photoshop, GIMP, mspaint, or the like) and then ImageMagick which is a free download. You then just get WS4 to display the outcome which gives you your animated gauge.

      If you want to take Marks advise and use the GCI2BMP utility, then you should start a new topic as this is not appropriate for that method.
      If you want to do the above method, then sure, you can continue in here with questions you have.



      • #4
        Hi Again

        I just quickly whipped up the above method for your gauge.
        The issue is the gauge isn't in perfect 1 degree per tick mark iterations, which just means that you need to scale your input to suit the output to drive the gauge.

        So basically, your gauge has a scale of 60 to 126, so 67 values. The gauge I just made out of your information above runs through 0 to 125, so 126 values.
        So what you need to do in your Arduino (assuming you are using your arduino for this?) is to map it.

        output = map(input, 60, 126, 0, 125);

        This means, the input of value 60 to 126, will be scaled to a range of 0 to 125.

        All you need to do is download the attachment I have attached in this message, and you will find the 126 images inside. Unzip them somewhere. Open up your WS4 Project, select the 'User Images' widget, and then select all 126 images. It should order them from 0 to 125 for you. You then just need to write to that UserImages widget using the genie.WriteObject(GENIE_OBJ_USERIMAGES, 0, output); type function (assuming it is UserImages0 you are directing this at), and the output variable is from the map function above. So now when you drive you input from 60 to 126, your gauge should move accordingly.

        I hope that helps.

        Do let me know how you get on.

        Example of 1 of the images in the set: Click image for larger version

Name:	Meter48.png
Views:	957
Size:	5.8 KB
ID:	44068



        • #5
          Hello James,

          Thank you very much for all the information and doing the images!!! I'll probably try the different options to learn different ways to use the Visi-Genie system in WS4. I didn't realize the gauge had to be in 1 degree increments to operate. As I said before, this is all very new to me. Does this same technique need to be applied to the right side gauge as well? I'll do it anyway just to make them both have the same parameters.
          Thanks again to you and thanks to Mark for all his patience.



          • #6
            Hi Paul

            No the gauge doesn't have to be in 1 degree increments, but to do the method above it ideally needs to be. The reason for this is you take your static 'needle' picture, and rotate it 360 degrees, producing 360 images (for example, assuming the gauge was full, not just a 1/3 gauge like you are using). So each increment is 1 degree. Using the method I have done, its not possible to increment in fractions of a degree, as the script rotates by 1 degree and that degree number is also the number on the end of the picture, ie Needle0 through to Needle 359. You then take those images and overlay them on the background of the gauge, which gives you the final product.
            There are a few more steps involved in that, as ideally you want Meter0 to be on your 60 point, so you have to then get that in the right position to start with, and then generate the images.

            Its simple but its complex at the same time, you just need to think about what you are trying to achieve that's all.

            I would suggest you just leave your right hand gauge as you have it already, and then change the left hand gauge to be what I did for you above. At least to start with.
            Then you can play and try and make the right hand gauge the same if you want.
            If you leave your right hand gauge the same and use the left hand images I made, then likely your driving code will be different (unless you use the map function I provided). This should then get them both to be controlled the same way. I hope. Haven't seen your code so cant really tell though.

            Have a play anyway. If after attempting this yourself, you are stuck, just send another message and ill create the right hand set for you.

            I have attached the base images I used to create those, so you have them on file.

            Attached Files


            • #7
              Hi James,

              I'm glad you posted this before I started to redo the left gauge. I'll leave the right gauge alone for now. It is more complex than I thought after seeing the two new files. I haven't used WS4 for quite some time so it will be a relearning curve. I did plan on using the map function you provided and read somewhere on this forum where that was required in another project. A 'practice' gauge needs to be created so I can use that to play with until I get the correct results. It will be a couple of days before I can get back to WS4, as work (I'm an engineer) pays the bills and comes first. I'll let you know if (when) I run into trouble.



              • #8
                Hi everybody!

                I need to make my own gauges. I investigated information here, but please clarify some points for me.

                1. How to create these a lot of pictures from base gauge + needle pictures? What are these SCRIPS - where they were created?

                2. How to import my a lot of pictures into VISI ? (by programming manually - then compile - and then copy to uSD card of display ? ) or what?


                • #9
                  Hi Alex,
                  As per your other post which is the same questions.

                  1) You create 1 picture of the needle, and 1 picture of the base of the gauge, as per the instructions above. You then use the scripts provided, or you write your own, using the functions available in Image Magick. It is a 3rd party product and is incredibly powerful. The scripts we have provided just use the functions they created in Image Magic, to produce what we wanted to demonstrate. Its up to you if you do it this method, or another method. Image Magic is just 1 example, you could use any other tool you want, this we found to be the easiest to use.

                  2) As per the demo above, you use the User Images widget in Workshop4, and just import the images you have created. You can then display/call them as required, which gives you your animated gauge.


                  • #10
                    what should I change in the ImageMagic script...If i want turn the needle in 0.5 degrees increments with a rotation of 180 degrees ?



                    • #11
                      Hello Daniel

                      Well the script uses the same number for image number as for the rotation degrees, so if you were to rotate only 0.5 degrees, you would need to have 2 variables as degrees and image number would no longer be in sync.
                      Sorry I dont know off the top of my head what you would need to change, I suggest you spend some time reading the imageMagick documenation on how to rotate in 0.5 degree increments, and then read up on batch scripts (some good sites around) and try and figure out how to have another variable in the mix for degrees of rotation and increment that manually.

                      I guess you could use another language other than batch scripts, that might be easier, as batch scripts are for sure a brain twister and really not that easy to understand and learn. Sadly you will need to read the imageMagick documentation and how to do this all I am sorry. ImageMagick is not our product. We simply used it as an example.

                      Sorry I cannot help much more at the moment, it would take potentially hours to figure it out. Please make a start yourself. I will try and allocate an engineer to look into this, however I cannot guarantee a speedy answer.



                      • #12
                        Hey James,
                        thanks for the info. I think it is a good idea to make it work with your "map" function.
                        So I can use your script.

                        If I generate 180 user images in 1 degree steps....with a value of 1 to 4 on the should I use the map function ?
                        The input values are .1 segmented. So I have 400 input values but only 180 images

                        Do you also have a good doku for your functions ?



                        • #13
                          Hi Daniel

                          'Our' map function? We do not have a map function. If you are referring to what I wrote in post #4 above, that is in reference to an Arduino Host. The Arduino has a map function.

                          Please refer to the Arduino website for their reference information:

                          I hope that helps



                          • #14
                            Hello, I want to make analog clock and build image for each second each minutes each hour is not good idea if I want keep my wife lol
                            any body can help me to do this?


                            • #15
                              Hello Philippe

                              Welcome to the forum.

                              Its possible to do it with the above method, as I did it myself, but there are some things you need to note.

                              Its 43200 images that need to be created, which is the number required to do hours minutes and seconds of an analog clock, and it takes up 4GB of space on the microSD card, for a clock which is 200x200 pixels in size. So one object will fill an entire FAT16 partition. Its possible to do it in RAW too.

                              When workshop takes these files, it takes quite a lot of time for it to process it and create the gci and dat files which get loaded onto the card, it looks like it crashes but if you wait it does come right and work. It takes some minutes.
                              It took me a few hours to make the clock using Imagemagick, and create the scripts, and then create all the individual images numbered from 0 to 32399.

                              So really, you need to weigh up whether you really want to do this, or if you can find a different method. Sure, it works, and when its compiled and running it runs beautifully. I created it for the uLCD-220RD round display module, and it works great. But each time you change something, you need to recompile, which takes some time. Just something you need to be aware of.

                              Attached are a few pictures of the ones I did. One was hours, minutes and seconds (43200 images). The other was just hours and minutes (720 images)
                              Click image for larger version

Name:	ClockHMS24908.png
Views:	970
Size:	39.9 KB
ID:	51542
                              Click image for larger version

Name:	ClockHM563.png
Views:	930
Size:	71.1 KB
ID:	51543