Date: 03/20/2022 - Upvotes : 133 - Words : 479
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 !
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
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
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
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).
This step is to change the NginX user to pi and the root folder.
First, create the web folder into /home/pi :
After that, edit the /etc/nginx/nginx.conf (with sudo) and change the first line to
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 !
If you have any problem or question, the Comments section is OPEN :) Have a great day