Introduction: EmbedUI - a UI Development Tool for Everyone
EmbedUI is an open-source project, for enthusiasts to speed up & visualize UI development using Embedded Devices.
EmbedUI makes UI Development simpler & faster for Embedded Devices without the need for any additional display hardware.
It utilizes your Laptop/PC Display Screen to generate the required UI for your application. An excellent way to get your UI developed & running, so that you can focus on your application & speed up things.
It’s simple, fast & amazing !! So let's dive into it.
Before getting started make sure you check the following.
Things you need:
1) Any Micro-controller board supporting Arduino IDE with at least 4kB of SRAM.
2) Your Laptop/PC.
3) That's all !!
Step 1: Let's Get Started
You can visit the official website for EmbedUI at: embedui.github.io
The official documentation for EmbedUI Library is available at: embedui.github.io/documentation
I would suggest you check the documentation for references of the functions implemented in the library.
To start using the EmebedUI, you'll need to set up two things.
1) You need to download & install the latest release of the EmbedUI Application from: https://github.com/EmbedUI/EmbedUI-App/releases.
(macOS users should download '.dmg' application, while Windows users should download '.exe' application)
(You may get warnings from your browser after download or from Windows Smart Screen while installation. You need to allow the permissions & install it)
2) You need to download & install the EmbedUI Library in Arduino IDE. You can get it from: https://github.com/EmbedUI/EmbedUI-Library
After you finish installing both of them, open any example code of your choice from the examples section of Arduino IDE & upload it to your board.
We are good to go.
Step 2: Application Installation Notes (Windows & MacOS)
The EmbedUI - Windows Application is currently not signed. Due to this Windows Smart Screen blocks it. However, this won't affect any functionality of the application.
Being an open-source project, it is difficult to get the Application signed due to its high cost. Suggestions & support are always welcomed. I would appreciate suggestions for a workaround on this.
Coming back to the point, it's a one-time approval that you need to provide to the installer of the EmbedUI Application while you install. Refer to the attached images for more info.
You can choose the installation path as per your choice.
Once installed, you'll find the application in the Start Menu & on your Desktop (Windows users).
macOS users may find it in the installed applications, after installing the application.
After this, for any future updates or new releases, you won't need to re-install the application, as it supports the in-app auto-update feature.
Step 3: Awesome Examples & Tests
The attached images & videos show some test samples for the Library & Application.
The library has two awesome examples in it. Give them a try to understand how you can use the library for your purpose.
- The Getting Started Example guides you through the various features & concepts of EmbedUI. You can check out the code and build/modify it to give it a new look
- The Weather Dashboard Example is a great use case where you can apply EmbedUI for visualization. It needs an ESP32 / ESP8266, to begin with. You need to register yourself on https://openweathermap.org (OpenWeatherMap) and get an API key.
I'm planning to add more examples to the library in future releases considering various applications of the library.
Most probably planning to add some of the best example built by the open-source community in near future.
You can contribute to it too. Build an example of your choice and share it or email me at: email@example.com. The best ones will surely be added to the official library examples.
Step 4: About the Applicaton
The generation of UI is derived from modern HTML interfaces. Thus, making it possible to use the advanced features of web elements with any microcontroller.
An additional feature of the application is that the UI updates can be performed without refreshing the complete page / other elements. Supports high-level elements & properties such as images, videos, transitions, font-styling, events without the need for a high-end microcontroller.
Currently, the Application is supported on Windows & macOS.
Linux Build is under development & will be released soon. Follow this project on GitHub to stay updated.
Also, you can follow my Instagram page, to get the latest updates on the new features as I incorporate them. (I'm more active on Instagram :-p)
Features of the Application:
- Objects based User Interface (UI) design & control
- Graphics have no dependency on the Microcontroller now. You can do a lot of different tasks on your controller now.
- Objects can be altered with respect to their positions & properties, at any given point in time
- Continuous control of objects is not required for applying motion to the object. (Refer to the Getting started example to explore)
- Removes the dependency on the flash memory of the controller for drawing elements. You can now load high-res images & videos in an extremely easy manner without thinking of the frame rate & memory required. (Everything depends on your laptop/pc specifications now)
- Hi-Resolution Support. No dependency of Screen Resolution on the memory of the controller. You can control & load graphics on a 1920x1080 pixels monitor using an Arduino Mega with using under 2kB of RAM.
- Supports Responsive design of UI. This enables users to develop one UI for multiple screen sizes. (Refer the Weather Dashboard example for more info)
- High speed of communication up to 921600 baud (Planned future update: Wireless Control of UI through Wi-Fi)
- Best for prototyping & hobby projects. Provides simplicity for educational purposes too.
I'm constantly working on the software to incorporate many new features in every new release. The list of all the features supported through the hardware library can be found at: embedui.github.io/documentation
Step 5: About the Library
The current Library is built with a target to work with all Arduino Boards. Written in C/C++. The API documentation will be released out soon to support other languages too.
The Arduino Library has to be manually installed into the Arduino IDE. For more detailed instructions on how to install the library in Arduino IDE, you can check out this official documentation: https://www.arduino.cc/en/guide/libraries
Features of the Library:
- Supports multiple boards that support Arduino IDE
- Supports Text, Shapes, Fonts, Events, Transitions, Images, Videos & much more
- Currently, uses Hardware Serial for Communication with the UI.
- Simple functions with parameter-based object generation in the UI.
- Planned Future Library Update: to Support communication over Network/WiFi
Step 6: Community Support
"The power of Open Source is the power of the people. The people rule."
That's absolutely true. And it's much powerful when people become a part of it.
EmbedUI needs support for getting much stronger. And this can be made possible only when you decide to be a part of it.
You don't need to be a professional developer/coder to jump in. You can jump in, right now, right here!
Thinking how you can?
Your reviews, requests, and outputs are extremely useful & important for improving EmbedUI.
You can support me in this initiative by:
> Contributing to Application Development & Improvements
> Contributing to develop & improve Arduino Library
> Creating, experimenting & adding more new examples to the library
> Testing Library functionalities, Bug Reporting, Feature Suggestions & much more
> Making it reach to the many who might be helped/assisted, by sharing it.
> or by Buying me a coffee :-)
Well, that's for now. Stay tuned for more !!
Thanks for passing by :-)