Beaglebone Black and Kiosk Part 2

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.

Geek Droppings