This is an overview of how i made my Raspberry pi controlled calender Kiosk. I have altered some of the files for privacy reasons, this is a public copy of my private repo that is live on the RPi. UPDATE; Im currently rewriting the whole thing as a react app, with yr.no api, google photos api, and ATB buss api. It is in a seperate private repository. Planning to be done within the year.
| Back | Front |
|---|---|
 |
 |
 |
 |
The hardware i used to make it:
- Raspberry Pi Model 3 B+
- 32GB SD card for the Pi, used one I had.
- LCD screen from an old notebook i had, I also used the power adapter from the notebook.
- LCD screen controller board, i used THIS from Ebay for my perticular screen.
- Momentary Push button switches, i used THESE from Ebay
- Jumper wires M/F, i used THESE from Ebay
- 30cm HDMI cable.
Update; some of the wiring is outdated since i added the motion sensor.
I used the GPIO Board mode to find the right pins on the Pi to use.
I connected three buttons with jumper wires to the Pi pins. The buttons was wired like this:
| Pin | Ground | Button |
|---|---|---|
| 3 | 6 | prev |
| 11 | 9 | refresh |
| 1 | 4 | next |
Diagram of this:
Here the black wires are to ground. They could all be connected and go to one single ground pin.
I had one aditional button wich I used for turning the screen on and of with. This one was connected to pins on the LCD controller board. The pins i used for my controller board were(from the left) pin 1 and 4(ground).
The controller board and the Pi is connected with an HDMI cable.
To use the Pi for anything I had to install an operating system. I went with the default linux-based Raspbian. It can be done on the Raspberry Pi's website. Install Raspbian
To make things easier i installed Putty SSH client on my windows Laptop, and enabled SSH in the Rasbian settings. I then changed the password for the Pi and got the IP for the Pi with "sudo hostname -I" in Terminal. Then it was easy to connect to the Pi from the laptop in the Putty software with the IP.
To auto hide the cursor on the Pi, install unclutter with "sudo apt-get install unclutter". Then if you add '@unclutter -idle 0.1 -root' into /etc/xdg/lxsession/LXDE/autostart it will start automaticly.
To force the screen to stay on and dont go into sleep mode write "sudo nano /etc/ligthdm.conf" and add the following line to the [SetDefault] section: xserver-command= X -s 0dpms
Other changes like rotating screen can be done in "sudo nano /boot/config.txt". To rotate screen add "display_rotate=3" numbers 1-4. Disable the overscan(black bars) with "disable_overscan=1"
I wanted to setup Git to have full version control and backup of my most important files on the Pi. Installing git can be done with "sudo apt install git-all". Then I made the directory Pi-Calender(mkdir Pi-Calender) and used "git init" to inizialize a repository. I added my GitHub email in "git config --global user.email YOUR-EMAIL" and "git config --global user.name 'FULL NAME'". Then it was only to use SSH with GitHub. I generated a SSH key THIS WAY and copied it from "~/.shh/id_rsa.pub" to my GitHub's settings SSH keys. Then I made the Pi-Calender repo on GitHub and copied the SSH link for the repo and wrote "git remote add origin SSH-Link". Git was done setting up.
I made the buttons.py based on "How it was connected". I made it to be able to use a button for different actions bassed on how long it was pressed. To use it with virtual keypresses I installed uinput (download instructions). Uinput full list of KEYS. To autolaunch it at startup you can do like THIS and make a launcher.sh file that does premade command lines and then make it executable with "chmod 755 launcher.sh". Write "sudo crontab -e" and then add @reboot sh /home/pi/Pi-Calender/launcher.sh" to run it at startup. Uploaded buttons.py to Github and used "git pull" to get it to the Pi.
I used a local webpage to display the calender. I added a clock and a picture for the top porsion of the webpage, and a google embeded calender which i altered the outdated visuals with css. To apply the css to the embeded google calender i downloaded a chromium extension that can alter css on webpages. I used Chrome Stylus extension. Just copy this css into the extension with the google embeded url.
The embeded google URL can be found at your google calender settings. Make sure to custimize it with the right height and width and remove the title and such. I use height = 1000px and width = 1080px. The Javascript that autofocuses the calender need the iframe to have an id tag = "calender" .
To make the webpage launch at startup in full size i typed "sudo nano .config/lxsession/LXDE-pi/autostart" in Terminal and added these lines @chromium-browser --no-startup-window --kiosk @chromium-browser --start-maximized --kiosk file:///home/pi/Pi-Calender/site/calender-site1.html file:///home/pi/Pi-Calender/site/calender-site2.html
I have two webpages that i want to be able to switch between with the buttons, thats why there are two URLs.
UPDATE; I have added a motion sensor for the screen to turn on when it detects movement.