Dashboard Nest thermostat

README.md

NEST style thermostat Dashboard widget for Node-red

If you have made heating or cooling controls on Node-red you will need nice thermostat widget to display and control your device via Node-red dashboard.

Fully responsive design. Touch enabled set-point makes it even more interactive. Press and hold finger or mouse and it will activate the set-point sliding function.

Also it has several display modes like heating, cooling and away. It makes it more interactable and user intuitive. For ECO friendly folks there is possible to turn on and off that little green leaf.

How to install:

Open and copy all text from flow.js then go to your node-red application and press import > cliboard paste the text and you are done.

After import you should see something like this:

What data can I push in and out:

You can push the folowing values in json format. When target temperature is changed from UI node will push new values in the same structure in the output.

• ambient_temperature your temperature readings numeric payloads.
• target_temperature your thermostat setpoint numeric payloads.
• hvac_state string (off, heating, cooling) payload.
• has_leave boolean (true, false) payloads.
• away boolean (true, false) payloads.

msg.payload = {
    "ambient_temperature": 21.1,
    "target_temperature": 23,
    "hvac_state": "heating",
    "has_leaf": false,
    "away": false
}

If you are familiar with CSS and JAVASSCRIPT there there are more stuff to customize dial colors nd ranges etc.

Some options in the script:

options = {
       diameter: options.diameter || 400,
       minValue: options.minValue || 10, //Minimum value for target temperature
       maxValue: options.maxValue || 30, //Maximum value for target temperature
       numTicks: options.numTicks || 200, //Number of tick lines to display around the dial
       onSetTargetTemperature: options.onSetTargetTemperature || function() {}, // Function called when new target temperature set by the dial
};

var properties = {
       tickDegrees: 300, // Degrees of the dial that should be covered in tick lines
       rangeValue: options.maxValue - options.minValue,
       radius: options.diameter/2,
       ticksOuterRadius: options.diameter / 30,
       ticksInnerRadius: options.diameter / 8,
       hvac_states: ['off', 'heating', 'cooling'],
       dragLockAxisDistance: 15,
       labels: {
              targetLabel: 'Set',
              ambientUnits: 'ºC'
       }
};

Translation to other languages

Mode, target and units labels can be edited inside properties part of the code.

What if I want several widgets on one dashboard page?

import several widgets just make sure you edit uniq ID in these 2 lines inside the code of UI_Template block. Top of the code.

<div id="thermostat1"></div>

var thermostatId = "thermostat1";

What if I want farenheit units?

change minValue and maxValue temperatures to Farenheit in the options part of the code. The rest should be fine.

options = {
       diameter: options.diameter || 400,
       minValue: options.minValue || 50, // Minimum value for target temperature Farenheit
       maxValue: options.maxValue || 86, // Maximum value for target temperature Farenheit
       numTicks: options.numTicks || 200, // Number of tick lines to display around the dial
       onSetTargetTemperature: options.onSetTargetTemperature || function() {}, // Function called when new target temperature set by the dial
};

What if I want to round temperatures to .1 steps?

Search the code and find roundHalf function:

function roundHalf(num) {	
       return Math.round(num*2)/2;	
}	

Change to this:

function roundHalf(num) {	
       return Math.round(num*10)/10;	
}	

Issues:

Use the GitHub issues log for raising issues or contributing suggestions and enhancements. GITHUB

flow.json

