Help creating responsive GUI for RPi

[Shnx]

I'm trying to build a Responsive GUI for RPi that could fetch data from RFID reader. Could anyone suggest? My first thought was Python because it is built-in on RPi then because of lack of other features I switched to HTML but they said HTML even with JavaScript couldn't fetch the data from RFID using RFID reader. Any suggestions would be a great help!

[topguy]

So is it a desktop UI you want to create ? or more of a "mobile/touch/fullscreen" UI ?
What kind of RFID reader is it ? What is the physical interface ? ( What is the logical interface ? )

What features do Python lack ? With the amount of modules and libraries that exist for Python I think it should lack very little.

[Heater]

When you say "Responsive GUI" do you mean just a normal graphical user interface as you see in a typical Windows/Mac/Linux desktop application?

I ask because "responsive GUI" now a days is used to refer to GUI's displayed in web pages that change size and aspect ratio in response to changes in screen/windows size and/or aspect ratio.

Do you require a GUI on the desktop top of your Pi or a GUI that can be used remotely over the web?

[Shnx]

So is it a desktop UI you want to create ? or more of a "mobile/touch/fullscreen" UI ?
What kind of RFID reader is it ? What is the physical interface ? ( What is the logical interface ? )

What features do Python lack ? With the amount of modules and libraries that exist for Python I think it should lack very little.

It is a mobile/touch/Fullscreen UI
It is a Contactless RFID USB
I used PyQt5 to create GUI but I'm having a hard time understanding it, can't find a good tutorials on the web too. That's why I'm trying to to make a GUI using HTML with JS/CSS. But if you could suggest a better and easier way, please do so. I'm just an average programmer btw.

[Shnx]

When you say "Responsive GUI" do you mean just a normal graphical user interface as you see in a typical Windows/Mac/Linux desktop application?

I ask because "responsive GUI" now a days is used to refer to GUI's displayed in web pages that change size and aspect ratio in response to changes in screen/windows size and/or aspect ratio.

Do you require a GUI on the desktop top of your Pi or a GUI that can be used remotely over the web?

Yes. A fullscreen/touchscreen one.

[John_Spikowski]

Iup and Lua might be worth looking at. Qt is too complex in my opinion.

[topguy]

It is a mobile/touch/Fullscreen UI

It is a Contactless RFID USB

I used PyQt5 to create GUI but I'm having a hard time understanding it, can't find a good tutorials on the web too. That's why I'm trying to to make a GUI using HTML with JS/CSS. But if you could suggest a better and easier way, please do so. I'm just an average programmer btw.

https://kivy.org/#home Might be easier to understand than Qt. Is Python your preferred language.

Have you already integrated with the RFID reader ?

[Heater]

Shnx,

Yes but do you mean "responsive" in the web developer context. That is to say changing layout with screen size and orientation. Or do you just main responsive like a normal GUI with mouse or touch, a fixed layout?

You have a long road ahead whichever way.

In order to adopt a modern WEB GUI you will need to learn some things, HTML, CSS and JS to start with. Never mind the GUI you want to create, learn them first. Luckily there are more tutorials, blogs, documentation, examples available for HTML/CSS/JS on the net than pretty much any other topic in computing. I'm sure if you did a quick google search for "learn HTML", "JS tutorial" and such combinations of keywords you would find many. There are also a lot of books available even free online.

For HTML there is always: https://www.w3schools.com/html/ full of reference material, examples, etc. They also have a lot of material on CSS and Javascript.

For my web efforts I use the bootstrap library: https://getbootstrap.com/docs/3.4/css/ to take care of all the CSS stuff, I hate dealing with CSS. Bootstrap gives you a lot of nicely styled buttons, check boxes, text boxes, forms, and all kind of other widgets, it also takes care of getting them layed out nicely. I like the cyborg theme: https://bootswatch.com/cyborg/ as in my simple page here: https://otaniemi.conveqs.fi/public/fibo.html

For complex GUI web GUI stuff I use the React javascript library: https://reactjs.org/

But then you have another problem: How to connect everything in the GUI in a browser or other web display to your actual application, for that you will need to find out how to communicate between web page and application. Your application needs to become a web server. They can then communicat using xmlhttprequest's https://www.w3schools.com/xml/xml_http.asp from Javascript or the new "fetch" API: https://developer.mozilla.org/en-US/doc ... /Fetch_API. If you need to push data from your application to the web GUI you will need websockets: https://developer.mozilla.org/en-US/doc ... ockets_API which is made much easier by using the socket.io library: https://socket.io/

Now, your application becomes a web server for that web GUI. For that I use node.js: https://nodejs.org/en/ Which has the advantage that one uses the same language, Javascript, for the web GUI and the application/server. Node.js has all kind of modules available for talking to serial ports, GPIO and whatever you may need.

