Published March 20th at 5:41pm - 133 ♥ - 2 min read
Fun With DIY : Proposal progression display
Hello everybody ! Today, I want to see how my proposal evolves day by day. Instead of refresh PeakD or Ecency page, I create a small thing with a small screen that i have collected many months ago, and a Raspberry Pi 4 that was sleeping in a drawer.
Ladies & gentlemen, let me show you the PPD : Proposal Progression Display !
If you like the project, don't forget to vote for the SuperHive proposal on PeakD or Ecency
Materials :
For this tutorial, I'll skip the wood case construction, it's only 4 pieces of wood glued together and paint in black. But I'll focus on configuration & coding.
For this tutorial, you need :
- A Raspberry PI 3 or 4
- A HDMI screen, mine is the Waveshare 7.9 LCD touchscreen
- A Raspbian Lite SD Card
Dependencies installation
After installing Raspbian Lite on the SD card, we will install X server (for displaying the browser), Chromium browser (to show the progress web page in kiosk mode), NginX to serve the page. Let's go, conect to your Pi with SSH and execute :
sudo apt update
sudo apt install --no-install-recommends xserver-xorg-video-all xserver-xorg-input-all xserver-xorg-core xinit x11-xserver-utils chromium-browser unclutter nginx git
Also, you need to activate the console autologin to load X server & Chromium at startup. So execute sudo raspi-config, select System options -> S5 Boot / Autogin and choose B2 Console autologin
Configuration
Display server
After installing all dependencies, It's the time for configuration. The first thing I want is to load display server with Chromium. Edit / Create the /home/pi/.bash_profile, and copy/paste this script :
if [ -z $DISPLAY ] && [ $(tty) = /dev/tty1 ]
then
startx
fi
Chromium
It's ok for X, We need to do the same for Chromium, edit the /home/pi/.xinitrc and paste this script :
#!/usr/bin/env sh
xset -dpms
xset s off
xset s noblank
unclutter &
chromium-browser https://localhost/ --window-position=0,0 --start-fullscreen --kiosk --incognito --noerrdialogs --disable-translate --no-first-run --fast --fast-start --disable-infobars --disable-features=TranslateUI --disk-cache-dir=/dev/null --overscroll-history-navigation=0 --disable-pinch --window-size=400,1280
CAUTION : look at the --window-size=400,1280, it's the settings for the waveshare 7.9 screen. Change them for your screen (horizontal and vertical).
NginX
This step is to change the NginX user to pi and the root folder.
First, create the web folder into /home/pi : mkdir /home/pi/web
After that, edit the /etc/nginx/nginx.conf (with sudo) and change the first line to user pi;
And last thing to do, edit the /etc/nginx/sites-enabled/default and change the root line to /home/pi/web
Install the PPD
Now, it's time to clone the hive-ppd github repo into /home/pi/web :
git clone https://github.com/fkosmala/hive-ppd /home/pi/web
If you want to change the displayed proposal, edit the /home/pi/web/index.html at line 57, change the id of the proposal, and reboot !
Final words
Hope you enjoyed this little DIY. If you like this project or any other HIVE projects i've made, consider support the SuperHive proposal on PeakD or Ecency. Thank you very much !
If you have any problem or question, the Comments section is OPEN :) Have a great day
Comments :