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