Buttons in the webpage disappearing after clicking

Hello Everyone,

Im new in arduino programming and im not good in programming as well. I have a project wherein to control the relay via webserver as well as texting the recipient for any event that the arduino is doing. However, i have problem with the buttons and the if condition i created in the page. Buttons are disappearing after clicking it and the if condition is not applying(specifically changing the color of the text). Can anyone help me figure out the problem?

Here's the code:

//For ethernet
#include <SPI.h>
#include <Ethernet.h>
//For relay
#include <Wire.h>
#include <Relay.h>
//For Temp
#include <OneWire.h>
#include <DallasTemperature.h>
//For GSM
#include <SoftwareSerial.h>

#include <EEPROM.h>


//For GSM---------------------------------------------------------------------------------
SoftwareSerial mySerial(2, 3);
char Rx_data[150];
unsigned char Rx_index = 0; 
int i = 0;
char msg[160];
int sig;

#define DEBUG true

//-----------------------------------------------------------------------------------------
int passFlag = 0;
int passFlag1 = 0;
int passFlag2 = 0;
int passFlag3 = 0;
//Millis timeout---------------------------------------------------------------------------

//-----------------------------------------------------------------------------------------

//Batt pin---------------------------------------------------------------------------------
#define SIGNAL_PIN A0   //battery level monitoring using 4.7K & 2.2K ohm resistor
//-----------------------------------------------------------------------------------------


//Temp Pin---------------------------------------------------------------------------------
#define ONE_WIRE_BUS 4
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
float temp;
//-----------------------------------------------------------------------------------------


//Batt computation-------------------------------------------------------------------------
float adc_voltage = 0.0;
float in_voltage = 0.0;
float R1 = 30000.0;
float R2 = 7500.0;
float ref_voltage = 5.0;
int adc_value = 0;
//-----------------------------------------------------------------------------------------


//Ethernet---------------------------------------------------------------------------------
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1, 52);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);
//-----------------------------------------------------------------------------------------

// Relay state and pin---------------------------------------------------------------------
String relay1State1 = "ON";
String relay2State2 = "ON";
const int  TempCon= 6;
const int ChgRlyCon = 7;

//-----------------------------------------------------------------------------------------


// Client variables------------------------------------------------------------------------ 
char linebuf[160];
int charcount=0;
boolean authentificated=false;
//-----------------------------------------------------------------------------------------

void dashboardPage(EthernetClient &client) {
  client.println(F("HTTP/1.1 200 OK"));
  client.println(F("Content-Type: text/html"));
  client.println(F("Connnection: close"));
  client.println();
  client.println(F("<!DOCTYPE HTML><html><style>body {background-image: url(\"https://geloautomationworks.files.wordpress.com/2023/08/bb1.jpg\");  background-size: 100vw 100vh; background-repeat: no-repeat;  text-align: center; font-family: \"Trebuchet MS\", Arial;}</style>"));
  client.println(F("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta http-equiv=\"refresh\" content=\"1\"></head>"));
  client.println(F("<center><a href=\"/\">Refresh</a>"));
  client.println(F("<h3>SERVER TEMPERATURE</a></h3>"));
  client.println(F("<br>"));
  client.println(temp);
  client.println(F("</br>"));
  // Generates buttons to control the relay 
  client.println(F("<br>"));
  if(relay1State1 == "ON"){
  client.println(F("Aircon is <font color=’green’>ON</font>"));
  }
  else {
  client.println(F("Aircon is <font color=’black’>OFF</font>"));
  }
  client.println(F("</br>"));  
  client.println(F("<a href=\"/ACON\"><button>ON</button></a>&nbsp;&nbsp"));  
  client.println(F("<a href=\"/ACOFF\"><button>OFF</button></a>"));
  client.println(F("<h3>SERVER BATTERY LEVEL</h3>"));
  client.println(F("<br>"));
  client.println(in_voltage);
  client.println(F("</br>"));
  // Generates buttons to control the relay  
  client.println(F("<br>"));
  if(relay2State2 == "ON"){
  client.println(F("Battery is <font color=’green’>CHARGING</font>"));
  }
  else {
  client.println(F("Battery is <font color='black’>NOT CHARGING</font>"));
  }
  client.println(F("</br>"));  
  client.println(F("<a href=\"/DCON\"><button>ON</button></a>&nbsp;&nbsp"));
  client.println(F("<a href=\"/DCOFF\"><button>OFF</button></a></center>"));
  client.println(F("</body></html>")); 
  
}

