Is it possible to develop a GUI on Linux Embedded with just HTML, CSS and JS?
Asked Answered
T

1

5

I have been researching widely on this topic, but still haven't found a proper guide. What I am doing is to create a GUI for an embedded system based on Linux Embedded and I would like to know if:

  • it's going to be possible to code the GUI using HTML, CSS and JS?
  • is it worth looking into porting a framework such as React JS?
  • is there any other alternative that allows for quick development and satisfying UI?

I am very new to this and I would be very grateful if someone more experienced could point me in the right direction. Thanks so much.

Transsonic answered 28/1, 2020 at 9:2 Comment(3)
Possibly what you need is a "kiosk application" en.wikipedia.org/wiki/Kiosk_softwareFence
Hello @Fence and thanks for your feedback! I'm researching about kiosk applications and so far it seems appealing GUI-wise but it might need very high-end hardware to run on compared to regular embedded systems (not sure, still studying on it). So is kiosk app the way you would go if you were to provide a richer than usual UI on a regular (complexity-wise) embedded system?Transsonic
Hi, sure it's possible. You need a webserver which offers a proper backend (nodejs, php, whatever) and is able to serve frontend script file(s). The backend will interface your system. Then you need any webbrowser and connect to the device (provided your device does has an ethernet/wifi nic).Philippopolis
S
11

I've just written an article listing the top 5 libraries for creating GUI on Embedded Linux. I've only mentioned one tool that renders HTML UI, the Sciter engine. It's much more compact than Webkit or Chromium. The owner of the project, Andrew Fedoniouk, recently released a new version called Sciter.Lite that will support embedded devices. Check out these two resources.

https://sciter.com/sciter-lite-is-published/

https://sciter.com/windowless-sciter-android-and-iot-devices/

Demos are already available on their GitHub

  • sdk/bin.lnx/x64lite
  • sdk/demos.lite

You don't have to limit yourself to HTML UI, check out the other tools I've recommended. All of them have a free version. For rich UI, I think HTML UI is easier. I mean, Sciter Notes doesn't look to shabby and it's just under 5Mb for Win, Linux and Mac. But the backend is C++. For more minimal hardware, you'll have to look into the C/C++ toolkits I've listed. TotalCross are planning to support Android XML but has not been released yet. So you can check on them also.

Oh. Almost forgot. Two whitepapers comparing QML and HTML5 were published in 2017. Qt requires you to register so I'll just give you the links so that you can download them without registering :)

Paper 1: Qt QML v HTML5 –a practical comparison

Published on May 2017 by Sequality Software Engineering an Austrian firm that is a Qt partner and does Qt consultancy.

Downlink Link 1, Download Link 2

Here is a review of the paper by a software engineer, Amir Shrestha, who provided the first download link. There is more discussion at Hacker News. There was also an interesting discussion thread in a YouTube video about the comparison. You can read the YT comment section but first search "Andrew MacAulay" and read that thread. He was the lead engineer for the autopilot system for the F-18 jets and has worked in other senior embedded roles.

Paper 2: Qt or HTML5? A Million Dollar Question

Published on Oct 2, 2017, by Burkhard Stubert a Qt consultant and developer.

Download Link

Here is the discussion on Hacker News.

An interesting piece of information I found in the second paper is that 90%+ of all home appliances are powered by micro-controllers with no OS or a very minimal RTOS.

Another interesting piece of information I discovered while writing my article, is that Micrium OS and components are now open-source under Apache 2.0. It has its own GUI toolkit written in C but it only targets Micrium OS and not embedded Linux. If developers start adopting Micrium OS (it was already quite popular in the industry and even launched in space) perhaps you can start looking into it too.

Sailfish answered 7/5, 2020 at 9:40 Comment(1)
Thank you very much Kevin! Very extensive information.Transsonic

© 2022 - 2024 — McMap. All rights reserved.