Monitor Data and Rmote Control from a WebApp | Details

This project demonstrates a basic web application example with the CC3200 development board, AK9753, and TMP006 sensors (web-application link.)
I have developed a simple web application for the CC3200 development board, an AK9753 Human Presence Sensor Breakout board , an on-board TMP006 sensor, and two MB1212 sonic sensors.
The web application displays data collected from all sensors and allows to switch (ON/OFF) the on-board Red LED. I am planning to add more functions to the web application.

Show below is the image of my current circuit diagram. The MB1212 Maxbotix sensors will be used as motion sensors in the project.

To test the IOT project with your CC3200 development board:

Download and install the CC3200 SDK on your PC.
Download C-source code files from the Github. One of the files listed on the Github is a zip file of the CCS project (CC3200_client(CCS-project).zip). You can download and unzip the file.
Import project files into your CCS workspace (link to CCS project import example).
Connect CC3200 development board to a computer.
Open a serial terminal on your PC and Set: COM PORT X, 115200 bps, 8N1, no parity, no flow control.

I recommend (it is not required) changing the MAC address from a default one. The MAC address will be used as a unique ID number to monitor data sent by your board. To set the new MAC address enter unique values as shown below. After the board is programmed you will need to press and hold SW3 and push the Reset button while pressing SW3. Afetr a 10 - 15 seconds you see " MAC address is set to: XX:XX:XX:XX:XX:XX" printen on a serial terminal:

//SET MAC address
GPIO_IF_GetPortNPin(SH_GPIO_13,&uiGPIOPort,&pucGPIOPin);//If SW3 button is pressed set MAC address
ucPinValue = GPIO_IF_Get(SH_GPIO_13,uiGPIOPort,pucGPIOPin);
if (ucPinValue == 1){
	sl_Start(NULL,NULL,NULL);
	_u8 MAC_Address[6];
	MAC_Address[0] = 0x8;
	MAC_Address[1] = 0x0;
	MAC_Address[2] = 0x28;
	MAC_Address[3] = 0x22;
	MAC_Address[4] = 0x69;
	MAC_Address[5] = 0x31;
	sl_NetCfgSet(SL_MAC_ADDRESS_SET,1,SL_MAC_ADDR_LEN,(_u8 *)MAC_Address);
	sl_Stop(0);
	UART_PRINT("\n MAC address is set to: %02x:%02x:%02x:%02x:%02x:%02x \n",
	MAC_Address[0],
	MAC_Address[1],
	MAC_Address[2],
	MAC_Address[3],
	MAC_Address[4],
	MAC_Address[5]);
}

Enter your WiFi credentials (SSID name and password) in the common.h file:

Save your project with the new credentials and compile it.

Once the project is compiled the "CC3200_client_web.bin" will be located in the Release folder:

Program the CC3200 board with the CCS uniflash.
If you want to change the MAC address from the default one, press and hold SW3 and push the reset button. Keep SW3 pressed untill the new MAC address is set and printed. This may take 15-20 sec
Write down the number shown below. This is the ID number of your board. You will need it to display your data on the web-page. Conver the HEX value to a decimal and enter it on the web-app page as the ID number:

Monitor and control CC3200 board from cnktechlabs.com/webapp_pub/grid.php.

Enter the ID number in a decimal format:

How the data is transmitted and received over the web:

In the main file there are two functions:

HTTPPostMethod_data(&httpClient);
HTTPGetPageMethod(&httpClient);

that are used to transmit data to, and receive from the grid.php webpage. The first function posts data to the grid.php web-page approximately once a minute.

if(t_cntr > 250){//285 ~60 sec
    if(cnn_fail == 0){        
        t_cntr = 0;         
        lRetVal = HTTPPostMethod_data(&httpClient);//Post data to the grid.php        
        if(lRetVal < 0){// If failed post data to the web-page            
            f_cntr++;            
            UART_PRINT(", Failed Post Method");            
            EnterHIBernate();        
        }     
    }
}

The second function from the list receives commands from the grid.php web-page every 4-5 seconds.

if(t_cntr1 > 20){
    lRetVal = HTTPGetPageMethod(&httpClient);//Get commands from the grid.php
    if(lRetVal < 0){
        EnterHIBernate();
    }
    t_cntr1 = 0;
}

The data that is sent over the web link is collected in the char buf[109] buffer. IR1-IR4 contain data collected from AK9753 (Qwiic) sensor:

