ESP8266 Community Forum

Posted: **Wed Dec 09, 2015 4:19 pm**

gauges demo,

Download and , upload your file manager on esp

"http://newmaan.com/gauge.min.js" ( javascript file)

paste this code,

wprint |<!doctype html>|
wprint |<html>|
wprint |<head>|
wprint |<title>Gtest</title>|
wprint |<script src=/file?file=gauge.min.js></script>|
wprint |</head>|
wprint |<body>|
wprint |<canvas id="gauge1" width="400" height="400"|
wprint |data-type="canv-gauge"|
wprint |data-title="Speed"|
wprint |data-min-value="0"|
wprint |data-max-value="220"|
wprint |data-major-ticks="0 20 40 60 80 100 120 140 160 180 200 220"|
wprint |data-minor-ticks="2"|
wprint |data-stroke-ticks="true"|
wprint |data-units="Km/h"|
wprint |data-value-format="3.2"|
wprint |data-glow="true"|
wprint |data-animation-delay="10"|
wprint |data-animation-duration="200"|
wprint |data-animation-fn="bounce"|
wprint |data-colors-needle="#f00 #00f"|
wprint |data-highlights="0 30 #eee, 30 60 #ccc, 60 90 #aaa, 90 220 #eaa"|
wprint |data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue( Math.random() * 220);}, 1000);"|
wprint |></canvas>|
wprint |<canvas data-type="canv-gauge" data-value="17.34"></canvas>|   
wprint |<canvas width="300" height="300"|
wprint |data-type="canv-gauge"|
wprint |data-title="Hip-Hop"|
wprint |data-onready="setInterval( function() { Gauge.Collection[2].setValue( Math.random() * 100);}, 1000);"|
wprint |></canvas>|
wprint |<canvas width="200" height="200"|
wprint |data-type="canv-gauge"|
wprint |data-title="Negative Values"|
wprint |data-min-value="-50"|
wprint |data-max-value="50"|
wprint |data-onready="setInterval( function() { Gauge.Collection[3].setValue( (Math.random()*100) -50 );}, 1000);"|
wprint |></canvas>|
wprint |</body>|
wprint |</html>|

Posted: **Wed Dec 09, 2015 6:07 pm**

Hello,

I added this to your js file and uploaded to the device. I must admit I am not all too good with the java script bit.

This function will fetch a resource off of the esp such as "../../msg?"

Code: Select all

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

I attempted to make one of the meters read out the analog input pin. This is the basic code. It is how ever not working. Not quite understanding how to change the value of the guage possibly.

Code: Select all

msgbranch [get.AI]
goto [show.page]

[get.AI]
ai bla
msgreturn bla
wait


[show.page]
wprint |<!doctype html>|
wprint |<html>|
wprint |<head>|
wprint |<title>Gtest</title>|
wprint |<script src=/file?file=gauge.min.js></script>|
wprint |</head>|
wprint |<body>|
wprint |<canvas id="gauge1" width="400" height="400"|
wprint |data-type="canv-gauge"|
wprint |data-title="Speed"|
wprint |data-min-value="0"|
wprint |data-max-value="220"|
wprint |data-major-ticks="0 20 40 60 80 100 120 140 160 180 200 220"|
wprint |data-minor-ticks="2"|
wprint |data-stroke-ticks="true"|
wprint |data-units="Km/h"|
wprint |data-value-format="3.2"|
wprint |data-glow="true"|
wprint |data-animation-delay="10"|
wprint |data-animation-duration="200"|
wprint |data-animation-fn="bounce"|
wprint |data-colors-needle="#f00 #00f"|
wprint |data-highlights="0 30 #eee, 30 60 #ccc, 60 90 #aaa, 90 220 #eaa"|
wprint |data-onready="setInterval( function() { Gauge.Collection.get('gauge1').setValue( Number(httpGet("../msg?")));}, 1000);"|
wprint |></canvas>|
wprint |<canvas data-type="canv-gauge" data-value="17.34"></canvas>|   
wprint |<canvas width="300" height="300"|
wprint |data-type="canv-gauge"|
wprint |data-title="Hip-Hop"|
wprint |data-onready="setInterval( function() { Gauge.Collection[2].setValue( Math.random() * 100);}, 1000);"|
wprint |></canvas>|
wprint |<canvas width="200" height="200"|
wprint |data-type="canv-gauge"|
wprint |data-title="Negative Values"|
wprint |data-min-value="-50"|
wprint |data-max-value="50"|
wprint |data-onready="setInterval( function() { Gauge.Collection[3].setValue( (Math.random()*100) -50 );}, 1000);"|
wprint |></canvas>|
wprint |</body>|
wprint |</html>|
wait

