Commits

David Mugnai committed 509200c

The zoom element

It displays the image at full size

  • Participants
  • Parent commits 4c063b3

Comments (0)

Files changed (1)

 import "qml"
 
 Rectangle {
-    id: btn1
+    id: root
     width: 1024
     height: 768
     color: "#64bad1"
-    visible: true
-
-
 
     Text {
-        id: text1
+        id: header
         x: 206
         y: 19
         text: "APOD Viewer"
             anchors {
                 fill: parent
             }
-            onClicked: console.log(mainModel)
+            onClicked: zoom.show({
+                title: "XXX",
+                date: null,
+                url: "http://apod.nasa.gov/apod/image/1209/airglow120824_ladanyi_1800px.jpg",
+                explanation: "<a href=\"http://www.google.com/\">ggg</a>"});
         }
     }
+    Rectangle {
+        id: zoom
+        z: 20
+        color: "transparent"
+        visible: false
+        anchors {
+            fill: parent
+        }
+        Rectangle {
+            id: tissue
+            color: "red"
+            opacity: 0.3
+            anchors {
+                fill: parent
+            }
+        }
+        Image {
+            id: image
+            anchors {
+                fill: parent
+                margins: 60
+            }
+            Text {
+                id: title
+                color: "#ffffff"
+                font {
+                    pointSize: 20
+                    family: "Impact"
+                }
+                anchors {
+                    top: parent.top
+                    right: parent.right
+                    left: parent.left
+                    margins: 10
+                }
+            }
+            Text {
+                id: explanation
+                height: 150
+                color: "#ffffff"
+                font {
+                    pointSize: 8
+                    family: "Impact"
+                }
+                anchors {
+                    right: parent.right
+                    bottom: parent.bottom
+                    left: parent.left
+                    margins: 10
+                }
+            }
+        }
+
+        function show(data) {
+            image.source = data.url
+            explanation.text = data.explanation
+            title.text = data.title
+            zoom.visible = true
+        }
+    }
+
     Column {
         spacing: 10
         Repeater {
             id:yearsColumn
             model: mainModel
             delegate: YearEntry {
-                onClicked: photoGrid.showImages(mainModel.images(model.display))
+                onClicked: wall.showImages(mainModel.images(model.display))
             }
         }
     }
 
     PhotoGrid {
+        id: wall
         x: 206
         y: 88
         width: 795
         height: 658
         color: "green"
-        id: photoGrid
     }
 }