Remote Temperature Monitoring (HTML5 real-time graph)

Remote Temperature Monitoring (HTML5 real-time graph)

Postby Amy » Wed Feb 17, 2016 1:39 pm

Output a graph using HTML5 Canvas in real time while saving the temperature per second on nm0 area using PHPoC Blue (P4S-342).

Find the value of the temperature using the sensor.

Line Connection to PHPoC Blue
[Temperature Sensor] ----- [PHPoC Blue]
[VDD] ------- [3.3V]
[GND] ------- [GND]
[DQ] ------- [HT0]
[DQ] ------- [HT1]

A 4.7K ohm pullup resistor is required on the DQ pin.

-Using Universal breadboard


-Using PHPoC Blue breadboard


Screenshot of the Web page


Video clips
Lowered the temperature with some ice.

phpBB [video]


Source Codes
(Please find the attached file)

[index.php]
Code: Select all

<?php
$ws_host 
= _SERVER("HTTP_HOST");
 
set_time_limit
(30);
 
include_once 
"/lib/sd_340.php";
include_once "/lib/sn_tcp_ws.php";
 
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPoC / <?echo system("uname -i")?></title>
<meta content="initial-scale=0.5, maximum-scale=1.0, minimum-scale=0.5, width=device-width" name="viewport">
<style type="text/css">
body {font-family : "calibri"}
</style>
<script type="text/javascript">
var ws;
var canvas;
var ctx;
var WIDTH = 650;
var HEIGHT = 460;
var graphWIDTH = 590;
var graphHEIGHT = 400;
var padding = 30;
var temps = Array(60); 
<?php
 
$temp60 
= "";
nm_read(0,0,$temp60, 300);
 
$temp 
= explode(",", $temp60, 61); //60sec. 
for($i = 0; $i < 60; $i++) 
{?>
temps[<?echo $i?>] = <? echo (float) $temp[$i]?>
<?}?>    
 
function addlabels(){
ctx.font = "15px calibri";
ctx.fillStyle = "#383838";
/* y axis labels */
ctx.fillText("Temps ('c)", 2, 15);
ctx.fillText(" 50", 5, 35);
ctx.fillText(" 40", 5, 115);
ctx.fillText(" 30", 5, 195);
ctx.fillText(" 20", 5, 275);
ctx.fillText(" 10", 5, 355);
ctx.fillText(" 0",  10, 435);
/* x axis labels */
ctx.fillText("Time (Sec.)", 570, 450);
}
 
function drawguide()
{
    ctx.lineWidth = 0.5;      
    ctx.strokeStyle = "#d3d3d3";
    ctx.beginPath();
    
    //10'c
    ctx.moveTo(padding, 350);
    ctx.lineTo(graphWIDTH + padding, 350);
    ctx.stroke();  
    //20'c
    ctx.moveTo(padding, 270);
    ctx.lineTo(graphWIDTH + padding, 270);
    ctx.stroke();  
    //30'c
    ctx.moveTo(padding, 190);
    ctx.lineTo(graphWIDTH + padding, 190);
    ctx.stroke();  
    //40'c
    ctx.moveTo(padding, 110);
    ctx.lineTo(graphWIDTH + padding, 110);
    ctx.stroke();  
    
}
 
function drawXY()
{
    ctx.lineWidth =  4;      
    ctx.strokeStyle = "#828282";
    ctx.beginPath();
    /* y axis along the left edge of the canvas*/  
    ctx.moveTo(padding,padding);
    ctx.lineTo(padding,graphHEIGHT + padding+2);
    ctx.stroke();  
    /* x axis along the bottom edge of the canvas*/  
    ctx.moveTo(padding, graphHEIGHT + padding);
    ctx.lineTo(graphWIDTH + padding,graphHEIGHT + padding);
    ctx.stroke();  
    
}
 
function plotdata()
{
    ctx.lineWidth = 3;  
    ctx.strokeStyle = "#20B2AA";
    ctx.shadowBlur = 2;
    ctx.shadowColor = 'rgb(255, 255, 255)';    
    ctx.beginPath();  
    
    for (var j in temps)
    {
        val = HEIGHT-(temps[j] * 8); 
        ctx.lineTo((j*10) + padding, (graphHEIGHT + padding) - (temps[j]) * 8); //shift 
        ctx.stroke();
    } 
}
 
function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
 
function draw() {
    clear();
    drawguide();
    plotdata();  
    drawXY();
    addlabels();
}
 
