13 Replies Latest reply on Apr 21, 2014 7:07 AM by Derek Warren

    SB1 Screen questions

    Robert Rapp

      All  - I'm new to the SB1 development have a couple questions regarding the screen.

      1) After launching my app, is there a way for the main screen to scroll to fit all the required data in?

      2) The units screen refresh (flickers) every 3 seconds. Where is the option to change this?

       

      Thanks,

      Bob

        • Re: SB1 Screen questions
          Daniel Silva

          You could probably implement  a scroll bar or something like that, but I would strongly suggest not doing that on this device.  It will be very frustrating for users to use something like that with a fingertip.  You really probably need to rethink the screen layout and just show the data that is most important on the initial screen and maybe give the user an option to use a large button to get to subsequent data.  You really need any touchable elements on the screen to be pretty large so that the user can use them with a fingertip. If you have touchable elements that have images on them, that usually also means that the image should be as big as the element itself.  I have seen instances where the image is smaller than a button for instance, and the  image is what gets the press, so the button does not work unless you press it right in the middle.

           

          As far as the flashing, E-Ink needs to clear the screen after X amount of data has been written to it, otherwise it starts getting "ghosting" of previous screen data under your intended screen view, so the driver keeps track of how much data has been written to the display and wipes the screen when it decides it needs to.  It sounds like you might have a moving element on the screen if it keeps doing this.  You want to minimize any animation on this device. The E-Ink display saves battery life because it only needs power when it is changing the display.  If the display data is not changing, the display draws no power.  If you have something moving on the display (like a rotating hourglass) battery life will suffer and you will get the excess flashing that you are seeing.

            • Re: SB1 Screen questions
              Robert Rapp

              I found the cause of the screen flickers. I have a textbox for our associates to enter their associate number. Since they can scan their badge, when the form loads I'm setting the focus to the textbox. This is causing the screen flickers. Is there a way to set the focus to a textbox without the keyboard trying to load?

                • Re: SB1 Screen questions
                  Venkatasubbaiah Chenna

                  Hello Rapp

                   

                  If we focus on any textfield cursor will blink even on PC. Because SB1 device is a eInk display device for each blink of cursor device screen repaints. We do not recommend users to use focus().

                   

                  You need not focus the text field to scan a bar code. You need to subscribe to scan event and get the scanned bar code data. Please find below sample code. This wil avoid flickering and bringing Keyboard

                   

                  function decodeEvent(a, b, c) {

                    document.getElementById('myScanData').value = a;

                            

                          }

                   

                  window.onload = function () {

                              scanner.enable();

                              scanner.decodeEvent = 'decodeEvent(%s)';

                          }

                   

                  <input type="text" id="myScanData" placeholder="Please scan your badge" />

                   

                  Hope this helps

                   

                  thanks

                  Chenna

                    • Re: SB1 Screen questions
                      Robert Rapp

                      Hello,

                       

                      That won't work for my app as I have 3 different text boxes that except scans so I can't harcode a textbox id. I'm using the below code:

                       

                      function decodeEvent(jsonObject) {

                      document.forms["scanner"].elements[document.activeElement.id].value = jsonObject.data;

                      }

                       

                      So this way whichever of my 3 textboxes has the focus receives the scanner data. I also need to set the focus to the next textbox once the previous textbox is populated. This causes the form to flicker constantly. Let me know if there is a solution as we're evaluating the SB1 units for purchase.

                       

                      Bob

                       

                       

                       

                       


                        • Re: SB1 Screen questions
                          Venkatasubbaiah Chenna

                          Option 1

                           

                          Manage a counter for each scan. first scan assign the barcode data to first input field and second and third scans respectively

                          var counter = 0;

                          function decodeEvent(jsonObject) {

                            if(counter == 0)

                            {

                            document.forms["scanner"].elements[1 input field].value = jsonObject.data;

                            counter++;

                            }

                            else if(counter == 1)

                            {

                            document.forms["scanner"].elements[2 input field].value = jsonObject.data;

                            counter++;

                            }

                            else if(counter == 2)

                            {

                            document.forms["scanner"].elements[3 input field].value = jsonObject.data;

                            counter = 0;

                            }

                           

                           

                          }

                           

                           

                          Option 2:

                           

                           

                          Onload open the first input field keyboard and scan and open a second keyoard and 3 keyboard

                           

                           

                          window.onload = openKeyboardForInput1;

                          function openKeyboardForInput1()

                          {

                            asl.showKeyboard({

                                  inputId: 'input1',

                                  title: 'first',

                                  type: 'text',

                                  scanner: true,

                                  back: true,

                                  maxlength: 10  // max length of the field for auto submit

                              }, function (id, value) {

                           

                           

                                  document.getElementById('input1').value = value;

                                  openKeyboardForInput2();

                                

                              });

                          }

                           

                           

                          function openKeyboardForInput2()

                          {

                            asl.showKeyboard({

                                  inputId: 'input2',

                                  title: 'input2',

                                  type: 'password',

                                  scanner: true,

                                  back: true,

                                  maxlength: 10

                              }, function (id, txt) {

                                  document.getElementById('input2').value = txt;

                                  openKeyboardForInput3();

                              });

                          }

                           

                           

                          function openKeyboardForInput3()

                          {

                            asl.showKeyboard({

                                  inputId: 'input3',

                                  title: 'input3',

                                  type: 'text',

                                  scanner: true,

                                  back: true,

                                  maxlength: 10

                              }, function (id, txt) {

                                  document.getElementById('input3').value = txt;

                                 

                              });

                          }

                           

                          thanks

                          Chenna