Seperate image into 4 buttons



  • Hi all,

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

    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


  • Qt Champions 2017

    @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 ?



  • 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



  • 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)



  • 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



  • @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//.....
    }
    


  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.