A system for interactive display of pictures - on multiple screens/projectors - controlled by tablets
- Pictures from the members should be displayed on screens/projectors.
- It should be possible to display a picture simultaneously on multiple screens/projectors.
- The viewing should be controlled by thumbnails on tablets.
- When a thumbnail is clicked the corresponding picture should be displayed on the associated screens/projectors.
- When there has not been a thumbnail click for a while, a slide-show should run.
- It should be possible to run the exhibition in many rooms by using multiple tablets, each with its own set of screens/projectors.
- Many clubs should have the possibility to take part in the exhibition, but they should be independent of each other.
- To be fair to the photographers, all should have equal chance where their thumbnails are placed/ordered on a tablet.
- "club" should be used in a broad sense. It could be just pictures from a specific theme like street photography, birds, cars, etc. (or a collection for a slide show)
- If you just want simple slideshows you do not need tablets at all. The system will automatically run slideshows on all screens that have "connected" to the various clubs.
- A LAN.
- A tablet. Its browser will show thumbnails for the viewers to click on.
- A browser (on any computer) or a dedicated "kiosk" with a screen/projector. It will retrieve a tablet (browser) clicked picture from a picture server and display it.
- A picture server. It will host the pictures and respond to requests from the tablets and the kiosks.
- A laptop to maintain the system and view its status.
- Pictures in jpeg format (a picture size of 2 MB should be enough). Thumbnails are automatically created by the system.
- A LAN
- The tablet could be a browser window on a laptop.
- The "kiosk" could be another browser window on a laptop. The window is thus the "screen"
- The picture server could run in any Debian computer, for example a Raspberry Pi or in a Virtual Box.
- HW requirements as in the trial above.
- For the sake of simplicity the picture server is assumed to have the IP address 192.168.0.250.
- When the actions in the SW Installation chapter are done you can run the demo. See the chapter "To run the pre-installed demo-gallery"
- After the SW is installed the system is independent of Internet access.
- The system needs support from a router with at least one LAN port, WiFi and DHCP.
- For simplicity the picture server should be connected via an ethernet cable to the router.
- In a show room it is more convenient to use WiFi in the kiosks but with ethernet cables it is less to configure.
- Kiosks and tablets are "associated" in groups. In a group the same picture will be shown on all screens when a thumbnail is clicked.
- A tp-link Archer AX12 on a LAN without internet.
- Raspberry Pi4 and Pi5 with 64-bit raspian as picture server and kiosk.
- Browsers and tablets.
Both the picture server and a dedicated kiosk are designed to run headless, without monitor, keyboard and mouse.
You can though use the desktop on the picture server (if the peripherals are connected.)
If you use a browser on an ordinary computer as a kiosk the desktop is there as well.
A dedicated kiosk can only run headless because its desktop is bound to the screen/projector.
An installed system does not need internet access in the gallery. But the clocks on the servers will not be accurate without Internet time synchronisation . This will not disturb the showings.
When the picture server and dedicated kiosk(s) are booted a supervisor program in each of them will be started.
- It will look for proper configuration files. If a configuration file is missing or bad it will alarm and wait until the file is proper. When the configuration files look proper the actual server or kiosk will be started.
- It will immediately detect a configuration change or when pictures have been added/deleted etc. It will validate the changes and restart the related server programs in order for them to use the new configuration.
With a (monitoring) browser you can view the configuration files, the uploaded member pictures, the status and get notifies on errors.
The browser will continuously show system status and configuration errors (as long as the LAN is up).
Computers that rely on WiFi are much more prone to network failures than those with ethernet cable connections.
The "Network problem" section in Miscellaneous describes the method used to try to keep WiFi connected kiosks "up".
The configuration files and the pictures are supposed to be updated/uploaded with FileZilla.
Prepare a system image (micro-SD or USB stick):
-
Use "Raspberry Pi Imager" to create a bootable image for the Pi.
-
In "EDIT SETTINGS" add the user "fg" and configure WiFi with the SSID that will be used in the router in the gallery.
Be aware that "EDIT SETTINGS" will not keep the passwords you have once "SAVE". If you go back to "EDIT SETTINGS" and if the passwords fields are filled with **************** the passwords are gone.
If it looks like this, the "wrong" passwords will be saved on the image. A kiosk will thus not startup because it can't find the network/router.
If it looks like this, the passwords you have entered will be saved on the image.
-
Enable SSH remote terminal access. FileZilla needs it. You can then also login remotely via ssh.
sudo raspi-config
Select "3 Interface Options" -> "I1 SSH Enable/disable remote command line access using SSH" -> "Would ... Yes"
-
The servers use Node.js JavaScript runtime environment and its package manager.
sudo apt-get install node.js sudo apt-get install npm
- Install the iapg kit:
You should be in/home/fgas soon as the system has booted. If not: reboot and login as "fg".
To get the kit, browse to:
https://github.com/pg-andersson/iapg and click on "<>Code" and then "Download ZIP"
Github will createiapg-main.zipthat will be copied to Downloads.
- When you unzip iapg-main.zip the directory
/home/fg/iapg-mainwill be created and the files copied to it.
Make sure you are in/home/fgand run:
unzip Downloads/iapg-main.zip(You must be in "/home/fg" and the user must be "fg" when you unzip).
-
Node.js dependencies must be installed now.
Go to the just created/home/fg/iapg-mainand run:
npm install(You must be in "/home/fg/iapg-main" and the user must be "fg").
npm install sharp(it creates thumbnails).
npm install better-sqlite3(thumbnails are cached here).
-
Important. The picture server needs a static IP address.
The router will give the server a static IP address if you define a static lease for the server (actually its MAC) in the gallery router (DHCP).
Run this command to get the MAC:
ip address The output will be like this: 2: eth0: ... link/ether e4:5f:01:a9:4c:ed ... This is the MAC you later on shall add in the static lease in the gallery router inet ..... -
The supervisor shall be started by systemd at boot time.
sudo mv /home/fg/iapg-main/iapg_init_server.service /etc/systemd/system/ sudo systemctl enable iapg_init_server.service
The system image is now ready to be used as a picture server in a gallery now.
-
The kiosk and the supervisor shall be started by systemd at boot time.
sudo mv /home/fg/iapg-main/iapg_init_kiosk.service /etc/systemd/system/ sudo systemctl enable iapg_init_kiosk.service
-
systemd shall start the program that will reboot the kiosk on network failures.
sudo mv /home/fg/iapg-main/iapg_kiosk_rebooter.service /etc/systemd/system/ sudo systemctl enable iapg_kiosk_rebooter.service
-
There is only one parameter file in a kiosk. To update it in the gallery, via FileZilla, you must know the IP of the kiosk.
Once the kiosk is up:
- The status monitor will show the IP of active kiosks.
- If show_kiosk_ip_as_footer=1 (the default is 0 off) in
/home/fg/iapg-main/etc/iapg_server.confin the picture server,
the IP, port and club-id for a kiosk will be shown in a footer on the kiosk displays.
This annoys and even spoils the experience of the showings and must only be used when the kiosks are tested in the gallery.
-
The kiosk requires autologin to start the main program.
sudo raspi-config
Select "1 System Options" -> "S5 Boot / Auto Login" -> "B4 Desktop Autologin"
The kiosk is now set up to run headless (without monitor, keyboard and mouse) as a "kiosk" at the next boot.
If a kiosk has problems to startup its screen will show the cause of the problems.
The system image is now ready to be used as a "dedicated" kiosk in a gallery now.
The picture server can run headless or with a desktop.
- The default is to run the picture server as headless (but you can of course connect a monitor, keyboard and mouse.)
- You can thus only use FileZilla to update iapg_kiosk.conf (or from your laptop via SSH).
- Errors will be shown on the monitoring web page.
-
An update in the picture server (new pictures, clublist.conf, iapg_server.conf) will work immediately (well, in less than 10s).
- An update in a kiosk (iapg_kiosk.conf) will also work immediately
The system starts with a slideshow per group (tablet). Such a slideshow will run until it is interrupted by a thumbnail request.
To stop the system
Just power off.
The picture server has the IP address 192.168.0.250. Change "192.168.0.250" in the three "open" statements below if your server has another IP address.
-
Boot the picture server.
-
Run a browser for status viewing. A "reload of the web page" may be needed if the server is not yet up.
open http://192.168.0.250:53000/index.html
-
Run the browser as a kiosk.
open http://192.168.0.250:53001/show.html
-
Load the tablet (or a browser window) with the pre-installed thumbnails. Click on one and the picture shall be seen on the "kiosk".
open http://192.168.0.250:53001/index.html
- The pictures are stored in club and member directories.
- The following club directories
/home/fg/iapg-main/html/club-1 , club-2 ... club-10are predefined.
- A directory for a photographer must have the name of the photographer.
/home/fg/iapg-main/html/club-1/member-x
- A picture file must be in jpg-format. A size of 2 MB should be enough
/home/fg/iapg-main/html/club-1/member-x/A picture I want to show.jpg
-
A server with only one club will have just one directory with sub-directories for the photographers:
Club 1: /home/fg/iapg-main/html/club-1/ /home/fg/iapg-main/html/club-1/Balder Friggsson/Balder Friggsson.jpg /home/fg/iapg-main/html/club-1/Balder Friggsson/mistletoe.jpg /home/fg/iapg-main/html/club-1/Tor Jordsson/Hugin.jpg /home/fg/iapg-main/html/club-1/Tor Jordsson/Sleipner.jpg> /home/fg/iapg-main/html/club-1/Tor Jordsson/Tor Jordsson.jpg
-
A server with many clubs means one directory per club with sub-directories for the photographers:
Club 1: /home/fg/iapg-main/html/club-1/ /home/fg/iapg-main/html/club-1/Balder Friggsson/Balder Friggsson.jpg /home/fg/iapg-main/html/club-1/Balder Friggsson/mistletoe.jpg /home/fg/iapg-main/html/club-1/Tor Jordsson/Hugin.jpg /home/fg/iapg-main/html/club-1/Tor Jordsson/Sleipner.jpg /home/fg/iapg-main/html/club-1/Tor Jordsson/Tor Jordsson.jpg
Club 2: /home/fg/iapg-main/html/club-2/ /home/fg/iapg-main/html/club-2/Louis Daguerre/Louis Daguerre.jpg /home/fg/iapg-main/html/club-2/Louis Daguerre/Notre Dame.jpg /home/fg/iapg-main/html/club-2/Louis Daguerre/Pont Neuf.jpg/home/fg/iapg-main/html/club-2/Robert Capa/Loyalist Militiaman.jpg /home/fg/iapg-main/html/club-2/Robert Capa/Robert Capa.jpg
Note
Because a "signature" picture of the photographer will be shown on the tablet, a picture with the name of the photographer(+.jpg) must exist in his directory.
The signature-picture without the extension ".jpg" will thus have the same name as the directory it is stored in.
The signature-picture will be shown as the first thumbnail in the block of the photographer but it is not meant to be displayed on the screens/projectors (and is thus not clickable).
All other pictures will be displayed in directory order.
You can store as many "clubs" as you like on the server. Only those in the clublist.conf will be started.
- Tablets and kiosks work in groups.
- Tablets and kiosks are grouped when they use the same "port" number.
- The picture server use this port number to find the club that keeps the clicked picture.
- This chain means that when a thumbnail is clicked the big picture will be sent to all kiosks in the same group as the tablet.
| Club ID | Port numbers for pairing tablets and kiosks to a club |
| club_1 | 53001, 53002, ... 53010 |
| club_2 | 53011, 53012, ... 53020 |
| club_3 | 53021, 53022, ... 53030 |
| club_99 | 53991, 53992, ... 53999 |
An example: lets say that 3 tablet/kiosk pairs will show pictures from club_2.
The first tablet must then use port=53011, the second 53012 etc.
The picture server in the examples will get the IP address 192.168.0.250 from DHCP in the gallery router. This has the lease range 192.168.0.2 - 192.168.0.250
The last address in the span is added in the DHCP config as a static lease with IP 192.168.0.250 for the MAC address of the picture server.
-
The pictures are stored in club and member directories.
See: "The principle for storing pictures".
To upload pictures:- A member should provide an USB-stick with pictures in a directory with his name.
- Use FileZilla to copy that directory to
/home/fg/iapg-main/html/club-1, 2, .../in the picture server.
See the next picture.
You can have "dormant" club directories and only those mentioned in the clublist file will be part of the slideshows.
-
The parameters that control the behaviour of a slideshow are stored in
/home/fg/iapg-main/etc/iapg_server.confwaittime_before_slideshow_starts = 60 pict_displaytime_slideshow = 10
This means:
After 60 seconds display of a picture a slideshow will begin or resume until a thumbnail is pressed.
During a slideshow a picture is displayed for 10 seconds.
Edit the file on your laptop and "FileZilla" copy it to/home/fg/iapg-main/etc/iapg_server.confin the picture server.
-
Slideshows will be started for the clubs named in
/home/fg/iapg-main/etc/clublist.conf
A configuration example with two clubs:club: club_id: club-1 club_name: Acity picture club nr_of_displays: 2 member_position: r
This means:club: club_id: club-2 club_name: Bcity picture club nr_of_displays: 1 member_position: n
club-1 has directory/home/fg/iapg-main/html/club-1/for the member pictures and has 2 kiosks controlled by one tablet each.
The sort order of the members placement on the tablet will be r=randomized. "Acity picture club" is the name of the club.
club-2 uses/home/fg/iapg-main/html/club-2/and 1 kiosk controlled by one tablet.
The sort order of the members placement on the tablet will in n=name order.
Edit the file on your laptop and "FileZilla" copy it to/home/fg/iapg-main/etc/clublist.confin the picture server.
-
The parameters for a kiosk are stored in
/home/fg/iapg-main/etc/kiosk.conf
A configuration example:addr_server=192.168.0.250 club_id=club-1 port_nr_for_this_kiosk=53001
This means:
This kiosk will get pictures for club-1 from the picture server 192.168.0.250 using port 53001.
Edit the file on your laptop and "FileZilla" copy it to/home/fg/iapg-main/etc/kiosk.confin the kiosk.
-
The same "show" as in the example above:
open http://192.168.0.250:53001/show.html
This means:
This browser will get pictures for club-1 from the picture server 192.168.0.250 using port 53001.
-
To get the thumbnails page:
open http://192.168.0.250:53001/index.html
This means:
The tablet will get the thumbnails for club-1 from 192.168.0.250 using port 53001
In this screencopy "Nils Nilsson" has his pictures in the directory "Nils Nilsson" on the USB "NNPICT".
That directory is copied to his club's directory in the picture server.
open http://192.168.0.250:53000
You get a page from the picture server where you can:
- View:
- status
- error messages
- configurations
- member pictures
- click statistics
- Open a status window:
- That will show server status every 10 seconds
- Errors
- The parameters used when the Clubs were activated for viewing
- Details about the Clubs activated for viewing
- Snapshots of the communication between the picture server and the kiosks
- Links to status windows in the active kiosks
- The status page in the selected kiosk
(The screens are roughly related to example 3 further down)
The club is called club-1.
-
In the picture server
In
/home/fg/iapg-main/etc/clublist.confclub: club_id: club-1 club_name: The photoclub in Acity nr_of_displays: 1 member_position: r -
In the kiosk
In /home/fg/iapg-main/etc/iapg_kiosk.conf addr_server=192.168.0.250 club_id=club-1 port_nr_for_this_kiosk=53001
-
For the tablet
open http://192.168.0.250:53001/index.html
Three tablets will be setup to load thumbnails from the same "club-directory".
-
In the picture server
In /home/fg/iapg-main/etc/clublist.conf club: club_id: club-1 club_name: The photoclub in Bcity nr_of_displays: 3 member_position: r
-
In kiosk 1
In /home/fg/iapg-main/etc/iapg_kiosk.conf addr_server=192.168.0.250 club_id=club-1 port_nr_for_this_kiosk=53001
-
In kiosk 2
In /home/fg/iapg-main/etc/iapg_kiosk.conf addr_server=192.168.0.250 club_id=club-1 port_nr_for_this_kiosk=53002
-
In kiosk 3
In /home/fg/iapg-main/etc/iapg_kiosk.conf addr_server=192.168.0.250 club_id=club-1 port_nr_for_this_kiosk=53003
-
For the tablets
open http://192.168.0.250:53001/index.html open http://192.168.0.250:53002/index.html open http://192.168.0.250:53003/index.html
-
In the picture server
In /home/fg/iapg-main/etc/clublist.conf club: club_id: club-1 club_name: The photoclub in Acity nr_of_displays: 1 member_position: r
club: club_id: club-2 club_name: The photoclub in Bcity nr_of_displays: 2 member_position: n
-
In the kiosk for club_1
In /home/fg/iapg-main/etc/iapg_kiosk.conf addr_server=192.168.0.250 club_id=club-1 port_nr_for_this_kiosk=53001
-
In the first kiosk for club_2
In /home/fg/iapg-main/etc/iapg_kiosk.conf> addr_server=192.168.0.250> club_id=club-2 port_nr_for_this_kiosk=53011
-
In the second kiosk for club_2 (Not visible in the drawing above)
In /home/fg/iapg-main/etc/iapg_kiosk.conf addr_server=192.168.0.250 club_id=club-2 port_nr_for_this_kiosk=53012
-
In the tablets
open http://192.168.0.250:53001/index.html open http://192.168.0.250:53011/index.html open http://192.168.0.250:53012/index.html (Not visible in the drawing above)
The system counts thumbnail and "slideshow" clicks and save them in json/csv files in
/home/fg/iapg-main/var/stat/.The following statistics can be viewed from the monitoring web page.
- Accumulated statistics for all tablets. One per day.
- Statistics per tablet. One per day
- Statistics every time a thumbnails page on a tablet is "loaded/reloaded"
Assume that you will have a show in a "gallery".
Bring along a router that is purely configured for your "showing"-LAN (No internet so the LAN will be fenced off from the world).
An attack from an intruder in your dedicated gallery LAN is then restricted to the router and the micro-SD cards in the Raspberry Pis. The tablets work as in any public area
If there are network problems a kiosk will reboot and display the reason on the screen. This will will go on until the network (router) is up again. Then the kiosk will boot into the normal slideshow behaviour.