12 Replies Latest reply on May 7, 2014 12:22 AM by user19752

    HTML5 Canvas Signature Block Double-Tap To Draw

    eleigh

      I have hacked together some HTML code that creates a signature block that will be displayed in a web viewer. The code seems to work perfectly when loaded in IE10 as a plain old .html, but when it is used inside a web viewer in filemaker advanced pro 13 the user must double tap the screen to start "drawing" their signature and double tap to begin drawing again after having lifted their finger. I am wondering if there is a way to begin drawing without having to double tap. Hopefully the user would be able to just touch the screen and begin signing. Thanks for any advice you may have.

        • 1. Re: HTML5 Canvas Signature Block Double-Tap To Draw
          mikebeargie

          Might want to check this out:

          https://www.geistinteractive.com/products/filemaker-drawing-tool-godraw/

          Super easy to implement and fully featured.

           

          As for your current issue, you can try using a "Go To Object - Select/Perform" script step to "activate" your web viewer. In a browser, the page loaded is always "active", but in filemaker, the webviewer is an object inside of a layout that needs to be activated.

          1 of 1 people found this helpful
          • 2. Re: HTML5 Canvas Signature Block Double-Tap To Draw
            beverly

            FMGo or ??

            Beverly

             

            p.s. there is probably JavaScript (jquery or roll-your-own) that detects/disables doubletap

            • 3. Re: HTML5 Canvas Signature Block Double-Tap To Draw
              mikebeargie

              I was confused as well, in his post he said FMPA13, so I assumed he was just using the desktop version. But double tap indicates Go!

               

              GoDraw works on the desktop too, which is why I recommended it.

              • 4. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                eleigh

                Sorry folks, this is filemaker pro advanced 13 and not filemaker go. 

                 

                I'm going to try the script you suggested, but we don't really have the budget to keep buying stuff. 

                • 5. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                  beverly

                  or any touch screen monitor?

                  • 6. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                    beverly

                    javascript = FREE (but costs in work you have to do...)

                    just search for 'HTML5 disable doubletap' and you probably can get some good ideas.

                    Beverly

                    • 7. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                      eleigh

                      I sort of stumbled upon something ... 

                       

                      We are developing on a desktop and deploying a standalone runtime to Dell XPS tablets.  Like I said before, the html I wrote works perfectly when loaded in internet explorer on the tablet.  I can set my finger on the canvas and draw any shape or direction without double-tap,  Just use a single touch and drag to draw.

                       

                      Now, I just noticed that when I am using the filemaker runtime on the tablet and I try to draw a horizontal line I can start with just a single touch and drag my finger accross the canvas.  When I try to draw a verticle line on the same canvas it does not work.  I have to do the double-tap to begin drawing verticle.  If I start drawing horizontal I can continue drawing in any direction, but if I lift my finger it will not start drawing verticle without a double-tap.

                       

                      So,  because internet explore works fine, I'm wondering if filemaker is somehow interpretting my code differently or maybe filemake and windows 8 or the tablet are having compatability issues with touch events. 

                       

                      Any ideas?

                      • 8. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                        steve_ssh

                        Hello Eleigh,

                         

                        In such a case, the first thing that I would do would be to make a special debug version of the code going in your webviewer, i.e. something which outputs some log info regarding when it detects the various touch events so that you can get some insight into what is happening differently in the webviewer versus the browser.  This could be something as simple as adding a textarea element to the HTML, which you then update to append log messages.

                         

                        HTH & Best,

                         

                        -steve

                        1 of 1 people found this helpful
                        • 9. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                          eleigh

                          I added an alert popup to an "if" statement that checks for msPointerEnabled then adds event listeners for the appropriate mouse, or pointer, events. 

                           

                          The interesting thing is that when using internet explorer my code finds that msPointer is enabled and it initiates the MSPointerDown and MSPointerUP listeners. 

                           

                          When I am using the web view in filemaker pro it does not find that MSPointer is enabled and skips down to my "else" statement to load the mouse event listeners. 

                           

                          I wonder if the older touch events would load or if filemaker is only coded to interpret mouse events as touch?

                           

                           

                           

                          Edit:  I checked for the older touch events and it seems that filemaker will not support those either. IE10 with windows 8 on a dell xps will support mspointer events and mouse events, but it also will not support the older touch events.

                          • 10. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                            steve_ssh

                            A couple of comments/questions:

                             

                            1)  Not that this would necessarily help you solve this, but I'd be curious to know what differences you see in the Navigator object, comparing the browser and the webviewer.  I've never done any of this type of work on a Windows machine, but I seem to recall others reporting that there is (or can be) a difference.

                             

                            2)  Now that you know what you are up against, does it seem possible to get the code to perform as desired using just the mouse events?

                             

                            Best,

                             

                            -steve

                            • 11. Re: HTML5 Canvas Signature Block Double-Tap To Draw
                              eleigh

                              (1) 

                               

                              The only difference seems to be in the browser version compatability.  Filemaker does not seem to support:  Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729.

                               

                               

                              Tablet:
                              Browser CodeName: Mozilla

                              Browser Name: Microsoft Internet Explorer

                              Browser Version: 5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

                              Cookies Enabled: true

                              Browser Language: undefined

                              Browser Online: true

                              Platform: Win32

                              User-agent header: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

                              User-agent language: en-US

                               

                              Filemaker:

                              Browser CodeName: Mozilla

                              Browser Name: Microsoft Internet Explorer

                              Browser Version: 5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)

                              Cookies Enabled: true

                              Browser Language: undefined

                              Browser Online: true

                              Platform: Win32

                              User-agent header: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)

                              User-agent language: en-US

                               

                              (2)

                               

                              With my limited knowledge of coding I am at a loss.  I can add event listeners and simple functions, but I have yet to find something that would make this application work the way I want.