abufaisal2
Published © GPL3+

Build a Simple to an Advanced Voltmeter

A step by step in building a simple voltmeter. For simplicity, the project will be broken down into three parts.

BeginnerFull instructions provided2 hours6,623
Build a Simple to an Advanced Voltmeter

Things used in this project

Hardware components

ESP32S
Espressif ESP32S
×1
Rotary potentiometer (generic)
Rotary potentiometer (generic)
×1
Jumper wires (generic)
Jumper wires (generic)
×1

Software apps and online services

Zerynth Studio
Zerynth Studio
JQWidgets

Story

Read more

Schematics

Diagram

Code

Volt divider code

Python
# DashBoard Voltage Converter. Voltage devidor by AbuFaisal
# Created at 2019-01-17

from wireless import wifi
from espressif.esp32net import esp32wifi as wifi_driver
import streams
import adc 
# import Zerynth App
from zadm import zadm

streams.serial()
sleep(1000)
print("STARTING...")

###################    WIFI Connection Setup    ##########################
wifi_driver.auto_init() 
try:
    for i in range(0,5):
        try:
            wifi.link("myWiFi",wifi.WIFI_WPA2,"123445678")
            print("Connection established..........................:)")
            break
        except Exception as e:
            print("Can't link",e)
    else:
        print("Impossible to link!")
        while True:
            sleep(1000)
            
except Exception as e:
    print(e)
    
###################    Zerynth App Configuration    ######################
z = zadm.Device("DEVICE UID HERE", "DEVICE TOKEN HERE")
z.start()
    
###################    Volt Reading Setup    #############################
while True:
    value = adc.read(A0)
    volt=value*(3.3/4095.0)
    print("sensor raw value:", value,"     Volte:",volt)
    # send the voltage value to the zerynth App
    z.send_event({"Voltage":volt})
    sleep(300)
        
       

HTML Template

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Voltage Divider</title>
     <!--Include jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--Include zerynth ADM JS LIBRARY -->
    <script src="https://api.zerynth.com/zadm/latest/z.js"></script>   
    <!-- jqWidget Call -->
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />  
    <script type="text/javascript" src="https://jqwidgets.com/public/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxknob.js"></script>
    <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>


    <style type="text/css">
        #container {
            position: relative;
        }
        .inputField {
            left: 110px;  //change the voltage reading location input field 
            top: 123px;
            position: absolute;
            background: transparent;
            border: none;
        }
        text.jqx-knob-label {
            font-size: 13px;
        }
        .inputField .jqx-input-content {
            background: transparent;
            font-size: 20px;
            color: grey;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#container').jqxKnob({
                width: 300, //Gadget size
                value: 0, // Change the voltage from here
                min: 0,
                max: 3.3,
                startAngle:120,
                endAngle: 420,
                snapToStep: false,  //false to show voltage in decimal point
                allowValueChangeOnClick: false,
                allowValueChangeOnDrag: false,
                allowValueChangeOnMouseWheel: false,
                rotation: 'clockwise',
                style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } },
                marks: {
                    colorRemaining: { color: 'grey', border: 'grey' },
                    colorProgress: { color: '#00a4e1', border: '#00a4e1' },
                    type: 'line',
                    offset: '71%',
                    thickness: 3,
                    size: '6%',
                    majorSize: '9%',
                    majorInterval: .5,
                    minorInterval: .1,
                },
                labels: {
                    offset: '88%',
                    step: .5,
                    visible: true
                },
                progressBar: {
                    style: { fill: '#00a4e1', stroke: 'grey' },
                    size: '9%',
                    offset: '60%',
                    background: { fill: 'grey', stroke: 'grey' }
                },
                pointer: { type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }
            });
            var input = $('<div class="inputField">');
            $('#container').append(input);
            var inputOptions = {
                width: 80,
                height: 500,
                decimal: 0, // starting value same as widget
                min: 0,  // same as widget
                max: 3.3, // same as widget
                textAlign: 'center',
                decimalDigits: 2,
                inputMode: 'simple'
            };
            $(input).jqxNumberInput(inputOptions);
            $('#container').on('change', function (event) {
               if (event.args.changeSource == 'propertyChange' || event.args.changeSource == 'val') { return; }
                $(input).val(event.args.value);
            }) 
        });
    </script>

  </head>
  <body class='default' style="text-align:center">
    
    <div> <h1 id="status" style="background:#ddd;font-weight:bold"></h1></div>
    <div id='container' style="width: 200px; height: 200px; margin:0 auto;"> </div>

    <script>
    <!-- CONFIGURE ADM LIBRARY ON READY -->
    $(document).ready(function() {
      Z.init({
        on_connected:     function(){$("#status").html("CONNECTED")},
        on_error:         function(){$("#status").html("ERROR")},
        on_disconnected:  function(){$("#status").html("DISCONNECTED"); return true},
        on_online:        function(evt){$("#status").html("ONLINE");},
        on_offline:       function(evt){$("#status").html("OFFLINE");},
       
        on_event:         function(evt){
                                        var val = JSON.stringify(evt.payload.Voltage);
                                        $('#container').val(val);},
      
        on_notify:        function(evt){$("#status").html("NOTIFICATION! "+JSON.stringify(evt));}
      })
    });
    </script>
  </body>
</html>

Credits

abufaisal2

abufaisal2

1 project • 0 followers

Comments