Now, you may not want to use an actual web browser to display this GUI if your application is only local to the one machine. For that you can use Electron https://electronjs.org/ to wrap up all GUI and application/server code into a single program for local display.

Did I put you off the HTML/CSS/JS GUI idea yet....

For perspective, a few years ago when I created my first modern web application using HTML, JS, websockets, webgl for 3D real-time animation and node.js on the server it took me two months full time effort, including most weekends, to start from knowing nothing about any of that, except a distance memory of HTML, to getting something fit to demo to a customer as a simple, limited prototype. We had a tight deadline.

[John_Spikowski]

Wow 2 months. Your client must have had deep pockets.

[Heater]

John_Spikowski,

Wow 2 months. Your client must have had deep pockets.

Actually it's worse than that. It went a bit like this:

Our boss at the time suddenly decided he wanted a glossy 2-D animation of real-time events for display in the web browser. He wanted it to ready to be showable at a big trade expo we would be at in less than two months time.

At the time the only way to do this sort of thing was with FLASH. I had done some web development many years before and hated it. Didn't know anything about FLASH and hated it as well anyway. So I refused to have anything to do with it.

An expensive FLASH guru was hired to do it. I would take care of the required back end services to collect data from real world sensors and push it to FLASH the browser.

Well, I got the server end done soon enough and then had nothing much to do til the expo.

For some unknown reason I had heard of this new fangled HTML5 idea with it's webgl and web sockets. All still experimental. Only Chrome supported it and you had to set the right feature flags in Chrome to enable it. I thought that's neat, you mean I can write real code in the browser, construct a hardware accelerated graphics display and use something resembling a network socket, all without ever touching that ghastly HTML and CSS garbage? And I can use node.js to write real code in a web server without having to mess with that pig pile of poo Apache and PHP?

I started finding out how it worked... Starting from scratch, I knew nothing of Javascript or node.js, webgl, and the rest.

Turned out that by the expo time I had a working webgl version of what the boss ordered. The FLASH guru did not get his job finished on time. In fact it was never finished. My solution was shown at the expo.

Fellow software guys from other companies at the show saw it were intrigued and impressed. They told me I was crazy to do that though, it was too new and experimental, it did not work on IE, da, da, da.

I considered not working on IE a desirable feature. It was one of my proudest hours.

Today of course that stuff is common practice everywhere and FLASH is dead.

Ahead of my time again. With the typical consequence. That company went down a few years later...

[John_Spikowski]

Riding the wave can be costly.

I work with small companies with small budgets. They are more interested in getting the task completed then building on unproven buzz words.

[Heater]

That's a great strategy as well.

Of course missing the wave can be costly. You can be left stranded at low tide. Bla, bla.

Actually...when that director blurted out the web animation idea during a conference call I face palmed real hard and said the idea was daft. We had already developed a nice cross-platform application in C++ over a couple of years that did all that and a heck of lot more. I was really not into the whole cloud idea. I'm still not sold on it.

But oh no, I'm just the code monkey. Who would listen to me? Besides I had just demonstrated it was all possible. All that former desktop development ceased. The rest is history.

Today a few of us software refugees from that failed enterprise have picked up some projects that were stranded and spend a lot of time discussing with the clients about what they actually need. We are a lot more conservative. Have to be really, what with the total lack of money available to play with

[Shnx]

Iup and Lua might be worth looking at. Qt is too complex in my opinion.

Sorry for late reply. I don't know lup and lua yet
What I know is, C#, C++, VB, Java, Python, Batch

[Shnx]

It is a mobile/touch/Fullscreen UI

It is a Contactless RFID USB

I used PyQt5 to create GUI but I'm having a hard time understanding it, can't find a good tutorials on the web too. That's why I'm trying to to make a GUI using HTML with JS/CSS. But if you could suggest a better and easier way, please do so. I'm just an average programmer btw.

https://kivy.org/#home Might be easier to understand than Qt. Is Python your preferred language.

Have you already integrated with the RFID reader ?

Yes, python is one of my preferred language. Some are C++, C#, VB, Java
I'll try your suggestion

[Shnx]

Shnx,

Yes but do you mean "responsive" in the web developer context. That is to say changing layout with screen size and orientation. Or do you just main responsive like a normal GUI with mouse or touch, a fixed layout?

You have a long road ahead whichever way.

In order to adopt a modern WEB GUI you will need to learn some things, HTML, CSS and JS to start with. Never mind the GUI you want to create, learn them first. Luckily there are more tutorials, blogs, documentation, examples available for HTML/CSS/JS on the net than pretty much any other topic in computing. I'm sure if you did a quick google search for "learn HTML", "JS tutorial" and such combinations of keywords you would find many. There are also a lot of books available even free online.

For HTML there is always: https://www.w3schools.com/html/ full of reference material, examples, etc. They also have a lot of material on CSS and Javascript.

For my web efforts I use the bootstrap library: https://getbootstrap.com/docs/3.4/css/ to take care of all the CSS stuff, I hate dealing with CSS. Bootstrap gives you a lot of nicely styled buttons, check boxes, text boxes, forms, and all kind of other widgets, it also takes care of getting them layed out nicely. I like the cyborg theme: https://bootswatch.com/cyborg/ as in my simple page here: https://otaniemi.conveqs.fi/public/fibo.html

For complex GUI web GUI stuff I use the React javascript library: https://reactjs.org/

But then you have another problem: How to connect everything in the GUI in a browser or other web display to your actual application, for that you will need to find out how to communicate between web page and application. Your application needs to become a web server. They can then communicat using xmlhttprequest's https://www.w3schools.com/xml/xml_http.asp from Javascript or the new "fetch" API: https://developer.mozilla.org/en-US/doc ... /Fetch_API. If you need to push data from your application to the web GUI you will need websockets: https://developer.mozilla.org/en-US/doc ... ockets_API which is made much easier by using the socket.io library: https://socket.io/

Now, your application becomes a web server for that web GUI. For that I use node.js: https://nodejs.org/en/ Which has the advantage that one uses the same language, Javascript, for the web GUI and the application/server. Node.js has all kind of modules available for talking to serial ports, GPIO and whatever you may need.

Now, you may not want to use an actual web browser to display this GUI if your application is only local to the one machine. For that you can use Electron https://electronjs.org/ to wrap up all GUI and application/server code into a single program for local display.

Did I put you off the HTML/CSS/JS GUI idea yet....

For perspective, a few years ago when I created my first modern web application using HTML, JS, websockets, webgl for 3D real-time animation and node.js on the server it took me two months full time effort, including most weekends, to start from knowing nothing about any of that, except a distance memory of HTML, to getting something fit to demo to a customer as a simple, limited prototype. We had a tight deadline.

I don't have time to learn that everything It must be done before december But I appreciate your help so much! Maybe after this and when I have new projects, I'll look back here again I really much appreciated this!

[Shnx]

https://kivy.org/#home Might be easier to understand than Qt. Is Python your preferred language.

Is there any tutorials for this? Also, what should install? the Raspbian one or the windows one? I'm planning to code on windows first then move to RPi. Is it possible?

Have you already integrated with the RFID reader ?

Btw, not yet. My the RFID reader is still shipping.

[Shnx]

https://kivy.org/#home Might be easier to understand than Qt. Is Python your preferred language.

I'm having a trouble installing kivy. I currently using Python 3.8 64bit version.
This code works well:

Code: Select all

python -m pip install --upgrade pip wheel setuptools virtualenv

But when I got here:

Code: Select all

python -m pip install docutils pygments pypiwin32 kivy_deps.sdl2==0.1.22 kivy_deps.glew==0.1.12
python -m pip install kivy_deps.gstreamer==0.1.17

I'm getting an error:

Code: Select all

ERROR: Could not find a version that satisfies the requirement kivy_deps.sdl2==0.1.22 (from versions: none)
ERROR: No matching distribution found for kivy_deps.sdl2==0.1.22

and:

Code: Select all

ERROR: Could not find a version that satisfies the requirement kivy_deps.gstreamer==0.1.17 (from versions: none)
ERROR: No matching distribution found for kivy_deps.gstreamer==0.1.17

[Shnx]

While researching for alternative ways, I discovered MonoDevelop. What do you think guys?

[Shnx]

BUMP

[Heater]

Shnx,

... kivy. I currently using Python 3.8 64bit version.

That cannot work, not if you are using the regular Raspbian operating system which is a 32 bit OS.

Also out of the box Raspbian uses Python version 2.7.16. Python 3 stuff will not work without extra steps.

The instructions for installing kivy here look like they should work, even if it does say "Raspbian Jessie/Stretch" rather than the latest "Buster" version we are using now. At least when I do the "Install the dependencies:" step there my Pi finds everything. I did not actually install it as the is a headless machine and installing anything GUI wants to pull in about a giga byte of X Windows and desktop GUI junk.

I would not touch C# with a barge pole, but that is just me. I would not use Python either so I can't help much more than the above.

[John_Spikowski]

I would not touch C# with a barge pole, but that is just me. I would not use Python either so I can't help much more than the above.

I would like to subscribe to your do not use list.

[Heater]

Excellent. The "Do Not Use news letter" has new and exciting things not to use almost every day.

Remember to not use the Do Not Use recommendations now!