“Shine” Toothbrush Grip

Jiaxin Wu
Final Documentation, Course “Internet of Things – In Depth”

When parents tell their children to brush their teeth, do they really want clean teeth?

Project Goal

When parents tell their children to brush their teeth, do they really want clean teeth?
Under the notion that in addition to preventing cavities, parents want their children to learn to take the responsibility of caring for themselves, I designed and prototyped a toothbrush grip named Shine, that with the complemented webpage, can help with the problem.
Shine toothbrush grip creates a gamified solution for children to learn and follow the proper process of teeth-brushing and help them persevere through boring but necessary tasks of life.

Market Research

User needs

Existing Competitors

Aquasonic brush monster

The brush monster uses an app to guide the teethbrushing process. The use cartoon monster character displayed on phone attracts the children and keeps then engaged through the brushing process.

Colgate

Colgate uses a result-oriented rather than a process-oriented method to inspect the cleanliness of the user’s teeth. It uses blue light to identify dirt and similarly uses an app to show the spots on a picture of the teeth. The user will have to brush until there are no spots showing up.

OralB IO

OralB’s new toothbrush installs sensors at the tip of the toothbrush. With the sensors, the toothbrush will be able to know not only the direction of the brush, but also the force. It similarly uses an app to give feedback to the users.

Autobrush

Autobrush is a Y-shaped electric brush that uses a friendly-tasting foam instead of toothpaste to facilitate the teeth-brushing process. The child holds the brush in his mouth, and the brush plays music while the high-frequency vibration gets rid of the dirt. This minimizes the children’s efforts to simply holding the brush to their mouth.

The dentist

Dentist clinics have been a nightmare for many children because of the uncomfortable experiences there. Many clinics now adopt a colorful and bright environment, installed with a playing corner with toys and books. The interior of clinic rooms may include cartoon characters, and dentists may let them play with some toys to distract them and prevent crying or moving during the examination.

Learnings

  • Many existing solutions use displays, especially apps on smartphones.
  • Cleanliness is the major target. Few focus on the process.
  • There is no current gamification, though Brush Monster does use cartoon characters.
  • Children generally hate brushing their teeth and are afraid of dentists.
  • Many products sell an entire brush that is usually expensive.

Positioning

X Fancy brush with fancy price
X Sophisticated sensors
X Rarely read data log
✓ Simple grip applicable to any brush
✓ Ergonomically child-friendly
✓ Process-oriented

Plan and Path

The Original Plan

The original proposal. The core idea is a toothbrush that tracks the movement, and provides corresponding display that either applauds and encourages the child to continue to perform well, or hints and nudges him to follow the correct process.

Data Analysis

I did some research on how to utilize sample data to guide setting the thresholds and identification.

Detecting Movement

  • First-order difference: This is a technique used by an article about 3D-modeling toothbrush movements. The idea is to treat continuous data as discrete variables, and calculate the slope between each data point. In this case, since the distance (time interval) between data points is fixed, the problem simplifies into calculating the difference of the data. This did not test accurate in my project. A likely reason is that the duration / interval of each movement is not fixed and hard to define. Thus, the acceleration level read may be in different phases of the movement and cannot aggregate to form a pattern.
  • Variance This tested well in my project. A likely reason is that it measures the vigorance of brushing in each direction, so it is less sensitive to the length of intervals between readings.
  • Motion Direction: This is sensitive to the case of teeth-brushing. The activity does not permit movement in many directions other than along the axises. In addition to whether the grip is idle or moving, a simple comparison of which direction has larger acceleration variation.

Smoothing

  • Exponential Smoothing: This technique can show the trend while eliminating significant outliers.
    S0= x0
    St = αxt-1 + (1-α)st-1, t > 0
    Apply: store the last calculated variances and smooth the current one out.
  • Moving Average Smoothing: This is an extension of exponential smoothing.
    Apply: Store the last few calculated variances and smooth the current one out. However, I think it will not work as well as exponential smoothing, because there is less weight on the current value.
  • Double Exponential Smoothing: This takes into account the amount of change since the last value.
    St = At + Bt , t = 1,2,3,…, N
    Where, At = axt + (1- a) St-1 0< a <= 1
    Bt = b (At – At-1) + (1 – b ) Bt-1 0< b <= 1
    Apply: Create a variable to calculate and store the difference from the last value.

Implementation

Break down to phases

The teeth-brushing is broken down into 3 major phases:

  1. Brush vertically, along the wall of the teeth (the front that shows).
  2. Brush horizontally, along the crown of the teeth (where you chew).
  3. Brush the back of the teeth.
    The movement required for each phase is tied to readings and results of the accelerometer.

Computation

In each loop, I read the accelerometer along 3 axises into an array. I computed the variance along each axis to determine how violently the brush was moving along that axis. Judgement of whether the brush is idle, and how it is moving, it based on the computed results:

  • Horizontal
    avgVx>100 && avgVx>avgVy
    The variance along the x axis is larger than 100, and variance along the x axis is larger than y axis.
  • Vertical avgVy>100 && avgVy>avgVx
    The variance along the x axis is larger than 100, and variance along the x axis is larger than y axis.
  • Idle
    Else.
    There is no identification for brushing the back of the teeth, because the user research discovered that movement for such varies a lot. The requirement is simply not idle in this phase, or: avgVy>100 || avgVx>100.

Testing

Since children normally do not use brushes as we might anticipate them to, I simplified the phase breakdown and lowered the threshold to allow for more tolerance for the children’s use. This helps ensure the experience is not too rigid and discouraging.

Summary of Pivots