if (ucPinValue == 1){
           cx = snprintf(buf, 109, "IR1=%.0f & IR2=%.0f & IR3=%.0f & IR4=%.0f & RoomT=%.2f & TName=controllall & BLE=ON & ms=%X",
                         (float)IR1,
                         (float)IR2,
                         (float)IR3,
                         (float)IR4,
                         sensorTemp,
                         (char*)macAddressVal);//cx is indice of the last buf[cx]. buff has all the data to be transferred
       }else{
           cx = snprintf(buf, 109, "IR1=%.0f & IR2=%.0f & IR3=%.0f & IR4=%.0f & RoomT=%.2f & TName=controllall & BLE=OFF & ms=%X",
                         (float)IR1,
                         (float)IR2,
                         (float)IR3,
                         (float)IR4,
                         sensorTemp,
                         (char*)macAddressVal);//cx is indice of the last buf[cx]. buff has all the data to be transferred
       }
#ifdef snr
       if (st_dev1 > 10){//Capture motion
           strcpy ( &buf[cx], " & temp=X");//Sonar motion sensor 1
       }
       if (st_dev2 > 10){//Capture motion
           strcpy ( &buf[cx], " & light=X");//Sonar motion sensor 2
       }
#endif

The following code snippet reads current state of the Red LED and saves it in the buf buffer.

GPIO_IF_GetPortNPin(SH_GPIO_9,&uiGPIOPort,&pucGPIOPin);
ucPinValue = GPIO_IF_Get(SH_GPIO_9,uiGPIOPort,pucGPIOPin);
if (ucPinValue == 1){               
    strcpy ( &buf[cx], " &BLE=ON ");//LED ON
}else{                
    strcpy ( &buf[cx], " &BLE=OFF");//LED OFF
}

Once all data is collected it is sent over the Wi-Fi link.The HTTPPostMethod_data will send data: static int HTTPPostMethod_data(HTTPCli_Handle httpClient); Inside the HTTPPostMethod_data funtion HTTPCli_sendRequest will built a HTTP request: lRetVal = HTTPCli_sendRequest(httpClient, HTTPCli_METHOD_POST, POST_REQUEST_URI, moreFlags); lRetVal = HTTPCli_sendRequestBody(httpClient, buf, (sizeof(buf)-14)) function will send data saved in buf over the web.

The data is also streamed over the USB cable (UART0) :

On the web-page - The LED ON button turns on the Red LED on the CC3200 board. The LED OFF button turns off the Red LED on the CC3200 board. Update page button updates table with a new data. The light sensor for now has been removed.

Initial project development (see logs for updates):

The project is being developed with SimpleLink WiFi CC3200 LaunchPad. The LaunchPad board includes a wireless microcontroller (CC3200) as well as a temperature sensor and an accelerometer. The temperature and accelerometer data is collected and sent over a WiFi link to my webpage (www.cnktechlabs.com/data.html). The http://cnktechlabs.com/webapp_pub/grid.php web page is opened for anyone .

http://cnktechlabs.com/webapp_pub/grid.php

Additional hardware - a Light Sensor Board, used to send signal if light is ON/OFF in the room.

MCU:

Light Sensor:

Recently I have started tinkering with the http_client_demo CC3200 example project. The code demonstrates different HTTP web services methods: like GET, POST, PUT, and DELETE. My goal is to write code that will connect to my website and send temperature and accelerometer data over the internet. I am going to start with the GET method and then continue with the POST method.

GET method

The GET method sends URL page as well as data in a single string. The page and the encoded information are separated by the ? character. http://www.cnktechlabs.com/get.php?name1=value1&name2=value2 The text that follows the ? is the query string. The GET method is restricted to send upto 1024 characters only. To test the GET method I have created and uploaded /get.php PHP file to my website (www.cnktechlabs.com/get.php). String sent by CC3200 to www.cnktechlabs.com - "www.cnktechlabs.com/get.php?id=goodbye&mode=run" Below is the code code for the get.php page (this code is uploaded to my website and for your information only):

get.php page code
<html>
<head><title>PHP Get Results</title></head>
<body>
    <?php
        //This message is echoed back to CC3200 board 
        echo "Hello CC3200, reading GET page \n\r";
        // Show all URL parameters (and all form data submitted via the 'get' method)
        foreach($_GET as $key=>$value){
            echo $key, ' => ', $value; //Echo back to CC3200 the received data.
            echo"\n\r";
        }
        // Show a particular value.
        $id = $_GET['id'];
        echo"\n\r";
        
        if($id) {
            echo '<p/>ID: ', $id, "<br/>n";
            echo"\n\r";
        }
        else {
            echo '<p>No ID parameter.</p>';
        }
        //http://www.cnktechlabs.com/get.php?id=goodbye&mode=run 
    ?>
