[GH-ISSUE #373] How can i add another button to template.html #313

Closed
opened 2026-02-28 01:24:41 +03:00 by kerem · 7 comments
Owner

Originally created by @erdemontas on GitHub (Jun 2, 2017).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/373

I'm trying to add another form to your template but I'm a newbie in html So I felt like to ask.
Here is the question; How can i add another button and get two values using two form.Main purpose is getting min-max values from user and activate a buzzer for a weather station project.
First of all; which file should I edit to manipulate template. template.h or WiFiManager.template.html

Secondly I added 3rd line and I wanna get two integer as temp values. But esp12 still works with old template.
<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/> <form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/> <form action=\"/setTemp\" method=\"get\"><button>Set Temp Values</button></form><br/><!-- New Button--> <form action=\"/i\" method=\"get\"><button>Info</button></form><br/> <form action=\"/r\" method=\"post\"><button>Reset</button></form>

Originally created by @erdemontas on GitHub (Jun 2, 2017). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/373 I'm trying to add another form to your template but I'm a newbie in html So I felt like to ask. Here is the question; How can i add another button and get two values using two form.Main purpose is getting min-max values from user and activate a buzzer for a weather station project. First of all; which file should I edit to manipulate template. template.h or WiFiManager.template.html Secondly I added 3rd line and I wanna get two integer as temp values. But esp12 still works with old template. `<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/> <form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/> <form action=\"/setTemp\" method=\"get\"><button>Set Temp Values</button></form><br/><!-- New Button--> <form action=\"/i\" method=\"get\"><button>Info</button></form><br/> <form action=\"/r\" method=\"post\"><button>Reset</button></form>`
kerem closed this issue 2026-02-28 01:24:41 +03:00
Author
Owner

@tzapu commented on GitHub (Jun 2, 2017):

hi

look into documentation for adding custom parameters

good luck

On 2 Jun 2017, at 12:45, erdemontas notifications@github.com wrote:

I'm trying to add another form to your template but I'm a newbie in html So I felt like to ask.
Here is the question; How can i add another button and get two values using two form.Main purpose is getting min-max values from user and activate a buzzer for a weather station project.
First of all; which file should I edit to manipulate template. template.h or WiFiManager.template.html

Secondly I added 3rd line and I wanna get two integer as temp values. But esp12 still works with old template.






You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/tzapu/WiFiManager/issues/373, or mute the thread https://github.com/notifications/unsubscribe-auth/AC2FkMOSBpizpOmz2EjZfmwxDXx1EesLks5r_9mcgaJpZM4NuD0A.

<!-- gh-comment-id:305743232 --> @tzapu commented on GitHub (Jun 2, 2017): hi look into documentation for adding custom parameters good luck > On 2 Jun 2017, at 12:45, erdemontas <notifications@github.com> wrote: > > I'm trying to add another form to your template but I'm a newbie in html So I felt like to ask. > Here is the question; How can i add another button and get two values using two form.Main purpose is getting min-max values from user and activate a buzzer for a weather station project. > First of all; which file should I edit to manipulate template. template.h or WiFiManager.template.html > > Secondly I added 3rd line and I wanna get two integer as temp values. But esp12 still works with old template. > <form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/> <form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/> <form action=\"/setTemp\" method=\"get\"><button>Set Temp Values</button></form><br/><!-- New Button--> <form action=\"/i\" method=\"get\"><button>Info</button></form><br/> <form action=\"/r\" method=\"post\"><button>Reset</button></form> > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub <https://github.com/tzapu/WiFiManager/issues/373>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AC2FkMOSBpizpOmz2EjZfmwxDXx1EesLks5r_9mcgaJpZM4NuD0A>. >
Author
Owner

@erdemontas commented on GitHub (Jun 3, 2017):

It addes to Configure Wifi page when I add custom parameter, is there any way to add somewhere else?

<!-- gh-comment-id:305992614 --> @erdemontas commented on GitHub (Jun 3, 2017): It addes to Configure Wifi page when I add custom parameter, is there any way to add somewhere else?
Author
Owner

@brendanvanbreda commented on GitHub (Jun 8, 2017):

@erdemontas where exactly do you want it added?

<!-- gh-comment-id:307004964 --> @brendanvanbreda commented on GitHub (Jun 8, 2017): @erdemontas where exactly do you want it added?
Author
Owner

@erdemontas commented on GitHub (Jun 8, 2017):

@brendanvanbreda to main screen. When you first enter to 192.168.4.1 you see 4 button
Configure Wifi
Configure Wifi(no scan)
Info
Reset

I want to have another button in this page. I also tried to change template.h and wifimanager.cpp in the library folder but It still shows the same screen.
PS: I successfully added two parameter with using custom parameter functions but thats not exactly what I want and this is the code I'm using

#include <FS.h> 
 #include <ArduinoJson.h>
#include <WiFiManager.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <PietteTech_DHT.h>     //https://github.com/chaeplin/PietteTech_DHT-8266

//default values of temperatures
char tempMin[3]= "18";  
char tempMax[3] = "30";
float f_tempMin=0.0;
float f_tempMax=0.0;

const int buzzer = 12;
///-----------DHT Initalization

#define DHTPIN 4 // what pin DHT is connected to
#define DHTTYPE DHT11 // DHT 11
//declaration
void dht_wrapper(); // must be declared before the lib initialization

PietteTech_DHT DHT(DHTPIN, DHTTYPE, dht_wrapper);
bool bDHTstarted;       // flag to indicate we started acquisition
void dht_wrapper() {
  DHT.isrCallback();
}
#define DEBUGPRINT
#ifdef DEBUGPRINT
#define DEBUG_PRINT(x)  Serial.println (x)
#else
#define DEBUG_PRINT(x)
#endif

char* topic = "nodes/battery/temp";
char* hellotopic = "nodes/register";
String clientName;
WiFiClient wifiClient;

//cloud and measurements
const char* host = "emoncms.org";
const char* nodeId   = "21";
const char* privateKey = "xxx";(I have api key in this line.)
ADC_MODE(ADC_VCC);
float h = 0;
float t = 0;
int vcc;
long startMills;
void sendData();

//----------------------------------------------------------
//flag for saving data
bool shouldSaveConfig = false;
//callback notifying us of the need to save config
void saveConfigCallback () 
{
  Serial.println("Should save config");
  shouldSaveConfig = true;
}
//------------------------------------------------------------


void setup(void)
{
  
    ESP.eraseConfig();
  pinMode(buzzer, OUTPUT);
  digitalWrite(buzzer, 0);
  startMills = millis();
  // start serial port
  Serial.begin(115200);
  Serial.println();
//SPIFFS.format();
//------------------File System---------------
  Serial.println("mounting FS...");
  if (SPIFFS.begin()) {
    Serial.println("mounted file system");
    if (SPIFFS.exists("/config.json")) {
      //file exists, reading and loading
      Serial.println("reading config file");
      File configFile = SPIFFS.open("/config.json", "r");
      if (configFile) {
        Serial.println("opened config file");
        size_t size = configFile.size();
        // Allocate a buffer to store contents of the file.
        std::unique_ptr<char[]> buf(new char[size]);

        configFile.readBytes(buf.get(), size);
        DynamicJsonBuffer jsonBuffer;
        JsonObject& json = jsonBuffer.parseObject(buf.get());
        json.printTo(Serial);
        if (json.success()) {
          Serial.println("\nparsed json");

          //First Way
          strcpy(tempMin, json["tempMin"]);
          strcpy(tempMax, json["tempMax"]);

          //Second Try
//          tempMin = json["tempMin"];
//          tempMax = json["tempMax"];
          
        } else {
          Serial.println("failed to load json config");
        }
      }
    }
  } else {
    Serial.println("failed to mount FS");
  }
  //end read

  
  //--------------------Added Parameters-----------------

  WiFiManagerParameter custom_tempMin("tempMin", "Enter Min Temp", NULL, 5);
  WiFiManagerParameter custom_tempMax("tempMax", "Enter Max Temp", NULL, 5);
  

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

  WiFiManager wifi; //starts wifi
  wifi.resetSettings(); //reset wifi
  wifi.setSaveConfigCallback(saveConfigCallback); //set config save notify callback
  wifi.setTimeout(120); //so if it restarts and router is not yet online, it keeps rebooting and retrying to connect
  wifi.addParameter(&custom_tempMin);
  wifi.addParameter(&custom_tempMax);
 

  if (!wifi.autoConnect("tempSens")) {
    DEBUG_PRINT("timeout - going to sleep");
    DEBUG_PRINT(millis() - startMills);
    //Wifi'ye bağlanamazsa deep sleep'e alıyor kendini.
    
    delay(2000);
    //sleep and try again
    //Sleep Time = Second * 1000000
    Serial.println("Birinci Deep sleep");
    ESP.deepSleep(1 * 60 * 1000 * 1000);
    delay(1000);
  }

  DEBUG_PRINT(millis() - startMills);
  //-------
  //setup hardware


 
  //read updated parameters
  strcpy(tempMin, custom_tempMin.getValue());
  strcpy(tempMax, custom_tempMax.getValue());

Serial.println("Min sicaklik değeri");
Serial.println(tempMin);
Serial.println("Max sicaklik değeri");
Serial.println(tempMax);
  
  //----------------------------Save the custom parameters to FS---------
  if (shouldSaveConfig) {
    Serial.println("saving config");
    DynamicJsonBuffer jsonBuffer;
    JsonObject& json = jsonBuffer.createObject();
    json["tempMin"] = tempMin;
    json["tempMax"] = tempMax;
    
    File configFile = SPIFFS.open("/config.json", "w");
    if (!configFile) {
      Serial.println("failed to open config file for writing");
    }

    json.printTo(Serial);
    json.printTo(configFile);
    configFile.close();
    //end save

    f_tempMin=atof(tempMin);
    f_tempMax=atof(tempMax);
  }

}

void loop(void)
{

  vcc = ESP.getVcc();//readvdd33();
  // original loop

  DEBUG_PRINT(millis() - startMills);

  DEBUG_PRINT("Requesting temperatures...");
  int acquireresult;

  //read twice as the first result is cached from last time. suggested by @chaeplin
  delay(2000);
  DHT.acquireAndWait(100);
  delay(2000);
  acquireresult = DHT.acquireAndWait(100);

  if ( acquireresult == 0 ) {
    t = DHT.getCelsius();
    Serial.println(t);
    h = DHT.getHumidity();
    Serial.println(h);


 //----------------Buzzer Function--------
 
  if (t < f_tempMin || t>f_tempMax)
  {
    Serial.println("Buzzer Öttü");
    for (int i = 0; i < 1; i++) {
      digitalWrite(buzzer, HIGH);
      Serial.println("BUZZ");
      delay(2000);
      digitalWrite(buzzer, LOW);
      delay(1000);
    }
  }
//----------------------------------------
   

    Serial.println("Buzzerdan çıktı");
    delay(100);
    sendData();
    DEBUG_PRINT("DONE");
  } else {
    t = h = 0;
    DEBUG_PRINT("Failed");

  }
  //Bağlantı başarılı olduktan sonraki sleep fonksiyonu
  DEBUG_PRINT(millis() - startMills);
  DEBUG_PRINT("Going to sleep");
  delay(250);
  //Sleep Time = Second * 1000000
  Serial.println("İkinci Deep sleep");
  ESP.deepSleep(2 * 60 * 1000 * 1000);
  //ESP.deepSleep(60 * 1000 * 1000);
  delay(1000);
}


void sendData() {
  DEBUG_PRINT("connecting to ");
  DEBUG_PRINT(host);

  WiFiClient emoClient;

  const int httpPort = 80;
  if (!emoClient.connect(host, httpPort)) {
    DEBUG_PRINT("connection failed");
    return;
  }

  String json = "{temperature:";
  json += t;
  json += ",humidity:";
  json += h;
  json += ",vcc:";
  json += vcc;
  json += "}";

  String url = "/input/post.json?node=";
  url += nodeId;
  url += "&apikey=";
  url += privateKey;
  url += "&json=";
  url += json;

  DEBUG_PRINT("Requesting URL: ");
  DEBUG_PRINT(url);

  // This will send the request to the server
  emoClient.print(String("GET ") + url + " HTTP/1.1\r\n" +
                  "Host: " + host + "\r\n" +
                  "Connection: close\r\n\r\n");

  //  emoClient.print(String("POST")
  //  /update HTTP/1.0\r\nConnection: close\r\nHost: api.thingspeak.com\r\nX - THINGSPEAKAPIKEY: ULU1FUAJLDCM31T0\r\nContent-Type: application/x-www-form-urlencoded\r\nContent-Length: "+url+"\r\n\r\n";
  delay(10);

  // Read all the lines of the reply from server and print them to Serial
  while (emoClient.available()) {
    String line = emoClient.readStringUntil('\r');
    DEBUG_PRINT(line);
  }

  DEBUG_PRINT();
  DEBUG_PRINT("closing connection");

}
<!-- gh-comment-id:307016807 --> @erdemontas commented on GitHub (Jun 8, 2017): @brendanvanbreda to main screen. When you first enter to 192.168.4.1 you see 4 button Configure Wifi Configure Wifi(no scan) Info Reset I want to have another button in this page. I also tried to change template.h and wifimanager.cpp in the library folder but It still shows the same screen. PS: I successfully added two parameter with using custom parameter functions but thats not exactly what I want and this is the code I'm using ``` #include <FS.h> #include <ArduinoJson.h> #include <WiFiManager.h> #include <ESP8266WiFi.h> #include <WiFiClient.h> #include <DNSServer.h> #include <ESP8266WebServer.h> #include <PietteTech_DHT.h> //https://github.com/chaeplin/PietteTech_DHT-8266 //default values of temperatures char tempMin[3]= "18"; char tempMax[3] = "30"; float f_tempMin=0.0; float f_tempMax=0.0; const int buzzer = 12; ///-----------DHT Initalization #define DHTPIN 4 // what pin DHT is connected to #define DHTTYPE DHT11 // DHT 11 //declaration void dht_wrapper(); // must be declared before the lib initialization PietteTech_DHT DHT(DHTPIN, DHTTYPE, dht_wrapper); bool bDHTstarted; // flag to indicate we started acquisition void dht_wrapper() { DHT.isrCallback(); } #define DEBUGPRINT #ifdef DEBUGPRINT #define DEBUG_PRINT(x) Serial.println (x) #else #define DEBUG_PRINT(x) #endif char* topic = "nodes/battery/temp"; char* hellotopic = "nodes/register"; String clientName; WiFiClient wifiClient; //cloud and measurements const char* host = "emoncms.org"; const char* nodeId = "21"; const char* privateKey = "xxx";(I have api key in this line.) ADC_MODE(ADC_VCC); float h = 0; float t = 0; int vcc; long startMills; void sendData(); //---------------------------------------------------------- //flag for saving data bool shouldSaveConfig = false; //callback notifying us of the need to save config void saveConfigCallback () { Serial.println("Should save config"); shouldSaveConfig = true; } //------------------------------------------------------------ void setup(void) { ESP.eraseConfig(); pinMode(buzzer, OUTPUT); digitalWrite(buzzer, 0); startMills = millis(); // start serial port Serial.begin(115200); Serial.println(); //SPIFFS.format(); //------------------File System--------------- Serial.println("mounting FS..."); if (SPIFFS.begin()) { Serial.println("mounted file system"); if (SPIFFS.exists("/config.json")) { //file exists, reading and loading Serial.println("reading config file"); File configFile = SPIFFS.open("/config.json", "r"); if (configFile) { Serial.println("opened config file"); size_t size = configFile.size(); // Allocate a buffer to store contents of the file. std::unique_ptr<char[]> buf(new char[size]); configFile.readBytes(buf.get(), size); DynamicJsonBuffer jsonBuffer; JsonObject& json = jsonBuffer.parseObject(buf.get()); json.printTo(Serial); if (json.success()) { Serial.println("\nparsed json"); //First Way strcpy(tempMin, json["tempMin"]); strcpy(tempMax, json["tempMax"]); //Second Try // tempMin = json["tempMin"]; // tempMax = json["tempMax"]; } else { Serial.println("failed to load json config"); } } } } else { Serial.println("failed to mount FS"); } //end read //--------------------Added Parameters----------------- WiFiManagerParameter custom_tempMin("tempMin", "Enter Min Temp", NULL, 5); WiFiManagerParameter custom_tempMax("tempMax", "Enter Max Temp", NULL, 5); //------------------------------------------------------ WiFiManager wifi; //starts wifi wifi.resetSettings(); //reset wifi wifi.setSaveConfigCallback(saveConfigCallback); //set config save notify callback wifi.setTimeout(120); //so if it restarts and router is not yet online, it keeps rebooting and retrying to connect wifi.addParameter(&custom_tempMin); wifi.addParameter(&custom_tempMax); if (!wifi.autoConnect("tempSens")) { DEBUG_PRINT("timeout - going to sleep"); DEBUG_PRINT(millis() - startMills); //Wifi'ye bağlanamazsa deep sleep'e alıyor kendini. delay(2000); //sleep and try again //Sleep Time = Second * 1000000 Serial.println("Birinci Deep sleep"); ESP.deepSleep(1 * 60 * 1000 * 1000); delay(1000); } DEBUG_PRINT(millis() - startMills); //------- //setup hardware //read updated parameters strcpy(tempMin, custom_tempMin.getValue()); strcpy(tempMax, custom_tempMax.getValue()); Serial.println("Min sicaklik değeri"); Serial.println(tempMin); Serial.println("Max sicaklik değeri"); Serial.println(tempMax); //----------------------------Save the custom parameters to FS--------- if (shouldSaveConfig) { Serial.println("saving config"); DynamicJsonBuffer jsonBuffer; JsonObject& json = jsonBuffer.createObject(); json["tempMin"] = tempMin; json["tempMax"] = tempMax; File configFile = SPIFFS.open("/config.json", "w"); if (!configFile) { Serial.println("failed to open config file for writing"); } json.printTo(Serial); json.printTo(configFile); configFile.close(); //end save f_tempMin=atof(tempMin); f_tempMax=atof(tempMax); } } void loop(void) { vcc = ESP.getVcc();//readvdd33(); // original loop DEBUG_PRINT(millis() - startMills); DEBUG_PRINT("Requesting temperatures..."); int acquireresult; //read twice as the first result is cached from last time. suggested by @chaeplin delay(2000); DHT.acquireAndWait(100); delay(2000); acquireresult = DHT.acquireAndWait(100); if ( acquireresult == 0 ) { t = DHT.getCelsius(); Serial.println(t); h = DHT.getHumidity(); Serial.println(h); //----------------Buzzer Function-------- if (t < f_tempMin || t>f_tempMax) { Serial.println("Buzzer Öttü"); for (int i = 0; i < 1; i++) { digitalWrite(buzzer, HIGH); Serial.println("BUZZ"); delay(2000); digitalWrite(buzzer, LOW); delay(1000); } } //---------------------------------------- Serial.println("Buzzerdan çıktı"); delay(100); sendData(); DEBUG_PRINT("DONE"); } else { t = h = 0; DEBUG_PRINT("Failed"); } //Bağlantı başarılı olduktan sonraki sleep fonksiyonu DEBUG_PRINT(millis() - startMills); DEBUG_PRINT("Going to sleep"); delay(250); //Sleep Time = Second * 1000000 Serial.println("İkinci Deep sleep"); ESP.deepSleep(2 * 60 * 1000 * 1000); //ESP.deepSleep(60 * 1000 * 1000); delay(1000); } void sendData() { DEBUG_PRINT("connecting to "); DEBUG_PRINT(host); WiFiClient emoClient; const int httpPort = 80; if (!emoClient.connect(host, httpPort)) { DEBUG_PRINT("connection failed"); return; } String json = "{temperature:"; json += t; json += ",humidity:"; json += h; json += ",vcc:"; json += vcc; json += "}"; String url = "/input/post.json?node="; url += nodeId; url += "&apikey="; url += privateKey; url += "&json="; url += json; DEBUG_PRINT("Requesting URL: "); DEBUG_PRINT(url); // This will send the request to the server emoClient.print(String("GET ") + url + " HTTP/1.1\r\n" + "Host: " + host + "\r\n" + "Connection: close\r\n\r\n"); // emoClient.print(String("POST") // /update HTTP/1.0\r\nConnection: close\r\nHost: api.thingspeak.com\r\nX - THINGSPEAKAPIKEY: ULU1FUAJLDCM31T0\r\nContent-Type: application/x-www-form-urlencoded\r\nContent-Length: "+url+"\r\n\r\n"; delay(10); // Read all the lines of the reply from server and print them to Serial while (emoClient.available()) { String line = emoClient.readStringUntil('\r'); DEBUG_PRINT(line); } DEBUG_PRINT(); DEBUG_PRINT("closing connection"); } ```
Author
Owner

@brendanvanbreda commented on GitHub (Jun 8, 2017):

@erdemontas have a look at the functions WiFiManager::handleWifiSave() and WiFiManager::handleWifiSave(). If you understand how the ESP8266 generates and serves the web pages. You need to create something similar and include these inside the WiFiManager::setupConfigPortal() in the setup web pages sections in this function inside the WifiManager.cpp. You can move the parameter generation part from the WiFiManager::handleWifi() to your new function and you should be able to view this as a new button once you edit the WifiManager.h HTTP_PORTAL_OPTIONS[] to add a new button. I have this working on my own implementation.

Quite a bit of extra code needs to be added in order to be able to do this but it can be done.

Good Luck

<!-- gh-comment-id:307241689 --> @brendanvanbreda commented on GitHub (Jun 8, 2017): @erdemontas have a look at the functions `WiFiManager::handleWifiSave()` and `WiFiManager::handleWifiSave()`. If you understand how the ESP8266 generates and serves the web pages. You need to create something similar and include these inside the `WiFiManager::setupConfigPortal()` in the setup web pages sections in this function inside the WifiManager.cpp. You can move the parameter generation part from the `WiFiManager::handleWifi()` to your new function and you should be able to view this as a new button once you edit the WifiManager.h `HTTP_PORTAL_OPTIONS[]` to add a new button. I have this working on my own implementation. Quite a bit of extra code needs to be added in order to be able to do this but it can be done. Good Luck
Author
Owner

@oscarmoutinho commented on GitHub (Jul 26, 2017):

I wanted to use only the wifi config page without modifying the core, so I added:
wifiManager.setCustomHeadElement("");
So the wifi config page is shown (/wifi[?...]) and save page (/wifisave) is not blocked.
You may explore this approach.

<!-- gh-comment-id:317908593 --> @oscarmoutinho commented on GitHub (Jul 26, 2017): I wanted to use only the wifi config page without modifying the core, so I added: wifiManager.setCustomHeadElement("<script>if (window.location.href.indexOf(\"/wifi\")<0) {window.location=\"/wifi\"};</script>"); So the wifi config page is shown (/wifi[?...]) and save page (/wifisave) is not blocked. You may explore this approach.
Author
Owner

@tablatronix commented on GitHub (Aug 27, 2017):

Hooks will be added if they do not already exist

<!-- gh-comment-id:325169172 --> @tablatronix commented on GitHub (Aug 27, 2017): Hooks will be added if they do not already exist
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/WiFiManager#313
No description provided.