I made several pivots during the progress and I am glad that I did. This does not mean that I failed at doing something, but only more focused on essential functions and adapted to any abstacles along the way.

  • Forego the physical design of the grip
    The grip should ergonomically fit a child’s hand, be easy to grasp, easy to clean, and water proof. I had wanted this to be part of the work, at least make a prototype out of clay to portray the ergonomic shape. But eventually, I realized that because I am building the prototype with Particle Argon, the circuit board is unnecessarily big. Making a shape of the grip big enough to hold the current circuit would be over-engineering, and waste a lot of time. Since the water-proof requirement is very feasible, just not at this point, I skipped working t=on this part altogether.
  • Screen Since children usually do not have their own tablet or smart phone, I wanted to show displays on a separate screen so it also does not burden the parents financially or raise concerns about screen time. However, the screen was not working easily, so I decided to use a webpage instead. This actually has several benefits to it:
    • Allowing users to control from the display.
    • Allowing flexibility in content and future development. Users will be able to easily choose from multiple themes for their favorite display, and accessing other features (if any) without having to download.
  • Mesh and Wifi connections
    With the screen solution, I wanted to use mesh connection to build a local network and save energy and eliminate the need for Wifi. Transitioning to using a web page, I was forced to use Wifi to communicate parameters between devices.
  • Toothbrush Holder
    Originally I had wanted to make a toothbrush holder that senses the toothbrush being taken out and starting the entire process, and also integrated with the screen. This was compromised when the screen changed into the website. The user will be able to control the start, pause, stop and restart from the website, leaving little value for the toothbrush holder.

Code and Circuit

Circuit Diagram

After several pivots of the project, the circuit boils down to just one sensor (3-axis accelerometer) attached to a processor (I used Particle Argon).

Actual circuit board.

Actual Circuit Board

Circuit diagram

Circuit diagram

Code for grip

// This #include statement was automatically added by the Particle IDE.
#include <SparkFunMMA8452Q.h>
#include <Particle.h>
#include <Wire.h> // Must include Wire library for I2C

/*
Argon Alex
1) Reads data on 3-axis accelrometer;
2) Performs data analysis;
3) Determines which phase;
4) Posts data as variables for the display page to get;
5) starts and stops by control of buttons of the display page. 
*/

/*
refs
https://openhomeautomation.net/cloud-data-logger-particle-photon
*/

MMA8452Q accel;//set up accelerometer

//acc readings
int accx=0;
int accy=0;
int accz=0;
//recording of past 10 readings per axis
int X[10];
int Y[10];
int Z[10];
// count reading
int n=0;

// smoothing //store past 7 values of variance
int Vx[7]={0,0,0,0,0,0,0};
int Vy[7]={0,0,0,0,0,0,0};
volatile int avgVx = 0; 
volatile int avgVy = 0;

//time management
int starttime=0;
int last_published=0;
int startctrl=NULL; 

//calculations
    int avgX=0;
    int avgY=0;    
    int diffX=0;
    int diffY=0;
    int varX=0;
    int varY=0;

int count =0;//running

//respective strokes
int stroke_horizontal = 0;
int stroke_vertical = 0;
int stroke_back = 0;
int idle=1;
//phase
int phase=0;

void setup() {
    Serial.begin(9600);
    accel.begin(SCALE_2G, ODR_1); //initiate accelerometer
    Particle.function("control", control); //be controlled by the display page    
    //strokes
    Particle.variable("stroke_horizontal", &stroke_horizontal, INT);
    Particle.variable("stroke_vertical", &stroke_vertical, INT);
    Particle.variable("stroke_back", &stroke_back, INT);
    Particle.variable("idle", &idle, INT);
    //phase
    Particle.variable("phase", &phase, INT);
    Particle.variable("startctrl", &startctrl, INT);
}

void loop() {
    /*
    if (start==0)
    {
        Mesh.publish("time", millis());
        start=1;
    }
    */
    if (startctrl!=NULL)
    {
        for (n=0;n<10;n++)
        {
            if (accel.available())
            {
                accel.read(); 
            }// Update accelerometer data
            X[n]=accel.x;//assign into array
            Y[n]=accel.y;
            Z[n]=accel.z;
            /*
            // log the time
            Serial.print( Time.timeStr() );
            Serial.print(",");
            // print out data in order
            Serial.print( accx ); 
            Serial.print(","); 
            Serial.print( accy ); 
            Serial.print(",");
            Serial.print( accz ); 

            //start a new line
            Serial.println( " " );
            */
            delay(50);
            
        }
        
        //for test
        accx=accel.x;
        accy=accel.y;
        accz=accel.z;
        
        print();
        analyze();
        
        count++; 
        Serial.println( String(phase) );
    }
    else
    {
        Serial.println( "Unactivated" );
    }
    if (count >1000) 
    {
        count =0;
    }
    //define phase
    //when idle >1, is idle
    if (startctrl ==1)
    {
        if (millis()-starttime<=5000)//use time
        {
            phase = 1; //welcome
        }
        else if (stroke_vertical<5 && phase ==1  )//use time
        {
            phase = 2; //vertical instructions
        }
        else if (stroke_vertical<30 && idle ==0 )
        {
            phase = 3; // v good
        }
        else if ( stroke_vertical<30 && idle ==1 )
        {
            phase = 4; // v idle
        }
        else if (stroke_horizontal<20 && stroke_vertical>30 )
        {
            phase = 5; // h instructions
            delay(2000);
        }
        else if (stroke_vertical>30 && stroke_horizontal<20 && idle ==0  && phase <=7)
        {
            phase = 6; // h good
        }
        else if (stroke_vertical>30 && stroke_horizontal<20 && idle==1  && phase <=7)
        {
            phase = 7; // h idle
        }
        else if (stroke_vertical>30 && stroke_horizontal>20 && stroke_horizontal<23 && phase <=10)
        {
            phase = 8; // h change
        }
        else if (stroke_vertical>30 && stroke_horizontal>23 && stroke_horizontal<43 && idle==0 && phase <=10) 
        {
            phase = 9; // h good
        }
        else if (stroke_vertical>30 && stroke_horizontal>23 && stroke_horizontal<43 && idle ==1 && phase <=10)
        {
            phase =10; // h idle
            //stroke_back =0;//re-initialize
        }
        else if (stroke_vertical>30 && stroke_horizontal>40 && stroke_back<5) 
        {
            phase = 11; //behind teeth
        
        }
        else if (stroke_vertical>30 && stroke_horizontal>60 && stroke_back>20)
        {
            phase = 12; //idle
        }
    }
    else
    {
        phase = 1;
    }
    delay(900);

}

