init

deployment.pri

@@ -0,0 +1,13 @@
+unix:!android {
+    isEmpty(target.path) {
+        qnx {
+            target.path = /tmp/$${TARGET}/bin
+        } else {
+            target.path = /opt/$${TARGET}/bin
+        }
+        export(target.path)
+    }
+    INSTALLS += target
+}
+
+export(INSTALLS)

main.cpp

@@ -0,0 +1,14 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.addImportPath(QStringLiteral("qml"));
+    engine.load(QUrl(QLatin1String("qrc:/qml/main.qml")));
+
+    return app.exec();
+}

qml.qrc

@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/">
+        <file>qml/firmata/PortSelector.qml</file>
+        <file>qml/main.qml</file>
+        <file>qml/QChartGallery.qml</file>
+        <file>qml/QChartGallery.js</file>
+        <file>qml/jbQuick/Charts/QChart.js</file>
+        <file>qml/jbQuick/Charts/QChart.qml</file>
+    </qresource>
+</RCC>

qml/QChartGallery.js

@@ -0,0 +1,136 @@
+// QChartGallery.js ---
+//
+// Author: Julien Wintz
+// Created: Thu Feb 13 23:43:13 2014 (+0100)
+// Version:
+// Last-Updated:
+//           By:
+//     Update #: 13
+//
+
+// Change Log:
+//
+//
+
+// /////////////////////////////////////////////////////////////////
+// Line Chart Data Sample
+// /////////////////////////////////////////////////////////////////
+
+var ChartLineData = {
+    labels: ["","","","","","","", "", "", "", "", "", "", "", ""],
+    datasets: [{
+               fillColor: "rgba(220,220,220,0.5)",
+             strokeColor: "rgba(220,220,220,1)",
+              pointColor: "rgba(220,220,220,1)",
+        pointStrokeColor: "#ffffff",
+                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
+        },
+        {
+               fillColor: "rgba(20,220,220,0.5)",
+             strokeColor: "rgba(20,220,220,1)",
+              pointColor: "rgba(20,220,220,1)",
+        pointStrokeColor: "#ffffff",
+                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
+        }
+    ]
+}
+
+
+// /////////////////////////////////////////////////////////////////
+// Polar Chart Data Sample
+// /////////////////////////////////////////////////////////////////
+
+var ChartPolarData = [{
+    value: 30,
+    color: "#D97041"
+ }, {
+    value: 90,
+    color: "#C7604C"
+ }, {
+    value: 24,
+    color: "#21323D"
+ }, {
+    value: 58,
+    color: "#9D9B7F"
+ }, {
+    value: 82,
+    color: "#7D4F6D"
+ }, {
+    value: 8,
+    color: "#584A5E"
+}]
+
+// /////////////////////////////////////////////////////////////////
+// Radar Chart Data Sample
+// /////////////////////////////////////////////////////////////////
+
+var ChartRadarData = {
+    labels: ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
+    datasets: [{
+               fillColor: "rgba(220,220,220,0.5)",
+             strokeColor: "rgba(220,220,220,1)",
+              pointColor: "rgba(220,220,220,1)",
+        pointStrokeColor: "#fff",
+                    data: [65,59,90,81,56,55,40]
+    }, {
+               fillColor: "rgba(151,187,205,0.5)",
+             strokeColor: "rgba(151,187,205,1)",
+              pointColor: "rgba(151,187,205,1)",
+        pointStrokeColor: "#fff",
+                    data: [28,48,40,19,96,27,100]
+    }
+    ]
+}
+
+// /////////////////////////////////////////////////////////////////
+// Pie Chart Data Sample
+// /////////////////////////////////////////////////////////////////
+
+var ChartPieData = [{
+    value: 30,
+    color: "#F38630"
+ }, {
+    value: 50,
+    color: "#E0E4CC"
+ }, {
+    value: 100,
+    color: "#69D2E7"
+}]
+
+// /////////////////////////////////////////////////////////////////
+// Doughnut Chart Data Sample
+// /////////////////////////////////////////////////////////////////
+
+var ChartDoughnutData = [{
+    value: 30,
+    color: "#F7464A"
+ }, {
+    value: 50,
+    color: "#E2EAE9"
+ }, {
+    value: 100,
+    color: "#D4CCC5"
+ }, {
+    value: 40,
+    color: "#949FB1"
+ }, {
+    value: 120,
+    color: "#4D5360"
+}]
+
+// /////////////////////////////////////////////////////////////////
+// Bar Chart Data Sample
+// /////////////////////////////////////////////////////////////////
+
+var ChartBarData = {
+      labels: ["January","February","March","April","May","June","July"],
+    datasets: [{
+          fillColor: "rgba(220,220,220,0.5)",
+        strokeColor: "rgba(220,220,220,1)",
+               data: [65,59,90,81,56,55,40]
+    }, {
+          fillColor: "rgba(151,187,205,0.5)",
+        strokeColor: "rgba(151,187,205,1)",
+               data: [28,48,40,19,96,27,100]
+    }]
+}

