Photoshop Question posted in
The official user guide can be found here.

problems updating color in QML – Photoshop

I am currently developing an opensource QML framework, for using within the development of my own apps, as well as on some opensource projects, sometimes I contribute to (i.e.: Supercollider)

Below follows a code that aims at creating a midi keyboard.

import QtQuick 2.0

Row {

    property var keyboardModelData: [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];
    property var keyboardKey: 0
    property var midiNote: 0

    id: midiKeyboardRoot
    visible: true
    anchors.fill: parent

    Repeater {
        id: midiKeyboardRepeater
        visible: true
        anchors.fill: parent
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent. top
        anchors.bottom: parent.bottom
        model: keyboardModelData

        delegate: Rectangle {
            id: keyNote
            visible: true
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: root.width / (midiKeyboardRepeater.model.length)
            border.color: keyboardModelData[index] == 0 ? "black" : "white"
            color: keyboardModelData[index] == 0 ? "white" : "black"

            states: [
                    State {
                        name: "BLUE"
                        when: keyBoardMouseArea.pressed;
                        PropertyChanges { target: keyNote[index]; color: Qt.rgba(0, 255, 255, 255)}
                    },
                    State {
                        name: "NORMAL"
                        when: keyBoardMouseArea.released;
                        PropertyChanges { target: keyNote[index]; color: keyboardModelData[index] == 0 ? "white" : "black"}
                    }
                ]

            MouseArea {
                id: keyBoardMouseArea
                anchors.fill: parent
                onPressed:  {
                    keyboardKey = index;
                    midiNote = 60 + index
                    console.log(keyboardKey);
                    console.log(midiNote);
                }
                onReleased: {
                    keyboardKey = 0;
                    midiNote = 0;
                    console.log(keyboardKey);
                    console.log(midiNote);
                }
            }
        }
    }
}

The code is instantiated in:

import QtQuick 2.0
import QtQuick.Window 2.0

Window {

    id: root
    width: 640
    height: 320
    minimumWidth: 640
    maximumWidth: 640
    minimumHeight: 320
    maximumHeight: 320
    visible: true
    title: qsTr("instantiationTest")
    color: "black"

        // Button1 {}            // the button looks good and is working fine, feedback is welcome
        // Button1_1 {}          // the button looks good and is working fine, feedback is welcome
        // Button2 {}            // the button looks good and is working fine, feedback is welcome
        // Button2_2 {}            // the button looks good and is working fine, feedback is welcome
        // Button3 {}            // the button is working fine, but looking terribly. feedback is welcome
        // Button3_3 {}
        // Button4 {}            // the button is working fine, but looking terribly. feedback is welcome
        // Button4_4 {}
        // Slider1 {}            // slider looks good but is buggy and faulty. feedback is welcome
        // Toggle1 {}            // toggle looks good nad is working fine. feedback is welcome
        // Toggle2 {}            // toggle looks good nad is working fine. feedback is welcome
        // Radial {}             // radial looks good and is working fine. feedback is welcome
        // Switch {}             // switch works fine. images need to be treated in photoshop, to keep black background and same size. feedback is welcome
        // UpDownArrows {}       // working and looking fine. needs some twweaking within dimensions cropping
        // PlayStop {}           // looks and works perfectly.feedback is welcome, however
        // Click1 {}             // looks and works perfectly. needs mouseX and mouseY coordinates
        // Click2 {}             // looks and works perfectly. needs mouseX and mouseY coordinates
        MidiKeyboard {}
}

And the name of the first file is MidiKeyboard.qml
I am currently trying to update the colors of the keybaord.
My algorithm is:

If modeldata índex == 1 color is default white
otherwise black

If the mouse is preside on top of the Keys, the current key updates to Qt.rgba (0, 1, 1, 1). When mouse is released, the key returns to default value.

Currently, the mouse key/release is not working properly.

My doubt is: how can I fix this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Now I have set it to:

    import QtQuick 2.0

Row {

    property var keyboardModelData: [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0];
    property var keyboardKey: 0
    property var midiNote: 0
    property var holdKeyValue: 0

    id: midiKeyboardRoot
    visible: true
    anchors.fill: parent

    Repeater {
        id: midiKeyboardRepeater
        visible: true
        anchors.fill: parent
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent. top
        anchors.bottom: parent.bottom
        model: keyboardModelData




        delegate: Rectangle {
            id: keyNote
            visible: true
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            width: root.width / (midiKeyboardRepeater.model.length)
            border.color: keyboardModelData[index] == 0 ? "black" : "white"
            color: keyboardModelData[index] == 0 ? "white" : "black"

            MouseArea {
                id: keyBoardMouseArea
                anchors.fill: parent
                onPressed:  {
                    keyboardKey = index;
                    midiNote = 60 + index;
                    holdKeyValue = keyboardModelData[index];
                    keyboardModelData[index] = 2;
                    if(keyboardModelData[index] == 2) {keyNote.color = Qt.rgba(0, 255, 255, 255);};
                }
                onReleased: {
                    keyboardKey = 0;
                    midiNote = 0;
                    keyboardModelData[index] = holdKeyValue;
                    keyNote.color = keyboardModelData[index] == 0 ? "white" : "black"
                }
            }
        }
    }
}

    And it works.


  2. 0

    I was able to change the key to blue when pressed like this:

    State {
    name: "BLUE"
    when: keyBoardMouseArea.pressed;
    PropertyChanges { target: keyNote; color: Qt.rgba(0, 255, 255, 255)}
}

    So basically just remove the [index] after keyNote, since referencing to the delegate already points to the current element of the repeater.

    Also, there was no need for the other state, since the BLUE state is only visible when the whencondition evaluates to true.

    Another way of achieving this would be just binding the pressed-state to the color in the delegate:

    color: {
    if (keyBoardMouseArea.pressed)
        return Qt.rgba(0, 255, 255, 255)
    else if ( keyboardModelData[index] == 0)
        return "white"
    else
        return "black"
}

    Edit: I was talking about some other edits but they were actually not needed in your situation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search