MenuPage: Adapt for software renderer

Some previously used image operations do not seem to work with the
software renderer. Use precalculated icon states now.

images/convert.txt

+for j in idle;do for i in $(ls icon-*.png | grep -v active | grep -v idle);do convert  icon-background-$j.png \( $i  -channel A -evaluate Multiply 0.35 +channel \) -gravity center  -compose minus -composite  ${i%.png}-$j.png;done;done
+for j in active;do for i in $(ls icon-*.png | grep -v active | grep -v idle);do  convert -compose minus icon-background-$j.png $i -gravity center -composite ${i%.png}-$j.png;done;done

qml.qrc

@@ -43,19 +43,28 @@
         <file>images/icon-brightness.png</file>
         <file>images/icon-contact.png</file>
         <file>images/icon-delete.png</file>
-        <file>images/icon-hw-info.png</file>
-        <file>images/icon-industrial.png</file>
-        <file>images/icon-kiosk.png</file>
-        <file>images/icon-medical.png</file>
+
+        <file>images/icon-industrial-active.png</file>
+        <file>images/icon-industrial-idle.png</file>
+        <file>images/icon-slideshow-active.png</file>
+        <file>images/icon-slideshow-idle.png</file>
+        <file>images/icon-vending-active.png</file>
+        <file>images/icon-vending-idle.png</file>
+        <file>images/icon-kiosk-active.png</file>
+        <file>images/icon-kiosk-idle.png</file>
+        <file>images/icon-medical-active.png</file>
+        <file>images/icon-medical-idle.png</file>
+        <file>images/icon-hw-info-active.png</file>
+        <file>images/icon-hw-info-idle.png</file>
+        <file>images/icon-video-active.png</file>
+        <file>images/icon-video-idle.png</file>
+
         <file>images/icon-metro.png</file>
         <file>images/icon-muted.png</file>
         <file>images/icon-pause.png</file>
         <file>images/icon-play.png</file>
         <file>images/icon-settings.png</file>
         <file>images/icon-shopping-cart.png</file>
-        <file>images/icon-slideshow.png</file>
-        <file>images/icon-vending.png</file>
-        <file>images/icon-video.png</file>
         <file>images/icon-volume.png</file>
         <file>images/logo-small.png</file>
         <file>images/logo-large-white.png</file>

qml/MenuPage.qml

