Boxsir Home Technical Notes
website·Indexed 30 days ago
https://boxsirhome.github.ioA collection of technical notes and project documentation covering IoT development with ESP32 and ESP8266, web development using SpringBoot and Vue 9.0.1, and system administration for Linux, Git, Node.js (nvm), and Redis. Includes specific project guides for a WiFi weather clock, wireless monitoring car, and gas alarm system, as well as references to the Alibaba Coding Guidelines.
What's inside Boxsir Home
- nvm (Node Version Manager) is a tool used to manage multiple Node.js versions on a single system. It allows developers to easily install, upgrade, or downgrade Node.js versions and switch between them as needed for different projects on the same machine.
Overview of Box Home (盒子小屋) technical stack
Box Home (盒子小屋) is a website developed based on thevuepress-theme-hopeframework. The UI style is inspired by Oragekk's Blog. The project is configured to use Node.js version v16.17.1.Overview of WiFi Weather Clock System Architecture
The WiFi Weather Clock is an IoT device that uses an ESP32 microcontroller to connect to WiFi for network configuration and city selection via a mobile phone. It retrieves real-time weather data from network APIs and synchronizes precise time using NTP servers, displaying the information on an LCD module.Add icons to the Hope theme
The Hope theme supports icons in FontClass and image formats. You can use icon libraries such as iconfont, iconify, and fontawesome, or use direct image paths/URLs for png and svg files. Icons can be configured in the following locations:
- Pages: Set the
iconproperty in the page frontmatter (used for navigation, titles, and sidebars). - Navigation Bar: Set the
iconoption inNavbarItemConfig. - Sidebar: Set the
iconoption inSidebarItemConfig. - Homepage: Set the
iconoption within the feature items.
- Pages: Set the
Hardware components for the Rice-Shrimp-Crab Symbiotic System
The system is divided into several functional hardware modules:
1. Main Control Module (ESP8266):
- ESP8266 Main Control Board and Expansion Board
- Environmental Temperature and Humidity Sensor (DHT11)
- Water Level Sensor
- OLED Display (0.96 inch, 4-pin)
- Relay, Atomization Driver, Water Pump, Oxygen Pump, and Alarm
2. Water Quality Monitoring Module (STM32F103C8T6):
- STM32F103C8T6 Development Board
- DS18B20 Temperature Sensor
- pH Monitoring Module and Electrode
- Turbidity Sensor
- OLED Display
- ESP-01S WiFi Module
- Buzzer and Self-locking Switch
- Power: USB-5V
3. Environmental and Soil Monitoring:
- Dissolved Oxygen Sensor, Wind Speed Sensor, Wind Direction Sensor, and Light Sensor
- ESP32-CAM and Wired Cameras
- Soil Monitoring sensors
4. Additional Robotics:
- AI Farmer, Bird Repellent Vehicle, Drone, and Cruise Boat.
Organize Application Layering and Data Objects
Follow this hierarchical structure for application architecture (Upper layers depend on lower layers):
Layer Responsibilities:
- Open Interface Layer: Encapsulates Service methods into RPC or HTTP interfaces; handles gateway security and flow control.
- Terminal Display Layer: Handles template rendering (e.g., Velocity, JS, JSP, Mobile).
- Web Layer: Handles access control forwarding, basic parameter validation, and simple non-reusable business logic.
- Service Layer: Contains specific business logic.
- Manager Layer: General business processing. Encapsulates 3rd party platforms, provides common capabilities (caching, middleware), and combines multiple DAO calls.
- DAO Layer: Data access layer interacting with MySQL, Oracle, HBase, etc.
Data Object Types:
- DO (Data Object): Maps 1:1 with database table structure.
- DTO (Data Transfer Object): Used by Service/Manager layers for external data transfer.
- BO (Business Object): Encapsulates business logic output from the Service layer.
- AO (Application Object): Reusable model between Web and Service layers, close to the display layer.
- VO (View Object): Transferred from Web layer to the rendering engine.
- Query: Object for receiving query requests. If more than 2 parameters are needed, use a Query object instead of a
Map.
Understand Vue's MVVM and Data-Driven Architecture
Vue.js implements the MVVM (Model-View-ViewModel) pattern to achieve two-way data binding:
- Model: The JavaScript data objects.
- View: The DOM (HTML elements).
- ViewModel: The Vue instance itself, which acts as the intermediary.
Data-Driven Mechanism: Vue uses
Object.defineProperty(ES5) to convert data properties into getters and setters. This allows Vue to track dependencies and automatically notify thewatcherto re-render the component when a property is modified. Because of this reliance onObject.defineProperty, Vue does not support IE8 or lower.Use ESP32-CAM for wireless monitoring car control
The ESP32-CAM is an integrated development board based on the ESP32 chip. It features a high-performance camera and supports WiFi for real-time video transmission to remote devices. It is designed for low power consumption, making it suitable for battery-powered mobile robots. The board provides multiple IO interfaces to connect additional hardware such as motor drivers, servos, infrared sensors, and ultrasonic sensors for features like automatic obstacle avoidance and tracking.Hardware components for the Rice-Shrimp-Crab Symbiosis IoT System
The Rice-Shrimp-Crab Symbiosis system uses an ESP8266 as the main control board. The controller is connected to the following hardware components: environmental temperature and humidity sensors, atomization chip drivers, water level sensors, relays, and an OLED screen.Hardware components for the Rice-Shrimp-Crab Symbiosis IoT System
The Rice-Shrimp-Crab Symbiosis system uses an ESP8266 as the main control board. The controller is interfaced with the following hardware components: environmental temperature and humidity sensors, an atomization chip driver, a water level sensor, a relay, and an OLED screen.Understand the difference between VI and VIM
VI is the standard text editor found in Unix and Unix-like operating systems. VIM (Vi IMproved) is a more powerful version of VI that is fully compatible with it but adds features such as syntax highlighting to assist in programming.Hardware components for the Rice-Shrimp-Crab Symbiosis IoT System
The Rice-Shrimp-Crab Symbiosis system uses an ESP8266 as the main control board. The controller is connected to the following hardware modules: environmental temperature and humidity sensors, atomization piece drivers, water level sensors, relays, and an OLED screen.