You said you done it!
Do you have a link or sketch showing your results. A guide would be great!
I have tested the sketch mentioned on the earlier post with no internet what’s so ever and works !
Hope to hear from you soon!
Explore... Chat... Share...
Moderator: igrr
Carlitos007 wrote:Ian, thank for the interest.
You said you done it!
Do you have a link or sketch showing your results. A guide would be great!
I have tested the sketch mentioned on the earlier post with no internet what’s so ever and works !
Hope to hear from you soon!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=windows-1252">
<title>Gauges</title>
<script src="gauge.js"></script>
<script src="xml.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body onload="process()">
<table style=" text-align: left; width: 50%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><a href="/">HOME</a><br>
</td>
<td style="vertical-align: top;"><a href="/help">HELP</a><br>
</td>
<td style="vertical-align: top;"><a href="/net">NETWORK</a><br>
</td>
<td style="vertical-align: top;"><a href="/list">LIST FILES</a><br>
</td>
<td style="vertical-align: top;"><a href="/up">UPLOAD FILES</a><br>
</td>
</tr>
</tbody>
</table>
<p> </p>
<h2>MyWeb Dials<br>
</h2>
<p> <canvas id="gauge1" width="400" height="400"
data-type="canv-gauge" data-title="Temperature"
data-min-value="-10" data-max-value="100" data-major-ticks="-10
0 10 20 30 40 50 60 70 80 90 100" data-minor-ticks="2"
data-stroke-ticks="true" data-units="C" data-value-format="2.0"
data-glow="true" data-animation-delay="10"
data-animation-duration="200" data-animation-fn="bounce"
data-colors-needle="#f00 #00f" data-highlights="-10 15 #33a, 10
30 #ccc, 30 40 #eaa, 40 100 #e00"></canvas> <canvas id="gauge2"
width="400" height="400" data-type="canv-gauge"
data-title="Pressure" data-min-value="950" data-max-value="1050"
data-major-ticks="950 960 970 980 990 1000 1010 1020 1030 1040
1050" data-minor-ticks="2" data-stroke-ticks="true"
data-units="hPa" data-value-format="4.0" data-glow="true"
data-animation-delay="10" data-animation-duration="200"
data-animation-fn="bounce" data-colors-needle="#f00 #00f"
data-highlights="950 990 #aaa, 1010 1050 #ff0"> </canvas> </p>
<br>
<h3>These dials are updated regularly. You <i>might </i>like to
use this page as a starting point for something even more
creative?</h3>
<h3>Prettier than the table? The choice is yours!</h3>
<div w3-include-html="content.html"></div>
<script src="w3-include-HTML.js"></script>
<h3>Take a close look at this page, look at the source, you <i>
should </i>be able to work out how to change things.</h3>
<p><a href="http://myiot.co.uk"><b>MyIot</b></a><br>
</p>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Testing Gauges</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas id="gauge-ps"></canvas>
<script>
setInterval(function() {
// Gets ADC value at every one second
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);
}
};
xhttp.open("GET", "/getADC", false);
xhttp.send();
}
</script>
<script>
var gaugePS = new RadialGauge({
renderTo: 'gauge-ps',
width: 400,
height: 400,
units: 'Temp',
minValue: 0,
maxValue: 100,
majorTicks: [
'0','10','20','30','40','50','60','70','80','90','100'
],
minorTicks: 2,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights : [
{ from : 45, to : 80, color : 'rgba(78, 78, 76, 0.5)' },
{ from : 80, to : 100, color : 'rgba(225, 7, 23, 0.75)' }
],
valueInt: 1,
valueDec: 0,
colorPlate: "#fff",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorValueText: "#000",
colorValueBoxRect: "#fff",
colorValueBoxRectEnd: "#fff",
colorValueBoxBackground: "#fff",
colorValueBoxShadow: false,
colorValueTextShadow: false,
colorNeedleShadowUp: true,
colorNeedleShadowDown: false,
colorNeedle: "rgba(200, 50, 50, .75)",
colorNeedleEnd: "rgba(200, 50, 50, .75)",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: true,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 5,
colorBorderOuter: "#fafafa",
colorBorderOuterEnd: "#cdcdcd",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Verdana",
fontTitle: "Verdana",
fontUnits: "Verdana",
fontValue: "Led",
fontValueStyle: 'italic',
fontNumbersSize: 20,
fontNumbersStyle: 'italic',
fontNumbersWeight: 'bold',
fontTitleSize: 24,
fontUnitsSize: 22,
fontValueSize: 50,
animatedValue: true
});
gaugePS.draw();
gaugePS.value = "adc" ;
</script>
</body>
</html>
I suspect the examples you cite merely point to it online somewhere.The description on the page given explicitly says that the code: index.html, style.css, jQuery.min.js, d3-gauge.js. is contained locally on the ESP8266 in SPIFFS files. It does not rely on an internet connection to work.
It takes about 20-25 seconds for home assistant c[…]
I tried to upgrade tof my sonoff basic R2 with the[…]
a problem Perhaps you want to define "Probl[…]
Rebooting your router will not give you a faster I[…]
There are no other notifications from esptool.py i[…]
Using the Arduino IDE, you'll learn how to set up […]
In this project, you will post to Twitter using an[…]
In this project, we will build a water level contr[…]
I guess I'm late, but I had the same problem and f[…]
Last night I received my first D1 Minis for a lear[…]
Although I am aware that this is an old post, I fe[…]