Javascript Gauge On Web Page, Example Code.

Place to put your Basic demos and examples

Moderator: Mmiscool

 Reply

User avatar

Javascript Gauge On Web Page, Example Code.

By tayfun
- Wed Dec 09, 2015 4:19 pm #36089 gauges demo,

Image


Download and , upload your file manager on esp

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


paste this code,

Code: Select allwprint |<!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>|
User avatar

Re: Javascript Gauge On Web Page, Example Code.

By Mmiscool
- Wed Dec 09, 2015 6:07 pm #36105 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 allfunction 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 allmsgbranch [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
User avatar

Re: Javascript Gauge On Web Page, Example Code.

By tayfun
- Wed Dec 09, 2015 6:35 pm #36107 Hi friend, test this code! "myvalue" variable

Code: Select allmyvalue = 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>|


User avatar

Re: Javascript Gauge On Web Page, Example Code.

By Mmiscool
- Wed Dec 09, 2015 7:10 pm #36109 Nice.

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

Code: Select allbla = 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
 Reply
Return to Programming Examples