Call JS Function

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

Call JS Function

By troneleck
- Mon Feb 04, 2019 9:56 pm #80427 Hello.

How can i call a JS function, from C (Arduino IDE).
The function is inside a JS library.
It is called normaly by a button insde a html file.

my .ino file:

Code: Select all#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"


 
const char* ssid = "mywifi";
const char* password =  "password";
 
AsyncWebServer server(80);
 
void setup(){
  Serial.begin(115200);
 
  if(!SPIFFS.begin()){
     Serial.println("An Error has occurred while mounting SPIFFS");
     return;
  }
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
 
  Serial.println(WiFi.localIP());
 
  server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/pointer.html", "text/html");
  });
 
  server.on("/justgage.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/justgage.js", "text/javascript");
  });

  server.on("/raphael-2.1.4.min.js", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/raphael-2.1.4.min.js", "text/javascript");
  });
 
  server.begin();
}
 
void loop(){}




the html file:

Code: Select all<!doctype html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Pointer</title>
    <meta name="viewport" content="width=device-width">
    <style>
    .wrapper {
      position: relative;
      width: 640px;
      height: 480px;
      margin: 50px auto 0 auto;
      padding-bottom: 30px;
      border: 1px solid #ccc;
      border-radius: 3px;
      clear: both;
    }

    .box {
      float: left;
      width: 50%;
      height: 50%;
      box-sizing: border-box;
    }

    .container {
      width: 450px;
      margin: 0 auto;
      text-align: center;
    }

    .gauge {
      width: 320px;
      height: 240px;
    }

    button {
      margin: 30px 5px 0 2px;
      padding: 16px 40px;
      border-radius: 5px;
      font-size: 18px;
      border: none;
      background: #34aadc;
      color: white;
      cursor: pointer;
    }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="box">
        <div id="g1" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g2" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g3" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g4" class="gauge"></div>
      </div>
    </div>
    <div class="container">
   
      <button type="button" id="gauge_refresh">Refresh Gauges</button>
    </div>
    <script src="/raphael-2.1.4.min.js"></script>
    <script src="/justgage.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {

      var g1 = new JustGage({
        id: 'g1',
        value: 65,
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        gaugeWidthScale: 0.6,
        customSectors: [{
          color: '#ff0000',
          lo: 50,
          hi: 100
        }, {
          color: '#00ff00',
          lo: 0,
          hi: 50
        }],
        counter: true
      });

      var g2 = new JustGage({
        id: 'g2',
        value: 45,
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: -15,
          bottomlength: 10,
          bottomwidth: 12,
          color: '#8e8e93',
          stroke: '#ffffff',
          stroke_width: 3,
          stroke_linecap: 'round'
        },
        gaugeWidthScale: 0.6,
        counter: true
      });

      var g3 = new JustGage({
        id: 'g3',
        value: 40,
        min: 0,
        max: 100,
        symbol: '%',
        donut: true,
        pointer: true,
        gaugeWidthScale: 0.4,
        pointerOptions: {
          toplength: 10,
          bottomlength: 10,
          bottomwidth: 8,
          color: '#000'
        },
        customSectors: [{
          color: "#ff0000",
          lo: 50,
          hi: 100
        }, {
          color: "#00ff00",
          lo: 0,
          hi: 50
        }],
        counter: true
      });

      var g4 = new JustGage({
        id: 'g4',
        value: 70,
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: 8,
          bottomlength: -20,
          bottomwidth: 6,
          color: '#8e8e93'
        },
        gaugeWidthScale: 0.1,
        counter: true
      });

      document.getElementById('gauge_refresh').addEventListener('click', function() {
        g1.refresh(getRandomInt(0, 100));
        g2.refresh(getRandomInt(0, 100));
        g3.refresh(getRandomInt(0, 100));
        g4.refresh(getRandomInt(0, 100));
      });
    });
    </script>
  </body>

</html>



This is an example from http://justgage.com/.


It looks for me like i have to call
Code: Select allg1.refresh(newValue)
:?: .

I got the SPIFFS part running, but i dont know how to send new values comming from analogpins.
I use an ESP32 and i know how to read from the pins and put it in variable.
User avatar

Re: Call JS Function

By quackmore
- Mon Feb 11, 2019 4:54 am #80523 nah, you don't (and you cannot)

you don't want the JS to be executed on the esp32
instead you want it transferred by esp32 http to your browser and there it will run

try this way:

on the esp32 add some code and a route to the http server that will provide the analog value inside a json obj
I don't know the arduino method for this but there should be one
let's say, as an example, that on a "GET /api/analog/g1" you will receive something like { "gauge": "g1", "value": 1234 }

now change your JS file to add a function that will requests the esp32 for new values and update the gauge
the request will have to be AJAX looking something like this:
Code: Select allfunction getGaugeUpdate() {
    var request = new XMLHttpRequest();
    request.open('GET', '/api/analog/g1');
    request.responseType = 'json';
    request.onload = function () {
         // update the gauge using request.response.value
    }
    request.send();
}
 Reply
Return to Newbie Corner