This project develops a Personalized IdleView application for webOS, designed to provide users with tailored information during idle screen states. By leveraging minimal power, the application enhances energy efficiency and ensures consistent delivery of real-time, customizable content.
-
Customizable Dashboards and Widgets Users can configure dashboards with widgets for weather updates, schedules, and media playback.
-
Seamless Integration A user-friendly interface and backend systems powered by Node.js, MySQL, and REST APIs support personalization and data management.
-
Real-Time Information Updates The system dynamically displays weather using secure HTTPS communications.
To set up this project, you need a target device and host PC.
You need a Raspberry Pi 4 with webOS OSE as the target device.
Hardware | Description |
---|---|
Raspberry Pi 4 Model B (8GB) | The core computing unit for the application. |
MicroSD Card with webOS OSE Image | A MicroSD for flashing webOS OSE. - webOS OSE 2.24.0 is used in this project. You can get the pre-built image in webOS OSE GitHub. - To install a webOS OSE image on a MicroSD card, use the following guide: Flashing webOS OSE. |
Touchscreen or Monitor | The display device that interacts with the application. We recommend using a touchscreen for a more interactive experience. |
Our team developed this project using a Windows environment. However, the project can be set up and executed on other operating systems such as Linux or macOS. The following are the general specifications and software requirements for the host PC:
- Operating System: Windows, Linux, or macOS (tested on Windows 10)
- CPU: No specific requirements (standard modern CPUs are sufficient)
- Memory: 4GB or more
- Storage: At least 256GB of available space
- Node.js: Required for running the backend server and webOS OSE CLI.
- MySQL: Database management system used in the project.
- Prisma ORM: Used for data modeling and database interactions.
- Navigate to the backend directory:
cd backend
- Install dependencies:
npm install
- Create
.env
file: Create an.env
file in the backend directory and configure the database connection and server port. Example.env
file content:DATABASE_URL="mysql://<DB_USERNAME>:<DB_PASSWORD>@<DB_HOST>:3306/<DB_NAME>" PORT=4000
- Run database migrations:
npx prisma migrate dev
- Seed the database with dummy data (optional):
npm run seed
- Start the backend server:
The server should start on the specified port (default: 4000).
npm run start
- Install Node.js on your local PC. Verify the installation:
This will display the installed version of Node.js.
node -v
- Navigate to the React project’s root directory:
cd frontend
To ensure proper communication between the client and servers, modify the server addresses in the src/constants.js
file:
- Open
src/constants.js
in the React project directory. - Update the server addresses and port numbers:
When running locally, replace
// src/constants.js export const apiBaseUrl = 'http://{IP address of your backend server}:4000';
{IP address}
withlocalhost
:export const apiBaseUrl = 'http://localhost:4000';
- Install dependencies:
npm install
- Start the development server:
The application will be accessible at
npm run dev
http://localhost:5173
.
Before starting the deployment process, ensure the following:
- webOS OSE CLI: Install the CLI for deploying and managing webOS applications:
sudo npm install -g @webosose/ares-cli
- Set up the webOS device: Use the following command to register your Raspberry Pi:
ares-setup-device
- Ensure the script is executable:
chmod +x deploy.sh
- Deploy the React application:
Example:
./deploy.sh {DEVICE_NAME} {APP_ID} {APP_VERSION} {VENDOR_NAME} {APP_TITLE}
The script automates the following:./deploy.sh raspberrypi com.example.idleview 1.0.0 "MyCompany" "Idle View App"
- Builds the React project.
- Packages the application into an
.ipk
file. - Installs the application on the webOS device.
- Access the webOS application launcher on your Raspberry Pi.
- Launch the Idle View app.
- Verify real-time communication with the backend server.