void SendAuthentificationpage(EthernetClient &client)
{
  client.println(F("HTTP/1.1 401 Authorization Required"));
  client.println(F("WWW-Authenticate: Basic realm=\"Secure Area\""));
  client.println(F("Content-Type: text/html"));
  client.println("Connnection: close");
  client.println();
  client.println(F("<!DOCTYPE HTML>"));
  client.println(F("<HTML>  <HEAD>   <TITLE>Error</TITLE>"));
  client.println(F(" </HEAD> <BODY><H1>401 Unauthorized.</H1></BODY> </HTML>"));
}



void setup()
{
  // For GSM
  Serial.begin(9600);
  mySerial.begin(19200);


  //---------------------------------------------------------------------------------------

  //For ethernet
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
  //---------------------------------------------------------------------------------------

  //For relay pins
  pinMode(ChgRlyCon, OUTPUT);
  digitalWrite(ChgRlyCon, HIGH);
  pinMode(TempCon, OUTPUT);
  digitalWrite(TempCon, HIGH);
  //---------------------------------------------------------------------------------------


}


//-------------------------------------------------------------------------------------------

void loop() {
  
//----GSM------------------------------------------------------------------------------------  
   if (mySerial.available())
    Serial.write(mySerial.read());
  if (Serial.available())
    mySerial.write(Serial.read());
  // listen for incoming clients
//------------------------------------------------------------------------------------------  
  
//----TEMP SENSOR---------------------------------------------------------------------------  
  sensors.requestTemperatures(); // Send the command to get temperatures
  temp = sensors.getTempCByIndex(0);
  sensors.requestTemperatures(); // Send the command to get temperatures
  temp = sensors.getTempCByIndex(0);
//------------------------------------------------------------------------------------------  
  
  
//----BATT SENSOR---------------------------------------------------------------------------
// Why "byIndex"? 
  // You can have more than one IC on the same bus. 
  // 0 refers to the first IC on the wire
  // Read the Analog Input
  adc_value = analogRead(SIGNAL_PIN);

  // Determine voltage at ADC input
  adc_voltage  = (adc_value * ref_voltage) / 1024.0;

  // Calculate voltage at divider input
  in_voltage = adc_voltage / (R2 / (R1 + R2)) ;
//------------------------------------------------------------------------------------------


//----BASIC AUTHENTICATION------------------------------------------------------------------
 // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    memset(linebuf, 0, sizeof(linebuf));
    charcount = 0;
    authentificated = false;
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        linebuf[charcount] = c;
        if (charcount < sizeof(linebuf) - 1) charcount++;
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the HTTP request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // decide what to do
          if (strstr(linebuf, "Authorization: Basic") > 0 && strstr(linebuf, "YWRtaW46RGF5d2Fsa2VyQDAwMg==") > 0)
            authentificated = true;
           
            if (authentificated) {
            dashboardPage(client);

          if (strstr(linebuf, "GET /ACON") > 0 && authentificated) {
            digitalWrite(TempCon, HIGH);
            relay1State1="ON";
            init_GSM();
            send_msg("***********", "AC HAS BEEN TURNED ON BY ADMIN");
          }

          else if (strstr(linebuf, "GET /ACOFF") > 0 && authentificated) {
            digitalWrite(TempCon, LOW);
            relay1State1="OFF";
            init_GSM();
            send_msg("***********", "AC HAS BEEN TURNED OFF BY ADMIN");
          }

          else if (strstr(linebuf, "GET /DCON") > 0 && authentificated) {
            digitalWrite(ChgRlyCon, HIGH);
            relay2State2="ON";
            init_GSM();
            send_msg("***********", "CHARGING THE BATTERY HAS BEEN CONNECTED BY ADMIN");
          }

          else if (strstr(linebuf, "GET /DCOFF") > 0 && authentificated) {
            digitalWrite(ChgRlyCon, LOW);
            relay2State2="OFF";
            init_GSM();
            send_msg("***********", "CHARGING THE BATTERY HAS BEEN DISCONNECTED BY ADMIN");
          }
          }
          
          else {
            SendAuthentificationpage(client);
          }

          break;

        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
//------------------------------------------------------------------------------------------

//----TEMP CONDITION------------------------------------------------------------------------ 
  if( temp >= 35){
    digitalWrite(TempCon, HIGH);
    relay1State1 = "ON";
    if(passFlag == 0){
      init_GSM();
      send_msg("***********", "AIRCON HAS BEEN TURNED ON");
      passFlag = 1;
      passFlag1 = 0;
    }
  }
  if (temp <= 14){
    digitalWrite(TempCon, LOW);
    relay1State1 = "OFF";
    if(passFlag1 == 0){
      init_GSM();
      send_msg("***********", "AIRCON HAS BEEN TURNED OFF");
      passFlag1 = 1;
      passFlag = 0;
    } 
//------------------------------------------------------------------------------------------


//----BATT CONDITION------------------------------------------------------------------------
  //--------------------------- bms 0, batt lt 13.4v--------------
  if(in_voltage >= 15){
    digitalWrite(ChgRlyCon, LOW);
    relay2State2 = "OFF";
    if(passFlag2 == 0){
      init_GSM();
      send_msg("***********", "CHARGING THE BATTERY HAS BEEN DISCONNECTED");
      passFlag2 = 1;
      passFlag3 = 0;
    }
  }
  //--------------------------- bms 0, batt is charged at 13.4V -------
  if(in_voltage <= 6){
    digitalWrite(ChgRlyCon, HIGH);
    relay2State2 = "ON";
    if(passFlag3 == 0){
      init_GSM();
      send_msg("***********", "CHARGING THE BATTERY HAS BEEN CONNECTED");
      passFlag3 = 1;
      passFlag2 = 0;
    }
  }
 }
//------------------------------------------------------------------------------------------
}


