Published July 5, 2017 © GPL3+

Arduino - Web-Based Gauge

This project shows how to monitor Arduino using a web-based gauge.

BeginnerFull instructions provided8,649

Things used in this project

Hardware components

Arduino UNO

DIYables USB Cable 2.0 Type A/B for Arduino Uno

PHPoC WiFi Shield for Arduino

DIYables Potentiometer

DIYables Jumper Wires

DIYables Prototype Expansion Board for Arduino Uno

Optional

DIYables Starter Kit

DIYables Arduino Uno Case

Story

If you are a beginner, you can learn about Arduino - Rotary Angle Sensor here.

We can monitor everything with this project, but I took the rotary angle sensor as an example.

Demo

Wiring

Stack PHPoC WiFi shield or PHPoC Shield on Arduino
Connect pin GND, VCC and SIG of rotary angle sensor to GND, 5V and A0 of Arduino, respectively.

Data Flow

Arduino ---> PHPoC WiFi Shield ---> Web browser

Arduino reads the angle value from sensor and send the value to PHPoC WiFi Shield. When receiving the value, PHPoC WiFi Shield send it to Web Browser via websocket. JavaScript function visualizes the angle value on Gauge.

Note that: PHPoC shield has a built-in program to pass data from Arduino to web browser. Therefore, we don't need to care about it.

What We Need to Do

Set Wifi information for PHPoC shield (SSID and password)
Upload new UI to PHPoC shield
Write Arduino code

Setting Wifi Information for PHPoC Shield

See this instruction.

Upload new Web UI to PHPoC Shield

Download PHPoC source code remote_gauge.php (on code section).
Upload it to PHPoC shield using PHPoC debugger according to this instruction.

Write Arduino Code

Install PHPoC library for Arduino on Arduino IDE (see the instruction)
See source code in code section.

Try it

Click serial button on Arduino IDE to see the IP address.
Open web browser, type http:// replace_ip_address/remote_gauge.php
Click connect button and test it.

Similar Project but different hardware platform

This project does the same works but it used other hardware platform.

The Best Arduino Starter Kit for Beginner

See The Best Arduino Kit for Beginners

Function References

#include "SPI.h"
#include "Phpoc.h"

PhpocServer server(80);
boolean alreadyConnected = false;
int sensorPin = A0;   
float sensorValue = 0;  // variable to store the value coming from the sensor
int lastAngle = 0;

void setup() {
    Serial.begin(9600);
    while(!Serial)
        ;
    
    Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);

    server.beginWebSocket("gauge");

    Serial.print("WebSocket server address : ");
    Serial.println(Phpoc.localIP());    
}

void loop() {
    // when the client sends the first byte, say hello:
    PhpocClient client = server.available();
    
    if (client) {
        sensorValue = 0;
        for(int i = 0; i < 100; i++)
            sensorValue += analogRead(sensorPin);
        
        sensorValue /= 100;
        
        int angle = (int)(sensorValue / 1024.0 * 280);
        
        if(abs(angle - lastAngle) > 1){
            String txtMsg = String(angle) + "\r\n";  
            char buf[txtMsg.length()];
            txtMsg.toCharArray(buf, txtMsg.length());
            server.write(buf, txtMsg.length());
            Serial.println(txtMsg);
            
            lastAngle = angle;
            //delay(300);
        }
    }
}

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield / <?echo system("uname -i")?></title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style> body { text-align: center; } </style>
<script>
var canvas_width = 450, canvas_height = 450;
var pivot_x = canvas_width/2, pivot_y = canvas_height/2;
var pivot_radius = 7;
var hand_radius = 95, hand_max_angle = 280;
var ws;

