Giter Club home page Giter Club logo

wifimanagergui's Introduction

##WiFiManagerGUI An ESP8266 / OLED display project for connecting to an Access Point using a GUI.


##Background There are numerous articles, projects and libraries that set the ESP8266 into Access Point mode allowing you to connect and configure an SSID and password before restarting the device in Station mode. These are great but what if you actually have a display attached to the device? Why can't the device attempt to connect to previously saved settings and if this fails, allow the user to select an Access Point and enter a pasword using a GUI?

I have used a number of screens on the Arduino but wanted this project to be compatible with the small 128x64 pixel OLED displays that have become very popular and cheap to buy. I also wanted to keep the input as simple as possible and settled on 5 buttons - 4 for movement (up, down, left and right) and one for selecting options.

The inspiration for this project came from two separate GitHub projects :

##In Operation

When the ESP8266 first starts it will attempt to connect to any existing SSID stored in the EEPROM using the credentials it retrieves. If this connection fails, it will then prompt the user to select an Access Point, enter a password and then connect to the WiFi. If a successful connection is made, control passes to your application otherwise the user is prompted to confirm the Access Point and / or password.

Select an Access Point ..

Select an Access Point

Enter a Password ..

Enter a Password

Hopefully your connection will succeed, otherwise you may see this message ..

Connect



##My Prototype

I built my prototype using some bits and pieces following the schematic shown below. The five buttons required to control the screen are connected to the ESP8266 via the ADC input freeing up the digital I/O pins for other tasks. Resistor 5 is included to form a voltage divider and split the 3.3V into (approximately) 2.3V and 1.0V as the ADC will return a value between 0 and 1023 for voltage inputs between 0V and 1.0V. Before you ask, I used the resistors I had available and they do not produce a nice spread of values. One of my tasks is to work out the correct values and alter the constants in the application accordingly.

Schematic


##About the Code

  • the code is thoroughly documented the code - well as thoroughly as any developer does
  • all constants have been pulled out into #define values where appropriate
  • the code details a well defined state machine and shows how to control movement through the various connection screens and then into your own application (refer details in the code itself)
  • the code includes detailed debugging which can be turned on or off in its entirety or in certain parts of the code only via a hierarchy #define structure (refer details in the code itself)


##Task List

The following is a list of tasks that need to be done, may be done and could possibly be done by myself or with the help of others. I am not precious about the code and would prefer to see it completed than to sit idle ..

  • Publish initial code on GitHub
  • More testing (obvious)
  • Determine some appropriate resistor sizes that provide the broadest input values (between 0 - 1023, the resistors I used provide a narrow range between 110 and 330 resulting in some errors).
  • Harden the handling of the input buttons - debounce, etc
  • Support input via the digital inputs using a matrix
  • Support displays of different resolutions
  • Support I2C and SPI communication to OLED
  • Support three buttons (left, right and select only) operation



##Confessions This is my first GitHub project. Go easy on me.

wifimanagergui's People

Contributors

filmote avatar

Stargazers

 avatar  avatar

Watchers

 avatar

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.