Babbleboard LED IoT Developer API

You can do everything you need with the web app. However you can extend the use of the Babbleboard LED IoT by using the developer API. You may want to integrate a web service or schedule a web job to push out a new message without having to use the web app. This is how to do it.

Getting Started

The first task is to configure your Babbleboard to operate on your network. Please see the WiFi guide on how to do that once the Babbleboard is configured on your WiFi network it will be able to accept commands on a particular ip address the ip address will be a local ip on your WiFi network. The Babbleboard will start displaying the WiFi network and the ip address that it is avialable on. Make a note of the ip address as that will be used in the code when you communicate via the API.

The Next Step is to go to the Settings tab Then < /> Developer API tab and create a new API key. In this tab there are a few activities to carry out. You can always create a new API key whenever you have a need to. However the Babbleboard does not register the API key until you select "Save the API Settings" That option will regsiter the ip address and the api key @ the Babblebaord The ip address that you specify is the server within your network that is going to be posting api calls to the Babbleboard. Once the API key and server ip have both been registered then you will be able to communicate via the api to the Babbleboard. All other api calls will be rejected. The "Save the API Settings" is an exclusive relationship between these two machines. Having selected "Save the API Settings" the Babbleboard will never re-transmit these settings. Importantly you must make a note of these settings as soon as you have completed the "Save the API Settings" activity. you can begin to start using these settings in your api calls. If you need to change the api key or ip you can always re-create a new key and a server ip at any time once you have access to the API Developer console but just make a note that everytime you Save the api key and ip it will be a new api key that you will then have to place inside your api code again.

"API On" and "API Off" options they literaly switch the api ability off or on @ the Babbleboard. Remember to switch the api on after you have selected "Save the API Settings"

If you do not have a seperate server to configure the api server you could use your PC that is connected to the same WiFi network as the Babbleboard. Simply find the ip address of your PC. This can be found out by by typeing command in the run entry line. Then type ipconfig from the displayed list look for the ipv4 address that will be the ip address to use from your PC

The following javascript code snippet shows how to use the api to send a scrolling message to be displayed @ the Babbleboard. This example will show "Hello World" scrolling text with text color white and background color black @ the Babbleboard.

                                            function sendapi()
                                            {
                                            var apisetup="";    
                                            var apikey="c806e8ca-46b9-4869-967f-3565e7c588bf"  // your api key will be different
                                            apisetup = JSON.stringify({"API":apikey,"TEXT":"Hello World","FCOLOR": "255255255","BCOLOR":"000000000"}); 
                                              
                                              xhr = new XMLHttpRequest(); 
                                                
                                              xhr.open("POST","http://10.0.0.168/babble.html", true);
                                              // Your ip address will be different
                                             xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
                                            
                                              xhr.onreadystatechange = function ()
                                                
                                              { 
                                                    if (xhr.readyState == 4    xhr.status == 200) 
                                                  
                                                {
                                                          var json = xhr.responseText.substring(xhr.responseText.length -9).trim();
                                                 
                                                      if (json == "success")
                                                            {
                                                              return;
                                               
                                                         }
                                                      }
                                                  }  
                                             
                                             xhr.send(apisetup);
                                            }
                                    

API Language

The scrolling text uses a simple json string to define the scrolling text. Adding any text and background color combinations for your scrolling text.

Following is a Hello World scrolling text example with red text and black background color.
 
JSON.stringify({"API": apikey,"TEXT":"Hello World","FCOLOR":"255000000","BCOLOR":"000000000"}); 
					

TEXT

Defines the words used in the scrolling text display.

FCOLOR

The foreground or text color. The positional format is REDGREENBLUE 255255255. Red on its own would be 255000000 green would be 000255000 and blue 000000255. To have any customised color you can define any value of Red Green and Blue so long as the color space for each color does not exceed 255 and takes up 3 characters. Magenta is 255000255 and yellow is 255255000

BCOLOR

Background color. The same RGB concept is available for the background color

API Functions

