Scratchpad

Graph but with the autorefresh at 100msec

CODE: xxxx.bas

A$ = A$ + | graph.update([Number(V), Number(I) ,Number(P), Number(PH)]);|A$ = A$ + | }, 50);|jscript a$pause 500autorefresh 100for z = 1 to 10000 cnt = z mod 100 voltage = cnt : current = 100-cnt : power = sin(cnt/100 * pi) * 100 : phase = (cnt + 50) mod 100 pause 50next z

Smoothie charts with autorefresh

CODE: smoothie1.bas

cls

jsexternal "/smoothie.js"

pause 300

voltage = 0 : current = 0 : power = 0

A$ = ||

A$ = A$ + |<canvas id="chart" style="width:100%; height:200px"></canvas>|

a$ = a$ + |<input type='text' data-var='voltage' id='voltage' style="display:none;">|

a$ = a$ + |<input type='text' data-var='current' id='current' style="display:none;">|

a$ = a$ + |<input type='text' data-var='power' id='power' style="display:none;">|

html a$

pause 300

A$ = ""

A$ = A$ + |if (typeof grtimer !== 'undefined') clearInterval(grtimer);|

A$ = A$ + |var voltages = new TimeSeries();|

A$ = A$ + |var currents = new TimeSeries();|

A$ = A$ + |var powers = new TimeSeries();|

A$ = A$ + |function createTimeline() {|

A$ = A$ + | var chart = new SmoothieChart({responsive: true, maxValue:1, minValue:-1});|

A$ = A$ + | chart.addTimeSeries(voltages, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });|

A$ = A$ + | chart.addTimeSeries(currents, { strokeStyle: 'rgba(255, 0, 0, 1)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 4 });|

A$ = A$ + | chart.addTimeSeries(powers, { strokeStyle: 'rgba(255, 0, 255, 1)', fillStyle: 'rgba(0, 0, 255, 0.0)', lineWidth: 2 });|

A$ = A$ + | chart.streamTo(document.getElementById("chart"), 500);|

A$ = A$ + |}|

A$ = A$ + |createTimeline();|

A$ = A$ + |grtimer = setInterval(function() {|

A$ = A$ + | voltages.append(new Date().getTime(), _$("voltage").value );|

A$ = A$ + | currents.append(new Date().getTime(), - _$("current").value );|

A$ = A$ + | powers.append(new Date().getTime(), - _$("power").value );|

A$ = A$ + |}, 100);|

jscript a$

pause 500

autorefresh 50

for z = 1 to 100000

voltage = sin(z/180)

current = cos(z/180)

power = sin(z/180 + 1/120) pause 5next z

CODE: xxxx.bas

cls

jsexternal "/smoothie.js"

pause 300

jsexternal "/gauge.min.js"

pause 300

voltage = 0 : current = 0 : power = 0

A$ = ||

A$ = A$ + |<canvas id="chart" style="width:100%; height:200px"></canvas>|

A$ = A$ + |<br>|

a$ = a$ + |<input type='text' data-var='voltage' id='voltage' style="display:none;">|

a$ = a$ + |<input type='text' data-var='current' id='current' style="display:none;">|

a$ = a$ + |<input type='text' data-var='power' id='power' style="display:none;">|

'A$ = A$ + |<canvas data-type="radial-gauge" data-width="150" data-var="needle"></canvas>|

A$ = A$ + |<canvas data-type="radial-gauge"|

A$ = A$ + | data-width="200"|

A$ = A$ + | data-height="200"|

A$ = A$ + | data-units="Km/h"|

A$ = A$ + | data-title="false"|

A$ = A$ + | data-value="33.77"|

A$ = A$ + | data-animate-on-init="true"|

A$ = A$ + | data-animated-value="true"|

A$ = A$ + | data-min-value="0"|

A$ = A$ + | data-max-value="100"|

A$ = A$ + | data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"|

A$ = A$ + | data-minor-ticks="2"|

A$ = A$ + | data-stroke-ticks="false"|

A$ = A$ + | data-highlights='[|

A$ = A$ + | { "from": 0, "to": 10, "color": "rgba(0,255,0,.15)" },|

A$ = A$ + | { "from": 10, "to": 20, "color": "rgba(255,255,0,.15)" },|

A$ = A$ + | { "from": 20, "to": 80, "color": "rgba(255,30,0,.25)" },|

A$ = A$ + | { "from": 80, "to": 90, "color": "rgba(255,0,225,.25)" },|

A$ = A$ + | { "from": 90, "to": 100, "color": "rgba(0,0,255,.25)" }|

A$ = A$ + | ]'|