Posted: **Wed Dec 09, 2015 6:35 pm**

Hi friend, test this code! "myvalue" variable

Code: Select all

myvalue = 22


wprint |<!doctype html>|
wprint |<html>|
wprint |<head>|
wprint |<title>Gtest</title>|
wprint |<script src=/file?file=gauge.min.js></script>|
wprint |</head>|
wprint |<body>|
wprint |<canvas id="gauge1"data-value=|

wprint htmlvar(myvalue)   ' 1. gauge paste here code

wprint | width="400" height="400"|
wprint |data-type="canv-gauge"|
wprint |data-title="Speed"|
wprint |data-min-value="0"|
wprint |data-max-value="220"|
wprint |data-major-ticks="0 20 40 60 80 100 120 140 160 180 200 220"|
wprint |data-minor-ticks="2"|
wprint |data-stroke-ticks="true"|
wprint |data-units="Km/h"|
wprint |data-value-format="3.2"|
wprint |data-glow="true"|
wprint |data-animation-delay="10"|
wprint |data-animation-duration="200"|
wprint |data-animation-fn="bounce"|
wprint |data-colors-needle="#f00 #00f"|
wprint |data-highlights="0 30 #eee, 30 60 #ccc, 60 90 #aaa, 90 220 #eaa"|
wprint |></canvas>|
wprint |<canvas data-type="canv-gauge" data-value=|

wprint htmlvar(myvalue)  ' paste here your code

wprint |></canvas>|   
wprint |<canvas width="300" height="300"|
wprint |data-type="canv-gauge"|
wprint |data-title="Hip-Hop"|
wprint |data-onready="setInterval( function() { Gauge.Collection[2].setValue( Math.random() * 100);}, 1000);"|
wprint |></canvas>|
wprint |<canvas width="200" height="200"|
wprint |data-type="canv-gauge"|
wprint |data-title="Negative Values"|
wprint |data-min-value="-50"|
wprint |data-max-value="50"|
wprint |data-onready="setInterval( function() { Gauge.Collection[3].setValue( (Math.random()*100) -50 );}, 1000);"|
wprint |></canvas>|
wprint |</body>|
wprint |</html>|

Posted: **Wed Dec 09, 2015 7:10 pm**

Nice.

So here is a single meter that will display the analog input pin and refresh ever 5 seconds.

Code: Select all

bla = 0
ONLOAD [get.AI]
goto [show.page]

[get.AI]
ai bla
wait


[show.page]
wprint |<meta http-equiv='refresh' content='5;URL=/input?'>|
wprint |<!doctype html>|
wprint |<html>|
wprint |<head>|
wprint |<title>Gtest</title>|
wprint |<script src=/file?file=gauge.min.js></script>|
wprint |</head>|
wprint |<body>|
wprint |<canvas id="gauge1"data-value=|
wprint htmlvar(bla)   ' 1. gauge paste here code
wprint | width="400" height="400"|
wprint |data-type="canv-gauge"|
wprint |data-title="Speed"|
wprint |data-min-value="0"|
wprint |data-max-value="1025"|
wprint |data-major-ticks="0 100 200 300 400 500 600 700 800 900 1000"|
wprint |data-minor-ticks="2"|
wprint |data-stroke-ticks="true"|
wprint |data-units="Km/h"|
wprint |data-value-format="3.2"|
wprint |data-glow="true"|
wprint |data-animation-delay="10"|
wprint |data-animation-duration="200"|
wprint |data-animation-fn="bounce"|
wprint |data-colors-needle="#f00 #00f"|
wprint |data-highlights="0 30 #eee, 30 60 #ccc, 60 90 #aaa, 90 220 #eaa"|
wprint |></canvas>|

wprint |</body>|
wprint |</html>|
wait

ESP8266 Community Forum

Javascript Gauge On Web Page, Example Code.

Javascript Gauge On Web Page, Example Code.

Re: Javascript Gauge On Web Page, Example Code.

Re: Javascript Gauge On Web Page, Example Code.

Re: Javascript Gauge On Web Page, Example Code.