The following API functions compliment the usage of the scrolling text behaviour. The simple javascript code snippet shows how to use the api. Substitute any of the api methods as the activity value in the following code.

  
                                                var activitytext="";  
                                                var activity ="Stop";
                                                var apikey ="6d343f27-4c12-4871-a338-0f316934ce68"; //Please note your api key will be different.
                                                activitytext = JSON.stringify({"API": apikey,"FUNCTION":activity});   
                                                xhr = new XMLHttpRequest();     
                                                xhr.open("POST","http://10.0.0.168/babble.html", true); //Please note your ip address will be different.
                                                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
                                                xhr.onreadystatechange = function ()
                                                    { 
                                                      if (xhr.readyState == 4 && xhr.status == 200)
                                                        {
                                                            var json = xhr.responseText.substring(xhr.responseText.length -9).trim();
if (json == "success") { return; } } } xhr.send(activitytext);

Brighter

Makes the display brighter.

Clear

Clears the display.

Stop

Stops the scrolling display.

Go

Re-Starts the scrolling display.

font

Basic Font.

font1

Tahoma Font

font2

Tahoma Font Bold.

font3

Times Font

font4

Times Font Bold

Flash

Sets the scrolling display in flash mode.

Invert

Inverts the display.

Reset

Resets the Babbleboard.

Reverse

Reverse the display.

Rotate

Rotate the display.

Larger

Increase the size of the scrolling text.

Smaller

Reduce the size of the scrolling text.

Up

Moves the text up.

Down

Moves the text down.

Faster

Increase the speed of the scrolling text.

Slower

Reduce the speed of the scrolling text.

Wrap

Text wrap scrolling text.

Sense

Toggles the sense feature OFF/ON. This gives the Babbleboard the ability to sense hotspots close by. When a hotspot is sensed the ad route or message will be displayed.

Drop

Drops all the hotspots registered with the Babbleboard. Good to clear out old and out-dated ads,routes or messages.

Javascript Example

The following code snippet shows how to use the API to invoke an Amber Alert. If you need to contantly invoke this alert look at making use of the powershell and scheduling examples This example will broadcast the latest amber alerts for the state you choose and then keep all the alerts scrolling on the display. This is achived by doing one Get request to www.missingkids.com with a valid State code. This example is using GA for Georgia. Once the get request has been performed the RSS feed is converted to a json string which is then posted via the API call. This example has black background with yellow scrolling text.

                                                    gatherData();

                                                    function  gatherData()
                             {
                               var State="GA";
                                  var url="https://api.rss2json.com/v1/api.json?rss_url=http%3A%2F%2Fwww.missingkids.com%2Fmissingkids%2Fservlet%2FXmlServlet%3Fact%3Drss%26LanguageCountry%3Den_US%26orgPrefix%3DNCMC%26state%3D" + State;
                                                     xhr = new XMLHttpRequest();     
                                                     xhr.open("GET",url, true); //Please note your ip address will be different.
                                                     xhr.setRequestHeader("Content-Type", "text/html"); 
                                                     xhr.onreadystatechange = function ()
                                                         { 
                                                           if (xhr.readyState == 4 && xhr.status == 200)
                                                             {
                                                                 var obj= JSON.parse(xhr.responseText);
                                     var i=0;
                                                                 var textout ="";
                                                                 for(i=0;i<obj.items.length-1;i++)
                                     {
                                         textout+=obj.items[i].description + " ";
                                     }
                                        amberAlert(textout);
                                                                 
                                                             }
                                                         }  
                                                     xhr.send();
                                                     }
     
                                                   function amberAlert(amberAlertText)
                             {
                                                                                                 
                                                     var apikey ="6d343f27-4c12-4871-a338-0f316934ce68"; //Please note your api key will be different.
                                                     var activitytext = JSON.stringify({"API": apikey,"TEXT":amberAlertText,"FCOLOR":"255255000","BCOLOR":"000000000"});   
                                                     xhr = new XMLHttpRequest();     
                                                     xhr.open("POST","http://10.0.0.163/babble.html", true); //Please note your ip address will be different.
                                                     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
                                                     xhr.onreadystatechange = function ()
                                                         { 
                                                           if (xhr.readyState == 4 && xhr.status == 200)
                                                             {
                                                                 var json = xhr.responseText.substring(xhr.responseText.length -9).trim();
     
                                                                  if (json == "success")
                                                                   {
                                                                     return;
                                                                   }
                                                             }
                                                         }  
                                                     xhr.send(activitytext);
                             }

                                            

