How to set a new badge on the SB1

One of the common question I get is "How do I set a new badge onto my SB1?" so this blog is designed to help solve that question.

In order to do this, I would suggest the following things are installed, very likely you will have them installed

  1. A image editor such as MsPaint or GIMP - http://www.gimp.org/ or Paint.Net - http://www.getpaint.net/
  2. A simple text editor such as NotePad++ - http://notepad-plus-plus.org/download/v6.4.2.html

So now you have those installed we can get on editing the standard SB1 badge.

This is the normal badge which comes with the SB1, and we can customize this to your own requirements

There are 3 stages which are needed to be done:

Stage 1: Create your bmp for the badge.

The badge needs to be 350x240 pixels in size to fit the display. On this bmp you could put whatever you like :-)

Just save your images as greyscale and you may need to change the Hue on the image to get the best resolution on the SB1. This is where GIMP comes very helpful

Here I have created "My First Badge". Added an image and text to create the below

Stage 2 Create the files for the device

Now you have the bmp, we need to create the files which reference the BMP.


First we need a HTML page holder to display the badge

<!DOCTYPE html>

<html>

  <head>

    <META HTTP-Equiv="battery" Content="visibility:visible">

    <META HTTP-Equiv="battery" Content="Left:250">

    <META HTTP-Equiv="battery" Content="Top:50">

    <META HTTP-Equiv="battery" Content="Layout:Left">

    <META HTTP-Equiv="battery" Content="Color:#000000">

    <META HTTP-Equiv="Signal-Left" Content="200">

    <META HTTP-Equiv="Signal-Top" Content="50">

    <META HTTP-Equiv="Signal-Color" Content="#000000">

    <META HTTP-Equiv="Signal-Visibility" Content="Visible">

  </head>

  <body>

    <img src="badge.bmp" alt="Badge" width="318" height="220" />

  </body>

</html>

Here you can see in line 21 they link to the BMP file we have just created

I would suggest calling this Badge.html to go along with Badge.bmp

Now with that created we need to update the config file to reference the new badge. Firstly create a textfile called Config.js

Within this file place the text

/**  * @description sets a custom lockscreen/badge page 

* @example config.lockscreen.page = "http://www.example.com/badge.html"; 

* @type {String} url to the path of the lockscreen page 

*/

config.lockscreen.page = "http://127.0.0.1:83/Userdrive/apps/badge/badge.html";

This shows the location of the where the config lockscreen is - your badge

Now create a folder on the UserDrive/apps called badge

Within this place the badge.bmp and the badge.html

Now in the \UserDrive\Config place your Config.js

Your file structure should look as below

\UserDrive

        \Apps

               \badge

                    badge.html

                    badge.bmp

       \config

            config.js

Now reboot the unit by holding both the Scanner and the Home key and this will then reboot the unit.

Push the lock icon on the Home screen and your badge will appear


For more information please see the developer guide located here - http://support.symbol.com/support/search.do?cmd=displayKC&docType=kc&externalId=17099101apdf&sliceId=&dialogID=546152311&stateId=1%200%20546148379

Comments


You can set either in config.js or using asl API in your application.

Config.js

config.lockscreen.page = "http://www.example.com/badge.html"; //

OR

In your apps page

Asl.badge("http://www.example.com/badge.html");

Hope this helps.

Thanks

Chenna


Hi Mark,

It's works perfectly OK on the SB1 while it not connected with MWM server. How can I set this badge while SB1 being connected to MWM b/c it's goes back to Motorola default batch while it's connected to MWM.

Regards,

Mazhar


I could not get this to work on my fresh SB1, did everything as told. Any clues what I did wrong? Do  I need an external application? It appears my SB1 only show FusionData and Log.txt


Hello Garrick

Please send your user drive as zip and we will find the problem.

You can set badge in config.js either local html page or remote page. Or you can even set badge in your app using asl.badge(URL);

thanks

Chenna


Hi Venkatesh,

This is an archive of all the files in the SB1's root folder. Please take a look

https://dl.dropboxusercontent.com/u/38083409/sb1.zip


Hello Garrick

I found two issues.

  • You must edit config.js for lockscreen configuration and include all other variables as it is. Your config.js files has only one entry.
  • You must include asl.js even in badge page also.

Due to some reason i could not find attachment button here. I have sent  a mail to you with working sample.

Hope this helps.

thanks

Chenna


Thank you very much Venkatasubbaiah! Your support is very helpful and valuable to us. It is working perfectly now.


When logged into MWM, SB1 displays the contents of the file Badge.cshtml which is located in \MWMConsole\Areas\TSD\Views.

You can display the profile picture of the user by replacing logo.png with the user's picture using razor script/syntax.