Web Kiosk: How To Build A Chromium-Based Touchscreen Experience

I was looking for a platform that would allow me to bring together various remote-control functionalities under a single device/interface. I had tried various “universal remotes” but none of them really offered me the full combination of capabilities I was looking for. I am a Java developer by trade, so I decided to create a Java based web application that I could use to bring together control of all my various home entertainment systems under a single interface as a web kiosk. I will write up another article for that later on, but for now this one should get you running with a basic touchscreen based browser that auto-starts on power-up.

Figure 1 - Web Kiosk
Figure 1 – Web Kiosk

Hardware

After some research, I decided to go with an ODROID-C2 device. This article will only work on one of these devices, and is not compatible with a Raspberry Pi device due to various differences. However, information from this article may be useful a guide in creating a Raspberry Pi-based kiosk. The software and configurations detailed here are going to be very specific to Hardkernel’s ODROID devices.

The hardware parts list is listed below. They can be obtained from Hardkernel directly (http://goo.gl/rsyevF) or from one of the many distributors (http://goo.gl/7MJduR). The items shown in Figures 2-4 are the base hardware for the ODROID-C2.

Figure 2 - ODROID-C2
Figure 2 – ODROID-C2

Figure 3 - eMMC module with reader
Figure 3 – eMMC module with reader

Figure 4 - Power supply
Figure 4 – Power supply

For display, you could use one of the supported touchscreen displays shown in Figures 5-8.

ODROID VU5 5″ 800×480 Multitouch Touchscreen

Figure 5 - 5” VU5 display
Figure 5 – 5” VU5 display

ODROID VU7 7″ 800×480 Multitouch Touchscreen

Figure 6 - 7” VU7 display
Figure 6 – 7” VU7 display

ODROID VU7+ 7″ 1024×600 Multitouch Touchscreen

Figure 7 - 7” VU7 Plus display
Figure 7 – 7” VU7 Plus display

ODROID VU8C 8″ 1024×768 Multitouch Touchscreen

Figure 8 - 8” VU8C display
Figure 8 – 8” VU8C display

Note that the ODROID VU8C requires the higher capacity 5V/4A power supply.

Optional hardware

2 x DC Plug Cable Assembly 2.5mm

Figure 9 - DC plug
Figure 9 – DC plug

2 x Bluetooth Module 2

Figure 10 - Bluetooth module
Figure 10 – Bluetooth module

HiFi Shield Plus

Figure 11 - HiFi shield plus
Figure 11 – HiFi shield plus

While I marked the “DC Plug Cable Assembly” as optional, at $1.25 I highly recommend that you purchase two, as they are nearly impossible to source from anyone else. This way, depending on the demands of your final project, you can use a larger power-supply (one of the 5V 4A for example), and with a little soldering change out the larger barrel on those plugs for use with this tiny plug.

The Bluetooth Modules are also optional. By default, the VU7+ monitor does not have speakers, so if you want sound you will need to use one of the ODROID DACs (such as the HiFi Shield Plus listed above) or use Bluetooth for your sound. Since these are cheap, I recommend also purchasing two in case you want to use one for audio and another to act as a remote control interface, etc.

Once you decide on your parts, review the specific Wiki page (http://goo.gl/6Kx2pf) for usage details of the monitor of your choice. If you need help, visit the Hardkernel forums at https://forum.odroid.com/index.php.

Software

The software image loaded on the eMMC card from Hardkernel is quite bloated for use in a kiosk, so for this build we will be using @meveric’s Debian Stretch image – details about the image can be found at http://goo.gl/YW21Aa. Download the 93MB C2.img.xz image file from http://goo.gl/W9qDmg or the mirror at http://goo.gl/B1bTDW.

Next, download a tool called Etcher (https://etcher.io/) which will allow you to write the image file you downloaded above to the eMMC card. To do this, use the eMMC to SD card adapter, and insert into a microSD card reader on the computer you will be running Etcher on.

When you run Etcher, you first select the image you downloaded and then select the microSD card reader, then hit Flash. Note that when selecting a drive in this step, ensure it is your microSD card reader, if not, Etcher will overwrite that drive and the data cannot be recovered. Read the instructions on the Etcher download page before attempting to burn images to boot media.

Also, on Microsoft Windows, when you insert the eMMC to SD card adapter, you may get pop ups about the need to format the drive. Ignore these dialogs. Just hit cancel and close any FileManager windows. The same will happen when Etcher starts and when it finishes. Just close any Windows dialogs that popup. Once Etcher is complete, you can remove the eMMC2SD card adapter, detach the eMMC card, and insert the card at the receptacle in the bottom of your ODROID.

For this next step, you will need to use a regular HDMI monitor, not the touchscreen monitor selected earlier. You will also need to plug in a keyboard into the ODROID-C2 for this step. The default OS is configured for a 1920 x 1080p x 60hz screen, so using the touchscreen will make any text unreadable. Also, enable wired network connectivity to your ODROID-C2.

Power up the machine. You will see a series of boot time output. The screen will blank, which is normal as it expands the software image onto the full space of the eMMC drive. The screen will then resume with the startup output and then transition to the login screen.

When you get to the login prompt enter the authentication data:

Username: root
 Password: odroid
Issue the following commands, approving any prompts along the way:
$ sudo apt-get update && sudo apt-get dist-upgrade -y
About halfway through, you will see a warning about rebuilding the kernel. Just select (highlight) the “OK” option and hit Enter.

When the process is complete, enter the following commands:

$ sudo apt-get install net-tools -y && clear
$ ifconfig eth0
This last command will give you the IP address and MAC address for your ODROID-C2. Save the output information (to a file or write on paper) for future use, as the IP address will be needed for the next steps, and the MAC address (preceded with the word “ether”) may be needed if your DHCP server changes the IP down the road.

Now, with the ODROID-C2 still connected to the full monitor, issue the following command:

$ sudo reboot
This will reboot the ODROID-C2, display the startup messages and then finally give you the login prompt. You can remove the keyboard from the ODROID, as it is not needed from this point forward, but keep the full monitor plugged into the device until instructed to attach the touchscreen.

Preparing the touchscreen display

At this point, we are going to switch to connecting to the ODROID-C2 from your main computer. You will need to be familiar with an application called SSH. If you are not, google “SSH” along with your OS Name. For Microsoft Windows, the easiest application is called PuTTY, and for OSX, there is an SSH client built into the system, which is accessible from the terminal. Once you have SSH running, connect to the IP address that you wrote down in the previous step.

Figure 12 - Touchscreen display
Figure 12 – Touchscreen display

Once connected, you will be prompted to login with the same credentials you used earlier:

Username: root
Password: odroid
Enter the following commands:
$ cd ~ && mkdir software && cd software
$ wget -O setup.sh https://raw.githubusercontent.com/ZacWolf/WebKiosk/master/setup.sh
$ chmod 700 ./setup.sh
$ ./setup.sh
This will prompt you for a new password. Then, configure your monitor settings. Once the blue light has stopped flashing on the ODROID-C2, remove the power cable. Unplug the HDMI monitor cable.

Figure 13 - Clear display
Figure 13 – Clear display

Plug in the touch screen’s HDMI cable into the ODROID-C2 as well as the power cord. The touchscreen should now fill with the startup text. If the text is wavy, or corrupted, review your previous steps.

Figure 14 - Working display
Figure 14 – Working display

Once the ODROID is completely booted, you should see the login prompt on the screen.

Back in your SSH application, the connection will have ended when you issued the shutdown command. You will need to restart the connection. Each client does this differently, but in worst case just close the window and open a new session to the same IP address that you entered earlier.

This time at the login prompt, use the following credentials:

Username: root
Password: {the password you set in the previous step}
You should see a screen that looks like the image above. Back in SSH, issue the following command:
$ setupkiosk.sh
This will walk you through the configuration process. It will walk you through setting up your default-language, keyboard, timezone, hostname, NODM (answer Yes) and kiosk configuration. Finally, it will automatically reboot the ODROID-C2.

After the ODROID-C2 reboots, the screen will remain blank for about a minute and then the default homepage should be displayed on the display.

Troubleshooting

I had mixed results with getting the ODROID WiFi 3 module to work, so I just went with wired ethernet connectivity. If you are unable to get SSH to work, the ODROID-C2 is configured to use DHCP, so more than likely what has happened is that during a reboot the ODROID-C2 picked up a new IP address.

You can address this in three ways:

1) Try to connect with the hostname that you assigned the ODROID during the setup. If you are lucky, your router will resolve this address for you, but it is far from guaranteed.

2) Modify the /etc/network/interfaces file to configure a static IP address (not recommended).

3) It is best to configure a static lease in your DCHP server. More than likely, this is done in your WiFi Router and is referred to as a “static lease” or “reserved address”. You will have to look up the directions for your specific router on how to configure this but it is the best way as you will not have to worry about populating DNS/subnet information in the interfaces file as that may change if you upgrade your router, etc.

If this happens after you are already running the kiosk, you may be stuck with going with the 3rd option, which is why it is best to do it this way from the very beginning.

If you decide to change monitors, simply login via SSH as root and issue the command:

$ touchscreen.sh
For comments, questions and suggestions, please visit the original article at http://www.instructables.com/id/Web-Kiosk/.

Be the first to comment

Leave a Reply