[{"id":"31c69a42.23fd16","type":"ui_template","z":"e508d534.7df308","group":"8a50f58a.83fee8","name":"Nest style UI Widget","order":1,"width":"0","height":"0","format":"\n<div id=\"thermostat1\"></div>\n\n<script>\n    \n    var thermostatId = \"thermostat1\";\n\n    var thermostatDial = (function() {\n\t\n\t/*\n\t * Utility functions\n\t */\n\t\n\t// Create an element with proper SVG namespace, optionally setting its attributes and appending it to another element\n\tfunction createSVGElement(tag,attributes,appendTo) {\n\t\tvar element = document.createElementNS('http://www.w3.org/2000/svg',tag);\n\t\tattr(element,attributes);\n\t\tif (appendTo) {\n\t\t\tappendTo.appendChild(element);\n\t\t}\n\t\treturn element;\n\t}\n\t\n\t// Set attributes for an element\n\tfunction attr(element,attrs) {\n\t\tfor (var i in attrs) {\n\t\t\telement.setAttribute(i,attrs[i]);\n\t\t}\n\t}\n\t\n\t// Rotate a cartesian point about given origin by X degrees\n\tfunction rotatePoint(point, angle, origin) {\n\t\tvar radians = angle * Math.PI/180;\n\t\tvar x = point[0]-origin[0];\n\t\tvar y = point[1]-origin[1];\n\t\tvar x1 = x*Math.cos(radians) - y*Math.sin(radians) + origin[0];\n\t\tvar y1 = x*Math.sin(radians) + y*Math.cos(radians) + origin[1];\n\t\treturn [x1,y1];\n\t}\n\t\n\t// Rotate an array of cartesian points about a given origin by X degrees\n\tfunction rotatePoints(points, angle, origin) {\n\t\treturn points.map(function(point) {\n\t\t\treturn rotatePoint(point, angle, origin);\n\t\t});\n\t}\n\t\n\t// Given an array of points, return an SVG path string representing the shape they define\n\tfunction pointsToPath(points) {\n\t\treturn points.map(function(point, iPoint) {\n\t\t\treturn (iPoint>0?'L':'M') + point[0] + ' ' + point[1];\n\t\t}).join(' ')+'Z';\n\t}\n\t\n\tfunction circleToPath(cx, cy, r) {\n\t\treturn [\n\t\t\t\"M\",cx,\",\",cy,\n\t\t\t\"m\",0-r,\",\",0,\n\t\t\t\"a\",r,\",\",r,0,1,\",\",0,r*2,\",\",0,\n\t\t\t\"a\",r,\",\",r,0,1,\",\",0,0-r*2,\",\",0,\n\t\t\t\"z\"\n\t\t].join(' ').replace(/\\s,\\s/g,\",\");\n\t}\n\t\n\tfunction donutPath(cx,cy,rOuter,rInner) {\n\t\treturn circleToPath(cx,cy,rOuter) + \" \" + circleToPath(cx,cy,rInner);\n\t}\n\t\n\t// Restrict a number to a min + max range\n\tfunction restrictToRange(val,min,max) {\n\t\tif (val < min) return min;\n\t\tif (val > max) return max;\n\t\treturn val;\n\t}\n\t\n\t// Round a number to the nearest 0.5\n\tfunction roundHalf(num) {\n\t\treturn Math.round(num*2)/2;\n\t}\n\t\n\tfunction setClass(el, className, state) {\n\t\tel.classList[state ? 'add' : 'remove'](className);\n\t}\n\t\n\t/*\n\t * The \"MEAT\"\n\t */\n\n\treturn function(targetElement, options) {\n\t\tvar self = this;\n\t\t\n\t\t/*\n\t\t * Options\n\t\t */\n\t\toptions = options || {};\n\t\toptions = {\n\t\t\tdiameter: options.diameter || 400,\n\t\t\tminValue: options.minValue || 10, // Minimum value for target temperature\n\t\t\tmaxValue: options.maxValue || 30, // Maximum value for target temperature\n\t\t\tnumTicks: options.numTicks || 200, // Number of tick lines to display around the dial\n\t\t\tonSetTargetTemperature: options.onSetTargetTemperature || function() {}, // Function called when new target temperature set by the dial\n\t\t};\n\t\t\n\t\t/*\n\t\t * Properties - calculated from options in many cases\n\t\t */\n\t\tvar properties = {\n\t\t\ttickDegrees: 300, // Degrees of the dial that should be covered in tick lines\n\t\t\trangeValue: options.maxValue - options.minValue,\n\t\t\tradius: options.diameter/2,\n\t\t\tticksOuterRadius: options.diameter / 30,\n\t\t\tticksInnerRadius: options.diameter / 8,\n\t\t\thvac_states: ['off', 'heating', 'cooling'],\n\t\t\tdragLockAxisDistance: 15,\n\t\t\tlabels: {\n                targetLabel: 'Set',\n                ambientUnits: 'ºC'\n\t\t\t}\n\t\t}\n\t\tproperties.lblAmbientPosition = [properties.radius, properties.ticksOuterRadius-(properties.ticksOuterRadius-properties.ticksInnerRadius)/2]\n\t\tproperties.offsetDegrees = 180-(360-properties.tickDegrees)/2;\n\t\t\n\t\t/*\n\t\t * Object state\n\t\t */\n\t\tvar state = {\n\t\t\ttarget_temperature: options.minValue,\n\t\t\tambient_temperature: options.minValue,\n\t\t\thvac_state: properties.hvac_states[0],\n\t\t\thas_leaf: false,\n\t\t\taway: false\n\t\t};\n\t\t\n\t\t/*\n\t\t * Property getter / setters\n\t\t */\n\t\tObject.defineProperty(this,'target_temperature',{\n\t\t\tget: function() {\n\t\t\t\treturn state.target_temperature;\n\t\t\t},\n\t\t\tset: function(val) {\n\t\t\t\tstate.target_temperature = restrictTargetTemperature(+val);\n\t\t\t\trender();\n\t\t\t}\n\t\t});\n\t\tObject.defineProperty(this,'ambient_temperature',{\n\t\t\tget: function() {\n\t\t\t\treturn state.ambient_temperature;\n\t\t\t},\n\t\t\tset: function(val) {\n\t\t\t\tstate.ambient_temperature = roundHalf(+val);\n\t\t\t\trender();\n\t\t\t}\n\t\t});\n\t\tObject.defineProperty(this,'hvac_state',{\n\t\t\tget: function() {\n\t\t\t\treturn state.hvac_state;\n\t\t\t},\n\t\t\tset: function(val) {\n\t\t\t\tif (properties.hvac_states.indexOf(val)>=0) {\n\t\t\t\t\tstate.hvac_state = val;\n\t\t\t\t\trender();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tfunction str2bool(strvalue){\n          return (strvalue && typeof strvalue == 'string') ? (strvalue.toLowerCase() == 'true') : (strvalue == true);\n        }\n\t\tObject.defineProperty(this,'has_leaf',{\n\t\t\tget: function() {\n\t\t\t\treturn state.has_leaf;\n\t\t\t},\n\t\t\tset: function(val) {\n\t\t\t\tstate.has_leaf = !!str2bool(val);\n\t\t\t\trender();\n\t\t\t}\n\t\t});\n\t\tObject.defineProperty(this,'away',{\n\t\t\tget: function() {\n\t\t\t\treturn state.away;\n\t\t\t},\n\t\t\tset: function(val) {\n\t\t\t\tstate.away = !!str2bool(val);\n\t\t\t\trender();\n\t\t\t}\n\t\t});\n\t\t\n\t\t/*\n\t\t * SVG\n\t\t */\n\t\tvar svg = createSVGElement('svg',{\n\t\t\twidth: '100%', //options.diameter+'px',\n\t\t\theight: '100%', //options.diameter+'px',\n\t\t\tviewBox: '0 0 '+options.diameter+' '+options.diameter,\n\t\t\tclass: 'dial'\n\t\t},targetElement);\n\t\t// CIRCULAR DIAL\n\t\tvar circle = createSVGElement('circle',{\n\t\t\tcx: properties.radius,\n\t\t\tcy: properties.radius,\n\t\t\tr: properties.radius,\n\t\t\tclass: 'dial__shape'\n\t\t},svg);\n\t\t// EDITABLE INDICATOR\n\t\tvar editCircle = createSVGElement('path',{\n\t\t\td: donutPath(properties.radius,properties.radius,properties.radius-4,properties.radius-8),\n\t\t\tclass: 'dial__editableIndicator',\n\t\t},svg);\n\t\t\n\t\t/*\n\t\t * Ticks\n\t\t */\n\t\tvar ticks = createSVGElement('g',{\n\t\t\tclass: 'dial__ticks'\t\n\t\t},svg);\n\t\tvar tickPoints = [\n\t\t\t[properties.radius-1, properties.ticksOuterRadius],\n\t\t\t[properties.radius+1, properties.ticksOuterRadius],\n\t\t\t[properties.radius+1, properties.ticksInnerRadius],\n\t\t\t[properties.radius-1, properties.ticksInnerRadius]\n\t\t];\n\t\tvar tickPointsLarge = [\n\t\t\t[properties.radius-1.5, properties.ticksOuterRadius],\n\t\t\t[properties.radius+1.5, properties.ticksOuterRadius],\n\t\t\t[properties.radius+1.5, properties.ticksInnerRadius+20],\n\t\t\t[properties.radius-1.5, properties.ticksInnerRadius+20]\n\t\t];\n\t\tvar theta = properties.tickDegrees/options.numTicks;\n\t\tvar tickArray = [];\n\t\tfor (var iTick=0; iTick<options.numTicks; iTick++) {\n\t\t\ttickArray.push(createSVGElement('path',{d:pointsToPath(tickPoints)},ticks));\n\t\t};\n\t\t\n\t\t/*\n\t\t * Labels\n\t\t */\n\t\tvar lblTarget = createSVGElement('text',{\n\t\t\tx: properties.radius,\n\t\t\ty: properties.radius,\n\t\t\tclass: 'dial__lbl dial__lbl--target'\n\t\t},svg);\n\t\tvar lblTarget_text = document.createTextNode('');\n\t\tlblTarget.appendChild(lblTarget_text);\n\t\t//\n\t\tvar lblTargetHalf = createSVGElement('text',{\n\t\t\tx: properties.radius + properties.radius/2.5,\n\t\t\ty: properties.radius - properties.radius/8,\n\t\t\tclass: 'dial__lbl dial__lbl--target--half'\n\t\t},svg);\n\t\tvar lblTargetHalf_text = document.createTextNode('5');\n\t\tlblTargetHalf.appendChild(lblTargetHalf_text);\n\t\t//\n\t\tvar lblTargetlabel = createSVGElement('text', {\n          x: properties.radius,\n          y: properties.radius - properties.radius / 2.5,\n          class: 'dial__lbl dial__lbl--targetlabel'\n        }, svg);\n        var lblTargetlabel_text = document.createTextNode(properties.labels.targetLabel);\n        lblTargetlabel.appendChild(lblTargetlabel_text);\n        //\n\t\tvar lblAmbient = createSVGElement('text',{\n\t\t\tclass: 'dial__lbl dial__lbl--ambient'\n\t\t},svg);\n\t\tvar lblAmbient_text = document.createTextNode('');\n\t\tlblAmbient.appendChild(lblAmbient_text);\n\t\t//\n\t\tvar lblAmbientUnits = createSVGElement('text', {\n          x: properties.radius,\n          y: properties.radius + properties.radius / 3,\n          class: 'dial__lbl dial__lbl--ambient--units'\n        }, svg);\n        var lblAmbient_units = document.createTextNode(properties.labels.ambientUnits);\n        lblAmbientUnits.appendChild(lblAmbient_units);\n        //\n\t\tvar lblAway = createSVGElement('text',{\n\t\t\tx: properties.radius,\n\t\t\ty: properties.radius,\n\t\t\tclass: 'dial__lbl dial__lbl--away'\n\t\t},svg);\n\t\tvar lblAway_text = document.createTextNode('AWAY');\n\t\tlblAway.appendChild(lblAway_text);\n\t\t//\n\t\tvar icoLeaf = createSVGElement('path',{\n\t\t\tclass: 'dial__ico__leaf'\n\t\t},svg);\n\t\t\n\t\t/*\n\t\t * LEAF\n\t\t */\n\t\tvar leafScale = properties.radius/5/100;\n\t\tvar leafDef = [\"M\", 3, 84, \"c\", 24, 17, 51, 18, 73, -6, \"C\", 100, 52, 100, 22, 100, 4, \"c\", -13, 15, -37, 9, -70, 19, \"C\", 4, 32, 0, 63, 0, 76, \"c\", 6, -7, 18, -17, 33, -23, 24, -9, 34, -9, 48, -20, -9, 10, -20, 16, -43, 24, \"C\", 22, 63, 8, 78, 3, 84, \"z\"].map(function(x) {\n\t\t\treturn isNaN(x) ? x : x*leafScale;\n\t\t}).join(' ');\n\t\tvar translate = [properties.radius-(leafScale*100*0.5),properties.radius*1.5]\n\t\tvar icoLeaf = createSVGElement('path',{\n\t\t\tclass: 'dial__ico__leaf',\n\t\t\td: leafDef,\n\t\t\ttransform: 'translate('+translate[0]+','+translate[1]+')'\n\t\t},svg);\n\t\t\t\n\t\t/*\n\t\t * RENDER\n\t\t */\n\t\tfunction render() {\n\t\t\trenderAway();\n\t\t\trenderHvacState();\n\t\t\trenderTicks();\n\t\t\trenderTargetTemperature();\n\t\t\trenderAmbientTemperature();\n\t\t\trenderLeaf();\n\t\t}\n\t\trender();\n\n\t\t/*\n\t\t * RENDER - ticks\n\t\t */\n\t\tfunction renderTicks() {\n\t\t\tvar vMin, vMax;\n\t\t\tif (self.away) {\n\t\t\t\tvMin = self.ambient_temperature;\n\t\t\t\tvMax = vMin;\n\t\t\t} else {\n\t\t\t\tvMin = Math.min(self.ambient_temperature, self.target_temperature);\n\t\t\t\tvMax = Math.max(self.ambient_temperature, self.target_temperature);\n\t\t\t}\n\t\t\tvar min = restrictToRange(Math.round((vMin-options.minValue)/properties.rangeValue * options.numTicks),0,options.numTicks-1);\n\t\t\tvar max = restrictToRange(Math.round((vMax-options.minValue)/properties.rangeValue * options.numTicks),0,options.numTicks-1);\n\t\t\t//\n\t\t\ttickArray.forEach(function(tick,iTick) {\n\t\t\t\tvar isLarge = iTick==min || iTick==max;\n\t\t\t\tvar isActive = iTick >= min && iTick <= max;\n\t\t\t\tattr(tick,{\n\t\t\t\t\td: pointsToPath(rotatePoints(isLarge ? tickPointsLarge: tickPoints,iTick*theta-properties.offsetDegrees,[properties.radius, properties.radius])),\n\t\t\t\t\tclass: isActive ? 'active' : ''\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t\n\t\t/*\n\t\t * RENDER - ambient temperature\n\t\t */\n\t\tfunction renderAmbientTemperature() {\n\t\t\tlblAmbient_text.nodeValue = Math.floor(self.ambient_temperature);\n\t\t\tif (self.ambient_temperature%1!=0) {\n\t\t\t\tlblAmbient_text.nodeValue += '⁵';\n\t\t\t}\n\t\t\tvar peggedValue = restrictToRange(self.ambient_temperature, options.minValue, options.maxValue);\n\t\t\tdegs = properties.tickDegrees * (peggedValue-options.minValue)/properties.rangeValue - properties.offsetDegrees;\n\t\t\tif (peggedValue > self.target_temperature) {\n\t\t\t\tdegs += 8;\n\t\t\t} else {\n\t\t\t\tdegs -= 8;\n\t\t\t}\n\t\t\tvar pos = rotatePoint(properties.lblAmbientPosition,degs,[properties.radius, properties.radius]);\n\t\t\tattr(lblAmbient,{\n\t\t\t\tx: pos[0],\n\t\t\t\ty: pos[1]\n\t\t\t});\n\t\t}\n\n\t\t/*\n\t\t * RENDER - target temperature\n\t\t */\n\t\tfunction renderTargetTemperature() {\n\t\t\tlblTarget_text.nodeValue = Math.floor(self.target_temperature);\n\t\t\tsetClass(lblTargetHalf,'shown',self.target_temperature%1!=0);\n\t\t}\n\t\t\n\t\t/*\n\t\t * RENDER - leaf\n\t\t */\n\t\tfunction renderLeaf() {\n\t\t\tsetClass(svg,'has-leaf',self.has_leaf);\n\t\t}\n\t\t\n\t\t/*\n\t\t * RENDER - HVAC state\n\t\t */\n\t\tfunction renderHvacState() {\n\t\t\tArray.prototype.slice.call(svg.classList).forEach(function(c) {\n\t\t\t\tif (c.match(/^dial--state--/)) {\n\t\t\t\t\tsvg.classList.remove(c);\n\t\t\t\t};\n\t\t\t});\n\t\t\tsvg.classList.add('dial--state--'+self.hvac_state);\n\t\t}\n\t\t\n\t\t/*\n\t\t * RENDER - away\n\t\t */\n\t\tfunction renderAway() {\n\t\t\tsvg.classList[self.away ? 'add' : 'remove']('away');\n\t\t}\n\t\t\n\t\t/*\n\t\t * Drag to control\n\t\t */\n\t\tvar _drag = {\n\t\t\tinProgress: false,\n\t\t\tstartPoint: null,\n\t\t\tstartTemperature: 0,\n\t\t\tlockAxis: undefined\n\t\t};\n\t\t\n\t\tfunction eventPosition(ev) {\n\t\t\tif (ev.targetTouches && ev.targetTouches.length) {\n\t\t\t\treturn [ev.targetTouches[0].clientX, ev.targetTouches[0].clientY];\n\t\t\t} else {\n\t\t\t\treturn [ev.x, ev.y];\n\t\t\t};\n\t\t}\n\t\t\n\t\tvar startDelay;\n\t\tfunction dragStart(ev) {\n\t\t\tstartDelay = setTimeout(function() {\n\t\t\t\tsetClass(svg, 'dial--edit', true);\n\t\t\t\t_drag.inProgress = true;\n\t\t\t\t_drag.startPoint = eventPosition(ev);\n\t\t\t\t_drag.startTemperature = self.target_temperature || options.minValue;\n\t\t\t\t_drag.lockAxis = undefined;\n\t\t\t},1000);\n\t\t};\n\t\t\n\t\tfunction dragEnd (ev) {\n\t\t\tclearTimeout(startDelay);\n\t\t\tsetClass(svg, 'dial--edit', false);\n\t\t\tif (!_drag.inProgress) return;\n\t\t\t_drag.inProgress = false;\n\t\t\tif (self.target_temperature != _drag.startTemperature) {\n\t\t\t\tif (typeof options.onSetTargetTemperature == 'function') {\n\t\t\t\t\toptions.onSetTargetTemperature(self.target_temperature);\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t\t\n\t\tfunction dragMove(ev) {\n\t\t\tev.preventDefault();\n\t\t\tif (!_drag.inProgress) return;\n\t\t\tvar evPos = eventPosition(ev);\n\t\t\tvar dy = _drag.startPoint[1]-evPos[1];\n\t\t\tvar dx = evPos[0] - _drag.startPoint[0];\n\t\t\tvar dxy;\n\t\t\tif (_drag.lockAxis == 'x') {\n\t\t\t\tdxy = dx;\n\t\t\t} else if (_drag.lockAxis == 'y') {\n\t\t\t\tdxy = dy;\n\t\t\t} else if (Math.abs(dy) > properties.dragLockAxisDistance) {\n\t\t\t\t_drag.lockAxis = 'y';\n\t\t\t\tdxy = dy;\n\t\t\t} else if (Math.abs(dx) > properties.dragLockAxisDistance) {\n\t\t\t\t_drag.lockAxis = 'x';\n\t\t\t\tdxy = dx;\n\t\t\t} else {\n\t\t\t\tdxy = (Math.abs(dy) > Math.abs(dx)) ? dy : dx;\n\t\t\t};\n\t\t\tvar dValue = (dxy*getSizeRatio())/(options.diameter)*properties.rangeValue;\n\t\t\tself.target_temperature = roundHalf(_drag.startTemperature+dValue);\n\t\t}\n\t\t\n\t\tsvg.addEventListener('mousedown',dragStart);\n\t\tsvg.addEventListener('touchstart',dragStart);\n\t\t\n\t\tsvg.addEventListener('mouseup',dragEnd);\n\t\tsvg.addEventListener('mouseleave',dragEnd);\n\t\tsvg.addEventListener('touchend',dragEnd);\n\t\t\n\t\tsvg.addEventListener('mousemove',dragMove);\n\t\tsvg.addEventListener('touchmove',dragMove);\n\t\t//\n\t\t\n\t\t/*\n\t\t * Helper functions\n\t\t */\n\t\tfunction restrictTargetTemperature(t) {\n\t\t\treturn restrictToRange(roundHalf(t),options.minValue,options.maxValue);\n\t\t}\n\t\t\n\t\tfunction angle(point) {\n\t\t\tvar dx = point[0] - properties.radius;\n\t\t\tvar dy = point[1] - properties.radius;\n\t\t\tvar theta = Math.atan(dx/dy) / (Math.PI/180);\n\t\t\tif (point[0]>=properties.radius && point[1] < properties.radius) {\n\t\t\t\ttheta = 90-theta - 90;\n\t\t\t} else if (point[0]>=properties.radius && point[1] >= properties.radius) {\n\t\t\t\ttheta = 90-theta + 90;\n\t\t\t} else if (point[0]<properties.radius && point[1] >= properties.radius) {\n\t\t\t\ttheta = 90-theta + 90;\n\t\t\t} else if (point[0]<properties.radius && point[1] < properties.radius) {\n\t\t\t\ttheta = 90-theta+270;\n\t\t\t}\n\t\t\treturn theta;\n\t\t};\n\t\t\n\t\tfunction getSizeRatio() {\n\t\t\treturn options.diameter / targetElement.clientWidth;\n\t\t}\n\t\t\n\t};\n})();\n\n/* ==== */\nvar initializing = true;\n\n(function(scope) {\n    var nest = new thermostatDial(document.getElementById(thermostatId),{\n    \tonSetTargetTemperature: function(v) {\n    \t    var p = {\n    \t        \"ambient_temperature\":nest.ambient_temperature,\n    \t        \"target_temperature\":v,\n    \t        \"hvac_state\":nest.hvac_state,\n    \t        \"has_leaf\": nest.has_leaf,\n    \t        \"away\":nest.away\n    \t    };\n    \t\tscope.send({topic: thermostatId, payload: p});\n    \t}\n    });\n    \n    scope.$watch('msg', function(data) {\n        if (initializing) {\n            initializing = false;\n            } else {\n            nest.ambient_temperature = data.payload.ambient_temperature || 0;\n            nest.target_temperature = data.payload.target_temperature || 0;\n            nest.hvac_state = data.payload.hvac_state || \"off\";\n            nest.has_leaf = data.payload.has_leaf || false;\n            nest.away = data.payload.away || false;\n        }\n        \n    });\n})(scope);\n\n</script>\n\n<style>\n\n@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);\n\n#thermostat {\n margin: 0 auto;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.dial {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n.dial.away .dial__ico__leaf {\n    visibility: hidden;\n}\n.dial.away .dial__lbl--target {\n    visibility: hidden;\n}\n.dial.away .dial__lbl--target--half {\n    visibility: hidden;\n}\n.dial.away .dial__lbl--away {\n    opacity: 1;\n}\n.dial--edit .dial__lbl--ambientlabel {\n  visibility: hidden;\n}\n.dial--edit .dial__lbl--targetlabel {\n  visibility: visible;\n}\n.dial .dial__shape {\n    -webkit-transition: fill 0.5s;\n    transition: fill 0.5s;\n}\n.dial path.dial__ico__leaf {\n    fill: #13EB13;\n    opacity: 0;\n    -webkit-transition: opacity 0.5s;\n    transition: opacity 0.5s;\n    pointer-events: none;\n}\n.dial.has-leaf .dial__ico__leaf {\n    display: block;\n    opacity: 1;\n    pointer-events: initial;\n}\n.dial__editableIndicator {\n    fill-rule: evenodd;\n    opacity: 0;\n    -webkit-transition: opacity 0.5s;\n    transition: opacity 0.5s;\n}\n.dial--edit path.dial__editableIndicator {\n    fill: white;\n}\n.dial--edit .dial__editableIndicator {\n    opacity: 1;\n}\n.dial--state--off .dial__shape {\n    fill: #3d3c3c;\n}\n.dial--state--heating .dial__shape {\n    fill: #E36304;\n}\n.dial--state--cooling .dial__shape {\n    fill: #007AF1;\n}\n.dial .dial__ticks path {\n    fill: rgba(255, 255, 255, 0.3);\n}\n.dial .dial__ticks path.active {\n    fill: rgba(255, 255, 255, 0.8);\n}\n.dial text {\n    fill: white;\n    text-anchor: middle;\n    font-family: Helvetica, sans-serif;\n    alignment-baseline: central;\n}\n.dial__lbl--target {\n    font-size: 120px;\n    font-weight: bold;\n}\n.dial__lbl--targetlabel {\n  font-size: 16px;\n  font-weight: normal;\n  visibility: hidden;\n}\n.dial__lbl--target--half {\n    font-size: 40px;\n    font-weight: bold;\n    opacity: 0;\n    -webkit-transition: opacity 0.1s;\n    transition: opacity 0.1s;\n}\n.dial__lbl--target--half.shown {\n    opacity: 1;\n    -webkit-transition: opacity 0s;\n    transition: opacity 0s;\n}\n.dial__lbl--ambient {\n    font-size: 22px;\n    font-weight: bold;\n}\n.dial__lbl--ambientlabel {\n  font-size: 16px;\n  font-weight: normal;\n}\n.dial__lbl--away {\n    font-size: 72px;\n    font-weight: bold;\n    opacity: 0;\n    pointer-events: none;\n}\n#controls {\n    font-family: Open Sans;\n    background-color: rgba(255, 255, 255, 0.25);\n    padding: 20px;\n    border-radius: 5px;\n    position: absolute;\n    left: 50%;\n    -webkit-transform: translatex(-50%);\n    transform: translatex(-50%);\n    margin-top: 20px;\n}\n#controls label {\n    text-align: left;\n    display: block;\n}\n#controls label span {\n    display: inline-block;\n    width: 200px;\n    text-align: right;\n    font-size: 0.8em;\n    text-transform: uppercase;\n}\n#controls p {\n    margin: 0;\n    margin-bottom: 1em;\n    padding-bottom: 1em;\n    border-bottom: 2px solid #ccc;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":570,"y":120,"wires":[["d3bdf837.6cd078"]]},{"id":"d3bdf837.6cd078","type":"debug","z":"e508d534.7df308","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":790,"y":120,"wires":[]},{"id":"5afc200c.3b65c","type":"inject","z":"e508d534.7df308","name":"Test values 1","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"ambient_temperature\":21.1,\"target_temperature\":23,\"hvac_state\":\"heating\",\"has_leaf\":false,\"away\":false}","payloadType":"json","x":340,"y":120,"wires":[["31c69a42.23fd16"]]},{"id":"b672dbf9.8a7d68","type":"inject","z":"e508d534.7df308","name":"Test values 2","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"ambient_temperature\":22.8,\"target_temperature\":20,\"hvac_state\":\"cooling\",\"has_leaf\":true,\"away\":false}","payloadType":"json","x":340,"y":160,"wires":[["31c69a42.23fd16"]]},{"id":"ea74e301.c528b","type":"inject","z":"e508d534.7df308","name":"Test values 3","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"ambient_temperature\":22.1,\"target_temperature\":21,\"hvac_state\":\"off\",\"has_leaf\":true,\"away\":false}","payloadType":"json","x":340,"y":200,"wires":[["31c69a42.23fd16"]]},{"id":"565ccc15.5f58d4","type":"inject","z":"e508d534.7df308","name":"Test values 4","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"ambient_temperature\":21.1,\"target_temperature\":23,\"hvac_state\":\"off\",\"has_leaf\":false,\"away\":true}","payloadType":"json","x":340,"y":240,"wires":[["31c69a42.23fd16"]]},{"id":"8a50f58a.83fee8","type":"ui_group","name":"thermostat1","tab":"d8a3365d.44e008","order":1,"disp":false,"width":"6","collapse":false},{"id":"d8a3365d.44e008","type":"ui_tab","name":"Nest Thermostat sample","icon":"dashboard","order":3}]

