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-
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 defined A$ = 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 = 1 timer0 500, count wait count: if blink = 1 then blink = 0 else blink = 1 refresh if (adc$ = "y") then volts = adc / 64 if 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 if end if return ''----------------END----------------  |
Join Our DiscussionCOUNTER |
|