qml/QChartGallery.qml

@@ -0,0 +1,182 @@
+/* QChartGallery.qml --- 
+ * 
+ * Author: Julien Wintz
+ * Created: Thu Feb 13 23:41:59 2014 (+0100)
+ * Version: 
+ * Last-Updated: Fri Feb 14 12:58:42 2014 (+0100)
+ *           By: Julien Wintz
+ *     Update #: 5
+ */
+
+/* Change Log:
+ * 
+ */
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.3
+import jbQuick.Charts 1.0
+
+
+
+import "QChartGallery.js" as ChartsData
+
+Item {
+    property var chart_line_data: ChartsData
+    property alias chart_line: chart_line
+
+    property int chart_width: parent.width;
+    property int chart_height: parent.height;
+    property int chart_spacing: 20;
+    property int text_height: 80;
+    property int row_height: 8;
+
+    Rectangle {
+
+      anchors.fill: parent
+
+      color: "#ffffff";
+      width: chart_width + chart_spacing;
+      height: chart_height + chart_spacing + row_height + text_height;
+
+    // /////////////////////////////////////////////////////////////////
+    // Header
+    // /////////////////////////////////////////////////////////////////
+    Rectangle {
+
+      id: button;
+      visible: true
+
+      anchors.top:  parent.top;
+      anchors.right: parent.right;
+      anchors.rightMargin: 10
+
+      width: 100;
+      height: 32;
+
+      color: "#2d91ea";
+      radius: 8;
+
+      Text {
+        anchors.centerIn: parent;
+        color: "#ffffff";
+        text: "Repaint";
+        font.bold: true;
+      }
+
+      MouseArea {
+        anchors.fill: parent;
+        onPressed: {
+          button.color = "#1785e6"
+        }
+        onReleased: {
+          button.color = "#2d91ea"
+          chart_line.repaint();
+        }
+      }
+    }
+
+    // /////////////////////////////////////////////////////////////////
+    // Body
+    // /////////////////////////////////////////////////////////////////
+
+
+
+      Grid {
+
+        id: layout;
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        width: parent.width;
+        height: parent.height - button.height;
+
+        columns: 1;
+        spacing: chart_spacing;
+
+        Chart {
+          id: chart_line;
+          width: parent.width;
+          height: parent.height;
+          chartAnimated: true;
+          chartAnimationEasing: Easing.Linear;
+          chartAnimationDuration: 0;
+          chartData: ChartsData.ChartLineData;
+          chartType: Charts.ChartType.LINE;
+          chartOptions: ChartsData.ChartLineOption;
+
+    //      Rectangle{
+    //          anchors.fill:parent
+    //          color: "black"
+    //          opacity: 0.2
+    //      }
+
+        }
+      }
+
+
+
+
+// for test
+      RowLayout {
+        visible: false
+        id: inputField
+        anchors.left: layout.left
+        anchors.top: layout.bottom
+
+        height: 30
+        spacing: 5
+        Button {
+          id: btnStop
+          height: parent.height
+          text: "Stop"
+          onClicked:{
+                if( btnStop.text == "Stop"){
+
+                    timer.stop()
+                    btnStop.text = "Start"
+                }
+                else{
+                    btnStop.text = "Stop"
+                    timer.start()
+                }
+//              console.log(ChartsData.ChartLineData["datasets"][0]["data"])
+//              ChartsData.ChartLineData["datasets"][0]["data"].shift()
+//              ChartsData.ChartLineData["datasets"][0]["data"].push(inputText.text)
+//              chart_line.repaint()
+          }
+        }
+
+        Button {
+          id: btnAdd
+          height: parent.height
+          text: "Add"
+          onClicked:{
+//              console.log(ChartsData.ChartLineData["datasets"][0]["data"])
+//              ChartsData.ChartLineData["datasets"][0]["data"].shift()
+//              ChartsData.ChartLineData["datasets"][0]["data"].push(inputText.text)
+//              chart_line.repaint()
+          }
+        }
+        Label {
+            height: parent.height
+            text: "Data"
+            verticalAlignment: Text.AlignVCenter
+            anchors.fill: parent.Center
+    //        Rectangle{
+    //            anchors.fill:parent
+    //            color: "black"
+    //        }
+        }
+        TextField{
+            id: inputText
+            height: parent.height
+            text: "30"
+        }
+      }
+
+    }
+
+}
+
+