Have you need to
create your own kiosk.?! Kiosk software is the system and user interface software
designed for an interactive
kiosk or Internet
kiosk. Kiosk software locks down the application in order to protect the
kiosk from users. Kiosk software may offer remote monitoring to manage multiple
kiosks from another location. Email or text alerts may be automatically sent
from the kiosk for daily activity reports or generated in response to problems
detected by the software. Other features allow for remote updates of the
kiosk's content and the ability to upload data such as kiosk usage statistics. Kiosk software
is used to manage a touchscreen,
allowing users to touch the monitor screen to make selections. A virtual keyboard
eliminates the need for a computer keyboard.
In last years, I've
seen the need to introduce some point in the landscape to help worker in own
activities. Pay Attention, not all workers are engaged in IT technilogies.
It could be nice to
place a kosk (as totem) to help a worker in a workerplace.
Many solutions exist
but I wanto to create a very simple project based on Electron (http://electron.atom.io/) and Windows Platform.
Electron is an open source library developed
by GitHub for building cross-platform desktop applications with HTML, CSS, and
JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be
packaged for Mac, Windows, and Linux.
Electron began in
2013 as the framework on which Atom, GitHub’s
hackable text editor, would be built. The two were open sourced in the Spring
of 2014.
It has since become
a popular tool used by open source developers, startups, and established
companies. See who is building on
Electron.
Read on to learn
more about the contributors and releases of Electron or get started building
with Electron in the Quick
Start Guide.
I've used electron
for other applications and contexts. It can be very easy to build an
application to interact with external context.
In order to develop
a Windows Applciation we need to download Microsoft Visual Studio [MS VS] 2015 (the community edition is
perfect)... https://www.visualstudio.com/vs/community/
PAY Attention: install Windowk SDK 8.1 too, this link can be
helpful to resolve many problems to compile node modules and electro base code:
https://www.robertkehoe.com/2015/03/fix-node-gyp-rebuild-error-on-windows/
We don't need MS VS
to develop but to compile the native parts of node js. If you want you can use
it to develop the code.
My advice start from
this good guide from the web (the resolution of some issues are reported ): http://electron.atom.io/docs/development/build-instructions-windows/
Now, we can start
with the application...
I want to create:
- The application must rendereize html5/css3/javascript content (Internal end External resources)
- The application must be ina fullscreen mode,
- The application must intercept all interputs to guide the behavior
- The application must log some information on file system or other appender (e.g. Remote logger )
- The application must start when the OS starts
I've searached for a
nice boilerplate code but I haven't found. So I started from a basic project.
I've created a Web
Application (MEANJS stack based [https://meanjs.org/docs/0.4.x/#overview],
out of scope for this post), the Web
Application read a QR code and check the code against a list of available code.
This Web Application is hosted behind nginx (https://nginx.org/en/)
on AWS (Amazon Web Services).
In the electron
application...
I've integrated
Browser Window: https://github.com/electron/electron/blob/master/docs/api/browser-window.md
so I can integrate Local and Remote HTTP resources, so I can access to remote
pages via chrome pratically.
In order to cover
the requirements of the application in
fullscreen mode., this documention on electron can be helpful: https://github.com/electron/electron/blob/master/docs/api/browser-window.md
Two apis can be
helpful:
- To maximize your application window, you can use BrowserWindow.maximize().
- To run your application in full-screen, you can use BrowserWindow.setFullScreen(true).
I've added to
BrowserWindow alwaysOnTop this lock the
window. Pay Attention on this aspect. If an error occurs you can see it. My tip
is to skip this configuration for the development and test phases.
NodeJS contains many
module to interact woth OS level and intercept all types of event. The complex
in some case is the recompilation od node to integrate new nodejs module in
electron application, here the guide: http://electron.atom.io/docs/tutorial/using-native-node-modules/
Don't worry, this
guide is based on the assumption that electron is compiled on the machine if
you compile electron in theory you can integrate all modules supportec by
embedded nodejs.
In order to cathc
fails in the connection I've started some events from the webcontents loaded in
the BrowserWindow so when an error occurs in remote page loading then the application can start recovery
operations.
A very nice aspect
is to catch a string "from QRcode scanner" in emulated keyboard.
NodeJs doesn't offer a very strong mechanism to capture the KeyEvent. When the
system has to capture a data stream from a device (in keyboard emulation mode)
, the developer has a list of possibilities:
- Change the HTML source file to introduce a (interprocess communication mechanism) to pass information between nodejs main process and rederer process (https://github.com/electron/electron/blob/master/docs/api/ipc-main.md). The html page must implement the capturing phase of the data stream.
- Use globalShortcut. It's limited but for more cases can be helpuful and not time consuming, https://github.com/electron/electron/blob/master/docs/api/global-shortcut.md
Actually I've
uploaded a very light example of this scenario on GitHub:
If you want to help
me to improve my example you can use the project. If you want to add some tips
and tricks ... please ... Do it!!
I hope to add some
functionalities to complete a minimal application.
Bye allz
Nessun commento:
Posta un commento