Improved UI of configuration page

[vishalroygeek]

This is a second pull request for the same update. In the previous pull request #910, I forgot to update one of the required files.

@tzapu I have applied some cool CSS to make the configuration page to look great and have some feel. I am already using it in many of my projects. Here is the preview of the same -

Those who want to apply the CSS on their existing project right now, can simply copy & paste the line below in their projects 😄

wifiManager.setCustomHeadElement("<style>body{background: #f7f5f5;}button{transition: 0.3s;opacity: 0.8;cursor: pointer;border:0;border-radius:1rem;background-color:#1dca79;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}button:hover {opacity: 1}button[type=\"submit\"]{margin-top: 15px;margin-bottom: 10px;font-weight: bold;text-transform: capitalize;}input{height: 30px;font-family:verdana;margin-top: 5px;background-color: rgb(253, 253, 253);border: 0px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);}div{color: #14a762;}div a{text-decoration: none;color: #14a762;}div[style*=\"text-align:left;\"]{color: black;}, div[class*=\"c\"]{border: 0px;}a[href*=\"wifi\"]{border: 2px solid #1dca79;text-decoration: none;color: #1dca79;padding: 10px 30px 10px 30px;font-family: verdana;font-weight: bolder;transition: 0.3s;border-radius: 5rem;}a[href*=\"wifi\"]:hover{background: #1dca79;color: white;}</style>");

[jascdk]

Hi :) a little stupid question , but how do I add the updated template to an existing project using this library ? :)

[vishalroygeek]

@jascdk Hey buddy, there is nothing like stupid question. You can see the sample code below to know how to implement this. Basically all you need is to copy & paste the line of code I mentioned in this commit 😉

#include <ESP8266WiFi.h>          
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include "WiFiManager.h"         

void configModeCallback (WiFiManager *myWiFiManager) {
  Serial.println("Entered config mode");
  Serial.println(WiFi.softAPIP());
  
  //If you used auto generated SSID, print it
  Serial.println(myWiFiManager->getConfigPortalSSID());
}

void setup() {
  Serial.begin(115200);
  
  
  //Local intialization. Once its business is done, there is no need to keep it around
  WiFiManager wifiManager;
  
  //Set callback that gets called when connecting to previous WiFi fails, and enters Access Point mode
  wifiManager.setAPCallback(configModeCallback);
  
  //The magic spell of CSS ;)
  wifiManager.setCustomHeadElement("<style>body{background: #f7f5f5;}button{transition: 0.3s;opacity: 0.8;cursor: pointer;border:0;border-radius:1rem;background-color:#1dca79;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}button:hover {opacity: 1}button[type=\"submit\"]{margin-top: 15px;margin-bottom: 10px;font-weight: bold;text-transform: capitalize;}input{height: 30px;font-family:verdana;margin-top: 5px;background-color: rgb(253, 253, 253);border: 0px;-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);}div{color: #14a762;}div a{text-decoration: none;color: #14a762;}div[style*=\"text-align:left;\"]{color: black;}, div[class*=\"c\"]{border: 0px;}a[href*=\"wifi\"]{border: 2px solid #1dca79;text-decoration: none;color: #1dca79;padding: 10px 30px 10px 30px;font-family: verdana;font-weight: bolder;transition: 0.3s;border-radius: 5rem;}a[href*=\"wifi\"]:hover{background: #1dca79;color: white;}</style>");

  //Fetches ssid and pass and tries to connect
  if(!wifiManager.autoConnect()) {
    Serial.println("Failed to connect and hit timeout");
    
    //Reset and try again, or maybe put it to deep sleep
    ESP.reset();
    delay(1000);
  } 

  //If you get here you have connected to the WiFi
  Serial.println("Connected... Yay :)");
 
}

void loop() {
  
}

[jascdk]

Hi :) thanks a lot for your kind and quick reply :) I will look into it and get back if I run into trouble 😎

[tablatronix]

Use development branch all html is in an include file

[vishalroygeek]

@jascdk You're always welcome 😁

[fundix]

nice :-) thanks

[josephshepin]

Why can't you just edit the html page in the library, I keep trying to make css changes in the html file and nothing persists in the actual result. I can't figure out why.

[tablatronix]

The file is not used, it is only for reference

[josephshepin]

Ok, I dug through the library and I can't find where the html file is generated, or comes from.the library works if I delete the .html altogether. I would rather edit the file as opposed to making overrides in the main sketch. Is it possible to just change the source of the html file? Thanks for the fast reaponse

[Daemach]

The HTML for the UI is generated in strings_en.h

…

On Mon, Oct 28, 2019 at 7:34 AM jshepin ***@***.***> wrote: Ok, I dug through the library and I can't find where the html file is generated, or comes from.the library works if I delete the .html altogether. I would rather edit the file as opposed to making overrides in the main sketch. Is it possible to just change the source of the html file? Thanks for the fast reaponse — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#919?email_source=notifications&email_token=AC7Y5YKQQCM7O23NX7YVPATQQ3Z7PA5CNFSM4IICO5UKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECNCVMY#issuecomment-546974387>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC7Y5YKMKACOJKK3V7SZMKTQQ3Z7PANCNFSM4IICO5UA> .

[connornishijima]

This mod is quite pretty, thank you!

[tablatronix]

Thanks for this, I will look at your button code, this has mostly already been done, but I think we are missing button hovers in dev