function ws_init()
{
    ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/temperature", "text.phpoc");
    document.getElementById("ws_state").innerHTML = "CONNECTING";
 
    ws.onopen  = function(){ document.getElementById("ws_state").innerHTML = "OPEN" };
    ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
    //ws.onerror = function(){ alert("websocket error " + this.url) };
 
    ws.onmessage = ws_onmessage;
}
 
function temp_array(temp)
{
    var last_pos;
    last_pos = 59;
    
    for (var i =  0; i < last_pos; i ++ )
        temps[i] = temps[i+1];
        
    temps[last_pos] = temp;  
}
 
function ws_onmessage(e_msg)
{
    e_msg = e_msg || window.event; 
 
    temp_array(e_msg.data);
 
    canvas  = document.getElementById("canvas_graph");
    ctx = canvas.getContext("2d");
    draw();
    
    document.getElementById("ws_reply").innerHTML = "Current Temperature : " + e_msg.data + " 'C";    
}
window.onload = ws_init;
</script>
</head>
<body>
<center>
    <H2>Temperature Graph</H2>
 
    <canvas id="canvas_graph" width="650" height="460"></canvas><br />
    Web Socket : <span id="ws_state"></span><br/>
    <span id="ws_reply"></span><br />
</center>    
</body>
</html>


[task0.php]
Code: Select all

<?php
include_once 
"/lib/sd_340.php";
include "/lib/sn_tcp_ws.php";
 
ws_setup
(0, "temperature", "text.phpoc");
 
//bus reset
function begin()
{
    global $pid_ht_in, $pid_ht_out;
 
    pid_ioctl
($pid_ht_in, "set repc 4");
    pid_ioctl($pid_ht_in, "start");
 
    pid_ioctl
($pid_ht_out, "set count 1 600");
    pid_ioctl($pid_ht_out, "set repc 2");
    pid_ioctl($pid_ht_out, "start");
    while(pid_ioctl($pid_ht_out, "get state"))
        ;
    pid_ioctl($pid_ht_out, "stop");
 
    while
(pid_ioctl($pid_ht_in, "get state"))
        ;
    pid_ioctl($pid_ht_in, "stop");
 
    $presence_pulse 
= pid_ioctl($pid_ht_in, "get count 3");
    if(($presence_pulse < 60) || ($presence_pulse > 240))
        return false;
    else
        return true
;
}
 
//1byte send
function write_byte($seq_str)
{
    global $pid_ht_out;
    pid_ioctl($pid_ht_out, "set count $seq_str");
    
    pid_ioctl
($pid_ht_out, "set repc 16");
    pid_ioctl($pid_ht_out, "start");
    while(pid_ioctl($pid_ht_out, "get state"))
        ;
    pid_ioctl($pid_ht_out, "stop");
}
 
//1byte recieve
function read_byte()
{
    global $pid_ht_out, $pid_ht_in;
    $seq_read = "1 3 63 3 63 3 63 3 63 3 63 3 63 3 63 3";
    $sum = 0;
    $value = 0;
 
    
    pid_ioctl
($pid_ht_in, "set repc 16");
    pid_ioctl($pid_ht_in, "start");
 
    pid_ioctl
($pid_ht_out, "set count $seq_read");
    pid_ioctl($pid_ht_out, "set repc 16");
    pid_ioctl($pid_ht_out, "start");
    while(pid_ioctl($pid_ht_out, "get state"))
        ;
    pid_ioctl($pid_ht_out, "stop");
 
    while
(pid_ioctl($pid_ht_in, "get state"))
        ;
    pid_ioctl($pid_ht_in, "stop");
 
    for
($i = 0; $i < 8; $i++)
    {
        $cnt = $i * 2 + 1;
        $cnt_val = pid_ioctl($pid_ht_in, "get count $cnt");
        if($cnt_val < 15)
            $value = 1;
        else
            $value 
= 0;
 
        $value 
<<= $i;
        $sum += $value;
    }
    
    return $sum
;
}
 
//SKIP ROM command
function skip_rom()
{
    global $seq_skip_rom;
    write_byte($seq_skip_rom);
}
 
//CONVERT T command
function convert_t()
{
    global $seq_convert_t;
 
    begin
();
    skip_rom();
 
    write_byte
($seq_convert_t);
    usleep(750000);
}
 
//READ SCRATCHPAD 
function read_scratchpad()
{
    global $seq_read_scratchpad;
    $str = "";
 
    write_byte
($seq_read_scratchpad);
 
    for
($i = 0; $i < 9; $i++)
    {
        $data = read_byte();
        $str .= int2bin($data, 1);
        if($i == 8)
            $crc_scratchpad = $data;
    }    
    
    $crc 
= (int)system("crc 8 %1 00 8c lsb", substr($str, 0, -1));
    if($crc != $crc_scratchpad)
    {
        echo "CRC Error!\r\n";
        return false;
    }
    else
        return $str
;
}
 