@@ -5,12 +5,11 @@ import QtGraphicalEffects 1.0
 Rectangle {
     id: menu
 
-    // color: 'white'
     color: '#F4F4F4'
 
     signal loadPage(string page)
 
-    ColorizedImage {
+    Image {
         id: logoBackground
 
         anchors.top: parent.top
@@ -20,10 +19,10 @@ Rectangle {
         anchors.right: parent.right
         anchors.rightMargin: (Screen.width < 1920) ? 30 : 150
         height: width
-        source: 'qrc:///images/logo-large-white.png'
-        fillMode: Image.PreserveAspectFit
 
-        color: '#7297bf0d'
+        source: 'qrc:///images/logo-large-green.png'
+        fillMode: Image.PreserveAspectFit
+        clip: true
     }
 
     Image {
@@ -47,14 +46,14 @@ Rectangle {
         source: 'qrc:///images/219-design-logo.svg'
         fillMode: Image.PreserveAspectFit
     }
-    ColorizedImage {
+
+    Image {
         id: settings
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.margins: 1
         width: 40
         height: 40
-        color: 'lightgray'
         source: 'qrc:///images/icon-settings.png'
         fillMode: Image.PreserveAspectFit
 
@@ -70,45 +69,41 @@ Rectangle {
         id: items
         ListElement {
             name: 'video'
-            iconSource: 'qrc:///images/icon-video.png'
+            iconSource: 'qrc:///images/icon-video-active.png'
+            iconSourceIdle: 'qrc:///images/icon-video-idle.png'
             label: 'Video'
         }
         ListElement {
             name: 'hw-info'
-            iconSource: 'qrc:///images/icon-hw-info.png'
+            iconSource: 'qrc:///images/icon-hw-info-active.png'
+            iconSourceIdle: 'qrc:///images/icon-hw-info-idle.png'
             label: 'About This Device'
         }
-//        ListElement {
-//            name: 'medical'
-//            iconSource: 'qrc:///images/icon-medical.png'
-//            label: 'Ventilator'
-//        }
         ListElement {
             name: 'industrial'
-            iconSource: 'qrc:///images/icon-industrial.png'
+            iconSource: 'qrc:///images/icon-industrial-active.png'
+            iconSourceIdle: 'qrc:///images/icon-industrial-idle.png'
             label: 'Industrial Control'
         }
         ListElement {
             name: 'kiosk'
-            iconSource: 'qrc:///images/icon-kiosk.png'
+            iconSource: 'qrc:///images/icon-kiosk-active.png'
+            iconSourceIdle: 'qrc:///images/icon-kiosk-idle.png'
             label: 'Ticket Vending\nMachine'
         }
         ListElement {
             name: 'vending'
-            iconSource: 'qrc:///images/icon-vending.png'
+            iconSource: 'qrc:///images/icon-vending-active.png'
+            iconSourceIdle: 'qrc:///images/icon-vending-idle.png'
             label: 'Coffee Machine'
         }
 
         ListElement {
             name: 'slideshow'
-            iconSource: 'qrc:///images/icon-slideshow.png'
+            iconSource: 'qrc:///images/icon-slideshow-active.png'
+            iconSourceIdle: 'qrc:///images/icon-slideshow-idle.png'
             label: 'Slideshow'
         }
-//        ListElement {
-//            name: 'contact'
-//            iconSource: 'qrc:///images/icon-contact.png'
-//            label: 'Contact Us'
-//        }
     }
 
     Text {
@@ -122,8 +117,16 @@ Rectangle {
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
 
+        anchors.bottom : view.verticalCenter
+        anchors.bottomMargin : 0.05 * Screen.height
+
         z: 5
     }
+    Component.onCompleted: {
+        if ( Screen.width < 480 || Screen.height < 800 ) {
+            viewTitle.font.pointSize = 18
+        } 
+    }
 
     PathView {
         id: view
@@ -135,23 +138,11 @@ Rectangle {
         delegate: Component {
             Image {
                 id: image
-                source: (PathView.isCurrentItem ?
-                         'qrc:///images/icon-background-active.png' :
-                         'qrc:///images/icon-background-idle.png')
-                opacity: PathView.itemOpacity
 
                 width: view.width / 3 * PathView.scale
                 height: sourceSize.height * width / sourceSize.width
 
-                ColorizedImage {
-                    width: parent.width / 2
-                    height: sourceSize.height * width / sourceSize.width
-                    anchors.centerIn: parent
-
-                    source: iconSource
-
-                    color: image.PathView.isCurrentItem ? 'black' : '#6D6C6F'
-                }
+                source: image.PathView.isCurrentItem ? iconSource : iconSourceIdle
 
                 MouseArea {
                     id: mouseArea
@@ -184,19 +175,16 @@ Rectangle {
                 x: view.width - view.margin
                 y: (view.height / 2) - ((view.height / 2) - view.margin) * 0.5
             }
-            PathAttribute { name: "itemOpacity"; value: 0.8 }
             PathAttribute { name: "scale"; value: 0.8 }
             PathLine {
                 x: view.width / 2
                 y: view.margin
             }
-            PathAttribute { name: "itemOpacity"; value: 1.0 }
             PathAttribute { name: "scale"; value: 1.0 }
             PathLine {
                 x: view.margin
                 y: (view.height / 2) - ((view.height / 2) - view.margin) * 0.5
             }
-            PathAttribute { name: "itemOpacity"; value: 0.8 }
             PathAttribute { name: "scale"; value: 0.8 }
             PathLine {
                 x: view.margin + (0.1 * view.width / 6)
@@ -206,7 +194,6 @@ Rectangle {
                 x: view.width / 2
                 y: view.height - view.margin
             }
-            PathAttribute { name: "itemOpacity"; value: 0.0 }
             PathAttribute { name: "scale"; value: 0.0 }
         }
 
@@ -268,13 +255,5 @@ Rectangle {
         onTriggered: view.decrementCurrentIndex()
     }
 
-    Component.onCompleted: {
-        if ( Screen.width == 480 && Screen.height == 800 ) {
-            viewTitle.anchors.verticalCenter = view.verticalCenter
-            viewTitle.font.pointSize = 18
-        } else {
-            viewTitle.anchors.bottom = view.verticalCenter
-            viewTitle.anchors.bottomMargin = 0.05 * Screen.height
-        }
-    }
 }
+