Unable to access a web page with my Iphone IOS

Using Arduino Networking, Protocols, and Devices
1

Unable to load a webpage with Iphone IOS

Hello

I'm trying to understand why I can't access a webpage loaded on a Esp32 from my Iphone. I can access it using my Android tablet, but it seem not stable.

Any idea?
Martin

Main program:

#include <Arduino.h>

/*
 outputs_01.ino       by ePinguino 2020/09/07

*/

#include <WiFi.h>
#include "webpage.h"

char ssid[] = "wifi_l";
char pass[] = "";

WiFiServer server(80);
String request = "";

byte const OUT0 = 16;
byte const OUT1 = 5;
byte const OUT2 = 4;
byte const OUT3 = 0;

String readState() {
  String o3, o2, o1, o0;        // {OUT3, OUT2, OUT1, OUT0}
  String dato;

  if(digitalRead(OUT3) == HIGH) { o3 = "1"; }
  else                          { o3 = "0"; }

  if(digitalRead(OUT2) == HIGH) { o2 = "1"; }
  else                          { o2 = "0"; }

  if(digitalRead(OUT1) == HIGH) { o1 = "1"; }
  else                          { o1 = "0"; }

  if(digitalRead(OUT0) == HIGH) { o0 = "1"; }
  else                          { o0 = "0"; }

  dato = o3 + ":" + o2 + ":" + o1 + ":" + o0;
  return dato;
}

void setup() {
  // Initialize outputs
  pinMode(OUT0, OUTPUT);
  pinMode(OUT1, OUTPUT);
  pinMode(OUT2, OUTPUT);
  pinMode(OUT3, OUTPUT);

  digitalWrite(OUT0, LOW);
  digitalWrite(OUT1, LOW);
  digitalWrite(OUT2, LOW);
  digitalWrite(OUT3, LOW);

  Serial.begin(115200);
  Serial.println();
  Serial.println("Serial started at 115200");
  Serial.println();

  // Connect to a WiFi network
  Serial.print(F("Connecting to "));
  Serial.println(ssid);
  WiFi.begin(ssid, pass);

  while(WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }

  Serial.println("");
  Serial.println(F("[CONNECTED]"));
  Serial.print("[IP ");
  Serial.print(WiFi.localIP());
  Serial.println("]");

  // start a server
  server.begin();
  Serial.println("Server started");
}

void loop() {
  String data;

  // Check if a client has connected
  WiFiClient client = server.available();
  if(!client)  { return; }

  // Read the first line of the request
  request = client.readStringUntil('\r');

  Serial.print("request: ");
  Serial.println(request);

  if(request.indexOf("H3") > 0)      { digitalWrite(OUT3, HIGH); client.print(readState()); }
  else if(request.indexOf("L3") > 0) { digitalWrite(OUT3, LOW);  client.print(readState()); }

  else if(request.indexOf("H2") > 0) { digitalWrite(OUT2, HIGH); client.print(readState()); }
  else if(request.indexOf("L2") > 0) { digitalWrite(OUT2, LOW);  client.print(readState()); }

  else if(request.indexOf("H1") > 0) { digitalWrite(OUT1, HIGH); client.print(readState()); }
  else if(request.indexOf("L1") > 0) { digitalWrite(OUT1, LOW);  client.print(readState()); }

  else if(request.indexOf("H0") > 0) { digitalWrite(OUT0, HIGH); client.print(readState()); }
  else if(request.indexOf("L0") > 0) { digitalWrite(OUT0, LOW);  client.print(readState()); }

  else if(request.indexOf("STATE") > 0) { client.print(readState()); }

  else {
    client.flush();
    client.print(html_1);
   }
    delay(5);
}

**Webpage.h**

String html_1 = R"=====(

Martin Thermometre

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 22px; padding: 10px; color: #006666; } 
  table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    border-collapse: collapse;
    width: 35%;
    margin: 0 auto;
    padding: 10px;
  }

  td, th {
    border: 1px solid #d1e0e0;
    text-align: center;
    padding: 8px;
    width: 100px;
    height: 50px;
  }

  th {
    color: #006666;
    height: 30px;
  }

  #butO0, #butO1, #butO2, #butO3 {
    padding:10px 10px 10px 10px;
    width:60%;
    background-color: #e0ebeb;
    font-size: 80%;
    cursor: pointer;
    border-radius: 4px;
    transition-duration: 0.4s;
  }

  #butREAD {
    paddi
Summary

This text will be hidden

ng:10px 10px 10px 10px;
width: 90px;
height: 40px;
background-color: #98e6e6;
font-size: 80%;
cursor: pointer;
margin: 0 auto;
border-radius: 4px;
}

  p {
    padding: 1px;
  }
</style>

