ESP8266 Community Forum

- Sat Jan 14, 2023 6:46 am #95798 I am a newbie with ESP8266 and with HTML,Java and JSON.
I have loaded a number of different examples and am able to switch an LED On and Off with a button on a web page. However when I try and modify the code for my specific application, I just can not seem to make it work. I find too much information on one line which I do not require. I am looking for a simple one liner almost.
The Web page has a table and other information on it, however it is not part of my issue right now.

My project will have some numbers on the screen which are received from a serial port on the ESP8266 , a simple maths formulae is applied to the incoming data, modified and JSON serialized and sent to the web page. I got this working very well, however I would like to have a 2 button selection, more buttons later, in which I can select the fixed value to be used in the maths calculation.
At first I would like to switch an LED on for each option so that I am aware that the specific selection is in effect, then later send a descriptive string to the ESP8266.

On the fly I would like to change the selection by pressing the switches, so that the calculations done in the ESP8266 will use the new factor.
I can get the selection to show on the web page, but I just can not get the information to the ESP8266 as a string and to switch on the specific LEDs.

Here with relevant snippets of the code which are part of the HTML body.

Setting up the buttons to push

Code: Select all<button onclick="get110V()">110V AC</button>
<button onclick="get230V()">230V AC</button>


Respective script to make the changes on web page

Code: Select all<script>
  function get110V() {
  document.getElementById("rangeValue").innerHTML = "110V AC";
  var Range_Selection = "110V AC";
  Serial.println(Range_Selection);
  digitalWrite(LED_GPIO,LOW);
  digitalWrite(LED_GPI1,HIGH);
  Serial.println("110V AC");
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/" , true);
  xhr.send();
};
</script>

<script>
  function get230V() {
  document.getElementById("rangeValue").innerHTML = "230V AC";
  var Range_Selection = "230V AC";
  Serial.println(Range_Selection);
  digitalWrite(LED_GPIO,HIGH);
  digitalWrite(LED_GPI1,LOW);
  Serial.println("230V AC");
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/" , true);
  xhr.send();
  Serial.println("230V AC");
};
</script>


When I press the respective button, the place holder which displays the voltage mode calculation, on the web page updates, however, I can not get the LEDs to go on on the ESP8266, and pass the string to the ESP8266.

What am I missing?

- Tue Jan 17, 2023 1:06 am #95820 While the moderators were reviewing my post for acceptance, I found the solution.

The Buttons must be set up as follows.
Note that the Button must be identified with a unique string in order that it can be identified for actioning when activated.
In HTML there is a number of ways that the HTML will automatically do this for you. All you need is to select the method.
I used https://www.w3schools.com to do a lot of my learning, and what is great, is that examples are immediately available and displayed in a separate web page, allowing to edit the current code and see the results. This saves many hours in compiling to find out if the edit you made actually works. Granted that the web page does not do all types of "scripts".
Below, the ' onclick="()" ' is the "id" for that button.

Code: Select all<button onclick="get110V()">110V AC</button>
<button onclick="get230V()">230V AC</button>


On clicking the button, a script with the 'id' as the name, in this case either get110V() or get230V() will then run. see below
What the script then does is initiate a process in which a 'get' request to the server is enabled, whereby the ESP8266 will identify as an asynchronise call under the directory in the server of "/ac110V" or "ac230V", or alternatively service an interrupt with the name. It will be wise to read up on the complexity available for this function.
the line "document.getElementById("rangeValue").innerHTML = "110V AC";" is to extract a string, which I then insert into a place holder of the current web page called "Range" in a string in the HTML body "<b id="rangeValue">No Selection</b>" which has a default when loaded up as "No Selection"

Code: Select all<script>
  function get110V() {
  document.getElementById("rangeValue").innerHTML = "110V AC";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/ac110V" , true);
  xhr.send();
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    }
    xhr.send();
};
</script>

<script>
  function get230V() {
  document.getElementById("rangeValue").innerHTML = "230V AC";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/ac230V" , true);
  xhr.send();
};
</script>


Then during the setup() process, we must service this server "get" call which is where Java comes into play. See below
I use "inputMessage1 = "110V AC Selected";" to pass information from the HTML page action to the ESP8266. You can use this instance to pass variables or strings to the ESP8266.

Code: Select all// Enable I/O Pins on ESP8266
    server.on("/ac110V", HTTP_GET, [](AsyncWebServerRequest *request){
    inputMessage1 = "110V AC Selected";
    digitalWrite(LED_GPI1,HIGH);
    digitalWrite(LED_GPI2,LOW);
    Serial.println("110V AC"); // Show the selection
    Serial.println(inputMessage1); // Show the message passed to ESP8266
    });

    server.on("/ac230V", HTTP_GET, [](AsyncWebServerRequest *request){
    inputMessage1 = "230V AC Selected";
    digitalWrite(LED_GPI1,LOW);
    digitalWrite(LED_GPI2,HIGH);
    Serial.println("230V AC"); // Show the selection
    Serial.println(inputMessage1); // Show the message passed to ESP8266
    });


You can pass more information under this function, if required, just code it in.

- Tue Jan 17, 2023 6:01 am #95826 You may learn more about the Kroger Tion Login at feed.kroger.com in this post, which includes a step-by-step tutorial for registering at ESchedule for Meijer employees. https://tractorsinfo.com/feed-kroger-login/

feed kroger login