Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Efficient way for blinking some items in a repeater
Qt 6.12 LTS is out! See what's new in the release blog

Efficient way for blinking some items in a repeater

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 2 Posters 4.1k Views 1 Watching
  • 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.
  • AlienA Offline
    AlienA Offline
    Alien
    wrote on last edited by Alien
    #1

    Hey,
    What is an efficient way for blinking some items in a repeater I use QT 5.10.1 and implement below code inside a repeater :
    some variable such as (is_visible,icon_visiblity,property_value,blinking,etc) come from my c++ model which is inherited from QAbstractListModel

    
    Item
    {
        Row
        {
            id:rowID
            spacing: 5
            y: index * 25
            property bool isBlink: false
            visible: is_visible
    
            Rectangle
            {
                width: 18
                height: 18
                color:"#00000000"
                Image
                {
                    id: iconID
                    source:icon_url
                    fillMode: Image.PreserveAspectFit
                    anchors.fill: {parent.Center}
                    visible:icon_visiblity
                }
            }
            Text
            {
                id: propertyNameID
                text: property_name
                color: (enable)?property_name_color:"grey"
                font.bold: true
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                style: Text.Outline
                styleColor: "black"
            }
            Text
            {
                id: propertyValueID
                text: property_value
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                color: (enable)?property_value_color:"grey"
                style: Text.Outline
                styleColor: "black"
    
            }
    
            state: "show"
    
            states:
            [
                State
                {
                    name: "hide";
                    PropertyChanges { target: rowID; opacity:0.0}
                },
                State
                {
                    name: "show";
                    PropertyChanges { target: rowID; opacity:1.0}
                }
            ]
    
            transitions: Transition
            {
                from: "show"; to: "hide"; reversible: true
                PropertyAnimation
                {
                    properties: "opacity"
                    duration: 300
                }
            }
    
            Timer
            {
                interval: 300
                running:
                {
                    if(blinking)
                    {
                        true
                    }
                    else
                    {
                        if(is_visible)
                        {
                            rowID.state = "show"
                        }
                        else
                        {
                            rowID.state = "hide"
                        }
                        false
                    }
                }
                repeat:blinking
    
                onTriggered:
                {
                    if(blinking)
                    {
                    if(rowID.state === "show")
                        rowID.state = "hide"
                    else
                        rowID.state = "show"
                    }
                    else
                    {
                            rowID.state = "show"
                    }
                }
            }
        }
    }
    

    It seems slow specially when multiple items are blinking in runtime does it exist any better way to doing that?

    Yours,

    DiracsbracketD 1 Reply Last reply
    0
    • AlienA Alien

      Hey,
      What is an efficient way for blinking some items in a repeater I use QT 5.10.1 and implement below code inside a repeater :
      some variable such as (is_visible,icon_visiblity,property_value,blinking,etc) come from my c++ model which is inherited from QAbstractListModel

      
      Item
      {
          Row
          {
              id:rowID
              spacing: 5
              y: index * 25
              property bool isBlink: false
              visible: is_visible
      
              Rectangle
              {
                  width: 18
                  height: 18
                  color:"#00000000"
                  Image
                  {
                      id: iconID
                      source:icon_url
                      fillMode: Image.PreserveAspectFit
                      anchors.fill: {parent.Center}
                      visible:icon_visiblity
                  }
              }
              Text
              {
                  id: propertyNameID
                  text: property_name
                  color: (enable)?property_name_color:"grey"
                  font.bold: true
                  font.pointSize: 12
                  verticalAlignment: Text.AlignVCenter
                  style: Text.Outline
                  styleColor: "black"
              }
              Text
              {
                  id: propertyValueID
                  text: property_value
                  font.pointSize: 12
                  verticalAlignment: Text.AlignVCenter
                  color: (enable)?property_value_color:"grey"
                  style: Text.Outline
                  styleColor: "black"
      
              }
      
              state: "show"
      
              states:
              [
                  State
                  {
                      name: "hide";
                      PropertyChanges { target: rowID; opacity:0.0}
                  },
                  State
                  {
                      name: "show";
                      PropertyChanges { target: rowID; opacity:1.0}
                  }
              ]
      
              transitions: Transition
              {
                  from: "show"; to: "hide"; reversible: true
                  PropertyAnimation
                  {
                      properties: "opacity"
                      duration: 300
                  }
              }
      
              Timer
              {
                  interval: 300
                  running:
                  {
                      if(blinking)
                      {
                          true
                      }
                      else
                      {
                          if(is_visible)
                          {
                              rowID.state = "show"
                          }
                          else
                          {
                              rowID.state = "hide"
                          }
                          false
                      }
                  }
                  repeat:blinking
      
                  onTriggered:
                  {
                      if(blinking)
                      {
                      if(rowID.state === "show")
                          rowID.state = "hide"
                      else
                          rowID.state = "show"
                      }
                      else
                      {
                              rowID.state = "show"
                      }
                  }
              }
          }
      }
      

      It seems slow specially when multiple items are blinking in runtime does it exist any better way to doing that?

      Yours,

      DiracsbracketD Offline
      DiracsbracketD Offline
      Diracsbracket
      wrote on last edited by Diracsbracket
      #2

      @Alien
      One possible simplification of your rather convoluted construction is as follows:

      Item
      {
          id: delegateItem
      
          Row
          {
              id:rowID
              spacing: 5
              y: index * 25
              property bool isBlink: false
      
              Rectangle
              {
                  width: 18
                  height: 18
                  color:"#00000000"
                  Image
                  {
                      id: iconID
                      source:icon_url
                      fillMode: Image.PreserveAspectFit
                      anchors.fill: {parent.Center}
                      visible:icon_visiblity
                  }
              }
              Text
              {
                  id: propertyNameID
                  text: property_name
                  color: (enable)?property_name_color:"grey"
                  font.bold: true
                  font.pointSize: 12
                  verticalAlignment: Text.AlignVCenter
                  style: Text.Outline
                  styleColor: "black"
              }
              Text
              {
                  id: propertyValueID
                  text: property_value
                  font.pointSize: 12
                  verticalAlignment: Text.AlignVCenter
                  color: (enable)?property_value_color:"grey"
                  style: Text.Outline
                  styleColor: "black"
              }
          }
          
          state: isBlink? "blinking" : ""
          
          states: [
              State {
                  name: "blinking"
                  when: isBlink
              }
          ]
      
          transitions: [
              Transition {
                  from: "" //Default state
                  to: "blinking"
      
                  SequentialAnimation {
                      loops: Animation.Infinite
                      PropertyAnimation {target: delegateItem; property: "opacity"; from: 1.0; to: 0.0; duration: 500 }
                      PropertyAnimation {target: delegateItem; property: "opacity"; from: 0.0; to: 1.0; duration: 500 }
                  }
              }
          ]    
      }
      

      There may even be better solutions, but I'm not particularly good at animations yet so, hopefully, someone with more QML and Qt experience can help you further.

      1 Reply Last reply
      2

      • Login

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