Merge branch 'master' into develop

easyscience · Sep 2, 2024 · 2de487e · 2de487e
2 parents 8986fae + 2fe0df4
commit 2de487e
Show file tree

Hide file tree

Showing 4 changed files with 330 additions and 0 deletions.
diff --git a/src/EasyApp/Gui/Charts/ChartTemplateHeatmap2dPlotly.html b/src/EasyApp/Gui/Charts/ChartTemplateHeatmap2dPlotly.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<style type="text/css">
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    overflow: hidden;
+    font-family: "PT Sans", sans-serif;
+  }
+
+  #chartDiv {
+    width: 100vw;
+    height: 100vh;
+  }
+
+</style>
+
+<body>
+
+  <div id="chartDiv"></div>
+
+  <script>
+
+    let z3dValues = []
+
+    function setZ3dValues(newValues) {
+      z3dValues = newValues
+    }
+
+    function redrawPlot() {
+      data = [{
+        z: z3dValues,
+        type: 'heatmap'
+      }]
+      Plotly.newPlot('chartDiv', data)
+    }
+
+  </script>
+
+</body>
+
+</html>
diff --git a/src/EasyApp/Gui/Charts/ChartTemplateSimple1dPlotly.html b/src/EasyApp/Gui/Charts/ChartTemplateSimple1dPlotly.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+
+<html>
+
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+<style type="text/css">
+
+  :root {
+    --xAxisTitle:"";
+    --yAxisTitle:"";
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    overflow: hidden;
+    font-family: "PT Sans", sans-serif;
+  }
+
+  #chartDiv {
+    width: 100vw;
+    height: 100vh;
+  }
+
+</style>
+
+<body>
+
+  <div id="chartDiv"></div>
+
+  <script>
+
+    /* GLOBAL VARIABLES */
+
+    let xArrayValues = []
+    let yArrayValues = []
+
+    /* PLOT DESCRIPTION */
+
+    let data = [{
+      x: xArrayValues,
+      y: yArrayValues,
+      mode: 'lines',
+      //line: {simplify: false},
+      //type: 'scattergl',
+    }]
+
+    let layout = {
+      autosize: true,
+      xaxis: {
+        title: '',
+        automargin: true,
+        autorange: true,
+        showgrid: true,
+        zeroline: false,
+        showline: true,
+        mirror: 'ticks',
+      },
+      yaxis: {
+        title: '',
+        automargin: true,
+        showgrid: true,
+        zeroline: false,
+        showline: true,
+        mirror: 'ticks',
+      },
+      margin: {
+          l: 43,
+          r: 3,
+          b: 50,
+          t: 40,
+          pad: 0
+        }
+    }
+
+    let config = {
+      displayModeBar: true,
+      displaylogo: false,
+    }
+
+    /* CREATE PLOT */
+
+    Plotly.newPlot('chartDiv', data, layout, config)
+
+    /* FUNCTIONS */
+
+    function setXArrayValues(newValues) {
+      xArrayValues.length = 0
+      for (let i = 0; i < newValues.length; i++) {
+        xArrayValues[i] = newValues[i]
+      }
+    }
+
+    function setYArrayValues(newValues) {
+      yArrayValues.length = 0
+      for (let i = 0; i < newValues.length; i++) {
+        yArrayValues[i] = newValues[i]
+      }
+    }
+
+    function redrawPlot() {
+      Plotly.redraw('chartDiv')
+    }
+
+    function redrawPlotWithYAnimation() {
+      Plotly.animate('chartDiv', {
+        data: [{ y: yArrayValues }],
+        traces: [0]
+      }, {
+        transition: {
+          duration: 500,
+          easing: 'cubic-in-out'
+        },
+        frame: {
+          duration: 500
+        }
+      })
+    }
+
+    function setXAxisTitle(newTitle) {
+      layout.xaxis.title.text = newTitle
+    }
+
+    function setYAxisTitle(newTitle) {
+      layout.yaxis.title.text = newTitle
+    }
+
+  </script>
+
+</body>
+
+</html>
diff --git a/src/EasyApp/Gui/Charts/ChartViewHeatmap2dPlotly.qml b/src/EasyApp/Gui/Charts/ChartViewHeatmap2dPlotly.qml
@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: 2022 EasyTexture contributors
+// SPDX-License-Identifier: BSD-3-Clause
+// © 2022 Contributors to the EasyTexture project <https://github.com/EasyScience/EasyTextureApp>
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtWebEngine 1.10
+
+import easyApp.Gui.Elements 1.0 as EaElements
+
+Rectangle {
+    id: container
+
+    property var z3dValues: [[1, 20, 30], [20, 1, 60], [30, 60, 1]]
+
+    property int pageLoading: chartView.loading
+
+    WebEngineView {
+        id: chartView
+
+        anchors.fill: parent
+        anchors.bottomMargin: 20
+        anchors.topMargin: 18
+        anchors.leftMargin: 15
+        anchors.rightMargin: 15
+
+        backgroundColor: parent.color
+
+        url: 'ChartTemplateHeatmap2dPlotly.html'
+
+        onContextMenuRequested: {
+            request.accepted = true
+        }
+
+        onLoadingChanged: {
+            if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
+                setZ3dValues()
+                redrawPlot()
+            }
+        }
+
+        onWidthChanged: reload()
+        onHeightChanged: reload()        
+
+    }
+
+    // Logic
+
+    function setZ3dValues() {
+        //chartView.runJavaScript(`setZ3dValues(${JSON.stringify(z3dValues)})`, function(result) { console.log(result); })
+        chartView.runJavaScript(`setZ3dValues(${JSON.stringify(z3dValues)})`)
+    }
+
+    function redrawPlot() {
+        chartView.runJavaScript(`redrawPlot()`)
+    }
+
+}
diff --git a/src/EasyApp/Gui/Charts/ChartViewSimple1dPlotly.qml b/src/EasyApp/Gui/Charts/ChartViewSimple1dPlotly.qml
@@ -0,0 +1,84 @@
+// SPDX-FileCopyrightText: 2022 EasyTexture contributors
+// SPDX-License-Identifier: BSD-3-Clause
+// © 2022 Contributors to the EasyTexture project <https://github.com/EasyScience/EasyTextureApp>
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtWebEngine 1.10
+
+import easyApp.Gui.Elements 1.0 as EaElements
+
+Rectangle {
+    id: container
+
+    property var xArrayValues: [0, 1, 2]
+    property var yArrayValues: [1.0, 0.0, 0.5]
+    property int xyArraysLength: xArrayValues.length
+
+    property string xAxisTitle: 'X axis'
+    property string yAxisTitle: 'Y axis'
+
+    property int pageLoading: chartView.loading
+
+    WebEngineView {
+        id: chartView
+
+        anchors.fill: parent
+        anchors.bottomMargin: 20
+        anchors.topMargin: 18
+        anchors.leftMargin: 15
+        anchors.rightMargin: 15
+
+        backgroundColor: parent.color
+
+        url: 'ChartTemplateSimple1dPlotly.html'
+
+        onContextMenuRequested: {
+            request.accepted = true
+        }
+
+        onLoadingChanged: {
+            if (loadRequest.status === WebEngineView.LoadSucceededStatus) {
+                setXAxisTitle()
+                setYAxisTitle()
+                setXArrayValues()
+                setYArrayValues()
+                redrawPlot()
+            }
+        }
+
+        onWidthChanged: reload()
+        onHeightChanged: reload()        
+
+    }
+
+    // Logic
+
+    function setXAxisTitle() {
+        //chartView.runJavaScript(`setXAxisTitle(${xAxisTitle})`, function(result) { console.log(result); })
+        chartView.runJavaScript(`setXAxisTitle(${JSON.stringify(xAxisTitle)})`)
+    }
+
+    function setYAxisTitle() {
+        chartView.runJavaScript(`setYAxisTitle(${JSON.stringify(yAxisTitle)})`)
+    }
+
+    function setXArrayValues(newValues) {
+        //chartView.runJavaScript(`setXArrayValues(${JSON.stringify(xArrayValues)})`, function(result) { console.log(result); })
+        chartView.runJavaScript(`setXArrayValues(${JSON.stringify(xArrayValues)})`)
+    }
+
+    function setYArrayValues(newValues) {
+        //chartView.runJavaScript(`setYArrayValues(${JSON.stringify(yArrayValues)})`, function(result) { console.log(result); })
+        chartView.runJavaScript(`setYArrayValues(${JSON.stringify(yArrayValues)})`)
+    }
+
+    function redrawPlot() {
+        chartView.runJavaScript(`redrawPlot()`)
+    }
+
+    function redrawPlotWithYAnimation() {
+        chartView.runJavaScript(`redrawPlotWithYAnimation()`)
+    }
+
+}