-->
Page 1 of 6

InqAnalog - Simple Real World Example

PostPosted: Sat Apr 09, 2022 10:18 am
by Inq720
A simple real-world example of using InqPortal - Takes an analog sensor reading and publishes to any browser. Client side - shows it in analog gauge and a histogram.
  • Total creation time: < 15 minutes
  • Server code: 20 lines.
  • Client code: 100 lines - 70 lines were Auto Generated by the InqPortal Admin including the Histogram. 30 lines manually added to show the analog gauge.
Hardware
hardware.jpg

Server Sketch
Code: Select all#include <InqPortal.h>
#define SOFT_SSID "Soil Moisture"
#define SOFT_PW NULL
#define STA_SSID "Your SSID"
#define STA_PW "Your PW"

InqPortal svr;
float moist = 0;

void setup() {
    svr.onInterval(takeReading, 1000);
    svr.publishRO("Moist", &moist, "Moisture Sensor");
    svr.begin(SOFT_SSID, SOFT_PW, STA_SSID, STA_PW); 
}

void loop() {}

void takeReading(void*) {
    moist = 100.0 * (float)analogRead(A0) / 1024.0;
}

InqPortal Admin
Shows the file manager tab with the client application - index.html was mostly generated by the InqPortal Admin. gauge.min.js is the gauge library - Credit: MykhaIloStadnyk - https://github.com/Mikhus for his library.
filemanager.png


Client Application
Android.jpg
desktop.png

Client Source Code
Although it looks kind of alien compared to our Sketch files, it's really all boiler-plate as far as web development is concerned.
Code: Select all<!DOCTYPE html>
<html>
<head>
  <title>Soil Moisture</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='InqPortal.js'></script>
 
  <link rel='stylesheet' type='text/css' href='InqStyle.css'>
  <style>
    .gap { margin:0.2em 1em 0.2em 1em }
    .panel{ padding:1em 0.5em 0.5em 0.5em; background-color:white; }   
    .rht { float:right; margin-right:1em; }
  </style>
</head>
<body class='space'>
  </br>
  <div class='space'>
      <div class='gap'><b><span class='gap'>Moisture Sensor</span></b>
  </div> 
    <canvas id="gauge-humid"
        data-type="radial-gauge"
        data-width="200"
        data-height="200"
        data-units="Humidity %"
        data-title="false"
        data-value="50"
        data-animate-on-init="false"
        data-animated-value="false"
        data-min-value="0"
        data-max-value="100"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 40, "color": "rgba(170,0,0,0.8)" },
            { "from": 40, "to": 70, "color": "rgba(0,170,0,0.8)" },
            { "from": 70, "to": 100, "color": "rgba(0,0,170,0.8)" }
        ]'
        data-color-plate="transparent"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(255, 0, 0, 1)"
        data-color-needle-end="rgba(255, 0, 0, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-border-outer-width="3"
        data-border-middle-width="3"
        data-border-inner-width="3">
  </canvas>
  <div id='divHisto' class='panel space'> 
    <canvas id='histo' ></canvas>
  </div>
 
  <script type='text/javascript' src='chart.js'></script>
  <script type='text/javascript' src='InqHisto.js'></script>
  <script type="text/javascript" src="gauge.min.js"></script>
  <script>
    // onModifyResult() is an optional event that allows you to modify
    // incoming published variables before they populate the UI.  It also
    // allows you to intercept them and use them for your own custom UI as
    // we use in this example to populate the Histogram. 

    onModifyResult = function(p, v)
    {
        if (_hist) _hist.plot(p, _t, v);
        switch (p)
        {
            case 'ti': _t = v; break;
            case 'Moist':
                document.gauges.get("gauge-humid").value = v;
                break;
        }
        return v;   // Any unmodifed variables need to be returned also.
    }
   
    // These two variables are needed to create the histogram.
    // Server time data was sent.
    var _t;
    // The histogram object
    var _hist = new InqHisto('histo'); 
    // Configuring the histogram object.
    _hist.config('Soil Moisture (%),Moist', 60, 0, 1);
    // On Resize() is necessary to adjust height of histogram
    function OnResize()
    {
        var h = $('divHisto');
        h.style.height = (window.innerHeight - h.offsetTop - 40) + 'px';
    };
    window.onresize = OnResize;
    OnResize();   
  </script> 
</body>
</html>

Re: InqAnalog - Simple Real World Example

PostPosted: Wed Apr 13, 2022 4:53 pm
by Jacob Major
I was able to get the server up and running easily with this tutorial but I was unable to get the gauge to appear on index.html. I was able to get the graph to show up but I need to fix the part of the graph where it scales based on the input recieved. I appreciate your help up to this point, it has sped up my ability to implement this immensely.

Re: InqAnalog - Simple Real World Example

PostPosted: Wed Apr 13, 2022 5:43 pm
by Jacob Major
I am struggling to find documentation on the InqHisto.js file, where can I find this?

Re: InqAnalog - Simple Real World Example

PostPosted: Wed Apr 13, 2022 7:45 pm
by Inq720
Hi Jacob,
That was quick... like before I sent the reply. ;)

Jacob Major wrote:I was able to get the server up and running easily with this tutorial but I was unable to get the gauge to appear on index.html. I was able to get the graph to show up but I need to fix the part of the graph where it scales based on the input recieved. I appreciate your help up to this point, it has sped up my ability to implement this immensely.


It sounds like you got pretty far in the steps. I'll itemize and you tell me where you ran afoul. I'll put a Yes or ? in front of where it sounds like you have progressed.
  1. Yes - Getting all the libraries installed - ESP8266 Core and InqPortal
  2. Yes - Successfully did the ESP8266 Core patch. This seems to stump people the most. Usually because they missed the ten different notes sprinkled everywhere.
  3. Yes - Compiled and uploaded your InqPortal based project with the Arduino IDE.
  4. ? - You're able to browse to the Admin on your ESP8266... using something like http://Soil_Moisture/Admin.html
    That is if you left the SOFT_SSID "Soil Moisture".
  5. ? - You've clicked the Files tab and drag and dropped your Index.hml file on the Admin File Manager tab. This uploads it to the server so that any browser client in the future can retrieve it.
  6. Web development is unlike INO or C++ development. If you leave a file out or your HTML or JavaScript has a syntax error, Web development just gives you white space on the browser... no warnings, no errors. It is the most frustrating thing I ever experienced when I started web development.
    However, if you press F12 on your browser, it'll split the screen and give you a debugger. If you do a refresh, it WILL show an error... probably that gauge.min.js is missing.
  7. Look in my first post where the picture of the Files tab is showing what you should have on your ESP8266 server. See that it has two files present. The first file is the gauge library and you need to go to the author's page: https://github.com/Mikhus/canvas-gauges Find that one file you need and download to your dev machine and then upload it to your ESP8266 server.
    That page of his also has links on how to use the Gauge library. I only have about fifteen minutes exposure using that library, so I can't help you much with it. There are lots of examples of different kinds of gauges on his site.
    [/i]"

Jacob Major wrote:I am struggling to find documentation on the InqHisto.js file, where can I find this?


I hate it when its my fault... where is that InqHisto.js library documentation. Well... hmmm...
I forgot to write it.

OK...
This is where, I'm a little fuzzy on your description... "I was able to get the graph to show up but I need to fix the part of the graph where it scales based on the input recieved."

The Y-axis scaling is always automatic. As data comes in, it'll rescales the Y-axis to make sure it fits.

While I wait for your reply, I'll start looking into documenting it and giving you a quick answer once you clarify.