I LOVE your NEST flow... I've done various stats (https://tech.scargill.net) and for my aircon use here in Spain - this does better than my own. I'd added 2 buttons below the image for home/away and heat/cool (though I can't actually change the mode of the stat without an IIR handheld that came with the stat - I'll worry about that in the winter).

I have ONE issue - possibly you could comment? Sometimes when I look at the UI page on the PC or even on the phone, the stat is sitting in a grey state with 10c showing. So, a quick reboot of the phone now, pull up the UI page... - oh, a few seconds later it just corrected itself - ignore me.

Hi Pete, you are doing a great work, thanks for the feedback!. 10C is the default values that is rendered when script is loaded in to UI. Then the node is waiting for injected data and updates the UI accordingly. There is and option inside the template node "reload last value on refresh" that should fix the problem. automatikas/Node-red-Nest-thermostat#5 Maybe I should make "loading" text instead 10C before new socked message is sent to the UI.

Hi

That "reload last value on refresh" seems to have done the trick. I have one more request.... as I don;t quite follow the JS coding... it would be really nice if the SET temperature showed up with the word SET above it in small text, centred. For the life of me I can't figure out ho to do that. If you get a minute or 3 to waste????

Hi

Code above updated with "Set" and unit labels. Can be changed in the properties. Good luck :)