//---------------------------------------------------------------------------------------------- 


//---SEND GSM STRING----

void send_msg(char *number, char *msg)
{
  char at_cmgs_cmd[30] = {
    '\0'  };
  char msg1[160] = {
    '\0'  };
  char ctl_z = 0x1A;

  sprintf(msg1, "%s%c", msg, ctl_z);
  sprintf(at_cmgs_cmd, "AT+CMGS=\"%s\"\r\n",number);

  sendGSM(at_cmgs_cmd);
  delay(100);
  delay(100);
  delay(100);
  sendGSM(msg1);
  delay(100);
}

void sendGSM(char *string){
  mySerial.write(string);
  delay(90);
}

void clearString(char *strArray) {
  int j;
  for (j = 100; j > 0; j--)
    strArray[j] = 0x00;
}

void send_cmd(char *at_cmd, char clr){
  char *stat = '\0';
  while(!stat){
    sendGSM(at_cmd);
    delay(200);
    readSerialString(Rx_data);
    Serial.write(Rx_data);

    stat = strstr(Rx_data, "OK");
    Serial.println("Success");
    delay(50000);
  }
  if (clr){
    clearString(Rx_data);
    delay(200);
    stat = '\0';
  }
}

void init_GSM(){


  sendData("AT\r\n",1000,DEBUG); // AT

  sendData("AT+CMGF=1\r\n",1000,DEBUG); //AT+CMGF=1
  sendData("AT+CMGD=1\r\n",1000,DEBUG); //AT+CMGD=1

  delay(1000);
  delay(1000);
  delay(1000);
}

void readSerialString (char *strArray) {

  if(!mySerial.available()) {
    return;
  }

  while(mySerial.available()) {
    strArray[i] = mySerial.read();
    i++;
  }
}

