@andreydk1981/node-red-dashboard-2-ui-projector 0.1.7 → 0.1.9
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/nodes/ui-projector.html
CHANGED
|
@@ -53,34 +53,33 @@
|
|
|
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
|
|
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>
|
|
78
79
|
<pre><code>{
|
|
79
80
|
"id": "example-1",
|
|
80
81
|
"type": "tab",
|
|
81
82
|
"label": "UIProjector example",
|
|
82
|
-
"disabled": false,
|
|
83
|
-
"info": "",
|
|
84
83
|
"nodes": [
|
|
85
84
|
{
|
|
86
85
|
"id": "n1",
|
|
@@ -88,28 +87,24 @@
|
|
|
88
87
|
"z": "example-1",
|
|
89
88
|
"name": "Projector1",
|
|
90
89
|
"group": "your-dashboard-group-id",
|
|
91
|
-
"
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
"
|
|
95
|
-
"
|
|
96
|
-
"
|
|
97
|
-
|
|
98
|
-
]
|
|
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"]]
|
|
99
100
|
},
|
|
100
101
|
{
|
|
101
|
-
"id": "
|
|
102
|
+
"id": "inject-off",
|
|
102
103
|
"type": "inject",
|
|
103
104
|
"z": "example-1",
|
|
104
|
-
"name": "
|
|
105
|
-
"props": [{"p":"payload","v":"
|
|
106
|
-
"repeat": "",
|
|
107
|
-
"crontab": "",
|
|
108
|
-
"once": false,
|
|
109
|
-
"onceDelay": 0.1,
|
|
105
|
+
"name": "Send OFF string",
|
|
106
|
+
"props": [{"p":"payload","v":"%1POWR 0","vt":"str"}],
|
|
110
107
|
"topic": "",
|
|
111
|
-
"x": 80,
|
|
112
|
-
"y": 80,
|
|
113
108
|
"wires": [["n1"]]
|
|
114
109
|
},
|
|
115
110
|
{
|
|
@@ -118,17 +113,11 @@
|
|
|
118
113
|
"z": "example-1",
|
|
119
114
|
"name": "debug",
|
|
120
115
|
"active": true,
|
|
121
|
-
"
|
|
122
|
-
"complete": "payload",
|
|
123
|
-
"x": 360,
|
|
124
|
-
"y": 120,
|
|
125
|
-
"wires": []
|
|
116
|
+
"complete": "payload"
|
|
126
117
|
}
|
|
127
118
|
]
|
|
128
119
|
}</code></pre>
|
|
129
120
|
|
|
130
|
-
<h3
|
|
131
|
-
<p
|
|
132
|
-
<p>При обновлении страницы цвет и разрешение восстанавливаются из последнего сохраненного сообщения.</p>
|
|
133
|
-
<p>Размер иконки и текста автоматически адаптируются под размер виджета (1x1, 2x2 и т.д.)</p>
|
|
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>
|
|
134
123
|
</script>
|
package/nodes/ui-projector.js
CHANGED
|
@@ -18,6 +18,7 @@ module.exports = function (RED) {
|
|
|
18
18
|
msg.topic = currentName
|
|
19
19
|
send(msg)
|
|
20
20
|
},
|
|
21
|
+
|
|
21
22
|
beforeSend: function (msg) {
|
|
22
23
|
// ensure topic exists: prefer existing, then saved name, then configured name, then default
|
|
23
24
|
const currentName = node.context().get('name') || config.name || 'projector'
|
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.9",
|
|
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"})});
|