Place to put your Basic demos and examples

Moderator: Mmiscool

User avatar
By tayfun
#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
By Mmiscool
#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
By tayfun
#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
By Mmiscool
#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