Trouble updating complex model via Angular UI modal - javascript

I have a model with nested arrays corresponding to sections of a floor plan. Within each of the floor plan's sections is an array of booth objects. Let's say I have a view of this data that displays all of the booths on a grid, allowing the user to click on a booth icon (thus generating an Angular UI modal) and edit that booth's data. The problem is that, when it's time for the user to save the updated booth info, I'm unsure of how to associate the selected booth model with the appropriate section and, within that section, the correct booth model. Could someone help point me in the right direction here?
Here's my code.
boothManager.js
var boothManager = angular.module("boothManager", ["ui.bootstrap"]);
boothManager.controller("BoothManagerCtrl", function ($scope, $modal, $log) {
$scope.open = function (booth) {
var modalInstance = $modal.open({
templateUrl: '../../templates/edit_booth.html',
controller: "EditBoothCtrl",
backdrop: true,
size: "sm",
resolve: {
boothData: function () {
return booth;
}
}
});
modalInstance.result.then(function (boothData) {
console.log(boothData);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.viewModel = {
"sections": [
{
"id": "String",
"name": "String",
"booths": [
{
"number": 1,
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 100,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "2",
"fee": 30000,
"width": "20",
"length": "20",
"xPosition": 132,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "3",
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 164,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "4",
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 196,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "5",
"fee": 30000,
"width": "10",
"length": "10",
"xPosition": 228,
"yPosition": 100,
"type": "String",
"label": "String",
"radius": 15
}
]
},
{
"id": "String",
"name": "String",
"booths": [
{
"number": "1",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 100,
"yPosition": 132,
"textXPosition": 1,
"textYPosition": 1,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "2",
"fee": 20000,
"width": "20",
"length": "20",
"xPosition": 132,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "3",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 164,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "4",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 196,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "5",
"fee": 20000,
"width": "10",
"length": "10",
"xPosition": 228,
"yPosition": 132,
"type": "String",
"label": "String",
"radius": 15
}
]
},
{
"id": "String",
"name": "String",
"booths": [
{
"number": "1",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 100,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "2",
"fee": 10000,
"width": "20",
"length": "20",
"xPosition": 132,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "3",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 164,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "4",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 196,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
},
{
"number": "5",
"fee": 10000,
"width": "10",
"length": "10",
"xPosition": 228,
"yPosition": 164,
"type": "String",
"label": "String",
"radius": 15
}
]
}
]
};
});
var EditBoothCtrl = function ($scope, $modalInstance, boothData) {
$scope.booth = angular.copy(boothData)
$scope.original = angular.extend($scope.booth);
$scope.ok = function () {
boothData = $scope.booth;
$modalInstance.close(boothData);
};
$scope.cancel = function () {
$scope.booth = angular.copy($scope.original);
$modalInstance.close();
};
};
Here's a dumbed-down copy of my section view's markup:
boothManager.html
<div ng-app="boothManager" ng-controller="BoothManagerCtrl" ngCloak>
<div ng-repeat="section in viewModel.sections">
<div ng-repeat="booth in section.booths" ng-click="open(booth)">
</div>
</div>
</div>
Here's my modal's markup:
modal.html
<div>
<!--<script type="text/ng-template" id="edit_booth.html">-->
<div class="modal-header">
<h3 class="modal-title">Booth info</h3>
</div>
<div class="modal-body">
<form name="editBoothForm">
<input placeholder="label" ng-model="booth.label" />
<input placeholder="Width" ng-model="booth.width" />
<input placeholder="Length" ng-model="booth.length" />
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<!-- </script>-->
</div>

If it were me, I will pass in a bit more information into the model that is passed into modal controller. Section object can be passed in directly, while individual booth object is identified by the its index inside the array:
// here, we pass in index number, and the owning section
$scope.open = function (booth, index, section) {
var modalInstance = $modal.open({
templateUrl: '../../templates/edit_booth.html',
controller: "EditBoothCtrl",
backdrop: true,
size: "sm",
resolve: {
boothData: function () {
// pass along these info into the object you inject
// into your modal controller
data = {
index: index,
section: section
};
return angular.copy(booth, data);
}
}
});
modalInstance.result.then(function (boothData) {
// here bootData.index and bootData.section exists
bootData.section.booths[bootData.index] = bootData;
// cleaning up since we no longer need them
delete bootData.index;
delete bootData.section;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Then, in your ng-repeat:
<div ng-repeat="section in viewModel.sections">
<div ng-repeat="booth in section.booths" ng-click="open(booth, $index, section)">
</div>
</div>

Related

Vega-lite: line mark not consistent in overview+ detailed responsive chart

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega#5.22.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#5.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.20.8"></script>
</head>
<body>
<div id="vis"/>
<script>
const spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"name": "source_0",
"data": {
"values": [
{"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21"},
{"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21"},
{"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21"},
{"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21"},
{"Items": "8", "Items_Rate": "0.45", "Month": "May-21"},
{"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21"},
{"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21"},
{"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21"},
{"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21"},
{"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21"},
{"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21"},
{"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21"}
]
},
"vconcat": [
{
"width": 850,
"height": 250,
"layer": [
{
"mark": {"type": "bar", "size": 50, "tooltip": true},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "ordinal",
"sort": null,
"scale": {"domain": {"param": "brush"}, "zero": true},
"axis": {
"title": "",
"labelAngle": 360,
"tickSize": 20,
"position": 0
}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {"tickMinStep": 1}
},
"color": {
"datum": "No. of Items",
"scale": {"range": ["#0065ad"]}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items",
"type": "quantitative",
"title": "No. of Items"
}
]
}
},
{
"mark": {
"type": "line",
"point": {"shape": "square", "size": "50"},
"size": "2",
"tooltip": true
},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"title": "",
"sort": null,
"scale": {"domain": {"param": "brush"}}
},
"y": {
"field": "Items_Rate",
"type": "quantitative",
"title": "Items",
"scale": {"zero": false},
"sort": null
},
"color": {
"datum": "Items Rate",
"scale": {"range": ["black"]},
"legend": {"symbolType": "square"}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items_Rate",
"type": "quantitative",
"title": "Rate"
}
]
}
}
],
"resolve": {
"scale": {
"y": "independent",
"shape": "independent",
"color": "independent",
"size": "independent"
}
}
},
{
"width": "850",
"height": 100,
"mark": "bar",
"params": [
{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"], "translate": true}
}
],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"sort": null,
"axis": {"title": "", "labels": false, "ticks": false}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false,
"title": "",
"labels": false,
"ticks": false
}
},
"color": {"value": "#0065ad"}
}
}
],
"config": {
"axisY": {"minExtent": 40},
"legend": {
"orient": "top",
"layout": {"top": {"anchor": "middle"}},
"labelFont": "arial",
"titleFont": "arial"
}
}
};
vegaEmbed("#vis", spec, {mode: "vega-lite"}).then(console.log).catch(console.warn);
</script>
</body>
</html>
It can also be viewed in Vega lite editor here:
https://vega.github.io/editor/#/gist/da859f07e288d51da47a309ef2718ab2/responsive_chart.json
My query is that when I select 4 or more graphs and scroll forwards, everything is working properly. However when I scroll the same backwards, the line graphs becomes incorrect.
Instead of the nearest point creating a line to join the newly visible point, the farthest or the second-last visible graph now is joining the points.
How could I change the code to have only the nearest point join with the new point and not the order of how they became visible?
For example, in the screenshot below, the Sept-21 point should join the Aug-21 point and NOT Nov-21 when I take the scroll backwards.
Thank you for the help.
You need a sort field. I added an index and used that but you can use anything you like.
Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"name": "source_0",
"data": {
"values": [
{"Items": "3", "Items_Rate": "0.20", "Month": "Jan-21", "Index":1},
{"Items": "6", "Items_Rate": "0.40", "Month": "Feb-21", "Index":2},
{"Items": "2", "Items_Rate": "0.20", "Month": "Mar-21", "Index":3},
{"Items": "4", "Items_Rate": "0.30", "Month": "Apr-21", "Index":4},
{"Items": "8", "Items_Rate": "0.45", "Month": "May-21", "Index":5},
{"Items": "9", "Items_Rate": "0.50", "Month": "Jun-21", "Index":6},
{"Items": "1", "Items_Rate": "0.10", "Month": "Jul-21", "Index":7},
{"Items": "5", "Items_Rate": "0.35", "Month": "Aug-21", "Index":8},
{"Items": "4", "Items_Rate": "0.28", "Month": "Sep-21", "Index":9},
{"Items": "7", "Items_Rate": "0.37", "Month": "Oct-21", "Index":10},
{"Items": "1", "Items_Rate": "0.50", "Month": "Nov-21", "Index":11},
{"Items": "4", "Items_Rate": "0.35", "Month": "Dec-21", "Index":12}
]
},
"vconcat": [
{
"width": 850,
"height": 250,
"layer": [
{
"mark": {"type": "bar", "size": 50, "tooltip": true},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "ordinal",
"sort": null,
"scale": {"domain": {"param": "brush"}, "zero": true},
"axis": {
"title": "",
"labelAngle": 360,
"tickSize": 20,
"position": 0
}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {"tickMinStep": 1}
},
"color": {"datum": "No. of Items", "scale": {"range": ["#0065ad"]}},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{
"field": "Items",
"type": "quantitative",
"title": "No. of Items"
}
]
}
},
{
"mark": {
"type": "line",
"point": {"shape": "square", "size": "50"},
"size": "2",
"tooltip": true
},
"transform": [{"filter": {"param": "brush"}}],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"title": "",
"sort": {"field": "Index"},
"scale": {"domain": {"param": "brush"}}
},
"y": {
"field": "Items_Rate",
"type": "quantitative",
"title": "Items",
"scale": {"zero": false},
"sort": null
},
"color": {
"datum": "Items Rate",
"scale": {"range": ["black"]},
"legend": {"symbolType": "square"}
},
"tooltip": [
{"field": "Month", "type": "nominal", "title": "Month"},
{"field": "Items_Rate", "type": "quantitative", "title": "Rate"}
]
}
}
],
"resolve": {
"scale": {
"y": "independent",
"shape": "independent",
"color": "independent",
"size": "independent"
}
}
},
{
"width": "850",
"height": 100,
"mark": "bar",
"params": [
{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"], "translate": true}
}
],
"encoding": {
"x": {
"field": "Month",
"type": "nominal",
"sort": null,
"axis": {"title": "", "labels": true, "ticks": false}
},
"y": {
"field": "Items",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false,
"title": "",
"labels": false,
"ticks": false
}
},
"color": {"value": "#0065ad"}
}
}
],
"config": {
"axisY": {"minExtent": 40},
"legend": {
"orient": "top",
"layout": {"top": {"anchor": "middle"}},
"labelFont": "arial",
"titleFont": "arial"
}
}
}

