Home > demo, Object Pascal > Building a kiosk system with Smart Mobile Studio and ARM SoC

Building a kiosk system with Smart Mobile Studio and ARM SoC

October 29, 2016 Leave a comment Go to comments
Kiosk systems comes in all shapes and sizes

Kiosk systems comes in all shapes and sizes

Not sure how to define a kiosk system, but it would perhaps be something like “a multimedia driven information booth with user interaction allowed”? Most kiosk systems run your application in full-screen, have a touch capable display(some also have keypad or a full keyboard). Occationally you spot some mouse devices, but that is typically “homebrew”. We can do better.

You really want as little exposed hardware as possible. A mouse just screams “please cut me, cut me now!” to any teenager within miles, and it wouldn’t last an hour at a public library or museum. So touch screens – preferably with a secondary protective layer (an extra plate of thin plastic to protect the screen) is the way to go for public service machines.

Ok, lets look at the demographic for potential customers. This is something you should always do before starting a new (commercial) project. You should also check out the competition and find and angle where you have the advantage, where you can compete. It can sometimes be as simple as good service, better docs or a more friendly user interface. There are a ton of really bad software out there that survives and sells just because their service department does an outstanding job. So don’t limit your thinking to purely technical excellence (like we programmers typically do). Look at it from all angles. Under-do the competition is a catch phrase coined by 37signals in their book Rework (a great book by the way); it simply means: make sure the basic functionality is extremely well made and solid. Focus on the basic functionality rather than playing catch-up with every new “thing” on the market.

Ok, here are some examples of where you would offer your services and sell your kiosk systems:

  • Ticket booths for public offices
  • Ticket booths for pharmacies
  • Information booths for physicians and hospitals
  • City bicycle rental
  • Airport information stalls
  • Museum info booth
  • Library inventory booth
  • Paint color-mixers for hardware stores

I could go on forever, there are thousands of potential customers.

Hardware

The hardware I am using is the Raspberry PI 3 model b. This is probably one of the most affordable embedded platforms you can buy. And model 3 packs quite a punch to be honest. You could buy one of the clones like the Banana PI (there is also an orange pi or whatever it’s called) and save a buck or two – but seriously: at $35 a pop for the original I would honestly not bother risking it. There are subtle incompatibilities between the clones and the real deal – so you could end up “saving the pennies while wasting the bills” as they say. The way to save money on hardware is to buy in bulk. End of story.

The fantastic Raspberry PI 3

The fantastic Raspberry PI 3

Next, you need a touch screen. The size is naturally only limited by the size of the booth and your budget. For this article series I will be using a small 10″ form-factor. I can recommend a visit to AliExpress.com, never had any problems ordering from them. But stay away from Wish and Geek – these websites will lie, steal and sell their own grandmother just to make a buck. I have nothing but bad experienced with them (like never getting what you ordered). So stick with AliExpress or even better RS components.

display

Touch screens have become ridicules cheap lately

If you have $5 to spare, please buy a remote control. Being able to stop, restart or display an “admin panel” purely by clicking a button on a remote (that only you or your client have access to) will save you so much razzle. You don’t want to mess about with

Besides. Once you know how to code your own set-top-box like I’m showing you now, why not go all out and create your own movie player? Chrome can play pretty much everything out there – and you can get plugins for VLC. Plex eay your heart out!

I have actually had my own NAS running for quite some time now, coded completely in Smart Pascal. And believe you me, its much better than many of the commercial products I see out there. If you are interested in contracting me for projects, contact Quartex Components.

Anyways, what you can do with a remote control is only limited by your imagination. But above all it just looks cool. In fact, buy it because it looks cool and always have sunglasses on when you click the admin button.

This set me back a whopping $4 from Banggood.com!

This set me back a whopping $4 from Banggood.com!

Linux for HTML5?

fullpageosBut now you are thinking: Smart compiles for JavaScript, how the hell are we going to display that full-screen? Do we have to first load the Linux desktop and then manually start a browser?

The answere is: nope!

