This is an example of scrolling chart including some gauges refreshed very fast. This program rely on the function AUTOSCROLL that permit to achieve a very fast refresh rate combining Javascript and Basic together. It use another javascript library, smoothiechart, that you can be downloaded at the bottom of this page. It use also the javascript library, canvas gauges, that is already inside the Annex standard package but can also be found at the bottom of this page. These libraries must be uploaded in the module and placed at the root. CODE: smoothie1.bas ' DEMO Scrolling Charts + gauges by cicciocb 2019 ' demonstrate the refresh rate possible using the command AUTOREFRESH ' It traces a sine, a cosine plus the input coming from the ADC ' Place a potentiometer on the Analog input pin to evaluate the refresh rate ' cls jsexternal "/smoothie.js" pause 300 jsexternal "/gauge.min.js" pause 300 voltage = 0 : current = 0 : power = 0 'these are hidden textboxes just used to transfer the variables from the javascript ' to the smoothie scrolling chart. 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;">| ' create the gauges indicating the variable name directly in the code A$ = A$ + |<canvas data-type="radial-gauge"| A$ = A$ + | data-width="200"| A$ = A$ + | data-height="200"| A$ = A$ + | data-units="Watt"| 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"| ' power is the variable; to note that even a math operation is possible A$ = A$ + |></canvas>| A$ = A$ + |<canvas data-type="radial-gauge"| A$ = A$ + | data-width="200"| A$ = A$ + | data-height="200"| A$ = A$ + | data-units="Volts"| 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.6, "color": "rgba(255,0,0, 0.8)" },| A$ = A$ + | { "from": -0.6, "to": -0.2, "color": "rgba(255,255,0, 0.8)" },| A$ = A$ + | { "from": -0.2, "to": 0.2, "color": "rgba(0,255,0, 0.8)" },| A$ = A$ + | { "from": 0.2, "to": 0.6, "color": "rgba(255,255,0, 0.8)" },| A$ = A$ + | { "from": 0.6, "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"| ' voltage is the "basic" variable 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"| ' current is the "basic" variable A$ = A$ + |></canvas>| html a$ pause 300 ' create the scrolling chart. ' look at http://smoothiecharts.org/builder on how customise it 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, 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();| 'this javascript function copies the values from the hidden textboxes to the chart at 50msec rate 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 500 autorefresh 50 ' refresh the variables each 50msec z = 0 timer0 10, compute 'computes the variables at 10msec rate; change it to see the effect on the chart wait ' computes the variables; compute: voltage = sin(z/180) current = cos(z/180) 'power = sin(z/180 + 120) power = (adc/512) - 1 z = z + 1 return  |
Projects >
