Project - Battery Voltmeter

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 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----------------
 



m9.jpg
(62k)
Margaret Baker,
Dec 26, 2017, 5:51 AM
v.1