Build a web control panel for your project - HTML and JavaScript coding

Using a Wi-Fi enabled microcontroller allows you to connect with a full graphic user interface to control and monitor your project. In this series we've been looking at how to set up the connection and run a web server with full API capability. In this tutorial I'll show you how to code the web page and build the controls and displays.

Make sure you check out my main website for full details and project resources.

The code for this tutorial is at

0:00 Introduction
2:02 System overview
3:56 Demo circuit
5:37 Code explanation
24:44 Testing the code
26:38 More complex control panel

[michelpoisson]

Cristal clear explanations, as you usually gives. I invested a lot of time to assimilate all those pretty interesting topics from your 3 last videos. So it's easy to guess, how much time you spent, to gather all those information in a comprehensive format and to stream it on videos. Congratulations & Thank you.

[gearscodeandfire]

I picked the right month to search (no joke), “async micropython web server.” I’ve been binging your stuff for a couple hours now- thank you and bravo!

[tiagdvideo]

Absolutely brilliant - just what I need.
Will cycle back and look through all of your videos.

[johncutler]

Thank you for finishing this great series. You have taught me a lot and your efforts are much appreciated

[dougblanding]

Bob, what a FANTASTIC job you have done in bringing all this information together and explaining it so well! Thank you so much. All your code and examples work flawlessly. 😀
As you have suggested, my next step will be to dig into the jquery and bootstrap packages to learn more about their capabilities. I am hoping to be able to find a virtual joystick I can use to control a Pico car project I have built. It's just exhilarating to be able to contemplate (and hopefully accomplish) such cool projects using MicroPython running on a cheap Pico. Again, a huge thanks to you!

[pankajbande]

Super great stuff, its working for me and the way you explain it, You are a great Teacher

[dalesmith]

Very impressive, and educational.
As I did state in my other comments, (other video), unfortunately Python is not for me, BUT, I must say, your approach and work gives me plenty to think about. Thumbs up!
The only issue for me, is deciding the right approach to execute my application. Regards, Dale.
Something tells me that you either teach, Collège, University, or have a degree in Computer/software Engineering!
Wondering any chance that you may be a "radio Amateur?"
Nice piece of work!!!!

Sorry to bring this up, BUT, would be nice if you could duplicate this series, using C/C++! LOL!

[dalesmith]

I'm trying to make sense of the "gauges" on the page. Is the code to display them in "gauge.min.js"? and if so, why is the source all in on a straight line, and not printed as a regular source page? Makes it hard to make changes. used Notepad++ (one line), and Visual Studio code, all over the place! What am I missing here?
At 5:39 you are using some kind of an editor? Can't make it out.

[dralikg]

Thank you for the amazing video! I have a hobby project that I'd like to discuss here. The objective is to use a microcontroller to read MIDI files from an SD card. It will receive MIDI commands and music data (chords) from an external source, such as a MIDI keyboard, via MIDI USB input. The microcontroller will then analyze the data, transpose and modify the MIDI track data accordingly, and finally play it back through the MIDI USB output to the external MIDI keyboard without delay on the Music and interactively. An LCD will display relevant information, such as the file name for selection. The user interface will solely rely on the buttons on the MIDI keyboard, eliminating the need for additional buttons. now the question is What is the minimum recommended microcontroller board capable of handling this project?

[howardbassen]

This is very interesting, and is just what I've been looking for. However I am confused about how to string together all of the code segments on your github site. Is there a single file or some text to guide me?

[walter.hrnndz]

Is it possible to add compatibility for the Ethernet modules?