The amber alert in this example is illustrating the ability to use data provided by another service endpoint and then passing that data on to the Babbleboard. The data can be any form of text provided by limitless amounts of different endpoints. (e.g.parking space feeds,traffic directions,traffic guidance,stock quotes,twitter feeds....and beyond!)

Powershell Example

The following powershell code snippet simply posts Hello World to the Babbleboard with white text and black background color.

    # Powershell example
    # Your API Key and Babbleboard ip will be different
    # One Line script
     Invoke-WebRequest -Uri "http://10.0.0.168/babble.html" -Method POST -Body "{'API':c806e8ca-46b9-4869-967f-3565e7c588bf,'TEXT':'Hello world','FCOLOR': '255255255','BCOLOR':'000000000'}" -ContentType "application/x-www-form-urlencoded"

    StatusCode        : 200
    StatusDescription : OK

    

C# Example

Following is a C# code snippet. The code will show scrolling text black blackground and white text saying Hello World.

        using Newtonsoft.Json;
        using System;
        using System.IO;
        using System.Linq;
        using System.Net;
        using System.Text;
        using System.Web.UI;
        
        public partial class _Default : Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
        
                var httpWebRequest = (HttpWebRequest)WebRequest.Create("http://10.0.0.168/babble.html");
                httpWebRequest.ContentType = "application/json";
                httpWebRequest.Method = "POST";
        
                using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))
                {
                    string json = "{\"API\":\"c806e8ca-46b9-4869-967f-3565e7c588bf\"," +
                                   "\"TEXT\":\"Hello World\","+
                                   "\"FCOLOR\":\"255255255\","+
                                   "\"BCOLOR\":\"000000000\"}";
        
                    streamWriter.Write(json);
                    streamWriter.Flush();
                    streamWriter.Close();
                }
        
                var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();
                using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
                {
                    var result = streamReader.ReadToEnd();
                }
            }
        }

Sense Example (Hotpsot Aware)