Display multi-colors according to graph values in Vega bar charts

How can i display the individual bars with a lighter color range based on the graph values. I came to know that vega has sequential multi-hue schemes.
Click here to check Image for MultiColor Scheme. I want to use this color scheme, for different values in the graph. For example, if i have value=3, then in the graph it should display lighter color as compared to the value=10. How can i include the multicolor scheme into the bar graph so it displays the color according to the value. Below is my snippet which i tried, i am actually looking for the color changing according to the amount instead of category. I included color in scales and in fill color in mark. Can someone guide me on how this can be achieved. I am new to this
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "category"},
"range": {"scheme": "category10"}
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"scale": "color", "field": "category"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
Update: I found out that i have added the fill color in type='text' in mark property, instead of type='rect'
"fill": {"scale": "color", "field": "category"}.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "category"},
"range": {"scheme": "category10"}
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"scale": "color", "field": "category"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}

Node Red smart Thermostat

I need help with increments in Node Red (on Raspberry Pi). I am trying to make a smart thermostat with a LCD touchscreen and an app for remote access (ex. coming home on a cold winter day and want to start heating your apartment).
Some suggestions on how to connect to the Raspberry Pi over the Internet (not local network) with an android and a link on a tutorial or example would be much appreciated.
P.S. I am doing this for a friend and I promised him some good results.
Sorry for messy code... => cleaned it up in the edit
I have tried everything I could think of to make my code work as I am not very experienced with NodeRed nor JS.
Global variables May just do the trick... I haven't figured it out yet...
Another barrier I have encountered is the ability to access and interact with the code outside the local network.
[
{
"id": "9f63513b.e227a",
"type": "ui_slider",
"z": "f216bae9.be3b68",
"name": "",
"label": "",
"group": "b344cd03.40f29",
"order": 2,
"width": "0",
"height": "0",
"passthru": true,
"topic": "slide",
"min": "10",
"max": "45",
"step": 1,
"x": 650,
"y": 140,
"wires": [
[
"4e35591.c5466a8",
"ef681f9b.17845"
]
]
},
{
"id": "4e35591.c5466a8",
"type": "delay",
"z": "f216bae9.be3b68",
"name": "Buffer",
"pauseType": "queue",
"timeout": "5",
"timeoutUnits": "seconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "1",
"randomLast": "5",
"randomUnits": "seconds",
"drop": true,
"x": 810,
"y": 60,
"wires": [
[
"eec05221.3091e"
]
]
},
{
"id": "82848cf2.b33d1",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "msg.buton = msg.payload;\ndelete msg.payload;\nmsg.incalzire=msg.buton;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 480,
"y": 240,
"wires": [
[
"9f63513b.e227a"
]
]
},
{
"id": "ef681f9b.17845",
"type": "ui_gauge",
"z": "f216bae9.be3b68",
"name": "",
"group": "b344cd03.40f29",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "",
"format": "{{value}}",
"min": "0",
"max": "60",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 810,
"y": 220,
"wires": []
},
{
"id": "eec05221.3091e",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "msg.tempslide=msg.payload;\ndelete msg.payload;\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1000,
"y": 60,
"wires": [
[
"f5853672.5fe148"
]
]
},
{
"id": "6b57c137.8c136",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Switch",
"func": "if(msg.payload===0){\n msg.payload=1;\n}\nelse if (msg.payload==1){\n msg.payload=0;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 460,
"wires": [
[
"82848cf2.b33d1"
]
]
},
{
"id": "f5853672.5fe148",
"type": "function",
"z": "f216bae9.be3b68",
"name": "working mess",
"func": "if (msg.incalzire===0||msg.payload===0){\n\nif (msg.temp<=msg.tempslide){\n msg.payload=0;\n}\n\nelse if (msg.temp>msg.tempslide){\n msg.payload=1;\n}\n\nelse{\n msg.payload=1;}\n \n}\n\n\nelse{\n msg.payload=1;\n \n}\n\n\n\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1058,
"y": 140,
"wires": [
[
"3f6977e5.b44158",
"ee3a7840.808ad8",
"7726596c.b74228"
]
]
},
{
"id": "d34a3234.79712",
"type": "ui_switch",
"z": "f216bae9.be3b68",
"name": "",
"label": "Override Window",
"group": "b344cd03.40f29",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "1",
"onvalueType": "num",
"onicon": "",
"oncolor": "",
"offvalue": "0",
"offvalueType": "num",
"officon": "",
"offcolor": "",
"x": 250,
"y": 420,
"wires": [
[
"6b57c137.8c136"
]
]
},
{
"id": "3f6977e5.b44158",
"type": "debug",
"z": "f216bae9.be3b68",
"name": "",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"x": 1293,
"y": 140,
"wires": []
},
{
"id": "ee3a7840.808ad8",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Message",
"func": "if(msg.payload===0){\n msg.payload='PORNITA'; //ON\n}\nelse if (msg.payload==1){\n msg.payload='OPRITA'; //OFF\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1183,
"y": 340,
"wires": [
[
"eaeac5fb.c27728"
]
]
},
{
"id": "7726596c.b74228",
"type": "rpi-gpio out",
"z": "f216bae9.be3b68",
"name": "Rel1",
"pin": "22",
"set": "",
"level": "0",
"freq": "",
"out": "out",
"x": 1233,
"y": 220,
"wires": []
},
{
"id": "c0784b3b.c1fcb8",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Switch",
"func": "if(msg.payload===0){\n msg.payload=1;\n}\nelse if (msg.payload==1){\n msg.payload=0;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 250,
"y": 380,
"wires": [
[
"d34a3234.79712"
]
]
},
{
"id": "eaeac5fb.c27728",
"type": "ui_text",
"z": "f216bae9.be3b68",
"group": "b344cd03.40f29",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Incalzirea este",
"format": "{{msg.payload}}",
"layout": "row-right",
"x": 1220,
"y": 380,
"wires": []
},
{
"id": "248c4825.00c018",
"type": "rpi-gpio in",
"z": "f216bae9.be3b68",
"name": "",
"pin": "40",
"intype": "tri",
"debounce": "25",
"read": false,
"x": 90,
"y": 300,
"wires": [
[
"c0784b3b.c1fcb8"
]
]
},
{
"id": "afb8009a.49841",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "//nu umbla la asta\nmsg.temp=msg.payload;\ndelete msg.payload;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 320,
"y": 140,
"wires": [
[
"c0784b3b.c1fcb8"
]
]
},
{
"id": "c696dbbc.58ee98",
"type": "rpi-dht22",
"z": "f216bae9.be3b68",
"name": "",
"topic": "Interior",
"dht": "22",
"pintype": "1",
"pin": "29",
"x": 140,
"y": 180,
"wires": [
[
"afb8009a.49841",
"33ec6fb6.fda7f"
]
]
},
{
"id": "33ec6fb6.fda7f",
"type": "ui_gauge",
"z": "f216bae9.be3b68",
"name": "",
"group": "d2bfb34b.1c943",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "° C",
"format": "{{value}}",
"min": 0,
"max": "60",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 150,
"y": 220,
"wires": []
},
{
"id": "d3a6bff.b99a44",
"type": "inject",
"z": "f216bae9.be3b68",
"name": "",
"topic": "",
"payload": "",
"payloadType": "date",
"repeat": "50",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 110,
"y": 120,
"wires": [
[
"c696dbbc.58ee98"
]
]
},
{
"id": "b344cd03.40f29",
"type": "ui_group",
"z": "",
"name": "Reglarea Incalzirii",
"tab": "af80de11.bfd15",
"order": 2,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "d2bfb34b.1c943",
"type": "ui_group",
"z": "",
"name": "Temperatura Curenta",
"tab": "af80de11.bfd15",
"order": 1,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "af80de11.bfd15",
"type": "ui_tab",
"z": "",
"name": "Sergiu",
"icon": "fa-thermometer-full",
"order": 4
}
]
The old thermostat was basically an automated relay switch. I have to make it smart and my best bet is a raspberry pi.
The increment part can replace the slider(I have Backups) and has to be triggered by a button in the Dashboard UI.
Everything except of what I mentioned works corectly.
Thank you for your help!! (or at least your time)

