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

 

Untitled.png

 

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

 

badge.bmp

 

 

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

 

Untitled.png

 


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