void analyze() //motion data analysis
{
    //initialize
    avgX=0;
    avgY=0;
    diffX=0;
    diffY=0;
    varX=0;
    varY=0;
    //get average of X and Y axis acceleration in past 10 readings
    for (int i=0; i<10; i++)
    {
        avgX=avgX+X[i];
        avgY=avgY+Y[i];
    }
    
    avgX=avgX/10;
    avgY=avgY/10;
    // compute respective variance
    for (int j=0; j<10; j++)
    {
        diffX = X[j]-avgX;
        diffY = Y[j]-avgY;
        varX=varX+diffX*diffX;
        varY=varY+diffY*diffY;
    }
    
    //update cell
    Vx[count%7]=varX;
    Vy[count%7]=varY;
    
    smooth(); 

    // horizontal
    if (avgVx>100 && avgVx>avgVy && phase <=10) // variance along the axis is significant and larger than other
    {
        Particle.publish("shine/movement", "vertical");
        Mesh.publish("shine/movement", "vertical");
        stroke_vertical++;
        last_published = millis();
        idle =0;
    }
    else if (avgVy>100 && avgVy>avgVx && phase <=10) //horizontal
    {
        Particle.publish("shine/movement", "horizontal");
        Mesh.publish("shine/movement", "horizontal");
        stroke_horizontal++;
        last_published = millis();
        idle =0;
    }
    else if (phase>=9 && max(avgVy, avgVx)>100)
    {
        stroke_back++;
        Particle.publish("shine/movement", "back");
        Mesh.publish("shine/movement", "back");
        idle=0;
    }
    else
    {
        Particle.publish("shine/movement", "no");
        Mesh.publish("shine/movement", "no");
        idle=min(100/avgVx, 100/avgVy);
        idle=1;
    }
    
    
    send();    // send raw data 
    count++;
}

int control( String datastr)
{
    //String dataStr = String( data);
    //Serial.printlnf("event=%s data=%s", event, data ? data : "NULL");
    if (datastr=="1")
    {
        startctrl = 1;
        stroke_back =0;
        stroke_horizontal =0;
        stroke_vertical =0;
    }
    else 
    {
        startctrl = 0;
        stroke_back =0;
        stroke_horizontal =0;
        stroke_vertical =0;
    }
    //startctrl = datastr.toInt();
    starttime=millis();
    
    return 0;
}

void smooth()
{
    avgVx=0;
    avgVy=0; 
    
    for (int k=0; k<7; k++)
    {
        avgVx=avgVx+Vx[k];
        avgVy=avgVy+Vy[k];
    }
    
    avgVx=avgVx/7;
    avgVy=avgVy/7;
}

void send() //send raw data
{
    Mesh.publish("shine/data/accx", String(accx));
    Mesh.publish("shine/data/accy", String(accy));
    Mesh.publish("shine/data/accz", String(accz));
    Mesh.publish("shine/data/variX", String(avgVx));
    Mesh.publish("shine/data/variY", String(avgVy));
}

void print()
{
    // log the time
    Serial.print( Time.timeStr() );
    Serial.print(",");
    // print out data in order
    Serial.print( accx ); 
    Serial.print(","); 
    Serial.print( accy ); 
    Serial.print(",");
    Serial.print( accz ); 

    //start a new line
    Serial.println( " " );
}


Code for website

<pre class="wp-block-syntaxhighlighter-code"><!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta http-equiv="refresh" content="30">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--?-->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
   <!-- ADD your APP TITLE HERE -->
   <title>Shine toothbrush grip display</title>
</head>


