Close
0%
0%

ESP8266 Project Template with UI

Don't know where to start with a ESP8266 Project? Use ESP8266-MyWidget as a learning tool or template for starting a new ESP8266 project.

Similar projects worth following
Don't know where to start with a ESP8266 Project?

ESP8266-MyWidget is for you!

This project can be used as a learning tool or as a template for starting a new ESP8266 project. It contains many of the components to build a ESP8266 project with web interface.

This project includes:

ESP8266 Development
mDNS - multicast DNS (mywidget.local)
Asynchronous Web Server (ESPAsyncWebServer)
Asynchronous Web Services (ESPAsyncWebServer)
Asynchronous MQTT (PangolinMQTT)
LittleFS File System
Embedded Bootstrap (3.4.1)
Embedded jquery (3.5.1)
Save/Load Config File (text)
OTA (Over the Air) Updates
HTTP API Supports HTTP GET/POST
Auto Updating Web Site (Web Services using JS)
Multiple Interrupt Timers (ESP8266TimerInterrupt)
Flash Onboard LED Using Interrupt Timer
Plus much more...

ESP8266-MyWidget

This project can be used as a learning tool or as a template for starting a new ESP8266 project. It contains many of the components to build a ESP8266 project with web interface.
This demo includes:
  • ESP8266 Development
  • mDNS - multicast DNS (mywidget.local)
  • Asynchronous Web Server (ESPAsyncWebServer)
  • Asynchronous Web Services (ESPAsyncWebServer)
  • Asynchronous MQTT (PangolinMQTT)
  • LittleFS File System
  • Embedded Bootstrap (3.4.1)
  • Embedded jquery (3.5.1)
  • Save/Load Config File (text)
  • OTA (Over the Air) Updates
  • HTTP API Supports HTTP GET/POST
  • Auto Updating Web Site (Web Services using JS)
  • Multiple Interrupt Timers (ESP8266TimerInterrupt)
  • Flash Onboard LED Using Interrupt Timer
  • Plus much more...

History

I purchased several ESPixelSticks from Amazon for my synchronized LED Christmas light display. After using the ESPixelSticks, I became interested in how the ESP8266 worked and how to program it. So I began to review the ESPixelStick source code and the specifications of the ESP8266. It didn't take long to find out there is an add-on for the Arduino IDE that allows you to program the ESP8266 using the Arduino IDE and its programming language. A few years back, I had created some simple projects using Arduino UNO R3 and programmed using the Arduino IDE. Since I was already familiar with the Arduino IDE, I started by modifying some of the simple examples and playing with different libraries. I wasn't very interested in the low level hardware or interfacing to a sensor/module but I was more interested in an interactive UI and different ways to communicate with this device. I didn't have a particular project in mind so I created ESP8266-MyWidget; A project template for ESP8266.

ESP8266-MyWidget can be used as a learning tool or as a template for starting a new ESP8266 project. I tried to incorporate many APIs that may be useful for a ESP8266 project with a web interface.

Requirements

Along with the Arduino IDE, you'll need the following software to build this project:
The following libraries are required:
Extract the folder in each of these zip files and place it in the "library" folder under your arduino environment

Features

mDNS - multicast DNS

  • Mulicast DNS allows you to use a local DNS name (mywidget.local) to access the web interface.
  • There is no need to know the local IP address obtained from the WIFI connection.
  • mDNS will resolve the IP address for you.

  • Enter the following into browser: http://mywidget.local

Web Services

  • Asynchronous
  • Supports GET and SET ACTIONS
  • Formats:
    • cmd:get:action
    • cmd:set:action
  • All requests and responses are in TEXT format.

  • GET ACTIONS

    • Uptime - Returns device uptime in milliseconds.
    • Request: ''cmd:get:uptime''
    • Response: ''cmd:get:uptime:NNNNNNNN''
      • where NNNNNNNN is the device uptime in milliseconds

    • Status - Returns status of light (0/1)
    • Request: ''cmd:get:status''
    • Response: ''cmd:get:status:N''
      • where N is "0" or "1" representing "OFF" or "ON" of light

    • Speed - Returns flash speed of onboard LED
    • Request: ''cmd:get:speed''
    • Response: ''cmd:get:speed:N''
      • where N is "1" to "4" representing representing flash speed of onboard LED

    • Config - Returns current configuration parameters. Read from /cfg.txt file.
      • Request: ''cmd:get:config''
      • Response: ''cmd:get:config:channels:ports:user1:user2''
        • where channels is NNN, ports is NN, user1 is XXXXX, user2 is XXXXXX

  • SET ACTIONS

    • Toggle - Toggles the current light from 0 to 1 or 1 to 0
    • Request: ''cmd:set:toggle''...
Read more »

  • 1 × Vemos D1 Mini

View all 4 project logs

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates