Developing GUI Apps - Qt

[Andy West]

I'm trying to develop a kiosk system using an Orange Pi One (Based on Allwinner H3 - Mali400) running Armbian Xenial

 

To do this I need to develop a full-screen GUI application (I don't have much experience in this area)

 

I'm looking for a professional way to do this, Ive spent about a week trying to get Qt to cross-compile from my laptop but not getting much luck,

 

Any ideas / advice welcome,

 

Andy

 

[Tido]

Hi Andy,

 

Have you already used the Search-Function to look up: kiosk

Have had a look into the Documenation with regard to compiling

 

Thanks

Tido

[Andy West]

Hi Tido,

 

Thanks for your reply, I have had a search for kiosk but in my case that is irrelevant as the problem is just developing a GUI application for Armbian, it just so happens the intended use is a kiosk style system,

 

Where can I find the documentation for compiling and is that compiling related to Qt5?

 

Thanks,

 

Andy

[Sodrohu]

You should use either NW.js or Electron.  They're basically Desktop apps that run using the Google Chrome engine. So, like a web page that you can open from the desktop. I use NW.JS for work so I can vouch for it myself,  but I dunno about Electron since I've never used it extensively (even though it seems a lot more popular).

 

Both of them uses node.js and codes in Javascript. So if your background is in front-end website development, this will be easy to start up.

[Andy West]

Ill certainly look into those, the only problem is that I need to be able to control the hardware too as this system is effectively used to turn relays on and off which is what made me stick to C/C++/Python

 

Thanks

[Sodrohu]

I have used Node.js to control hardware, like communicating to serial ports. I haven't tried using Node.js to control GPIO pins on my Orange Pi device. However, I found this: https://www.npmjs.com/package/orange-pi-gpio, which may be able to do what you want to do.

 

Of course, you can also call python scripts from your Javascript scripts, though IMHO that's too many hoops for me to jump through.

[Andy West]

On 6/27/2018 at 9:58 AM, Sodrohu said:

You should use either NW.js or Electron.  They're basically Desktop apps that run using the Google Chrome engine. So, like a web page that you can open from the desktop. I use NW.JS for work so I can vouch for it myself,  but I dunno about Electron since I've never used it extensively (even though it seems a lot more popular).

 

Both of them uses node.js and codes in Javascript. So if your background is in front-end website development, this will be easy to start up.

Could you take me through how you've got NWjs to work on the orange pi?

 

Thanks,

 

Andy

[Andy West]

I am trying to build Qt on an Orange Pi One by following the guide here: here

 

It says that

Quote

Before we begin please make sure that you have a working cross-compiling toolchain. This will either be supplied with your device's SDK or you can build your own.

 

How could I go about obtaining or creating the toolchain for the Orange Pi One (Running Armbian Xenial)

[adxx]

Hi Andy! 

I was following these steps to get QT 4 and QT Creator working on my Pi PC Plus: 

 

https://forum.armbian.com/topic/1349-qt/?do=findComment&comment=10153

Edited July 2, 2018 by adxx
Update

[Sodrohu]

On 6/28/2018 at 9:25 PM, Andy West said:

Could you take me through how you've got NWjs to work on the orange pi?

 

Thanks,

 

Andy

 

To familiarise yourself with NWJS, I suggest you go get a Ubuntu PC first for testing. Follow this tutorial: https://www.sitepoint.com/cross-platform-desktop-app-nw-js/ and download the SDK at https://nwjs.io/downloads/ . The online docs are here: http://docs.nwjs.io/en/latest/For Users/Getting Started/

 

Play around with it first to see if it's what you need. However, if you plan to use NWJS on the Orange Pi, then you have to compile the SDK yourself because the NWJS team doesn't  provide binaries for ARM7 architecture.

You can attempt compilation yourself by following the steps here: https://github.com/LeonardLaszlo/nw.js-armv7-binaries

Mind you, this is extremely difficult! I've forgotten the steps how but I remember how painful it was due to lack of documentation, so I gotta go thru trial and error. Just make sure you read carefully, and google anything you don;t understand.

[Andy West]

Hi all, thanks for the comments on here,

 

by far the easiest way Ive found to develop a GUI app is to use electron

 

There is a pre-compiled version for arm with support for H3 and mali 400

 

thanks for @Sodrohu for suggesting it,

 

Andy

[p'daddy]

Andy, how did electron work out for you?  I read the suggestion that it might be a solution for your Kiosk GUI application however I thought that electron is dependent on the Chromium browser... and when I last tried to install that on an OrangPi Lite, I ran into problems that led me to install Firefox as the desktop browser instead.  Firefox is dog-slow on the OrangePi.  So I’m curious now as I’d suspect Chromium would be too.

Is this a “bloated” solution that runs slow?  If you did get it to work I’d love to know how it performs and if you’d recommend it.  Hardware (GPU) accelerated graphics working?  I’ve used Nodejs with an OrangePi and controlled I/O with it.  Now I’d like to do some graphical interfaces but was going to use QT when I found your postings.

-P’Daddy

[TwiggyBuffalo]

[For future readers]

 

I am currently in the process of putting my Electron app on a Tinkerboard and have a bit of experience with Electron. If you start your electron app and open the dev tools console and do a window.location.href = 'chrome://gpu' you can get a lot of information about the hardware acceleration being used (HW Acceleration is the biggest problem you will run into with regards to running GUI apps on a SBC) in my case I am running the app with a few flags and plugins ('chrome://flags') in order to get the UI and video playback responsive. 

 

Just something to note  Good luck.

 

[EDIT] h264ify with the following options:

electron . --load-extension=./app/plugins/h264ify --show-component-extension-options --ignore-gpu-blacklist --disable-background-networking --use-gl=egl --enable-remote-extensions --enable-remote-extensions --window-depth=24 --x11-visual-id=33 --wm-user-time-ms=6178063 --flag-switches-begin --flag-switches-end

Edited May 2, 2019 by TwiggyBuffalo