</body>
</html>

The printout on Termite serial terminal looks as follows:

As you can see above, the get.php page sends back all the file content including html tags and text punctuation.

To get response from the PHP code shown above, I send the following string (main.c):

#define GET_REQUEST_URI    "/get.php?id=goodbye&mode=run"    //the text that follows the ? is the query string
#define HOST_NAME    "cnktechlabs.com"

Request to www.cnktechlabs.com/get.php:
GET(parameters)----------------------->www.cnktechlabs.com/get.php?id=goodbye&mode=run"

The two parameters, id=goodbye&mode=run, are received and processed by the following PHP code (this code is uploaded to my website and for your information only):

foreach($_GET as $key=>$value){
    echo $key, ' => ', $value; //Send back to CC3200 the received data.
    echo"\n\r";
}
$id = $_GET['id'];//id=goodby
echo"\n\r";
        
if($id) {
    echo '<p></p>ID: ', $id, "<br>n";
    echo"\n\r";
}
else {
    echo '<p>No ID parameter.</p>';
}

Below is the GET method from the http_client_demo.c code example:

//*****************************************************************************
//
//! \brief HTTP GET Demonstration
//!
//! \param[in]  httpClient - Pointer to http client
//!
//! \return 0 on success else error code on failure
//!
//*****************************************************************************
static int HTTPGetMethod(HTTPCli_Handle httpClient)
{
  
    long lRetVal = 0;
    /*
     * GET /get.php HTTP/1.1
     * This line specifies an HTTP command, called a method, followed by the address of a
     * document and the version of the HTTP protocol being used. In this case, the request
     * is using the GET method to ask for the index.html document using HTTP 1.1. After
     * this initial line, the request can contain optional header information that gives the server
     * additional data about the request. For example:
     * User-Agent: Mozilla/5.0 (Windows 2000; U) Opera 6.0 [en]
     *
     */
    
    HTTPCli_Field fields[4] = {
                                {HTTPCli_FIELD_NAME_HOST, HOST_NAME},
                                {HTTPCli_FIELD_NAME_ACCEPT, "*/*"},    //Accept: image/gif, image/jpeg, text/*, */*
                                {HTTPCli_FIELD_NAME_CONTENT_LENGTH, "0"},
                                {NULL, NULL}
                            };
    bool        moreFlags;
    
    
    /* Set request header fields to be send for HTTP request. */
    HTTPCli_setRequestFields(httpClient, fields);
    /* Send GET method request. */
    /* Here we are setting moreFlags = 0 as there are no more header fields need to send
       at later stage. Please refer HTTP Library API documentaion @ HTTPCli_sendRequest
       for more information.
    */
    moreFlags = 0;
    lRetVal = HTTPCli_sendRequest(httpClient, HTTPCli_METHOD_GET, GET_REQUEST_URI, moreFlags);
    if(lRetVal < 0)
    {
        UART_PRINT("Failed to send HTTP GET request.\n\r");
        return lRetVal;
    }
     lRetVal = readResponse(httpClient); //Currently returns all the text from get.php with text formatting (prints data to a serial port)
    return lRetVal;
}

The data is appended to the URL as a series of name/value pairs. After the URL web address has ended, we include a question mark (?) followed by the name/value pairs, each one separated by an ampersand (&).

The amount of data can be sent using the GET method is restricted to 1024 characters only.

POST method

A POST request passes parameters in the body of the HTTP request, leaving the URL untouched.

Shown below is the post.php page. I am not a web developer, so the code below is written by an amateur (this code is uploaded to my website and for your information only):

www.cnktechlabs.com/post.php
<?php
$page = $_SERVER['PHP_SELF'];
$sec = "10";
?>
<html>
<head>
<title>PHP Post Method</title>
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
</head>
<body>
 <?php
//*************************************************************************** 
 echo "*****Welcome to CNKTECHLABs CC3200 data page.******"; //Print to CC3200 Termite
 echo "\n\r";
 echo "View your CC3200 data in real time here."; //Print to CC3200 Termite 
 echo "\n\r";
   
 //Assign received data
 $acc = htmlspecialchars($_POST['acc']);
 $accX = htmlspecialchars($_POST['accX']);
 $accY = htmlspecialchars($_POST['accY']);
 $accZ = htmlspecialchars($_POST['accZ']);
 $sensortemp = htmlspecialchars($_POST['sensortemp']);
 $loc = htmlspecialchars($_POST['loc']); 
 $Light = htmlspecialchars($_POST['Light']);   
 //echo back to CC3200
 echo "Today is: " . date("m/d/Y") . "\n\r";
 echo "The time is " . date("h:i:sa"). "\n\r";
 echo  $acc, ' ', $accX, ' ', $accY, ' ', $accZ, ' ', $sensortemp, ' ', $loc;