Our operative system will be a modified version of Debian, one especially tailored for full-screen, HTML5 kiosk displays. And it so happens that there are quite a few such distributions on the market. Most of them completely free as well. JavaScript is after all the leading programming language of our time. As much as 50% of all software being written on this planet right now, is written in JavaScript. We didn’t set out to create Smart Mobile Studio just for the hell of it, but rather because we knew this was going to happen all the way back in 2010. It was inevitable and the factors in the market (and socially) all pointed to the same.

For our Smart Pascal kiosk system we will be using FullPageOS which basically skips the whole desktop thingy and boots directly into Chrome in full-screen. No desktop, no “oh damn the user just minimized the browser window“, just chromium rendering our awesome code directly to the frame-buffer. But you still have Linux ticking away beneath the hood with all the perks and power that represents.

So jump over to Github and download the latest binaries here: FullPageOS. I have also setup a mirror over at Quartex Components. So should for some reason github spontaneously burst into flames, I got you covered!

Next, we will be modifying the distribution slightly. We want to start node.js as a service when the device starts. The easiest way of doing that is to install something called PM2, which also gives you clustering capabilities and drill-down analysis at the same time.

PM2 is node.js equivalent to Microsoft windows service console. It gives you the ability to define if a node.js program should run as a service, if it should be re-started on a crash, logging, distribution – and much more.

We will just be using the automatic restart feature in this tutorial, but I have to tell you, PM2 is a powerful piece of engineering capable of a lot more than that. The most important being that it adds clustering capabilities to your node.js programs if you need it.

If you tell PM2 to run your Smart Pascal server in cluster mode, it will utilize all the cores your CPU has to offer. This is imperative since the JavaScript virtual machine is single threaded, event driven and async by nature.

You can also setup a traditional network cluster, with X number of physical devices dealing with your payload, while a central server act as a dispatcher delegating tasks in good old round-robin style. And the best part? You don’t even have to change a single line of your code to use this. PM2 takes care of everything for you, clustering mode is just a command-line switch. Now that is awesome if you ask me.

PM2 makes clustering and process monitoring a snap. You can even check out the state of your back-end node processes remotely

PM2 makes clustering and process monitoring a snap. You can even check out the state of your back-end node processes remotely via a secondary fancy HTML5 dashboard

You can check out PM2 here: http://pm2.keymetrics.io/. We will be installing that after we have prototyped our server -because during development you want errors to surface so they can be fixed.

Smart Mobile Studio

photoNeedless to say you are not in Kansas any more and Delphi is not really suited for this line of work. Object Pascal and C++ is great for a lot of things, from desktop applications to large-scale eco-systems. But for IOT the full might of Delphi or C++ builder is quite frankly overkill. In this part of the IT forest, python, node.js and bash rule supreme.

So whip out your trusty copy of Smart Mobile Studio and get ready to make those ARM cpu cores purr like a kitten!

The code thing

Since I work on the Smart Pascal RTL, we often have this problem where I blog about or demonstrate code that is not yet publicly available. The reason I blog about new features is naturally to show people what is going on, what they can expect from the next update and so forth.

For this project I will try to avoid non-released features as much as possible so everyone can execute and work with the code. But I will also include code from the new RTL whenever there are no options.

Just keep in mind that any RTL code is copyright. You are not allowed to use it without owning a proper license.

When this tutorial is done you will have a working kiosk system. What media or features you want to deliver is up to you, I’m just here to get you going 🙂

The architecture

Right! With the Linux distribution, node.js and PM2 taken care of, let’s look at the software architecture. What we are going to do is to divide our kiosk system into two parts. Two applications.

  1. A node.js server
    • database access
    • image and media serving
    • filesystem access
  2. A visual smart mobile user interface
    • Menu system
    • User interaction
    • Displaying information
    • Fancy CSS3 effects

Node.js is very different from the browser JSVM. First of all it executes with the same level of access to the filesystem, network, pipes, threading etc. as a normal executable. It basically gives you the same features Freepascal or Delphi would give you. Node.js is not sandboxed like the browser’s JSVM is. There are no restriction on database size, file size or anything like that.

This means that by dividing our application architecture into two parts, we get to enjoy the best of both worlds. We will isolate any low-level stuff in our node.js server (and more importantly: access to the content our booth is going to display). So our visual application needs only care about presenting information and keeping a dialog going with the node.js backend.

