Be Creative, You Have A Babbleboard

  

Be a part of the Babbleboard Revolution.

A huge development effort to make your Babbleboard experience fully support all languages every language variant and any emojis. Our innovative team are the very best in the world and made something super simple out of something super complicated. You will not see anything like this anywhere else in the world Yes it really is a world first.










× To use the GPS location feature make sure that you switch the settings on in your browser  

Key: LocalRegionalNationalGlobal

Twitter
×
Amber Alerts
State:

Amber Alerts provided by missingkids.com

Ads
Rolling Ads...
Stocks
×  

Weather
×
Time
×  
News
×  
 
1
Be Creative!

  × PreView

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 < /> 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 the 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"}); 
					

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);

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 Babblebaord ip in the code and also to use the api key that you configured.

     
     
    Hotspot Aware

    WiFi Setup:

    Naviagte To Your Hotspot App


    Simply Add A Hotspot Named


    BABBLEBOARD

    and use the password

    JAMESBOND007


    You should see the Babbleboard immediatly light up and ready to use. 

    What If?


    If you are unable to set the hotspot name to BABBLEBOARD

    Just change your hotspot password to

    JAMESBOND007

    Please make sure that you match the case of the SSID and the password as they are both case sensitive settings. In this case all uppercase.

    This will enable the Babbleboard to find and connect to your hotspot.  

    Manage Wifi Connections
    × To manage and keep track of your Babbleboard WiFi connections.

    After establishing your first Babbleboard WiFi connection. Going forward be sure to change the factory installed password. Adjust the password on the BABBLEBOARD hotspot. Then set your new password here. You are allowed upto 5 unique WiFi connections that can be added and altered.
    Wifi 1
    Wifi 2
    Wifi 3
    Wifi 4
    Wifi 5
    Still Having WiFi Connection Issues
    ×   If you are still unable to connect to the Babbleboard and the pin light is flashing blue not green then try the following:
  • On your pc,lap-top,pad or phone navigate to the WiFi connections list and connect to the SSID labeled Duo-XXX
  • After that step then navigate to the Babbleboard access page defined at http://192.168.0.1/
  • At the access point page follow the page instructions on how to configure your WiFi connections.
  • Ad Space And Beyond
    How To Make Money With Your Babbleboard