SpeakerImage.qml Example File

appdemos/qtws/qml/common/SpeakerImage.qml
 import Felgo 3.0
 import QtQuick 2.0

 Rectangle {
   id: speakerImg
   width: webImg.implicitWidth
   height: webImg.implicitHeight

   color: Theme.backgroundColor
   border.color: Theme.secondaryTextColor
   border.width: dp(1)
   radius: width * 0.5

   readonly property bool loaded: webImg.img.status === Image.Ready
   readonly property bool loading: webImg.loading

   property bool activatePictureViewer: false

   property alias img: webImg
   property alias defaultImg: defaultImg
   property alias source: webImg.actualSource
   property real padding: dp(6)

   Component.onCompleted: {
     // custom fix for KDAB image
     if(webImg.source.toString().indexOf("KDAB_logo.png") > 0) {
       webImg.fillMode = Image.PreserveAspectFit
     }
   }

   RoundedImage {
     id: defaultImg
     anchors.fill: webImg
     radius: webImg.radius
     img.defaultSource: Qt.resolvedUrl("../../assets/icon_engineer.png")
     img.asynchronous: true
     visible: !webImg.visible
   }

   RoundedImage {
     id: webImg
     width: parent.width - padding
     height: parent.width - padding
     anchors.centerIn: parent
     radius: parent.radius / parent.width * width
     source: actualSource
     visible: img.status === Image.Ready
     img.asynchronous: true
     img.sourceSize.width: 100
     img.sourceSize.height: 100

     fillMode: Image.PreserveAspectCrop

     property string actualSource: ""
     property bool loading: false

     // handle loading status for image
     Connections {
       target: webImg.img
       onStatusChanged: {
         if(webImg.img.status === Image.Loading && !webImg.loading)
           webImg.loading = true
         else if(webImg.img.status !== Image.Loading && webImg.loading)
           webImg.loading = false
       }
     }

     // reload image be resetting source property
     function reload() {
       webImg.source = ""
       webImg.source = Qt.binding(function() { return actualSource })
     }
   }

   // allow image reload on clicking if failed before, or call picture viewer
   MouseArea {
     enabled: (webImg.img.status !== Image.Ready && webImg.img.status !== Image.Loading) || activatePictureViewer
     anchors.fill: parent
     onClicked: {
       if(webImg.img.status !== Image.Ready && webImg.img.status !== Image.Loading)
         webImg.reload()
       else
         PictureViewer.show(getApplication(), webImg.source, false)
     }
   }

   // auto-reload image when device is online again
   Connections {
     target: webImg.img.status !== Image.Ready ? getApplication() : null
     onIsOnlineChanged: if(isOnline) webImg.reload()
   }
 }

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support