//********************************************************************************************    
  //The example below creates a new file called "data.html". 
  //The file will be created in the same directory where the PHP code resides:
  
  $nl = "<br>";
  $html_ = "<html>";
  $body_ = "<body>";
  $html_ = "<html>";
  $html__ = "</html>";
  $body__ = "</body>";
  //&space = " ";
  $tmptr = "CC3200 Temperature inside the house: ";
  $Accelerometer="CC3200 Accelerometer data:  ";
  $myloc = "My location is:  ";
 
 $head = "<head>";
 $head__ = "</head>";
 $close_html = "</div></div></div></body></html>";
 $paragraph = "<p>";
 $paragraph__ = "</p>";
 $myfile = fopen("data.html", "w")or die("Unable to open file!");         
 fwrite($myfile, $nl);//<br>
 fwrite($myfile, $nl);//<br>
 
 $date = new DateTime();
 $date = $date->format("m:d:y h:i:s");
 fwrite($myfile, $paragraph);//"<p>"
 fwrite($myfile, $date);
 fwrite($myfile, $paragraph__);//"</p>"
  
 fwrite($myfile, $paragraph);//"<p>"
 fwrite($myfile, $myloc);//"My location is:";
 
  fwrite($myfile, $loc);//Current Location 
  fwrite($myfile, $paragraph__);//"</p>"
    
  fwrite($myfile, $paragraph);//"<p>"
  fwrite($myfile, $Accelerometer); 
  fwrite($myfile, $paragraph__);//"</p>"
    
  fwrite($myfile, $paragraph);//"<p>"
  fwrite($myfile, $acc);  
  fwrite($myfile, $paragraph__);//"</p>"
    
  fwrite($myfile, $paragraph);//"<p>"
  fwrite($myfile, $accX);  
  fwrite($myfile, $paragraph__);//"</p>"
      
  fwrite($myfile, $paragraph);//"<p>"
  fwrite($myfile, $accY);  
  fwrite($myfile, $paragraph__);//"</p>"
      
  fwrite($myfile, $paragraph);//"<p>"
  fwrite($myfile, $accZ);  
  fwrite($myfile, $paragraph__);//"</p>"
    
  //Print temperature
  fwrite($myfile, $paragraph);//"<p>"
  fwrite($myfile, $tmptr); 
  fwrite($myfile, $sensortemp);  
  fwrite($myfile, $paragraph__);//"</p>"
  
  //Print Light
  fwrite($myfile, $paragraph);//"<p>"  
  fwrite($myfile, $Light);  
  fwrite($myfile, $paragraph__);//"</p>" 
  
  
  fwrite($myfile, $close_html);//"</div></div></div></body></html>" **************08/25/2017
  // Close file
  fclose($myfile);
 
 
    
 ?>
</body>
</html>

main.c file sends data using "HTTPPostMethod_data" function shown below:

//*****************************************************************************
//
//! \brief HTTP POST Demonstration
//!
//! \param[in]  httpClient - Pointer to http client
//!
//! \return 0 on success else error code on failure
//!
//*****************************************************************************
static int HTTPPostMethod_data(HTTPCli_Handle httpClient)
{
    bool moreFlags = 1;
    bool lastFlag = 1;
    char tmpBuf[4];
    long lRetVal = 0;
    //buf
    //HTTPCli_Field fields[4] = {
    //                            {HTTPCli_FIELD_NAME_HOST, HOST_NAME},
    //                            {HTTPCli_FIELD_NAME_ACCEPT, "*/*"},
    //                            {HTTPCli_FIELD_NAME_CONTENT_TYPE, "application/json"},
    //                            {NULL, NULL}
    //                        };
    HTTPCli_Field fields[4] = {
                                    {HTTPCli_FIELD_NAME_HOST, HOST_NAME},
                                    {HTTPCli_FIELD_NAME_ACCEPT, "*/*"},
                                    {HTTPCli_FIELD_NAME_CONTENT_TYPE, "application/x-www-form-urlencoded"},
                                    {NULL, NULL}
                                };
    /* Set request header fields to be send for HTTP request. */
    HTTPCli_setRequestFields(httpClient, fields);//Prints response from the webpage
    /* Send POST method request. */
    /* Here we are setting moreFlags = 1 as there are some more header fields need to send
       other than setted in previous call HTTPCli_setRequestFields() at later stage.
       Please refer HTTP Library API documentaion @ref HTTPCli_sendRequest for more information.
    */
    moreFlags = 1;
    lRetVal = HTTPCli_sendRequest(httpClient, HTTPCli_METHOD_POST, POST_REQUEST_URI, moreFlags);//POST & post.php
    if(lRetVal < 0)
    {
        UART_PRINT("Failed to send HTTP POST request header.\n\r");
        return lRetVal;
    }
    //acc=26 & accX=13 & accY=-1 & accZ=67 & sensortemp=23.85
    sprintf((char *)tmpBuf, "%d", (sizeof(buf)-1));  // Print Size of POST data body 99
    //sprintf((char *)tmpBuf, "%d", (sizeof(POST_DATA)-1));  // Size of POST data body
    /*
     * Here we are setting lastFlag = 1 as it is last header field.
     * Please refer HTTP Library API documentaion @ref HTTPCli_sendField for more information.
     * Send the length of sent data
    */
    lastFlag = 1;
    lRetVal = HTTPCli_sendField(httpClient, HTTPCli_FIELD_NAME_CONTENT_LENGTH, (const char *)tmpBuf, lastFlag);
    if(lRetVal < 0)
    {
        UART_PRINT("Failed to send HTTP POST request header.\n\r");
        return lRetVal;
    }
    /* Send POST data/body */
    //lRetVal = HTTPCli_sendRequestBody(httpClient, POST_DATA, (sizeof(POST_DATA)-1));
    lRetVal = HTTPCli_sendRequestBody(httpClient, buf, (sizeof(buf)-1)); // POST data body
    if(lRetVal < 0)
    {
        UART_PRINT("Failed to send HTTP POST request body.\n\r");
        return lRetVal;
    }
    lRetVal = readResponse(httpClient);
    return lRetVal;
}

main.c file:

while(1){
        //#define SEC_TO_LOOP(x)        ((80000000/5)*x)
        for (delay_cntr = 0; delay_cntr < 4; delay_cntr++){
            MAP_UtilsDelay(40000000);//2.5 sec delay
        }
        
        //Read Acccelerometer
        AccSample(); // Just do a single reading for now. TODO: Make Async.
        SetAccAvg(); // g_accXAvg, g_accYAvg, g_accZAvg, g_accTotalAvg

        //Read temperature
        TMP006DrvGetTemp(&sensorTemp);
    
        //Read GPIO3: pin58 - Light Sensor
        GPIO_IF_GetPortNPin(SH_GPIO_3,&uiGPIOPort,&pucGPIOPin);
        Lght = GPIO_IF_Get(SH_GPIO_3,uiGPIOPort,pucGPIOPin);
        //Data buffer
        cx = snprintf(buf, 99, "acc=%.0f & accX=%.0f & accY=%.0f & accZ=%.0f & sensortemp=%.2f",
                 g_accTotalAvg,
                 g_accXAvg,
                 g_accYAvg,
                 g_accZAvg,
                 sensorTemp );//cx is indice of the last buf[cx]
        if (cx>=0 && cx<99)    {// check returned value
            //bufPtr = &buf[cx];//bufPtr now points to buf[cx]
            //snprintf ( buf+cx, 99-cx, ", and the half of that is %d.", 60/2/2 );
            if (Lght == 0){
                strPtr1 = "& Light=Light is  ON";//74
            }
            else{
                strPtr1 = "& Light=Light is OFF";
            }
            strcpy ( &buf[(cx - 1)], strPtr1 );
            strPtr = " & loc=Los Angeles \0";    // Your location. (95)
            strcpy ( &buf[(76)], strPtr );//"acc=26 & accX=13 & accY=-1 & accZ=67 & sensortemp=23.85 & loc=Los Angeles \0"
        }
        UART_PRINT(buf); //Print the data buffer
        UART_PRINT("\n\r");
        for (delay_cntr = 0; delay_cntr < 4; delay_cntr++){
            MAP_UtilsDelay(40000000);//2.5 sec delay
        }
        lRetVal = HTTPPostMethod_data(&httpClient);
        UART_PRINT("\n\r");
        if(lRetVal < 0)
        {
            UART_PRINT("HTTP Post with Temperature and Accelerometer Data failed.\n\r");
         }
            //UART_PRINT("HTTP Post with Temperature and Accelerometer Data End:\n\r");
    }

Project Details

To test the IOT project with your CC3200 development board:

GET method

POST method