Ajax issue with push buttons

Hello everyone !

I hope you all had a Merry Christmas :slight_smile:

I have an issue with my bomb. I use an Ethernet Shield with a Keypad and an Adafruit display.

I set up a web page that displays a not very user-friendly interface but it’s working so far.
The biggest issue I have is that when I push any button (like ACTIVATE, PAUSE, RESET or a TIME SETTING), the page refresh and only displays the timeleft. I have to go backward to see the full page.
And, sometimes I need to make a reset to make it work properly.

If anyone has some tips to help me.

And my system is not fluent at all, as I needed to set up manually different button to make time change. A form where I could add or remove 1min or more will be much more fluent, if you have any starting point for me (I know HTML and some coding languages but I’m not very comfortable with Javascript and AJAX, specially when mixed with Arduino).

Thanks a lot !!

Code PART 1 :

#include <SoftReset.h>
#include <SPI.h>
#include <Ethernet.h>
#include <Wire.h>
#include <Keypad.h>

#include "Adafruit_LEDBackpack.h"
#include "Adafruit_GFX.h"


const int passwrong = 24; // Led when the wrong password is entered
const int passright = 25; // Led when the right password is entered
const int passled1 = 26; // Led when 1 number is entered
const int passled2 = 27; // Led when the second number is entered
const int passled3 = 28; // Led when the third number is entered
const int passled4 = 29; // Led when the fourth number is entered

char password[] = {51,57,56,52}; // Password : 3984, refer to this table to modify it  https://www.arduino.cc/en/Reference/ASCIIchart
int currentLength = 0; // defines which number we are currently writing
int i = 0; 
char entered[4]; 

const byte ROWS = 4; // Four rows
const byte COLS = 3; // Three columns
// Define the Keymap for the keyboard
char keys[ROWS][COLS] = {
  {'1','2','3'},
  {'4','5','6'},
  {'7','8','9'},
  {'*','0','#'}
};
// Connect keypad ROW0, ROW1, ROW2 and ROW3 to these Arduino pins.
byte rowPins[ROWS] = { 45, 40, 41, 43 };
// Connect keypad COL0, COL1 and COL2 to these Arduino pins.
byte colPins[COLS] = { 44, 46, 42 }; 

// Create the Keypad
Keypad keypad = Keypad( makeKeymap(keys), rowPins, colPins, ROWS, COLS );


byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x69, 0x87 };   // physical mac address
byte ip[] = { 192, 168, 1, 178 };                      // ip in lan (that's what you need to use in your browser. ("192.168.1.178")
byte gateway[] = { 192, 168, 1, 1 };                   // internet access via router
byte subnet[] = { 255, 255, 255, 0 };                  //subnet mask
EthernetServer server(8081);   //server port
String readString, newString; 
String HTTP_req;            // stores the HTTP request    

Adafruit_7segment matrix = Adafruit_7segment(); // Initialize the 7 segment screen
int seconds = 0;
int minutes = 60; // Available time when starting the bomb
int num = 0;
int minutescount = 0;
int secondscount = 0;

int speaker = 6;
int buttonPresses = 0;
long time = 0;

void setup() {
pinMode(passwrong,OUTPUT);
pinMode(passright,OUTPUT);
pinMode(passled1,OUTPUT);
pinMode(passled2,OUTPUT);
pinMode(passled3,OUTPUT);
pinMode(passled4,OUTPUT);

   // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    
   Serial.begin(9600);
   // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());

  pinMode(speaker, OUTPUT);
  matrix.begin(0x70);

  beforeTime();  
}

