esp8632 Gauges without Internet.

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

Re: esp8632 Gauges without Internet.

By Carlitos007
- Wed Jan 23, 2019 1:04 pm #80233 Ian, thank for the interest.
You said you done it!
Do you have a link or sketch showing your results. A guide would be great!

I have tested the sketch mentioned on the earlier post with no internet what’s so ever and works !

Hope to hear from you soon!
User avatar

Re: esp8632 Gauges without Internet.

By ian
- Wed Jan 23, 2019 2:00 pm #80234
Carlitos007 wrote:Ian, thank for the interest.
You said you done it!
Do you have a link or sketch showing your results. A guide would be great!

I have tested the sketch mentioned on the earlier post with no internet what’s so ever and works !

Hope to hear from you soon!


A simple reply isn't easy. Here is the code for gauges which I've used:
Code: Select all<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;
      charset=windows-1252">
    <title>Gauges</title>
    <script src="gauge.js"></script>
    <script src="xml.js"></script>
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body onload="process()">
    <table style=" text-align: left; width: 50%;" border="0"
      cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="vertical-align: top;"><a href="/">HOME</a><br>
          </td>
          <td style="vertical-align: top;"><a href="/help">HELP</a><br>
          </td>
          <td style="vertical-align: top;"><a href="/net">NETWORK</a><br>
          </td>
          <td style="vertical-align: top;"><a href="/list">LIST FILES</a><br>
          </td>
          <td style="vertical-align: top;"><a href="/up">UPLOAD FILES</a><br>
          </td>
        </tr>
      </tbody>
    </table>
    <p> </p>
    <h2>MyWeb Dials<br>
    </h2>
    <p> <canvas id="gauge1" width="400" height="400"
        data-type="canv-gauge" data-title="Temperature"
        data-min-value="-10" data-max-value="100" data-major-ticks="-10
        0 10 20 30 40 50 60 70 80 90 100" data-minor-ticks="2"
        data-stroke-ticks="true" data-units="C" data-value-format="2.0"
        data-glow="true" data-animation-delay="10"
        data-animation-duration="200" data-animation-fn="bounce"
        data-colors-needle="#f00 #00f" data-highlights="-10 15 #33a, 10
        30 #ccc, 30 40 #eaa, 40 100 #e00"></canvas> <canvas id="gauge2"
        width="400" height="400" data-type="canv-gauge"
        data-title="Pressure" data-min-value="950" data-max-value="1050"
        data-major-ticks="950 960 970 980 990 1000 1010 1020 1030 1040
        1050" data-minor-ticks="2" data-stroke-ticks="true"
        data-units="hPa" data-value-format="4.0" data-glow="true"
        data-animation-delay="10" data-animation-duration="200"
        data-animation-fn="bounce" data-colors-needle="#f00 #00f"
        data-highlights="950 990 #aaa, 1010 1050 #ff0"> </canvas> </p>
    <br>
    <h3>These dials are updated regularly. You <i>might </i>like to
      use this page as a starting point for something even more
      creative?</h3>
    <h3>Prettier than the table? The choice is yours!</h3>
    <div w3-include-html="content.html"></div>
    <script src="w3-include-HTML.js"></script>
    <h3>Take a close look at this page, look at the source,&nbsp; you <i>
        should </i>be able to work out how to change things.</h3>
    <p><a href="http://myiot.co.uk"><b>MyIot</b></a><br>
    </p>
  </body>
</html>


There are references to other bits of code I use...
User avatar

Re: esp8632 Gauges without Internet.

By Carlitos007
- Sat Feb 02, 2019 10:36 pm #80391 Thank you guys for your replies!
After lots of reading and Better understanding this is what I have so far, But still can't get the gauge needle to move as i Move the Potentiometer. Can someone guide me in the right direction?
This is whats in the HTML in the Spiff
Code: Select all<!doctype html>
<html>
<head>
    <title>Testing Gauges</title>
    <script src="gauge.min.js"></script>
</head>
<body>
<canvas id="gauge-ps"></canvas>

<script>
setInterval(function() {
     // Gets ADC value at every one second
     GetADC();
   }, 1000);
   
function GetADC() {
     var xhttp = new XMLHttpRequest();
          var adc=0;
     xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
      adc = Number(this.responseText);
       }   
       };
    
       xhttp.open("GET", "/getADC", false);
     xhttp.send();
   }
</script>


<script>   
   
var gaugePS = new RadialGauge({
    renderTo: 'gauge-ps',
    width: 400,
    height: 400,
    units: 'Temp',
    minValue: 0,
    maxValue: 100,
    majorTicks: [
        '0','10','20','30','40','50','60','70','80','90','100'
    ],
    minorTicks: 2,
    ticksAngle: 270,
    startAngle: 45,
    strokeTicks: true,
    highlights  : [
        { from : 45,  to : 80, color : 'rgba(78,   78, 76, 0.5)' },
        { from : 80, to : 100, color : 'rgba(225, 7, 23, 0.75)' }
    ],
    valueInt: 1,
    valueDec: 0,
    colorPlate: "#fff",
    colorMajorTicks: "#686868",
    colorMinorTicks: "#686868",
    colorTitle: "#000",
    colorUnits: "#000",
    colorNumbers: "#686868",
    valueBox: true,
    colorValueText: "#000",
    colorValueBoxRect: "#fff",
    colorValueBoxRectEnd: "#fff",
    colorValueBoxBackground: "#fff",
    colorValueBoxShadow: false,
    colorValueTextShadow: false,
    colorNeedleShadowUp: true,
    colorNeedleShadowDown: false,
    colorNeedle: "rgba(200, 50, 50, .75)",
    colorNeedleEnd: "rgba(200, 50, 50, .75)",
    colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
    colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
    borderShadowWidth: 0,
    borders: true,
    borderInnerWidth: 0,
    borderMiddleWidth: 0,
    borderOuterWidth: 5,
    colorBorderOuter: "#fafafa",
    colorBorderOuterEnd: "#cdcdcd",
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "dequint",
    fontNumbers: "Verdana",
    fontTitle: "Verdana",
    fontUnits: "Verdana",
    fontValue: "Led",
    fontValueStyle: 'italic',
    fontNumbersSize: 20,
    fontNumbersStyle: 'italic',
    fontNumbersWeight: 'bold',
    fontTitleSize: 24,
    fontUnitsSize: 22,
    fontValueSize: 50,
    animatedValue: true
});

gaugePS.draw();
gaugePS.value = "adc" ;


</script>

</body>
</html>
User avatar

Re: esp8632 Gauges without Internet.

By pete_l
- Sat Sep 14, 2019 10:29 am #83795
I suspect the examples you cite merely point to it online somewhere.
The description on the page given explicitly says that the code: index.html, style.css, jQuery.min.js, d3-gauge.js. is contained locally on the ESP8266 in SPIFFS files. It does not rely on an internet connection to work.
 Reply
Return to General Discussions