<body>
 	<!--top row-->
   <div class="row">
   	<div style="background-color:#4c0080" class="title-bar"> 
   		<div class="title-bar-left">
   			<span class="title-bar-title">Shine toothbrush grip display</span>
   		</div>
   		<div class="title-bar-right"></div>
   	</div>
   </div>

   <br>
   <br>
   <!--display instructions--> 
   <p>Click on the buttons to start, stop or start over!</p>
   	  
   	<div class="secondary">
   	    <a class="button" style="background-color:#4c0080" onclick="startIt( )" >Let's Start Now  ^-^ </a>
   	    <a class="button" style="background-color:#4c0080" onclick="stopIt( )">I have to stop 😦 </a>
   	    <a class="button" style="background-color:#4c0080" onclick="restart( )">Start over </a>
   	</div>
   			
   <br>
   <p>Follow the instructions and receive clean teeth :)</p>
   <center>
   <img src= "file:///C:/CMU/IOT-depth/display/1.JPG" width="240" id="shineDisplay">
   </center>

   <br>
   <br>

   <!--Create some space at the botton-->
   <div style="margin-top:500px"></div>	

   <a href="https://code.jquery.com/jquery-3.3.1.min.js">https://code.jquery.com/jquery-3.3.1.min.js</a>

   <!-- Compressed JavaScript -->
   <a href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js">https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js</a>
   	
   	
   <script>
   	/*
   		References:
   		https://community.particle.io/t/reading-spark-variables-with-your-own-html-file/4148
   		https://community.particle.io/t/particle-variables-and-functions/17368
   		<style>.gist table { margin-bottom: 0; }</style><div style="tab-size: 8" id="gist35053799" class="gist">
    <div class="gist-file">
      <div class="gist-data">
        <div class="js-gist-file-update-container js-task-list-container file-box">
  <div id="file-particle-function-variable-example-html" class="file my-2">
    

  <div itemprop="text" class="Box-body p-0 blob-wrapper data type-html  ">
      
<table class="highlight tab-size js-file-line-container" data-tab-size="8" data-paste-markdown-skip>
      <tr>
        <td id="file-particle-function-variable-example-html-L1" class="blob-num js-line-number" data-line-number="1"></td>
        <td id="file-particle-function-variable-example-html-LC1" class="blob-code blob-code-inner js-file-line"><!DOCTYPE<span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L2" class="blob-num js-line-number" data-line-number="2"></td>
        <td id="file-particle-function-variable-example-html-LC2" class="blob-code blob-code-inner js-file-line"><span class=pl-kos><</span><span class=pl-ent>html</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L3" class="blob-num js-line-number" data-line-number="3"></td>
        <td id="file-particle-function-variable-example-html-LC3" class="blob-code blob-code-inner js-file-line">    <span class=pl-kos><</span><span class=pl-ent>body</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L4" class="blob-num js-line-number" data-line-number="4"></td>
        <td id="file-particle-function-variable-example-html-LC4" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>center</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L5" class="blob-num js-line-number" data-line-number="5"></td>
        <td id="file-particle-function-variable-example-html-LC5" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>h1</span><span class=pl-kos>></span>Call Function<span class=pl-kos></</span><span class=pl-ent>h1</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L6" class="blob-num js-line-number" data-line-number="6"></td>
        <td id="file-particle-function-variable-example-html-LC6" class="blob-code blob-code-inner js-file-line">            Control the LED ---<span class=pl-kos>></span> </td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L7" class="blob-num js-line-number" data-line-number="7"></td>
        <td id="file-particle-function-variable-example-html-LC7" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L8" class="blob-num js-line-number" data-line-number="8"></td>
        <td id="file-particle-function-variable-example-html-LC8" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>onclick</span>="<span class=pl-s>callFunction(&#39;on&#39;);</span>" <span class=pl-c1>value</span>="<span class=pl-s>Do it!</span>"<span class=pl-kos>></span>Turn the LED on.<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span> </td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L9" class="blob-num js-line-number" data-line-number="9"></td>
        <td id="file-particle-function-variable-example-html-LC9" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L10" class="blob-num js-line-number" data-line-number="10"></td>
        <td id="file-particle-function-variable-example-html-LC10" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>onclick</span>="<span class=pl-s>callFunction(&#39;off&#39;);</span>" <span class=pl-c1>value</span>="<span class=pl-s>Do it!</span>"<span class=pl-kos>></span>Turn the LED off.<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L11" class="blob-num js-line-number" data-line-number="11"></td>
        <td id="file-particle-function-variable-example-html-LC11" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L12" class="blob-num js-line-number" data-line-number="12"></td>
        <td id="file-particle-function-variable-example-html-LC12" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>h1</span><span class=pl-kos>></span>Get Variable<span class=pl-kos></</span><span class=pl-ent>h1</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L13" class="blob-num js-line-number" data-line-number="13"></td>
        <td id="file-particle-function-variable-example-html-LC13" class="blob-code blob-code-inner js-file-line">        Variable Value: <span class=pl-kos><</span><span class=pl-ent>span</span> <span class=pl-c1>id</span>="<span class=pl-s>varValue</span>"<span class=pl-kos>></span>Not Yet Loaded. Click this button ---<span class=pl-kos>></span> <span class=pl-kos></</span><span class=pl-ent>span</span><span class=pl-kos>></span><span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>onclick</span>="<span class=pl-s>getVariable()</span>"/>Update<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L14" class="blob-num js-line-number" data-line-number="14"></td>
        <td id="file-particle-function-variable-example-html-LC14" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L15" class="blob-num js-line-number" data-line-number="15"></td>
        <td id="file-particle-function-variable-example-html-LC15" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>h1</span><span class=pl-kos>></span>Logout<span class=pl-kos></</span><span class=pl-ent>h1</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L16" class="blob-num js-line-number" data-line-number="16"></td>
        <td id="file-particle-function-variable-example-html-LC16" class="blob-code blob-code-inner js-file-line">        Click this button to logout ---<span class=pl-kos>></span> <span class=pl-kos><</span><span class=pl-ent>button</span> <span class=pl-c1>onclick</span>="<span class=pl-s>logout()</span>"<span class=pl-kos>></span>Logout<span class=pl-kos></</span><span class=pl-ent>button</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L17" class="blob-num js-line-number" data-line-number="17"></td>
        <td id="file-particle-function-variable-example-html-LC17" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L18" class="blob-num js-line-number" data-line-number="18"></td>
        <td id="file-particle-function-variable-example-html-LC18" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>h1</span><span class=pl-kos>></span>Log<span class=pl-kos></</span><span class=pl-ent>h1</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L19" class="blob-num js-line-number" data-line-number="19"></td>
        <td id="file-particle-function-variable-example-html-LC19" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>div</span> <span class=pl-c1>id</span>="<span class=pl-s>log</span>" <span class=pl-c1>style</span>="<span class=pl-s>border: 1px black solid; width: 50%</span>"<span class=pl-kos>></span> <span class=pl-kos></</span><span class=pl-ent>div</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L20" class="blob-num js-line-number" data-line-number="20"></td>
        <td id="file-particle-function-variable-example-html-LC20" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L21" class="blob-num js-line-number" data-line-number="21"></td>
        <td id="file-particle-function-variable-example-html-LC21" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos></</span><span class=pl-ent>center</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L22" class="blob-num js-line-number" data-line-number="22"></td>
        <td id="file-particle-function-variable-example-html-LC22" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L23" class="blob-num js-line-number" data-line-number="23"></td>
        <td id="file-particle-function-variable-example-html-LC23" class="blob-code blob-code-inner js-file-line">        <span class=pl-c><!--- We are using JQuery for some function below --></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L24" class="blob-num js-line-number" data-line-number="24"></td>
        <td id="file-particle-function-variable-example-html-LC24" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>script</span> <span class=pl-c1>src</span>="<span class=pl-s>https://code.jquery.com/jquery-2.2.3.min.js</span>"<span class=pl-kos>></span><span class=pl-kos></</span><span class=pl-ent>script</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L25" class="blob-num js-line-number" data-line-number="25"></td>
        <td id="file-particle-function-variable-example-html-LC25" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L26" class="blob-num js-line-number" data-line-number="26"></td>
        <td id="file-particle-function-variable-example-html-LC26" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos><</span><span class=pl-ent>script</span><span class=pl-kos>></span>     </td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L27" class="blob-num js-line-number" data-line-number="27"></td>
        <td id="file-particle-function-variable-example-html-LC27" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L28" class="blob-num js-line-number" data-line-number="28"></td>
        <td id="file-particle-function-variable-example-html-LC28" class="blob-code blob-code-inner js-file-line">            <span class=pl-c>// If the current user has not set their device ID prompt them for it.</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L29" class="blob-num js-line-number" data-line-number="29"></td>
        <td id="file-particle-function-variable-example-html-LC29" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>if</span><span class=pl-kos>(</span>!<span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-en>getItem</span><span class=pl-kos>(</span><span class=pl-s>"deviceID"</span><span class=pl-kos>)</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L30" class="blob-num js-line-number" data-line-number="30"></td>
        <td id="file-particle-function-variable-example-html-LC30" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L31" class="blob-num js-line-number" data-line-number="31"></td>
        <td id="file-particle-function-variable-example-html-LC31" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>deviceID</span> <span class=pl-c1>=</span> <span class=pl-en>prompt</span><span class=pl-kos>(</span><span class=pl-s>"Please enter your device ID"</span><span class=pl-kos>,</span> <span class=pl-s>""</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L32" class="blob-num js-line-number" data-line-number="32"></td>
        <td id="file-particle-function-variable-example-html-LC32" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>}</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L33" class="blob-num js-line-number" data-line-number="33"></td>
        <td id="file-particle-function-variable-example-html-LC33" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>if</span><span class=pl-kos>(</span>!<span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>deviceID</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L34" class="blob-num js-line-number" data-line-number="34"></td>
        <td id="file-particle-function-variable-example-html-LC34" class="blob-code blob-code-inner js-file-line">                <span class=pl-en>alert</span><span class=pl-kos>(</span><span class=pl-s>"You did not enter a valid device ID. Shame!"</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L35" class="blob-num js-line-number" data-line-number="35"></td>
        <td id="file-particle-function-variable-example-html-LC35" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L36" class="blob-num js-line-number" data-line-number="36"></td>
        <td id="file-particle-function-variable-example-html-LC36" class="blob-code blob-code-inner js-file-line">            <span class=pl-c>// If the current user has not set their access token prompt them for it.</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L37" class="blob-num js-line-number" data-line-number="37"></td>
        <td id="file-particle-function-variable-example-html-LC37" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>if</span><span class=pl-kos>(</span>!<span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-en>getItem</span><span class=pl-kos>(</span><span class=pl-s>"accessToken"</span><span class=pl-kos>)</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L38" class="blob-num js-line-number" data-line-number="38"></td>
        <td id="file-particle-function-variable-example-html-LC38" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L39" class="blob-num js-line-number" data-line-number="39"></td>
        <td id="file-particle-function-variable-example-html-LC39" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>accessToken</span> <span class=pl-c1>=</span> <span class=pl-en>prompt</span><span class=pl-kos>(</span><span class=pl-s>"Please enter your Access Token"</span><span class=pl-kos>,</span> <span class=pl-s>""</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L40" class="blob-num js-line-number" data-line-number="40"></td>
        <td id="file-particle-function-variable-example-html-LC40" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>}</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L41" class="blob-num js-line-number" data-line-number="41"></td>
        <td id="file-particle-function-variable-example-html-LC41" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>if</span><span class=pl-kos>(</span>!<span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>accessToken</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L42" class="blob-num js-line-number" data-line-number="42"></td>
        <td id="file-particle-function-variable-example-html-LC42" class="blob-code blob-code-inner js-file-line">                <span class=pl-en>alert</span><span class=pl-kos>(</span><span class=pl-s>"You did not enter a valid Access Token. Shame!"</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L43" class="blob-num js-line-number" data-line-number="43"></td>
        <td id="file-particle-function-variable-example-html-LC43" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L44" class="blob-num js-line-number" data-line-number="44"></td>
        <td id="file-particle-function-variable-example-html-LC44" class="blob-code blob-code-inner js-file-line">            <span class=pl-c>// A little function for calling a Particle function on a device. Does not notify the user if there was an error</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L45" class="blob-num js-line-number" data-line-number="45"></td>
        <td id="file-particle-function-variable-example-html-LC45" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>function</span> <span class=pl-en>callFunction</span><span class=pl-kos>(</span><span class=pl-s1>arg</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L46" class="blob-num js-line-number" data-line-number="46"></td>
        <td id="file-particle-function-variable-example-html-LC46" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L47" class="blob-num js-line-number" data-line-number="47"></td>
        <td id="file-particle-function-variable-example-html-LC47" class="blob-code blob-code-inner js-file-line">                <span class=pl-k>var</span> <span class=pl-s1>data</span> <span class=pl-c1>=</span> <span class=pl-kos>{</span><span class=pl-kos>}</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L48" class="blob-num js-line-number" data-line-number="48"></td>
        <td id="file-particle-function-variable-example-html-LC48" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>data</span><span class=pl-kos>.</span><span class=pl-c1>arg</span> <span class=pl-c1>=</span> <span class=pl-s1>arg</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L49" class="blob-num js-line-number" data-line-number="49"></td>
        <td id="file-particle-function-variable-example-html-LC49" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>$</span><span class=pl-kos>.</span><span class=pl-en>post</span><span class=pl-kos>(</span> <span class=pl-s>"https://api.particle.io/v1/devices/"</span> <span class=pl-c1>+</span> <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>deviceID</span> <span class=pl-c1>+</span> <span class=pl-s>"/led?access_token="</span> <span class=pl-c1>+</span> <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>accessToken</span><span class=pl-kos>,</span> <span class=pl-s1>data</span><span class=pl-kos>,</span> <span class=pl-k>function</span><span class=pl-kos>(</span> <span class=pl-s1>data</span> <span class=pl-kos>)</span> <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L50" class="blob-num js-line-number" data-line-number="50"></td>
        <td id="file-particle-function-variable-example-html-LC50" class="blob-code blob-code-inner js-file-line">                <span class=pl-en>log</span><span class=pl-kos>(</span><span class=pl-s>"Function &#39;led&#39; called with arg &#39;"</span> <span class=pl-c1>+</span> <span class=pl-s1>arg</span> <span class=pl-c1>+</span> <span class=pl-s>"&#39;"</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L51" class="blob-num js-line-number" data-line-number="51"></td>
        <td id="file-particle-function-variable-example-html-LC51" class="blob-code blob-code-inner js-file-line">                <span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L52" class="blob-num js-line-number" data-line-number="52"></td>
        <td id="file-particle-function-variable-example-html-LC52" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>}</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L53" class="blob-num js-line-number" data-line-number="53"></td>
        <td id="file-particle-function-variable-example-html-LC53" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L54" class="blob-num js-line-number" data-line-number="54"></td>
        <td id="file-particle-function-variable-example-html-LC54" class="blob-code blob-code-inner js-file-line">            <span class=pl-c>// A little function for getting a Particle variable on a device. Does not notify the user if there was an error</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L55" class="blob-num js-line-number" data-line-number="55"></td>
        <td id="file-particle-function-variable-example-html-LC55" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>function</span> <span class=pl-en>getVariable</span><span class=pl-kos>(</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L56" class="blob-num js-line-number" data-line-number="56"></td>
        <td id="file-particle-function-variable-example-html-LC56" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L57" class="blob-num js-line-number" data-line-number="57"></td>
        <td id="file-particle-function-variable-example-html-LC57" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>$</span><span class=pl-kos>.</span><span class=pl-en>get</span><span class=pl-kos>(</span> <span class=pl-s>"https://api.particle.io/v1/devices/"</span> <span class=pl-c1>+</span> <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>deviceID</span> <span class=pl-c1>+</span> <span class=pl-s>"/analogvalue?access_token="</span> <span class=pl-c1>+</span> <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-c1>accessToken</span><span class=pl-kos>,</span> <span class=pl-k>function</span><span class=pl-kos>(</span> <span class=pl-s1>data</span> <span class=pl-kos>)</span> <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L58" class="blob-num js-line-number" data-line-number="58"></td>
        <td id="file-particle-function-variable-example-html-LC58" class="blob-code blob-code-inner js-file-line">                    <span class=pl-smi>console</span><span class=pl-kos>.</span><span class=pl-en>log</span><span class=pl-kos>(</span><span class=pl-s1>data</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L59" class="blob-num js-line-number" data-line-number="59"></td>
        <td id="file-particle-function-variable-example-html-LC59" class="blob-code blob-code-inner js-file-line">                  <span class=pl-en>$</span><span class=pl-kos>(</span> <span class=pl-s>"#varValue"</span> <span class=pl-kos>)</span><span class=pl-kos>.</span><span class=pl-en>html</span><span class=pl-kos>(</span> <span class=pl-s1>data</span><span class=pl-kos>.</span><span class=pl-c1>result</span> <span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L60" class="blob-num js-line-number" data-line-number="60"></td>
        <td id="file-particle-function-variable-example-html-LC60" class="blob-code blob-code-inner js-file-line">                  <span class=pl-en>log</span><span class=pl-kos>(</span><span class=pl-s>"Variable &#39;analogvalue&#39; retrieved. Value = &#39;"</span> <span class=pl-c1>+</span> <span class=pl-s1>data</span><span class=pl-kos>.</span><span class=pl-c1>result</span> <span class=pl-c1>+</span> <span class=pl-s>"&#39;"</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L61" class="blob-num js-line-number" data-line-number="61"></td>
        <td id="file-particle-function-variable-example-html-LC61" class="blob-code blob-code-inner js-file-line">                <span class=pl-kos>}</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L62" class="blob-num js-line-number" data-line-number="62"></td>
        <td id="file-particle-function-variable-example-html-LC62" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>}</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L63" class="blob-num js-line-number" data-line-number="63"></td>
        <td id="file-particle-function-variable-example-html-LC63" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L64" class="blob-num js-line-number" data-line-number="64"></td>
        <td id="file-particle-function-variable-example-html-LC64" class="blob-code blob-code-inner js-file-line">            <span class=pl-c>// A simple logout function. Unsets the user&#39;s deviceID and accessToken stored in local storage</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L65" class="blob-num js-line-number" data-line-number="65"></td>
        <td id="file-particle-function-variable-example-html-LC65" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>function</span> <span class=pl-en>logout</span><span class=pl-kos>(</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L66" class="blob-num js-line-number" data-line-number="66"></td>
        <td id="file-particle-function-variable-example-html-LC66" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L67" class="blob-num js-line-number" data-line-number="67"></td>
        <td id="file-particle-function-variable-example-html-LC67" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-en>removeItem</span><span class=pl-kos>(</span><span class=pl-s>"deviceID"</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L68" class="blob-num js-line-number" data-line-number="68"></td>
        <td id="file-particle-function-variable-example-html-LC68" class="blob-code blob-code-inner js-file-line">                <span class=pl-s1>localStorage</span><span class=pl-kos>.</span><span class=pl-en>removeItem</span><span class=pl-kos>(</span><span class=pl-s>"accessToken"</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L69" class="blob-num js-line-number" data-line-number="69"></td>
        <td id="file-particle-function-variable-example-html-LC69" class="blob-code blob-code-inner js-file-line">                <span class=pl-en>log</span><span class=pl-kos>(</span><span class=pl-s>"User logged out!"</span><span class=pl-kos>)</span><span class=pl-kos>;</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L70" class="blob-num js-line-number" data-line-number="70"></td>
        <td id="file-particle-function-variable-example-html-LC70" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>}</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L71" class="blob-num js-line-number" data-line-number="71"></td>
        <td id="file-particle-function-variable-example-html-LC71" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L72" class="blob-num js-line-number" data-line-number="72"></td>
        <td id="file-particle-function-variable-example-html-LC72" class="blob-code blob-code-inner js-file-line">            <span class=pl-c>// A very simple message logger function</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L73" class="blob-num js-line-number" data-line-number="73"></td>
        <td id="file-particle-function-variable-example-html-LC73" class="blob-code blob-code-inner js-file-line">            <span class=pl-k>function</span> <span class=pl-en>log</span><span class=pl-kos>(</span><span class=pl-s1>message</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L74" class="blob-num js-line-number" data-line-number="74"></td>
        <td id="file-particle-function-variable-example-html-LC74" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>{</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L75" class="blob-num js-line-number" data-line-number="75"></td>
        <td id="file-particle-function-variable-example-html-LC75" class="blob-code blob-code-inner js-file-line">                <span class=pl-en>$</span><span class=pl-kos>(</span> <span class=pl-s>"#log"</span> <span class=pl-kos>)</span><span class=pl-kos>.</span><span class=pl-en>html</span><span class=pl-kos>(</span><span class=pl-k>new</span> <span class=pl-v>Date</span><span class=pl-kos>(</span><span class=pl-kos>)</span> <span class=pl-c1>+</span> <span class=pl-s>" - "</span> <span class=pl-c1>+</span> <span class=pl-s1>message</span> <span class=pl-c1>+</span> <span class=pl-s>"<br/>"</span> <span class=pl-c1>+</span> <span class=pl-en>$</span><span class=pl-kos>(</span> <span class=pl-s>"#log"</span> <span class=pl-kos>)</span><span class=pl-kos>.</span><span class=pl-en>html</span><span class=pl-kos>(</span><span class=pl-kos>)</span><span class=pl-kos>)</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L76" class="blob-num js-line-number" data-line-number="76"></td>
        <td id="file-particle-function-variable-example-html-LC76" class="blob-code blob-code-inner js-file-line">            <span class=pl-kos>}</span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L77" class="blob-num js-line-number" data-line-number="77"></td>
        <td id="file-particle-function-variable-example-html-LC77" class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L78" class="blob-num js-line-number" data-line-number="78"></td>
        <td id="file-particle-function-variable-example-html-LC78" class="blob-code blob-code-inner js-file-line">        <span class=pl-kos></</span><span class=pl-ent>script</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L79" class="blob-num js-line-number" data-line-number="79"></td>
        <td id="file-particle-function-variable-example-html-LC79" class="blob-code blob-code-inner js-file-line">    <span class=pl-kos></</span><span class=pl-ent>body</span><span class=pl-kos>></span></td>
      </tr>
      <tr>
        <td id="file-particle-function-variable-example-html-L80" class="blob-num js-line-number" data-line-number="80"></td>
        <td id="file-particle-function-variable-example-html-LC80" class="blob-code blob-code-inner js-file-line"><span class=pl-kos></</span><span class=pl-ent>html</span><span class=pl-kos>></span></td>
      </tr>
</table>


  </div>

  </div>
</div>

      </div>
      <div class="gist-meta">
        <a href="https://gist.github.com/harrisonhjones/bc983aec2e7010046ab9f383cf08c807/raw/dda1590a1eb85ebd5dd4159fc8d6e7932d5a4dfc/Particle.Function.Variable.Example.html" style="float:right">view raw</a>
        <a href="https://gist.github.com/harrisonhjones/bc983aec2e7010046ab9f383cf08c807#file-particle-function-variable-example-html">Particle.Function.Variable.Example.html</a>
        hosted with &#10084; by <a href="https://github.com">GitHub</a>
      </div>
    </div>
</div>

   	*/


   	//access and fuction to get variables from particle
   	var deviceID    = "e00fce68f645bb07172afa34"; // Argon alex
   	var accessToken = "5975537948b5425fcf31b9df8a26c333d6dc742a"; // token for Argon Alex
   	//var event1 = "shine/movement";
   	var trackedEventName = "shine/phase";
   	var functionURL = "https://api.particle.io/v1/devices/" + deviceID + "/";
   	

   	//time control
   	var starttime = new Date().getTime; 
   	var currenttime = new Date().getTime;

   	//prepare for interaction
   	$(document).foundation();
   	$( document ).ready(function() {
   	    $("#deviceIDInput").val(  deviceID );
   	    $("#accessTokenInput").val(  accessToken );
   			loadVariables();
   			handleParticleEvents();
   	});

   	// phase control
   	var phase=0; 

   	 
   	function doPhaseControl( phase )
   	{
   		switch(phase)
   		{
   			case 1: //welcome 
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/1.JPG' );
   			break;  
   			case 2: //vertical instructions
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/2.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\2.jpg';
   			break;  
   			case 3: //vertical good job
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/3.GIF' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\3.gif';
   			break;  
   			case 4: //vertical try harder
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/4.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\4.jpg';
   			break;  
   			case 5: //horizontal instructions
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/5.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\5.jpg';
   			break;  
   			case 6: //horizontal good job
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/6.GIF' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\6.jpg';
   			break;  
   			case 7: //horizontal try harder 
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/7.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\7.jpg';
   			break;  
   			case 8: //change side instructions
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/8.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\8.jpg';
   			break;  
   			case 9: //horizontal good job
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/9.GIF' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\9.jpg';
   			break;  
   			case 10: //horizontal try harder
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/10.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\10.jpg';
   			break;  
   			case 11: //behind teeth
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/pacman.gif' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\pacman.gif';
   			break;  
   			case 12: //ending
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/12.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\12.jpg';
   			break;  
   			default: //welcome page
   			$('#shineDisplay').attr( "src", 'file:///C:/CMU/IOT-depth/display/1.JPG' );
   			//document.getElementById('shineDisplay').src='C:\CMU\IOT-depth\display\1.jpg'; 
   		}
   	}

   	function startIt()
   	{
   		/*
   			1) send a signal to Argon Alex to start running the code;
   			2) note down the time of running; 
   			3) update time spent on phases
   		*/
   	    var functionName = "control"; // name of function
   		var passedParameter = "1"; // data to send

   		//https://api.particle.io/v1/devices/123456789/startIt?access_token=1234566&params=Hello";
   		
   		var functionURL = "https://api.particle.io/v1/devices/" + deviceID + "/";

   		// don't change this!
   		$.post( functionURL + functionName + "/", { params: passedParameter , access_token: accessToken });
   	}
   	
   	function stopIt()
   	{
   		/*
   			1) send a signal to Argon Alex to stop;
   			2) reset
   			Note: the numbers do not reset to 0 at this point. 
   		*/
   	    var functionName = "control"; // name of function
   		var passedParameter = "0"; // data to send
   		var functionURL = "https://api.particle.io/v1/devices/" + deviceID + "/";
   		// don't change this!
   		$.post( functionURL + functionName + "/", { params: passedParameter , access_token: accessToken });
   	}
   	
   	function restart(){
   		/*
   			Basically it is stopping and then starting again.
   			Call those functions. 
   		*/
   		stopIt();
   		startIt();
   	}

   	function loadVariables(){ //get
   		var phaseRequest = $.get( functionURL + "phase", { access_token: accessToken }, function( data ) {
   			console.log( data );
   			console.log("loaded variables");
   			var phase = parseInt( data.result );

   			$( "#phase" ).val( phase ); //value stored in data.result

   			doPhaseControl(  phase ); // get the integer
               
               setTimeout(loadVariables, 2000); //reload variables every 1 sec
   		}).fail(function() {
   		    alert( "The phase of the teethbrushing process cannot be received. Make sure it is powered on." );
   		});


   	}

   	function handleParticleEvents()
   	{
   		var source = new EventSource("https://api.particle.io/v1/devices/" + deviceID + "/events?access_token=" + accessToken );
       	if (typeof(EventSource) !== "undefined") 
       	{
           	console.log("SSE is Supported!");
       	} else 
       	{
           	console.log("SSE is NOT Supported");
       	}
       	console.log("Done");
       	source.addEventListener( trackedEventName , function (e) 
       	{
           	console.log(e)
           	var obj = jQuery.parseJSON(e.data);
           	console.log(obj)
   				var newListItem = $( "<li>" + obj.data + " <span>" + obj.published_at + "</span> </li>" );
           	$("#dataLog ul").append( newListItem );
       	}, false);
   		
   	}		
   </script>
