Announcement

Collapse
No announcement yet.

Custom Gauge - ViSi UserImages - Full Demo

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

  • James_4DSystems
    started a topic Custom Gauge - ViSi UserImages - Full Demo

    Custom Gauge - ViSi UserImages - Full Demo

    Greetings

    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: http://mirrors-usa.go-parts.com/mirr...x64-static.exe) - via this page: http://www.imagemagick.org/script/download.php

    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. (AutoGaugeV3.zip)

    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




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

  • Gerrit
    replied
    Thank you very much for showing how to create custom gauges/dials. I used this approach to create custom knobs/dials and switches in a single control.



    The userImages controls contain 1280 images (120x120 pixels) depicting various knobs and switches. This way it is possible to have the UI adapt to the device it is representing/controlling. See this thread on the Teensy forum for details on the device: Poe powered OSC controller for Reaper DAW

    Leave a comment:


  • Vince_4D
    replied
    Hi again,

    May I know if you were able to use the exact files that I sent you in running the script file? I tested it and it is expected to run without error.
    If yes, could you provide an image of the error message? It might give some clues in knowing the problem.
    If you didn't, you probably used an image file with a different file name as stated in the script file. Kindly check and edit the script file if this is the case.

    Hope this will help.

    Best regards,

    Leave a comment:


  • AlexandruBC61
    replied
    It gives me error for the NeedleScript.
    Something with distort , it seems like is not recognized it.

    Leave a comment:


  • Vince_4D
    replied
    Hi AlexandruBC61, welcome to the forum.

    These are the steps needed for its implementation:
    1. Install ImageMagick, http://www.imagemagick.org/script/download.php
    2. Modify the line of code below located in the bat files (right click then click “edit”) by adding magick as shown below.
    a. NeedleScript.bat
    From: convert filename.png -distort SRT %%x outputFilename %%x.png
    To: magick convert filename.png -distort SRT %%x outputFilename%%x.png
    b. GaugeScript.bat
    From: convert baseImage.png superimposeImg%%x.png -geometry +0-0 -composite outputImg%%x.png
    To: magick convert baseImage.png superimposeImg%%x.png -geometry +0-0 -composite outputImg%%x.png
    3. Run the NeedleScript.bat file
    4. Run the GaugeScript.bat file

    Attached is the sample implementation.

    Expected output:
    NeedleScript.bat
    360 new Images (Needle0- Needle360)
    GaugeScript.bat
    300 new Images (AutoMeter0- AutoMeter300)

    Note:
    You can modify the number of output images by editing the bat file
    Used images must be in the same folder as the bat files


    Hope this will help.

    BR,
    Attached Files

    Leave a comment:


  • AlexandruBC61
    replied
    Hello James , I can't get the script to work , it says invalid parameter -distort , can you help me with my gauge?
    Attached Files

    Leave a comment:


  • deiviz
    replied
    Thank you James_4DSystems. That was really helpful.

    Leave a comment:


  • GeekInTraining
    replied
    Mark and James,

    Does this method of generating and layering images have a industry or trade name that I could google to learn more or find some other projects that have used it?

    I successfully designed my own gauge in inkscape and processed it in imagemagik and it works on the 7 inch display. Below is one of the pictures used in my animation.
    Attached Files

    Leave a comment:


  • Eewec
    replied
    Originally posted by ESPsupport View Post
    You could indeed do that.

    However, it would take 3 times longer to display each image and, depending on the size of the clock, you might see a flicker as the image is 'built up'.

    So, making individual images might take longer and chew up quite a bit of uSD space, but the end result will look heaps better
    Hmm. Tempted to make both types in multiple versions to see where the flickering starts and how many layers it takes before it becomes an unusable concept.... that'll be a project for the future when I'm not neck deep in research for the current one and working out how to power it all from a wall socket cleanly and without underpowering things, but that's a different thread.

    Leave a comment:


  • ESPsupport
    replied
    You could indeed do that.

    However, it would take 3 times longer to display each image and, depending on the size of the clock, you might see a flicker as the image is 'built up'.

    So, making individual images might take longer and chew up quite a bit of uSD space, but the end result will look heaps better

    Leave a comment:


  • Eewec
    replied
    Hmm. I'm going out on a limb here and assuming that the processor on this unit doesn't support image manipulation. Would make life a lot more simple if you could put 60 images of the second, minute and hour (6:30:00 would put the hour hand half way between 6 and 7) hands with transparent backgrounds on each and then a single background image. Then combine the four required images in order, one atop another. That would total 181 images stored. Surely there has to be a better way than making each and every image for all possible combinations..... there is a fairly powerful processor attached to this thing, surely there has to be something that can be done?

    Leave a comment:


  • filipdns
    replied
    off course, I will post my project probable during the week ;-)

    Leave a comment:


  • James_4DSystems
    replied
    Great news.
    Would love to see your project when you are finished - a video clip or something would be great.

    Regards

    Leave a comment:


  • filipdns
    replied
    Hello James thank you very much!!! All is working, I take 1h to understand how it they work but all has been done. I just change geometry to gravity center to have all my needles centred but that all. Thank you again. My last job will be to found how to convert time from my RTC to number to have the good frame to the good time ;-) kind regards Philippe

    Leave a comment:


  • James_4DSystems
    replied
    Hello Philippe

    Well there is an example script for the gauge in Post #1 of this topic. Its a DOS batch file.

    The clock however has quite a few more steps involved, and multiple scripts, as you have to first get the base of the clock image, and then generate the images for the hour hand, the minute hand, and the second hand, then you need to start laying them on top of each other and have the 60 second images overlay on the minutes, and the hours etc.
    I have the scripts, but I don't have a procedure as such to do it.

    There is one script to generate the hour hands, one script for the minute hands, one script for the second hands. You do those first. Then one script to overlay the hour hand on the base to make 360 degrees (360 images) of just the hour. Then another script to overlay the minute hand on top of that (but this one is more complex as the hour hand increments a little bit every few minutes so its more realistic). Then finally there is another script which overlays the second hands onto the Hour/Minute images. So its rather involved and took a while to figure it out. You then end up with the 43200 images after some processing!

    Attached are the scripts, however you will need to spend some time and figure out how they work.

    This is all ImageImagick, which is not a 4D Product and is not something we support, so you will need to do some research to figure it out 100%. In theory though you should be able to run each of the scripts to make the hands, and then run each of the scripts to overlay the hands on to the base and each other. Just have to check your path names for the last 3 scripts and change them to suit your PC.

    I hope that is of some help.

    Regards
    Attached Files

    Leave a comment:

Working...
X