The Hotspot Aware is an exciting unique feature which enables your Babbleboard to show ads routes or any consumer driven information when a device having the Hotspot turned ON is identified. When the device is in close proximity to the Babblebaord. The consumer message will begin to appear on the Babbleboard. It is assumed that most hotspots would be smartphones and that the smartphone has an identifiable name that can be registered by the following simple JSON string API calls. The following example uses the hotspot name MYPHONE8 as the hotspot comes within range of the Babbleboard the Hello World will show scrolling on the Babbleboard. You can optionly add route information. The route will be prefixed to the display if it is filled in. Otherwise do not include the ROUTE option in the JSON string. The usages of this feature are endless:

  • Example 1. Enter a parking lot with your phones hotspot ON. You can be guided to your parking space as you pass the different Babbleboard signs arranged inside the parking lot.
  • Example 2. You are shopping in a store and you have the hotspot ON. An ad can appear on the screen specific to your shopping needs. Say if you googled freezers this week we can help you find the freezers and maybe show a store discount.
  • The following code snippet shows how to toggle the sense feature ON or OFF. You will be able to check that the feature is in sense mode as the LED will be showing in a constant sky blue color.

        var activitytext = JSON.stringify({"API": apikey,"FUNCTION":"sense"});   
                                                     

    After the sense mode is turned ON you can send simple json strings to the Babbleboard to activate different messages based on the hotspots being within range of the Babbleboard

    The following code snippet shows how to register a hotspot and define the consumer message to be displayed.

            
            var apikey ="6d343f27-4c12-4871-a338-0f316934ce68"; //Please note your api key will be different.
            var activitytext = JSON.stringify({"API": apikey,"SENSE":"ON","HOTSPOT":"MYPHONE8","ROUTE":"","AD":"Hello World","FCOLOR":"000255255","BCOLOR":"022000000","SIZE":1,"REPEAT":0});   
            xhr = new XMLHttpRequest();     
            xhr.open("POST","http://10.0.0.163/babble.html", true); //Please note your ip address will be different.
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
            xhr.onreadystatechange = function ()
            { 
                if (xhr.readyState == 4 && xhr.status == 200)
                        {
                            var json = xhr.responseText.substring(xhr.responseText.length -9).trim();
        
                                if (json == "success")
                                    {
                                        return;
                                    }
                        }
            }  
            xhr.send(activitytext);
           
        

    Remember to put your Babbleboard ip in the code and also to use the api key that you configured.

    A Breakdown of the sense JSON string

  • API Your API key look at the API key section to see how to generate the api key.
  • SENSE ON identifies the message as a hotspot reference.
  • HOTSPOT The name of the hotspot that you want to target.
  • ROUTE The potential driving directions possibly in the form of arrows or text advice.
  • AD The consumer driven message.
  • SIZE The text size to be displayed 1 being the smallest and 6 being the largest.
  • REPEAT The message repeats 0 the message scrolls.
  • FCOLOR AND BCOLOR text and background colors.
  • Task Scheduler Example

    The best way to introduce using the Babbleboard with the windows Task Scheduler is by example the following example explains how to set the Babbleboard up so that it will constantly display a different color time of day for every minute of the day.

    Task Scheduler Action tab

                                        powershell.exe -executionpolicy  bypass  "c:\example\datetimedisplay.ps1"
                                       

    Task Scheduler Trigger tab

                                                Repeat the task every 1 minute
                                        

    Cut and paste the following code and name the file a powershell file c:\example\datetimedisplay.ps1

        # Powershell Random Text Color and Date Time example
        # Your API Key and Babbleboard ip will be different
        # Set the date time with format appended text  
    
        # Get the current system date time
        $CURRENT_DATE = Get-Date  
        # Append your text and format the date time as you need                                                          
        $DISPLAY_TEXT = $CURRENT_DATE.ToString("hh:mm tt") + ' Time provided by iBabbLED'   
    
        # Set the RGB string this example will have a random text color
        $randomnumber = Get-Random 255255255
        $RANDOM_TEXT_COLOR = $randomnumber
    
        # Set as a simple hash string name value pairs
        $hash = @{
        "TEXT" =  "$DISPLAY_TEXT"
        "FCOLOR" = "$RANDOM_TEXT_COLOR"
        "API" = "c806e8ca-46b9-4869-967f-3565e7c588bf"
        "BCOLOR" = "000000000"
        }
    
        # convert the hash string to a json string
        $json = $hash | ConvertTo-Json
        
        # set the babbleboard url
        [string] $url = "http://10.0.0.168/babble.html";
        [string] $data = $json;
        [string] $contentType = "application/x-www-form-urlencoded";
        [string] $codePageName = "UTF-8";
        
        # use web request to create the url using POST method
        [System.Net.WebRequest] $webRequest = [System.Net.WebRequest]::Create($url);
        $webRequest.ServicePoint.Expect100Continue = $false;
        $webRequest.ContentType = $contentType;
        $webRequest.Method = "POST";
    
        #encode the json data and make the web request 
        $enc = [System.Text.Encoding]::GetEncoding($codePageName);
        [byte[]]$bytes = $enc.GetBytes($data);
        [System.IO.Stream]$reqStream = $webRequest.GetRequestStream();
        $reqStream.Write($bytes, 0, $bytes.Length);
        $reqStream.Flush();
    
        [System.Net.WebResponse]   $resp = $webRequest.GetResponse();
        $rs = $resp.GetResponseStream();
        [System.IO.StreamReader]$sr = New-Object System.IO.StreamReader -argumentList $rs;
        $sr.ReadToEnd();
      
    

    Remember to put your Babbleboard ip in the code and also to use the api key that you configured.