Multimusen

How to create a full screen web app on a touch screen for exhibitions – or where you could order a dish in a restaurant

In theory the kiosk mode should be easy to achieve. But there are a few pitfalls. Here is the key to a do it yourself kiosk solution. And how to avoid some of the stumbling blocks on the road.

Mac: Problems and Solutions

Even if you manage to get your browser up and running in kiosk mode on your Mac the solution is far from “secure”. You are not allowed to remove the menu on Mac.

But you can hide the menu. However, the user is able to break out simply by placing his mouse where the menu is hidden.

A solution could be to hide the keyboard for the user. In that case it’s easy to design an interface for a touch screen. All you have to do is to add eventlisteners to icons or buttons.

But, if the user is allowed to use a keyboard MacOS certainly isn’t the best option.

Linux – more easy and more secure

Ubuntu

Since Ubuntu is nothing but a flavor of Linux, you can launch a kiosk in all Linux distros. In kiosk mode the user cannot use the right click, the windows button, F11 for a smaller browser window – and so on.

It is possible to close the web app by ALT+F4.

But in Linux you can tweak the desktop. And you can tweak the shortcuts from the keyboard, so that ALT+F4 or even F11 does absolutely nothing.

In Ubuntu I would add such settings. If you create a “kiosk user”, you could set up the session in a way where the user will log into a kiosk mode. Linux is a multiuser system, so you could display the kiosk on a touch screen with mouse and keyboard – and even log remotely in via SSH.

WM – or window managers

If you don’t like the Gnome desktop that is shipped with Ubuntu, you could install one of the fun WMs, like Ratpoison. The WM is easy to configure, and if you don’t want a menu – just remove it!

Mostly the WM has a hidden config file. If you open it and follow the instructions inside the file it is easy to add and remove functionality to the system. You can edit the file in your favorite editor, like Atom, Vi, Nano etc.

The settings file in Ratpoison is:

~/.ratpoisonrc

Since both Mac and Linux are based on a Unix kernel there might be some alternative WMs out there – even for your Mac. Microsoft is trying to seduce Linux these days. Hence, you may even be able to run some of these alternative WMs under Windows. But that’s beyond the scope of the article.

A magick cabinet with a touch screen and a wicked hidden Raspberry Pi running your web app from behind the scenes

Now we’ll go behind the scenes. Why not build a cabinet for the touch screen. Behind the scenes we will power the web app with a credit card sized computer. And yes: you can install an Apache server and run whatever websites you fancy in kiosk mode.

The Raspberry Pi is a very small computer. If you have a touch screen and hide the Pi behind it in a wooden or metal frame you’ll have more than enough power to drive a web app.

I have installed WordPress on a Pi, and it runs like a charm. With WordPress you’ll have an excellent Dashboard in the background that will power your kiosk solution. Here is the recipe for the solution.

And now you have more than enough ideas. Now you can build your own kiosk from scratch.

How about Windows?

I don’t use Windows, so here you have to experiment by your own ingenium. Probably you can run the firefox.exe file and add -kiosk in the terminal.

Here is a recipe from Firefox.

Good luck!

Here is my very first experiment with the Rioch Theta 360 degree camera implemented in a WordPress post. As you can see the experiment was a success.

About the Image

The image was shot in the Old Town city museum in Aarhus with the Rioch Theta 360 degree camera. The camera was handheld during dark conditions. Hence the blur. Obviously I should have used a tripod / monopod.

Vis større kort

Panellum

As the 350-degree image viewer I used code from the Panellum JavaScript library, see here.

In WordPress

• The image from the camera was simply uploaded to the media library in the Dashboard.
• Then the url to the image was copyed and inserted in the code as the const img.
• Note that you cannot have blank lines in the JavaScript. If you have blank lines WordPress will insert <p> tags – which will ruin the script totally.

Here is the code I used:

<!--  Add what you see below to a post or page
      the link to the image should be the link to the image
      either on your WordPress or server -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">
<div id="panorama" style="width:600;height:400px;border:3px solid black;margin:auto;"></div>
<p><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<script>
  window.onload = function() {
    const author = "Per Thykjaer Jensen"
    const img = "https://multimusen.dk/wp-content/uploads/R0010030-scaled.jpg";
    pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": img,
      "title": "The Old Town - dec. 17th. 2021, Aarhus",
      "author": author,
      "autoLoad": true
    });
  } // document ready
</script></p>

Get the code on Github

• https://github.com/asathoor/360degreeImg