Embedded Files
Most of the essentials have already been mentioned, so what remains are mostly workshop examples of some interest.
This next mini project illustrates what can be achieved with Annex-Wifi Basic using suitable styling and functionality.
To put a complex subject into perspective - a bunch of naked ordinary people is not a particularly impressive sight and would probably be improved by dressing them. Put some in stylish uniforms and they might be impressively useless, equip some with tools could make some usefully functional whatever their appearance.
The point is... style and functionality are very different enhancements, and we need both.
In 'web world', CSS does the stylish dressing up, and javascript gives the functionality.
This next piece of styling is a dynamic good-looker... get ready to duck!
It is included here merely to demonstrate what Annex-Wifi Basic is capable of .
Copy and paste the following code into the editor and Save as /program/pressure.bas
NOTE: Requires "gauge.min.js.gz" to be uploaded to "/' of the device.
TIP: If the screen does not display correctly, Stop, refresh your browser, then Run again.
Basic:
cls
jsexternal "/gauge.min.js"
pause 300
units = 100
bias = 1
blink = 0
A$ = ""
A$ = A$ + |<br><br>|
A$ = A$ + |<div id='steam' class='steam' style='text-align: center;display: table; margin-right: auto; margin-left: auto;'>|
A$ = A$ + |<canvas data-type="radial-gauge"|
A$ = A$ + | data-width="300"|
A$ = A$ + | data-height="300"|
A$ = A$ + | data-title="PSI"|
A$ = A$ + | data-units="Pressure"|
A$ = A$ + | data-min-value="0"|
A$ = A$ + | data-max-value="200"|
A$ = A$ + | data-major-ticks="0,20,40,60,80,100,120,140,160,180,200"|
A$ = A$ + | data-minor-ticks="2"|
A$ = A$ + | data-stroke-ticks="true"|
A$ = A$ + | data-highlights='[| A$ = A$ + | {"from": 150, "to": 200, "color": "rgba(200, 50, 50, .75)"}| A$ = A$ + | ]'| A$ = A$ + | data-color-plate="#fff"| A$ = A$ + | data-border-shadow-width="0"| A$ = A$ + | data-borders="false"| A$ = A$ + | data-needle-type="arrow"| A$ = A$ + | data-needle-width="2"| A$ = A$ + | data-needle-circle-size="7"| A$ = A$ + | data-needle-circle-outer="true"| A$ = A$ + | data-needle-circle-inner="false"| A$ = A$ + | data-animation-duration="100"| A$ = A$ + | data-animation-rule="linear"| A$ = A$ + | data-value-box="" | A$ = A$ + | data-var="units"| ' this is where the variable is defined A$ = A$ + |></canvas>| A$ = A$ + |<br>| A$ = A$ + button$("Boost",control) A$ = A$ + |</div>| html A$ timer0 300, auto timer1 20000, control delay = bias * 1000 wait control: timer0 300, boost refresh return auto: units = units + rnd(10) - 4 if units < 80 then units = units + 5 if units > 120 then units = units - 5 refresh return boost: units = units + rnd(12) - 3 refresh if units > 200 then gosub explode if units > 175 then gosub blink if (units > 160) and (units < 200) then gosub pressure return pressure: bias = int((units-160)/5) + 1 seed = 4 css$ = "<style> .steam {-webkit-transform:translate(" css$ = css$ + str$(rnd(bias) + cint(rnd(seed)-(seed/2))) + "px," css$ = css$ + str$(rnd(bias) + cint(rnd(seed)-(seed/2))) + "px) rotate(" css$ = css$ + str$(rnd(bias) + cint(rnd(seed)-(seed/2))) + "deg); }</style>" css css$ return blink: if blink = 0 then blink = 1 else blink = 0 if blink = 1 then css "<style> .steam {background-color:red;</style>" else css "<style> .steam {background-color:white;</style>" return explode: css$ = |<style> .steam {animation-name: example; | css$ = css$ + |animation-fill-mode: forwards; | css$ = css$ + |animation-duration: .4s; | css$ = css$ + |animation-timing-function: ease-in; | css$ = css$ + |animation-iteration-count: 1}| css$ = css$ + |@keyframes example {| css$ = css$ + |from {background-color: red;transform: scale(1, 1);} | css$ = css$ + |to {transform: rotate(| + str$(rnd(360)-180) + |deg) scale(5, 5);} }</style>| css css$ end return '----------------END----------------
Page updated
Google Sites
Report abuse