@andreydk1981/node-red-dashboard-2-ui-projector 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/nodes/ui-projector.html +56 -13
- package/package.json +1 -3
- package/resources/ui-projector.umd.js +2 -2
- package/ui/dist/ui-projector.umd.js +2 -2
package/README.md
CHANGED
package/nodes/ui-projector.html
CHANGED
|
@@ -53,28 +53,71 @@
|
|
|
53
53
|
</script>
|
|
54
54
|
|
|
55
55
|
<script type="text/html" data-help-name="ui-projector">
|
|
56
|
-
<p
|
|
56
|
+
<p>Dashboard 2.0 widget with a projector icon.</p>
|
|
57
57
|
|
|
58
|
-
<h3
|
|
58
|
+
<h3>Properties</h3>
|
|
59
59
|
<dl class="message-properties">
|
|
60
60
|
<dt>Name <span class="property-type">string</span></dt>
|
|
61
|
-
<dd
|
|
61
|
+
<dd>The widget name displayed above the icon. Can be updated using <code>msg.name</code>.</dd>
|
|
62
62
|
</dl>
|
|
63
63
|
|
|
64
|
-
<h3
|
|
64
|
+
<h3>Incoming messages</h3>
|
|
65
65
|
<dl class="message-properties">
|
|
66
66
|
<dt>msg.name <span class="property-type">string</span></dt>
|
|
67
|
-
<dd
|
|
67
|
+
<dd>Set a new name for the widget. The name is persisted and used as <code>msg.topic</code> for outgoing messages.</dd>
|
|
68
68
|
<dt>msg.color <span class="property-type">string</span></dt>
|
|
69
|
-
<dd
|
|
70
|
-
Если не указан, используется цвет темы Dashboard. Чтобы сбросить цвет, отправьте <code>msg.color = null</code></dd>
|
|
71
|
-
|
|
69
|
+
<dd>Set the icon color (any CSS color). To reset, send <code>msg.color = null</code>.</dd>
|
|
72
70
|
<dt>msg.ires <span class="property-type">string</span></dt>
|
|
73
|
-
<dd
|
|
71
|
+
<dd>Set resolution text displayed under the icon (e.g. <code>"1920x1080"</code>).</dd>
|
|
74
72
|
</dl>
|
|
75
73
|
|
|
76
|
-
<h3
|
|
77
|
-
<p
|
|
78
|
-
|
|
79
|
-
<
|
|
74
|
+
<h3>Behavior</h3>
|
|
75
|
+
<p>When the <strong>ON</strong> button is pressed the widget sends <code>msg.payload = "%1POWR 1"</code>. When the <strong>OFF</strong> button is pressed it sends <code>msg.payload = "%1POWR 0"</code>. Outgoing <code>msg.topic</code> is the widget Name.</p>
|
|
76
|
+
|
|
77
|
+
<h3>Example flow</h3>
|
|
78
|
+
<p>Import the JSON below into Node‑RED (Menu → Import → Clipboard):</p>
|
|
79
|
+
<pre><code>{
|
|
80
|
+
"id": "example-1",
|
|
81
|
+
"type": "tab",
|
|
82
|
+
"label": "UIProjector example",
|
|
83
|
+
"nodes": [
|
|
84
|
+
{
|
|
85
|
+
"id": "n1",
|
|
86
|
+
"type": "ui-projector",
|
|
87
|
+
"z": "example-1",
|
|
88
|
+
"name": "Projector1",
|
|
89
|
+
"group": "your-dashboard-group-id",
|
|
90
|
+
"wires": [["debug1"]]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"id": "inject-on",
|
|
94
|
+
"type": "inject",
|
|
95
|
+
"z": "example-1",
|
|
96
|
+
"name": "Send ON string",
|
|
97
|
+
"props": [{"p":"payload","v":"%1POWR 1","vt":"str"}],
|
|
98
|
+
"topic": "",
|
|
99
|
+
"wires": [["n1"]]
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"id": "inject-off",
|
|
103
|
+
"type": "inject",
|
|
104
|
+
"z": "example-1",
|
|
105
|
+
"name": "Send OFF string",
|
|
106
|
+
"props": [{"p":"payload","v":"%1POWR 0","vt":"str"}],
|
|
107
|
+
"topic": "",
|
|
108
|
+
"wires": [["n1"]]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"id": "debug1",
|
|
112
|
+
"type": "debug",
|
|
113
|
+
"z": "example-1",
|
|
114
|
+
"name": "debug",
|
|
115
|
+
"active": true,
|
|
116
|
+
"complete": "payload"
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
}</code></pre>
|
|
120
|
+
|
|
121
|
+
<h3>Details</h3>
|
|
122
|
+
<p>The widget saves the last received color and resolution and restores them on reload. Icon and text scale with widget size.</p>
|
|
80
123
|
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@andreydk1981/node-red-dashboard-2-ui-projector",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,9 +8,7 @@
|
|
|
8
8
|
"keywords": [
|
|
9
9
|
"node-red",
|
|
10
10
|
"node-red-node",
|
|
11
|
-
"node-red-dashboard",
|
|
12
11
|
"node-red-dashboard-2",
|
|
13
|
-
"dashboard",
|
|
14
12
|
"dashboard2",
|
|
15
13
|
"projector"
|
|
16
14
|
],
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper[data-v-
|
|
2
|
-
(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["ui-projector"]={},r.vuex,r.Vue))})(this,function(r,i,e){"use strict";const j="",m=(t,o)=>{const l=t.__vccOpts||t;for(const[d,n]of o)l[d]=n;return l},f={name:"UIProjector",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},data(){return{currentColor:null,resolution:null,dialog:!1,name:null}},computed:{...i.mapState("data",["messages"])},created(){this.name=this.props.name||"projector",this.$dataTracker(this.id,this.onInput,this.onLoad)},methods:{send(t){this.$socket.emit("widget-action",this.id,t)},sendCommand(t){this.send({payload:
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper[data-v-c56278df]{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px;gap:0;box-sizing:border-box;overflow:hidden}.projector-name[data-v-c56278df]{font-size:clamp(6px,1.5vw,12px);font-weight:500;color:var(--v-theme-on-surface);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.1;flex-shrink:0}.projector-icon[data-v-c56278df]{width:100%;height:auto;max-width:100%;color:var(--v-theme-on-surface);flex:1;min-height:0;cursor:pointer;transition:opacity .2s}.projector-icon[data-v-c56278df]:hover{opacity:.7}.projector-resolution[data-v-c56278df]{font-size:clamp(5px,1.2vw,10px);color:var(--v-theme-on-surface);opacity:.7;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.1;flex-shrink:0}.dialog-buttons[data-v-c56278df]{display:flex;flex-direction:column;gap:12px;padding:8px 0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["ui-projector"]={},r.vuex,r.Vue))})(this,function(r,i,e){"use strict";const j="",m=(t,o)=>{const l=t.__vccOpts||t;for(const[d,n]of o)l[d]=n;return l},f={name:"UIProjector",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},data(){return{currentColor:null,resolution:null,dialog:!1,name:null}},computed:{...i.mapState("data",["messages"])},created(){this.name=this.props.name||"projector",this.$dataTracker(this.id,this.onInput,this.onLoad)},methods:{send(t){this.$socket.emit("widget-action",this.id,t)},sendCommand(t){const o=t==="ON"?"%1POWR 1":"%1POWR 0";this.send({payload:o,topic:this.name}),this.dialog=!1},openDialog(){this.dialog=!0},onInput(t){t.name&&(this.name=t.name),t.color&&(this.currentColor=t.color,t.ires&&(this.resolution=t.ires)),this.$store.commit("data/bind",{widgetId:this.id,msg:t})},onLoad(t,o){t&&t.name&&(this.name=t.name),t&&t.ires&&(this.resolution=t.ires),t&&t.color&&(this.currentColor=t.color)}}},_={class:"ui-projector-wrapper"},h={key:0,class:"projector-name"},x={key:1,class:"projector-resolution"},C={class:"dialog-buttons"};function u(t,o,l,d,n,a){const k=e.resolveComponent("v-card-title"),c=e.resolveComponent("v-icon"),p=e.resolveComponent("v-btn"),N=e.resolveComponent("v-card-text"),w=e.resolveComponent("v-card"),y=e.resolveComponent("v-dialog");return e.openBlock(),e.createElementBlock("div",_,[n.name?(e.openBlock(),e.createElementBlock("div",h,e.toDisplayString(n.name),1)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"projector-icon",style:e.normalizeStyle({color:n.currentColor}),onClick:o[0]||(o[0]=(...s)=>a.openDialog&&a.openDialog(...s))},[...o[4]||(o[4]=[e.createElementVNode("path",{d:"M16 6c-1.13 0-2.23.35-3.16 1H4c-1.11 0-2 .89-2 2v6c0 1.11.89 2 2 2h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-.85c-.92-.65-2.02-1-3.15-1m0 1.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 16 7.5M4 9h4v1H4zm12 0a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2M4 11h4v1H4zm0 2h4v1H4z",fill:"currentColor"},null,-1)])],4)),n.resolution?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(n.resolution),1)):e.createCommentVNode("",!0),e.createVNode(y,{modelValue:n.dialog,"onUpdate:modelValue":o[3]||(o[3]=s=>n.dialog=s),"max-width":"300"},{default:e.withCtx(()=>[e.createVNode(w,null,{default:e.withCtx(()=>[e.createVNode(k,{class:"text-h6 text-center"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.props.label||l.props.name||"Проектор"),1)]),_:1}),e.createVNode(N,null,{default:e.withCtx(()=>[e.createElementVNode("div",C,[e.createVNode(p,{color:"success",size:"large",block:"",onClick:o[1]||(o[1]=s=>a.sendCommand("ON"))},{default:e.withCtx(()=>[e.createVNode(c,{left:""},{default:e.withCtx(()=>[...o[5]||(o[5]=[e.createTextVNode("mdi-power",-1)])]),_:1}),o[6]||(o[6]=e.createTextVNode(" ON ",-1))]),_:1}),e.createVNode(p,{color:"error",size:"large",block:"",onClick:o[2]||(o[2]=s=>a.sendCommand("OFF"))},{default:e.withCtx(()=>[e.createVNode(c,{left:""},{default:e.withCtx(()=>[...o[7]||(o[7]=[e.createTextVNode("mdi-power-off",-1)])]),_:1}),o[8]||(o[8]=e.createTextVNode(" OFF ",-1))]),_:1})])]),_:1})]),_:1})]),_:1},8,["modelValue"])])}const V=m(f,[["render",u],["__scopeId","data-v-c56278df"]]);r.UIProjector=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper[data-v-
|
|
2
|
-
(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["ui-projector"]={},r.vuex,r.Vue))})(this,function(r,i,e){"use strict";const j="",m=(t,o)=>{const l=t.__vccOpts||t;for(const[d,n]of o)l[d]=n;return l},f={name:"UIProjector",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},data(){return{currentColor:null,resolution:null,dialog:!1,name:null}},computed:{...i.mapState("data",["messages"])},created(){this.name=this.props.name||"projector",this.$dataTracker(this.id,this.onInput,this.onLoad)},methods:{send(t){this.$socket.emit("widget-action",this.id,t)},sendCommand(t){this.send({payload:
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper[data-v-c56278df]{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px;gap:0;box-sizing:border-box;overflow:hidden}.projector-name[data-v-c56278df]{font-size:clamp(6px,1.5vw,12px);font-weight:500;color:var(--v-theme-on-surface);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.1;flex-shrink:0}.projector-icon[data-v-c56278df]{width:100%;height:auto;max-width:100%;color:var(--v-theme-on-surface);flex:1;min-height:0;cursor:pointer;transition:opacity .2s}.projector-icon[data-v-c56278df]:hover{opacity:.7}.projector-resolution[data-v-c56278df]{font-size:clamp(5px,1.2vw,10px);color:var(--v-theme-on-surface);opacity:.7;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.1;flex-shrink:0}.dialog-buttons[data-v-c56278df]{display:flex;flex-direction:column;gap:12px;padding:8px 0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["ui-projector"]={},r.vuex,r.Vue))})(this,function(r,i,e){"use strict";const j="",m=(t,o)=>{const l=t.__vccOpts||t;for(const[d,n]of o)l[d]=n;return l},f={name:"UIProjector",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({enabled:!1,visible:!1})}},data(){return{currentColor:null,resolution:null,dialog:!1,name:null}},computed:{...i.mapState("data",["messages"])},created(){this.name=this.props.name||"projector",this.$dataTracker(this.id,this.onInput,this.onLoad)},methods:{send(t){this.$socket.emit("widget-action",this.id,t)},sendCommand(t){const o=t==="ON"?"%1POWR 1":"%1POWR 0";this.send({payload:o,topic:this.name}),this.dialog=!1},openDialog(){this.dialog=!0},onInput(t){t.name&&(this.name=t.name),t.color&&(this.currentColor=t.color,t.ires&&(this.resolution=t.ires)),this.$store.commit("data/bind",{widgetId:this.id,msg:t})},onLoad(t,o){t&&t.name&&(this.name=t.name),t&&t.ires&&(this.resolution=t.ires),t&&t.color&&(this.currentColor=t.color)}}},_={class:"ui-projector-wrapper"},h={key:0,class:"projector-name"},x={key:1,class:"projector-resolution"},C={class:"dialog-buttons"};function u(t,o,l,d,n,a){const k=e.resolveComponent("v-card-title"),c=e.resolveComponent("v-icon"),p=e.resolveComponent("v-btn"),N=e.resolveComponent("v-card-text"),w=e.resolveComponent("v-card"),y=e.resolveComponent("v-dialog");return e.openBlock(),e.createElementBlock("div",_,[n.name?(e.openBlock(),e.createElementBlock("div",h,e.toDisplayString(n.name),1)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"projector-icon",style:e.normalizeStyle({color:n.currentColor}),onClick:o[0]||(o[0]=(...s)=>a.openDialog&&a.openDialog(...s))},[...o[4]||(o[4]=[e.createElementVNode("path",{d:"M16 6c-1.13 0-2.23.35-3.16 1H4c-1.11 0-2 .89-2 2v6c0 1.11.89 2 2 2h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-.85c-.92-.65-2.02-1-3.15-1m0 1.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5a3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 16 7.5M4 9h4v1H4zm12 0a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2M4 11h4v1H4zm0 2h4v1H4z",fill:"currentColor"},null,-1)])],4)),n.resolution?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(n.resolution),1)):e.createCommentVNode("",!0),e.createVNode(y,{modelValue:n.dialog,"onUpdate:modelValue":o[3]||(o[3]=s=>n.dialog=s),"max-width":"300"},{default:e.withCtx(()=>[e.createVNode(w,null,{default:e.withCtx(()=>[e.createVNode(k,{class:"text-h6 text-center"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.props.label||l.props.name||"Проектор"),1)]),_:1}),e.createVNode(N,null,{default:e.withCtx(()=>[e.createElementVNode("div",C,[e.createVNode(p,{color:"success",size:"large",block:"",onClick:o[1]||(o[1]=s=>a.sendCommand("ON"))},{default:e.withCtx(()=>[e.createVNode(c,{left:""},{default:e.withCtx(()=>[...o[5]||(o[5]=[e.createTextVNode("mdi-power",-1)])]),_:1}),o[6]||(o[6]=e.createTextVNode(" ON ",-1))]),_:1}),e.createVNode(p,{color:"error",size:"large",block:"",onClick:o[2]||(o[2]=s=>a.sendCommand("OFF"))},{default:e.withCtx(()=>[e.createVNode(c,{left:""},{default:e.withCtx(()=>[...o[7]||(o[7]=[e.createTextVNode("mdi-power-off",-1)])]),_:1}),o[8]||(o[8]=e.createTextVNode(" OFF ",-1))]),_:1})])]),_:1})]),_:1})]),_:1},8,["modelValue"])])}const V=m(f,[["render",u],["__scopeId","data-v-c56278df"]]);r.UIProjector=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|