Got it after taking the size off auto and making it 6 by 6. I have 2 unduly large buttons for setting home/away and heat/cool. I meant for SET to be on all the time - and maybe a little lower (not a deal-breaker)... Just so it's clear to the spouse that the big temperature in the middle is not the ACTUAL temperature :-)

Oh dear, somethings up… If I set the aircon set temperature – it works then seconds later that band disappears… definitely not me - all I did was change the size from auto to 6*6 - and sadly I didn't keep your original script but got it from Github... HELP... From: AJ ***@***.***> Sent: 03 August 2021 15:11 To: automatikas ***@***.***> Cc: Peter Scargill ***@***.***>; Comment ***@***.***> Subject: Re: automatikas/README.md @automatikas commented on this gist.

…

_____ Hi Code above updated with "Set" and unit labels. Can be changed in the properties. Good luck :) <https://user-images.githubusercontent.com/15208705/128021044-82c563fb-b686-430b-84d6-0723b310c5ad.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/6e4649bc6d6529078cbb731610242eac#gistcomment-3842131> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAONJA4OM4YQQIDVMUDH7QLT27TGBANCNFSM5BB7OMTQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> . <https://github.com/notifications/beacon/AAONJA5PZ2SFWUS7GZUDJH3T27TGBA5CNFSM5BB7OMT2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAHKQFG.gif>