-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexternalWindow.html
164 lines (128 loc) · 4.01 KB
/
externalWindow.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE HTML>
<html>
<head>
<title>com.elgato.template.externalWindow</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="propertyinspector/css/sdpi.css">
<style>
body {
background-color: transparent;
}
.sdpi-item {
max-width: none !important;
}
.sdpi-heading {
margin: 16px 0;
}
ul {
max-height: none;
}
li * {
min-height: 18px;
padding: 4px;
display: flex;
align-items: center;
}
.wrap {
margin: 8px;
}
.title {
font-weight: bold;
padding-bottom: 2px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.1);
text-transform: uppercase;
}
.wrap {
text-align: center;
}
.g {
position: absolute;
z-index: -10;
top:auto;
height: 80px;
left: 0;
bottom: 0;
right: 0;
background-color: red;
background: url(propertyinspector/css/g_d8d8d8.svg) no-repeat center;
background-size: 10%;
}
</style>
</head>
<body onload="loaded()">
<div class="g"></div>
<div class="sdpi-wrapper">
<div class="sdpi-heading">INFORMATION</div>
<div class="wrap">
<p>In your external window you can either place your own designs, or simply use the built-in sdpi.css to style your content.</p>
<p>With a few lines of additional CSS you already get a nice info-window.</p>
</div>
<div class="sdpi-heading">LIST</div>
<ul id="demoList" class="two-items thirtyseventy"></ul>
<div class="sdpi-heading">INPUTS</div>
<div id="inputs"></div>
<div class="sdpi-heading">COMMUNICATION</div>
<div class="wrap">
<button id="clickme" type="button" value="Click here" onclick="sendmessage()">Click here</button>
<p>Clicking the button sends some information to your Property Inspector. Just open the remote-debugger for your Property Inspector and watch the console.</p>
</div>
</div>
<script>
window.addEventListener('message',function(ev) {
console.log('External window received message: ', ev.data, typeof ev.data);
doSomething(ev.data);
},false);
/**
* There are various methods to exchange messages with an external window,
* two of which are illustrated below.
*/
/**
* A BroadcastChannel can be used to distribute a message to another listener
* on the same origin - e.g. the Property Inspector.
* Advantage here is, you don't need to keep a window-reference in the Property Inspector
* to send/receive data to/from the external window
*/
var bc = new BroadcastChannel('streamdeck_broadcast_message');
var j = 0;
function loaded() {
/**
* Here we listen to an incoming message on the BroadcastChannel, which was
* instantiated a bit earlier (see above)
*/
bc.onmessage = function (ev) {
doSomething(ev.data);
};
setTimeout(() => {
// this is just a quick message to Property Inspector (you should see it in the console)
window.opener.gotCallbackFromWindow("Message from window: " + new Date().toLocaleTimeString());
}, 1000);
};
function sendmessage() {
/* this one is sent using the BroadcastChannel-API */
bc.postMessage("button clicked " +j);
/**
* You can also use a 'postMessage' event, where you send a message to
* a *globally* available function in the Property Inspector's window.
* In this case: 'gotCallbackFromWindow'.
* */
window.opener.gotCallbackFromWindow("button clicked (callback) " +j);
j++;
}
function doSomething(jsn) {
const sm = document.querySelector('#inputs');
const ul = document.querySelector('#demoList');
if (ul && typeof jsn === 'object') {
ul.innerHTML = `<li class='title'><div class="key">key</div><div class="value">value</div></li>`;
Object.entries(jsn).map(e => {
ul.innerHTML += `<li><div class="key">${e[0]}</div><div class="value">${e[1]}</div></li>`;
})
}
sm.innerHTML = '';
Object.entries(jsn).map((e, i) => {
sm.innerHTML += `<div class="sdpi-item"><div class="sdpi-item-label">${e[0]}</div><input class="sdpi-item-value" type="text" id="_ID${i}" value="${e[1]}"></div>`;
})
}
</script>
</body>
</html>