InqAnalog - Simple Real World Example
Posted: Sat Apr 09, 2022 10:18 amA 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.
Server Sketch
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.
Client Application
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.
- 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.
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.
Client Application
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>