//read temperature
function read_temp()
{
    begin();
    skip_rom();
 
    $scratchpad_data 
= read_scratchpad();
    if($scratchpad_data === false)
        return false;
 
    $temp 
= bin2int(substr($scratchpad_data, 0, 2), 0, 2);
 
    $temp_int 
= $temp >> 4;
    $temp_dec = 0;
    $dec_flag = 0;
 
    for
($i = 0; $i < 4; $i++)
    {
        if($temp & 0x01)
        {
            $dec_flag = 1;
            $temp_dec += 1.0 / pow(2, (4-$i));
        }
        $temp >>= 1;
    }
 
    if
($dec_flag)
    {
        $temp_tot = $temp_int + $temp_dec;
        return (float) $temp_tot;
    }
    else
        return 
(float) $temp_int;
}
 
//timing
$seq_skip_rom        = "1 65 5 65 5 10 55 10 55 65 5 65 5 10 55 10";   // 0xcc
$seq_convert_t       = "1 65 5 65 5 10 55 65 5 65 5 65 5 10 55 65";    // 0x44
$seq_read_scratchpad = "1 65 5 10 55 10 55 10 55 10 55 10 55 65 5 10"; // 0xbe
 
//init HT1 
$pid_ht_in = pid_open("/mmap/ht1");
pid_ioctl($pid_ht_in, "set div us");
pid_ioctl($pid_ht_in, "set mode capture toggle");
pid_ioctl($pid_ht_in, "set trigger from pin fall");
 
//init HT0
$pid_ht_out = pid_open("/mmap/ht0");
pid_ioctl($pid_ht_out, "set div us");
pid_ioctl($pid_ht_out, "set mode output toggle");
pid_ioctl($pid_ht_out, "set output od");
pid_ioctl($pid_ht_out, "set output high");
 
$temp60 
= "";
nm_read(0,0,$temp60, 300);


if ((Bool)strpos($temp60, ",") == FALSE)    
{
     $temp60 = "00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,00.0,";
}
 
while(1)
{
   
        $temp 
= 0.0;
        $temp_split = explode(",", $temp60, 2);
        
        $temp_oldest_len 
= strlen($temp_split[0]) + 1;
        $temp60 = substr($temp60, $temp_oldest_len);

        convert_t();
         
        $temp 
= read_temp();
 
        $temp 
= sprintf("%.01f", $temp);
        if ( strlen($temp) == 3  )
            $temp = "0" . $temp; 
 
        $temp60 
= $temp60 . (string)$temp . ",";
 
        nm_write
(0, 0, $temp60); 
        
        if
(ws_state(0) == TCP_CONNECTED)
        {
            ws_write(0, "$temp");
 
        
}
        
        sleep
(1);
}
    
    
pid_close
($pid_ht_in);
pid_close($pid_ht_out);
 
?>
Attachments
1wire_ds18b20_graph.zip
(3.53 KiB) Downloaded 168 times
Amy
 
Posts: 13
Joined: Wed May 14, 2014 5:37 pm

Re: Remote Temperature Monitoring (HTML5 real-time graph)

Postby crossfield » Mon Nov 06, 2017 9:39 pm

Good day. That is a nice work you did here. I am new to PHPoC and embedded systems and it has been really helpful in learning a few things. Please, could you assist me as I have been having issues trying to modify the codes to be able to also sense analogue pH, display the pH alongside the Temperature graph and send an alarm email if critical levels are reached in both temperature and pH?
Help would be most appreciated.
thanks.
crossfield
 
Posts: 1
Joined: Thu Aug 24, 2017 4:00 pm

Re: Remote Temperature Monitoring (HTML5 real-time graph)

Postby Khanh » Tue Nov 07, 2017 9:12 am

crossfield wrote:Good day. That is a nice work you did here. I am new to PHPoC and embedded systems and it has been really helpful in learning a few things. Please, could you assist me as I have been having issues trying to modify the codes to be able to also sense analogue pH, display the pH alongside the Temperature graph and send an alarm email if critical levels are reached in both temperature and pH?
Help would be most appreciated.
thanks.

Hello crossfield,
PHPoC members are willing to help you. Which issue did you meet? did you have PH sensor? could you please post your code?
Please feel free to comment here!
Khanh
 
Posts: 72
Joined: Fri Mar 11, 2016 10:57 am


Return to Project

Who is online

Users browsing this forum: No registered users and 1 guest

cron