Add Y values as labels on a line chart, for some data points

I have a line chart, quite basic (see below for a simplified example that works on the Vega Editor). Basically, it draws lines, the X axis is successive dates, the Y axis is some numerical values.
I am trying to add labels for some of the data points on the line, with the value of Y at that point. Only for some of the data points, because some charts can be for over a year, so there can be hundreds of days (X values).
This is by the way how labels are put on the X axis automatically by Vega. If there are too many X values, it does not display every day, it says e.g. "Jan 1", then "Jan 8", then "Jan 15", etc. (nice one!)
Just for reference, with C3 (a charting library for D3), I used the following to draw one label out of every 7 data point:
data: {
json: data.data,
type: 'spline',
labels: {
format: function(v, id, i, j) {
if ( i % 7 === 3 ) {
return d3.format('.2f')(v);
}
}
...
Unfortunately, I have no idea where to start. I did not find any such example, and could not find anything related in the documentation.
Just for reference, here is an example chart to which I'd like to add these labels:
{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 500,
"height": 250,
"autosize": {
"type": "fit",
"resize": true
},
"data": [{
"name": "table",
"format": {
"parse": {
"date": "date",
"value": "number"
}
},
"values": [
{ "date": "2017-09-01", "value": "12.34", "what": "one" },
{ "date": "2017-09-01", "value": "4.34", "what": "two" },
{ "date": "2017-09-02", "value": "13.34", "what": "one" },
{ "date": "2017-09-02", "value": "13.34", "what": "two" },
{ "date": "2017-09-03", "value": "4.34", "what": "one" },
{ "date": "2017-09-03", "value": "15.34", "what": "two" },
{ "date": "2017-09-04", "value": "15.34", "what": "one" },
{ "date": "2017-09-04", "value": "5.34", "what": "two" },
{ "date": "2017-09-05", "value": "16.34", "what": "one" },
{ "date": "2017-09-05", "value": "6.34", "what": "two" },
{ "date": "2017-09-06", "value": "17.34", "what": "one" },
{ "date": "2017-09-06", "value": "17.34", "what": "two" },
{ "date": "2017-09-07", "value": "18.34", "what": "one" },
{ "date": "2017-09-07", "value": "8.34", "what": "two" },
{ "date": "2017-09-08", "value": "18.34", "what": "one" },
{ "date": "2017-09-08", "value": "14.34", "what": "two" },
{ "date": "2017-09-09", "value": "9.34", "what": "one" },
{ "date": "2017-09-09", "value": "14.34", "what": "two" },
{ "date": "2017-09-10", "value": "20.34", "what": "one" },
{ "date": "2017-09-10", "value": "4.34", "what": "two" }
]
}],
"scales": [{
"name": "x",
"type": "utc",
"range": "width",
"domain": {"data": "table", "field": "date"}
}, {
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "value"}
}, {
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "table", "field": "what"}
}],
"axes": [{
"orient": "bottom",
"scale": "x",
"encode": {
"labels": {
"interactive": true,
"update": {
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}}}
}, {
"orient": "left",
"scale": "y"
}],
"marks": [{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "what"
}
},
"marks": [{
"type": "line",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "date"},
"y": {"scale": "y", "field": "value"},
"stroke": {"scale": "color", "field": "what"},
"strokeWidth": {"value": 2}
},
"update": {
"interpolate": {"value": "monotone"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}]
}]
}
Vega has a property called tickCount that can be added to your axes definitions. Adding this to your y-axis must solve your case:
{
"orient": "left",
"scale": "y",
"tickCount": 4
}
You could use a signal as well if it should be dynamic.
The feature is even more powerful than illustrated. Go check out the docs for other options in below link:
https://vega.github.io/vega/docs/axes/

