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

Highlight property in Qt for MCU

Scheduled Pinned Locked Moved Unsolved Qt for MCUs
11 Posts 3 Posters 2.7k 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 Online
    J.HilkJ Online
    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 Online
        J.HilkJ Online
        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 Online
            J.HilkJ Online
            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 Online
                J.HilkJ Online
                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 Online
                  J.HilkJ Online
                  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