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 - or Paint.Net -
  2. A simple text editor such as NotePad++ -


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>
    <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">
    <img src="badge.bmp" alt="Badge" width="318" height="220" />


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 = "";  
* @type {String} url to the path of the lockscreen page  
*/ = "";

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












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 -