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

Подписаться 30 тыс.

Просмотров 5 тыс.

50% 1

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.
bytesnbits.co.uk/web-control-...
The code for this tutorial is at
github.com/getis/micropython-...
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

Опубликовано:

22 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@michelpoisson3500 Год назад

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.

@BytesNBits Год назад

My pleasure!

@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!

@BytesNBits Год назад

Glad to help!

@tiagdvideo Год назад

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

@BytesNBits Год назад

Great. Glad it's helped you.

@pankajbande1 3 месяца назад

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

@BytesNBits 3 месяца назад

Glad to help!

@johncutler5995 Год назад

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

@BytesNBits Год назад

No problem. I hope you found it useful.

@dougblanding8791 Год назад

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!

@BytesNBits Год назад

Great to hear you've got it all working. Good luck with the car project.

@davidsuzukiispolpot Год назад

Thank you for a great tutorial!

@BytesNBits Год назад

No problem. I hope it helps.

@umutkayacan7659 Год назад

Interesting video!

@BytesNBits Год назад

Thanks.

@yahmk3978 Год назад

Thank you!

@BytesNBits Год назад

You're welcome!

@dalesmith8666 5 месяцев назад

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!

@BytesNBits 5 месяцев назад

Thanks again! I will be doing some work in C++ on the ESP32 in a while. Look out for that. My background and degree are in electronic and systems engineering though I did teach physics for a while at a secondary school. Web application software these days.

@dalesmith8666 5 месяцев назад

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.

@BytesNBits 5 месяцев назад

guage.min.js is the actual library file for the guage code. It in minimised form so all one line and totally un readable. You don't really want to be editing this file. The code that displays the guages in in my source code files and uses the library code to make it work. I use PyCharm for my Python coding - i highly recommend it. Look for the free community edition. Have fun!

@dralikg6885 Год назад

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?

@BytesNBits Год назад

That sounds like a great project. I'd say that any of the more powerful microcontroller boards would cope with that (Pi Pico, ESP32 etc). The Arduino range probably won't until you get to the more powerful boards. I suspect with a microcontroller board you'll want to stick to C++ rather than MicroPython just to keep the processing speed up - MicroPython does run a lot slower. Your main choice decision I guess will be based on the IO you need. SD card and screen will need an SPI channel, then 2?? USB ports. You'll need to be careful that the SD card reading and screen writing don't stall the MIDI communications and cause timing delays. I'd advise going for the most powerful microcontroller to begin with so you don't run out of processing power and then work out how much leaway you've got.

@dralikg6885 Год назад

@@BytesNBits Thanks for the advice!

@dralikg6885 Год назад

@@BytesNBits According to your advice, I will go for the Raspberry Pi Pico with C++. It provides me with two SPI channels and sufficient processor power to ensure smooth code execution. I was initially considering the Teensy, but I almost forgot about the Raspberry Pi Pico. Thank you once again for your valuable advice!

@BytesNBits Год назад

@@dralikg6885 No problem. I hope the project goes well.

@walter.hrnndz Год назад

Is it possible to add compatibility for the Ethernet modules?

@BytesNBits Год назад

I can't see why not but there will be an amount of coding to interface it all together. The web server in this tutorial is hooked into the WiFi interface, but the ethernet module should provide some sort of connection you can tie in to. If you can get a web server running through the ethernet module then the rest will be as in this tutorial.

@walter.hrnndz Год назад

I have set up a small system using the Raspberry Pi Pico as the master on a Modbus bus, and I wanted to create a REST API to control it and read its status through the web. While searching for examples, I came across your channel, and I'm going to try implementing the Ethernet connection. Thank you for your response. Best regards!