<script>
  function switchO_0() {
    var button_text = document.getElementById("butO0").value;
    <!-- ajaxLoad manda estado (L o H) + salida (0, 1, 2, 3) -->
    if(button_text == "ON") { ajaxLoad('H0');  }
    else                    { ajaxLoad('L0'); }
  }

  function switchO_1() {
    var button_text = document.getElementById("butO1").value;
    if(button_text == "ON") { ajaxLoad('H1');  }
    else                    { ajaxLoad('L1'); }
  }

  function switchO_2() {
    var button_text = document.getElementById("butO2").value;
    if(button_text == "ON") { ajaxLoad('H2');  }
    else                    { ajaxLoad('L2'); }
  }

  function switchO_3() {
    var button_text = document.getElementById("butO3").value;
    if(button_text == "ON") { ajaxLoad('H3');  }
    else                    { ajaxLoad('L3'); }
  }

  function readSTATE() {
    ajaxLoad('STATE');
  }

  var ajaxRequest = null;
  if(window.XMLHttpRequest)  { ajaxRequest = new XMLHttpRequest(); }
  else                       { ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); }

  function ajaxLoad(ajaxURL) {
    if(!ajaxRequest) { alert("AJAX is not supported."); return; }

    ajaxRequest.open("GET", ajaxURL, true);
    ajaxRequest.onreadystatechange = function() {
      if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
        var ajaxResult = ajaxRequest.responseText;
        tmpArray = ajaxResult.split(":");

        if(tmpArray[0] === "0") {
          document.getElementById("butO3").value = "ON";
          document.getElementById("butO3").style.backgroundColor = "#66ff33";
          document.getElementById("f4c1").innerHTML = "LOW";
        }
        else {
          document.getElementById("butO3").value = "OFF";
          document.getElementById("butO3").style.backgroundColor = "#ff3300";
          document.getElementById("f4c1").innerHTML = "HIGH";
        }

        if(tmpArray[1] === "0") {
          document.getElementById("butO2").value = "ON";
          document.getElementById("butO2").style.backgroundColor = "#66ff33";
          document.getElementById("f3c1").innerHTML = "LOW";
        }
        else {
          document.getElementById("butO2").value = "OFF";
          document.getElementById("butO2").style.backgroundColor = "#ff3300";
          document.getElementById("f3c1").innerHTML = "HIGH";
        }

        if(tmpArray[2] === "0") {
          document.getElementById("butO1").value = "ON";
          document.getElementById("butO1").style.backgroundColor = "#66ff33";
          document.getElementById("f2c1").innerHTML = "LOW";
        }
        else {
          document.getElementById("butO1").value = "OFF";
          document.getElementById("butO1").style.backgroundColor = "#ff3300";
          document.getElementById("f2c1").innerHTML = "HIGH";
        }

        if(tmpArray[3] === "0") {
          document.getElementById("butO0").value = "ON";
          document.getElementById("butO0").style.backgroundColor = "#66ff33";
          document.getElementById("f1c1").innerHTML = "LOW";
        }
        else {
          document.getElementById("butO0").value = "OFF";
          document.getElementById("butO0").style.backgroundColor = "#ff3300";
          document.getElementById("f1c1").innerHTML = "HIGH";
        }
        document.getElementById("reply").innerHTML = "LAST COMMAND: " + ajaxResult;
      }
    }
    ajaxRequest.send();
  }
  
  <!-- update status every 10 seconds -->
  <!--setInterval("readSTATE()", 10000); -->
</script>

ESP8266 Ajax Control Outputs

<table>
  <tr>
    <th>PIN/GPIO</th>
    <th>Current State</th>
    <th>Command</th>
  </tr>
  <tr>
    <td>D0/16</td>
    <td id="f1c1">LOW</td>
    <td><input type="button" id="butO0" onclick="switchO_0()" value="" /></td>
  </tr>
  <tr>
    <td>D1/05</td>
    <td id="f2c1">LOW</td>
    <td><input type="button" id="butO1" onclick="switchO_1()" value="" /></td>
  </tr>
  <tr>
    <td>D2/04</td>
    <td id="f3c1">LOW</td>
    <td><input type="button" id="butO2" onclick="switchO_2()" value="" /></td>
  </tr>
  <tr>
    <td>D3/00</td>
    <td id="f4c1">LOW</td>
    <td><input type="button" id="butO3" onclick="switchO_3()" value="" /></td>
  </tr>

)=====";
2

post using code tags, can't read it that way - it's a mess

3

Hello and thanks for the reply

Strange because I did use the code tag for bothe code sections and the post is readable on my side. I'm not at all familiar with the new Arduino forum style. I will look to see if I could find what I did wrong.

Martin

4

This does not look right to me

5

Hello J-M-L

I did removed the header, same problem. The page will load on my Android tablet, but not on my Iphone

I did try another wifi example from this site
and the webpage do load on both Android and Iphone. So i know that it is feasable, There is something in the script that is not decoded by the Iphone.

Martin

6

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.