function init()
{
	var gage = document.getElementById("gage_01");
	var ctx = gage.getContext("2d");

	gage.width = canvas_width;
	gage.height = canvas_height;

	ctx.translate(pivot_x, pivot_y);
	ctx.rotate(130 / 180 * Math.PI);
	ctx.shadowColor = "LightGray";
	
	update_view(0);
}
function connect_onclick()
{
	if(ws == null)
	{
		ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/gauge", "text.phpoc");
		document.getElementById("ws_state").innerHTML = "CONNECTING";
		ws.onopen = ws_onopen;
		ws.onclose = ws_onclose;
		ws.onmessage = ws_onmessage;

		ws.onmessage = ws_onmessage;
	}
	else
		ws.close();
}
function ws_onopen()
{
	document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
	document.getElementById("bt_connect").innerHTML = "Disconnect";
	ws.send("B\r\n");
}
function ws_onclose()
{
	document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
	document.getElementById("bt_connect").innerHTML = "Connect";
	ws.onopen = null;
	ws.onclose = null;
	ws.onmessage = null;
	ws = null;
}
function ws_onmessage(e_msg)
{
	e_msg = e_msg || window.event; // MessageEvent

	var angle = parseInt(e_msg.data);
	console.log(angle);

	update_view(angle);
}
function update_view(angle)
{
	var gage = document.getElementById("gage_01");
	var ctx = gage.getContext("2d");
	var text;

	if((angle < 0) || (angle > hand_max_angle))
		return;
	
	ctx.shadowBlur = 15;
	ctx.fillStyle = "#808080";
	ctx.beginPath();
	ctx.arc(0, 0, 215, 0, 2* Math.PI);
	ctx.fill();
	
	ctx.fillStyle = "#808080";
	ctx.strokeStyle = "#bfbfbf";
	ctx.lineWidth = 3;
	ctx.beginPath();
	ctx.arc(0, 0, 200, 0, 2* Math.PI);
	ctx.fill();
	ctx.stroke();
	
	ctx.shadowBlur = 1;
	ctx.fillStyle = "#383330";
	ctx.beginPath();
	ctx.arc(0, 0, 180, 0, 2* Math.PI);
	ctx.fill();
	
	ctx.fillStyle = "black";
	ctx.beginPath();
	ctx.arc(0, 0, 165, 0, 2* Math.PI);
	ctx.fill();
	
	ctx.strokeStyle = "white";
	ctx.fillStyle = "white";
	ctx.shadowBlur = 20;
	ctx.shadowColor = "white";
	ctx.save();
	
	ctx.lineWidth = 10;
	for(var i = 0; i < 5; i++)
	{
		ctx.beginPath();
		ctx.lineTo(hand_radius + 12, 0);
		ctx.lineTo(hand_radius + 50, 0);
		ctx.stroke();
		ctx.rotate(70 / 180 * Math.PI);
	}
	ctx.restore();
	ctx.save();
	ctx.rotate(35 / 180 * Math.PI);
	ctx.lineWidth = 8;
	for(var i = 0; i < 4; i++)
	{
		ctx.beginPath();
		ctx.lineTo(hand_radius + 12, 0);
		ctx.lineTo(hand_radius + 40, 0);
		ctx.stroke();
		ctx.rotate(70 / 180 * Math.PI);
	}
	ctx.restore();
	ctx.save();
	ctx.rotate( 17.5 / 180 * Math.PI);
	ctx.lineWidth = 7;
	for(var i = 0; i < 8; i++)
	{
		ctx.beginPath();
		ctx.lineTo(hand_radius + 12, 0);
		ctx.lineTo(hand_radius + 35, 0);
		ctx.stroke();
		ctx.rotate(35 / 180 * Math.PI);
	}
	
	ctx.restore();
	ctx.lineCap = "round";
	ctx.lineWidth = 7;
	
	ctx.rotate(angle / 180 * Math.PI);
	ctx.beginPath();
	ctx.lineTo(0, 0);
	ctx.lineTo(hand_radius, 0);
	ctx.stroke();
	ctx.rotate(-angle / 180 * Math.PI);
	
	ctx.beginPath();
	ctx.arc(0, 0, 10, 0, 2* Math.PI);
	ctx.fill();
	
	ctx.rotate(-130 / 180 * Math.PI);
	ctx.font = "24px Arial";
	ctx.textAlign = "center";
	ctx.fillText(angle + "°", 0, 50);
	ctx.rotate(130 / 180 * Math.PI);
}
window.onload = init;
</script>
</head>
<body>

<h2>
Arduino - Dynamic Gauge<br>

<canvas id="gage_01"></canvas>

<p>
WebSocket : <span id="ws_state">null</span><br>
</p>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button>
</h2>

</body>
</html>

Credits

IoT_lover

10 projects • 192 followers

Arduino - Web-Based Gauge

Things used in this project

Hardware components

Story

Demo

What We Need to Do

Try it

Similar Project but different hardware platform

The Best Arduino Starter Kit for Beginner

Function References

Code

Arduino Code

User Interface (remote_gauge.php)

Credits

IoT_lover

Comments

Embed the widget on your own site

Arduino - Web-Based Gauge

Arduino - Web-Based Gauge

Things used in this project

Hardware components

Story

Demo

What We Need to Do

Try it

Similar Project but different hardware platform

The Best Arduino Starter Kit for Beginner

Function References

Code

Arduino Code

User Interface (remote_gauge.php)

Credits

IoT_lover

Comments

Related channels and tags