</body>
</html>
</pre>

Feedback and Future Steps

Overall, my idea has received good feedback during the demo in how it integrates necessary tasks with games. This might be something worthy of carrying on, though the task may not be limited to teethbrushing.
Some other suggestions for next steps include:

Use the orientation offered by the accelerometer and break down the process further

  • I had thought of this, but it was more complicated and does not really contribute to the demo of the idea. The current 3 phases is enough for the demo, but further splitting it up is definitely feasible.
  • There is a bit concern about whether breaking down too much will put too much burden on the children. They should be around 3-6 years old. Also, if we use the same game for same movement but different direction, there may be some perceived redundancy.

Movement Correspondance

For the Flappy Bird game, some users thought that they should move the brush up only when the bird should go up. This is some confusion that can be solved by creating a better game to match.

Real games instead of GIFs

Some suggested pairing the movement with real games, which means that instead of using GIFs to represent the status, they will actually controlling the game. Actually I don’t see a significant difference here. Perhaps this is still related to the correspondance of the movement and the display. This should definitely be worked on the remove any confusion for younger children.

Dash board for dentists.

As this only focuses on the process, the data collected may be of little use for dentists, but perhaps help parents learn about how well their children are performing, and intervene or reinforce early.

More themes

To avoid boredom and appeal to a larger range of users. Having moved the display from an attached screen to a website, it is easier to enable the user to choose what “game” he’d like to play but simply adding themes to choose from before starting the process.

Review

I want to express my thanks to Daragh Bryne who has provided help and guidance throughout the project, including the overall idea and coding details.
I appreciate this opportunity to explore the domain ofconsumer electronics in the form of a project that focuses on the education of responsibility of younger children.

Marketing Poster

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s