Announcement

Collapse
No announcement yet.

Progress Bar Help

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

  • Progress Bar Help

    Hi,

    I'm trying to create a progress bar using the two images below:





    The first image is empty progress, the second full. I'd like the second image to gradually replace the first, is that possible?

    All I seem to achieve so far is the second image sliding in from the left, which doesn't create the desired effect.

    I achieved this with a Nextion display relatively easily, as below:


    https://www.youtube.com/watch?v=VMfHWnx3MTY

    Please advise

    Tim

  • #2
    Hello,

    You could make the Green/red image static and have another white Layer over it that gradually uncovers the image, much similar to what's done here:


    Smart Widgets Horizontal Slider

    http://www.4dsystems.com.au/appnote/4DLS-AN-00031S/
    Michael

    Comment


    • #3
      Hi 84sys,

      Welcome to the forums.

      Our display modules works differently. For this scenario, you would need more than 2 images to create a progress bar.

      For example, our coolgauge widget (go to widgets > gauges > cool gauge), where it has a maximum value of 100. Meaning it has 100 frames of images that shows the gradual progression of the widget from 0 to 100. For example, we provided a value of 50 to the coolgauge, the widget will then move from 0 to 50 gradually.

      In your scenario, you might need to map the your values (0-RPM) to (0-100 frames).

      You can read on this application note on how to create your own customized gauge:

      Designer or ViSi Custom Gauges
      http://www.4dsystems.com.au/appnote/4D-AN-00079/

      What 4DGL environment are you using?

      Comment


      • #4
        Hello,

        I have made a function that will use your 2 images if they are placed on top of each other. but it is a ViSi example and can't be used with ViSi-Genie. I have attached a demo,

        The function is called using,

        ImageSlide(Baseimage, Coverimage, Range, Value);

        I hope this helps

        Best regards

        Paul
        Attached Files

        Comment


        • #5
          Hi,

          Thanks a lot for your help with this, I'll hopefully have some time this evening to go through your suggestions.

          My current project is using ViSi-Genie (I'm quite new to this) and figured that would be the easiest way to get started.

          To give you a little further information on my project, and perhaps throw a bit of a spanner in the works. I am simply using the screen to display values sent to it from a Teensy 3.2 micro-controller, I use the teensy thanks to it's on-board CAN compatibility.

          So far my 4D project is working well in this fashion, just minus the rev counter. I have created custom digits, etc and this all works fine. I'm hoping I don't have to compromise the look of the rev counter to get it to work correctly with 4D.

          Thanks

          Tim
          Last edited by 84sys; 8th February 2018, 01:52 AM.

          Comment


          • #6
            Originally posted by pauleilio View Post
            Hello,

            I have made a function that will use your 2 images if they are placed on top of each other. but it is a ViSi example and can't be used with ViSi-Genie. I have attached a demo,

            The function is called using,

            ImageSlide(Baseimage, Coverimage, Range, Value);

            I hope this helps

            Best regards

            Paul
            Is it possible to interact with this method using the Arduino library?

            Thanks

            Comment


            • #7
              Hello,

              It could only be used in Visi-genie using Magic code with Workshop Pro. You don't have to compromise the look of your Rev counter. The function was merely a time saving, The method Kevin suggested will give you the result your after. I will look into a quick way of creating the images needed for your Rev counter. I will also turn this function into a magic object that you can try.

              Best regards

              Paul

              Comment


              • #8
                Hello,

                This is a Visi-genie example using a magic object.

                I hope this helps.

                Paul
                Attached Files

                Comment


                • #9
                  Paul,

                  Thanks for that!

                  I've been trying to track down an app-note, or some documentation of how I interact with a magic object from Arduino, but am so far struggling.

                  Can you point me in the direction of some resource to help, please?

                  Thanks

                  Comment


                  • #10
                    There may be something in here which will be helpful
                    http://forum.4dsystems.com.au/forum/...elp-or-inspire
                    James

                    Comment


                    • #11
                      Hello,

                      I will test this shortly but this is the command from the Arduino for Magic object, genie.WriteObject(GENIE_MAGIC_OBJECT, 0, 1); the last value being the value to send to the revcounter.

                      You can also test the Magic object with the GTX tool under the Tools tab in Workshop.

                      Best regards

                      Paul

                      Comment


                      • #12
                        That simple? I could have probably just tried that one myself, couldn't I?

                        I've not actually had chance to sit at my work bench and try this stuff yet, hoping to find some time later this evening to do so.

                        Thanks so much for your help so far, impressed with your level of service!

                        Comment


                        • #13
                          Hi,

                          I got this running this evening.

                          Using the magic object code snippet from Paul causes a significant impact on performance. It's hard to show in a video, but below are two videos, both sending the same data to the display, one with the magic object, one without. I dropped the range from 800 to 100 to see if this had any effect, and if anything made things worse.


                          https://www.youtube.com/watch?v=suJCIb7PK6o


                          https://www.youtube.com/watch?v=1kwL3WlNd2w

                          I am communicating with the display at 200000 baud.

                          Any suggestions for next steps? I feel we are close, just some performance tweaking to undertake.

                          Thanks again for your help so far.

                          Tim

                          Comment


                          • #14
                            silly hack, you could also duplicate the widget and use the spare (which is overlapped) as current so its fresh, then you can wipe the one behind as a background process, swap when needed

                            Comment


                            • #15
                              Hi Tim,

                              Glad you got it running, Yes we can indeed tweak this to improve performance. As it is, we are drawing the full Rev-counter each time and we only need to draw the part that has changed. We need to introduce a new global called lastRevs and I will modify the function to just draw what has changed.

                              Paul

                              Comment

                              Working...
                              X