A simple client/server app to render widgets defined by a JSON file onto a web browser page.
Used primarily on my Lian Li O11 Dynamic XL LCD mod
Client (JS) and Server (Node.js) included, see /path/to/repo/client and /path/to/repo/server
The companion app widget-sensors can track sensor data fed by HWINFO (free version) and sensor data can be displayed using widgets to monitor hardware information such as CPU temperature, GPU usage etc.
Widgets can be used on any device that can run a modern web browser. The app was created to make easier to update remote LCD screens connected to an Raspberry Pi 4 Model B (see demo video below) but can be used with regular monitor(s) on any device, including smartphones and tablets.
In the video below the two LCD screens inside the Lian Li O11 Dynamic XL case are connected to a Raspberry Pi 4 Model B.
s2.mp4
Tested on Windows 10 but should work on Mac OS and other operating systems as well with little effort.
Command prompt
C:\>cd \path\to\repo\server
C:\path\to\repo\server>npm i
Bash
$ cd /path/to/repo/server
$ npm i
Set an environment variable named PW_ROOT with the folder name where your media files are saved.
The default is D:/Backgrounds. The folder must exist and some media files (.mp4, .gif, .jpg etc.)
should be available before modifying the widgets.json file.
Command prompt
C:\>cd \path\to\repo\data
C:\path\to\repo\data>copy *.* %PW_ROOT%
Bash
$ cd /path/to/repo/data
$ cp * $PW_ROOT/
Replace /path/to/repo to your local repository contents folder.
Enter your media folder and edit the widgets.json file using a text editor. Set the media file names
and other properties such as position on screen and screen index for each widget item. A few sample files
are provided for quick setup.
Open a command prompt or bash terminal window and type npm start to run the server
Command prompt
C:\>CD \path\to\repo\server
C:\path\to\repo\server>npm start
Bash
$ cd /path/to/repo/server
$ npm start
Possible output:
> pagewatch@1.0.0 start D:\pi\pagewatch\server
> nodemon index.js
[nodemon] 2.0.14
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Page watch app listening at http://localhost:30000
Open a browser tab on your computer and navigate to http://localhost:30000
The page should show whatever widgets you have defined for screen: 0 in your widgets.json file
Edit /path/to/repo/client/config.js file and set the host name and port used by the server.
You must at least set the host name to your server IP address, your computer name is probably
what you need. If you don't know your computer name, use a command prompt or bash terminal window and type
Command prompt
cmd /k hostname
Possible response:
C:\>cmd /k hostname
MR-PC
Bash
echo $HOSTNAME
Possible response:
$ echo $HOSTNAME
MR-PC
If using a Raspberry Pi make sure it can access your PC via its name - e.g. open a terminal window on your Raspberry Pi and ping your computer name.
$ ping YOUR-PC-NAME
For example, if your computer name is DESKTOP-PC, the config will look like below
const config = {
// Any host name or IP that is reachable by your Raspberry Pi - e.g. your computer name
host: 'DESKTOP-PC',
// Port where the web server/websocket server is running
port: 3000,
};
Connect to your Raspberry Pi via VNC and open Chromium, then navigate to http://YOUR-PC-NAME:30000
You should see the same contents when you tested the server on your computer. If you don't, go back and check the configuration. It's worth noting that both client and server must be running on the same local network.
{
"widgets": [
{
"uri": "Widget URI",
"position": { "x": X, "y": Y, "w": W, "h": H },
"screen": X
},
{
"uri": "Another Widget URI",
"position": { "x": X, "y": Y, "w": W, "h": H },
"screen": X
}
]
}uriis a file name.positiondetermines where the widget will be displayed (absolute positioning)- x, y are optional, 0 is used if omitted. Coordinates are relative to the top/left screen corner
- w, h are optional, the default width and/or height is used if omitted
screenis an optional 0-based index value that can be used to separate widgets by screen
widgets array is processed by appearance order where the topmost array item has the least z-index value; aka item is displayed underneath the item immediatelly below it in the array and so on.
Supports video files (.mp4), images in general (.gif* .jpg .png etc.) and YouTube videos. Transparency is also supported meaning widgets can be stacked up to create personalized output.
.gifis not supported on Safari.
Open http://YOUR-PC-NAME:30000/admin/ in a browser tab to access a web-based tool that allows quick editing, copying and switching between your widget configuration profiles.
In the video below the two LCD screens inside the Lian Li O11 Dynamic XL case are connected to a Raspberry Pi 4 Model B.
a2.mp4
Open a SSH connection to your Raspberry Pi and add the following lines to the bottom of /etc/xdg/lxsession/LXDE-pi/autostart file
$ sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
chromium-browser --new-window --start-fullscreen --window-position=0,0 --noerrdialogs --user-data-dir=/tmp/screen-1 --app=http://YOUR-PC-NAME:30000/index.html?screen=0 &
If you have two screens connected to the Raspberry Pi, add another line as follows (modify the --window-position values to match your primary screen width)
chromium-browser --new-window --start-fullscreen --window-position=800,0 --noerrdialogs --user-data-dir=/tmp/screen-2 --app=http://YOUR-PC-NAME:30000/index.html?screen=1 &
Press CTRL+X Y to save your changes.
The --user-data-dir option is required to allow more than one screen, if you have only one screen it may be omitted. Be sure to create the /tmp/screen-1 (and /tmp/screen-2 if using two screens) to allow Chromium to work properly - e.g.
$ mkdir /tmp/screen-1
I also recommend installing unclutter to remove the mouse cursor. Just clone unclutter repo and add a single line to the autostart configuration file
$ sudo apt-get install unclutter
$ sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
Add the following line to the end of autostart file
@unclutter -idle 0
Press CTRL+X Y to save your changes.
It's also recommended to disable screen blanking (to avoid the screen to enter sleep mode). Edit the file /home/pi/.config/lxsession/LXDE-pi/autostart
$ sudo nano /home/pi/.config/lxsession/LXDE-pi/autostart
Add the lines below to the bottom of the file
@xset s off
@xset -dpms
@xset s noblank
Press CTRL+X Y to save your changes.
Additionally it's recommended to increase the Raspian swap file size which defaults to only 100MB.
Before starting make sure any running programs are closed.
- Temporarily stop the swap file usage.
To stop the operating system from using the current swap file run the following command:
$ sudo dphys-swapfile swapoff
- Modify the swap file configuration file.
Use the command below to open the swap file configuration file
$ sudo nano /etc/dphys-swapfile
- Change the default swap file size by changing the line below.
CONF_SWAPSIZE=100
To increase the swap file size to 1GB, just change the default value of 100 (value in MB) to 1024.
CONF_SWAPSIZE=1024
Whatever size you set, that space must be available on the SD card.
Save the changes by pressing CTRL+X Y then press ENTER.
- Delete the original swap file and recreate it to fit the newly defined size.
$ sudo dphys-swapfile setup
- Turn the swap file usage back on.
$ sudo dphys-swapfile swapon
Reboot your Raspberry Pi to verify your changes.
$ sudo reboot
Once the system is rebooted Chromium should be opened in fullscreen. If something goes wrong, just SSH again to your Raspberry Pi and either fix the commands or remove them to undo the changes.
Note: instructions valid for Raspian.
Built with