Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. now they want a pattern...
Forum Updated to NodeBB v4.3 + New Features

now they want a pattern...

Scheduled Pinned Locked Moved Solved QML and Qt Quick
16 Posts 3 Posters 1.8k Views 2 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.
  • mzimmersM Offline
    mzimmersM Offline
    mzimmers
    wrote on last edited by
    #6

    Lots of good suggestions...I went with what was easiest (for me), which was using an image:

    Rectangle {
    ...
        Image {
            id: highlight
            source: resourceHelper.imageSourcePrefix + "images/hatch.png"
            visible: (cellText === "S1")
            height: parent.height
            width: parent.width
            fillMode: Image.Pad
        }
    

    Produces this:
    highlight.PNG

    Thanks for all the good ideas.

    Oh, fcarney: the wiggle performance wasn't terrible, but it was quite subtle -- it took me a while to realize that anything was even changing.

    mz

    fcarneyF oria66O 2 Replies Last reply
    2
    • mzimmersM mzimmers

      Lots of good suggestions...I went with what was easiest (for me), which was using an image:

      Rectangle {
      ...
          Image {
              id: highlight
              source: resourceHelper.imageSourcePrefix + "images/hatch.png"
              visible: (cellText === "S1")
              height: parent.height
              width: parent.width
              fillMode: Image.Pad
          }
      

      Produces this:
      highlight.PNG

      Thanks for all the good ideas.

      Oh, fcarney: the wiggle performance wasn't terrible, but it was quite subtle -- it took me a while to realize that anything was even changing.

      mz

      fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #7

      @mzimmers That looks really nice.

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      0
      • mzimmersM mzimmers

        Lots of good suggestions...I went with what was easiest (for me), which was using an image:

        Rectangle {
        ...
            Image {
                id: highlight
                source: resourceHelper.imageSourcePrefix + "images/hatch.png"
                visible: (cellText === "S1")
                height: parent.height
                width: parent.width
                fillMode: Image.Pad
            }
        

        Produces this:
        highlight.PNG

        Thanks for all the good ideas.

        Oh, fcarney: the wiggle performance wasn't terrible, but it was quite subtle -- it took me a while to realize that anything was even changing.

        mz

        oria66O Offline
        oria66O Offline
        oria66
        wrote on last edited by
        #8

        @mzimmers Hi. I like the UI style. If all your items have round corners, maybe the cross-lined rectangle should have too, in order to maintain consistency.

        The truth is out there

        mzimmersM 1 Reply Last reply
        2
        • oria66O oria66

          @mzimmers Hi. I like the UI style. If all your items have round corners, maybe the cross-lined rectangle should have too, in order to maintain consistency.

          mzimmersM Offline
          mzimmersM Offline
          mzimmers
          wrote on last edited by mzimmers
          #9

          @oria66 oh man...I completely overlooked that. Good catch...thanks!

          EDIT:

          But...how does one radius an Image? I wonder if a different fill mode is the answer...?

          oria66O 1 Reply Last reply
          0
          • mzimmersM mzimmers

            @oria66 oh man...I completely overlooked that. Good catch...thanks!

            EDIT:

            But...how does one radius an Image? I wonder if a different fill mode is the answer...?

            oria66O Offline
            oria66O Offline
            oria66
            wrote on last edited by oria66
            #10

            @mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol. By the way, really love the color selection. Is it for an industry application? Kind of HMI?

            The truth is out there

            mzimmersM 1 Reply Last reply
            0
            • oria66O oria66

              @mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol. By the way, really love the color selection. Is it for an industry application? Kind of HMI?

              mzimmersM Offline
              mzimmersM Offline
              mzimmers
              wrote on last edited by
              #11

              @oria66 said in now they want a pattern...:

              @mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. ​In the name of consistency too, lol.

              Yep...that's actually a faithful representation of the rack. Bottles S2 and S3 share a long slot because there just wasn't room for a separator.

              By the way, really love the color selection. Is for an industry application? Kind of HMI?

              It's a medical research application. The customer supplied the colors. They're fine for the UI, but our attempt to use them for QR barcode symbols was not successful, so we're looking at alternatives.

              oria66O 1 Reply Last reply
              0
              • mzimmersM mzimmers

                @oria66 said in now they want a pattern...:

                @mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. ​In the name of consistency too, lol.

                Yep...that's actually a faithful representation of the rack. Bottles S2 and S3 share a long slot because there just wasn't room for a separator.

                By the way, really love the color selection. Is for an industry application? Kind of HMI?

                It's a medical research application. The customer supplied the colors. They're fine for the UI, but our attempt to use them for QR barcode symbols was not successful, so we're looking at alternatives.

                oria66O Offline
                oria66O Offline
                oria66
                wrote on last edited by
                #12

                @mzimmers mmm, I see. I don't think a fill mode property works for that kind of use. Maybe two options here: 1. Edit the image in an external editor (the easy way I believe). 2. Maybe, some crop function following a shape. I know this can be achieved with QPainter and QImage on the C++ side, but on the QML side, I don't know.

                The truth is out there

                1 Reply Last reply
                0
                • mzimmersM Offline
                  mzimmersM Offline
                  mzimmers
                  wrote on last edited by
                  #13

                  I don't think editing the image is the right approach, as the image is applied to bottles of multiple sizes (though I suppose I could create multiple files, one for each bottle size). Also, I'd have to do the radiusing by hand, and I don't have any editing tools for that.

                  oria66O 1 Reply Last reply
                  0
                  • mzimmersM mzimmers

                    I don't think editing the image is the right approach, as the image is applied to bottles of multiple sizes (though I suppose I could create multiple files, one for each bottle size). Also, I'd have to do the radiusing by hand, and I don't have any editing tools for that.

                    oria66O Offline
                    oria66O Offline
                    oria66
                    wrote on last edited by
                    #14

                    @mzimmers Maybe this can help you.

                    https://stackoverflow.com/questions/42432456/circular-image-in-qt-qml/42432691

                    The truth is out there

                    mzimmersM 1 Reply Last reply
                    1
                    • oria66O oria66

                      @mzimmers Maybe this can help you.

                      https://stackoverflow.com/questions/42432456/circular-image-in-qt-qml/42432691

                      mzimmersM Offline
                      mzimmersM Offline
                      mzimmers
                      wrote on last edited by
                      #15

                      @oria66 oh, that is a thing of beauty:

                        Rectangle {
                          id: bottle
                          property int radiusValue: 5 * bottleScaleFactor
                          radius: radiusValue
                      
                          Image {
                              id: highlight
                              source: resourceHelper.imageSourcePrefix + "images/hatch.png"
                              visible: (cellText.charAt(0) == "S")
                              height: parent.height
                              width: height
                              fillMode: Image.Pad
                              layer.enabled: true
                              layer.effect: OpacityMask {
                                  maskSource: opacityMask
                              }
                          }
                          Rectangle {
                              id: opacityMask
                              height: parent.height
                              width: height
                              visible: false
                              radius: parent.radiusValue
                          }
                      

                      highlight.PNG
                      (I changed it so the entire group is highlighted.)

                      Thank you SO much for finding that!

                      oria66O 1 Reply Last reply
                      1
                      • mzimmersM mzimmers

                        @oria66 oh, that is a thing of beauty:

                          Rectangle {
                            id: bottle
                            property int radiusValue: 5 * bottleScaleFactor
                            radius: radiusValue
                        
                            Image {
                                id: highlight
                                source: resourceHelper.imageSourcePrefix + "images/hatch.png"
                                visible: (cellText.charAt(0) == "S")
                                height: parent.height
                                width: height
                                fillMode: Image.Pad
                                layer.enabled: true
                                layer.effect: OpacityMask {
                                    maskSource: opacityMask
                                }
                            }
                            Rectangle {
                                id: opacityMask
                                height: parent.height
                                width: height
                                visible: false
                                radius: parent.radiusValue
                            }
                        

                        highlight.PNG
                        (I changed it so the entire group is highlighted.)

                        Thank you SO much for finding that!

                        oria66O Offline
                        oria66O Offline
                        oria66
                        wrote on last edited by
                        #16

                        @mzimmers glad to help.

                        The truth is out there

                        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