Wait for d3 to load

I am creating a pie chart using d3 to load a pie chart -
var pie = new d3pie(
// pie control Json
);
This is working great however I am looking to do logic after the pie has fully rendered.
I have tried to use the when done logic (like when doing an ajax call) like so -
$.when(pie).done(function () {
// further logic to be completed after pie has loaded
});
However this does not work in that it just steps into the when clause even tho the pie has not loaded fully. How can I do this?
You are looking for the onload callback:
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
Full code sample:
<html>
<head></head>
<body>
<div id="pieChart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
"header": {
"title": {
"text": "Lots of Programming Languages",
"fontSize": 24,
"font": "open sans"
},
"subtitle": {
"text": "A full pie chart to show off label collision detection and resolution.",
"color": "#999999",
"fontSize": 12,
"font": "open sans"
},
"titleSubtitlePadding": 9
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 590,
"pieOuterRadius": "90%"
},
"data": {
"sortOrder": "value-desc",
"content": [
{
"label": "JavaScript",
"value": 264131,
"color": "#2484c1"
},
{
"label": "Ruby",
"value": 218812,
"color": "#0c6197"
},
{
"label": "Java",
"value": 157618,
"color": "#4daa4b"
},
{
"label": "PHP",
"value": 114384,
"color": "#90c469"
},
{
"label": "Python",
"value": 95002,
"color": "#daca61"
},
{
"label": "C+",
"value": 78327,
"color": "#e4a14b"
},
{
"label": "C",
"value": 67706,
"color": "#e98125"
},
{
"label": "Objective-C",
"value": 36344,
"color": "#cb2121"
},
{
"label": "Shell",
"value": 28561,
"color": "#830909"
},
{
"label": "Cobol",
"value": 24131,
"color": "#923e99"
},
{
"label": "C#",
"value": 100,
"color": "#ae83d5"
},
{
"label": "Coldfusion",
"value": 68,
"color": "#bf273e"
},
{
"label": "Fortran",
"value": 218812,
"color": "#ce2aeb"
},
{
"label": "Coffeescript",
"value": 157618,
"color": "#bca44a"
},
{
"label": "Node",
"value": 114384,
"color": "#618d1b"
},
{
"label": "Basic",
"value": 95002,
"color": "#1ee67b"
},
{
"label": "Cola",
"value": 36344,
"color": "#b0ec44"
},
{
"label": "Perl",
"value": 32170,
"color": "#a4a0c9"
},
{
"label": "Dart",
"value": 28561,
"color": "#322849"
},
{
"label": "Go",
"value": 264131,
"color": "#86f71a"
},
{
"label": "Groovy",
"value": 218812,
"color": "#d1c87f"
},
{
"label": "Processing",
"value": 157618,
"color": "#7d9058"
},
{
"label": "Smalltalk",
"value": 114384,
"color": "#44b9b0"
},
{
"label": "Scala",
"value": 95002,
"color": "#7c37c0"
},
{
"label": "Visual Basic",
"value": 78327,
"color": "#cc9fb1"
},
{
"label": "Scheme",
"value": 67706,
"color": "#e65414"
},
{
"label": "Rust",
"value": 36344,
"color": "#8b6834"
},
{
"label": "FoxPro",
"value": 32170,
"color": "#248838"
}
]
},
"labels": {
"outer": {
"pieDistance": 32
},
"inner": {
"hideWhenLessThanPercentage": 3
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#ffffff",
"decimalPlaces": 0
},
"value": {
"color": "#adadad",
"fontSize": 11
},
"lines": {
"enabled": true
},
"truncation": {
"enabled": true
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"gradient": {
"enabled": true,
"percentage": 100
}
},
callbacks: {
onload: function(){
console.log('chart is loaded!');
}
}
});
</script>
</body>
</html>

Categories