void loop() {
// ETHERNET
EthernetClient client = server.available();
  if (client) {
    boolean currentLineIsBlank = true;
    while (client.connected()) {   
      if (client.available()) {
        char c = client.read();
     
        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
         }

         //if HTTP request has ended
         HTTP_req += c;  // save the HTTP request 1 char at a time
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
         if (c == '\n'  && currentLineIsBlank) {          
           Serial.print("GET request: [");
           Serial.print(readString);
           Serial.println("]");
     
           client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: keep-alive");
           client.println(); 
           // AJAX request for switch state
                    if (HTTP_req.indexOf("ajax_switch") > -1) {
                        // read switch state and analog input
                        GetAjaxData(client);
                    }
                    else {     
           client.println("<HTML>");
           client.println("<HEAD>");
           client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
           client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
           client.println("<link rel='stylesheet' type='text/css' href='http://randomnerdtutorials.com/ethernetcss.css' />");
           client.println("<TITLE>Random Nerd Tutorials Project</TITLE>");
           client.println("<script>");
                        client.println("function GetSwitchAnalogData() {");
                        client.println(
                            "nocache = \"&nocache=\" + Math.random() * 1000000;");
                        client.println("var request = new XMLHttpRequest();");
                        client.println("request.onreadystatechange = function() {");
                        client.println("if (this.readyState == 4) {");
                        client.println("if (this.status == 200) {");
                        client.println("if (this.responseText != null) {");
                        client.println("document.getElementById(\"sw_an_data\")\
.innerHTML = this.responseText;");
                        client.println("}}}}");
                        client.println(
                        "request.open(\"GET\", \"ajax_switch\" + nocache, true);");
                        client.println("request.send(null);");
                        client.println("setTimeout('GetSwitchAnalogData()', 1000);");
                        client.println("}");
                        client.println("</script>");
                        client.println("<style>");
                        client.println("a {display:inline-block;");
                        client.println("</style>");
                        
           client.println("</HEAD>");
           client.println("<body onload=\"GetSwitchAnalogData()\">");
           client.println("<H1>Bombe John Doe</H1>");
           client.println("<hr />");
           client.println("
");  
           client.println("<H2>Mine 1</H2>");
           client.println("
");
           client.println("<a href=\"/?activer\"\">Activate bombe</a>");
           client.println("<a href=\"/?pause\"\">Pause bomb</a>
"); 
           client.println("
");
           client.println("<a href=\"/?reset\"\">Reset bombe</a>
");  
           client.println("
"); 
           client.println("
");
           client.print("Time left : "); 
           client.println("<div id=\"sw_an_data\">");
           client.println("</div>");
           client.println("
"); 
           client.println("
");
           client.println("<a href=\"/?55min\"\">55min</a>");
           client.println("<a href=\"/?50min\"\">50min</a>");
           client.println("<a href=\"/?45min\"\">45min</a>");
           client.println("<a href=\"/?40min\"\">40min</a>");
           client.println("<a href=\"/?35min\"\">35min</a>");
           client.println("<a href=\"/?30min\"\">30min</a>");
           client.println("<a href=\"/?25min\"\">25min</a>");
           client.println("<a href=\"/?20min\"\">20min</a>");
           client.println("<a href=\"/?15min\"\">15min</a>");
           client.println("<a href=\"/?10min\"\">10min</a>");
           client.println("<a href=\"/?5min\"\">5min</a>");
           client.println("<a href=\"/?1min\"\">1min</a>");
           client.println("<a href=\"/?0min\"\">0min</a>");
           client.println("
"); 
           client.println("
");
           client.println("</BODY>");
           client.println("</HTML>");
                    }

Code PART 2

      delay(1);
           //stopping client
           client.stop();
           //controls the Arduino if you press the buttons
           if (readString.indexOf("?activer") >0){
               time = millis();
               buttonPresses = 1;
           }
           if (readString.indexOf("?pause") >0){
              buttonPresses = 2;
           }
           if (readString.indexOf("?reset") >0){
              buttonPresses = 3;
           }
           if (readString.indexOf("?55min") >0){
              minutes = 55;
           }
           if (readString.indexOf("?50min") >0){
              minutes = 50;
           }
           if (readString.indexOf("?45min") >0){
              minutes = 45;
           }
           if (readString.indexOf("?40min") >0){
              minutes = 40;
           }
           if (readString.indexOf("?35min") >0){
              minutes = 35;
           }
           if (readString.indexOf("?30min") >0){
              minutes = 30;
           }
           if (readString.indexOf("?25min") >0){
              minutes = 25;
           }
           if (readString.indexOf("?20min") >0){
              minutes = 20;
           }
           if (readString.indexOf("?15min") >0){
              minutes = 15;
           }
           if (readString.indexOf("?10min") >0){
              minutes = 10;
           }
           if (readString.indexOf("?5min") >0){
              minutes = 5;
           }
           if (readString.indexOf("?1min") >0){
              minutes = 1;
           }
           if (readString.indexOf("?0min") >0){
              minutes = 0;
           }
                  //clearing string for next read
            readString="";  
           
         }
       }
    }
}
 switch (buttonPresses) {
    case 1: 
      UpdateTime();
      timeRun();
      break;
    case 2: 
      timePause();
      break;
    case 3: 
      soft_restart();
      break;
    default:
      beforeTime();
      time = millis();
  }
// ETHERNET
// CODE KEYPAD
char key2 = keypad.getKey(); // get the key
  digitalWrite(passled1, LOW);
        digitalWrite(passled2, LOW);
        digitalWrite(passled3, LOW);
        digitalWrite(passled4, LOW);

     
      
                     
          if (key2 != NO_KEY)    
            {
             
              Serial.print(key2);
              entered[currentLength] = key2;
              currentLength++;
              tone(speaker, 2000,200);
              delay(100);
            }
            
if (currentLength == 0) {
        digitalWrite(passled1, LOW);
        digitalWrite(passled2, LOW);
        digitalWrite(passled3, LOW);
        digitalWrite(passled4, LOW);
            }

       if (currentLength == 1) {
        digitalWrite(passled1, HIGH);
        digitalWrite(passled2, LOW);
        digitalWrite(passled3, LOW);
        digitalWrite(passled4, LOW);
            }

        if (currentLength == 2) {
        digitalWrite(passled1, HIGH);
        digitalWrite(passled2, HIGH);
        digitalWrite(passled3, LOW);
        digitalWrite(passled4, LOW);
            }
        if (currentLength == 3) {
        digitalWrite(passled1, HIGH);
        digitalWrite(passled2, HIGH);
        digitalWrite(passled3, HIGH);
        digitalWrite(passled4, LOW);
            }
        

       
      
      if (currentLength == 4) 
        {
         digitalWrite(passled1, HIGH);
        digitalWrite(passled2, HIGH);
        digitalWrite(passled3, HIGH);
        digitalWrite(passled4, HIGH);
          if (entered[0] == password[0] && entered[1] == password[1] && entered[2] == password[2] && entered[3] == password[3])
            {
              Serial.print("Bomb Defused");
              currentLength = 0;
              digitalWrite(passright, HIGH);
              tone(speaker, 4000,500);
              delay(100);
              tone(speaker, 2000,500);
              delay(100);
              tone(speaker, 4000,500);
              delay(100);
              tone(speaker, 2000,500);
              delay(100);
              tone(speaker, 4000,500);
              delay(100);
              tone(speaker, 2000,500);
              delay(500);
              Serial.print("Reset the Bomb");
              delay(10000);
              soft_restart();
            }
      else
        {
          Serial.print("Wrong Password!");
          digitalWrite(passwrong, HIGH);
          tone(speaker, 1000,500);
          delay(100);
          tone(speaker, 500,500);
          delay(100);
          tone(speaker, 1000,500);
          delay(100);
          tone(speaker, 500,500);
          delay(100);
          tone(speaker, 1000,500);
          delay(100);
          tone(speaker, 500,500);
          delay(100);
          tone(speaker, 1000,500);
          delay(500);
          digitalWrite(passwrong, LOW);
          currentLength = 0;
  
        }
      }  
    
// CODE KEYPAD FIN
}

void beforeTime() {
  matrix.print(10000, DEC); //Print "----" on display
  matrix.writeDisplay();
}

void timeRun() {
  num = minutes * 100 + seconds;
  matrix.print(num);
  matrix.drawColon(true);
  matrix.writeDisplay();
  if (seconds + minutes == 0) {
      digitalWrite(passled1, HIGH);
      digitalWrite(passled2, HIGH);
      digitalWrite(passled3, HIGH);
      digitalWrite(passled4, HIGH);
      digitalWrite(passwrong, HIGH);
      tone(speaker,400,500);
      delay(500);
      digitalWrite(passled1, LOW);
      digitalWrite(passled2, LOW);
      digitalWrite(passled3, LOW);
      digitalWrite(passled4, LOW);
      digitalWrite(passwrong, LOW);
      delay(500);
      digitalWrite(passled1, HIGH);
      digitalWrite(passled2, HIGH);
      digitalWrite(passled3, HIGH);
      digitalWrite(passled4, HIGH);
      digitalWrite(passwrong, HIGH);
      tone(speaker,400,500);
      delay(500);
      digitalWrite(passled1, LOW);
      digitalWrite(passled2, LOW);
      digitalWrite(passled3, LOW);
      digitalWrite(passled4, LOW);
      digitalWrite(passwrong, LOW);
      delay(500);
      digitalWrite(passled1, HIGH);
      digitalWrite(passled2, HIGH);
      digitalWrite(passled3, HIGH);
      digitalWrite(passled4, HIGH);
      digitalWrite(passwrong, HIGH);
      tone(speaker,400,500);
      delay(500);
      digitalWrite(passled1, LOW);
      digitalWrite(passled2, LOW);
      digitalWrite(passled3, LOW);
      digitalWrite(passled4, LOW);
      digitalWrite(passwrong, LOW);
      delay(500);
      digitalWrite(passled1, HIGH);
      digitalWrite(passled2, HIGH);
      digitalWrite(passled3, HIGH);
      digitalWrite(passled4, HIGH);
      digitalWrite(passwrong, HIGH);
      tone(speaker,400,500);
      delay(500);
      digitalWrite(passled1, LOW);
      digitalWrite(passled2, LOW);
      digitalWrite(passled3, LOW);
      digitalWrite(passled4, LOW);
      digitalWrite(passwrong, LOW);
      delay(500);
      digitalWrite(passled1, HIGH);
      digitalWrite(passled2, HIGH);
      digitalWrite(passled3, HIGH);
      digitalWrite(passled4, HIGH);
      digitalWrite(passwrong, HIGH);
      tone(speaker,400,500);
      delay(500);
      digitalWrite(passled1, LOW);
      digitalWrite(passled2, LOW);
      digitalWrite(passled3, LOW);
      digitalWrite(passled4, LOW);
      digitalWrite(passwrong, LOW);
      delay(500);
      digitalWrite(passled1, HIGH);
      digitalWrite(passled2, HIGH);
      digitalWrite(passled3, HIGH);
      digitalWrite(passled4, HIGH);
      digitalWrite(passwrong, HIGH);
      tone(speaker,400,500);
      delay(500);
      digitalWrite(passled1, LOW);
      digitalWrite(passled2, LOW);
      digitalWrite(passled3, LOW);
      digitalWrite(passled4, LOW);
      digitalWrite(passwrong, LOW);
      delay(500);

    delay(1000);
    buttonPresses = 0;
    beforeTime();
  }
  UpdateTime();
}

void timePause() {
  time = millis();
}

void UpdateTime() {
  if ((millis() - time) >= 1000) {
    seconds--;
    tone(speaker,1000,100);
    time = millis();
    if (seconds == -1) {
      minutes--;
      seconds = 59;
    }
  }
}

// send the state of the switch to the web browser
void GetAjaxData(EthernetClient cl)
{
    int analog_val;
    
    if (num != 0) {
        cl.println("<h2>");
        cl.println(num/100);
        cl.println(" : ");
        cl.println((num - (num/100)*100));
        cl.println("</h2>");
    }
}