8 Replies Latest reply on Nov 12, 2013 9:51 AM by Peter Arcuri

    Save signature file on ET1 or Windows

    Robin West

      This is a RhoElements (framework) question.

      I'm trying to have a signature capture box that saves the bitmap to a local file.  Eventually I'm going to print it, but I've run into some issues.  Below is the important portions of the code:

       

      <META HTTP-Equiv="bottomcommandarea" content="show">

                          <META HTTP-Equiv="SignatureCapture" Content="width:350">

                          <META HTTP-Equiv="SignatureCapture" Content="height:120">

                          <META HTTP-Equiv="SignatureCapture" Content="left:10">

                          <META HTTP-Equiv="SignatureCapture" Content="top:400">

                          <META HTTP-Equiv="SignatureCapture" Content="penwidth:2">

                          <META HTTP-Equiv="SignatureCapture" Content="name:SIGCAP">

                          <META HTTP-Equiv="SignatureCapture" Content="pencolor:#000000">

                          <META HTTP-Equiv="SignatureCapture" Content="bgcolor:#FFFFFF">

                          <META HTTP-Equiv="SignatureCapture" Content="Visibility:Visible">

                          <META HTTP-Equiv="SignatureCapture" Content="Destination:url('file://\SIGCAP.bmp')">

                          <META HTTP-Equiv="SignatureCapture" Content="SignatureSaveEvent:url('javascript:alert('%s');')">

       

      function saveSignature()

                          {

                            //save signature capture area.

                            signatureCapture.capture();

                          }

       

      My first issue is that the destination URL doesn't work the same in both the ET1 and Windows OS devices.  The above code doesn't work on Windows, but does on ET1.  "Destination:url('file://\My Documents\SIGCAP.bmp')" works on Windows, but not ET1.   I need help finding a common location to save the file to that will work on all devices. 

      My second issue is that, when the file is saved, the bitmap file on the ET1 is larger then the file on Windows, using the same SigantureCapture box meta code.  The bitmap is 2 dots smaller both in height and length on Windows devices.  This isn't a big deal until I want to print it, and again need to have different code for the different devices.

      Any recommendations would be helpful.

        • Re: Save signature file on ET1 or Windows
          Marcus Atkins

          Could check which OS then depending on which OS save in different URLS.


          E.g.

             if System.get_property('platform') == 'ANDROID'

                    *ANDROID LOCATION*

             else

                    *OTHER LOCATION*

              end 

           

          ..or something similar

           

          Hope this helps, thanks

          1 of 1 people found this helpful
          • Re: Save signature file on ET1 or Windows
            Benedict Kennedy

            Hi Robin,

             

            The "System.get_property" code is currently Ruby only, I guess this wont work for you (as you look to be using HTML/JS). The way to do this in JavaScript is to query the navigator.userAgent object, which is the UserAgent of the web browser.

             

            Here is some example code based upon your code which will work for you:

             

            <html>
                      <head>
                                <META HTTP-Equiv="bottomcommandarea" content="show">
                                <META HTTP-Equiv="SignatureCapture" Content="width:350">
                                <META HTTP-Equiv="SignatureCapture" Content="height:120">
                                <META HTTP-Equiv="SignatureCapture" Content="left:10">
                                <META HTTP-Equiv="SignatureCapture" Content="top:400">
                                <META HTTP-Equiv="SignatureCapture" Content="penwidth:2">
                                <META HTTP-Equiv="SignatureCapture" Content="name:SIGCAP">
                                <META HTTP-Equiv="SignatureCapture" Content="pencolor:#000000">
                                <META HTTP-Equiv="SignatureCapture" Content="bgcolor:#FFFFFF">
                                <META HTTP-Equiv="SignatureCapture" Content="Visibility:Visible">
                                <META HTTP-Equiv="SignatureCapture" Content="SignatureSaveEvent:url('javascript:alert('%s');')">
                                <script type="text/javascript">
                                          function onLoad()
                                          {
                                                    if(navigator.userAgent.indexOf('Windows') !== -1)
                                                    {
                                                              signatureCapture.destination = "url('file:///My Documents/SIGCAP.bmp')";
                                                    }
                                                    else if(navigator.userAgent.indexOf('Android') !== -1)
                                                    {
                                                              signatureCapture.destination = "url('file:///SIGCAP.bmp')";
                                                    }
                                                    else
                                                    {
                                                              //Other OS
                                                    }
                                          }
                                          window.addEventListener('load', onLoad, false);
            
                                          function quit()
                                          {
                                                    application.quit();
                                          }
            
                                          function capture()
                                          {
                                                    signatureCapture.capture();
                                          }
                                </script>
                      </head>
                      <body>
                                <h1>Signature</h1>
                                <button onclick="capture()">Capture</button>
                                <button onclick="quit()">Quit</button>
                      </body>
            </html>
            

             

            This shows how to use and query the navigator.userArgent.

             

            The second issue that you reported is new to me and looks like a bug in RhoElements. I have created a bug report for this and hopefully we can get a resolution for this issue. As a workaround for the moment, you could set the height/width to be specific to the platform, so for Windows, the height and width are 2 pixels bigger. For example:

             

            if(navigator.userAgent.indexOf('Windows') !== -1)
            {
                      signatureCapture.width = '352';
                      signatureCapture.height = '122';
                      signatureCapture.destination = "url('file:///My Documents/SIGCAP.bmp')";
            }
            else if(navigator.userAgent.indexOf('Android') !== -1)
            {
                      signatureCapture.width = '350';
                      signatureCapture.height = '120';
                      signatureCapture.destination = "url('file:///SIGCAP.bmp')";
            }
            

             

            Best regards,

            Ben

            1 of 1 people found this helpful
              • Re: Save signature file on ET1 or Windows
                Robin West

                Thanks Ben,

                This is very helpful.

                 

                To be more specific,when the signature capture box is specified to be 350x120,

                1. the bitmap created by the Windows (MC75A) device created is 348x118 in size.

                2. the bitmap created by the Android (ET1) device is 350x120 in size.

                 

                So a 400x200 window = 398x198 BMP in Windows, etc.

                 

                I am just using the RhoElements runtime here, not the RhoMobile compiler.

                  • Re: Save signature file on ET1 or Windows
                    Benedict Kennedy

                    Hi Robin,

                     

                    I made a little mistake which I just fixed in the post above regarding Android dimensions.

                     

                    But yes, I experienced that with the Windows devices, 2px less on each dimension. I believe the issue is related to the implementation of the Windows signature capture. A window is created to the specified dimensions, and then a border of 1px is created inside that window, even if the border is invisible, that space will still be taken up by that border. As the border is on top, bottom, left, and right this adds up to 2px each side.

                     

                    I think the issue is related to the infamous Internet Explorer box-model bug, where the border is included within the "width" property, while the W3C standard defines the width to be the content box only. The bug on Windows RhoElements is probably down to the fact that this functionality came from our former product: the IE based PocketBrowser.

                     

                    So the work around as specified at the bottom of the last post should get around this issue while you're waiting for us to fix it from our end:

                     

                    if(navigator.userAgent.indexOf('Windows') !== -1)  
                    {  
                              signatureCapture.width = '352';  
                              signatureCapture.height = '122';  
                              signatureCapture.destination = "url('file:///My Documents/SIGCAP.bmp')";  
                    }  
                    else if(navigator.userAgent.indexOf('Android') !== -1)  
                    {  
                              signatureCapture.width = '350';  
                              signatureCapture.height = '120';  
                              signatureCapture.destination = "url('file:///SIGCAP.bmp')";  
                    }
                    

                     

                    Using this code should save a 350x120px .bmp image file on both Windows and Android.

                     

                    Best regards,

                    Ben

                • Re: Save signature file on ET1 or Windows
                  Guillermo James

                  Hi Robin, this is Guillermo James.

                   

                  I was surprise to found you in this forum, but happy to do it . Currently we are including in our RhoElement App (based on ET1) the signature feature, but besides the technical stuffs, I was wondering how the end user will sign in the ET1, is there a stylus or something like that. I know that Motorola's Windows based device include a stylus, buy the ET1 do not. I was looking as an accessory in the Motorola Web Site but it does not exist.

                   

                  Thanks for your answer.

                  Regards