Giter Site home page Giter Site logo

espwebconfig's Introduction

ESPWebConfig

Arduino web based configuration library for the ESP8266 chip.

Wifi parameters (ssid and password) are configured in a web interface. When configured, the device automatically connects to wifi, that way you do not need ssid and password in your program.

  • At first boot it will act as a Wifi access point
  • Connect to the access point with a phone or laptop
  • Go to the web page 192.168.4.1
  • Fill in the SSID and password in the web form and submit it
  • After reboot the device will connect to the network

Example: BasicESPWebConfig

The most basic example, only configures wifi in setup.

ESPWebConfig espConfig;

setup() {
  // Read config and set up wifi.
  // If no config (first boot), this function will block, set up an access point and serve config web UI.
  espConfig.setup();

  // Configuration is read and wifi connected.
}

Connect to AP to configure Connect to AP to configure

In this example a wifi client is making a call and printing the result to Serial output.

Configuration done! 192.168.1.90
Test wifi connection
Google responded with code 301

Example CustomESPWebConfig

Besides wifi, this example configures four other parameters. The values of these extra parameters are accessible from your normal code. The values are always of type "const char *".

Create custom variables

Add them as an array of strings to the constructor:

const char* GREETING_KEY = "Greeting*";
const char* NAME_KEY = "Name";
const char* DATE_KEY = "Date*|date";
const char* CHECK_KEY = "Check|checkbox";

ESPWebConfig espConfig("configpass", "Message", {GREETING_KEY, NAME_KEY, DATE_KEY, CHECK_KEY});

Get the value of a parameter

After config you can read the variables with the same key you defined in the setup:

const char* greeting = espConfig.getParameter(GREETING_KEY);

HTML formatting

Apart from the parameter name you can also set "mandatory" and "html form input type".

To mark a parameter as mandatory, simply add an asterix in the end.

To set input type use the name|type notation, where name will be the label in the html form and type will be used as the input type. There is no check that the type is valid or useful, it will just set type="type" in the HTML-code. Simple types like date, password and url works great. Other typwes like "radio" doesn't make sense, it requires more stuff in the html code to work.

Connect to AP to configure

Connect to AP to configure

espwebconfig's People

Contributors

mnomn avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

seco

espwebconfig's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.