Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-49820

Qt icon and image versioning support update

    XMLWordPrintable

Details

    • f299b565b5904e39a47b6133643448e46810f0ed

    Description

      Unified icon set and image version handling for Qt Widgets and Qt Quick

      [By the lack of a better term, "version" refers to image properties such as size and scale, not scm revisions.]

      Key Change: Support differentiating between image size and image density.

      Example: starting with a 32x32 base image there are two ways to create a 64x64 variant:

      • Add more content - the version is intended to cover a larger visual area
      • Add more detail - the version is intended for higher density displays

      Current support in Qt (e.g. QIcon) folds these into one dimension “size”. This can be sufficient for many use cases, but we want Qt to have the support for making the distinction. This requires modifying API such as QIconProvider and QQuickImageProvider.

      Previous Work
      Icon support for Qt Quick Controls: https://wiki.qt.io/Icons_In_Qt_Quick_Controls

      Current Solutions In Qt

      • QIcon
      • @Nx

      Requirements

      • Performant
        • efficient run-time look up of correct pixmap variant
        • minimal memory usage: load correct pixmap variant for target display(s) only
      • Declarative format, independent of "user" API (QIcon vs QtQuick equivalent, devicePixelRatio vs other high-dpi implementation)
      • Modes and states support? (active/inactive/disabled etc)

      Current Solutions In Qt
      TODO
      Look at:

      • QImageIOHandler
      • QIcon
      • QIconProvider
      • QQuickImageProvider

      Other Solutions

      Google Maps API uses tile size and scale. The tile size here controls the resolution and is not a visual size: increasing it gives more detail, not more map content. See https://developers.google.com/maps/documentation/ios-sdk/tiles

      HTML 5
      Supports srcset with device-pixel-ratio based image selection:

      <img src="100-foo.png"
      srcset="150-foo.png 1.5x, 200-foo.png 2x" >
      

      HTML does not seem to support differentiating between 200-foo@1x.png and 100-foo@2x.png.

      New Icon type for Qt Quick

      QtWidgets currently has two container types: QIcon for multiple images, and QImage/Pixmap for single images. We could bring the same setup to Qt Quick and introduce the Icon type for representing multiple images. This type would then be used in many places where Image is used today.

      The counter-argument to this is that we want to simplify for Qt Quick: Today multi-resolution display support is the norm and the main (and only) Image type in Qt Quick should support it.

      Suggested image file schema
      Versioning-by-file-name:

      foo-32x32-@1x.png
      foo-64x64-@1x.png
      foo-32x32-@2x.png
      foo-64x64-@2x.png
      

      Use in Qt Widgets

      new QIcon("path/to/foo.png")
      

      Use in Qt Quick

      Icon {
          width : 32; height : 32 // the desired visual size (device independent pixels)
          source = "path/to/foo.png"
      }
      

      We would implement backends for QIcon and QML Icon and make loading efficient: The filesystem structure is only scanned once, and only the version actually displayed is loaded into memory.

      To avoid filesystem scanning we support a manifest file:

      foo.qticon:
         foo-32x32-@1x.png
         foo-64x64-@1x.png
         foo-32x32-@2x.png
         foo-64x64-@2x.png
      

      Related Issues
      QTBUG-44014

      Attachments

        1. quick-icon-test.zip
          8 kB
        2. quick-icon-test-12.zip
          8 kB
        3. quick-icon-test-15.zip
          8 kB
        4. quick-icon-test-28.zip
          22 kB
        5. widgets-icon-test.zip
          9 kB

        Issue Links

          Activity

            People

              mitch_curtis Mitch Curtis
              sorvig Morten Sørvig
              Votes:
              7 Vote for this issue
              Watchers:
              15 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: