@andreydk1981/node-red-dashboard-2-ui-projector 0.1.17 → 0.1.18
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
|
@@ -1,30 +1,29 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
return {
|
|
2
|
+
RED.nodes.registerType('ui-projector', {
|
|
4
3
|
category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
|
|
5
4
|
color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
|
|
6
5
|
defaults: {
|
|
7
|
-
name: { value: "" },
|
|
8
|
-
group: { type: 'ui-group', required: true },
|
|
9
|
-
order: { value: 0 },
|
|
10
|
-
width: {
|
|
11
|
-
value: 0,
|
|
12
|
-
validate: function (v) {
|
|
13
|
-
const width = v || 0
|
|
14
|
-
const currentGroup = $('#node-input-group').val() || this.group
|
|
15
|
-
const groupNode = RED.nodes.node(currentGroup)
|
|
16
|
-
const valid = !groupNode || +width <= +groupNode.width
|
|
17
|
-
$('#node-input-size').toggleClass('input-error', !valid)
|
|
18
|
-
return valid
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
height: { value: 0 }
|
|
22
|
-
},
|
|
6
|
+
name: { value: "" },
|
|
7
|
+
group: { type: 'ui-group', required: true },
|
|
8
|
+
order: { value: 0 },
|
|
9
|
+
width: {
|
|
10
|
+
value: 0,
|
|
11
|
+
validate: function (v) {
|
|
12
|
+
const width = v || 0
|
|
13
|
+
const currentGroup = $('#node-input-group').val() || this.group
|
|
14
|
+
const groupNode = RED.nodes.node(currentGroup)
|
|
15
|
+
const valid = !groupNode || +width <= +groupNode.width
|
|
16
|
+
$('#node-input-size').toggleClass('input-error', !valid)
|
|
17
|
+
return valid
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
height: { value: 0 }
|
|
21
|
+
},
|
|
23
22
|
inputs: 1,
|
|
24
23
|
outputs: 1,
|
|
25
24
|
icon: "font-awesome/fa-video-camera",
|
|
26
25
|
label: function() {
|
|
27
|
-
return this.name ||
|
|
26
|
+
return this.name || "ui-projector";
|
|
28
27
|
},
|
|
29
28
|
oneditprepare: function () {
|
|
30
29
|
$('#node-input-size').elementSizer({
|
|
@@ -33,28 +32,7 @@
|
|
|
33
32
|
group: '#node-input-group'
|
|
34
33
|
});
|
|
35
34
|
}
|
|
36
|
-
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
RED.nodes.registerType('ui-multimedia-projector', createProjectorDefinition('ui-multimedia-projector'))
|
|
40
|
-
RED.nodes.registerType('ui-projector', createProjectorDefinition('ui-projector'))
|
|
41
|
-
</script>
|
|
42
|
-
|
|
43
|
-
<script type="text/html" data-template-name="ui-multimedia-projector">
|
|
44
|
-
<div class="form-row">
|
|
45
|
-
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
46
|
-
<input type="text" id="node-input-name" placeholder="Name">
|
|
47
|
-
</div>
|
|
48
|
-
<div class="form-row">
|
|
49
|
-
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
50
|
-
<input type="text" id="node-input-group">
|
|
51
|
-
</div>
|
|
52
|
-
<div class="form-row">
|
|
53
|
-
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-multimedia-projector.label.size"></label>
|
|
54
|
-
<input type="hidden" id="node-input-width">
|
|
55
|
-
<input type="hidden" id="node-input-height">
|
|
56
|
-
<button class="editor-button" id="node-input-size"></button>
|
|
57
|
-
</div>
|
|
35
|
+
});
|
|
58
36
|
</script>
|
|
59
37
|
|
|
60
38
|
<script type="text/html" data-template-name="ui-projector">
|
|
@@ -74,79 +52,9 @@
|
|
|
74
52
|
</div>
|
|
75
53
|
</script>
|
|
76
54
|
|
|
77
|
-
<script type="text/html" data-help-name="ui-multimedia-projector">
|
|
78
|
-
<p>Dashboard 2.0 widget with a projector icon.</p>
|
|
79
|
-
|
|
80
|
-
<h3>Properties</h3>
|
|
81
|
-
<dl class="message-properties">
|
|
82
|
-
<dt>Name <span class="property-type">string</span></dt>
|
|
83
|
-
<dd>The widget name displayed above the icon. Can be updated using <code>msg.name</code>.</dd>
|
|
84
|
-
</dl>
|
|
85
|
-
|
|
86
|
-
<h3>Incoming messages</h3>
|
|
87
|
-
<dl class="message-properties">
|
|
88
|
-
<dt>msg.name <span class="property-type">string</span></dt>
|
|
89
|
-
<dd>Set a new name for the widget. The name is persisted and used as <code>msg.topic</code> for outgoing messages.</dd>
|
|
90
|
-
<dt>msg.color <span class="property-type">string</span></dt>
|
|
91
|
-
<dd>Set the icon color (any CSS color). To reset, send <code>msg.color = null</code>.</dd>
|
|
92
|
-
<dt>msg.ires <span class="property-type">string</span></dt>
|
|
93
|
-
<dd>Set resolution text displayed under the icon (e.g. <code>"1920x1080"</code>).</dd>
|
|
94
|
-
</dl>
|
|
95
|
-
|
|
96
|
-
<h3>Behavior</h3>
|
|
97
|
-
<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>
|
|
98
|
-
|
|
99
|
-
<h3>Example flow</h3>
|
|
100
|
-
<p>Import the JSON below into Node‑RED (Menu → Import → Clipboard):</p>
|
|
101
|
-
<pre><code>{
|
|
102
|
-
"id": "example-1",
|
|
103
|
-
"type": "tab",
|
|
104
|
-
"label": "UIProjector example",
|
|
105
|
-
"nodes": [
|
|
106
|
-
{
|
|
107
|
-
"id": "n1",
|
|
108
|
-
"type": "ui-multimedia-projector",
|
|
109
|
-
"z": "example-1",
|
|
110
|
-
"name": "Projector1",
|
|
111
|
-
"group": "your-dashboard-group-id",
|
|
112
|
-
"wires": [["debug1"]]
|
|
113
|
-
},
|
|
114
|
-
{
|
|
115
|
-
"id": "inject-on",
|
|
116
|
-
"type": "inject",
|
|
117
|
-
"z": "example-1",
|
|
118
|
-
"name": "Send ON string",
|
|
119
|
-
"props": [{"p":"payload","v":"%1POWR 1","vt":"str"}],
|
|
120
|
-
"topic": "",
|
|
121
|
-
"wires": [["n1"]]
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
"id": "inject-off",
|
|
125
|
-
"type": "inject",
|
|
126
|
-
"z": "example-1",
|
|
127
|
-
"name": "Send OFF string",
|
|
128
|
-
"props": [{"p":"payload","v":"%1POWR 0","vt":"str"}],
|
|
129
|
-
"topic": "",
|
|
130
|
-
"wires": [["n1"]]
|
|
131
|
-
},
|
|
132
|
-
{
|
|
133
|
-
"id": "debug1",
|
|
134
|
-
"type": "debug",
|
|
135
|
-
"z": "example-1",
|
|
136
|
-
"name": "debug",
|
|
137
|
-
"active": true,
|
|
138
|
-
"complete": "payload"
|
|
139
|
-
}
|
|
140
|
-
]
|
|
141
|
-
}</code></pre>
|
|
142
|
-
|
|
143
|
-
<h3>Details</h3>
|
|
144
|
-
<p>The widget saves the last received color and resolution and restores them on reload. Icon and text scale with widget size.</p>
|
|
145
|
-
</script>
|
|
146
|
-
|
|
147
55
|
<script type="text/html" data-help-name="ui-projector">
|
|
148
56
|
<p>Dashboard 2.0 widget with a projector icon.</p>
|
|
149
|
-
|
|
57
|
+
|
|
150
58
|
<h3>Properties</h3>
|
|
151
59
|
<dl class="message-properties">
|
|
152
60
|
<dt>Name <span class="property-type">string</span></dt>
|
|
@@ -165,4 +73,52 @@
|
|
|
165
73
|
|
|
166
74
|
<h3>Behavior</h3>
|
|
167
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>
|
|
168
123
|
</script>
|
|
124
|
+
|
package/nodes/ui-projector.js
CHANGED
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.18",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -28,19 +28,14 @@
|
|
|
28
28
|
"node-red": {
|
|
29
29
|
"version": ">=3.1.15 <5.0.0",
|
|
30
30
|
"nodes": {
|
|
31
|
-
"ui-multimedia-projector": "nodes/ui-projector.js",
|
|
32
31
|
"ui-projector": "nodes/ui-projector.js",
|
|
33
32
|
"projector-command": "nodes/projector-command.js"
|
|
34
33
|
}
|
|
35
34
|
},
|
|
36
35
|
"node-red-dashboard-2": {
|
|
37
36
|
"widgets": {
|
|
38
|
-
"ui-multimedia-projector": {
|
|
39
|
-
"output": "ui-multimedia-projector.umd.js",
|
|
40
|
-
"component": "UIProjector"
|
|
41
|
-
},
|
|
42
37
|
"ui-projector": {
|
|
43
|
-
"output": "ui-
|
|
38
|
+
"output": "ui-projector.umd.js",
|
|
44
39
|
"component": "UIProjector"
|
|
45
40
|
}
|
|
46
41
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper{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{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{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:hover{opacity:.7}.projector-resolution{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{display:flex;flex-direction:column;gap:12px;padding:8px 0}.projector-dialog .v-card{background-color:#141212bf;color:var(--v-theme-on-surface);box-shadow:0 6px 18px #0009;border:1px solid rgba(255,255,255,.04);border-radius:8px}.projector-dialog .v-card-title{color:var(--v-theme-on-surface);font-weight:600}.projector-dialog .v-card-text{padding:10px 16px}.projector-dialog .dialog-buttons .v-btn{font-weight:600}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
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 s=t.__vccOpts||t;for(const[c,n]of o)s[c]=n;return s},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,s,c,n,a){const k=e.resolveComponent("v-card-title"),d=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]=(...l)=>a.openDialog&&a.openDialog(...l))},[...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]=l=>n.dialog=l),"max-width":"300","content-class":"projector-dialog"},{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(s.props.label||n.name||"Projector"),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]=l=>a.sendCommand("ON"))},{default:e.withCtx(()=>[e.createVNode(d,{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]=l=>a.sendCommand("OFF"))},{default:e.withCtx(()=>[e.createVNode(d,{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]]);r.UIProjector=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper{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{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{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:hover{opacity:.7}.projector-resolution{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{display:flex;flex-direction:column;gap:12px;padding:8px 0}.projector-dialog .v-card{background-color:#141212bf;color:var(--v-theme-on-surface);box-shadow:0 6px 18px #0009;border:1px solid rgba(255,255,255,.04);border-radius:8px}.projector-dialog .v-card-title{color:var(--v-theme-on-surface);font-weight:600}.projector-dialog .v-card-text{padding:10px 16px}.projector-dialog .dialog-buttons .v-btn{font-weight:600}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
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 s=t.__vccOpts||t;for(const[c,n]of o)s[c]=n;return s},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,s,c,n,a){const k=e.resolveComponent("v-card-title"),d=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]=(...l)=>a.openDialog&&a.openDialog(...l))},[...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]=l=>n.dialog=l),"max-width":"300","content-class":"projector-dialog"},{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(s.props.label||n.name||"Projector"),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]=l=>a.sendCommand("ON"))},{default:e.withCtx(()=>[e.createVNode(d,{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]=l=>a.sendCommand("OFF"))},{default:e.withCtx(()=>[e.createVNode(d,{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]]);r.UIProjector=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper{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{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{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:hover{opacity:.7}.projector-resolution{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{display:flex;flex-direction:column;gap:12px;padding:8px 0}.projector-dialog .v-card{background-color:#141212bf;color:var(--v-theme-on-surface);box-shadow:0 6px 18px #0009;border:1px solid rgba(255,255,255,.04);border-radius:8px}.projector-dialog .v-card-title{color:var(--v-theme-on-surface);font-weight:600}.projector-dialog .v-card-text{padding:10px 16px}.projector-dialog .dialog-buttons .v-btn{font-weight:600}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
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-multimedia-projector"]={},r.vuex,r.Vue))})(this,function(r,i,e){"use strict";const j="",m=(t,o)=>{const s=t.__vccOpts||t;for(const[c,n]of o)s[c]=n;return s},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,s,c,n,a){const k=e.resolveComponent("v-card-title"),d=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]=(...l)=>a.openDialog&&a.openDialog(...l))},[...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]=l=>n.dialog=l),"max-width":"300","content-class":"projector-dialog"},{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(s.props.label||n.name||"Projector"),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]=l=>a.sendCommand("ON"))},{default:e.withCtx(()=>[e.createVNode(d,{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]=l=>a.sendCommand("OFF"))},{default:e.withCtx(()=>[e.createVNode(d,{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]]);r.UIProjector=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-projector-wrapper{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{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{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:hover{opacity:.7}.projector-resolution{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{display:flex;flex-direction:column;gap:12px;padding:8px 0}.projector-dialog .v-card{background-color:#141212bf;color:var(--v-theme-on-surface);box-shadow:0 6px 18px #0009;border:1px solid rgba(255,255,255,.04);border-radius:8px}.projector-dialog .v-card-title{color:var(--v-theme-on-surface);font-weight:600}.projector-dialog .v-card-text{padding:10px 16px}.projector-dialog .dialog-buttons .v-btn{font-weight:600}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
|
|
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-multimedia-projector"]={},r.vuex,r.Vue))})(this,function(r,i,e){"use strict";const j="",m=(t,o)=>{const s=t.__vccOpts||t;for(const[c,n]of o)s[c]=n;return s},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,s,c,n,a){const k=e.resolveComponent("v-card-title"),d=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]=(...l)=>a.openDialog&&a.openDialog(...l))},[...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]=l=>n.dialog=l),"max-width":"300","content-class":"projector-dialog"},{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(s.props.label||n.name||"Projector"),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]=l=>a.sendCommand("ON"))},{default:e.withCtx(()=>[e.createVNode(d,{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]=l=>a.sendCommand("OFF"))},{default:e.withCtx(()=>[e.createVNode(d,{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]]);r.UIProjector=V,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
|