Embedded Files
This is a practical vehicle battery monitor with 2-stage low-voltage warning. It uses a test slider here for the demo (click on the slider then use the mouse scroll wheel), but it is designed for ADC (analog input). (click here for a short video clip)
It was created to monitor the leisure battery voltage of a camper or motor- home etc, but could be adapted to monitor any DC voltage.
The low battery LED indicator lights up when the voltage drops below 12v then starts flashing when the voltage drops below 10.5 volts.
The voltmeter is scaled to 15v to allow for battery charging voltages which can typically exceed 14+ volts. The operating ADC voltage range of a standard ESP8266 device is to 1v, so assuming a max 1v input represents the voltmeters 15v max, it requires 14v to be dropped from the battery across the top of a resistor divider to leave just the 1V from ADC pin to ground - which could be achieved using a 1K lower resistor and 14K upper. Some modules use a higher ADC voltage input, or you may wish to measure a different max volts, in which case you'll need to work out your own resistor divider ratio and values. Comment out line 10 if you prefer a horizontal test slider. Change adc$="y" in the first line for ADC input instead of the test slider. Basic:
'Vehicle battery voltmeter
adc$ = "n" 'n = test slider, y = adc input
trace "extjs" + "/gauge.min.js"
pause 500
volts = 12
cls
A$ = ""
if adc$ = "n" then
slidercss$ = "background-color:dimgray;border-radius:16px;height:50;width:600px;"
slidercss$ = slidercss$ + "background:#333;color:blue;border: 5px solid #111;"
slidercss$ = slidercss$ + "position:absolute;top:720;px;left:00px;"
slidercss$ = slidercss$ + "width:570px;position:absolute;top:390;px;left:350px;transform:rotate(-90deg);" 'comment line for horizontal slider
A$ = A$ + slider$(volts,0,15,0.1,"scss")
A$ = A$ + cssid$("scss",slidercss$)
end if
A$ = A$ + |<canvas data-type="radial-gauge"|
A$ = A$ + | data-width="600"|
A$ = A$ + | data-height="600"|
A$ = A$ + | data-min-value="0"|
A$ = A$ + | data-max-value="15"|A$ = A$ + | data-title="Battery voltage"|A$ = A$ + | data-units="Low warning"|A$ = A$ + | data-major-ticks="0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15"|A$ = A$ + | data-minor-ticks="2"|A$ = A$ + | data-stroke-ticks="true"|A$ = A$ + | data-highlights='[|A$ = A$ + | {"from": 0, "to": 10.5, "color": "rgba(200, 50, 50, .95)"},|A$ = A$ + | {"from": 10.5, "to": 12, "color": "rgba(200, 200, 50, 1)"},|A$ = A$ + | {"from": 12, "to": 13.8, "color": "rgba(50, 200, 50, .95)"},|A$ = A$ + | {"from": 13.8, "to": 15, "color": "rgba(50, 50, 240, .90)"}|A$ = A$ + | ]'|A$ = A$ + | data-color-plate="#555"|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-color-major-ticks="#ddd"|A$ = A$ + | data-color-minor-ticks="#ddd"|A$ = A$ + | data-color-title="#eee"|A$ = A$ + | data-color-units="#eee"|A$ = A$ + | data-color-numbers="#eee"|A$ = A$ + | data-color-plate="#555"|A$ = A$ + | data-color-plate-end="#222"|A$ = A$ + | data-border-shadow-width="0"|A$ = A$ + | data-borders="true"|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="1500"|A$ = A$ + | data-animation-rule="linear"|A$ = A$ + | data-color-border-outer="#333"|A$ = A$ + | data-color-border-outer-end="#111"|A$ = A$ + | data-color-border-middle="#222"|A$ = A$ + | data-color-border-middle-end="#111"|A$ = A$ + | data-color-border-inner="#111"|A$ = A$ + | data-color-border-inner-end="#333"|A$ = A$ + | data-color-needle-shadow-down="#333"|A$ = A$ + | data-color-needle-circle-outer="#333"|A$ = A$ + | data-color-needle-circle-outer-end="#111"|A$ = A$ + | data-color-needle-circle-inner="#111"|A$ = A$ + | data-color-needle-circle-inner-end="#222"|A$ = A$ + | data-value-box-border-radius="4"|A$ = A$ + | data-value-box-stroke="7"|A$ = A$ + | data-value-box-width="10"|A$ = A$ + | data-value-text-shadow="20"|A$ = A$ + | data-value-int="2"|A$ = A$ + | data-value-dec="2"|A$ = A$ + | data-color-value-text="#666"|A$ = A$ + | data-color-value-box-background="PowderBlue"|A$ = A$ + | data-color-value-box-rect="#655"|A$ = A$ + | data-color-value-box-rect-end="#333"|A$ = A$ + | data-var="volts"| ' this is where the variable is definedA$ = A$ + |></canvas>|A$ = A$ + |<style>|A$ = A$ + |#led {background-color:red; box-shadow:#faa 0 -1px 7px 1px, inset #300 0 -1px 9px, #500 0 2px 12px;}|A$ = A$ + |#led:hover {background-color:#5f2; box-shadow:#000 0 -1px 7px 1px, inset #300 0 -1px 9px, #500 0 2px 12px;}|A$ = A$ + |</style>|A$ = A$ + |<div id="led" style="position:absolute;top:515px;left:300px;margin:20px auto;width:25px;height:25px;border-radius:50%;"></div>|html a$a$ = ""blink = 1timer0 500, countwaitcount:if blink = 1 then blink = 0 else blink = 1refreshif (adc$ = "y") then volts = adc / 64if volts >= 12 then css |<style>#led { background-color:#522; box-shadow:#000 0 -1px 7px 1px, inset #300 0 -1px 9px, #500 0 2px 12px}}</style>|else if volts >= 10.5 then css |<style>#led { background-color:red; box-shadow:#faa 0 -1px 7px 1px, inset #300 0 -1px 9px, #500 0 2px 12px;}</style>| else if blink = 0 then css |<style>#led { background-color:red; box-shadow:#faa 0 -1px 7px 1px, inset #300 0 -1px 9px, #500 0 2px 12px;}</style>| else css |<style>#led { background-color:#522; box-shadow:#000 0 -1px 7px 1px, inset #300 0 -1px 9px, #500 0 2px 12px}}</style>| end if end ifend ifreturn''----------------END----------------
Page updated
Google Sites
Report abuse