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)
Related
My code is as follows:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango",
"count": "twenty"
},
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple",
"count": "ten"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60","0", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3 ,
"strokeDash": [6, 4]},
"encoding": {
"x": { "datum": "0" }
}
}
]
}
Following is the link to the chart on Vega Editor.
https://vega.github.io/editor/#/gist/5e4c2d4504be5cd555269faf042463db/discont_chart.json
I have manually added the 0 to the x-axis to to add a rule in the middle of the chart which is neccessary for my project. However, due to that, the rest of the line is now discontinuous. How could I solve this issue so the line is continuous?
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 800,
"height": 200,
"data": {
"values": [
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 100,
"post_90": 150,
"post_120": 200,
"type": "Mango"
},
{
"pre_120": 0,
"pre_90": 0,
"pre_60": 0,
"post_60": 90,
"post_90": 140,
"post_120": 190,
"type": "Apple"
}
]
},
"transform": [
{"fold": ["pre_120", "pre_90", "pre_60", "post_60", "post_90", "post_120"]}
],
"layer": [
{
"mark": "line",
"encoding": {
"x": {
"field": "key",
"sort": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
],
"scale": {
"domain": [
"pre_120",
"pre_90",
"pre_60",
"0",
"post_60",
"post_90",
"post_120"
]
}
},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "type", "type": "nominal"}
}
},
{
"mark": {
"type": "rule",
"color": "maroon",
"size": 3,
"strokeDash": [6, 4]
},
"encoding": {"x": {"datum": "0"}}
}
]
}
<!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"
}
}
}
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}
]
}
}
}
]
}
I cannot seem to extract the data I want from this (verified) JSON string coming from my home automation server (i.e. I cannot change the JSON return).
var myJson = '{ "Device_Num_6": { "states": [ { "id": 207, "service": "urn:upnp-org:serviceId:SwitchPower1", "variable": "Status", "value": "0" }, { "id": 208, "service": "urn:upnp-org:serviceId:Dimming1", "variable": "LoadLevelTarget", "value": "94" }, { "id": 209, "service": "urn:upnp-org:serviceId:Dimming1", "variable": "LoadLevelStatus", "value": "0" }, { "id": 210, "service": "urn:micasaverde-com:serviceId:HaDevice1", "variable": "Configured", "value": "1" }, { "id": 211, "service": "urn:micasaverde-com:serviceId:HaDevice1", "variable": "ModeSetting", "value": "1:;2:;3:;4:" }, { "id": 212, "service": "urn:micasaverde-com:serviceId:HaDevice1", "variable": "LastUpdate", "value": "1438440091" }, { "id": 213, "service": "urn:micasaverde-com:serviceId:HaDevice1", "variable": "FirstConfigured", "value": "1438440091" }, { "id": 214, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "Capabilities", "value": "209,140,0,4,17,1,L,R,RS,|38:1,39,112,114,115,134," }, { "id": 215, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "ManufacturerInfo", "value": "99,17495,12848" }, { "id": 216, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "VersionInfo", "value": "6,1,91,2,11" }, { "id": 217, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "NodeInfo", "value": "26,27,70,72,73,86," }, { "id": 218, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "Neighbors", "value": "1,2,3,4,6,7,8,9,11,12,13,14,15,16,17,21,25,26,27,31,32,33,34,35," }, { "id": 219, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "LastReset", "value": "0" }, { "id": 220, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "AssociationNum", "value": "0" }, { "id": 221, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "LastRouteUpdate", "value": "1468760253" }, { "id": 222, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "PollOk", "value": "43947" }, { "id": 223, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "LastNnu", "value": "1468735200,700" }, { "id": 224, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "LastArr", "value": "1468735200,700" }, { "id": 225, "service": "urn:micasaverde-com:serviceId:ZWaveDevice1", "variable": "PollNoReply", "value": "54" }, { "id": 226, "service": "urn:micasaverde-com:serviceId:ZWaveNetwork1", "variable": "ConsecutivePollFails", "value": "0" } ], "Jobs": [ ], "PendingJobs": 0, "tooltip": { "display": 0 }, "status": -1 }, "Using_2G": 0, "LoadTime": 1468766261, "DataVersion": 766262647, "UserData_DataVersion": 766261013, "TimeStamp": 1468779944, "lights_on": 3, "lights_off": 8, "doors_locked": 5, "doors_unlocked": 2, "sensors_tripped": 0, "sensors_not_tripped": 8, "failed_devices": 8, "visible_devices": 93, "partitions_active": 0, "partitions_notactive": 2, "alerts": [ { "PK_Device": 154, "Room": 10, "DeviceName": "Laundry Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742240051", "LocalDate": "2016-07-17 10:38:22", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 2, "LocalTimestamp": 1468766302, "Code": "SL_BATTERYALARM", "NewValue": "0", "Description": "Laundry Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 150, "Room": 23, "DeviceName": "Kids Bath Motion", "DeviceType": "urn:schemas-micasaverde-com:device:MotionSensor:1", "PK_Alert": "4742240181", "LocalDate": "2016-07-17 10:38:22", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 2, "LocalTimestamp": 1468766302, "Code": "SL_BATTERYALARM", "NewValue": "10", "Description": "Kids Bath Motion", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255081", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 2, "LocalTimestamp": 1468766418, "Code": "DL_LOW_BATTERY", "NewValue": "1", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255231", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 3, "LocalTimestamp": 1468766418, "Code": "DL_LOCK_CHANGED", "NewValue": "3", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255371", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 3, "LocalTimestamp": 1468766418, "Code": "DL_CODE_CHANGED", "NewValue": "3", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255471", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 3, "LocalTimestamp": 1468766418, "Code": "DL_USERCODE", "NewValue": "UserID=\"1\" UserName=\"Main\"", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255591", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 3, "LocalTimestamp": 1468766418, "Code": "DL_LOCK_BUTTON", "NewValue": "1", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255721", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 1, "LocalTimestamp": 1468766418, "Code": "DL_LOCK_FAILURE", "NewValue": "1", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255801", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 1, "LocalTimestamp": 1468766418, "Code": "DL_PINFAILED", "NewValue": "1", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" }, { "PK_Device": 101, "Room": 21, "DeviceName": "Cabana Door Lock", "DeviceType": "urn:schemas-micasaverde-com:device:DoorLock:1", "PK_Alert": "4742255971", "LocalDate": "2016-07-17 10:40:18", "EventType": 4, "SourceType": 4, "Argument": 0, "Filesize": 0, "Severity": 2, "LocalTimestamp": 1468766418, "Code": "SL_BATTERYALARM", "NewValue": "0", "Description": "Cabana Door Lock", "Users": "", "Server_Storage": "", "Key": "", "Icon": "", "PK_Store": "0" } ], "ZWaveStatus": 1, "Mode": 1, "LocalTime": "2016-07-17 14:25:44 D" }';
var myObject = JSON.parse(myJson);
console.log(myObject.Device_Num_6.states[0].id); // should return 207
Your json has invalid format. Because of that you couldn't to parse it as JSON.parse method. Try to check it here http://jsonviewer.stack.hu/
UPD: issue with this string "NewValue": "UserID=\"1\" UserName=\"Main\"". You should make it as "NewValue": "UserID=\\"1\\" UserName=\\"Main\\""
Here is my html,
<tr ng-repeat="val in attribute.format.values">
I am getting,
[Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: val in attribute.format.values, Duplicate key: object:07F, Duplicate value: {2}][1]
Here is my JSON,
[{
"name": "Auto",
"weight": "1",
"value": "1",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "06c9f57c-963f-4977-bca5-9226e971a8dc",
"visible": true,
"$$hashKey": "06V"
}, {
"name": "On",
"weight": "1",
"value": "2",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "dc019b87-1da5-4f21-b91f-4ee35ec04eb8",
"visible": true,
"$$hashKey": "06W"
}, {
"name": "Off",
"weight": "1",
"value": "4",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "daf8ef80-a2da-4e02-8960-791b8528905e",
"visible": true,
"$$hashKey": "06X"
}, {
"name": "Redeye Reduction",
"weight": "1",
"value": "5",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "87ccb4ee-39cd-4bd0-9817-7e477af6d5b0",
"visible": true,
"$$hashKey": "06Y"
}, {
"name": "Slow Sync",
"weight": "1",
"value": "6",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "e0b14c8b-af4b-4ab8-a533-32ac4829613f",
"visible": true,
"$$hashKey": "06Z"
}, {
"name": "High Speed Sync",
"weight": "1",
"value": "7",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "622c7ebf-067c-46ed-913a-ba045a0586df",
"visible": true,
"$$hashKey": "070"
}, {
"name": "Front Curtain",
"weight": "1",
"value": "8",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "fe12c21c-e2c3-4702-ae9b-82f2fe248574",
"visible": true,
"$$hashKey": "071"
}, {
"name": "Rear Curtain",
"weight": "1",
"value": "9",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "4a229ebb-d029-4b1e-a13d-246d00215900",
"visible": true,
"$$hashKey": "072"
}, {
"name": "Fill-in",
"weight": "1",
"value": "10",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "a7ed372d-398f-4614-8efa-64a338f0ad20",
"visible": true,
"$$hashKey": "073"
}, {
"name": "Wireless",
"weight": "1",
"value": "11",
"count": 0,
"min": 0,
"max": 0,
"children": [],
"id": "b36ab529-feab-42aa-8863-2a7084ac0aba",
"visible": true,
"$$hashKey": "074"
}, {
"name": "Redeye Reduction with Slow Sync",
"value": "12",
"weight": "1",
"visible": true,
"id": "23ee6ac2-1b8b-41a7-ae80-aa4fcd8134ae",
"$$hashKey": "07F"
}, {
"name": "Slow Rear-Curtain Sync",
"value": "13",
"weight": "1",
"visible": true,
"id": "f5835da6-4eac-4878-a8c0-3f91cd22372f",
"$$hashKey": "07J"
}, {
"name": "Repeating or Strobe",
"value": "14",
"weight": "1",
"visible": true,
"id": "8f3bb252-ae6e-426a-9781-d1232a0a4845",
"$$hashKey": "0CW"
}, {
"name": "Rear Sync",
"value": "15",
"weight": "1",
"visible": true,
"id": "d668aa49-a999-4638-8af2-5e9eaafd6e75",
"$$hashKey": "06L"
}, {
"name": "Fill-Flaw",
"value": "16",
"weight": "1",
"visible": true,
"id": "00f92889-05f9-45fc-b3de-37e224991548",
"$$hashKey": "08D"
}, {
"name": "Advanced Flash",
"value": "17",
"weight": "1",
"visible": true,
"id": "d49c3d25-2bf5-4723-b7d4-c3ae36783097",
"$$hashKey": "079"
}, {
"name": "Fill-Flash",
"value": "18",
"weight": "1",
"visible": true,
"id": "4693db2a-19c7-4839-8e65-875e36416c63",
"$$hashKey": "0ER"
}, {
"name": "Smart Flash",
"value": "19",
"weight": "1",
"visible": true,
"id": "8b04d59b-75cc-46ff-acc0-33f410f64a09",
"$$hashKey": "07D"
}, {
"name": "",
"value": "",
"weight": "",
"visible": true,
"id": "18cec753-48fe-47e6-9e67-1bb36972bee4",
"$$hashKey": "07F"
}, {
"name": "",
"value": "",
"weight": "",
"visible": true,
"id": "a7fbad1d-2a49-40e7-a9b1-520db0f9fc65"
}]
<tr ng-repeat="val in attribute.format.values track by id">
edit like this
id could be the identity of the objects so you can tack though the id property, that will keep one object if you have add two objects that shares same id mistakenly.
Try this:
you can use 'track by $index'
<tr ng-repeat="val in attribute.format.values track by $index">