Skip to content

Commit 094585b

Browse files
authored
chore: major project cleanup and documentation improvements. (#8)
chore: remove debugging files. Remove client app and rename firmware directory. docs: add CONTRIBUTING.md guideline and improve overall documentation.
1 parent 47773b8 commit 094585b

36 files changed

+669
-46005
lines changed

README.md

Lines changed: 103 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,131 @@
1-
# WebScreen Firmware
1+
# WebScreen
22

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.
44

5-
## Project Description
5+
## Features
66

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.
89

9-
## Features
10+
- **Configurable App Selection**
11+
Specify the JavaScript file to run via a JSON configuration file (`webscreen.json`).
1012

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.
1715

18-
## Hardware Requirements
16+
- **Secure HTTP Requests**
17+
Load a full chain SSL certificate from SD to connect to HTTPS APIs securely.
1918

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.
2421

25-
## Software Requirements
22+
- **Fallback Mode**
23+
If no JS app is found or configuration fails, a built-in fallback application is launched.
2624

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
3126

32-
## Installation Instructions
27+
### Hardware Upload via USB (JTAG Upload Port)
3328

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.
3735

38-
2. **Clone This Repository**:
39-
```bash
40-
https://github.com/HW-Lab-Hardware-Design-Agency/WebScreen-Software.git
41-
```
36+
### Arduino IDE
4237

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).
5244

53-
4. **Configure Pin Definitions**:
54-
- Review and modify `pins_config.h` according to your hardware setup.
45+
![](docs/arduino_boards_manager.png)
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.
5548

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+
![](docs/arduino_tools_settings.png)
6150

62-
## Usage Instructions
51+
## Configuration
6352

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:
6754

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+
```
7167

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.
7572

76-
## File Structure
73+
## Building & Running
7774

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.).
8477

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.
8680

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).
8883

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
9385

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).
9599

96-
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
100+
## Secure HTTPS Connections
97101

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
99130

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.

dist/index.html

Lines changed: 0 additions & 67 deletions
This file was deleted.

0 commit comments

Comments
 (0)