This dashboard project is a hobby project I created to get a good-looking touchscreen for our kitchen with the latest news, family calendar, stocks and some home automation. I'm running it on a 24" Dell touchscreen powered by a Raspberry Pi 4, 4 GB. The screen is mounted flat on the wall in the kitchen with cables and RPi tucked away behind the monitor.
Feel free to fork, add feature requests, make pull requests and let me know of any ideas on how it can be improved.
- Raspberry Pi 4, 2 GB
- Micro HDMI to Standard HDMI cable
- Dell P2418HT Touch 24"
The frontend is running as a static node-server powered by Framework7 and VueJS.
Using a web socket connection, the frontend is communicating with a node-server keeping all data up to date from different sources and communicating with devices such as Sonos speakers and home automation with Tibber. The background process is managed by pm2 process manager.
passwd
Change last row to "homeboard"
sudo nano /etc/hosts
sudo nano /etc/hostname
sudo apt-get -y --fix-missing --no-install-recommends install matchbox chromium-browser cec-utils xinit x11-xserver-utils ttf-mscorefonts-installer xwit sqlite3 libnss3 xserver-xorg xserver-xorg-video-fbdev xinit pciutils xinput xfonts-100dpi xfonts-75dpi xfonts-scalable unclutter xdotool
sudo apt update
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
nvm install node
npm install -g npm@latest
npm install -g pm2
pm2 startup
# Copy and run the suggested command from the previous output - example:
# sudo env PATH=$PATH:/home/pi/.nvm/versions/node/v14.5.0/bin /home/pi/.nvm/versions/node/v14.5.0/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi
git clone https://github.com//blanck/homeboard.git ~/homeboard
cd ~/homeboard
git remote set-url origin [email protected]:blanck/homeboard.git
cd ~/homeboard/ && git reset HEAD --hard
cd ~/homeboard/ && git pull --no-edit https://github.com/blanck/homeboard.git
npm install
npm update
npx browserslist@latest --update-db
pm2 start '/home/pi/homeboard/server.js'
pm2 save
sudo rm /etc/xdg/autostart/piwiz.desktop
sudo sed -i "/exit 0/isudo iw wlan0 set power_save off" /etc/rc.local
echo "@sh /home/pi/homeboard/start.sh &" | sudo tee -a /etc/xdg/lxsession/LXDE-pi/autostart
echo "tmpfs /tmp tmpfs defaults,noatime,nosuid,size=1024m 0 0" | sudo tee -a /etc/fstab
echo "tmpfs /var/log tmpfs defaults,noatime,nosuid,mode=0755,size=100m 0 0" | sudo tee -a /etc/fstab
Copy the sample configuration file to your own local version protected from the public code
cp ~/homeboard/config.sample.js ~/homeboard/config.js
Edit the parameters, get your own API keys for services and change parameters to match your own preferences.
nano ~/homeboard/config.js
# ctrl + x - yes to save
# then restart server from bottom of the screen or in terminal with
pm2 restart server
You will have to connect to the homeboard computer using SSH. Open up a terminal on your computer (PC/MAC)
ssh [email protected]
# enter yes first time then password
cd homeboard
If you want to modify the code, configuration or add widgets it's recommended cloning a local copy of the repository on your computer.
git clone [email protected]:blanck/homeboard.git ~/Development/homeboard
cd ~/Development/homeboard/
npm install
Open two terminal windows and start the backend server in the first one
node server.js
Open the second terminal and run the development version of the dashboard
npm run dev
In the browser window, open inspector for the localhost:8080 browser page that automatically opens. Click "Toggle device toolbar" or click CMD + shift + M. Select responsive dimensions and enter 1920 x 1080 pixels to match the monitor fullscreen resolution on the Homeboard device display.
sudo sed -i " 1 s/.*/& disable_splash=1 logo.nologo consoleblank=0 loglevel=1/" /boot/cmdline.txt
# Disable login prompt
sudo systemctl disable getty@tty3
# Install splash file handler
sudo apt-get -y install fbi
# Install splashservice from drive
sudo pip install gdown
sudo gdown -O /etc/systemd/system/splashscreen.service https://drive.google.com/uc?export=download\&id=13eWP-EtHfgUL6yl2-ptZhjkT3PJuR8rj
# Download png file for splashscreen
sudo cp ~/homeboard/assets-src/splash.png /opt/splash.png
# Enable splash screen
sudo systemctl enable splashscreen
# Set desktop background
export DISPLAY=:0 && pcmanfm --set-wallpaper /opt/splash.png
sudo sed -i '/#disable_overscan/ c\disable_overscan=1' /boot/config.txt
# sudo nano /boot/config.txt
# disable_overscan=1
# framebuffer_width=1920
# framebuffer_height=1080
# hdmi_force_hotplug=1
# hdmi_group=1
# hdmi_mode=31
This is due to missing Xcode command line tools which are required to build the project.
Install by running ``` xcode-select --install ```
# Stop pm2 server
pm2 stop server
cd ~/homeboard
node server.js
# troubleshoot error
# Start pm2 server
pm2 start server
# Taking remote screenshots from your local computer
sudo apt install -y maim
ssh [email protected] 'DISPLAY=:0.0 maim' > screen.png