• Home

Density Independence Examples

 import Felgo 4.0
 import QtQuick 2.0
 import QtQuick.Window 2.0 // needed for the Screen type

 GameWindow {
   id: gameWindow

   property bool dpMode: true
   activeScene: scene

   Scene {
     id: scene

     // this uses the max space for both orientations in content scaling
     width: landscape ? 480 : 320
     height: landscape ? 320 : 480

     ListView {
       // make it take the whole window, not only the logical scene size 480x320
       anchors.fill: scene.gameWindowAnchorItem

       model: [
         "ScreenDpi: " + screenDpi,
         "DevicePixelRatio: " + devicePixelRatio,
         // the + is added by Qt FileSelectors, thus put your images into the +hd, +hd2 subfolders so the high dpi images are used
         "MultiResolutionImage Selector: +" + fileSelectorForImages + " (" + contentScaleFactorForImages + "x)",
         "GameWindow pixels: " + gameWindow.width + " x " + gameWindow.height,
         "GameWindow physical pixels: " + physicalPixels(gameWindow.width) + " x " + physicalPixels(gameWindow.height),
         "Scene virtual pixels: " + scene.width + " x " + scene.height,
         "Scene Content Scale Factor (x|y): " + scene.xScaleForScene.toFixed(2) + " | " + scene.yScaleForScene.toFixed(2),
         "Scene scaleMode: " + scene.scaleMode,
         "Display diameter size [inches]: " + diameterInInches.toFixed(2),
         "Display size [inches]: " + widthInInches.toFixed(2) + " x " + heightInInches.toFixed(2),
         "Display size [dp]: " + dp(gameWindow.width).toFixed(2) + " x " + dp(gameWindow.height).toFixed(2),
         "Tablet: " + tablet,
         "Landscape: " + landscape,
         "MultiResolutionImage SelectorList: " + fileSelectorListForImages,
         // dummy data, to see that different amount of rows fit in the density mode
         "", "", "", "", "", "", "", "", "", "", "", ""

       ]

       delegate: Rectangle {

         color: index%2 === 0 ? "lightgrey" : "lightblue"

         width: parent.width
         height: dpMode ? scene.dp(40) : 40

         Row {
           anchors.verticalCenter: parent.verticalCenter
           spacing: scene.dp(40)
           height: parent.height

           Text {
             text: "Row " + (index + 1)
             font.pixelSize: parent.height * 0.5
             anchors.verticalCenter: parent.verticalCenter
           }

           Text {
             text: modelData
             // make a bit smaller, to also fit the content on smaller screens
             font.pixelSize: parent.height * 0.5
             anchors.verticalCenter: parent.verticalCenter
           }
         }

       }// Rectangle

     }// ListView

     SimpleButton {
       opacity: 0.5
       anchors.top: scene.gameWindowAnchorItem.top
       anchors.right: scene.gameWindowAnchorItem.right
       font.pixelSize: 12

       text: "Mode: " + (dpMode ? "density-independent" : "content-scaled")
       onClicked: dpMode = !dpMode
     }