Seperate image into 4 buttons

TMJJ001

Hi all,

For an embedded system I would like to create 4 buttons from the following image.

So I'm able to push Go and End on my touchscreen. I don't know how to do this.
I thought I should use QML, but I have no experience at all with this. Is there an other way? just with C++ code?

Thanks in advance,
Kind regards,
Toon

mrjj

@TMJJ001
Hi
How static is the size ?
Also, do you want pressed down graphically effect ?
You could very easy overlay a push button and style it to be invisible or simply use
a custom widget like
https://wiki.qt.io/Clickable_QLabel
and put where you want the label and click zone.

A fancy version version would also be a custom widget but with multiple images
internally to show press down effect etc.
But since it would be images, it would be heavy(er) if really small board.

so how fancy do you want/need it ?

TMJJ001

Hi mrjj,

Thanks for the quick reply.
I will have a look at the clickable_Qlabel.
For the start I want to keep it simple. Maybe I will make it more fancy in the future.

First I will try this.
Thanks

mvuori

Fill your main widget with the image. Create for transparent buttons over that.
Just use transparent background for each button (and no text).
Use exact positioning for the buttons (no layout)

stefnie

Splitting images is another great image processing tool provided by ImageSpliter. It just slices images in even parts. The only thing a user needs to tell ImageSplitter, in this case, is how many rows and columns of slicing he wants to have on the image. and if you have any query related to the powerpoint then visit MS PowerPoint Customer Care Helpline

J.Hilk

@TMJJ001 said in Seperate image into 4 buttons:

So I'm able to push Go and End on my touchscreen. I don't know how to do this.
I thought I should use QML, but I have no experience at all with this.

This should be rather easy with qml.

You can make your own mouse area with a simple QML file, example round mousearea:

import QtQuick 2.0

Item {
    id: roundMouseArea

    property alias mouseX: mouseArea.mouseX
    property alias mouseY: mouseArea.mouseY

    property bool containsMouse: {
        var x1 = width / 2;
        var y1 = height / 2;
        var x2 = mouseX;
        var y2 = mouseY;
        var distanceFromCenter = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
        var radiusSquared = Math.pow(Math.min(width, height) / 2, 2);
        var isWithinOurRadius = distanceFromCenter < radiusSquared;
        return isWithinOurRadius;
    }

    readonly property bool pressed: containsMouse && mouseArea.pressed

    signal clicked

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: if (roundMouseArea.containsMouse) roundMouseArea.clicked()
    }
}

You'll have messure the length/width ratio of your Image to the areas, where you want an mouse Area and you're done: example:

//Assuming no white/transparent area between image border and the colored object. And the radius of the go button is 1/4 of the total height
Image{
   id: root
   source: "pathToImage"

  signal goLeftClicked()

  RoundMouseArea{
     anchors.verticalCenter: parent.verticalCenter
     x: 0
     width: parent.height/4
     height: parent.height/4
     onClicked: root.goLeftClicked()
  }

....//other buttons//.....
}

ArianaDamon

I found the below code that work great. It divide image into 9 parts. By using it you can divide image into 4 parts as well.
public Bitmap[] splitBitmap(Bitmap picture)
{
Bitmap scaledBitmap = Bitmap.createScaledBitmap(picture, 240, 240, true);
Bitmap[] imgs = new Bitmap[9];
imgs[0] = Bitmap.createBitmap(scaledBitmap, 0, 0, 80 , 80);
imgs[1] = Bitmap.createBitmap(scaledBitmap, 80, 0, 80, 80);
imgs[2] = Bitmap.createBitmap(scaledBitmap,160, 0, 80,80);
imgs[3] = Bitmap.createBitmap(scaledBitmap, 0, 80, 80, 80);
imgs[4] = Bitmap.createBitmap(scaledBitmap, 80, 80, 80,80);
imgs[5] = Bitmap.createBitmap(scaledBitmap, 160, 80,80,80);
imgs[6] = Bitmap.createBitmap(scaledBitmap, 0, 160, 80,80);
imgs[7] = Bitmap.createBitmap(scaledBitmap, 80, 160,80,80);
imgs[8] = Bitmap.createBitmap(scaledBitmap, 160,160,80,80);
return imgs;
}
The function takes the original bitmap as a parameter, then using the Bitmap.createScaledBitmap(picture, 240, 240, true); i created a scaled image of size 240 x 240 to split the image into equal pieces, i have created a 3 x 3 by grid, in which each image’s size is of 80 x 80. This can be changed as per your needs, but the width should be kept to 240, because all the normal android phone screens are 240 dip wide.
All the bitmaps are stored in a bitmap array, and finally the function returns the array back to the calling function.