In my last article here, I discussed some of the challenges of using a browser for kiosk. The browser is Chromium running on a Beaglebone Black.

My points are still valid but I was able to get around them in ways I will describe for each point made; and add a new point.

The scroll bars are way too small for a finger.

You can change scrollbars for Chromium using just CSS. (This works only in Chromium – and Chrome). Here is the CSS:

::-webkit-scrollbar {
 width: 40px;
 height: 40px;
}

::-webkit-scrollbar-button:start:decrement,
 :-webkit-scrollbar-button:end:increment {
 height: 20px;
 display: block;
 background-color: transparent;
}

::-webkit-scrollbar-track-piece {
 background-color: #3b3b3b;
 -webkit-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 height: 50px;
 background-color: #666;
 border: 1px solid #eee;
 -webkit-border-radius: 10px;
}

This gives a large enough scrollbar surface to reliably use a finger on. It isn’t the exact same finger sliding on a mobile device but it works well enough. An since it is merely a scrollbar, your pages will work the same between a PC browser and the 7″ display.

We want to scroll by sliding our finger.

We found that larger sized scrollbars are usable as mentioned above. It isn’t exactly the same as drag scroll, it is intuitive.

Real Estate.

Again with CSS, you can do many things

I found font-size: 1.Xem !important; to be very useful. Apply something similar to all your tags. For example:

.ui-button .ui-button-text {
 padding-left: 30px !important;
 font-size: 1.4em !important;
}

select {
 font-size: 1.7em !important;
}

input:not([type=submit]) {
 font-size: 1.7em !important;
}

input[type=submit] {
 font-size: 1.4em !important;
}

textarea {
 font-size: 1.7em !important;
}

Checkboxes are more difficult. Chrome on big PC honors checkbox scaling but Chromium does on the BBB does not honor the following:

input[type=checkbox] {
/* All browsers except webkit*/
transform: scale(1.6);

/* Webkit browsers*/
-webkit-transform: scale(1.6);
}

You will have to wrap your checkbox in a parent entity that is a bit larger and “on click” on the parent, update the checkbox (by making the state the “opposite”. Keep in mind that a click on the checkbox occurs, you will want to stop propagation so that the parent doesn’t receive the same click and effectively change the state back.

What about Keyboard?

Thanks to the work by Jeremy Satterfield and Rob Garrison, the virtual keyboard worked very well. Since it is a jQuery plugin, it is very easy to use. For example.

$('#content input:not([type=submit])').keyboard({ layout: 'qwerty', css: { input: ''});

Conclusion

So that is it. We have a very suitable kiosk that looks very similar to the large PC browser (which was the desire of the client). The BBB has enough horsepower to handle it well.

So I wanted a super cheap but effective Kiosk. The Beaglebone Black (BBB) was a great choice with a 7″ screen from 4D Systems. It is a ARM Linux machine with 4GB of internal storage. I have a Rev C board that I got from Element 14.

For my project, I wanted a web server (sitting in front of a physical system I was controller) and a dedicated browser on the front panel.

Some Initial Steps

When I got the BBB Rev C, I plugged in the USB. No connection. Then I watched my router while I plugged in the network connection to see what IP address was served. Nothing. Then I found on the forums that the BBB may not have shipped with the intended OS installed. That was my case.

This guy’s site is pretty goodat describing the procedure even though he was using Ubuntu. You can get the latest debian image here. Install the OS and everything mentioned in the prior paragraph will magically be fixed.

Swapping In Lighttpd and PHP

The first step was to stop apache and bonescript so that we could install lighttpd and php.

Get a root shell on the BBB. This can be done using PuTTY on Windows or a Linux box. I used both because I am that sort of guy.

Start by disabling stuff that doesn’t matter.

systemctl disable bonescript.service
systemctl disable bonescript.socket
systemctl disable bonescript-autorun.service
systemctl disable cloud9.socket
systemctl disable mpd.service

You may want to keep cloud9 or mpd but the bonescript must go to install lighttpd.

The uninstall apache and udhcpd (which is provides a DHCP server).

update-rc.d apache2 disable
systemctl disable apache2.service
apt-get remove apache2
systemctl disable udhcpd
update-rc.d udhcpd disable
apt-get remove udhcpd

Then install lighttpd and php-cgi. I used sqlite too.

apt-get install lighttpd
apt-get install php5-cgi
apt-get install php5-sqlite
lighty-enable-mod fastcgi 
lighty-enable-mod fastcgi-php

Modify your php and lighttpd configs as needed. (/etc/php5/cgi/php.ini and /etc/lighttpd/lighttpd.conf)

Put your pages in /var/www or wherever you prefer (as changed in lighttpd.conf). You can manually restart lighttpd but I just reboot because I am that kind of guy and the BBB boots in 10 seconds.

Front Panel

As mentioned before, our front panel was a 7″ display from 4D systems.

You can choose to remove X from running by disabling lightdm (associated server and sockets) using systemctl. I would rather keep the front panel and have a kiosk that is a web browser.

Side note: I tried to swap nodm for lightdm but ended up getting some error message that I don’t remember and got verify frustrated as X wouldn’t start except from command line. I suspect it had something to do with the order systemctl started certain services. I gave up because it wasn’t important to me to figure it out and reflashed the OS. I wanted to see of nodm and matchbox were better (i.e. smaller and faster) than lightdm and LXDE but oh well.

So, in this case, we will continue to use lightdm, have it auto logon to the debian account and start the kiosk.

This was really simple. There are two steps.

First, have chromium start when LXDE starts. Edit /etc/xdg/lxsession/LXDE/autostart. Comment out the lines beginning with @lxpanel and @pcmanfm. You don’t need the desktop panels and file manager. Add the following to the file: @chromium –disk-cache-dir=/dev/null –app=”http://localhost”. Of course, substitute your path if different. The disk-cache-dir set to /dev/null prohibits chromium from caching pages. This is critical if update your pages periodically.

If you have reviewed any chromium documentation, there is also a –kiosk flag. However, two very undesirable aspects arise. First, chromium balks about not having Google API keys installed. I don’t care but chromium is relentless. Second, if the browser is stopped hard, on the next startup, chromium asks if you want to restore your session. Again, I don’t care but chromium is relentless. Using the “app” flag guarantees these relentless messages do not appear. Also, you will not see any navigation bar, etc.

Second, the screen isn’t full and you get window decorations. Both need to go. Edit the /home/debian/.config/openbox/lxde-rc.xml file. Under the <applications> tag.

<application>
 <decor>no</decor>
 <fullscreen>yes</fullscreen>
</application>

After the next reboot, you have a kiosk.

Future Considerations

There were several things to be considered on the front panel.

First, the scroll bars are way too small for a finger. I didn’t get around to changing this. Scroll bars should be avoided. We will elaborate more.

Second, I have been in several companies now where they think that a browser on a PC will look the same as a browser on a 7″ display. Nope. Two problems. Real estate and the size of a finger versus the control of a mouse. Buttons have to be big and pages must minimize scrolling.

Third, in this day and age, we want to scroll by sliding our finger like a cell phone. Unfortunately, this is not the way this works in this case. Your finger is really a mouse and the screen is not a “real” touch device like a phone or tablet.

I want to play with Android for BBB but that will be a future article.

Geek Droppings

Tag Archives: web browser

Beaglebone Black and Kiosk Part 2