5 Replies Latest reply on Mar 18, 2013 1:10 PM by steve_ssh

    How to get WebViewer to stop flashing?

    carlo.m

      Part of a solution I'm working on involves displaying active orders to a Kitchen. Because orders vary in length, I opted to display them to kitchen staff via a webviewer that basically takes up the whole layout. With the Webviewer, I can have 5 orders in one column, or 3, or 1...

       

      A script loops through the open orders and creates the HTML code needed to properly display them. The final step of the process is setting the global variable with the webviewer content and then setting the webviewer to that variable.

       

      When the Layout is entered a script trigger sets an ontimer script that runs the "update" script every 1 second. That way the kitchen view is "live" and the running timer for the orders can properly display the time since the customer ordered.

       

      On some computers, the layout flashes every some seconds... Its not a constant, sometimes every second, sometimes every 3, sometimes after 5 then 3 then 6 then 1... On other computers, it doesn't flash... I don't think it is performance related. I've run the update script on a timer to see how long it is taking, and it can take less then 200 miliseconds or 600 miliseconds with many orders and still flash.

       

      I've tried to use java script, setting the content of the webpage to "display:none;" and then running a script at the end of the page to set that element to "display:block;" and it didn't work, I still get the exact same unrpredictable flashing. I also tried setting an "onload" trigger for the body that changed the element from "display:none;" to "display:block;" and that did not work either.

       

       

      Any ideas?

        • 1. Re: How to get WebViewer to stop flashing?

          Carlo,

           

          Run the script only when the contents changes, not every second.

           

          I think you have a Windows machine. If so, turn down the hardware accelleration of the system. (I'm not sure whether this is still valid for current Windows versions.)

           

          Winfried

           

           

          Check out FMDiff to compare two FileMaker files and test for file corruption at <http://www.fmdiff.com>

          Linkedin http://de.linkedin.com/pub/winfried-huslik/2/505/1a1/

          1 of 1 people found this helpful
          • 2. Re: How to get WebViewer to stop flashing?
            LyndsayHowarth

            Winfried's advise is solid.

             

            I think 1-second updates are a bit hard on the system but the way windows handles it with the flashing is just a tragedy.

             

            There may be a way to streamline your code so the html is being generated by an external page rather by your rapid calculation.

            I also expect that with the way you are doing it that there could be many of the bits of the code living as indexed calculated data to help speed things.

             

            - Lyndsay

            • 3. Re: How to get WebViewer to stop flashing?
              carlo.m

              The reason I run it every second is I need the stop watch to update. Every order on the screen must have a running timer, and when it reaches certain times the order header changes color (i.e. when reaches 4 min turns yellow, 6 min orange, 7 min red).

               

              Where can I find the hardware acceleration feature?

               

              Thanks

              • 4. Re: How to get WebViewer to stop flashing?
                carlo.m

                I thought the 1 second updates would be hard to, but when I ran tests and saw that it is only taking .1-.2 seconds (on very low computer specs) I thought it would be fine. There are several reasons I need the constant updates and not just when there is a new order. Any ideas you have on how I might adapt the script, javascript, html or css to reduce this need are much appreciated.

                 

                1) Each order must have a running timer so operators know how they are doing

                2) When certain times are reached, the colors in the header change (0-4 min green, 4-6 min yellow, 6-7 min orange, >7 min red)

                3) When there is an order that is in progress (i.e. customer is actively ordering with cashier) the order is updated live to the Display System so they can get a head start.

                 

                Most everything on the calculation is stored. The only unstored parts are:

                a) the running time (there is a place holder in the order html that is substituted on evaluation of order)

                b) the color of the header is similar to (a) with a placeholder that is substituted

                c) orders that aren't yet finalized (i.e. customer actively ordering) is pulled from unstored calc field because it is still changing until payed.

                 

                I would appreciate any ideas you can give me that might help optimize this. For example, what can I do with an external page? Or how can I get the timer and color to be HTML/Javascript?

                 

                Thanks!

                • 5. Re: How to get WebViewer to stop flashing?
                  steve_ssh

                  carlo.m wrote:

                   

                  Any ideas you have on how I might adapt the script, javascript, html or css to reduce this need are much appreciated.

                   

                  1) Each order must have a running timer so operators know how they are doing

                  2) When certain times are reached, the colors in the header change (0-4 min green, 4-6 min yellow, 6-7 min orange, >7 min red)

                  3) When there is an order that is in progress (i.e. customer is actively ordering with cashier) the order is updated live to the Display System so they can get a head start.

                   

                  I would appreciate any ideas you can give me that might help optimize this. For example, what can I do with an external page? Or how can I get the timer and color to be HTML/Javascript?

                   

                   

                  Hello Carlo,

                   

                  If you have some Javascript skills (or if you are willing to learn such skills), you might try using Javascript to help take care of items #1 and #2 on your list.

                   

                  Using the timing features of Javscript may not give you super-precision timing capabilities, but it may be sufficient to meet your needs of dynamically updating a time display including formatting header colors.

                   

                  Note:

                   

                  I would not use the Javascript to act as a full replacement to a periodic refresh triggered by FileMaker, but rather as an additional methodology for keeping the screen looking up-to-date.  A combination of both the FileMaker refresh and the Javascript might allow you to trigger the screen refreshes on a less frequent basis and still keep a reasonably up-to-date display.

                   

                  Below I'll mention some topics that you could check out if you are interested in pursuing this.

                   

                  Kind regards,

                   

                  -steve

                   

                   

                   

                   

                  Here is a sketch of what I think you might study up on if you'd like to try using Javascript to improve your solution:

                   

                      1) Learn some basic Javascript syntax

                   

                   

                      2) Learn how to use Javascript to access a DOM element within your HTML.

                   

                          I'd suggest adding id attributes to your target elements, and then access them using the   getElementById()   method.

                   

                              Example:

                   

                                   var myTargetElement = document.getElementById( 'time_display_meal_001' );

                   

                              Reference:

                   

                                   http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

                   

                   


                      3) Learn how to dynamically modify the value of a page element.

                   

                          I'd suggest looking into using the  innnerHTML  property of a DOM element.

                   

                              Example:

                   

                                   myTargetElement.innerHTML = '3:06';

                   

                              Reference:

                   

                                   http://www.w3schools.com/jsref/prop_html_innerhtml.asp

                   

                   

                   

                      4) Learn how to dynamically assign a CSS class to a DOM element.

                   

                         There are various ways that this can be done.

                   

                              One way would be to make use of the  setAttribute()  method.

                   

                              Example:

                   

                                  myTargetElement.setAttribute( 'class', 'new_order' );

                   

                   

                              Reference:

                   

                                  http://www.w3schools.com/jsref/met_element_setattribute.asp


                   

                   

                      5) Learn how to define some CSS classes, so that you can define various styles for different order states.

                   

                   

                      6) Learn how to use a Javascript timing method called:  setInterval()

                   

                              Reference:

                   

                                  http://www.w3schools.com/js/js_timing.asp

                   

                   

                   

                      7) Learn about the Javascript Date  object.

                   

                              Reference:

                   

                                  http://www.w3schools.com/jsref/jsref_obj_date.asp


                   

                      8) Be willing to do a lot of testing.  Do everything that you can to try out any scenario that you think of which could break your code.  Leave it and come back another day and test some more.

                   

                   

                   

                  Good luck!

                  1 of 1 people found this helpful