By using Chromium as our browser we ensure that the rendering process makes use of the GPU, which is quite important for embedded devices. HTML5 is demanding and rendering it all via the CPU alone would, well, suck.

But our simple architecture allows us to put our application logic in the front-end, and then reduce our node.js backend to a simple command server, almost like a DLL or library. But with perks. Loads of perks.

This model also helps us to abstract the display from changes or updates to the back-end server. The display interface could not care less if you are using sqlite as your database or a $200.000 a month Oracle monster. It doesn’t need to know where the server obtains images, music or files. All it needs to know is the commands and response codes.

It also means we can fragment and do clustering. If you have, say, between 50-100 booths operating on the same network, we could in fact push the node.js server to a dedicated server machine. The clients running on the Raspberry PI wont know the difference. Nor would they care as long as they can connect and get the response they need.

 

Developing on Windows

Before we start assembling the parts and jousting with Linux, I want to teach you a little trick. When people get a Raspberry PI they tend to do changes to their in the worst possible way: Namely to either use a second USB stick to move files between their PC and the RPI, or (better) install samba so they can copy files over the network.

QEmu makes it a bit easier developing for the PI

QEmu makes it a bit easier developing for the PI

Both solutions are “ok”, but they are time-consuming. And after having copied your Smart Mobile Studio compiled code over for the 78’th time, odds are your frustration level will be through the roof (yes we have all made this mistake at some point).

The trick is to run Raspbian on Windows through qemu. Just like you would run Windows or Linux through VMWare or similar products, you can actually do the same with Raspberry PI (although only model 2b is supported to my knowledge).

You can download the whole system image from Sourceforge here:
https://sourceforge.net/projects/rpiqemuwindows/

Alternatively, I did a mirror of the distribution and you can download that from Quartex Components, right here (but please use Sourceforge first, this link is only for emergencies like if the owner is kidnapped by aliens or moves to Tibet where he intends to live as a goat or something): QuartexHub-Public

Once downloaded, just unzip to whatever location you like.

 

Just click the "run.bat" file and Raspberry PI will run on your desktop

Could not be simpler to use

Notice the run.bat file? This simply starts qemu for ARM and loads the operative system disk image. The disk image is stored inside the qemu folder, cleverly disguised as:

2012-07-15-wheezy-raspbian.img

Here is the full file-list inside the folder. You don’t have to understand or know what this is to use it. Once inside Raspbian you can install Samba (google it, its out of scope for this article to explain) so you can share files between your Windows host and the QEMU Linux installation.

QEmu is not the fastest horse in the stable so to speak, but it's highly flexible and free. So.. La-di-da

QEmu is not the fastest horse in the stable, but it’s super flexible and free!

Homework

No I didnt see you playing with your sockets SIR!

No I didnt see you playing with your websockets again SIR!

In the next installment of this article series we will create a websocket server for nodejs and a then use the websocket client in the VJL (the Smart Pascal run-time library) to communicate with it.

We will be sending whole objects over the wire, which sounds very complex and hard, but it’s almost a one-liner under Smart. All JavaScript objects can be serialized to JSON and un-serialized back to an instance on the other side, so this is a piece of cake.

The main job will be to establish a simple, fast, lightweight ASYNC protocol that ensures a snappy and responsive user-interface.

We will also dig into TFileStream which is exclusive for node.js and last but not least, use SQLite for our database needs (Raspberry PI is an embedded system after all, so resources are sparse).

When the coding is done we will perform the required changes to the Linux distribution, hook up the hardware and feel the thrill of having constructed our very own remote-controlled kiosk system!

Your homework assignment is to install node.js on your Windows PC, create a new node.js project in Smart Mobile Studio and look at the API units. You will find the node.js API units under $RTL\NodeJS\ (check links created by our installer in the start-menu program group).

In the next update of Smart Mobile Studio you will have plenty of high-level classes dealing with all that low-level stuff. But getting to know the classes and datastructures node.js expose beneath it all is very useful. It will help you build better node.js servers later on.

Have a good weekend!

Advertisements
  1. October 29, 2016 at 1:24 pm

    Congratulations. This is awesome!! I can’t wait to try it out 🙂

  2. October 29, 2016 at 8:58 pm

    Just ordered my first R PI and display!

  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: