PNG Image on QLabel Behind Touch Screen

nightowl

Hey Folks,
If I got a powerpoint slide with buttons and a small cell phone size keyboard, and I save it as a PNG file. I put it on a QLabel via pixmap. And my embedded linux on a imx8mm Evkit displays it behind the connected touch screen. Now can the Qt GUI tool get the screen touches that are on the buttons and the little keyboard, and send some function code a signal/slot that will allow the code to process what was touched....hmmm...maybe or Not!!??? Or do I need to use some "low level" GUI tool, like say...LVGL. Or Qt needs a Qwidget on that PNG slide, etc....

jsulm

@nightowl Not sure I understand your description correctly.
If you want to get touch events from your QLabel subclass QLabel and override https://doc.qt.io/qt-5/qlabel.html#mousePressEvent
It will be your job to find out (calculate) what key on the keyboard image was pressed (you get the coordinates in the event (https://doc.qt.io/qt-5/qmouseevent.html#pos).

nightowl

@jsulm well that I did not expect...I think you understand my description...a touch screen with a png image...Qt'd in a QLabel...the png slide has buttons and a small keyboard...graphics design lady did slides with AdobeXD...let me see if I understand your links...maybe I don't have to do anything but map the touch screen (720x1280 pixels) to the images and call the appropriate function to process the key pressed/touched...DO the touch coordinates in the event come from the OS ( Windows or embedded Linux in my case)...THANKS MUCH...DO NOT GO AWAY!!!

SGaist

Hi,

It's the other way around, in the mousePressEvent you will decide what to do based on the coordinates.

One other possibility would be to slice that image and recompose it in your application.

Or use the Graphics View Framework to add transparent items on top of your main image to handle the various possible interactions. It could be also used for the above recomposition suggestion.

nightowl

@SGaist
ok, are you saying ill get these 2 events:
int QMouseEvent::x() const and int QMouseEvent::y() const
what is...slice the image...means what...

SGaist

No you get one mouse event with all the informations.

By sliced I meant cutting the image in it's different interactive components. What you designer should have provided you with.

nightowl

QMouseEvent::QMouseEvent...maybe this one...not sure how to set this up...

nightowl

@SGaist
it seems that the customer(designer) has designed the screens with the look&feel that they want. At least that seems to be the case for the "looks like" setup I saw on Tuesday...i've used Qt a few times in the past (2015&2017...v4.8), but it was all Qwidgets...never had to process x&y pixel locations...i did that kinda thing around 1985 or so...HP Apollo workstation running Aegis/DomainOS/UNIX-like...back then I mapped the entire 1280x1024 screen...buttons in the 256x1024 area on the right and 1024x1024 air situation area on the left...COTS system for an air traffic control contract bid while working for a DOD contractor...in my day...lol....Now if the customer designer wants his png slides to come to "life" behind the touch screen, can I just map the 720x1280 screen using a 2 dimensional array with a unique Number for the GUI items on the png image...do a switch case on the Number and process accordingly...will have to have a QTextEdit/LineEdit/PlainTextEdit...to display/delete the entries from the small keyboard, etc...Plus i got some circular progress bars i will have to create...that may require some "image slicing"...what's your take/thoughts...Thanks!!!

SGaist

Depending on the target device QtQuick might be worth a check.

nightowl

@SGaist
ok...thanks...
Is there a cell phone size keyboard widget available in Qt...?

SGaist

The QtVirtualKeyboard module ?
Note that this module is dual licensed GPL/Commercial.

nightowl

@SGaist
how do I size the keyboard to be small like a cell phone keyboard?

SGaist

Based on the documentation you shall set its width so that the height get calculated for the value you want.

nightowl

@SGaist thanks much!!