Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Qt for MCUs
  4. Highlight property in Qt for MCU
Forum Updated to NodeBB v4.3 + New Features

Highlight property in Qt for MCU

Scheduled Pinned Locked Moved Unsolved Qt for MCUs
11 Posts 3 Posters 2.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Sachin_Og

    I am trying to implement ListView.
    I want to highlight the current item with a rectangular border.
    It was possible earlier using the highlight property, but this property is missing from QUL.
    Here is a code snippet:

    ListView {
            id: listView
    
            anchors.fill: root
            anchors.topMargin: 32
            anchors.bottomMargin: 20
    
            model:myModel
    
            delegate: listDelegate
    
            highlight: Item 
            {
                Rectangle {
                    anchors.centerIn: parent
                    width: parent.width + 8
                    height: parent.height + 8
                    color: "transparent"
    
                    radius: 8
                }
            }
        }
    

    When I try to build I get:
    error: Binding on property of unknown type
    highlight: Item {

    Any suggestions on how to achieve this?

    -Thanks

    J.HilkJ Offline
    J.HilkJ Offline
    J.Hilk
    Moderators
    wrote on last edited by J.Hilk
    #2

    @Sachin_Og inside your listDelegate you can check for being the current item and change the background color in there to reflect that, for example:

    ListView{
            id:lView
            anchors.fill: parent
    
            model: 10
    
            delegate: Rectangle{
                width: lView.width
                height: 20
                property bool highlight: lView.currentIndex == index
    
                color: highlight ? "red" : "green"
                Text {
                    id:te
                    text: index
                    anchors.centerIn: parent
                }
    
                MouseArea{
                    onClicked: lView.currentIndex = index
                    anchors.fill: parent
                }
            }
        }
    

    Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


    Q: What's that?
    A: It's blue light.
    Q: What does it do?
    A: It turns blue.

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Sachin_Og
      wrote on last edited by
      #3

      Thank you @J-Hilk for the quick response.
      However I am facing an error
      error: Type lView_ListView does not have a property currentIndex for reading
      and again for writing as well.

      Is there something I missed.
      I have imported QtQuick 2.0 and QtQuick.Controls 2.0.

      -Thanks

      J.HilkJ 1 Reply Last reply
      0
      • S Sachin_Og

        Thank you @J-Hilk for the quick response.
        However I am facing an error
        error: Type lView_ListView does not have a property currentIndex for reading
        and again for writing as well.

        Is there something I missed.
        I have imported QtQuick 2.0 and QtQuick.Controls 2.0.

        -Thanks

        J.HilkJ Offline
        J.HilkJ Offline
        J.Hilk
        Moderators
        wrote on last edited by
        #4

        @Sachin_Og I don't have Qt for MCU, but currentIndex is available in 2.0 versions of QQuick for desktop

        Can you show your code, where this problem arises ?


        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


        Q: What's that?
        A: It's blue light.
        Q: What does it do?
        A: It turns blue.

        1 Reply Last reply
        0
        • S Offline
          S Offline
          Sachin_Og
          wrote on last edited by
          #5

          I copy pasted your code directly to understand its behaviour.
          and the problem arises in following lines:

          property bool highlight: lView.currentIndex == index
          

          and

          onClicked: lView.currentIndex = index
          

          Also I believe there are several properties that are removed from Qt for MCU due to memory constraints.
          Qt for MCU uses only Qt ultralite library as per my understanding.
          Hence I am facing such issues otherwise a lot of Desktop solutions are available in various forums.

          -Thanks

          J.HilkJ 1 Reply Last reply
          0
          • S Sachin_Og

            I copy pasted your code directly to understand its behaviour.
            and the problem arises in following lines:

            property bool highlight: lView.currentIndex == index
            

            and

            onClicked: lView.currentIndex = index
            

            Also I believe there are several properties that are removed from Qt for MCU due to memory constraints.
            Qt for MCU uses only Qt ultralite library as per my understanding.
            Hence I am facing such issues otherwise a lot of Desktop solutions are available in various forums.

            -Thanks

            J.HilkJ Offline
            J.HilkJ Offline
            J.Hilk
            Moderators
            wrote on last edited by
            #6

            @Sachin_Og well, as long as index is available...

            ListView{
                    id:lView
                    anchors.fill: parent
            
                   property int currentIndex: -1
            
                    model: 10
            
                    delegate: Rectangle{
                        width: lView.width
                        height: 20
                        property bool highlight: lView.currentIndex == index
            
                        color: highlight ? "red" : "green"
                        Text {
                            id:te
                            text: index
                            anchors.centerIn: parent
                        }
            
                        MouseArea{
                            onClicked: lView.currentIndex = index
                            anchors.fill: parent
                        }
                    }
                }
            

            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


            Q: What's that?
            A: It's blue light.
            Q: What does it do?
            A: It turns blue.

            1 Reply Last reply
            0
            • S Offline
              S Offline
              Sachin_Og
              wrote on last edited by
              #7

              Thankyou @J-Hilk that works.
              However when I try to change

              color: highlight ? "red" : "green"
              

              to

              border.color: highlight ? "red" : "green"
              

              The compiler wont allow it saying:
              error: Group property of unknown type
              border.color: "green"

              Is this again related to Qt for MCU or I did something wrong?

              -Thanks

              J.HilkJ 1 Reply Last reply
              0
              • S Sachin_Og

                Thankyou @J-Hilk that works.
                However when I try to change

                color: highlight ? "red" : "green"
                

                to

                border.color: highlight ? "red" : "green"
                

                The compiler wont allow it saying:
                error: Group property of unknown type
                border.color: "green"

                Is this again related to Qt for MCU or I did something wrong?

                -Thanks

                J.HilkJ Offline
                J.HilkJ Offline
                J.Hilk
                Moderators
                wrote on last edited by
                #8

                @Sachin_Og well, that seems right, looks like a restriction of Qt for MCU, but a serious one oO


                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                Q: What's that?
                A: It's blue light.
                Q: What does it do?
                A: It turns blue.

                J.HilkJ 1 Reply Last reply
                0
                • J.HilkJ J.Hilk

                  @Sachin_Og well, that seems right, looks like a restriction of Qt for MCU, but a serious one oO

                  J.HilkJ Offline
                  J.HilkJ Offline
                  J.Hilk
                  Moderators
                  wrote on last edited by
                  #9

                  @J-Hilk

                  quick and dirty and probably not really suited for MCU (when they removed the border property to begin with)

                  ListView{
                          id:lView
                          anchors.fill: parent
                  
                          model: 10
                  
                          delegate: Item{
                              width: lView.width
                              height: 20
                              property bool highlight: lView.currentIndex == index
                  
                              Canvas{
                                  anchors.fill:parent
                                  property color borderColor: highlight ? "red" : "green"
                  
                                  onPaint:{
                                      var ctx = getContext("2d");
                                      ctx.beginPath();
                                      ctx.rect(0, 0, width, height);
                                      ctx.strokeStyle = borderColor;
                                      ctx.stroke();
                                  }
                              }
                  
                              Text {
                                  id:te
                                  text: index
                                  anchors.centerIn: parent
                              }
                  
                              MouseArea{
                                  onClicked: lView.currentIndex = index
                                  anchors.fill: parent
                              }
                          }
                      }
                  

                  Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                  Q: What's that?
                  A: It's blue light.
                  Q: What does it do?
                  A: It turns blue.

                  1 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    Sachin_Og
                    wrote on last edited by
                    #10

                    @J-Hilk It does not support Canvas either.
                    Anyways atleast I got highlight part with your help.

                    I will probably try 2 rectangles or borderImage and update here if it fits my goal.

                    -Thanks

                    A 1 Reply Last reply
                    1
                    • S Sachin_Og

                      @J-Hilk It does not support Canvas either.
                      Anyways atleast I got highlight part with your help.

                      I will probably try 2 rectangles or borderImage and update here if it fits my goal.

                      -Thanks

                      A Offline
                      A Offline
                      auri
                      wrote on last edited by
                      #11

                      @Sachin_Og https://doc.qt.io/QtForMCUs/qml-qtquick-borderimage.html#border-prop so border.color property is missing. Can you raise a feature request for this from the Support Portal of your Qt Account?

                      51ED9BD6-D75D-4010-8BCC-4929FF907284.jpeg

                      DON'T PANIC!!

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved