David Mugnai avatar David Mugnai committed fa2a85e

First QML experiment

Comments (0)

Files changed (7)

 TEMPLATE = app
 TARGET = apod
 
-QT += widgets network concurrent
+QT += widgets network concurrent quick
 
 # Input
-HEADERS += fsclient.h index.h metadata.h netclient.h
+HEADERS += fsclient.h index.h metadata.h netclient.h \
+    models.h
 SOURCES += fsclient.cpp \
            index.cpp \
            main.cpp \
            metadata.cpp \
-           netclient.cpp
+           netclient.cpp \
+    models.cpp
 
 QMAKE_CXXFLAGS += -std=c++0x -g
 LIBS += -lhtmlcxx
 
 MOC_DIR = ./mocs
+
+OTHER_FILES += \
+    main.qml \
+    qml/YearEntry.qml \
+    qml/PhotoGrid.qml \
+    qml/PhotoGrid.js
 #include <QtDebug>
 #include <QMetaType>
 #include "index.h"
+#include "models.h"
+
+#include <QTimer>
+#include <QStandardItemModel>
+#include <QStandardItem>
+#include <QListView>
+
+#include <QQuickView>
+#include <QQmlContext>
+#include <QQmlEngine>
 
 int main(int argc, char *argv[]) {
     QApplication app(argc, argv);
     if(!cache.exists()) {
         QDir(".").mkdir("cache");
     }
-    APODIndexer x(cache);
-    x.update();
+
+    APODIndexer index(cache);
+    APOD::IndexerModel mainModel(index);
+    index.update();
+
+    QQuickView view;
+    view.rootContext()->setContextProperty("mainModel", &mainModel);
+    view.setSource(QUrl::fromLocalFile("main.qml"));
+    view.show();
+
     return app.exec();
 }
+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 2.0
+import "qml"
+
+Rectangle {
+    id: btn1
+    width: 1024
+    height: 768
+    color: "#64bad1"
+    visible: true
+
+
+
+    Text {
+        id: text1
+        x: 206
+        y: 19
+        text: "APOD Viewer"
+        style: Text.Normal
+        font.pointSize: 36
+        MouseArea {
+            id: mouse_area1
+            anchors {
+                fill: parent
+            }
+            onClicked: console.log(mainModel)
+        }
+    }
+    Column {
+        spacing: 10
+        Repeater {
+            id:yearsColumn
+            model: mainModel
+            delegate: YearEntry {
+                onClicked: photoGrid.showImages(mainModel.images(model.display))
+            }
+        }
+    }
+
+    PhotoGrid {
+        x: 206
+        y: 88
+        width: 795
+        height: 658
+        color: "green"
+        id: photoGrid
+    }
+}

Binary file added.

+var models = {};
+
+function showModel(model) {
+    models[model] = 1;
+    var x = c01.createObject(grid)
+    x.model = model
+}

qml/PhotoGrid.qml

+// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
+import QtQuick 2.0
+import "PhotoGrid.js" as Core
+
+Rectangle {
+    id: grid
+    border {
+        width: 1
+    }
+
+    Component {
+        id: c01
+        Rectangle {
+            property alias model: grid_view1.model
+
+            color: "red"
+            clip: true
+            anchors {
+                fill: parent
+            }
+
+            GridView {
+                id: grid_view1
+                cellWidth: 320
+                cellHeight: 245
+                anchors {
+                   fill: parent
+                }
+                delegate: Rectangle {
+                    width: 320
+                    height: 245
+                    border {
+                        width: 1
+                        color: "white"
+                    }
+                    color: "yellow"
+                    anchors {
+                        margins: 10
+                    }
+
+                    Text {
+                        anchors {
+                            bottom: preview.bottom
+                            left: preview.left
+                        }
+                        text: model.display
+                        z: 1
+                        color: "white"
+                    }
+                    Image {
+                        id: preview
+                        source: model.preview
+                        width: 300
+                        height: 225
+                        anchors {
+                            horizontalCenter: parent.horizontalCenter
+                            verticalCenter: parent.verticalCenter
+                        }
+                        fillMode: Image.Stretch
+                    }
+                }
+            }
+        }
+    }
+
+    function showImages(model) {
+        console.log('_x', model);
+        Core.showModel(model);
+    }
+}
+
+

qml/YearEntry.qml

+import QtQuick 2.0
+
+Rectangle {
+    id: button
+
+    radius: 5
+    border {
+        width: 1
+    }
+
+    width: 100
+    height: 40
+
+    FontLoader {
+        id: chalkFont
+        source: "./Drawing Guides.ttf"
+    }
+    Text {
+        color: "#ffee66"
+        text: display
+        verticalAlignment: Text.AlignTop
+        horizontalAlignment: Text.AlignHCenter
+        font.bold: true
+        font.pointSize: 18
+        font.family: chalkFont.name
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            verticalCenter: parent.verticalCenter
+        }
+    }
+
+    MouseArea {
+        id: mouse_area1
+        anchors {
+            fill: parent
+        }
+        onClicked: parent.clicked()
+    }
+
+    signal clicked();
+}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.