- Fri Jul 12, 2019 11:58 pm
#83082
Hi All!
finally had sometime to attack this project.
it consisted on gathering data from a Pot (analog Read on the NodeMcu), passing the data to a webpage, and then displaying the data on the gauge.
It Works!!!
Here are the main parts of the Sketch: Ino
Here is the Index.html:
Look at the attached picture to see what it looks like and it does move the needle every time the pot is moved to a different position!
finally had sometime to attack this project.
it consisted on gathering data from a Pot (analog Read on the NodeMcu), passing the data to a webpage, and then displaying the data on the gauge.
It Works!!!
Here are the main parts of the Sketch: Ino
Code: Select all
* Wifi-AP MODE
* 07/11/2019
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h> //Include File System Headers
const char* htmlfile = "/index.html";
//WiFi Connection configuration
const char *ssid = "My Wifi";
const char *password = "123456789";
ESP8266WebServer server(80);
void handleADC(){
int a = analogRead(A0);
a = map(a,0,1023,0,100);
String adc = String(a);
Serial.println(adc);
server.send(200, "text/plane",adc); //sends data to server
}
void handleRoot(){
server.sendHeader("Location", "/index.html",true); //Redirect to our html web page
server.send(302, "text/plane","");
}
void handleWebRequests(){
if(loadFromSpiffs(server.uri())) return;
String message = "File Not Detected\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET)?"GET":"POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i=0; i<server.args(); i++){
message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
Serial.println(message);
}
void setup() {
delay(1000);
Serial.begin(115200);
Serial.println();
//Initialize File System
SPIFFS.begin();
Serial.println("File System Initialized");
Serial.print("Setting AP (Access Point)…");
Serial.println();
//Connect to wifi Network
WiFi.mode(WIFI_AP); //Only Access point
WiFi.softAP(ssid, password); //Start HOTspot
//If connection successful show IP address in serial monitor
Serial.print("Connected to: ");
Serial.println(ssid);
IPAddress IP = WiFi.softAPIP();
Serial.print("Server IP address: ");
Serial.println(IP);
//Initialize Webserver
server.on("/",handleRoot);
server.on("/getADC",handleADC); //Reads ADC function is called from out index.html
server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle as per URI
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
bool loadFromSpiffs(String path){
String dataType = "text/plain";
if(path.endsWith("/")) path += "index.htm";
if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
else if(path.endsWith(".html")) dataType = "text/html";
else if(path.endsWith(".htm")) dataType = "text/html";
else if(path.endsWith(".css")) dataType = "text/css";
else if(path.endsWith(".js")) dataType = "application/javascript";
else if(path.endsWith(".png")) dataType = "image/png";
else if(path.endsWith(".gif")) dataType = "image/gif";
else if(path.endsWith(".jpg")) dataType = "image/jpeg";
else if(path.endsWith(".ico")) dataType = "image/x-icon";
else if(path.endsWith(".xml")) dataType = "text/xml";
else if(path.endsWith(".pdf")) dataType = "application/pdf";
else if(path.endsWith(".zip")) dataType = "application/zip";
File dataFile = SPIFFS.open(path.c_str(), "r");
if (server.hasArg("download")) dataType = "application/octet-stream";
if (server.streamFile(dataFile, dataType) != dataFile.size()) {
}
dataFile.close();
return true;
}
Here is the Index.html:
Code: Select all
<!doctype html>
<html>
<head>
<title>Testing Gauges</title>
<script src="gauge.min.js"></script>
<link rel="stylesheet" type="text/css" href="gauge.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>Testing Gauge </h1>
</header>
<div align="center">
<canvas id="gauge-ps"></canvas>
</div>
<script>
setInterval(function() {
GetADC();
}, 1000);
function GetADC() {
var xhttp = new XMLHttpRequest();
var adc=0;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
adc = Number(this.responseText);
//adc = this.responseText ;
document.getElementById("demo").innerHTML = adc;
gaugePS.value = adc; //send DATA to needle
}
};
xhttp.open("GET", "/getADC", true);
xhttp.send();
}
var gaugePS = new RadialGauge({
renderTo: 'gauge-ps',
width: 200,
height: 200,
units: "°F",
title: "Analog",
minValue: 60,
maxValue: 260,
majorTicks: [60,80,100,120,140,160,180,200,240,260],
minorTicks: 2,
strokeTicks: true,
highlights: [
{
"from": 60,
"to": 100,
"color": "rgba(0,0, 255, .3)"
},
{
"from": 190,
"to": 260,
"color": "rgba(255, 0, 0, .3)"
}
],
ticksAngle: 225,
startAngle: 67.5,
colorMajorTicks: "#ddd",
colorMinorTicks: "#ddd",
colorTitle: "#eee",
colorUnits: "#ccc",
colorNumbers: "#eee",
colorPlate: "#222",
borderShadowWidth: 0,
borders: true,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
colorBorderOuter: "#333",
colorBorderOuterEnd: "#111",
colorBorderMiddle: "#222",
colorBorderMiddleEnd: "#111",
colorBorderInner: "#111",
colorBorderInnerEnd: "#333",
colorNeedleShadowDown: "#333",
colorNeedleCircleOuter: "#333",
colorNeedleCircleOuterEnd: "#111",
colorNeedleCircleInner: "#111",
colorNeedleCircleInnerEnd: "#222",
valueBoxBorderRadius: 0,
colorValueBoxRect: "#222",
colorValueBoxRectEnd: "#333"
});
gaugePS.draw();
</script>
<p id="demo"></p>
</body>
</html>
Look at the attached picture to see what it looks like and it does move the needle every time the pot is moved to a different position!
You do not have the required permissions to view the files attached to this post.