A$ = A$ + | data-color-plate="black"|

A$ = A$ + | data-color-major-ticks="#f5f5f5"|

A$ = A$ + | data-color-minor-ticks="#ddd"|

A$ = A$ + | data-color-title="#fff"|

A$ = A$ + | data-color-units="#ccc"|

A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-needle-start="rgba(240, 128, 128, 1)"|A$ = A$ + | data-color-needle-end="rgba(255, 160, 122, .9)"|A$ = A$ + | data-value-box="false"|A$ = A$ + | data-animation="false"|A$ = A$ + | data-border-outer-width="3"|A$ = A$ + | data-border-middle-width="3"|A$ = A$ + | data-border-inner-width="3"|A$ = A$ + | data-var="(power + 1) * 50"|A$ = A$ + |></canvas>|A$ = A$ + |<canvas data-type="radial-gauge"|A$ = A$ + | data-width="200"|A$ = A$ + | data-height="200"|A$ = A$ + | data-units="Ampere"|A$ = A$ + | data-title="false"|A$ = A$ + | data-animate-on-init="true"|A$ = A$ + | data-animated-value="true"|A$ = A$ + | data-min-value="-1"|A$ = A$ + | data-max-value="1"|A$ = A$ + | data-major-ticks="-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1"|A$ = A$ + | data-minor-ticks="2"|A$ = A$ + | data-stroke-ticks="false"|A$ = A$ + | data-highlights='[|A$ = A$ + | { "from": -1.0, "to": -0.8, "color": "rgba(255,0,0, 0.8)" },|A$ = A$ + | { "from": -0.8, "to": -0.6, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": -0.6, "to": 0.6, "color": "rgba(0,255,0, 0.8)" },|A$ = A$ + | { "from": 0.6, "to": 0.8, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": 0.8, "to": 1.0, "color": "rgba(255,0,0, 0.8)" }|A$ = A$ + | ]'|A$ = A$ + | data-color-plate="blue"|A$ = A$ + | data-color-major-ticks="#f5f5f5"|A$ = A$ + | data-color-minor-ticks="#ddd"|A$ = A$ + | data-color-title="#fff"|A$ = A$ + | data-color-units="#ccc"|A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-needle-start="rgba(240, 128, 128, 1)"|A$ = A$ + | data-color-needle-end="rgba(255, 160, 122, .9)"|A$ = A$ + | data-value-box="true"|A$ = A$ + | data-animation="false"|A$ = A$ + | data-border-outer-width="3"|A$ = A$ + | data-border-middle-width="3"|A$ = A$ + | data-border-inner-width="3"|A$ = A$ + | data-var="voltage"|A$ = A$ + |></canvas>|A$ = A$ + |<canvas data-type="radial-gauge"|A$ = A$ + | data-width="200"|A$ = A$ + | data-height="200"|A$ = A$ + | data-units="Ampere"|A$ = A$ + | data-title="false"|A$ = A$ + | data-animate-on-init="true"|A$ = A$ + | data-animated-value="true"|A$ = A$ + | data-min-value="-1"|A$ = A$ + | data-max-value="1"|A$ = A$ + | data-major-ticks="-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1"|A$ = A$ + | data-minor-ticks="2"|A$ = A$ + | data-stroke-ticks="false"|A$ = A$ + | data-highlights='[|A$ = A$ + | { "from": -1.0, "to": -0.8, "color": "rgba(255,0,0, 0.8)" },|A$ = A$ + | { "from": -0.8, "to": -0.6, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": -0.6, "to": 0.6, "color": "rgba(0,255,0, 0.8)" },|A$ = A$ + | { "from": 0.6, "to": 0.8, "color": "rgba(255,255,0, 0.8)" },|A$ = A$ + | { "from": 0.8, "to": 1.0, "color": "rgba(255,0,0, 0.8)" }|A$ = A$ + | ]'|A$ = A$ + | data-color-plate="blue"|A$ = A$ + | data-color-major-ticks="#f5f5f5"|A$ = A$ + | data-color-minor-ticks="#ddd"|A$ = A$ + | data-color-title="#fff"|A$ = A$ + | data-color-units="#ccc"|A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-needle-start="rgba(240, 128, 128, 1)"|A$ = A$ + | data-color-needle-end="rgba(255, 160, 122, .9)"|A$ = A$ + | data-value-box="true"|A$ = A$ + | data-animation="false"|A$ = A$ + | data-border-outer-width="3"|A$ = A$ + | data-border-middle-width="3"|A$ = A$ + | data-border-inner-width="3"|A$ = A$ + | data-var="current"|A$ = A$ + |></canvas>|html a$pause 300A$ = ""A$ = A$ + |if (typeof grtimer !== 'undefined') clearInterval(grtimer);|A$ = A$ + |var voltages = new TimeSeries();|A$ = A$ + |var currents = new TimeSeries();|A$ = A$ + |var powers = new TimeSeries();|A$ = A$ + |function createTimeline() {|A$ = A$ + | var chart = new SmoothieChart({responsive: true, maxValue:1, minValue:-1, millisPerPixel:20});|A$ = A$ + | chart.addTimeSeries(voltages, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });|A$ = A$ + | chart.addTimeSeries(currents, { strokeStyle: 'rgba(255, 0, 0, 1)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 4 });|A$ = A$ + | chart.addTimeSeries(powers, { strokeStyle: 'rgba(255, 0, 255, 1)', fillStyle: 'rgba(0, 0, 255, 0.0)', lineWidth: 2 });|A$ = A$ + | chart.streamTo(document.getElementById("chart"), 100);|A$ = A$ + |}|A$ = A$ + |createTimeline();|A$ = A$ + |grtimer = setInterval(function() {|A$ = A$ + | voltages.append(new Date().getTime(), _$("voltage").value );|A$ = A$ + | currents.append(new Date().getTime(), _$("current").value );|A$ = A$ + | powers.append(new Date().getTime(), _$("power").value );|A$ = A$ + |}, 50);|jscript a$pause 500autorefresh 50z = 0timer0 10, computewaitcompute: voltage = sin(z/180) current = cos(z/180) 'power = sin(z/180 + 120) power = (adc/512) - 1 z = z + 1return

Links

https://canvas-gauges.com/documentation/

http://smoothiecharts.org/builder/

https://github.com/thunder9/xy.js

https://www.chartjs.org/

CODE: xxxx.bas

JSEXTERNAL "/Chart.min.js"

PAUSE 300

A$ = ||

A$ = A$ + |<canvas id="myChart" width="400" height="400"></canvas>|

HTML A$

A$ = ||

A$ = A$ + | ctx = document.getElementById('myChart').getContext('2d');|

A$ = A$ + | myChart = new Chart(ctx, {|

A$ = A$ + | type: 'bar',|

A$ = A$ + | data: {|

A$ = A$ + | labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],|

A$ = A$ + | datasets: [{|

A$ = A$ + | label: '# of Votes',|

A$ = A$ + | data: [12, 19, 3, 5, 2, 20],|

A$ = A$ + | backgroundColor: [|

A$ = A$ + | 'rgba(255, 99, 132, 0.2)',|

A$ = A$ + | 'rgba(54, 162, 235, 0.2)',|

A$ = A$ + | 'rgba(255, 206, 86, 0.2)',|

A$ = A$ + | 'rgba(75, 192, 192, 0.2)',|

A$ = A$ + | 'rgba(153, 102, 255, 0.2)',|

A$ = A$ + | 'rgba(255, 159, 64, 0.2)'|

A$ = A$ + | ],|

A$ = A$ + | borderColor: [|

A$ = A$ + | 'rgba(255, 99, 132, 1)',|

A$ = A$ + | 'rgba(54, 162, 235, 1)',|

A$ = A$ + | 'rgba(255, 206, 86, 1)',|

A$ = A$ + | 'rgba(75, 192, 192, 1)',|

A$ = A$ + | 'rgba(153, 102, 255, 1)',|

A$ = A$ + | 'rgba(255, 159, 64, 1)'|

A$ = A$ + | ],|

A$ = A$ + | borderWidth: 1|

A$ = A$ + | }]|

A$ = A$ + | },|

A$ = A$ + | options: {|

A$ = A$ + | scales: {|

A$ = A$ + | yAxes: [{|

A$ = A$ + | ticks: {|

A$ = A$ + | beginAtZero: true|

A$ = A$ + | }|

A$ = A$ + | }]|

A$ = A$ + | }|

A$ = A$ + | }|

A$ = A$ + |});|

JSCRIPT A$

FOR Z = 0 TO 20

A$ = ""

A$ = A$ + "myChart.data.datasets[0].data[0] =" + STR$(Z) + "; myChart.update();"

A$ = A$ + "myChart.data.datasets[0].data[1] =" + STR$(20 -Z) + "; myChart.update();"

JSCALL A$

PAUSE 500

NEXT Z

CODE: google_sheets.bas

CODE: ajax.bas

Openweather_ID$ = "1f7dd1b2a6ffcf80c1e20b5d5365f545"

Town$ = "Colomiers,fr"

Language$ = "fr"

Units$ = "metric"

url$ = "api.openweathermap.org/data/2.5/weather?q=" + town$ + "&lang=" + language$ + "&units=" + Units$ + "&appid=" + Openweather_ID$

'jsexternal "https://code.jquery.com/jquery-3.3.1.min.js"

print ping("api.github.com")

'print wget$("api.github.com/repos/esp8266/Arduino/commits/master/status", 443)

'print wget$("www.google.com/status", 443)

'print wget$("docs.google.com/forms/d/e/1FAIpQLSfxJq84JLhqZsrHN3LxGcLrW-XMMrRXFuXWMLi8cR8s6SkmuQ/formResponse", 443)

'print wget$(url$, 443)

'print "-----------------------------"

'print wget$(url$, 80)

onWgetAsync asynco

'wgetasync url$, 80

'wgetasync("api.github.com/repos/esp8266/Arduino/commits/master/status", 443)

'wgetasync ("www.google.com/aaaa", 443)

'wgetasync "docs.google.com/forms/d/e/1FAIpQLSfxJq84JLhqZsrHN3LxGcLrW-XMMrRXFuXWMLi8cR8s6SkmuQ/formResponse", 80

'wgetasync "spreadsheets.google.com/feeds/list/key/worksheetId/private/full", 80

'wgetasync "spreadsheets.google.com/feeds/worksheets/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/private/full", 443

'print wget$("spreadsheets.google.com/feeds/worksheets/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/private/full?alt=json", 443)

'print wget$("spreadsheets.google.com/feeds/list/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/od6/public/values&output=json", 443)

'https://docs.google.com/spreadsheets/d/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/edit?usp=sharing

'print wget$("docs.google.com/spreadsheets/d/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/export?format=csv", 443)

'print wget$("spreadsheets.google.com/feeds/cells/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/od6/public/basic?range=A1", 443)

print wget$("spreadsheets.google.com/feeds/cells/1LMf8paXu5Fm4nYCLPT6pEvoMrOD3ISpIGFO85iYQNp4/od6/public/values?range=A2", 443)

wait

asynco:

print "========================================"

print wgetresult$

return