String sendData(String command, const int timeout, boolean debug)
{
  String response = "";

  mySerial.print(command); 

  long int time = millis();

  while( (time+timeout) > millis())
  {
    while(mySerial.available())
    {


      char c = mySerial.read();
      response+=c;
    }  
  }

  if(debug)
  {
    Serial.print(response);
  }

  return response;
}






Page before clicking the buttons:
1 new

Page after clicking the buttons:
2 new

Thank you.

I can't see any mistake on the Arduino side. If with "after clicking the button" you mean the "OFF" upper button, I think it's just a matter of HTML rendering.
You need to check the raw html output you get. Maybe when you write "NOT CHARGING" the text is too wide to fit in the required space, so it could go somewhere else (like under the picture?).

Just to get a deeper and simpler check, open your page from a PC browser, then click "OFF" and see if on a wider screen you can read what you need to see. In case, press F12 to open the browser "Dev tools" and see if the source html code ("Elements" tab) contains the "NOT CHARGING" label.
If you're in trouble interpreting the html, copy/paste the "Elements" content here (put it between "code" tags obviously) and I'll have a look to confirm you if it's an html rendering problem or other else.

1 Like

Hi Docdoc,

You are right. the problem is with the html file specifically the if condition. Thank you for your help. Appreciate it.

Did you run out of "(F(" flash memory?

I'm happy if you found a solution, but I'm sorry, I don't get what you mean. What "if condition"? And what does it have to do with the html issue you're complaining for?
Lastly, if you solved it it's a good habit to share the new and working code.

PS: And, just to get a complete description, what Arduino model we're talking about?

@gelorivera0214 -

You have the wrong punctuation (a back-tick) on the BATTERY IS NOT CHARGING line... the circled item should match the other single quotes.

2 Likes

Hi All. Thanks for all of your inputs. Appreciate it. You are all correct. The problem is with the if statement in my html page. My previous if statement in my html is this:

if(relay1State1 == "ON"){
  client.println(F("Aircon is <font color=’green’>ON</font>"));
  }
  else {
  client.println(F("Aircon is <font color=’black’>OFF</font>"));
  }
  client.println(F("</br>"));  
  client.println(F("<a href=\"/ACON\"><button>ON</button></a>&nbsp;&nbsp"));  
  client.println(F("<a href=\"/ACOFF\"><button>OFF</button></a>"));
  client.println(F("<h3>SERVER BATTERY LEVEL</h3>"));
  client.println(F("<br>"));
  client.println(in_voltage);
  client.println(F("</br>"));
  // Generates buttons to control the relay  
  client.println(F("<br>"));
  if(relay2State2 == "ON"){
  client.println(F("Battery is <font color=’green’>CHARGING</font>"));
  }
  else {
  client.println(F("Battery is <font color='black’>NOT CHARGING</font>"));
  }```

i changed it to this:

if(relay1State1 == "ON"){
client.println(F("Aircon is <font color="green">ON"));
}
else {
client.println(F("Aircon is <font color="red">OFF"));
}
client.println(F("
"));
client.println(F("<a href="/ACON">ON &nbsp"));
client.println(F("<a href="/ACOFF">OFF"));
client.println(F("

SERVER BATTERY LEVEL

"));
client.println(F("
"));
client.println(in_voltage);
client.println(F("
"));
// Generates buttons to control the relay
client.println(F("
"));
if(relay2State2 == "ON"){
client.println(F("Battery is <font color="green">CHARGING"));
}
else {
client.println(F("Battery is <font color="red">NOT CHARGING"));
}
client.println(F("
"));


And it worked. Apologies for the late update on this as im busy finishing my project.

Thank you all.

Happy to see you have solved, but the code in your last post is almost unreadable, especially the second one (thus, making hard to see the differences with the first one).

Please edit your last post to make sure you enclosed both codes, and only the code (keep your comments out of them), inside the "<CODE/>" tags. Thanks.

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