├── .git-blame-ignore-revs ├── .gitignore ├── LICENSE ├── README.md ├── Sources └── gg.datagram.web-requests.sdPlugin │ ├── app.js │ ├── en.json │ ├── index.html │ ├── manifest.json │ ├── propertyinspector │ ├── css │ │ ├── caret.svg │ │ ├── check.svg │ │ ├── elg_calendar.svg │ │ ├── elg_calendar_inv.svg │ │ ├── g_d8d8d8.svg │ │ ├── overrides.css │ │ ├── pi.css │ │ ├── rcheck.svg │ │ └── sdpi.css │ ├── http.html │ ├── js │ │ ├── common.js │ │ ├── common_pi.js │ │ └── index_pi.js │ └── websocket.html │ └── svg │ ├── category.svg │ ├── http_action.svg │ ├── http_key.svg │ ├── plugin.svg │ ├── websocket_action.svg │ └── websocket_key.svg └── render_images.ps1 /.git-blame-ignore-revs: -------------------------------------------------------------------------------- 1 | # Indentation fix 2 | 6ea13da49ca9ae616ec556a43c72adcdb35bc8c9 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.png 2 | *.streamDeckPlugin 3 | DistributionTool.exe 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Adrian Mullings 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # streamdeck-web-requests 2 | An Elgato Stream Deck plugin for sending web requests. 3 | 4 | ## Installation 5 | Grab the .streamDeckPlugin file from the [releases](https://github.com/data-enabler/streamdeck-web-requests/releases/latest) page. 6 | 7 | ## Development 8 | - Run the `render_images.ps1` script with Powershell or Bash to generate images (Requires [Inkscape](https://inkscape.org/)) 9 | - Symlink (or copy) the `Sources/gg.datagram.web-requests.sdPlugin` folder to your [Stream Deck plugin folder](https://developer.elgato.com/documentation/stream-deck/sdk/create-your-own-plugin/#creating-your-plugin). 10 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/app.js: -------------------------------------------------------------------------------- 1 | $SD.on('connected', (jsonObj) => connected(jsonObj)); 2 | 3 | function connected(jsn) { 4 | $SD.on('gg.datagram.web-requests.http.keyDown', (jsonObj) => sendHttp(jsonObj)); 5 | $SD.on('gg.datagram.web-requests.websocket.keyDown', (jsonObj) => sendWebSocket(jsonObj)); 6 | }; 7 | 8 | /** 9 | * @param {{ 10 | * context: string, 11 | * payload: { 12 | * settings: { 13 | * url?: string, 14 | * method?: string, 15 | * contentType?: string|null, 16 | * headers?: string|null, 17 | * body?: string|null, 18 | * } 19 | * }, 20 | * }} data 21 | */ 22 | function sendHttp(data) { 23 | const { url, method, contentType, headers, body } = data.payload.settings; 24 | log('sendHttp', { url, method, contentType, headers, body }); 25 | 26 | let defaultHeaders = contentType ? { 27 | 'Content-Type': contentType 28 | } : {}; 29 | let inputHeaders = {}; 30 | 31 | if (headers) { 32 | const headersArray = headers.split(/\n/); 33 | 34 | for (let i = 0; i < headersArray.length; i += 1) { 35 | if (headersArray[i].includes(':')) { 36 | const [headerItem, headerItemValue] = headersArray[i].split(/:(.*)/); 37 | const trimmedHeaderItem = headerItem.trim(); 38 | const trimmedHeaderItemValue = headerItemValue.trim(); 39 | 40 | if (trimmedHeaderItem) { 41 | inputHeaders[trimmedHeaderItem] = trimmedHeaderItemValue; 42 | } 43 | } 44 | } 45 | } 46 | 47 | const fullHeaders = { 48 | ...defaultHeaders, 49 | ...inputHeaders 50 | } 51 | 52 | log(fullHeaders); 53 | 54 | if (!url || !method) { 55 | showAlert(data.context); 56 | return; 57 | } 58 | fetch( 59 | url, 60 | { 61 | cache: 'no-cache', 62 | headers: fullHeaders, 63 | method, 64 | body: ['GET', 'HEAD'].includes(method) ? undefined : body, 65 | }) 66 | .then(checkResponseStatus) 67 | .then(() => showOk(data.context)) 68 | .catch(err => { 69 | showAlert(data.context); 70 | logErr(err); 71 | }); 72 | } 73 | 74 | /** 75 | * @param {{ 76 | * context: string, 77 | * payload: { 78 | * settings: { 79 | * url?: string, 80 | * body?: string|null, 81 | * } 82 | * }, 83 | * }} data 84 | */ 85 | function sendWebSocket(data) { 86 | const { url, body } = data.payload.settings; 87 | log('sendWebSocket', { url, body }); 88 | if (!url || !body) { 89 | showAlert(data.context); 90 | return; 91 | } 92 | const ws = new WebSocket(url); 93 | ws.onerror = err => { 94 | showAlert(data.context); 95 | logErr(new Error('WebSocket error occurred')); 96 | }; 97 | ws.onclose = function(evt) { onClose(this, evt); }; 98 | ws.onopen = function() { 99 | onOpen(this); 100 | const start = performance.now(); 101 | ws.send(body); 102 | const readyCloseInterval = setInterval(function() { 103 | if (ws.bufferedAmount == 0) { 104 | ws.close(); 105 | showOk(data.context); 106 | clearInterval(readyCloseInterval); 107 | } 108 | else if ((performance.now() - start) > 3000) { 109 | ws.close(); 110 | showAlert(data.context); 111 | logErr(new Error('WebSocket send timeout')); 112 | clearInterval(readyCloseInterval); 113 | } 114 | }, 50); 115 | }; 116 | } 117 | 118 | /** 119 | * @param {void | Response} resp 120 | * @returns {Promise} 121 | */ 122 | async function checkResponseStatus(resp) { 123 | if (!resp) { 124 | throw new Error(); 125 | } 126 | if (!resp.ok) { 127 | throw new Error(`${resp.status}: ${resp.statusText}\n${await resp.text()}`); 128 | } 129 | return resp; 130 | } 131 | 132 | /** 133 | * @param {WebSocket} ws 134 | */ 135 | function onOpen(ws) { 136 | log(`Connection to ${ws.url} opened`); 137 | } 138 | 139 | /** 140 | * @param {WebSocket} ws 141 | * @param {CloseEvent} evt 142 | */ 143 | function onClose(ws, evt) { 144 | log(`Connection to ${ws.url} closed:`, evt.code, evt.reason); 145 | } 146 | 147 | /** 148 | * @param {string} context 149 | */ 150 | function showOk(context) { 151 | $SD.api.showOk(context); 152 | } 153 | 154 | /** 155 | * @param {string} context 156 | */ 157 | function showAlert(context) { 158 | $SD.api.showAlert(context); 159 | } 160 | 161 | /** 162 | * @param {...unknown} msg 163 | */ 164 | function log(...msg) { 165 | console.log(...msg); 166 | $SD.api.logMessage(msg.map(stringify).join(' ')); 167 | } 168 | 169 | /** 170 | * @param {...unknown} msg 171 | */ 172 | function logErr(...msg) { 173 | console.error(...msg); 174 | $SD.api.logMessage(msg.map(stringify).join(' ')); 175 | } 176 | 177 | /** 178 | * @param {unknown} input 179 | * @returns {string} 180 | */ 181 | function stringify(input) { 182 | if (typeof input !== 'object' || input instanceof Error) { 183 | return input.toString(); 184 | } 185 | return JSON.stringify(input, null, 2); 186 | } 187 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "Name": "Web Requests", 3 | "Description": "Send arbitrary web requests via HTTP or WebSocket.", 4 | "Category": "Web Requests", 5 | "gg.datagram.web-requests.http": { 6 | "Name": "HTTP Request", 7 | "Tooltip": "Send an HTTP request." 8 | }, 9 | "gg.datagram.web-requests.websocket": { 10 | "Name": "WebSocket Message", 11 | "Tooltip": "Send a WebSocket message." 12 | }, 13 | "Localization": { 14 | "URL": "URL", 15 | "Method": "Method", 16 | "ContentType": "Content Type", 17 | "Headers": "Headers", 18 | "Message": "Message", 19 | "Body": "Body" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | gg.datagram.web-requests 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "Actions": [ 3 | { 4 | "UUID": "gg.datagram.web-requests.http", 5 | "Name": "HTTP Request", 6 | "Tooltip": "Send an HTTP request.", 7 | "PropertyInspectorPath": "propertyInspector/http.html", 8 | "Icon": "images/http_action", 9 | "States": [ 10 | { 11 | "Image": "images/http_key" 12 | } 13 | ] 14 | }, 15 | { 16 | "UUID": "gg.datagram.web-requests.websocket", 17 | "Name": "WebSocket Message", 18 | "Tooltip": "Send a WebSocket message.", 19 | "PropertyInspectorPath": "propertyInspector/websocket.html", 20 | "Icon": "images/websocket_action", 21 | "States": [ 22 | { 23 | "Image": "images/websocket_key" 24 | } 25 | ] 26 | } 27 | ], 28 | "SDKVersion": 2, 29 | "Author": "Adrian Mullings", 30 | "CodePath": "index.html", 31 | "Name": "Web Requests", 32 | "Description": "Send arbitrary web requests via HTTP or WebSocket.", 33 | "Icon": "images/plugin", 34 | "Category": "Web Requests", 35 | "CategoryIcon": "images/category", 36 | "URL": "https://github.com/data-enabler/streamdeck-web-requests", 37 | "Version": "0.1.0", 38 | "OS": [ 39 | { 40 | "Platform": "mac", 41 | "MinimumVersion" : "10.11" 42 | }, 43 | { 44 | "Platform": "windows", 45 | "MinimumVersion" : "10" 46 | } 47 | ], 48 | "Software": 49 | { 50 | "MinimumVersion" : "4.2" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/caret.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/elg_calendar.svg: -------------------------------------------------------------------------------- 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 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/elg_calendar_inv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/g_d8d8d8.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/overrides.css: -------------------------------------------------------------------------------- 1 | textarea { 2 | resize: vertical; 3 | min-height: 0; 4 | } 5 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/pi.css: -------------------------------------------------------------------------------- 1 | @import "sdpi.css"; 2 | @import "overrides.css"; 3 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/rcheck.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/css/sdpi.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --sdpi-bgcolor: #2D2D2D; 3 | --sdpi-background: #3D3D3D; 4 | --sdpi-color: #d8d8d8; 5 | --sdpi-bordercolor: #3a3a3a; 6 | --sdpi-buttonbordercolor: #969696; 7 | --sdpi-borderradius: 0px; 8 | --sdpi-width: 224px; 9 | --sdpi-fontweight: 600; 10 | --sdpi-letterspacing: -0.25pt; 11 | } 12 | 13 | html { 14 | --sdpi-bgcolor: #2D2D2D; 15 | --sdpi-background: #3D3D3D; 16 | --sdpi-color: #d8d8d8; 17 | --sdpi-bordercolor: #3a3a3a; 18 | --sdpi-buttonbordercolor: #969696; 19 | --sdpi-borderradius: 0px; 20 | --sdpi-width: 224px; 21 | --sdpi-fontweight: 600; 22 | --sdpi-letterspacing: -0.25pt; 23 | height: 100%; 24 | width: 100%; 25 | overflow: hidden; 26 | touch-action:none; 27 | } 28 | 29 | html, body { 30 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 31 | font-size: 9pt; 32 | background-color: var(--sdpi-bgcolor); 33 | color: #9a9a9a; 34 | } 35 | 36 | body { 37 | height: 100%; 38 | padding: 0; 39 | overflow-x: hidden; 40 | overflow-y: auto; 41 | margin: 0; 42 | -webkit-overflow-scrolling: touch; 43 | -webkit-text-size-adjust: 100%; 44 | -webkit-font-smoothing: antialiased; 45 | } 46 | 47 | mark { 48 | background-color: var(--sdpi-bgcolor); 49 | color: var(--sdpi-color); 50 | } 51 | 52 | hr, hr2 { 53 | -webkit-margin-before: 1em; 54 | -webkit-margin-after: 1em; 55 | border-style: none; 56 | background: var(--sdpi-background); 57 | height: 1px; 58 | } 59 | 60 | hr2, 61 | .sdpi-heading { 62 | display: flex; 63 | flex-basis: 100%; 64 | align-items: center; 65 | color: inherit; 66 | font-size: 9pt; 67 | margin: 8px 0px; 68 | } 69 | 70 | .sdpi-heading::before, 71 | .sdpi-heading::after { 72 | content: ""; 73 | flex-grow: 1; 74 | background: var(--sdpi-background); 75 | height: 1px; 76 | font-size: 0px; 77 | line-height: 0px; 78 | margin: 0px 16px; 79 | } 80 | 81 | hr2 { 82 | height: 2px; 83 | } 84 | 85 | hr, hr2 { 86 | margin-left:16px; 87 | margin-right:16px; 88 | } 89 | 90 | .sdpi-item-value, 91 | option, 92 | input, 93 | select, 94 | button { 95 | font-size: 10pt; 96 | font-weight: var(--sdpi-fontweight); 97 | letter-spacing: var(--sdpi-letterspacing); 98 | } 99 | 100 | 101 | 102 | .win .sdpi-item-value, 103 | .win option, 104 | .win input, 105 | .win select, 106 | .win button { 107 | font-size: 11px; 108 | font-style: normal; 109 | letter-spacing: inherit; 110 | font-weight: 100; 111 | } 112 | 113 | .win button { 114 | font-size: 12px; 115 | } 116 | 117 | ::-webkit-progress-value, 118 | meter::-webkit-meter-optimum-value { 119 | border-radius: 2px; 120 | /* background: linear-gradient(#ccf, #99f 20%, #77f 45%, #77f 55%, #cdf); */ 121 | } 122 | 123 | ::-webkit-progress-bar, 124 | meter::-webkit-meter-bar { 125 | border-radius: 3px; 126 | background: var(--sdpi-background); 127 | } 128 | 129 | ::-webkit-progress-bar:active, 130 | meter::-webkit-meter-bar:active { 131 | border-radius: 3px; 132 | background: #222222; 133 | } 134 | ::-webkit-progress-value:active, 135 | meter::-webkit-meter-optimum-value:active { 136 | background: #99f; 137 | } 138 | 139 | progress, 140 | progress.sdpi-item-value { 141 | min-height: 5px !important; 142 | height: 5px; 143 | background-color: #303030; 144 | } 145 | 146 | progress { 147 | margin-top: 8px !important; 148 | margin-bottom: 8px !important; 149 | } 150 | 151 | .full progress, 152 | progress.full { 153 | margin-top: 3px !important; 154 | } 155 | 156 | ::-webkit-progress-inner-element { 157 | background-color: transparent; 158 | } 159 | 160 | 161 | .sdpi-item[type="progress"] { 162 | margin-top: 4px !important; 163 | margin-bottom: 12px; 164 | min-height: 15px; 165 | } 166 | 167 | .sdpi-item-child.full:last-child { 168 | margin-bottom: 4px; 169 | } 170 | 171 | .tabs { 172 | /** 173 | * Setting display to flex makes this container lay 174 | * out its children using flexbox, the exact same 175 | * as in the above "Stepper input" example. 176 | */ 177 | display: flex; 178 | 179 | border-bottom: 1px solid #D7DBDD; 180 | } 181 | 182 | .tab { 183 | cursor: pointer; 184 | padding: 5px 30px; 185 | color: #16a2d7; 186 | font-size: 9pt; 187 | border-bottom: 2px solid transparent; 188 | } 189 | 190 | .tab.is-tab-selected { 191 | border-bottom-color: #4ebbe4; 192 | } 193 | 194 | select { 195 | -webkit-appearance: none; 196 | -moz-appearance: none; 197 | -o-appearance: none; 198 | appearance: none; 199 | background: url(caret.svg) no-repeat 97% center; 200 | } 201 | 202 | label.sdpi-file-label, 203 | input[type="button"], 204 | input[type="submit"], 205 | input[type="reset"], 206 | input[type="file"], 207 | input[type=file]::-webkit-file-upload-button, 208 | button, 209 | select { 210 | color: var(--sdpi-color); 211 | border: 1pt solid #303030; 212 | font-size: 8pt; 213 | background-color: var(--sdpi-background); 214 | border-radius: var(--sdpi-borderradius); 215 | } 216 | 217 | label.sdpi-file-label, 218 | input[type="button"], 219 | input[type="submit"], 220 | input[type="reset"], 221 | input[type="file"], 222 | input[type=file]::-webkit-file-upload-button, 223 | button { 224 | border: 1pt solid var(--sdpi-buttonbordercolor); 225 | border-radius: var(--sdpi-borderradius); 226 | border-color: var(--sdpi-buttonbordercolor); 227 | min-height: 23px !important; 228 | height: 23px !important; 229 | margin-right: 8px; 230 | } 231 | 232 | input[type=number]::-webkit-inner-spin-button, 233 | input[type=number]::-webkit-outer-spin-button { 234 | -webkit-appearance: none; 235 | margin: 0; 236 | } 237 | 238 | input[type="file"] { 239 | border-radius: var(--sdpi-borderradius); 240 | max-width: 220px; 241 | } 242 | 243 | option { 244 | height: 1.5em; 245 | padding: 4px; 246 | } 247 | 248 | /* SDPI */ 249 | 250 | .sdpi-wrapper { 251 | overflow-x: hidden; 252 | height: 100%; 253 | } 254 | 255 | .sdpi-item { 256 | display: flex; 257 | flex-direction: row; 258 | min-height: 32px; 259 | align-items: center; 260 | margin-top: 2px; 261 | max-width: 344px; 262 | -webkit-user-drag: none; 263 | } 264 | 265 | .sdpi-item:first-child { 266 | margin-top:-1px; 267 | } 268 | 269 | .sdpi-item:last-child { 270 | margin-bottom: 0px; 271 | } 272 | 273 | .sdpi-item > *:not(.sdpi-item-label):not(meter):not(details):not(canvas) { 274 | min-height: 26px; 275 | padding: 0px 4px 0px 4px; 276 | } 277 | 278 | .sdpi-item > *:not(.sdpi-item-label.empty):not(meter) { 279 | min-height: 26px; 280 | padding: 0px 4px 0px 4px; 281 | } 282 | 283 | 284 | .sdpi-item-group { 285 | padding: 0 !important; 286 | } 287 | 288 | meter.sdpi-item-value { 289 | margin-left: 6px; 290 | } 291 | 292 | .sdpi-item[type="group"] { 293 | display: block; 294 | margin-top: 12px; 295 | margin-bottom: 12px; 296 | /* border: 1px solid white; */ 297 | flex-direction: unset; 298 | text-align: left; 299 | } 300 | 301 | .sdpi-item[type="group"] > .sdpi-item-label, 302 | .sdpi-item[type="group"].sdpi-item-label { 303 | width: 96%; 304 | text-align: left; 305 | font-weight: 700; 306 | margin-bottom: 4px; 307 | padding-left: 4px; 308 | } 309 | 310 | dl, 311 | ul, 312 | ol { 313 | -webkit-margin-before: 0px; 314 | -webkit-margin-after: 4px; 315 | -webkit-padding-start: 1em; 316 | max-height: 90px; 317 | overflow-y: scroll; 318 | cursor: pointer; 319 | user-select: none; 320 | } 321 | 322 | table.sdpi-item-value, 323 | dl.sdpi-item-value, 324 | ul.sdpi-item-value, 325 | ol.sdpi-item-value { 326 | -webkit-margin-before: 4px; 327 | -webkit-margin-after: 8px; 328 | -webkit-padding-start: 1em; 329 | width: var(--sdpi-width); 330 | text-align: center; 331 | } 332 | 333 | table > caption { 334 | margin: 2px; 335 | } 336 | 337 | .list, 338 | .sdpi-item[type="list"] { 339 | align-items: baseline; 340 | } 341 | 342 | .sdpi-item-label { 343 | text-align: right; 344 | flex: none; 345 | width: 94px; 346 | padding-right: 4px; 347 | font-weight: 600; 348 | -webkit-user-select: none; 349 | } 350 | 351 | .win .sdpi-item-label, 352 | .sdpi-item-label > small{ 353 | font-weight: normal; 354 | } 355 | 356 | .sdpi-item-label:after { 357 | content: ": "; 358 | } 359 | 360 | .sdpi-item-label.empty:after { 361 | content: ""; 362 | } 363 | 364 | .sdpi-test, 365 | .sdpi-item-value { 366 | flex: 1 0 0; 367 | /* flex-grow: 1; 368 | flex-shrink: 0; */ 369 | margin-right: 14px; 370 | margin-left: 4px; 371 | justify-content: space-evenly; 372 | } 373 | 374 | canvas.sdpi-item-value { 375 | max-width: 144px; 376 | max-height: 144px; 377 | width: 144px; 378 | height: 144px; 379 | margin: 0 auto; 380 | cursor: pointer; 381 | } 382 | 383 | input.sdpi-item-value { 384 | margin-left: 5px; 385 | } 386 | 387 | .sdpi-item-value button, 388 | button.sdpi-item-value { 389 | margin-left: 6px; 390 | margin-right: 14px; 391 | } 392 | 393 | .sdpi-item-value.range { 394 | margin-left: 0px; 395 | } 396 | 397 | table, 398 | dl.sdpi-item-value, 399 | ul.sdpi-item-value, 400 | ol.sdpi-item-value, 401 | .sdpi-item-value > dl, 402 | .sdpi-item-value > ul, 403 | .sdpi-item-value > ol 404 | { 405 | list-style-type: none; 406 | list-style-position: outside; 407 | margin-left: -4px; 408 | margin-right: -4px; 409 | padding: 4px; 410 | border: 1px solid var(--sdpi-bordercolor); 411 | } 412 | 413 | dl.sdpi-item-value, 414 | ul.sdpi-item-value, 415 | ol.sdpi-item-value, 416 | .sdpi-item-value > ol { 417 | list-style-type: none; 418 | list-style-position: inside; 419 | margin-left: 5px; 420 | margin-right: 12px; 421 | padding: 4px !important; 422 | display: flex; 423 | flex-direction: column; 424 | } 425 | 426 | .two-items li { 427 | display: flex; 428 | } 429 | .two-items li > *:first-child { 430 | flex: 0 0 50%; 431 | text-align: left; 432 | } 433 | .two-items.thirtyseventy li > *:first-child { 434 | flex: 0 0 30%; 435 | } 436 | 437 | ol.sdpi-item-value, 438 | .sdpi-item-value > ol[listtype="none"] { 439 | list-style-type: none; 440 | } 441 | ol.sdpi-item-value[type="decimal"], 442 | .sdpi-item-value > ol[type="decimal"] { 443 | list-style-type: decimal; 444 | } 445 | 446 | ol.sdpi-item-value[type="decimal-leading-zero"], 447 | .sdpi-item-value > ol[type="decimal-leading-zero"] { 448 | list-style-type: decimal-leading-zero; 449 | } 450 | 451 | ol.sdpi-item-value[type="lower-alpha"], 452 | .sdpi-item-value > ol[type="lower-alpha"] { 453 | list-style-type: lower-alpha; 454 | } 455 | 456 | ol.sdpi-item-value[type="upper-alpha"], 457 | .sdpi-item-value > ol[type="upper-alpha"] { 458 | list-style-type: upper-alpha; 459 | } 460 | 461 | ol.sdpi-item-value[type="upper-roman"], 462 | .sdpi-item-value > ol[type="upper-roman"] { 463 | list-style-type: upper-roman; 464 | } 465 | 466 | ol.sdpi-item-value[type="lower-roman"], 467 | .sdpi-item-value > ol[type="lower-roman"] { 468 | list-style-type: upper-roman; 469 | } 470 | 471 | tr:nth-child(even), 472 | .sdpi-item-value > ul > li:nth-child(even), 473 | .sdpi-item-value > ol > li:nth-child(even), 474 | li:nth-child(even) { 475 | background-color: rgba(0,0,0,.2) 476 | } 477 | 478 | td:hover, 479 | .sdpi-item-value > ul > li:hover:nth-child(even), 480 | .sdpi-item-value > ol > li:hover:nth-child(even), 481 | li:hover:nth-child(even), 482 | li:hover { 483 | background-color: rgba(255,255,255,.1); 484 | } 485 | 486 | td.selected, 487 | td.selected:hover, 488 | li.selected:hover, 489 | li.selected { 490 | color: white; 491 | background-color: #77f; 492 | } 493 | 494 | tr { 495 | border: 1px solid var(--sdpi-bordercolor); 496 | } 497 | 498 | td { 499 | border-right: 1px solid var(--sdpi-bordercolor); 500 | -webkit-user-select: none; 501 | } 502 | 503 | tr:last-child, 504 | td:last-child { 505 | border: none; 506 | } 507 | 508 | .sdpi-item-value.select, 509 | .sdpi-item-value > select { 510 | margin-right: 13px; 511 | margin-left: 4px; 512 | } 513 | 514 | .sdpi-item-child, 515 | .sdpi-item-group > .sdpi-item > input[type="color"] { 516 | margin-top: 0.4em; 517 | margin-right: 4px; 518 | } 519 | 520 | .full, 521 | .full *, 522 | .sdpi-item-value.full, 523 | .sdpi-item-child > full > *, 524 | .sdpi-item-child.full, 525 | .sdpi-item-child.full > *, 526 | .full > .sdpi-item-child, 527 | .full > .sdpi-item-child > *{ 528 | display: flex; 529 | flex: 1 1 0; 530 | margin-bottom: 4px; 531 | margin-left: 0px; 532 | width: 100%; 533 | 534 | justify-content: space-evenly; 535 | } 536 | 537 | .sdpi-item-group > .sdpi-item > input[type="color"] { 538 | margin-top: 0px; 539 | } 540 | 541 | ::-webkit-calendar-picker-indicator:focus, 542 | input[type=file]::-webkit-file-upload-button:focus, 543 | button:focus, 544 | textarea:focus, 545 | input:focus, 546 | select:focus, 547 | option:focus, 548 | details:focus, 549 | summary:focus, 550 | .custom-select select { 551 | outline: none; 552 | } 553 | 554 | summary { 555 | cursor: default; 556 | -webkit-user-select: none; 557 | } 558 | 559 | .pointer, 560 | summary .pointer { 561 | cursor: pointer; 562 | } 563 | 564 | details * { 565 | font-size: 12px; 566 | font-weight: normal; 567 | } 568 | 569 | details.message { 570 | padding: 4px 18px 4px 12px; 571 | } 572 | 573 | details.message summary { 574 | font-size: 10pt; 575 | font-weight: 600; 576 | min-height: 18px; 577 | } 578 | 579 | details.message:first-child { 580 | margin-top: 4px; 581 | margin-left: 0; 582 | padding-left: 102px; 583 | } 584 | 585 | details.message h1 { 586 | text-align: left; 587 | } 588 | 589 | .message > summary::-webkit-details-marker { 590 | display: none; 591 | } 592 | 593 | .info20, 594 | .question, 595 | .caution, 596 | .info { 597 | background-repeat: no-repeat; 598 | background-position: 72px center; 599 | } 600 | 601 | .info20 { 602 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 Z M10,8 C8.8954305,8 8,8.84275812 8,9.88235294 L8,16.1176471 C8,17.1572419 8.8954305,18 10,18 C11.1045695,18 12,17.1572419 12,16.1176471 L12,9.88235294 C12,8.84275812 11.1045695,8 10,8 Z M10,3 C8.8954305,3 8,3.88165465 8,4.96923077 L8,5.03076923 C8,6.11834535 8.8954305,7 10,7 C11.1045695,7 12,6.11834535 12,5.03076923 L12,4.96923077 C12,3.88165465 11.1045695,3 10,3 Z'/%3E%3C/svg%3E%0A"); 603 | } 604 | 605 | .info { 606 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M10,8 C9.44771525,8 9,8.42137906 9,8.94117647 L9,14.0588235 C9,14.5786209 9.44771525,15 10,15 C10.5522847,15 11,14.5786209 11,14.0588235 L11,8.94117647 C11,8.42137906 10.5522847,8 10,8 Z M10,5 C9.44771525,5 9,5.44082732 9,5.98461538 L9,6.01538462 C9,6.55917268 9.44771525,7 10,7 C10.5522847,7 11,6.55917268 11,6.01538462 L11,5.98461538 C11,5.44082732 10.5522847,5 10,5 Z'/%3E%3C/svg%3E%0A"); 607 | } 608 | 609 | .info2 { 610 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath fill='%23999' d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M7.5,2 C6.67157287,2 6,2.66124098 6,3.47692307 L6,3.52307693 C6,4.33875902 6.67157287,5 7.5,5 C8.32842705,5 9,4.33875902 9,3.52307693 L9,3.47692307 C9,2.66124098 8.32842705,2 7.5,2 Z M5,6 L5,7.02155172 L6,7 L6,12 L5,12.0076778 L5,13 L10,13 L10,12 L9,12.0076778 L9,6 L5,6 Z'/%3E%3C/svg%3E%0A"); 611 | } 612 | 613 | .sdpi-more-info { 614 | background-image: linear-gradient(to right, #00000000 0%,#00000040 80%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23999' points='4 7 8 7 8 5 12 8 8 11 8 9 4 9'/%3E%3C/svg%3E%0A"); 615 | } 616 | .caution { 617 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' fill-rule='evenodd' d='M9.03952676,0.746646542 C9.57068894,-0.245797319 10.4285735,-0.25196227 10.9630352,0.746646542 L19.7705903,17.2030214 C20.3017525,18.1954653 19.8777595,19 18.8371387,19 L1.16542323,19 C0.118729947,19 -0.302490098,18.2016302 0.231971607,17.2030214 L9.03952676,0.746646542 Z M10,2.25584053 L1.9601405,17.3478261 L18.04099,17.3478261 L10,2.25584053 Z M10,5.9375 C10.531043,5.9375 10.9615385,6.37373537 10.9615385,6.91185897 L10.9615385,11.6923077 C10.9615385,12.2304313 10.531043,12.6666667 10,12.6666667 C9.46895697,12.6666667 9.03846154,12.2304313 9.03846154,11.6923077 L9.03846154,6.91185897 C9.03846154,6.37373537 9.46895697,5.9375 10,5.9375 Z M10,13.4583333 C10.6372516,13.4583333 11.1538462,13.9818158 11.1538462,14.6275641 L11.1538462,14.6641026 C11.1538462,15.3098509 10.6372516,15.8333333 10,15.8333333 C9.36274837,15.8333333 8.84615385,15.3098509 8.84615385,14.6641026 L8.84615385,14.6275641 C8.84615385,13.9818158 9.36274837,13.4583333 10,13.4583333 Z'/%3E%3C/svg%3E%0A"); 618 | } 619 | 620 | .question { 621 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999' d='M10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 Z M6.77783203,7.65332031 C6.77783203,7.84798274 6.85929281,8.02888914 7.0222168,8.19604492 C7.18514079,8.36320071 7.38508996,8.44677734 7.62207031,8.44677734 C8.02409055,8.44677734 8.29703704,8.20768468 8.44091797,7.72949219 C8.59326248,7.27245865 8.77945854,6.92651485 8.99951172,6.69165039 C9.2195649,6.45678594 9.56233491,6.33935547 10.027832,6.33935547 C10.4256205,6.33935547 10.7006836,6.37695313 11.0021973,6.68847656 C11.652832,7.53271484 10.942627,8.472229 10.3750916,9.1321106 C9.80755615,9.79199219 8.29492188,11.9897461 10.027832,12.1347656 C10.4498423,12.1700818 10.7027991,11.9147157 10.7832031,11.4746094 C11.0021973,9.59857178 13.1254883,8.82415771 13.1254883,7.53271484 C13.1254883,7.07568131 12.9974785,6.65250846 12.7414551,6.26318359 C12.4854317,5.87385873 12.1225609,5.56600048 11.652832,5.33959961 C11.1831031,5.11319874 10.6414419,5 10.027832,5 C9.36767248,5 8.79004154,5.13541531 8.29492187,5.40625 C7.79980221,5.67708469 7.42317837,6.01879677 7.16503906,6.43139648 C6.90689975,6.8439962 6.77783203,7.25130007 6.77783203,7.65332031 Z M10.0099668,15 C10.2713191,15 10.5016601,14.9108147 10.7009967,14.7324415 C10.9003332,14.5540682 11,14.3088087 11,13.9966555 C11,13.7157177 10.9047629,13.4793767 10.7142857,13.2876254 C10.5238086,13.0958742 10.2890379,13 10.0099668,13 C9.72646591,13 9.48726565,13.0958742 9.2923588,13.2876254 C9.09745196,13.4793767 9,13.7157177 9,13.9966555 C9,14.313268 9.10077419,14.5596424 9.30232558,14.735786 C9.50387698,14.9119295 9.73975502,15 10.0099668,15 Z'/%3E%3C/svg%3E%0A"); 622 | } 623 | 624 | 625 | .sdpi-more-info { 626 | position: fixed; 627 | left: 0px; 628 | right: 0px; 629 | bottom: 0px; 630 | min-height:16px; 631 | padding-right: 16px; 632 | text-align: right; 633 | -webkit-touch-callout: none; 634 | cursor: pointer; 635 | user-select: none; 636 | background-position: right center; 637 | background-repeat: no-repeat; 638 | border-radius: var(--sdpi-borderradius); 639 | text-decoration: none; 640 | color: var(--sdpi-color); 641 | } 642 | 643 | .sdpi-more-info-button { 644 | display: flex; 645 | align-self: right; 646 | margin-left: auto; 647 | position: fixed; 648 | right: 17px; 649 | bottom: 0px; 650 | user-select: none; 651 | } 652 | 653 | 654 | .sdpi-bottom-bar { 655 | display: flex; 656 | align-self: right; 657 | margin-left: auto; 658 | position: fixed; 659 | right: 17px; 660 | bottom: 0px; 661 | user-select: none; 662 | } 663 | 664 | .sdpi-bottom-bar.right { 665 | right: 0px; 666 | } 667 | 668 | .sdpi-bottom-bar button { 669 | min-height: 20px !important; 670 | height: 20px !important; 671 | } 672 | 673 | details a { 674 | background-position: right !important; 675 | min-height: 24px; 676 | display: inline-block; 677 | line-height: 24px; 678 | padding-right: 28px; 679 | } 680 | 681 | 682 | input:not([type="range"]), 683 | textarea { 684 | -webkit-appearance: none; 685 | background: var(--sdpi-background); 686 | color: var(--sdpi-color); 687 | font-weight: normal; 688 | font-size: 9pt; 689 | border: none; 690 | margin-top: 2px; 691 | margin-bottom: 2px; 692 | min-width: 219px; 693 | } 694 | 695 | textarea + label { 696 | display: flex; 697 | justify-content: flex-end 698 | } 699 | input[type="radio"], 700 | input[type="checkbox"] { 701 | display: none; 702 | } 703 | input[type="radio"] + label, 704 | input[type="checkbox"] + label { 705 | font-size: 9pt; 706 | color: var(--sdpi-color); 707 | font-weight: normal; 708 | margin-right: 8px; 709 | -webkit-user-select: none; 710 | } 711 | 712 | input[type="radio"] + label:after, 713 | input[type="checkbox"] + label:after { 714 | content: " " !important; 715 | } 716 | 717 | .sdpi-item[type="radio"] > .sdpi-item-value, 718 | .sdpi-item[type="checkbox"] > .sdpi-item-value { 719 | padding-top: 2px; 720 | } 721 | 722 | .sdpi-item[type="checkbox"] > .sdpi-item-value > * { 723 | margin-top: 4px; 724 | } 725 | 726 | .sdpi-item[type="checkbox"] .sdpi-item-child, 727 | .sdpi-item[type="radio"] .sdpi-item-child { 728 | display: inline-block; 729 | } 730 | 731 | .sdpi-item[type="range"] .sdpi-item-value, 732 | .sdpi-item[type="meter"] .sdpi-item-child, 733 | .sdpi-item[type="progress"] .sdpi-item-child { 734 | display: flex; 735 | } 736 | 737 | .sdpi-item[type="range"] .sdpi-item-value { 738 | min-height: 26px; 739 | } 740 | 741 | .sdpi-item[type="range"] .sdpi-item-value span, 742 | .sdpi-item[type="meter"] .sdpi-item-child span, 743 | .sdpi-item[type="progress"] .sdpi-item-child span { 744 | margin-top: -2px; 745 | min-width: 8px; 746 | text-align: right; 747 | user-select: none; 748 | cursor: pointer; 749 | -webkit-user-select: none; 750 | user-select: none; 751 | } 752 | 753 | .sdpi-item[type="range"] .sdpi-item-value span { 754 | margin-top: 7px; 755 | text-align: right; 756 | } 757 | 758 | span + input[type="range"] { 759 | display: flex; 760 | max-width: 168px; 761 | 762 | } 763 | 764 | .sdpi-item[type="range"] .sdpi-item-value span:first-child, 765 | .sdpi-item[type="meter"] .sdpi-item-child span:first-child, 766 | .sdpi-item[type="progress"] .sdpi-item-child span:first-child { 767 | margin-right: 4px; 768 | } 769 | 770 | .sdpi-item[type="range"] .sdpi-item-value span:last-child, 771 | .sdpi-item[type="meter"] .sdpi-item-child span:last-child, 772 | .sdpi-item[type="progress"] .sdpi-item-child span:last-child { 773 | margin-left: 4px; 774 | } 775 | 776 | .reverse { 777 | transform: rotate(180deg); 778 | } 779 | 780 | .sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { 781 | margin-left: -10px; 782 | } 783 | 784 | .sdpi-item[type="progress"] .sdpi-item-child meter + span:last-child { 785 | margin-left: -14px; 786 | } 787 | 788 | .sdpi-item[type="radio"] > .sdpi-item-value > * { 789 | margin-top: 2px; 790 | } 791 | 792 | details { 793 | padding: 8px 18px 8px 12px; 794 | min-width: 86px; 795 | } 796 | 797 | details > h4 { 798 | border-bottom: 1px solid var(--sdpi-bordercolor); 799 | } 800 | 801 | legend { 802 | display: none; 803 | } 804 | .sdpi-item-value > textarea { 805 | padding: 0px; 806 | width: 219px; 807 | margin-left: 1px; 808 | margin-top: 3px; 809 | padding: 4px; 810 | } 811 | 812 | input[type="radio"] + label span, 813 | input[type="checkbox"] + label span { 814 | display: inline-block; 815 | width: 16px; 816 | height: 16px; 817 | margin: 2px 4px 2px 0; 818 | border-radius: 3px; 819 | vertical-align: middle; 820 | background: var(--sdpi-background); 821 | cursor: pointer; 822 | border: 1px solid rgb(0,0,0,.2); 823 | } 824 | 825 | input[type="radio"] + label span { 826 | border-radius: 100%; 827 | } 828 | 829 | input[type="radio"]:checked + label span, 830 | input[type="checkbox"]:checked + label span { 831 | background-color: #77f; 832 | background-image: url(check.svg); 833 | background-repeat: no-repeat; 834 | background-position: center center; 835 | border: 1px solid rgb(0,0,0,.4); 836 | } 837 | 838 | input[type="radio"]:active:checked + label span, 839 | input[type="radio"]:active + label span, 840 | input[type="checkbox"]:active:checked + label span, 841 | input[type="checkbox"]:active + label span { 842 | background-color: #303030; 843 | } 844 | 845 | input[type="radio"]:checked + label span { 846 | background-image: url(rcheck.svg); 847 | } 848 | 849 | input[type="range"] { 850 | width: var(--sdpi-width); 851 | height: 30px; 852 | overflow: hidden; 853 | cursor: pointer; 854 | background: transparent !important; 855 | } 856 | 857 | .sdpi-item > input[type="range"] { 858 | margin-left: 2px; 859 | max-width: var(--sdpi-width); 860 | width: var(--sdpi-width); 861 | padding: 0px; 862 | margin-top: 2px; 863 | } 864 | 865 | /* 866 | input[type="range"], 867 | input[type="range"]::-webkit-slider-runnable-track, 868 | input[type="range"]::-webkit-slider-thumb { 869 | -webkit-appearance: none; 870 | } 871 | */ 872 | 873 | input[type="range"]::-webkit-slider-runnable-track { 874 | height: 5px; 875 | background: #979797; 876 | border-radius: 3px; 877 | padding:0px !important; 878 | border: 1px solid var(--sdpi-background); 879 | } 880 | 881 | input[type="range"]::-webkit-slider-thumb { 882 | position: relative; 883 | -webkit-appearance: none; 884 | background-color: var(--sdpi-color); 885 | width: 12px; 886 | height: 12px; 887 | border-radius: 20px; 888 | margin-top: -5px; 889 | border: none; 890 | } 891 | input[type="range" i]{ 892 | margin: 0; 893 | } 894 | 895 | input[type="range"]::-webkit-slider-thumb::before { 896 | position: absolute; 897 | content: ""; 898 | height: 5px; /* equal to height of runnable track or 1 less */ 899 | width: 500px; /* make this bigger than the widest range input element */ 900 | left: -502px; /* this should be -2px - width */ 901 | top: 8px; /* don't change this */ 902 | background: #77f; 903 | } 904 | 905 | input[type="color"] { 906 | min-width: 32px; 907 | min-height: 32px; 908 | width: 32px; 909 | height: 32px; 910 | padding: 0; 911 | background-color: var(--sdpi-bgcolor); 912 | flex: none; 913 | } 914 | 915 | ::-webkit-color-swatch { 916 | min-width: 24px; 917 | } 918 | 919 | textarea { 920 | height: 3em; 921 | word-break: break-word; 922 | line-height: 1.5em; 923 | } 924 | 925 | .textarea { 926 | padding: 0px !important; 927 | } 928 | 929 | textarea { 930 | width: 219px; /*98%;*/ 931 | height: 96%; 932 | min-height: 6em; 933 | resize: none; 934 | border-radius: var(--sdpi-borderradius); 935 | } 936 | 937 | /* CAROUSEL */ 938 | 939 | .sdpi-item[type="carousel"]{ 940 | 941 | } 942 | 943 | .sdpi-item.card-carousel-wrapper, 944 | .sdpi-item > .card-carousel-wrapper { 945 | padding: 0; 946 | } 947 | 948 | 949 | .card-carousel-wrapper { 950 | display: flex; 951 | align-items: center; 952 | justify-content: center; 953 | margin: 12px auto; 954 | color: #666a73; 955 | } 956 | 957 | .card-carousel { 958 | display: flex; 959 | justify-content: center; 960 | width: 278px; 961 | } 962 | .card-carousel--overflow-container { 963 | overflow: hidden; 964 | } 965 | .card-carousel--nav__left, 966 | .card-carousel--nav__right { 967 | /* display: inline-block; */ 968 | width: 12px; 969 | height: 12px; 970 | border-top: 2px solid #42b883; 971 | border-right: 2px solid #42b883; 972 | cursor: pointer; 973 | margin: 0 4px; 974 | transition: transform 150ms linear; 975 | } 976 | .card-carousel--nav__left[disabled], 977 | .card-carousel--nav__right[disabled] { 978 | opacity: 0.2; 979 | border-color: black; 980 | } 981 | .card-carousel--nav__left { 982 | transform: rotate(-135deg); 983 | } 984 | .card-carousel--nav__left:active { 985 | transform: rotate(-135deg) scale(0.85); 986 | } 987 | .card-carousel--nav__right { 988 | transform: rotate(45deg); 989 | } 990 | .card-carousel--nav__right:active { 991 | transform: rotate(45deg) scale(0.85); 992 | } 993 | .card-carousel-cards { 994 | display: flex; 995 | transition: transform 150ms ease-out; 996 | transform: translatex(0px); 997 | } 998 | .card-carousel-cards .card-carousel--card { 999 | margin: 0 5px; 1000 | cursor: pointer; 1001 | /* box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08); */ 1002 | background-color: #fff; 1003 | border-radius: 4px; 1004 | z-index: 3; 1005 | } 1006 | .xxcard-carousel-cards .card-carousel--card:first-child { 1007 | margin-left: 0; 1008 | } 1009 | .xxcard-carousel-cards .card-carousel--card:last-child { 1010 | margin-right: 0; 1011 | } 1012 | .card-carousel-cards .card-carousel--card img { 1013 | vertical-align: bottom; 1014 | border-top-left-radius: 4px; 1015 | border-top-right-radius: 4px; 1016 | transition: opacity 150ms linear; 1017 | width: 60px; 1018 | } 1019 | .card-carousel-cards .card-carousel--card img:hover { 1020 | opacity: 0.5; 1021 | } 1022 | .card-carousel-cards .card-carousel--card--footer { 1023 | border-top: 0; 1024 | max-width: 80px; 1025 | overflow: hidden; 1026 | display: flex; 1027 | height: 100%; 1028 | flex-direction: column; 1029 | } 1030 | .card-carousel-cards .card-carousel--card--footer p { 1031 | padding: 3px 0; 1032 | margin: 0; 1033 | margin-bottom: 2px; 1034 | font-size: 15px; 1035 | font-weight: 500; 1036 | color: #2c3e50; 1037 | } 1038 | .card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) { 1039 | font-size: 12px; 1040 | font-weight: 300; 1041 | padding: 6px; 1042 | color: #666a73; 1043 | } 1044 | 1045 | 1046 | h1 { 1047 | font-size: 1.3em; 1048 | font-weight: 500; 1049 | text-align: center; 1050 | margin-bottom: 12px; 1051 | } 1052 | 1053 | ::-webkit-datetime-edit { 1054 | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 1055 | background: url(elg_calendar_inv.svg) no-repeat left center; 1056 | padding-right: 1em; 1057 | padding-left: 25px; 1058 | background-position: 4px 0px; 1059 | } 1060 | ::-webkit-datetime-edit-fields-wrapper { 1061 | 1062 | } 1063 | ::-webkit-datetime-edit-text { padding: 0 0.3em; } 1064 | ::-webkit-datetime-edit-month-field { } 1065 | ::-webkit-datetime-edit-day-field {} 1066 | ::-webkit-datetime-edit-year-field {} 1067 | ::-webkit-inner-spin-button { 1068 | 1069 | /* display: none; */ 1070 | } 1071 | ::-webkit-calendar-picker-indicator { 1072 | background: transparent; 1073 | font-size: 17px; 1074 | } 1075 | 1076 | ::-webkit-calendar-picker-indicator:focus { 1077 | background-color: rgba(0,0,0,0.2); 1078 | } 1079 | 1080 | input[type="date"] { 1081 | -webkit-align-items: center; 1082 | display: -webkit-inline-flex; 1083 | font-family: monospace; 1084 | overflow: hidden; 1085 | padding: 0; 1086 | -webkit-padding-start: 1px; 1087 | } 1088 | 1089 | input::-webkit-datetime-edit { 1090 | -webkit-flex: 1; 1091 | -webkit-user-modify: read-only !important; 1092 | display: inline-block; 1093 | min-width: 0; 1094 | overflow: hidden; 1095 | } 1096 | 1097 | /* 1098 | input::-webkit-datetime-edit-fields-wrapper { 1099 | -webkit-user-modify: read-only !important; 1100 | display: inline-block; 1101 | padding: 1px 0; 1102 | white-space: pre; 1103 | 1104 | } 1105 | */ 1106 | 1107 | /* 1108 | input[type="date"] { 1109 | background-color: red; 1110 | outline: none; 1111 | } 1112 | 1113 | input[type="date"]::-webkit-clear-button { 1114 | font-size: 18px; 1115 | height: 30px; 1116 | position: relative; 1117 | } 1118 | 1119 | input[type="date"]::-webkit-inner-spin-button { 1120 | height: 28px; 1121 | } 1122 | 1123 | input[type="date"]::-webkit-calendar-picker-indicator { 1124 | font-size: 15px; 1125 | } */ 1126 | 1127 | input[type="file"] { 1128 | opacity: 0; 1129 | display: none; 1130 | } 1131 | 1132 | .sdpi-item > input[type="file"] { 1133 | opacity: 1; 1134 | display: flex; 1135 | } 1136 | 1137 | input[type="file"] + span { 1138 | display: flex; 1139 | flex: 0 1 auto; 1140 | background-color: #0000ff50; 1141 | } 1142 | 1143 | label.sdpi-file-label { 1144 | cursor: pointer; 1145 | user-select: none; 1146 | display: inline-block; 1147 | min-height: 21px !important; 1148 | height: 21px !important; 1149 | line-height: 20px; 1150 | padding: 0px 4px; 1151 | margin: auto; 1152 | margin-right: 0px; 1153 | float:right; 1154 | } 1155 | 1156 | .sdpi-file-label > label:active, 1157 | .sdpi-file-label.file:active, 1158 | label.sdpi-file-label:active, 1159 | label.sdpi-file-info:active, 1160 | input[type="file"]::-webkit-file-upload-button:active, 1161 | button:active { 1162 | background-color: var(--sdpi-color); 1163 | color:#303030; 1164 | } 1165 | 1166 | input:required:invalid, input:focus:invalid { 1167 | background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) no-repeat 98% center; 1168 | } 1169 | 1170 | input:required:valid { 1171 | background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) no-repeat 98% center; 1172 | } 1173 | 1174 | .tooltip, 1175 | :tooltip, 1176 | :title { 1177 | color: yellow; 1178 | } 1179 | /* 1180 | [title]:hover { 1181 | display: flex; 1182 | align-items: center; 1183 | justify-content: center; 1184 | } 1185 | 1186 | [title]:hover::after { 1187 | content: ''; 1188 | position: absolute; 1189 | bottom: -1000px; 1190 | left: 8px; 1191 | display: none; 1192 | color: #fff; 1193 | border: 8px solid transparent; 1194 | border-bottom: 8px solid #000; 1195 | } 1196 | 1197 | [title]:hover::before { 1198 | content: attr(title); 1199 | display: flex; 1200 | justify-content: center; 1201 | align-self: center; 1202 | padding: 6px 12px; 1203 | border-radius: 5px; 1204 | background: rgba(0,0,0,0.8); 1205 | color: var(--sdpi-color); 1206 | font-size: 9pt; 1207 | font-family: sans-serif; 1208 | opacity: 1; 1209 | position: absolute; 1210 | height: auto; 1211 | 1212 | text-align: center; 1213 | bottom: 2px; 1214 | z-index: 100; 1215 | box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); 1216 | } 1217 | */ 1218 | 1219 | .sdpi-item-group.file { 1220 | width: 232px; 1221 | display: flex; 1222 | align-items: center; 1223 | } 1224 | 1225 | .sdpi-file-info { 1226 | overflow-wrap: break-word; 1227 | word-wrap: break-word; 1228 | hyphens: auto; 1229 | 1230 | min-width: 132px; 1231 | max-width: 144px; 1232 | max-height: 32px; 1233 | margin-top: 0px; 1234 | margin-left: 5px; 1235 | display: inline-block; 1236 | overflow: hidden; 1237 | padding: 6px 4px; 1238 | background-color: var(--sdpi-background); 1239 | } 1240 | 1241 | 1242 | ::-webkit-scrollbar { 1243 | width: 8px; 1244 | } 1245 | 1246 | ::-webkit-scrollbar-track { 1247 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 1248 | } 1249 | 1250 | ::-webkit-scrollbar-thumb { 1251 | background-color: #999999; 1252 | outline: 1px solid slategrey; 1253 | border-radius: 8px; 1254 | } 1255 | 1256 | a { 1257 | color: #7397d2; 1258 | } 1259 | 1260 | .testcontainer { 1261 | display: flex; 1262 | background-color: #0000ff20; 1263 | max-width: 400px; 1264 | height: 200px; 1265 | align-content: space-evenly; 1266 | } 1267 | 1268 | input[type=range] { 1269 | -webkit-appearance: none; 1270 | /* background-color: green; */ 1271 | height:6px; 1272 | margin-top: 12px; 1273 | z-index: 0; 1274 | overflow: visible; 1275 | } 1276 | 1277 | /* 1278 | input[type="range"]::-webkit-slider-thumb { 1279 | -webkit-appearance: none; 1280 | background-color: var(--sdpi-color); 1281 | width: 12px; 1282 | height: 12px; 1283 | border-radius: 20px; 1284 | margin-top: -6px; 1285 | border: none; 1286 | } */ 1287 | 1288 | :-webkit-slider-thumb { 1289 | -webkit-appearance: none; 1290 | background-color: var(--sdpi-color); 1291 | width: 16px; 1292 | height: 16px; 1293 | border-radius: 20px; 1294 | margin-top: -6px; 1295 | border: 1px solid #999999; 1296 | } 1297 | 1298 | .sdpi-item[type="range"] .sdpi-item-group { 1299 | display: flex; 1300 | flex-direction: column; 1301 | } 1302 | 1303 | .xxsdpi-item[type="range"] .sdpi-item-group input { 1304 | max-width: 204px; 1305 | } 1306 | 1307 | .sdpi-item[type="range"] .sdpi-item-group span { 1308 | margin-left: 0px !important; 1309 | } 1310 | 1311 | .sdpi-item[type="range"] .sdpi-item-group > .sdpi-item-child { 1312 | display: flex; 1313 | flex-direction: row; 1314 | } 1315 | 1316 | .rangeLabel { 1317 | position:absolute; 1318 | font-weight:normal; 1319 | margin-top:22px; 1320 | } 1321 | 1322 | :disabled { 1323 | color: #993333; 1324 | } 1325 | 1326 | select, 1327 | select option { 1328 | color: var(--sdpi-color); 1329 | } 1330 | 1331 | select.disabled, 1332 | select option:disabled { 1333 | color: #fd9494; 1334 | font-style: italic; 1335 | } 1336 | 1337 | .runningAppsContainer { 1338 | display: none; 1339 | } 1340 | 1341 | /* debug 1342 | div { 1343 | background-color: rgba(64,128,255,0.2); 1344 | } 1345 | */ 1346 | 1347 | .one-line { 1348 | min-height: 1.5em; 1349 | } 1350 | 1351 | .two-lines { 1352 | min-height: 3em; 1353 | } 1354 | 1355 | .three-lines { 1356 | min-height: 4.5em; 1357 | } 1358 | 1359 | .four-lines { 1360 | min-height: 6em; 1361 | } 1362 | 1363 | .min80 > .sdpi-item-child { 1364 | min-width: 80px; 1365 | } 1366 | 1367 | .min100 > .sdpi-item-child { 1368 | min-width: 100px; 1369 | } 1370 | 1371 | .min120 > .sdpi-item-child { 1372 | min-width: 120px; 1373 | } 1374 | 1375 | .min140 > .sdpi-item-child { 1376 | min-width: 140px; 1377 | } 1378 | 1379 | .min160 > .sdpi-item-child { 1380 | min-width: 160px; 1381 | } 1382 | 1383 | .min200 > .sdpi-item-child { 1384 | min-width: 200px; 1385 | } 1386 | 1387 | .max40 { 1388 | flex-basis: 40%; 1389 | flex-grow: 0; 1390 | } 1391 | 1392 | .max30 { 1393 | flex-basis: 30%; 1394 | flex-grow: 0; 1395 | } 1396 | 1397 | .max20 { 1398 | flex-basis: 20%; 1399 | flex-grow: 0; 1400 | } 1401 | 1402 | .up20 { 1403 | margin-top: -20px; 1404 | } 1405 | 1406 | .alignCenter { 1407 | align-items: center; 1408 | } 1409 | 1410 | .alignTop { 1411 | align-items: flex-start; 1412 | } 1413 | 1414 | .alignBaseline { 1415 | align-items: baseline; 1416 | } 1417 | 1418 | .noMargins, 1419 | .noMargins *, 1420 | .noInnerMargins * { 1421 | margin: 0; 1422 | padding: 0; 1423 | } 1424 | 1425 | .hidden { 1426 | display: none; 1427 | } 1428 | 1429 | .icon-help, 1430 | .icon-help-line, 1431 | .icon-help-fill, 1432 | .icon-help-inv, 1433 | .icon-brighter, 1434 | .icon-darker, 1435 | .icon-warmer, 1436 | .icon-cooler { 1437 | min-width: 20px; 1438 | width: 20px; 1439 | background-repeat: no-repeat; 1440 | opacity: 1; 1441 | } 1442 | 1443 | .icon-help:active, 1444 | .icon-help-line:active, 1445 | .icon-help-fill:active, 1446 | .icon-help-inv:active, 1447 | .icon-brighter:active, 1448 | .icon-darker:active, 1449 | .icon-warmer:active, 1450 | .icon-cooler:active { 1451 | opacity: 0.5; 1452 | } 1453 | 1454 | .icon-brighter, 1455 | .icon-darker, 1456 | .icon-warmer, 1457 | .icon-cooler { 1458 | margin-top: 5px !important; 1459 | } 1460 | 1461 | .icon-help, 1462 | .icon-help-line, 1463 | .icon-help-fill, 1464 | .icon-help-inv { 1465 | cursor: pointer; 1466 | margin: 0px; 1467 | margin-left: 4px; 1468 | } 1469 | 1470 | .icon-brighter { 1471 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='4'/%3E%3Cpath d='M14.8532861,7.77530426 C14.7173255,7.4682615 14.5540843,7.17599221 14.3666368,6.90157083 L16.6782032,5.5669873 L17.1782032,6.4330127 L14.8532861,7.77530426 Z M10.5,4.5414007 C10.2777625,4.51407201 10.051423,4.5 9.82179677,4.5 C9.71377555,4.5 9.60648167,4.50311409 9.5,4.50925739 L9.5,2 L10.5,2 L10.5,4.5414007 Z M5.38028092,6.75545367 C5.18389364,7.02383457 5.01124349,7.31068015 4.86542112,7.61289977 L2.82179677,6.4330127 L3.32179677,5.5669873 L5.38028092,6.75545367 Z M4.86542112,12.3871002 C5.01124349,12.6893198 5.18389364,12.9761654 5.38028092,13.2445463 L3.32179677,14.4330127 L2.82179677,13.5669873 L4.86542112,12.3871002 Z M9.5,15.4907426 C9.60648167,15.4968859 9.71377555,15.5 9.82179677,15.5 C10.051423,15.5 10.2777625,15.485928 10.5,15.4585993 L10.5,18 L9.5,18 L9.5,15.4907426 Z M14.3666368,13.0984292 C14.5540843,12.8240078 14.7173255,12.5317385 14.8532861,12.2246957 L17.1782032,13.5669873 L16.6782032,14.4330127 L14.3666368,13.0984292 Z'/%3E%3C/g%3E%3C/svg%3E"); 1472 | } 1473 | .icon-darker { 1474 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 14C7.790861 14 6 12.209139 6 10 6 7.790861 7.790861 6 10 6 12.209139 6 14 7.790861 14 10 14 12.209139 12.209139 14 10 14zM10 13C11.6568542 13 13 11.6568542 13 10 13 8.34314575 11.6568542 7 10 7 8.34314575 7 7 8.34314575 7 10 7 11.6568542 8.34314575 13 10 13zM14.8532861 7.77530426C14.7173255 7.4682615 14.5540843 7.17599221 14.3666368 6.90157083L16.6782032 5.5669873 17.1782032 6.4330127 14.8532861 7.77530426zM10.5 4.5414007C10.2777625 4.51407201 10.051423 4.5 9.82179677 4.5 9.71377555 4.5 9.60648167 4.50311409 9.5 4.50925739L9.5 2 10.5 2 10.5 4.5414007zM5.38028092 6.75545367C5.18389364 7.02383457 5.01124349 7.31068015 4.86542112 7.61289977L2.82179677 6.4330127 3.32179677 5.5669873 5.38028092 6.75545367zM4.86542112 12.3871002C5.01124349 12.6893198 5.18389364 12.9761654 5.38028092 13.2445463L3.32179677 14.4330127 2.82179677 13.5669873 4.86542112 12.3871002zM9.5 15.4907426C9.60648167 15.4968859 9.71377555 15.5 9.82179677 15.5 10.051423 15.5 10.2777625 15.485928 10.5 15.4585993L10.5 18 9.5 18 9.5 15.4907426zM14.3666368 13.0984292C14.5540843 12.8240078 14.7173255 12.5317385 14.8532861 12.2246957L17.1782032 13.5669873 16.6782032 14.4330127 14.3666368 13.0984292z'/%3E%3C/g%3E%3C/svg%3E"); 1475 | } 1476 | .icon-warmer { 1477 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M12.3247275 11.4890349C12.0406216 11.0007637 11.6761954 10.5649925 11.2495475 10.1998198 11.0890394 9.83238991 11 9.42659309 11 9 11 7.34314575 12.3431458 6 14 6 15.6568542 6 17 7.34314575 17 9 17 10.6568542 15.6568542 12 14 12 13.3795687 12 12.8031265 11.8116603 12.3247275 11.4890349zM17.6232392 11.6692284C17.8205899 11.4017892 17.9890383 11.1117186 18.123974 10.8036272L20.3121778 12.0669873 19.8121778 12.9330127 17.6232392 11.6692284zM18.123974 7.19637279C17.9890383 6.88828142 17.8205899 6.5982108 17.6232392 6.33077158L19.8121778 5.0669873 20.3121778 5.9330127 18.123974 7.19637279zM14.5 4.52746439C14.3358331 4.50931666 14.1690045 4.5 14 4.5 13.8309955 4.5 13.6641669 4.50931666 13.5 4.52746439L13.5 2 14.5 2 14.5 4.52746439zM13.5 13.4725356C13.6641669 13.4906833 13.8309955 13.5 14 13.5 14.1690045 13.5 14.3358331 13.4906833 14.5 13.4725356L14.5 16 13.5 16 13.5 13.4725356zM14 11C15.1045695 11 16 10.1045695 16 9 16 7.8954305 15.1045695 7 14 7 12.8954305 7 12 7.8954305 12 9 12 10.1045695 12.8954305 11 14 11zM9.5 11C10.6651924 11.4118364 11.5 12.5 11.5 14 11.5 16 10 17.5 8 17.5 6 17.5 4.5 16 4.5 14 4.5 12.6937812 5 11.5 6.5 11L6.5 7 9.5 7 9.5 11z'/%3E%3Cpath d='M12,14 C12,16.209139 10.209139,18 8,18 C5.790861,18 4,16.209139 4,14 C4,12.5194353 4.80439726,11.2267476 6,10.5351288 L6,4 C6,2.8954305 6.8954305,2 8,2 C9.1045695,2 10,2.8954305 10,4 L10,10.5351288 C11.1956027,11.2267476 12,12.5194353 12,14 Z M11,14 C11,12.6937812 10.1651924,11.5825421 9,11.1707057 L9,4 C9,3.44771525 8.55228475,3 8,3 C7.44771525,3 7,3.44771525 7,4 L7,11.1707057 C5.83480763,11.5825421 5,12.6937812 5,14 C5,15.6568542 6.34314575,17 8,17 C9.65685425,17 11,15.6568542 11,14 Z'/%3E%3C/g%3E%3C/svg%3E"); 1478 | } 1479 | 1480 | .icon-cooler { 1481 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10.4004569 11.6239517C10.0554735 10.9863849 9.57597206 10.4322632 9 9.99963381L9 9.7450467 9.53471338 9.7450467 10.8155381 8.46422201C10.7766941 8.39376637 10.7419749 8.32071759 10.7117062 8.2454012L9 8.2454012 9 6.96057868 10.6417702 6.96057868C10.6677696 6.86753378 10.7003289 6.77722682 10.7389179 6.69018783L9.44918707 5.40045694 9 5.40045694 9 4.34532219 9.32816127 4.34532219 9.34532219 2.91912025 10.4004569 2.91912025 10.4004569 4.53471338 11.6098599 5.74411634C11.7208059 5.68343597 11.8381332 5.63296451 11.9605787 5.59396526L11.9605787 3.8884898 10.8181818 2.74609294 11.5642748 2 12.5727518 3.00847706 13.5812289 2 14.3273218 2.74609294 13.2454012 3.82801356 13.2454012 5.61756719C13.3449693 5.65339299 13.4408747 5.69689391 13.5324038 5.74735625L14.7450467 4.53471338 14.7450467 2.91912025 15.8001815 2.91912025 15.8001815 4.34532219 17.2263834 4.34532219 17.2263834 5.40045694 15.6963166 5.40045694 14.4002441 6.69652946C14.437611 6.78161093 14.4692249 6.86979146 14.4945934 6.96057868L16.2570138 6.96057868 17.3994107 5.81818182 18.1455036 6.56427476 17.1370266 7.57275182 18.1455036 8.58122888 17.3994107 9.32732182 16.3174901 8.2454012 14.4246574 8.2454012C14.3952328 8.31861737 14.3616024 8.38969062 14.3240655 8.45832192L15.6107903 9.7450467 17.2263834 9.7450467 17.2263834 10.8001815 15.8001815 10.8001815 15.8001815 12.2263834 14.7450467 12.2263834 14.7450467 10.6963166 13.377994 9.32926387C13.3345872 9.34850842 13.2903677 9.36625331 13.2454012 9.38243281L13.2454012 11.3174901 14.3273218 12.3994107 13.5812289 13.1455036 12.5848864 12.1491612 11.5642748 13.1455036 10.8181818 12.3994107 11.9605787 11.2570138 11.9605787 9.40603474C11.8936938 9.38473169 11.828336 9.36000556 11.7647113 9.33206224L10.4004569 10.6963166 10.4004569 11.6239517zM12.75 8.5C13.3022847 8.5 13.75 8.05228475 13.75 7.5 13.75 6.94771525 13.3022847 6.5 12.75 6.5 12.1977153 6.5 11.75 6.94771525 11.75 7.5 11.75 8.05228475 12.1977153 8.5 12.75 8.5zM9.5 14C8.5 16.3333333 7.33333333 17.5 6 17.5 4.66666667 17.5 3.5 16.3333333 2.5 14L9.5 14z'/%3E%3Cpath d='M10,14 C10,16.209139 8.209139,18 6,18 C3.790861,18 2,16.209139 2,14 C2,12.5194353 2.80439726,11.2267476 4,10.5351288 L4,4 C4,2.8954305 4.8954305,2 6,2 C7.1045695,2 8,2.8954305 8,4 L8,10.5351288 C9.19560274,11.2267476 10,12.5194353 10,14 Z M9,14 C9,12.6937812 8.16519237,11.5825421 7,11.1707057 L7,4 C7,3.44771525 6.55228475,3 6,3 C5.44771525,3 5,3.44771525 5,4 L5,11.1707057 C3.83480763,11.5825421 3,12.6937812 3,14 C3,15.6568542 4.34314575,17 6,17 C7.65685425,17 9,15.6568542 9,14 Z'/%3E%3C/g%3E%3C/svg%3E"); 1482 | } 1483 | 1484 | .icon-help { 1485 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23999' d='M11.292 12.516l.022 1.782H9.07v-1.804c0-1.98 1.276-2.574 2.662-3.278h-.022c.814-.44 1.65-.88 1.694-2.2.044-1.386-1.122-2.728-3.234-2.728-1.518 0-2.662.902-3.366 2.354L5 5.608C5.946 3.584 7.662 2 10.17 2c3.564 0 5.632 2.442 5.588 5.06-.066 2.618-1.716 3.41-3.102 4.158-.704.374-1.364.682-1.364 1.298zm-1.122 2.442c.858 0 1.452.594 1.452 1.452 0 .682-.594 1.408-1.452 1.408-.77 0-1.386-.726-1.386-1.408 0-.858.616-1.452 1.386-1.452z'/%3E%3C/svg%3E"); 1486 | } 1487 | 1488 | .icon-help-line { 1489 | background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23999' fill-rule='evenodd'%3E%3Cpath d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-1a9 9 0 1 0 0-18 9 9 0 0 0 0 18z'/%3E%3Cpath d='M10.848 12.307l.02 1.578H8.784v-1.597c0-1.753 1.186-2.278 2.474-2.901h-.02c.756-.39 1.533-.78 1.574-1.948.041-1.226-1.043-2.414-3.006-2.414-1.41 0-2.474.798-3.128 2.083L5 6.193C5.88 4.402 7.474 3 9.805 3 13.118 3 15.04 5.161 15 7.478c-.061 2.318-1.595 3.019-2.883 3.68-.654.332-1.268.604-1.268 1.15zM9.805 14.47c.798 0 1.35.525 1.35 1.285 0 .603-.552 1.246-1.35 1.246-.715 0-1.288-.643-1.288-1.246 0-.76.573-1.285 1.288-1.285z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");} 1490 | 1491 | .icon-help-fill { 1492 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23999'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='M8.368 7.189H5C5 3.5 7.668 2 10.292 2 13.966 2 16 4.076 16 7.012c0 3.754-3.849 3.136-3.849 5.211v1.656H8.455v-1.832c0-2.164 1.4-2.893 2.778-3.6.437-.242 1.006-.574 1.006-1.236 0-2.208-3.871-2.142-3.871-.022zM10.25 18a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5z'/%3E%3C/g%3E%3C/svg%3E"); 1493 | } 1494 | 1495 | .icon-help-inv { 1496 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23999' fill-rule='evenodd' d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zM8.368 7.189c0-2.12 3.87-2.186 3.87.022 0 .662-.568.994-1.005 1.236-1.378.707-2.778 1.436-2.778 3.6v1.832h3.696v-1.656c0-2.075 3.849-1.457 3.849-5.21C16 4.075 13.966 2 10.292 2 7.668 2 5 3.501 5 7.189h3.368zM10.25 18a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5z'/%3E%3C/svg%3E"); 1497 | } 1498 | 1499 | .kelvin::after { 1500 | content: "K"; 1501 | } 1502 | 1503 | .mired::after { 1504 | content: " Mired"; 1505 | } 1506 | 1507 | .percent::after { 1508 | content: "%"; 1509 | } 1510 | 1511 | .sdpi-item-value + .icon-cooler, 1512 | .sdpi-item-value + .icon-warmer { 1513 | margin-left: 0px !important; 1514 | margin-top: 15px !important; 1515 | } 1516 | 1517 | /** 1518 | CONTROL-CENTER STYLES 1519 | */ 1520 | input[type="range"].colorbrightness::-webkit-slider-runnable-track, 1521 | input[type="range"].colortemperature::-webkit-slider-runnable-track { 1522 | height: 8px; 1523 | background: #979797; 1524 | border-radius: 4px; 1525 | background-image: linear-gradient(to right,#94d0ec, #ffb165); 1526 | } 1527 | 1528 | input[type="range"].colorbrightness::-webkit-slider-runnable-track { 1529 | background-color: #efefef; 1530 | background-image: linear-gradient(to right, black , rgba(0,0,0,0)); 1531 | } 1532 | 1533 | 1534 | input[type="range"].colorbrightness::-webkit-slider-thumb, 1535 | input[type="range"].colortemperature::-webkit-slider-thumb { 1536 | width: 16px; 1537 | height: 16px; 1538 | border-radius: 20px; 1539 | margin-top: -5px; 1540 | background-color: #86c6e8; 1541 | box-shadow: 0px 0px 1px #000000; 1542 | border: 1px solid #d8d8d8; 1543 | } 1544 | .sdpi-info-label { 1545 | display: inline-block; 1546 | user-select: none; 1547 | position: absolute; 1548 | height: 15px; 1549 | width: auto; 1550 | text-align: center; 1551 | border-radius: 4px; 1552 | min-width: 44px; 1553 | max-width: 80px; 1554 | background: white; 1555 | font-size: 11px; 1556 | color: black; 1557 | z-index: 1000; 1558 | box-shadow: 0px 0px 12px rgba(0,0,0,.8); 1559 | padding: 2px; 1560 | 1561 | } 1562 | 1563 | .sdpi-info-label.hidden { 1564 | opacity: 0; 1565 | transition: opacity 0.25s linear; 1566 | } 1567 | 1568 | .sdpi-info-label.shown { 1569 | position: absolute; 1570 | opacity: 1; 1571 | transition: opacity 0.25s ease-out; 1572 | } 1573 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/http.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | gg.datagram.web-requests.http 10 | 11 | 12 | 13 | 14 |
15 |
16 |
URL
17 | 18 |
19 | 20 |
21 |
Method
22 | 31 |
32 | 33 |
34 |
Content Type
35 | 42 |
43 | 44 |
45 |
Headers
46 | 47 | 48 | 49 |
50 | 51 |
52 |
Body
53 | 54 | 55 | 56 |
57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/js/common.js: -------------------------------------------------------------------------------- 1 | /* global $SD, $localizedStrings */ 2 | /* exported, $localizedStrings */ 3 | /* eslint no-undef: "error", 4 | curly: 0, 5 | no-caller: 0, 6 | wrap-iife: 0, 7 | one-var: 0, 8 | no-var: 0, 9 | vars-on-top: 0 10 | */ 11 | 12 | // don't change this to let or const, because we rely on var's hoisting 13 | // eslint-disable-next-line no-use-before-define, no-var 14 | var $localizedStrings = $localizedStrings || {}, 15 | REMOTESETTINGS = REMOTESETTINGS || {}, 16 | DestinationEnum = Object.freeze({ 17 | HARDWARE_AND_SOFTWARE: 0, 18 | HARDWARE_ONLY: 1, 19 | SOFTWARE_ONLY: 2 20 | }), 21 | // eslint-disable-next-line no-unused-vars 22 | isQT = navigator.appVersion.includes('QtWebEngine'), 23 | debug = debug || false, 24 | debugLog = function () {}, 25 | MIMAGECACHE = MIMAGECACHE || {}; 26 | 27 | const setDebugOutput = (debug) => (debug === true) ? console.log.bind(window.console) : function () {}; 28 | debugLog = setDebugOutput(debug); 29 | 30 | // Create a wrapper to allow passing JSON to the socket 31 | WebSocket.prototype.sendJSON = function (jsn, log) { 32 | if (log) { 33 | console.log('SendJSON', this, jsn); 34 | } 35 | // if (this.readyState) { 36 | this.send(JSON.stringify(jsn)); 37 | // } 38 | }; 39 | 40 | /* eslint no-extend-native: ["error", { "exceptions": ["String"] }] */ 41 | String.prototype.lox = function () { 42 | var a = String(this); 43 | try { 44 | a = $localizedStrings[a] || a; 45 | } catch (b) {} 46 | return a; 47 | }; 48 | 49 | String.prototype.sprintf = function (inArr) { 50 | let i = 0; 51 | const args = (inArr && Array.isArray(inArr)) ? inArr : arguments; 52 | return this.replace(/%s/g, function () { 53 | return args[i++]; 54 | }); 55 | }; 56 | 57 | // eslint-disable-next-line no-unused-vars 58 | const sprintf = (s, ...args) => { 59 | let i = 0; 60 | return s.replace(/%s/g, function () { 61 | return args[i++]; 62 | }); 63 | }; 64 | 65 | const loadLocalization = (lang, pathPrefix, cb) => { 66 | Utils.readJson(`${pathPrefix}${lang}.json`, function (jsn) { 67 | const manifest = Utils.parseJson(jsn); 68 | $localizedStrings = manifest && manifest.hasOwnProperty('Localization') ? manifest['Localization'] : {}; 69 | debugLog($localizedStrings); 70 | if (cb && typeof cb === 'function') cb(); 71 | }); 72 | } 73 | 74 | var Utils = { 75 | sleep: function (milliseconds) { 76 | return new Promise(resolve => setTimeout(resolve, milliseconds)); 77 | }, 78 | isUndefined: function (value) { 79 | return typeof value === 'undefined'; 80 | }, 81 | isObject: function (o) { 82 | return ( 83 | typeof o === 'object' && 84 | o !== null && 85 | o.constructor && 86 | o.constructor === Object 87 | ); 88 | }, 89 | isPlainObject: function (o) { 90 | return ( 91 | typeof o === 'object' && 92 | o !== null && 93 | o.constructor && 94 | o.constructor === Object 95 | ); 96 | }, 97 | isArray: function (value) { 98 | return Array.isArray(value); 99 | }, 100 | isNumber: function (value) { 101 | return typeof value === 'number' && value !== null; 102 | }, 103 | isInteger (value) { 104 | return typeof value === 'number' && value === Number(value); 105 | }, 106 | isString (value) { 107 | return typeof value === 'string'; 108 | }, 109 | isImage (value) { 110 | return value instanceof HTMLImageElement; 111 | }, 112 | isCanvas (value) { 113 | return value instanceof HTMLCanvasElement; 114 | }, 115 | isValue: function (value) { 116 | return !this.isObject(value) && !this.isArray(value); 117 | }, 118 | isNull: function (value) { 119 | return value === null; 120 | }, 121 | toInteger: function (value) { 122 | const INFINITY = 1 / 0, 123 | MAX_INTEGER = 1.7976931348623157e308; 124 | if (!value) { 125 | return value === 0 ? value : 0; 126 | } 127 | value = Number(value); 128 | if (value === INFINITY || value === -INFINITY) { 129 | const sign = value < 0 ? -1 : 1; 130 | return sign * MAX_INTEGER; 131 | } 132 | return value === value ? value : 0; 133 | } 134 | }; 135 | Utils.minmax = function (v, min = 0, max = 100) { 136 | return Math.min(max, Math.max(min, v)); 137 | }; 138 | 139 | Utils.rangeToPercent = function (value, min, max) { 140 | return ((value - min) / (max - min)); 141 | }; 142 | 143 | Utils.percentToRange = function (percent, min, max) { 144 | return ((max - min) * percent + min); 145 | }; 146 | 147 | Utils.setDebugOutput = (debug) => { 148 | return (debug === true) ? console.log.bind(window.console) : function () {}; 149 | }; 150 | 151 | Utils.randomComponentName = function (len = 6) { 152 | return `${Utils.randomLowerString(len)}-${Utils.randomLowerString(len)}`; 153 | }; 154 | 155 | Utils.randomString = function (len = 8) { 156 | return Array.apply(0, Array(len)) 157 | .map(function () { 158 | return (function (charset) { 159 | return charset.charAt( 160 | Math.floor(Math.random() * charset.length) 161 | ); 162 | })( 163 | 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' 164 | ); 165 | }) 166 | .join(''); 167 | }; 168 | 169 | Utils.rs = function (len = 8) { 170 | return [...Array(len)].map(i => (~~(Math.random() * 36)).toString(36)).join(''); 171 | }; 172 | 173 | Utils.randomLowerString = function (len = 8) { 174 | return Array.apply(0, Array(len)) 175 | .map(function () { 176 | return (function (charset) { 177 | return charset.charAt( 178 | Math.floor(Math.random() * charset.length) 179 | ); 180 | })('abcdefghijklmnopqrstuvwxyz'); 181 | }) 182 | .join(''); 183 | }; 184 | 185 | Utils.capitalize = function (str) { 186 | return str.charAt(0).toUpperCase() + str.slice(1); 187 | }; 188 | 189 | Utils.measureText = (text, font) => { 190 | const canvas = Utils.measureText.canvas || (Utils.measureText.canvas = document.createElement("canvas")); 191 | const ctx = canvas.getContext("2d"); 192 | ctx.font = font || 'bold 10pt system-ui'; 193 | return ctx.measureText(text).width; 194 | }; 195 | 196 | Utils.fixName = (d, dName) => { 197 | let i = 1; 198 | const base = dName; 199 | while (d[dName]) { 200 | dName = `${base} (${i})` 201 | i++; 202 | } 203 | return dName; 204 | }; 205 | 206 | Utils.isEmptyString = (str) => { 207 | return (!str || str.length === 0); 208 | }; 209 | 210 | Utils.isBlankString = (str) => { 211 | return (!str || /^\s*$/.test(str)); 212 | }; 213 | 214 | Utils.log = function () {}; 215 | Utils.count = 0; 216 | Utils.counter = function () { 217 | return (this.count += 1); 218 | }; 219 | Utils.getPrefix = function () { 220 | return this.prefix + this.counter(); 221 | }; 222 | 223 | Utils.prefix = Utils.randomString() + '_'; 224 | 225 | Utils.getUrlParameter = function (name) { 226 | const nameA = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); 227 | const regex = new RegExp('[\\?&]' + nameA + '=([^&#]*)'); 228 | const results = regex.exec(location.search.replace(/\/$/, '')); 229 | return results === null 230 | ? null 231 | : decodeURIComponent(results[1].replace(/\+/g, ' ')); 232 | }; 233 | 234 | Utils.debounce = function (func, wait = 100) { 235 | let timeout; 236 | return function (...args) { 237 | clearTimeout(timeout); 238 | timeout = setTimeout(() => { 239 | func.apply(this, args); 240 | }, wait); 241 | }; 242 | }; 243 | 244 | Utils.getRandomColor = function () { 245 | return '#' + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, 0); // just a random color padded to 6 characters 246 | }; 247 | 248 | /* 249 | Quick utility to lighten or darken a color (doesn't take color-drifting, etc. into account) 250 | Usage: 251 | fadeColor('#061261', 100); // will lighten the color 252 | fadeColor('#200867'), -100); // will darken the color 253 | */ 254 | 255 | Utils.fadeColor = function (col, amt) { 256 | const min = Math.min, max = Math.max; 257 | const num = parseInt(col.replace(/#/g, ''), 16); 258 | const r = min(255, max((num >> 16) + amt, 0)); 259 | const g = min(255, max((num & 0x0000FF) + amt, 0)); 260 | const b = min(255, max(((num >> 8) & 0x00FF) + amt, 0)); 261 | return '#' + (g | (b << 8) | (r << 16)).toString(16).padStart(6, 0); 262 | } 263 | 264 | Utils.lerpColor = function (startColor, targetColor, amount) { 265 | const ah = parseInt(startColor.replace(/#/g, ''), 16); 266 | const ar = ah >> 16; 267 | const ag = (ah >> 8) & 0xff; 268 | const ab = ah & 0xff; 269 | const bh = parseInt(targetColor.replace(/#/g, ''), 16); 270 | const br = bh >> 16; 271 | var bg = (bh >> 8) & 0xff; 272 | var bb = bh & 0xff; 273 | const rr = ar + amount * (br - ar); 274 | const rg = ag + amount * (bg - ag); 275 | const rb = ab + amount * (bb - ab); 276 | 277 | return ( 278 | '#' + 279 | (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0) 280 | .toString(16) 281 | .slice(1) 282 | .toUpperCase() 283 | ); 284 | }; 285 | 286 | Utils.hexToRgb = function (hex) { 287 | const match = hex.replace(/#/, '').match(/.{1,2}/g); 288 | return { 289 | r: parseInt(match[0], 16), 290 | g: parseInt(match[1], 16), 291 | b: parseInt(match[2], 16) 292 | }; 293 | }; 294 | 295 | Utils.rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => { 296 | return x.toString(16).padStart(2,0) 297 | }).join('') 298 | 299 | 300 | Utils.nscolorToRgb = function (rP, gP, bP) { 301 | return { 302 | r : Math.round(rP * 255), 303 | g : Math.round(gP * 255), 304 | b : Math.round(bP * 255) 305 | } 306 | }; 307 | 308 | Utils.nsColorToHex = function (rP, gP, bP) { 309 | const c = Utils.nscolorToRgb(rP, gP, bP); 310 | return Utils.rgbToHex(c.r, c.g, c.b); 311 | }; 312 | 313 | Utils.miredToKelvin = function (mired) { 314 | return Math.round(1e6 / mired); 315 | }; 316 | 317 | Utils.kelvinToMired = function (kelvin, roundTo) { 318 | return roundTo ? Utils.roundBy(Math.round(1e6 / kelvin), roundTo) : Math.round(1e6 / kelvin); 319 | }; 320 | 321 | Utils.roundBy = function(num, x) { 322 | return Math.round((num - 10) / x) * x; 323 | } 324 | 325 | Utils.getBrightness = function (hexColor) { 326 | // http://www.w3.org/TR/AERT#color-contrast 327 | if (typeof hexColor === 'string' && hexColor.charAt(0) === '#') { 328 | var rgb = Utils.hexToRgb(hexColor); 329 | return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; 330 | } 331 | return 0; 332 | }; 333 | 334 | Utils.readJson = function (file, callback) { 335 | var req = new XMLHttpRequest(); 336 | req.onerror = function (e) { 337 | // Utils.log(`[Utils][readJson] Error while trying to read ${file}`, e); 338 | }; 339 | req.overrideMimeType('application/json'); 340 | req.open('GET', file, true); 341 | req.onreadystatechange = function () { 342 | if (req.readyState === 4) { 343 | // && req.status == "200") { 344 | if (callback) callback(req.responseText); 345 | } 346 | }; 347 | req.send(null); 348 | }; 349 | 350 | Utils.loadScript = function (url, callback) { 351 | const el = document.createElement('script'); 352 | el.src = url; 353 | el.onload = function () { 354 | callback(url, true); 355 | }; 356 | el.onerror = function () { 357 | console.error('Failed to load file: ' + url); 358 | callback(url, false); 359 | }; 360 | document.body.appendChild(el); 361 | }; 362 | 363 | Utils.parseJson = function (jsonString) { 364 | if (typeof jsonString === 'object') return jsonString; 365 | try { 366 | const o = JSON.parse(jsonString); 367 | 368 | // Handle non-exception-throwing cases: 369 | // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking, 370 | // but... JSON.parse(null) returns null, and typeof null === "object", 371 | // so we must check for that, too. Thankfully, null is falsey, so this suffices: 372 | if (o && typeof o === 'object') { 373 | return o; 374 | } 375 | } catch (e) {} 376 | 377 | return false; 378 | }; 379 | 380 | Utils.parseJSONPromise = function (jsonString) { 381 | // fetch('/my-json-doc-as-string') 382 | // .then(Utils.parseJSONPromise) 383 | // .then(heresYourValidJSON) 384 | // .catch(error - or return default JSON) 385 | 386 | return new Promise((resolve, reject) => { 387 | try { 388 | resolve(JSON.parse(jsonString)); 389 | } catch (e) { 390 | reject(e); 391 | } 392 | }); 393 | }; 394 | 395 | /* eslint-disable import/prefer-default-export */ 396 | Utils.getProperty = function (obj, dotSeparatedKeys, defaultValue) { 397 | if (arguments.length > 1 && typeof dotSeparatedKeys !== 'string') 398 | return undefined; 399 | if (typeof obj !== 'undefined' && typeof dotSeparatedKeys === 'string') { 400 | const pathArr = dotSeparatedKeys.split('.'); 401 | pathArr.forEach((key, idx, arr) => { 402 | if (typeof key === 'string' && key.includes('[')) { 403 | try { 404 | // extract the array index as string 405 | const pos = /\[([^)]+)\]/.exec(key)[1]; 406 | // get the index string length (i.e. '21'.length === 2) 407 | const posLen = pos.length; 408 | arr.splice(idx + 1, 0, Number(pos)); 409 | 410 | // keep the key (array name) without the index comprehension: 411 | // (i.e. key without [] (string of length 2) 412 | // and the length of the index (posLen)) 413 | arr[idx] = key.slice(0, -2 - posLen); // eslint-disable-line no-param-reassign 414 | } catch (e) { 415 | // do nothing 416 | } 417 | } 418 | }); 419 | // eslint-disable-next-line no-param-reassign, no-confusing-arrow 420 | obj = pathArr.reduce( 421 | (o, key) => (o && o[key] !== 'undefined' ? o[key] : undefined), 422 | obj 423 | ); 424 | } 425 | return obj === undefined ? defaultValue : obj; 426 | }; 427 | 428 | Utils.getProp = (jsn, str, defaultValue = {}, sep = '.') => { 429 | const arr = str.split(sep); 430 | return arr.reduce((obj, key) => 431 | (obj && obj.hasOwnProperty(key)) ? obj[key] : defaultValue, jsn); 432 | }; 433 | 434 | Utils.setProp = function (jsonObj, path, value) { 435 | const names = path.split('.'); 436 | let jsn = jsonObj; 437 | 438 | // createNestedObject(jsn, names, values); 439 | // If a value is given, remove the last name and keep it for later: 440 | var targetProperty = arguments.length === 3 ? names.pop() : false; 441 | 442 | // Walk the hierarchy, creating new objects where needed. 443 | // If the lastName was removed, then the last object is not set yet: 444 | for (var i = 0; i < names.length; i++) { 445 | jsn = jsn[names[i]] = jsn[names[i]] || {}; 446 | } 447 | 448 | // If a value was given, set it to the target property (the last one): 449 | if (targetProperty) jsn = jsn[targetProperty] = value; 450 | 451 | // Return the last object in the hierarchy: 452 | return jsn; 453 | }; 454 | 455 | Utils.getDataUri = function (url, callback, inCanvas, inFillcolor) { 456 | var image = new Image(); 457 | 458 | image.onload = function () { 459 | const canvas = 460 | inCanvas && Utils.isCanvas(inCanvas) 461 | ? inCanvas 462 | : document.createElement('canvas'); 463 | 464 | canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size 465 | canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size 466 | 467 | const ctx = canvas.getContext('2d'); 468 | if (inFillcolor) { 469 | ctx.fillStyle = inFillcolor; 470 | ctx.fillRect(0, 0, canvas.width, canvas.height); 471 | } 472 | ctx.drawImage(this, 0, 0); 473 | // Get raw image data 474 | // callback && callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')); 475 | 476 | // ... or get as Data URI 477 | callback(canvas.toDataURL('image/png')); 478 | }; 479 | 480 | image.src = url; 481 | }; 482 | 483 | /** Quick utility to inject a style to the DOM 484 | * e.g. injectStyle('.localbody { background-color: green;}') 485 | */ 486 | Utils.injectStyle = function (styles, styleId) { 487 | const node = document.createElement('style'); 488 | const tempID = styleId || Utils.randomString(8); 489 | node.setAttribute('id', tempID); 490 | node.innerHTML = styles; 491 | document.body.appendChild(node); 492 | return node; 493 | }; 494 | 495 | 496 | Utils.loadImage = function (inUrl, callback, inCanvas, inFillcolor) { 497 | /** Convert to array, so we may load multiple images at once */ 498 | const aUrl = !Array.isArray(inUrl) ? [inUrl] : inUrl; 499 | const canvas = inCanvas && inCanvas instanceof HTMLCanvasElement 500 | ? inCanvas 501 | : document.createElement('canvas'); 502 | var imgCount = aUrl.length - 1; 503 | const imgCache = {}; 504 | 505 | var ctx = canvas.getContext('2d'); 506 | ctx.globalCompositeOperation = 'source-over'; 507 | 508 | for (let url of aUrl) { 509 | let image = new Image(); 510 | let cnt = imgCount; 511 | let w = 144, h = 144; 512 | 513 | image.onload = function () { 514 | imgCache[url] = this; 515 | // look at the size of the first image 516 | if (url === aUrl[0]) { 517 | canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size 518 | canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size 519 | } 520 | // if (Object.keys(imgCache).length == aUrl.length) { 521 | if (cnt < 1) { 522 | if (inFillcolor) { 523 | ctx.fillStyle = inFillcolor; 524 | ctx.fillRect(0, 0, canvas.width, canvas.height); 525 | } 526 | // draw in the proper sequence FIFO 527 | aUrl.forEach(e => { 528 | if (!imgCache[e]) { 529 | console.warn(imgCache[e], imgCache); 530 | } 531 | 532 | if (imgCache[e]) { 533 | ctx.drawImage(imgCache[e], 0, 0); 534 | ctx.save(); 535 | } 536 | }); 537 | 538 | callback(canvas.toDataURL('image/png')); 539 | // or to get raw image data 540 | // callback && callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')); 541 | } 542 | }; 543 | 544 | imgCount--; 545 | image.src = url; 546 | } 547 | }; 548 | 549 | Utils.getData = function (url) { 550 | // Return a new promise. 551 | return new Promise(function (resolve, reject) { 552 | // Do the usual XHR stuff 553 | var req = new XMLHttpRequest(); 554 | // Make sure to call .open asynchronously 555 | req.open('GET', url, true); 556 | 557 | req.onload = function () { 558 | // This is called even on 404 etc 559 | // so check the status 560 | if (req.status === 200) { 561 | // Resolve the promise with the response text 562 | resolve(req.response); 563 | } else { 564 | // Otherwise reject with the status text 565 | // which will hopefully be a meaningful error 566 | reject(Error(req.statusText)); 567 | } 568 | }; 569 | 570 | // Handle network errors 571 | req.onerror = function () { 572 | reject(Error('Network Error')); 573 | }; 574 | 575 | // Make the request 576 | req.send(); 577 | }); 578 | }; 579 | 580 | Utils.negArray = function (arr) { 581 | /** http://h3manth.com/new/blog/2013/negative-array-index-in-javascript/ */ 582 | return Proxy.create({ 583 | set: function (proxy, index, value) { 584 | index = parseInt(index); 585 | return index < 0 ? (arr[arr.length + index] = value) : (arr[index] = value); 586 | }, 587 | get: function (proxy, index) { 588 | index = parseInt(index); 589 | return index < 0 ? arr[arr.length + index] : arr[index]; 590 | } 591 | }); 592 | }; 593 | 594 | Utils.onChange = function (object, callback) { 595 | /** https://github.com/sindresorhus/on-change */ 596 | 'use strict'; 597 | const handler = { 598 | get (target, property, receiver) { 599 | try { 600 | console.log('get via Proxy: ', property, target, receiver); 601 | return new Proxy(target[property], handler); 602 | } catch (err) { 603 | console.log('get via Reflect: ', err, property, target, receiver); 604 | return Reflect.get(target, property, receiver); 605 | } 606 | }, 607 | set (target, property, value, receiver) { 608 | console.log('Utils.onChange:set1:', target, property, value, receiver); 609 | // target[property] = value; 610 | const b = Reflect.set(target, property, value); 611 | console.log('Utils.onChange:set2:', target, property, value, receiver); 612 | return b; 613 | }, 614 | defineProperty (target, property, descriptor) { 615 | console.log('Utils.onChange:defineProperty:', target, property, descriptor); 616 | callback(target, property, descriptor); 617 | return Reflect.defineProperty(target, property, descriptor); 618 | }, 619 | deleteProperty (target, property) { 620 | console.log('Utils.onChange:deleteProperty:', target, property); 621 | callback(target, property); 622 | return Reflect.deleteProperty(target, property); 623 | } 624 | }; 625 | 626 | return new Proxy(object, handler); 627 | }; 628 | 629 | Utils.observeArray = function (object, callback) { 630 | 'use strict'; 631 | const array = []; 632 | const handler = { 633 | get (target, property, receiver) { 634 | try { 635 | return new Proxy(target[property], handler); 636 | } catch (err) { 637 | return Reflect.get(target, property, receiver); 638 | } 639 | }, 640 | set (target, property, value, receiver) { 641 | console.log('XXXUtils.observeArray:set1:', target, property, value, array); 642 | target[property] = value; 643 | console.log('XXXUtils.observeArray:set2:', target, property, value, array); 644 | }, 645 | defineProperty (target, property, descriptor) { 646 | callback(target, property, descriptor); 647 | return Reflect.defineProperty(target, property, descriptor); 648 | }, 649 | deleteProperty (target, property) { 650 | callback(target, property, descriptor); 651 | return Reflect.deleteProperty(target, property); 652 | } 653 | }; 654 | 655 | return new Proxy(object, handler); 656 | }; 657 | 658 | window['_'] = Utils; 659 | 660 | /* 661 | * connectElgatoStreamDeckSocket 662 | * This is the first function StreamDeck Software calls, when 663 | * establishing the connection to the plugin or the Property Inspector 664 | * @param {string} inPort - The socket's port to communicate with StreamDeck software. 665 | * @param {string} inUUID - A unique identifier, which StreamDeck uses to communicate with the plugin 666 | * @param {string} inMessageType - Identifies, if the event is meant for the property inspector or the plugin. 667 | * @param {string} inApplicationInfo - Information about the host (StreamDeck) application 668 | * @param {string} inActionInfo - Context is an internal identifier used to communicate to the host application. 669 | */ 670 | 671 | 672 | // eslint-disable-next-line no-unused-vars 673 | function connectElgatoStreamDeckSocket ( 674 | inPort, 675 | inUUID, 676 | inMessageType, 677 | inApplicationInfo, 678 | inActionInfo 679 | ) { 680 | StreamDeck.getInstance().connect(arguments); 681 | window.$SD.api = Object.assign({ send: SDApi.send }, SDApi.common, SDApi[inMessageType]); 682 | } 683 | 684 | /* legacy support */ 685 | 686 | function connectSocket ( 687 | inPort, 688 | inUUID, 689 | inMessageType, 690 | inApplicationInfo, 691 | inActionInfo 692 | ) { 693 | connectElgatoStreamDeckSocket( 694 | inPort, 695 | inUUID, 696 | inMessageType, 697 | inApplicationInfo, 698 | inActionInfo 699 | ); 700 | } 701 | 702 | /** 703 | * StreamDeck object containing all required code to establish 704 | * communication with SD-Software and the Property Inspector 705 | */ 706 | 707 | const StreamDeck = (function () { 708 | // Hello it's me 709 | var instance; 710 | /* 711 | Populate and initialize internally used properties 712 | */ 713 | 714 | function init () { 715 | // *** PRIVATE *** 716 | 717 | var inPort, 718 | inUUID, 719 | inMessageType, 720 | inApplicationInfo, 721 | inActionInfo, 722 | websocket = null; 723 | 724 | var events = ELGEvents.eventEmitter(); 725 | var logger = SDDebug.logger(); 726 | 727 | function showVars () { 728 | debugLog('---- showVars'); 729 | debugLog('- port', inPort); 730 | debugLog('- uuid', inUUID); 731 | debugLog('- messagetype', inMessageType); 732 | debugLog('- info', inApplicationInfo); 733 | debugLog('- inActionInfo', inActionInfo); 734 | debugLog('----< showVars'); 735 | } 736 | 737 | function connect (args) { 738 | inPort = args[0]; 739 | inUUID = args[1]; 740 | inMessageType = args[2]; 741 | inApplicationInfo = Utils.parseJson(args[3]); 742 | inActionInfo = args[4] !== 'undefined' ? Utils.parseJson(args[4]) : args[4]; 743 | 744 | /** Debug variables */ 745 | if (debug) { 746 | showVars(); 747 | } 748 | 749 | const lang = Utils.getProp(inApplicationInfo,'application.language', false); 750 | if (lang) { 751 | loadLocalization(lang, inMessageType === 'registerPropertyInspector' ? '../' : './', function() { 752 | events.emit('localizationLoaded', {language:lang}); 753 | }); 754 | }; 755 | 756 | /** restrict the API to what's possible 757 | * within Plugin or Property Inspector 758 | * 759 | */ 760 | // $SD.api = SDApi[inMessageType]; 761 | 762 | if (websocket) { 763 | websocket.close(); 764 | websocket = null; 765 | }; 766 | 767 | websocket = new WebSocket('ws://127.0.0.1:' + inPort); 768 | 769 | websocket.onopen = function () { 770 | var json = { 771 | event: inMessageType, 772 | uuid: inUUID 773 | }; 774 | 775 | // console.log('***************', inMessageType + " websocket:onopen", inUUID, json); 776 | 777 | websocket.sendJSON(json); 778 | $SD.uuid = inUUID; 779 | $SD.actionInfo = inActionInfo; 780 | $SD.applicationInfo = inApplicationInfo; 781 | $SD.messageType = inMessageType; 782 | $SD.connection = websocket; 783 | 784 | instance.emit('connected', { 785 | connection: websocket, 786 | port: inPort, 787 | uuid: inUUID, 788 | actionInfo: inActionInfo, 789 | applicationInfo: inApplicationInfo, 790 | messageType: inMessageType 791 | }); 792 | }; 793 | 794 | websocket.onerror = function (evt) { 795 | console.warn('WEBOCKET ERROR', evt, evt.data); 796 | }; 797 | 798 | websocket.onclose = function (evt) { 799 | // Websocket is closed 800 | var reason = WEBSOCKETERROR(evt); 801 | console.warn( 802 | '[STREAMDECK]***** WEBOCKET CLOSED **** reason:', 803 | reason 804 | ); 805 | }; 806 | 807 | websocket.onmessage = function (evt) { 808 | var jsonObj = Utils.parseJson(evt.data), 809 | m; 810 | 811 | // console.log('[STREAMDECK] websocket.onmessage ... ', jsonObj.event, jsonObj); 812 | 813 | if (!jsonObj.hasOwnProperty('action')) { 814 | m = jsonObj.event; 815 | // console.log('%c%s', 'color: white; background: red; font-size: 12px;', '[common.js]onmessage:', m); 816 | } else { 817 | switch (inMessageType) { 818 | case 'registerPlugin': 819 | m = jsonObj['action'] + '.' + jsonObj['event']; 820 | break; 821 | case 'registerPropertyInspector': 822 | m = 'sendToPropertyInspector'; 823 | break; 824 | default: 825 | console.log('%c%s', 'color: white; background: red; font-size: 12px;', '[STREAMDECK] websocket.onmessage +++++++++ PROBLEM ++++++++'); 826 | console.warn('UNREGISTERED MESSAGETYPE:', inMessageType); 827 | } 828 | } 829 | 830 | if (m && m !== '') 831 | events.emit(m, jsonObj); 832 | }; 833 | 834 | instance.connection = websocket; 835 | } 836 | 837 | return { 838 | // *** PUBLIC *** 839 | 840 | uuid: inUUID, 841 | on: events.on, 842 | emit: events.emit, 843 | connection: websocket, 844 | connect: connect, 845 | api: null, 846 | logger: logger 847 | }; 848 | } 849 | 850 | return { 851 | getInstance: function () { 852 | if (!instance) { 853 | instance = init(); 854 | } 855 | return instance; 856 | } 857 | }; 858 | })(); 859 | 860 | // eslint-disable-next-line no-unused-vars 861 | function initializeControlCenterClient () { 862 | const settings = Object.assign(REMOTESETTINGS || {}, { debug: false }); 863 | var $CC = new ControlCenterClient(settings); 864 | window['$CC'] = $CC; 865 | return $CC; 866 | } 867 | 868 | /** ELGEvents 869 | * Publish/Subscribe pattern to quickly signal events to 870 | * the plugin, property inspector and data. 871 | */ 872 | 873 | const ELGEvents = { 874 | eventEmitter: function (name, fn) { 875 | const eventList = new Map(); 876 | 877 | const on = (name, fn) => { 878 | if (!eventList.has(name)) eventList.set(name, ELGEvents.pubSub()); 879 | 880 | return eventList.get(name).sub(fn); 881 | }; 882 | 883 | const has = (name) => 884 | eventList.has(name); 885 | 886 | const emit = (name, data) => 887 | eventList.has(name) && eventList.get(name).pub(data); 888 | 889 | return Object.freeze({ on, has, emit, eventList }); 890 | }, 891 | 892 | pubSub: function pubSub () { 893 | const subscribers = new Set(); 894 | 895 | const sub = fn => { 896 | subscribers.add(fn); 897 | return () => { 898 | subscribers.delete(fn); 899 | }; 900 | }; 901 | 902 | const pub = data => subscribers.forEach(fn => fn(data)); 903 | return Object.freeze({ pub, sub }); 904 | } 905 | }; 906 | 907 | /** SDApi 908 | * This ist the main API to communicate between plugin, property inspector and 909 | * application host. 910 | * Internal functions: 911 | * - setContext: sets the context of the current plugin 912 | * - exec: prepare the correct JSON structure and send 913 | * 914 | * Methods exposed in the $SD.api alias 915 | * Messages send from the plugin 916 | * ----------------------------- 917 | * - showAlert 918 | * - showOK 919 | * - setSettings 920 | * - setTitle 921 | * - setImage 922 | * - sendToPropertyInspector 923 | * 924 | * Messages send from Property Inspector 925 | * ------------------------------------- 926 | * - sendToPlugin 927 | * 928 | * Messages received in the plugin 929 | * ------------------------------- 930 | * willAppear 931 | * willDisappear 932 | * keyDown 933 | * keyUp 934 | */ 935 | 936 | const SDApi = { 937 | send: function (context, fn, payload, debug) { 938 | /** Combine the passed JSON with the name of the event and it's context 939 | * If the payload contains 'event' or 'context' keys, it will overwrite existing 'event' or 'context'. 940 | * This function is non-mutating and thereby creates a new object containing 941 | * all keys of the original JSON objects. 942 | */ 943 | const pl = Object.assign({}, { event: fn, context: context }, payload); 944 | 945 | /** Check, if we have a connection, and if, send the JSON payload */ 946 | if (debug) { 947 | console.log('-----SDApi.send-----'); 948 | console.log('context', context); 949 | console.log(pl); 950 | console.log(payload.payload); 951 | console.log(JSON.stringify(payload.payload)); 952 | console.log('-------'); 953 | } 954 | $SD.connection && $SD.connection.sendJSON(pl); 955 | 956 | /** 957 | * DEBUG-Utility to quickly show the current payload in the Property Inspector. 958 | */ 959 | 960 | if ( 961 | $SD.connection && 962 | [ 963 | 'sendToPropertyInspector', 964 | 'showOK', 965 | 'showAlert', 966 | 'setSettings' 967 | ].indexOf(fn) === -1 968 | ) { 969 | // console.log("send.sendToPropertyInspector", payload); 970 | // this.sendToPropertyInspector(context, typeof payload.payload==='object' ? JSON.stringify(payload.payload) : JSON.stringify({'payload':payload.payload}), pl['action']); 971 | } 972 | }, 973 | 974 | registerPlugin: { 975 | 976 | /** Messages send from the plugin */ 977 | showAlert: function (context) { 978 | SDApi.send(context, 'showAlert', {}); 979 | }, 980 | 981 | showOk: function (context) { 982 | SDApi.send(context, 'showOk', {}); 983 | }, 984 | 985 | 986 | setState: function (context, payload) { 987 | SDApi.send(context, 'setState', { 988 | payload: { 989 | 'state': 1 - Number(payload === 0) 990 | } 991 | }); 992 | }, 993 | 994 | setTitle: function (context, title, target) { 995 | SDApi.send(context, 'setTitle', { 996 | payload: { 997 | title: '' + title || '', 998 | target: target || DestinationEnum.HARDWARE_AND_SOFTWARE 999 | } 1000 | }); 1001 | }, 1002 | 1003 | setImage: function (context, img, target) { 1004 | SDApi.send(context, 'setImage', { 1005 | payload: { 1006 | image: img || '', 1007 | target: target || DestinationEnum.HARDWARE_AND_SOFTWARE 1008 | } 1009 | }); 1010 | }, 1011 | 1012 | sendToPropertyInspector: function (context, payload, action) { 1013 | SDApi.send(context, 'sendToPropertyInspector', { 1014 | action: action, 1015 | payload: payload 1016 | }); 1017 | }, 1018 | 1019 | showUrl2: function (context, urlToOpen) { 1020 | SDApi.send(context, 'openUrl', { 1021 | payload: { 1022 | url: urlToOpen 1023 | } 1024 | }); 1025 | } 1026 | }, 1027 | 1028 | /** Messages send from Property Inspector */ 1029 | 1030 | registerPropertyInspector: { 1031 | 1032 | sendToPlugin: function (piUUID, action, payload) { 1033 | SDApi.send( 1034 | piUUID, 1035 | 'sendToPlugin', 1036 | { 1037 | action: action, 1038 | payload: payload || {} 1039 | }, 1040 | false 1041 | ); 1042 | } 1043 | }, 1044 | 1045 | /** COMMON */ 1046 | 1047 | common: { 1048 | 1049 | getSettings: function (context, payload) { 1050 | SDApi.send(context, 'getSettings', {}); 1051 | }, 1052 | 1053 | setSettings: function (context, payload) { 1054 | SDApi.send(context, 'setSettings', { 1055 | payload: payload 1056 | }); 1057 | }, 1058 | 1059 | getGlobalSettings: function (context, payload) { 1060 | SDApi.send(context, 'getGlobalSettings', {}); 1061 | }, 1062 | 1063 | setGlobalSettings: function (context, payload) { 1064 | SDApi.send(context, 'setGlobalSettings', { 1065 | payload: payload 1066 | }); 1067 | }, 1068 | 1069 | logMessage: function () { 1070 | /** 1071 | * for logMessage we don't need a context, so we allow both 1072 | * logMessage(unneededContext, 'message') 1073 | * and 1074 | * logMessage('message') 1075 | */ 1076 | 1077 | let payload = (arguments.length > 1) ? arguments[1] : arguments[0]; 1078 | 1079 | SDApi.send(null, 'logMessage', { 1080 | payload: { 1081 | message: payload 1082 | } 1083 | }); 1084 | }, 1085 | 1086 | openUrl: function (context, urlToOpen) { 1087 | SDApi.send(context, 'openUrl', { 1088 | payload: { 1089 | url: urlToOpen 1090 | } 1091 | }); 1092 | }, 1093 | 1094 | test: function () { 1095 | console.log(this); 1096 | console.log(SDApi); 1097 | }, 1098 | 1099 | debugPrint: function (context, inString) { 1100 | // console.log("------------ DEBUGPRINT"); 1101 | // console.log([].slice.apply(arguments).join()); 1102 | // console.log("------------ DEBUGPRINT"); 1103 | SDApi.send(context, 'debugPrint', { 1104 | payload: [].slice.apply(arguments).join('.') || '' 1105 | }); 1106 | }, 1107 | 1108 | dbgSend: function (fn, context) { 1109 | /** lookup if an appropriate function exists */ 1110 | if ($SD.connection && this[fn] && typeof this[fn] === 'function') { 1111 | /** verify if type of payload is an object/json */ 1112 | const payload = this[fn](); 1113 | if (typeof payload === 'object') { 1114 | Object.assign({ event: fn, context: context }, payload); 1115 | $SD.connection && $SD.connection.sendJSON(payload); 1116 | } 1117 | } 1118 | console.log(this, fn, typeof this[fn], this[fn]()); 1119 | } 1120 | 1121 | } 1122 | }; 1123 | 1124 | /** SDDebug 1125 | * Utility to log the JSON structure of an incoming object 1126 | */ 1127 | 1128 | const SDDebug = { 1129 | logger: function (name, fn) { 1130 | const logEvent = jsn => { 1131 | console.log('____SDDebug.logger.logEvent'); 1132 | console.log(jsn); 1133 | debugLog('-->> Received Obj:', jsn); 1134 | debugLog('jsonObj', jsn); 1135 | debugLog('event', jsn['event']); 1136 | debugLog('actionType', jsn['actionType']); 1137 | debugLog('settings', jsn['settings']); 1138 | debugLog('coordinates', jsn['coordinates']); 1139 | debugLog('---'); 1140 | }; 1141 | 1142 | const logSomething = jsn => 1143 | console.log('____SDDebug.logger.logSomething'); 1144 | 1145 | return { logEvent, logSomething }; 1146 | } 1147 | }; 1148 | 1149 | /** 1150 | * This is the instance of the StreamDeck object. 1151 | * There's only one StreamDeck object, which carries 1152 | * connection parameters and handles communication 1153 | * to/from the software's PluginManager. 1154 | */ 1155 | 1156 | window.$SD = StreamDeck.getInstance(); 1157 | window.$SD.api = SDApi; 1158 | 1159 | function WEBSOCKETERROR (evt) { 1160 | // Websocket is closed 1161 | var reason = ''; 1162 | if (evt.code === 1000) { 1163 | reason = 'Normal Closure. The purpose for which the connection was established has been fulfilled.'; 1164 | } else if (evt.code === 1001) { 1165 | reason = 'Going Away. An endpoint is "going away", such as a server going down or a browser having navigated away from a page.'; 1166 | } else if (evt.code === 1002) { 1167 | reason = 'Protocol error. An endpoint is terminating the connection due to a protocol error'; 1168 | } else if (evt.code === 1003) { 1169 | reason = "Unsupported Data. An endpoint received a type of data it doesn't support."; 1170 | } else if (evt.code === 1004) { 1171 | reason = '--Reserved--. The specific meaning might be defined in the future.'; 1172 | } else if (evt.code === 1005) { 1173 | reason = 'No Status. No status code was actually present.'; 1174 | } else if (evt.code === 1006) { 1175 | reason = 'Abnormal Closure. The connection was closed abnormally, e.g., without sending or receiving a Close control frame'; 1176 | } else if (evt.code === 1007) { 1177 | reason = 'Invalid frame payload data. The connection was closed, because the received data was not consistent with the type of the message (e.g., non-UTF-8 [http://tools.ietf.org/html/rfc3629]).'; 1178 | } else if (evt.code === 1008) { 1179 | reason = 'Policy Violation. The connection was closed, because current message data "violates its policy". This reason is given either if there is no other suitable reason, or if there is a need to hide specific details about the policy.'; 1180 | } else if (evt.code === 1009) { 1181 | reason = 'Message Too Big. Connection closed because the message is too big for it to process.'; 1182 | } else if (evt.code === 1010) { // Note that this status code is not used by the server, because it can fail the WebSocket handshake instead. 1183 | reason = "Mandatory Ext. Connection is terminated the connection because the server didn't negotiate one or more extensions in the WebSocket handshake.
Mandatory extensions were: " + evt.reason; 1184 | } else if (evt.code === 1011) { 1185 | reason = 'Internl Server Error. Connection closed because it encountered an unexpected condition that prevented it from fulfilling the request.'; 1186 | } else if (evt.code === 1015) { 1187 | reason = "TLS Handshake. The connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified)."; 1188 | } else { 1189 | reason = 'Unknown reason'; 1190 | } 1191 | 1192 | return reason; 1193 | } 1194 | 1195 | const SOCKETERRORS = { 1196 | '0': 'The connection has not yet been established', 1197 | '1': 'The connection is established and communication is possible', 1198 | '2': 'The connection is going through the closing handshake', 1199 | '3': 'The connection has been closed or could not be opened' 1200 | }; 1201 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/js/common_pi.js: -------------------------------------------------------------------------------- 1 | /** Stream Deck software passes system-highlight color information 2 | * to Property Inspector. Here we 'inject' the CSS styles into the DOM 3 | * when we receive this information. */ 4 | 5 | function addDynamicStyles (clrs, fromWhere) { 6 | // console.log("addDynamicStyles", clrs.highlightColor, clrs.highlightColor.slice(0, 7)); 7 | const node = document.getElementById('#sdpi-dynamic-styles') || document.createElement('style'); 8 | if (!clrs.mouseDownColor) clrs.mouseDownColor = Utils.fadeColor(clrs.highlightColor, -100); 9 | const clr = clrs.highlightColor.slice(0, 7); 10 | const clr1 = Utils.fadeColor(clr, 100); 11 | const clr2 = Utils.fadeColor(clr, 60); 12 | const metersActiveColor = Utils.fadeColor(clr, -60); 13 | 14 | // console.log("%c ", `background-color: #${clr}`, 'addDS', clr); 15 | // console.log("%c ", `background-color: #${clr1}`, 'addDS1', clr1); 16 | // console.log("%c ", `background-color: #${clr2}`, 'addDS2', clr2); 17 | // console.log("%c ", `background-color: #${metersActiveColor}`, 'metersActiveColor', metersActiveColor); 18 | 19 | node.setAttribute('id', 'sdpi-dynamic-styles'); 20 | node.innerHTML = ` 21 | 22 | input[type="radio"]:checked + label span, 23 | input[type="checkbox"]:checked + label span { 24 | background-color: ${clrs.highlightColor}; 25 | } 26 | 27 | input[type="radio"]:active:checked + label span, 28 | input[type="checkbox"]:active:checked + label span { 29 | background-color: ${clrs.mouseDownColor}; 30 | } 31 | 32 | input[type="radio"]:active + label span, 33 | input[type="checkbox"]:active + label span { 34 | background-color: ${clrs.buttonPressedBorderColor}; 35 | } 36 | 37 | td.selected, 38 | td.selected:hover, 39 | li.selected:hover, 40 | li.selected { 41 | color: white; 42 | background-color: ${clrs.highlightColor}; 43 | } 44 | 45 | .sdpi-file-label > label:active, 46 | .sdpi-file-label.file:active, 47 | label.sdpi-file-label:active, 48 | label.sdpi-file-info:active, 49 | input[type="file"]::-webkit-file-upload-button:active, 50 | button:active { 51 | border: 1pt solid ${clrs.buttonPressedBorderColor}; 52 | background-color: ${clrs.buttonPressedBackgroundColor}; 53 | color: ${clrs.buttonPressedTextColor}; 54 | border-color: ${clrs.buttonPressedBorderColor}; 55 | } 56 | 57 | ::-webkit-progress-value, 58 | meter::-webkit-meter-optimum-value { 59 | background: linear-gradient(${clr2}, ${clr1} 20%, ${clr} 45%, ${clr} 55%, ${clr2}) 60 | } 61 | 62 | ::-webkit-progress-value:active, 63 | meter::-webkit-meter-optimum-value:active { 64 | background: linear-gradient(${clr}, ${clr2} 20%, ${metersActiveColor} 45%, ${metersActiveColor} 55%, ${clr}) 65 | } 66 | `; 67 | document.body.appendChild(node); 68 | }; 69 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/js/index_pi.js: -------------------------------------------------------------------------------- 1 | /* global addDynamicStyles, $SD, Utils */ 2 | /* eslint-disable no-extra-boolean-cast */ 3 | /* eslint-disable no-else-return */ 4 | 5 | /** 6 | * This example contains a working Property Inspector, which already communicates 7 | * with the corresponding plugin throug settings and/or direct messages. 8 | * If you want to use other control-types, we recommend copy/paste these from the 9 | * PISamples demo-library, which already contains quite some example DOM elements 10 | */ 11 | 12 | 13 | /** 14 | * First we declare a global variable, which change all elements behaviour 15 | * globally. It installs the 'onchange' or 'oninput' event on the HTML controls and fiels. 16 | * 17 | * Change this, if you want interactive elements act on any modification (oninput), 18 | * or while their value changes 'onchange'. 19 | */ 20 | 21 | var onchangeevt = 'oninput'; 22 | 23 | /** 24 | * cache the static SDPI-WRAPPER, which contains all your HTML elements. 25 | * Please make sure, you put all HTML-elemenets into this wrapper, so they 26 | * are drawn properly using the integrated CSS. 27 | */ 28 | 29 | let sdpiWrapper = document.querySelector('.sdpi-wrapper'); 30 | 31 | /** 32 | * Since the Property Inspector is instantiated every time you select a key 33 | * in Stream Deck software, we can savely cache our settings in a global variable. 34 | */ 35 | 36 | let settings; 37 | 38 | /** 39 | * The 'connected' event is the first event sent to Property Inspector, after it's instance 40 | * is registered with Stream Deck software. It carries the current websocket, settings, 41 | * and other information about the current environmet in a JSON object. 42 | * You can use it to subscribe to events you want to use in your plugin. 43 | */ 44 | 45 | $SD.on('connected', (jsn) => { 46 | /** 47 | * The passed 'applicationInfo' object contains various information about your 48 | * computer, Stream Deck version and OS-settings (e.g. colors as set in your 49 | * OSes display preferences.) 50 | * We use this to inject some dynamic CSS values (saved in 'common_pi.js'), to allow 51 | * drawing proper highlight-colors or progressbars. 52 | */ 53 | 54 | console.log("connected"); 55 | addDynamicStyles($SD.applicationInfo.colors, 'connectSocket'); 56 | 57 | /** 58 | * Current settings are passed in the JSON node 59 | * {actionInfo: { 60 | * payload: { 61 | * settings: { 62 | * yoursetting: yourvalue, 63 | * otherthings: othervalues 64 | * ... 65 | * To conveniently read those settings, we have a little utility to read 66 | * arbitrary values from a JSON object, eg: 67 | * 68 | * const foundObject = Utils.getProp(JSON-OBJECT, 'path.to.target', defaultValueIfNotFound) 69 | */ 70 | 71 | settings = Utils.getProp(jsn, 'actionInfo.payload.settings', false); 72 | if (settings) { 73 | updateUI(settings); 74 | } 75 | autosizeTextareas(); 76 | }); 77 | 78 | /** 79 | * The 'sendToPropertyInspector' event can be used to send messages directly from your plugin 80 | * to the Property Inspector without saving these messages to the settings. 81 | */ 82 | 83 | $SD.on('sendToPropertyInspector', jsn => { 84 | const pl = jsn.payload; 85 | /** 86 | * This is an example, how you could show an error to the user 87 | */ 88 | if (pl.hasOwnProperty('error')) { 89 | sdpiWrapper.innerHTML = `
90 |
91 | ${pl.error} 92 | ${pl.hasOwnProperty('info') ? pl.info : ''} 93 |
94 |
`; 95 | } else { 96 | 97 | /** 98 | * 99 | * Do something with the data sent from the plugin 100 | * e.g. update some elements in the Property Inspector's UI. 101 | * 102 | */ 103 | } 104 | }); 105 | 106 | const updateUI = (pl) => { 107 | Object.keys(pl).map(e => { 108 | if (e && e != '') { 109 | const foundElement = document.querySelector(`#${e}`); 110 | console.log(`searching for: #${e}`, 'found:', foundElement); 111 | if (foundElement && foundElement.type !== 'file') { 112 | foundElement.value = pl[e]; 113 | const maxl = foundElement.getAttribute('maxlength') || 50; 114 | const labels = document.querySelectorAll(`[for='${foundElement.id}']`); 115 | if (labels.length) { 116 | for (let x of labels) { 117 | x.textContent = maxl ? `${foundElement.value.length}/${maxl}` : `${foundElement.value.length}`; 118 | } 119 | } 120 | } 121 | } 122 | }) 123 | } 124 | 125 | /** 126 | * Something in the PI changed: 127 | * either you clicked a button, dragged a slider or entered some text 128 | * 129 | * The 'piDataChanged' event is sent, if data-changes are detected. 130 | * The changed data are collected in a JSON structure 131 | * 132 | * It looks like this: 133 | * 134 | * { 135 | * checked: false 136 | * group: false 137 | * index: 0 138 | * key: "mynameinput" 139 | * selection: [] 140 | * value: "Elgato" 141 | * } 142 | * 143 | * If you set an 'id' to an input-element, this will get the 'key' of this object. 144 | * The input's value will get the value. 145 | * There are other fields (e.g. 146 | * - 'checked' if you clicked a checkbox 147 | * - 'index', if you clicked an element within a group of other elements 148 | * - 'selection', if the element allows multiple-selections 149 | * ) 150 | * 151 | * Please note: 152 | * the template creates this object for the most common HTML input-controls. 153 | * This is a convenient way to start interacting with your plugin quickly. 154 | * 155 | */ 156 | 157 | $SD.on('piDataChanged', (returnValue) => { 158 | 159 | console.log('%c%s', 'color: white; background: blue}; font-size: 15px;', 'piDataChanged'); 160 | console.log(returnValue); 161 | 162 | if (returnValue.key === 'clickme') { 163 | 164 | postMessage = (w) => { 165 | w.postMessage( 166 | Object.assign({}, $SD.applicationInfo.application, {action: $SD.actionInfo.action}) 167 | ,'*'); 168 | } 169 | 170 | if (!window.xtWindow || window.xtWindow.closed) { 171 | window.xtWindow = window.open('../externalWindow.html', 'External Window'); 172 | setTimeout(() => postMessage(window.xtWindow), 200); 173 | } else { 174 | postMessage(window.xtWindow); 175 | } 176 | 177 | } else { 178 | 179 | /* SAVE THE VALUE TO SETTINGS */ 180 | saveSettings(returnValue); 181 | 182 | /* SEND THE VALUES TO PLUGIN */ 183 | sendValueToPlugin(returnValue, 'sdpi_collection'); 184 | } 185 | }); 186 | 187 | /** 188 | * Resize textareas to fit their content. 189 | * This is intended to be run once when the content is loaded. 190 | */ 191 | function autosizeTextareas() { 192 | document.querySelectorAll('textarea').forEach(elem => { 193 | elem.style.boxSizing = 'border-box'; 194 | elem.style.minHeight = elem.offsetHeight + 'px'; 195 | elem.style.height = elem.scrollHeight + 'px'; 196 | }); 197 | } 198 | 199 | /** 200 | * Below are a bunch of helpers to make your DOM interactive 201 | * The will cover changes of the most common elements in your DOM 202 | * and send their value to the plugin on a change. 203 | * To accomplish this, the 'handleSdpiItemChange' method tries to find the 204 | * nearest element 'id' and the corresponding value of the element(along with 205 | * some other information you might need) . It then puts everything in a 206 | * 'sdpi_collection', where the 'id' will get the 'key' and the 'value' will get the 'value'. 207 | * 208 | * In the plugin you just need to listen for 'sdpi_collection' in the sent JSON.payload 209 | * and save the values you need in your settings (or StreamDeck-settings for persistence). 210 | * 211 | * In this template those key/value pairs are saved automatically persistently to StreamDeck. 212 | * Open the console in the remote debugger to inspect what's getting saved. 213 | * 214 | */ 215 | 216 | function saveSettings(sdpi_collection) { 217 | 218 | if (typeof sdpi_collection !== 'object') return; 219 | 220 | if (sdpi_collection.hasOwnProperty('key') && sdpi_collection.key != '') { 221 | if (sdpi_collection.value !== undefined) { 222 | console.log(sdpi_collection.key, " => ", sdpi_collection.value); 223 | settings[sdpi_collection.key] = sdpi_collection.value; 224 | console.log('setSettings....', settings); 225 | $SD.api.setSettings($SD.uuid, settings); 226 | } 227 | } 228 | } 229 | 230 | /** 231 | * 'sendValueToPlugin' is a wrapper to send some values to the plugin 232 | * 233 | * It is called with a value and the name of a property: 234 | * 235 | * sendValueToPlugin(), 'key-property') 236 | * 237 | * where 'key-property' is the property you listen for in your plugin's 238 | * 'sendToPlugin' events payload. 239 | * 240 | */ 241 | 242 | function sendValueToPlugin(value, prop) { 243 | console.log("sendValueToPlugin", value, prop); 244 | if ($SD.connection && $SD.connection.readyState === 1) { 245 | const json = { 246 | action: $SD.actionInfo['action'], 247 | event: 'sendToPlugin', 248 | context: $SD.uuid, 249 | payload: { 250 | [prop]: value, 251 | targetContext: $SD.actionInfo['context'] 252 | } 253 | }; 254 | 255 | $SD.connection.send(JSON.stringify(json)); 256 | } 257 | } 258 | 259 | /** CREATE INTERACTIVE HTML-DOM 260 | * The 'prepareDOMElements' helper is called, to install events on all kinds of 261 | * elements (as seen e.g. in PISamples) 262 | * Elements can get clicked or act on their 'change' or 'input' event. (see at the top 263 | * of this file) 264 | * Messages are then processed using the 'handleSdpiItemChange' method below. 265 | * If you use common elements, you don't need to touch these helpers. Just take care 266 | * setting an 'id' on the element's input-control from which you want to get value(s). 267 | * These helpers allow you to quickly start experimenting and exchanging values with 268 | * your plugin. 269 | */ 270 | 271 | function prepareDOMElements(baseElement) { 272 | baseElement = baseElement || document; 273 | Array.from(baseElement.querySelectorAll('.sdpi-item-value')).forEach( 274 | (el, i) => { 275 | const elementsToClick = [ 276 | 'BUTTON', 277 | 'OL', 278 | 'UL', 279 | 'TABLE', 280 | 'METER', 281 | 'PROGRESS', 282 | 'CANVAS' 283 | ].includes(el.tagName); 284 | const evt = elementsToClick ? 'onclick' : onchangeevt || 'onchange'; 285 | 286 | /** Look for combinations, where we consider the span as label for the input 287 | * we don't use `labels` for that, because a range could have 2 labels. 288 | */ 289 | const inputGroup = el.querySelectorAll('input + span'); 290 | if (inputGroup.length === 2) { 291 | const offs = inputGroup[0].tagName === 'INPUT' ? 1 : 0; 292 | inputGroup[offs].textContent = inputGroup[1 - offs].value; 293 | inputGroup[1 - offs]['oninput'] = function() { 294 | inputGroup[offs].textContent = inputGroup[1 - offs].value; 295 | }; 296 | } 297 | /** We look for elements which have an 'clickable' attribute 298 | * we use these e.g. on an 'inputGroup' () to adjust the value of 299 | * the corresponding range-control 300 | */ 301 | Array.from(el.querySelectorAll('.clickable')).forEach( 302 | (subel, subi) => { 303 | subel['onclick'] = function(e) { 304 | handleSdpiItemChange(e.target, subi); 305 | }; 306 | } 307 | ); 308 | /** Just in case the found HTML element already has an input or change - event attached, 309 | * we clone it, and call it in the callback, right before the freshly attached event 310 | */ 311 | const cloneEvt = el[evt]; 312 | el[evt] = function(e) { 313 | if (cloneEvt) cloneEvt(); 314 | handleSdpiItemChange(e.target, i); 315 | }; 316 | } 317 | ); 318 | 319 | /** 320 | * You could add a 'label' to a textares, e.g. to show the number of charactes already typed 321 | * or contained in the textarea. This helper updates this label for you. 322 | */ 323 | baseElement.querySelectorAll('textarea').forEach((e) => { 324 | const maxl = e.getAttribute('maxlength'); 325 | e.targets = baseElement.querySelectorAll(`[for='${e.id}']`); 326 | if (e.targets.length) { 327 | let fn = () => { 328 | for (let x of e.targets) { 329 | x.textContent = maxl ? `${e.value.length}/${maxl}` : `${e.value.length}`; 330 | } 331 | }; 332 | fn(); 333 | e.onkeyup = fn; 334 | } 335 | }); 336 | 337 | baseElement.querySelectorAll('[data-open-url').forEach(e => { 338 | const value = e.getAttribute('data-open-url'); 339 | if (value) { 340 | e.onclick = () => { 341 | let path; 342 | if (value.indexOf('http') !== 0) { 343 | path = document.location.href.split('/'); 344 | path.pop(); 345 | path.push(value.split('/').pop()); 346 | path = path.join('/'); 347 | } else { 348 | path = value; 349 | } 350 | $SD.api.openUrl($SD.uuid, path); 351 | }; 352 | } else { 353 | console.log(`${value} is not a supported url`); 354 | } 355 | }); 356 | } 357 | 358 | function handleSdpiItemChange(e, idx) { 359 | 360 | /** Following items are containers, so we won't handle clicks on them */ 361 | 362 | if (['OL', 'UL', 'TABLE'].includes(e.tagName)) { 363 | return; 364 | } 365 | 366 | /** SPANS are used inside a control as 'labels' 367 | * If a SPAN element calls this function, it has a class of 'clickable' set and is thereby handled as 368 | * clickable label. 369 | */ 370 | 371 | if (e.tagName === 'SPAN') { 372 | const inp = e.parentNode.querySelector('input'); 373 | var tmpValue; 374 | 375 | // if there's no attribute set for the span, try to see, if there's a value in the textContent 376 | // and use it as value 377 | if (!e.hasAttribute('value')) { 378 | tmpValue = Number(e.textContent); 379 | if (typeof tmpValue === 'number' && tmpValue !== null) { 380 | e.setAttribute('value', 0+tmpValue); // this is ugly, but setting a value of 0 on a span doesn't do anything 381 | e.value = tmpValue; 382 | } 383 | } else { 384 | tmpValue = Number(e.getAttribute('value')); 385 | } 386 | 387 | if (inp && tmpValue !== undefined) { 388 | inp.value = tmpValue; 389 | } else return; 390 | } 391 | 392 | const selectedElements = []; 393 | const isList = ['LI', 'OL', 'UL', 'DL', 'TD'].includes(e.tagName); 394 | const sdpiItem = e.closest('.sdpi-item'); 395 | const sdpiItemGroup = e.closest('.sdpi-item-group'); 396 | let sdpiItemChildren = isList 397 | ? sdpiItem.querySelectorAll(e.tagName === 'LI' ? 'li' : 'td') 398 | : sdpiItem.querySelectorAll('.sdpi-item-child > input'); 399 | 400 | if (isList) { 401 | const siv = e.closest('.sdpi-item-value'); 402 | if (!siv.classList.contains('multi-select')) { 403 | for (let x of sdpiItemChildren) x.classList.remove('selected'); 404 | } 405 | if (!siv.classList.contains('no-select')) { 406 | e.classList.toggle('selected'); 407 | } 408 | } 409 | 410 | if (sdpiItemChildren.length && ['radio','checkbox'].includes(sdpiItemChildren[0].type)) { 411 | e.setAttribute('_value', e.checked); //'_value' has priority over .value 412 | } 413 | if (sdpiItemGroup && !sdpiItemChildren.length) { 414 | for (let x of ['input', 'meter', 'progress']) { 415 | sdpiItemChildren = sdpiItemGroup.querySelectorAll(x); 416 | if (sdpiItemChildren.length) break; 417 | } 418 | } 419 | 420 | if (e.selectedIndex) { 421 | idx = e.selectedIndex; 422 | } else { 423 | sdpiItemChildren.forEach((ec, i) => { 424 | if (ec.classList.contains('selected')) { 425 | selectedElements.push(ec.textContent); 426 | } 427 | if (ec === e) { 428 | idx = i; 429 | selectedElements.push(ec.value); 430 | } 431 | }); 432 | } 433 | 434 | const returnValue = { 435 | key: e.id && e.id.charAt(0) !== '_' ? e.id : sdpiItem.id, 436 | value: isList 437 | ? e.textContent 438 | : e.hasAttribute('_value') 439 | ? e.getAttribute('_value') 440 | : e.value 441 | ? e.type === 'file' 442 | ? decodeURIComponent(e.value.replace(/^C:\\fakepath\\/, '')) 443 | : e.value 444 | : e.getAttribute('value'), 445 | group: sdpiItemGroup ? sdpiItemGroup.id : false, 446 | index: idx, 447 | selection: selectedElements, 448 | checked: e.checked 449 | }; 450 | 451 | /** Just simulate the original file-selector: 452 | * If there's an element of class '.sdpi-file-info' 453 | * show the filename there 454 | */ 455 | if (e.type === 'file') { 456 | const info = sdpiItem.querySelector('.sdpi-file-info'); 457 | if (info) { 458 | const s = returnValue.value.split('/').pop(); 459 | info.textContent = s.length > 28 460 | ? s.substr(0, 10) 461 | + '...' 462 | + s.substr(s.length - 10, s.length) 463 | : s; 464 | } 465 | } 466 | 467 | $SD.emit('piDataChanged', returnValue); 468 | } 469 | 470 | /** 471 | * This is a quick and simple way to localize elements and labels in the Property 472 | * Inspector's UI without touching their values. 473 | * It uses a quick 'lox()' function, which reads the strings from a global 474 | * variable 'localizedStrings' (in 'common.js') 475 | */ 476 | 477 | // eslint-disable-next-line no-unused-vars 478 | function localizeUI() { 479 | const el = document.querySelector('.sdpi-wrapper') || document; 480 | let t; 481 | Array.from(el.querySelectorAll('sdpi-item-label')).forEach(e => { 482 | t = e.textContent.lox(); 483 | if (e !== t) { 484 | e.innerHTML = e.innerHTML.replace(e.textContent, t); 485 | } 486 | }); 487 | Array.from(el.querySelectorAll('*:not(script)')).forEach(e => { 488 | if ( 489 | e.childNodes 490 | && e.childNodes.length > 0 491 | && e.childNodes[0].nodeValue 492 | && typeof e.childNodes[0].nodeValue === 'string' 493 | ) { 494 | t = e.childNodes[0].nodeValue.lox(); 495 | if (e.childNodes[0].nodeValue !== t) { 496 | e.childNodes[0].nodeValue = t; 497 | } 498 | } 499 | }); 500 | } 501 | 502 | /** 503 | * 504 | * Some more (de-) initialization helpers 505 | * 506 | */ 507 | 508 | document.addEventListener('DOMContentLoaded', function() { 509 | document.body.classList.add(navigator.userAgent.includes("Mac") ? 'mac' : 'win'); 510 | prepareDOMElements(); 511 | $SD.on('localizationLoaded', (language) => { 512 | localizeUI(); 513 | }); 514 | }); 515 | 516 | /** the beforeunload event is fired, right before the PI will remove all nodes */ 517 | window.addEventListener('beforeunload', function(e) { 518 | e.preventDefault(); 519 | sendValueToPlugin('propertyInspectorWillDisappear', 'property_inspector'); 520 | // Don't set a returnValue to the event, otherwise Chromium with throw an error. // e.returnValue = ''; 521 | }); 522 | 523 | function gotCallbackFromWindow(parameter) { 524 | console.log(parameter); 525 | } 526 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/propertyinspector/websocket.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | gg.datagram.web-requests.websocket 10 | 11 | 12 | 13 | 14 |
15 |
16 |
URL
17 | 18 |
19 | 20 |
21 |
Message
22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/svg/category.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 56 | :// 67 | 68 | 69 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/svg/http_action.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 56 | HTTP 72 | 73 | 74 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/svg/http_key.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 56 | 63 | http:// 74 | 75 | 76 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/svg/plugin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 53 | 57 | 64 | :// 75 | 76 | 77 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/svg/websocket_action.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 41 | 43 | 44 | 46 | image/svg+xml 47 | 49 | 50 | 51 | 52 | 56 | WS 67 | 68 | 69 | -------------------------------------------------------------------------------- /Sources/gg.datagram.web-requests.sdPlugin/svg/websocket_key.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 56 | 63 | ws:// 74 | 75 | 76 | -------------------------------------------------------------------------------- /render_images.ps1: -------------------------------------------------------------------------------- 1 | pushd Sources/gg.datagram.web-requests.sdPlugin 2 | mkdir images 3 | inkscape -w 20 -h 20 svg/http_action.svg -o images/http_action.png 4 | inkscape -w 40 -h 40 svg/http_action.svg -o images/http_action@2x.png 5 | inkscape -w 20 -h 20 svg/websocket_action.svg -o images/websocket_action.png 6 | inkscape -w 40 -h 40 svg/websocket_action.svg -o images/websocket_action@2x.png 7 | inkscape -w 72 -h 72 svg/http_key.svg -o images/http_key.png 8 | inkscape -w 144 -h 144 svg/http_key.svg -o images/http_key@2x.png 9 | inkscape -w 72 -h 72 svg/websocket_key.svg -o images/websocket_key.png 10 | inkscape -w 144 -h 144 svg/websocket_key.svg -o images/websocket_key@2x.png 11 | inkscape -w 28 -h 28 svg/category.svg -o images/category.png 12 | inkscape -w 56 -h 56 svg/category.svg -o images/category@2x.png 13 | inkscape -w 72 -h 72 svg/plugin.svg -o images/plugin.png 14 | inkscape -w 144 -h 144 svg/plugin.svg -o images/plugin@2x.png 15 | popd 16 | --------------------------------------------------------------------------------