From a5cfeba41ceb626106e8b1dfe8bc7dc6dd9fbfc3 Mon Sep 17 00:00:00 2001 From: Abi Li Date: Tue, 19 Oct 2021 23:35:02 -0400 Subject: [PATCH 1/7] graph with max line --- gui/src/dashboard/Dashboard.vue | 2 + gui/src/dashboard/Graph.vue | 3 +- gui/src/dashboard/GraphMinMax.vue | 298 ++++++++++++++++++++++++++++++ gui/src/dashboard/Placeholder.vue | 2 + gui/src/main.js | 4 +- 5 files changed, 307 insertions(+), 2 deletions(-) create mode 100644 gui/src/dashboard/GraphMinMax.vue diff --git a/gui/src/dashboard/Dashboard.vue b/gui/src/dashboard/Dashboard.vue index db6ac4f..ab29e62 100644 --- a/gui/src/dashboard/Dashboard.vue +++ b/gui/src/dashboard/Dashboard.vue @@ -46,6 +46,7 @@ import uuidv4 from "uuid"; // the valid types import Graph from "./Graph.vue"; +import GraphMinMax from "./GraphMinMax.vue"; import ControlPanel from "./ControlPanel.vue"; import Placeholder from "./Placeholder.vue"; @@ -54,6 +55,7 @@ export default { components: { ControlPanel, Graph, + GraphMinMax, Placeholder, GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem, diff --git a/gui/src/dashboard/Graph.vue b/gui/src/dashboard/Graph.vue index 19e6a6f..7d4848d 100644 --- a/gui/src/dashboard/Graph.vue +++ b/gui/src/dashboard/Graph.vue @@ -113,7 +113,8 @@ export default { // callback for adding data setInterval(() => { const time = performance.now(); - this.history.push({x: time, y: Math.sin(time * 0.002)}); + var yVal = Math.sin(time * 0.002); + this.history.push({x: time, y: yVal}); this.chart.update(); }, 100); this.nodeQuery.register(this.updateVariable); diff --git a/gui/src/dashboard/GraphMinMax.vue b/gui/src/dashboard/GraphMinMax.vue new file mode 100644 index 0000000..2dccee8 --- /dev/null +++ b/gui/src/dashboard/GraphMinMax.vue @@ -0,0 +1,298 @@ + + + + + + + diff --git a/gui/src/dashboard/Placeholder.vue b/gui/src/dashboard/Placeholder.vue index b658804..f60df07 100644 --- a/gui/src/dashboard/Placeholder.vue +++ b/gui/src/dashboard/Placeholder.vue @@ -3,6 +3,7 @@
@@ -30,6 +31,7 @@ export default { options: [ { type: "ControlPanel", icon: "sliders-h" }, { type: "Graph", icon: "chart-bar" }, + { type: "GraphMinMax", icon: "chart-line" }, ], }; }, diff --git a/gui/src/main.js b/gui/src/main.js index 14e3d4c..28fd5bb 100644 --- a/gui/src/main.js +++ b/gui/src/main.js @@ -28,6 +28,7 @@ import { faSatelliteDish, faCircle, faSquare, + fas, } from "@fortawesome/free-solid-svg-icons"; import { faTrashAlt } from "@fortawesome/free-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; @@ -56,7 +57,8 @@ library.add( faCircle, faSquare, faPlay, - faClock + faClock, + fas ); Vue.component("font-awesome-icon", FontAwesomeIcon); From 1dd83c62b847d7eeb8fe0b88976a9882134cbbbc Mon Sep 17 00:00:00 2001 From: Abi Li Date: Wed, 20 Oct 2021 10:17:17 -0400 Subject: [PATCH 2/7] Min and toggle added minline and toggle reset buttons --- gui/src/dashboard/GraphMinMax.vue | 45 ++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/gui/src/dashboard/GraphMinMax.vue b/gui/src/dashboard/GraphMinMax.vue index 2dccee8..2bad8fe 100644 --- a/gui/src/dashboard/GraphMinMax.vue +++ b/gui/src/dashboard/GraphMinMax.vue @@ -13,6 +13,16 @@ :class="{ controlActive: live }" @click="live = !live" /> + +
@@ -47,6 +57,10 @@ export default { history: [], maxVals: [], maxVal: 0, + maxVisible: true, + minVals: [], + minVal: 0, + minVisible: true, chart: null, timespan: 20, @@ -89,11 +103,13 @@ export default { this.chart = new TimeChart(this.$refs["chart"], { series: [ { name : 'Series 1', data: this.history, color: 'blue' }, - { name : 'Max', data: this.maxVals, color: 'red' } + { name : 'Max', data: this.maxVals, color: 'red', visible: this.maxVisible}, + { name : 'Min', data: this.minVals, color: 'green', visible: this.minVisible }, ], realTime: true, baseTime: Date.now() - performance.now(), xRange: { min: 0, max: 20 * 1000 }, + legend: false, }); }, relayout() { @@ -107,6 +123,26 @@ export default { }, updateVariable(v) { }, + toggleMax(){ + this.maxVisible = !this.maxVisible; + for (const s of this.chart.options.series) { + if (s.name == 'Max') { + s.visible = !s.visible; + } + } + this.maxVal = 0; + this.chart.update(); + }, + toggleMin(){ + this.minVisible = !this.minVisible; + for (const s of this.chart.options.series) { + if (s.name == 'Min') { + s.visible = !s.visible; + } + } + this.minVal = 0; + this.chart.update(); + }, }, watch: { nodeQuery(n, o) { @@ -120,11 +156,14 @@ export default { const time = performance.now(); var yVal = Math.sin(time * 0.002); this.history.push({x: time, y: yVal}); - if (this.maxVal < yVal) { + if (this.maxVisible && this.maxVal < yVal) { this.maxVal = yVal; } + if (this.minVisible && this.minVal > yVal) { + this.minVal = yVal; + } this.maxVals.push({x: time, y: this.maxVal}); - // this.maxVals.push({x: time, y: yVal-1}); + this.minVals.push({x: time, y: this.minVal}); this.chart.update(); }, 100); From 0da16a06d3f6f9b34464de08efcb4b4dd3c14a32 Mon Sep 17 00:00:00 2001 From: Abi Li Date: Sat, 23 Oct 2021 11:27:22 -0400 Subject: [PATCH 3/7] Added tooltips Added tooltips to placeholder and min/max graph buttons --- gui/src/dashboard/GraphMinMax.vue | 30 ++++++++++++++++++------------ gui/src/dashboard/Placeholder.vue | 7 ++++--- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/gui/src/dashboard/GraphMinMax.vue b/gui/src/dashboard/GraphMinMax.vue index 2bad8fe..cce4165 100644 --- a/gui/src/dashboard/GraphMinMax.vue +++ b/gui/src/dashboard/GraphMinMax.vue @@ -7,21 +7,25 @@ icon="clock" :class="{ controlActive: useTimespan }" @click="useTimespan = !useTimespan" + title="Use Timespan" />
@@ -124,23 +128,25 @@ export default { updateVariable(v) { }, toggleMax(){ - this.maxVisible = !this.maxVisible; - for (const s of this.chart.options.series) { - if (s.name == 'Max') { - s.visible = !s.visible; - } - } + // this.maxVisible = !this.maxVisible; + // for (const s of this.chart.options.series) { + // if (s.name == 'Max') { + // s.visible = !s.visible; + // } + // } this.maxVal = 0; + // this.maxVals = []; this.chart.update(); }, toggleMin(){ - this.minVisible = !this.minVisible; - for (const s of this.chart.options.series) { - if (s.name == 'Min') { - s.visible = !s.visible; - } - } + // this.minVisible = !this.minVisible; + // for (const s of this.chart.options.series) { + // if (s.name == 'Min') { + // s.visible = !s.visible; + // } + // } this.minVal = 0; + // this.minVals = []; this.chart.update(); }, }, diff --git a/gui/src/dashboard/Placeholder.vue b/gui/src/dashboard/Placeholder.vue index f60df07..c7f4de6 100644 --- a/gui/src/dashboard/Placeholder.vue +++ b/gui/src/dashboard/Placeholder.vue @@ -10,6 +10,7 @@
@@ -29,9 +30,9 @@ export default { height: null, // TODO: Make a registry options: [ - { type: "ControlPanel", icon: "sliders-h" }, - { type: "Graph", icon: "chart-bar" }, - { type: "GraphMinMax", icon: "chart-line" }, + { type: "ControlPanel", icon: "sliders-h", title: "Control Panel"}, + { type: "Graph", icon: "chart-bar", title: "Graph"}, + { type: "GraphMinMax", icon: "chart-line", title: "Min/Max Graph"}, ], }; }, From 256494ab0846b1723a3d51756bf6dba29f6fd146 Mon Sep 17 00:00:00 2001 From: Abi Li Date: Wed, 27 Oct 2021 17:03:28 -0400 Subject: [PATCH 4/7] Color display for bool variables --- cpp/lib/telegraph/local/dummy_device.cpp | 22 +++++++++++++++++++++- gui/src/dashboard/Control.vue | 6 +++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/cpp/lib/telegraph/local/dummy_device.cpp b/cpp/lib/telegraph/local/dummy_device.cpp index ebfd461..830a57d 100644 --- a/cpp/lib/telegraph/local/dummy_device.cpp +++ b/cpp/lib/telegraph/local/dummy_device.cpp @@ -55,6 +55,9 @@ namespace telegraph { std::vector labels{"On", "Off"}; auto status_type = value_type("Status", std::move(labels)); auto childC = new variable(4, "c", "C", "", status_type); + + auto childD = new variable(5, "d", "D", "", value_type::Bool); + std::vector test_labels = {"option1", "option2", "option3"}; value_type test_enum = value_type("test_enum", test_labels); @@ -67,17 +70,21 @@ namespace telegraph { auto action4 = new action(4, "action4", "action4", "", test_enum, test_enum); auto action5 = new action(5, "action5", "action5", "", short_enum, short_enum); - std::vector children{childA, childB, childC, action1, action2, action3, action4, action5}; + std::vector children{childA, childB, childC, childD, action1, action2, action3, action4, action5}; auto root = std::make_unique(1, "foo", "Foo", "", "", 1, std::move(children)); auto dev = std::make_shared(ioc, name, std::move(root)); auto a_publisher = std::make_shared(ioc, value_type::Float); auto b_publisher = std::make_shared(ioc, value_type::Int32); auto c_publisher= std::make_shared(ioc, status_type); + auto d_publisher= std::make_shared(ioc, value_type::Bool); + dev->add_publisher(childA, a_publisher); dev->add_publisher(childB, b_publisher); dev->add_publisher(childC, c_publisher); + dev->add_publisher(childD, d_publisher); + // add action dev->add_handler(action1, [] (io::yield_ctx& yield, value val) -> value { @@ -133,6 +140,19 @@ namespace telegraph { val++; } }); + + io::spawn(ioc, [&ioc, w, d_publisher](io::yield_context yield) { + // create a timer + io::deadline_timer timer{ioc}; + bool val= false; + while (true) { + timer.expires_from_now(boost::posix_time::seconds(2)); + timer.async_wait(yield); + { auto dev = w.lock(); if (!dev) break; } + (*d_publisher) << value{val}; + val = !val; + } + }); return dev; } } \ No newline at end of file diff --git a/gui/src/dashboard/Control.vue b/gui/src/dashboard/Control.vue index 87983f1..1ee788d 100644 --- a/gui/src/dashboard/Control.vue +++ b/gui/src/dashboard/Control.vue @@ -1,6 +1,6 @@ @@ -115,6 +117,7 @@ export default { this.chart.model.resize(this.width, this.height); }, toggleLive() { + this.live = !this.live; }, updateTimespan() { }, @@ -123,11 +126,6 @@ export default { updateVariable(v) { }, drop(data) { - // var tile = Vue.observable({ - // type: "Placeholder", - // ctx: data.getContext().name, - // node: data.path(), - // }); this.chart.dispose(); this.history.push([]); // console.log(this.history.length); @@ -177,8 +175,10 @@ export default { const time = performance.now(); var yVal = Math.sin(time * 0.002); // this.history[0].push({x: time, y: yVal}); - for (let i = 0; i < this.history.length; i++) { - this.history[i].push({x : time, y : (yVal + i)}); + if (this.live) { + for (let i = 0; i < this.history.length; i++) { + this.history[i].push({x : time, y : (yVal + i)}); + } } this.chart.update(); }, 100); diff --git a/gui/src/dashboard/GraphMinMax.vue b/gui/src/dashboard/GraphMinMax.vue index cce4165..52d2367 100644 --- a/gui/src/dashboard/GraphMinMax.vue +++ b/gui/src/dashboard/GraphMinMax.vue @@ -12,7 +12,7 @@