|
1 | | -# WebScreen Firmware |
| 1 | +# WebScreen |
2 | 2 |
|
3 | | -**WebScreen - Stay Connected, Stay Focused - Subscribe: https://www.crowdsupply.com/hw-media-lab/webscreen** |
| 3 | +WebScreen is an ESP32-based platform that allows users to run dynamic JavaScript applications using the Elk engine, LVGL for UI rendering, and an SD card for storing multiple JS apps. It supports secure HTTPS communication (with full chain certificates), BLE, MQTT, and more. If no JavaScript app is found on the SD card, a fallback notification app is used. |
4 | 4 |
|
5 | | -## Project Description |
| 5 | +## Features |
6 | 6 |
|
7 | | -WebScreen is an open-source project that provides firmware for a customizable secondary display that sits atop your monitor like a webcam. Powered by an ESP32-S3 microcontroller and featuring a vibrant AMOLED display, WebScreen brings essential notifications, reminders, and visuals directly into your line of sight. This repository contains the source code and instructions to build and customize your own WebScreen device. |
| 7 | +- **Dynamic JavaScript Execution** |
| 8 | + Use Elk to run user-provided JS code stored on the SD card. |
8 | 9 |
|
9 | | -## Features |
| 10 | +- **Configurable App Selection** |
| 11 | + Specify the JavaScript file to run via a JSON configuration file (`webscreen.json`). |
10 | 12 |
|
11 | | -- **AMOLED Display**: High-quality display with 240 x 536 resolution and 16.7 million colors. |
12 | | -- **ESP32-S3 Microcontroller**: Ensures smooth operation and robust performance. |
13 | | -- **Wi-Fi and Bluetooth Connectivity**: Stay connected with wireless capabilities. |
14 | | -- **Customizable Firmware**: Open-source code allows for personal modifications and enhancements. |
15 | | -- **Micro SD Card Support**: Load custom JavaScript applications and store additional data. |
16 | | -- **LVGL Graphics Library**: Advanced graphics handling for a rich user interface. |
| 13 | +- **Rich UI with LVGL** |
| 14 | + Draw labels, images, animations, charts, meters, and more. |
17 | 15 |
|
18 | | -## Hardware Requirements |
| 16 | +- **Secure HTTP Requests** |
| 17 | + Load a full chain SSL certificate from SD to connect to HTTPS APIs securely. |
19 | 18 |
|
20 | | -- **ESP32-S3 Development Board** |
21 | | -- **RM67162 AMOLED Display** |
22 | | -- **Micro SD Card (optional)** |
23 | | -- **Supporting Components**: Resistors, capacitors, connectors as per the BOM. |
| 19 | +- **BLE & MQTT Integration** |
| 20 | + Communicate with BLE devices and subscribe/publish to MQTT topics. |
24 | 21 |
|
25 | | -## Software Requirements |
| 22 | +- **Fallback Mode** |
| 23 | + If no JS app is found or configuration fails, a built-in fallback application is launched. |
26 | 24 |
|
27 | | -- **Arduino IDE**: For compiling and uploading the firmware. |
28 | | -- **LVGL Library**: Graphics library for the display ([LVGL GitHub](https://github.com/lvgl/lvgl)). |
29 | | -- **Elk JS Engine**: Lightweight JavaScript engine for embedded systems. |
30 | | -- **Wi-Fi and Networking Libraries**: For network connectivity. |
| 25 | +## Quick Start |
31 | 26 |
|
32 | | -## Installation Instructions |
| 27 | +### Hardware Upload via USB (JTAG Upload Port) |
33 | 28 |
|
34 | | -1. **Set Up Arduino IDE**: |
35 | | - - Install the latest version of the [Arduino IDE](https://www.arduino.cc/en/software). |
36 | | - - Add the ESP32 board support to your Arduino IDE. Instructions can be found [here](https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md). |
| 29 | +The board uses USB as the JTAG upload port. When using USB for uploading: |
| 30 | +- **CDC_ON_BOOT** must be enabled so that serial port information is printed on USB. |
| 31 | +- If the port isn’t detected (because USB is used for other functions), you may need to enter upload mode manually: |
| 32 | + - **Step 1:** With power off, press and hold the BOOT button (located behind the RST button). |
| 33 | + - **Step 2:** Connect USB. |
| 34 | + - **Step 3:** Press and hold the BOOT button, then press the RESET button and release the BOOT button. |
37 | 35 |
|
38 | | -2. **Clone This Repository**: |
39 | | - ```bash |
40 | | - https://github.com/HW-Lab-Hardware-Design-Agency/WebScreen-Software.git |
41 | | - ``` |
| 36 | +### Arduino IDE |
42 | 37 |
|
43 | | -3. **Install Required Libraries**: |
44 | | - - Open the Arduino IDE and navigate to **Sketch** > **Include Library** > **Manage Libraries**. |
45 | | - - Install the following libraries: |
46 | | - - **LVGL** |
47 | | - - **WiFi** |
48 | | - - **ESPping** |
49 | | - - **ArduinoJson** |
50 | | - - **YAMLDuino** |
51 | | - - **SD_MMC** |
| 38 | +1. **Install ESP32 Boards** |
| 39 | + In Arduino Preferences, under the Settings tab, add: |
| 40 | + `https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json` |
| 41 | + to the **Additional Boards Manager URLs**. |
| 42 | +2. Click **OK**. |
| 43 | +3. Open the **Board Manager** via Tools → Board Manager, search for **ESP32**, and install the ESP32-Arduino SDK (version 2.0.3 or above). |
52 | 44 |
|
53 | | -4. **Configure Pin Definitions**: |
54 | | - - Review and modify `pins_config.h` according to your hardware setup. |
| 45 | +  |
| 46 | +4. Copy all files from the repository’s **lib** folder into your Arduino libraries folder (see [manual installation instructions](https://docs.arduino.cc/software/ide-v1/tutorials/installing-libraries#manual-installation)). |
| 47 | +5. In the Tools menu, select the correct board settings as shown below. |
55 | 48 |
|
56 | | -5. **Compile and Upload**: |
57 | | - - Open the desired `.ino` file in the Arduino IDE. |
58 | | - - Connect your ESP32-S3 board to your computer via USB. |
59 | | - - Select the correct board and port under **Tools**. |
60 | | - - Click **Upload** to compile and upload the firmware to your device. |
| 49 | +  |
61 | 50 |
|
62 | | -## Usage Instructions |
| 51 | +## Configuration |
63 | 52 |
|
64 | | -- **Connecting to Wi-Fi**: |
65 | | - - The firmware reads Wi-Fi credentials from the `/webscreen.yml` file on the SD card. |
66 | | - - Ensure your SD card contains the `webscreen.yml` file with your network SSID and password. |
| 53 | +The project uses an SD card file named `webscreen.json` to configure settings. An example file looks like this: |
67 | 54 |
|
68 | | -- **Interacting with the Display**: |
69 | | - - The device displays notifications and visuals based on the firmware logic. |
70 | | - - You can customize the displayed content by modifying the firmware or loading custom JavaScript applications via the SD card. |
| 55 | +```json |
| 56 | +{ |
| 57 | + "settings": { |
| 58 | + "wifi": { |
| 59 | + "ssid": "ssid", |
| 60 | + "pass": "pass" |
| 61 | + } |
| 62 | + }, |
| 63 | + "script": "timeapi_app.js", |
| 64 | + "last_read": 2 |
| 65 | +} |
| 66 | +``` |
71 | 67 |
|
72 | | -- **Running JavaScript Applications**: |
73 | | - - Place your JavaScript files on the SD card. |
74 | | - - The Elk JS engine will execute the scripts, allowing for dynamic functionality. |
| 68 | +- The `"settings"` object holds Wi‑Fi credentials. |
| 69 | +- The `"script"` key specifies which JavaScript file (e.g., `/timeapi_app.js`) will be loaded from the SD card. |
| 70 | +- If the key is omitted, the default file `/app.js` is used. |
| 71 | +- The `"last_read"` value is updated automatically on configuration reads. |
75 | 72 |
|
76 | | -## File Structure |
| 73 | +## Building & Running |
77 | 74 |
|
78 | | -- `main.cpp`: The main firmware file containing the setup and loop functions. |
79 | | -- `pins_config.h`: Pin definitions and configurations. |
80 | | -- `rm67162.h` / `rm67162.cpp`: Driver code for the RM67162 AMOLED display. |
81 | | -- `elk.h`: Header file for the Elk JS engine. |
82 | | -- `notification.h`: Header file for the notification image resource. |
83 | | -- `other .ino and .cpp files`: Additional examples and functionalities. |
| 75 | +- **Compilation:** |
| 76 | + The project is built with the Arduino ESP32 core. Ensure you have installed all required libraries (LVGL, SD_MMC, NimBLE, PubSubClient, etc.). |
84 | 77 |
|
85 | | -## Contributing |
| 78 | +- **Runtime Modes:** |
| 79 | + At startup, the firmware checks for the existence of the JavaScript file specified in `webscreen.json`. If found, it launches the dynamic JS environment; otherwise, it falls back to a default notification app. |
86 | 80 |
|
87 | | -We welcome contributions from the community! If you'd like to contribute: |
| 81 | +- **Debug Output:** |
| 82 | + All operations are logged to the serial console for troubleshooting (including Wi‑Fi, HTTPS connections, and JavaScript execution status). |
88 | 83 |
|
89 | | -1. Fork the repository. |
90 | | -2. Create a new branch for your feature or bugfix. |
91 | | -3. Commit your changes and push to your fork. |
92 | | -4. Create a pull request detailing your changes. |
| 84 | +## JavaScript API |
93 | 85 |
|
94 | | -## License |
| 86 | +The firmware exposes numerous functions to your JavaScript applications. Some highlights include: |
| 87 | +- **Basic:** `print()`, `delay()` |
| 88 | +- **Wi‑Fi:** `wifi_connect()`, `wifi_status()`, `wifi_get_ip()` |
| 89 | +- **HTTP:** `http_get()`, `http_post()`, `http_delete()`, `http_set_ca_cert_from_sd()`, `parse_json_value()` |
| 90 | +- **SD Card:** `sd_read_file()`, `sd_write_file()`, `sd_list_dir()`, `sd_delete_file()` |
| 91 | +- **BLE:** `ble_init()`, `ble_is_connected()`, `ble_write()` |
| 92 | +- **UI Drawing:** `draw_label()`, `draw_rect()`, `show_image()`, `create_label()`, `label_set_text()` |
| 93 | +- **Image Handling:** `create_image()`, `create_image_from_ram()`, `rotate_obj()`, `move_obj()`, `animate_obj()` |
| 94 | +- **Styles & Layout:** `create_style()`, `obj_add_style()`, `style_set_*()`, `obj_align()` |
| 95 | +- **Advanced Widgets:** Meter, Message Box, Span, Window, TileView, Line |
| 96 | +- **MQTT:** `mqtt_init()`, `mqtt_connect()`, `mqtt_publish()`, `mqtt_subscribe()`, `mqtt_loop()`, `mqtt_on_message()` |
| 97 | + |
| 98 | +For a full list and examples of usage, see the [JavaScript API Reference](docs/API.md). |
95 | 99 |
|
96 | | -This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details. |
| 100 | +## Secure HTTPS Connections |
97 | 101 |
|
98 | | -## Acknowledgments |
| 102 | +To call secure APIs (e.g., using `http_get()`), load a full chain certificate stored on the SD card using: |
| 103 | +```js |
| 104 | +http_set_ca_cert_from_sd("/timeapi.pem"); |
| 105 | +``` |
| 106 | +### Creating a Full Chain Certificate |
| 107 | +1. **Obtain Certificates:** |
| 108 | + Collect your server certificate and the intermediate certificate(s). Optionally, include the root certificate. |
| 109 | +2. **Concatenate Certificates:** |
| 110 | + Use a text editor or command-line tool: |
| 111 | + ```bash |
| 112 | + cat server.crt intermediate.crt root.crt > fullchain.pem |
| 113 | + ``` |
| 114 | + Ensure each certificate block starts with `-----BEGIN CERTIFICATE-----` and ends with `-----END CERTIFICATE-----`. |
| 115 | +3. **Deploy:** |
| 116 | + Copy the resulting `fullchain.pem` file to the SD card. |
| 117 | +4. **Usage:** |
| 118 | + Your JavaScript app should load it with `http_set_ca_cert_from_sd()` to enable secure HTTPS requests. |
| 119 | + |
| 120 | +## Support & Contributions |
| 121 | + |
| 122 | +- **Bugs & Issues:** |
| 123 | + Please report issues or feature requests via the repository’s [issue tracker](https://github.com/HW-Lab-Hardware-Design-Agency/WebScreen-Software/issues). |
| 124 | +- **Contributing:** |
| 125 | + Contributions are welcome! See [CONTRIBUTING.md](docs/CONTRIBUTING.md) for guidelines. |
| 126 | +- **Donations:** |
| 127 | + If you find this project useful, consider donating or sponsoring the work. |
| 128 | + |
| 129 | +## License |
99 | 130 |
|
100 | | -- **LVGL**: Open-source graphics library. |
101 | | -- **Elk JS Engine**: Embedded JavaScript engine. |
102 | | -- **Arduino Community**: For the development environment and extensive libraries. |
| 131 | +This project is open source. See the [LICENSE](LICENSE) file for details. |
0 commit comments