Building a kiosk system with Smart Mobile Studio and ARM SoC
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.
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.
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.
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.
Linux for HTML5?
The answere is: nope!
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.
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.
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
Needless 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 🙂
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.
- A node.js server
- database access
- image and media serving
- filesystem access
- 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.
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:
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.
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:
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.
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.
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!