diff --git a/README.md b/README.md new file mode 100644 index 0000000..e66d1f8 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# streamDeck-weatherPlugin +Plugin for StreamDeck to display weather info diff --git a/Release/com.jk.weather.streamDeckPlugin b/Release/com.jk.weather.streamDeckPlugin new file mode 100644 index 0000000..77e9ea7 Binary files /dev/null and b/Release/com.jk.weather.streamDeckPlugin differ diff --git a/Sources/com.jk.weather.sdPlugin/manifest.json b/Sources/com.jk.weather.sdPlugin/manifest.json new file mode 100644 index 0000000..046c5ae --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/manifest.json @@ -0,0 +1,41 @@ +{ + "Actions": [ + { + "Icon": "resources/actionIcon", + "Name": "Weather", + "States": [ + { + "Image": "resources/actionDefaultImage", + "TitleAlignment": "bottom", + "FontSize": "10" + } + ], + "SupportedInMultiActions": true, + "Tooltip": "Get current weather", + "UUID": "com.jk.weather.action" + } + ], + "SDKVersion": 2, + "Author": "Jaouher", + "CodePath": "plugin/main.html", + "Description": "Easily get a preview about the weather", + "Name": "Weather", + "Icon": "resources/pluginIcon", + "PropertyInspectorPath": "pi/main_pi.html", + "URL": "https://jk.com", + "Version": "2.0", + "OS": [ + { + "Platform": "mac", + "MinimumVersion" : "10.11" + }, + { + "Platform": "windows", + "MinimumVersion" : "10" + } + ], + "Software": + { + "MinimumVersion" : "4.1" + } + } diff --git a/Sources/com.jk.weather.sdPlugin/pi/caret.svg b/Sources/com.jk.weather.sdPlugin/pi/caret.svg new file mode 100644 index 0000000..5f5cc67 --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/pi/caret.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/Sources/com.jk.weather.sdPlugin/pi/main_pi.html b/Sources/com.jk.weather.sdPlugin/pi/main_pi.html new file mode 100644 index 0000000..e0e66ce --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/pi/main_pi.html @@ -0,0 +1,28 @@ + + + + + + com.jk.weather.pi + + + + + + + + + diff --git a/Sources/com.jk.weather.sdPlugin/pi/main_pi.js b/Sources/com.jk.weather.sdPlugin/pi/main_pi.js new file mode 100644 index 0000000..226af44 --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/pi/main_pi.js @@ -0,0 +1,100 @@ +let websocket = null, + uuid = null, + actionInfo = {}; + +function connectElgatoStreamDeckSocket(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) { + + uuid = inPropertyInspectorUUID; + actionInfo = JSON.parse(inActionInfo); + + websocket = new WebSocket('ws://localhost:' + inPort); + + websocket.onopen = function() + { + // WebSocket is connected, register the Property Inspector + let json = { + "event": inRegisterEvent, + "uuid": inPropertyInspectorUUID + }; + websocket.send(JSON.stringify(json)); + + json = { + "event": "getSettings", + "context": uuid, + }; + websocket.send(JSON.stringify(json)); + + json = { + "event": "getGlobalSettings", + "context": uuid, + }; + websocket.send(JSON.stringify(json)); + }; + + websocket.onmessage = function (evt) { + // Received message from Stream Deck + const jsonObj = JSON.parse(evt.data); + if (jsonObj.event === 'didReceiveSettings') { + const payload = jsonObj.payload.settings; + + document.getElementById('cityName').value = payload.cityName; + + if(document.getElementById('cityName').value === "undefined") { + document.getElementById('cityName').value = ""; + } + } + if (jsonObj.event === 'didReceiveGlobalSettings') { + const payload = jsonObj.payload.settings; + + document.getElementById('apiKey').value = payload.apiKey; + + if(document.getElementById('apiKey').value === "undefined") { + document.getElementById('apiKey').value = ""; + } + + const el = document.querySelector('.sdpi-wrapper'); + el && el.classList.remove('hidden'); + } + }; + +} + +function updateCityName() { + if (websocket && (websocket.readyState === 1)) { + let payload = {}; + payload.cityName = document.getElementById('cityName').value; + const json = { + "event": "setSettings", + "context": uuid, + "payload": payload + }; + websocket.send(JSON.stringify(json)); + console.log(json) + } +} + +function updateApiKey() { + if (websocket && (websocket.readyState === 1)) { + let payload = {}; + payload.apiKey = document.getElementById('apiKey').value; + const json = { + "event": "setGlobalSettings", + "context": uuid, + "payload": payload + }; + websocket.send(JSON.stringify(json)); + console.log(json) + } +} + +function openPage(site) { + if (websocket && (websocket.readyState === 1)) { + const json = { + 'event': 'openUrl', + 'payload': { + 'url': 'https://' + site + } + }; + websocket.send(JSON.stringify(json)); + } +} diff --git a/Sources/com.jk.weather.sdPlugin/pi/sdpi.css b/Sources/com.jk.weather.sdPlugin/pi/sdpi.css new file mode 100644 index 0000000..48549cf --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/pi/sdpi.css @@ -0,0 +1,1605 @@ +html { + --sdpi-bgcolor: #2D2D2D; + --sdpi-background: #3D3D3D; + --sdpi-color: #d8d8d8; + --sdpi-bordercolor: #3a3a3a; + --sdpi-borderradius: 0px; + --sdpi-width: 224px; + --sdpi-fontweight: 600; + --sdpi-letterspacing: -0.25pt; + height: 100%; + width: 100%; + overflow: hidden; + } + + html, body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 9pt; + background-color: var(--sdpi-bgcolor); + color: #9a9a9a; + } + + body { + height: 100%; + padding: 0; + overflow-x: hidden; + overflow-y: auto; + margin: 0; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + } + + mark { + background-color: var(--sdpi-bgcolor); + color: var(--sdpi-color); + } + + .hidden { + display: none; + } + + hr, hr2 { + -webkit-margin-before: 1em; + -webkit-margin-after: 1em; + border-style: none; + background: var(--sdpi-background); + height: 1px; + } + + hr2, + .sdpi-heading { + display: flex; + flex-basis: 100%; + align-items: center; + color: inherit; + font-size: 9pt; + margin: 8px 0px; + } + + .sdpi-heading::before, + .sdpi-heading::after { + content: ""; + flex-grow: 1; + background: var(--sdpi-background); + height: 1px; + font-size: 0px; + line-height: 0px; + margin: 0px 16px; + } + + hr2 { + height: 2px; + } + + hr, hr2 { + margin-left:16px; + margin-right:16px; + } + + .sdpi-item-value, + option, + input, + select, + button { + font-size: 10pt; + font-weight: var(--sdpi-fontweight); + letter-spacing: var(--sdpi-letterspacing); + } + + + + .win .sdpi-item-value, + .win option, + .win input, + .win select, + .win button { + font-size: 11px; + font-style: normal; + letter-spacing: inherit; + font-weight: 100; + } + + .win button { + font-size: 12px; + } + + ::-webkit-progress-value, + meter::-webkit-meter-optimum-value { + border-radius: 2px; + /* background: linear-gradient(#ccf, #99f 20%, #77f 45%, #77f 55%, #cdf); */ + } + + ::-webkit-progress-bar, + meter::-webkit-meter-bar { + border-radius: 3px; + background: var(--sdpi-background); + } + + ::-webkit-progress-bar:active, + meter::-webkit-meter-bar:active { + border-radius: 3px; + background: #222222; + } + ::-webkit-progress-value:active, + meter::-webkit-meter-optimum-value:active { + background: #99f; + } + + progress, + progress.sdpi-item-value { + min-height: 5px !important; + height: 5px; + background-color: #303030; + } + + progress { + margin-top: 8px !important; + margin-bottom: 8px !important; + } + + .full progress, + progress.full { + margin-top: 3px !important; + } + + ::-webkit-progress-inner-element { + background-color: transparent; + } + + + .sdpi-item[type="progress"] { + margin-top: 4px !important; + margin-bottom: 12px; + min-height: 15px; + } + + .sdpi-item-child.full:last-child { + margin-bottom: 4px; + } + + .tabs { + /** + * Setting display to flex makes this container lay + * out its children using flexbox, the exact same + * as in the above "Stepper input" example. + */ + display: flex; + + border-bottom: 1px solid #D7DBDD; + } + + .tab { + cursor: pointer; + padding: 5px 30px; + color: #16a2d7; + font-size: 9pt; + border-bottom: 2px solid transparent; + } + + .tab.is-tab-selected { + border-bottom-color: #4ebbe4; + } + + select { + -webkit-appearance: none; + -moz-appearance: none; + -o-appearance: none; + appearance: none; + background: url(caret.svg) no-repeat 97% center; + } + + label.sdpi-file-label, + input[type="button"], + input[type="submit"], + input[type="reset"], + input[type="file"], + input[type=file]::-webkit-file-upload-button, + button, + select { + color: var(--sdpi-color); + border: 1pt solid #303030; + font-size: 8pt; + background-color: var(--sdpi-background); + border-radius: var(--sdpi-borderradius); + } + + label.sdpi-file-label, + input[type="button"], + input[type="submit"], + input[type="reset"], + input[type="file"], + input[type=file]::-webkit-file-upload-button, + button { + border: 1pt solid var(--sdpi-color); + border-radius: var(--sdpi-borderradius); + min-height: 23px !important; + height: 23px !important; + margin-right: 8px; + } + + input[type=number]::-webkit-inner-spin-button, + input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + input[type="file"] { + border-radius: var(--sdpi-borderradius); + max-width: 220px; + } + + option { + height: 1.5em; + padding: 4px; + } + + /* SDPI */ + + .sdpi-wrapper { + overflow-x: hidden; + } + + .sdpi-item { + display: flex; + flex-direction: row; + min-height: 32px; + align-items: center; + margin-top: 2px; + max-width: 344px; + } + + .sdpi-item:first-child { + margin-top:1px; + } + + .sdpi-item:last-child { + margin-bottom: 0px; + } + + .sdpi-item > *:not(.sdpi-item-label):not(meter):not(details) { + min-height: 26px; + padding: 0px 4px 0px 4px; + } + + .sdpi-item > *:not(.sdpi-item-label.empty):not(meter) { + min-height: 26px; + padding: 0px 4px 0px 4px; + } + + + .sdpi-item-group { + padding: 0 !important; + } + + meter.sdpi-item-value { + margin-left: 6px; + } + + .sdpi-item[type="group"] { + display: block; + margin-top: 12px; + margin-bottom: 12px; + /* border: 1px solid white; */ + flex-direction: unset; + text-align: left; + } + + .sdpi-item[type="group"] > .sdpi-item-label, + .sdpi-item[type="group"].sdpi-item-label { + width: 96%; + text-align: left; + font-weight: 700; + margin-bottom: 4px; + padding-left: 4px; + } + + dl, + ul, + ol { + -webkit-margin-before: 0px; + -webkit-margin-after: 4px; + -webkit-padding-start: 1em; + max-height: 90px; + overflow-y: scroll; + cursor: pointer; + user-select: none; + } + + table.sdpi-item-value, + dl.sdpi-item-value, + ul.sdpi-item-value, + ol.sdpi-item-value { + -webkit-margin-before: 4px; + -webkit-margin-after: 8px; + -webkit-padding-start: 1em; + width: var(--sdpi-width); + text-align: center; + } + + table > caption { + margin: 2px; + } + + .list, + .sdpi-item[type="list"] { + align-items: baseline; + } + + .sdpi-item-label { + text-align: right; + flex: none; + width: 94px; + padding-right: 4px; + font-weight: 600; + -webkit-user-select: none; + } + + .win .sdpi-item-label, + .sdpi-item-label > small{ + font-weight: normal; + } + + .sdpi-item-label:after { + content: ": "; + } + + .sdpi-item-label.empty:after { + content: ""; + } + + .sdpi-test, + .sdpi-item-value { + flex: 1 0 0; + /* flex-grow: 1; + flex-shrink: 0; */ + margin-right: 14px; + margin-left: 4px; + justify-content: space-evenly; + } + + canvas.sdpi-item-value { + max-width: 144px; + max-height: 144px; + width: 144px; + height: 144px; + margin: 0 auto; + cursor: pointer; + } + + input.sdpi-item-value { + margin-left: 5px; + } + + .sdpi-item-value button, + button.sdpi-item-value { + margin-left: 7px; + margin-right: 19px; + } + + .sdpi-item-value.range { + margin-left: 0px; + } + + table, + dl.sdpi-item-value, + ul.sdpi-item-value, + ol.sdpi-item-value, + .sdpi-item-value > dl, + .sdpi-item-value > ul, + .sdpi-item-value > ol + { + list-style-type: none; + list-style-position: outside; + margin-left: -4px; + margin-right: -4px; + padding: 4px; + border: 1px solid var(--sdpi-bordercolor); + } + + dl.sdpi-item-value, + ul.sdpi-item-value, + ol.sdpi-item-value, + .sdpi-item-value > ol { + list-style-type: none; + list-style-position: inside; + margin-left: 5px; + margin-right: 12px; + padding: 4px !important; + } + + ol.sdpi-item-value, + .sdpi-item-value > ol[listtype="none"] { + list-style-type: none; + } + ol.sdpi-item-value[type="decimal"], + .sdpi-item-value > ol[type="decimal"] { + list-style-type: decimal; + } + + ol.sdpi-item-value[type="decimal-leading-zero"], + .sdpi-item-value > ol[type="decimal-leading-zero"] { + list-style-type: decimal-leading-zero; + } + + ol.sdpi-item-value[type="lower-alpha"], + .sdpi-item-value > ol[type="lower-alpha"] { + list-style-type: lower-alpha; + } + + ol.sdpi-item-value[type="upper-alpha"], + .sdpi-item-value > ol[type="upper-alpha"] { + list-style-type: upper-alpha; + } + + ol.sdpi-item-value[type="upper-roman"], + .sdpi-item-value > ol[type="upper-roman"] { + list-style-type: upper-roman; + } + + ol.sdpi-item-value[type="lower-roman"], + .sdpi-item-value > ol[type="lower-roman"] { + list-style-type: upper-roman; + } + + tr:nth-child(even), + .sdpi-item-value > ul > li:nth-child(even), + .sdpi-item-value > ol > li:nth-child(even), + li:nth-child(even) { + background-color: rgba(0,0,0,.2) + } + + td:hover, + .sdpi-item-value > ul > li:hover:nth-child(even), + .sdpi-item-value > ol > li:hover:nth-child(even), + li:hover:nth-child(even), + li:hover { + background-color: rgba(255,255,255,.1); + } + + td.selected, + td.selected:hover, + li.selected:hover, + li.selected { + color: white; + background-color: #77f; + } + + tr { + border: 1px solid var(--sdpi-bordercolor); + } + + td { + border-right: 1px solid var(--sdpi-bordercolor); + -webkit-user-select: none; + } + + tr:last-child, + td:last-child { + border: none; + } + + .sdpi-item-value.select, + .sdpi-item-value > select { + margin-right: 13px; + margin-left: 4px; + } + + .sdpi-item-child, + .sdpi-item-group > .sdpi-item > input[type="color"] { + margin-top: 0.4em; + margin-right: 4px; + } + + .full, + .full *, + .sdpi-item-value.full, + .sdpi-item-child > full > *, + .sdpi-item-child.full, + .sdpi-item-child.full > *, + .full > .sdpi-item-child, + .full > .sdpi-item-child > *{ + display: flex; + flex: 1 1 0; + margin-bottom: 4px; + margin-left: 0px; + width: 100%; + + justify-content: space-evenly; + } + + .sdpi-item-group > .sdpi-item > input[type="color"] { + margin-top: 0px; + } + + ::-webkit-calendar-picker-indicator:focus, + input[type=file]::-webkit-file-upload-button:focus, + button:focus, + textarea:focus, + input:focus, + select:focus, + option:focus, + details:focus, + summary:focus, + .custom-select select { + outline: none; + } + + summary { + cursor: default; + -webkit-user-select: none; + } + + .pointer, + summary .pointer { + cursor: pointer; + } + + details.message { + padding: 4px 18px 4px 12px; + } + + details.message summary { + font-size: 10pt; + font-weight: 600; + min-height: 18px; + } + + details.message:first-child { + margin-top: 4px; + margin-left: 0; + padding-left: 106px; + } + + details.message h1 { + text-align: left; + } + + .message > summary::-webkit-details-marker { + display: none; + } + + .info20, + .question, + .caution, + .info { + background-repeat: no-repeat; + background-position: 70px center; + } + + .info20 { + 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"); + } + + .info { + 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"); + } + + .info2 { + 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"); + } + + .sdpi-more-info { + 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"); + } + .caution { + 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"); + } + + .question { + 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"); + } + + + .sdpi-more-info { + position: fixed; + left: 0px; + right: 0px; + bottom: 0px; + min-height:16px; + padding-right: 16px; + text-align: right; + -webkit-touch-callout: none; + cursor: pointer; + user-select: none; + background-position: right center; + background-repeat: no-repeat; + border-radius: var(--sdpi-borderradius); + text-decoration: none; + color: var(--sdpi-color); + } + + .sdpi-more-info-button { + display: flex; + align-self: right; + margin-left: auto; + position: fixed; + right: 17px; + bottom: 0px; + } + + details a { + background-position: right !important; + min-height: 24px; + display: inline-block; + line-height: 24px; + padding-right: 28px; + } + input:not([type="range"]), + textarea { + -webkit-appearance: none; + background: var(--sdpi-background); + color: var(--sdpi-color); + font-weight: normal; + font-size: 9pt; + border: none; + margin-top: 2px; + margin-bottom: 2px; + } + + textarea + label { + display: flex; + justify-content: flex-end + } + input[type="radio"], + input[type="checkbox"] { + display: none; + } + input[type="radio"] + label, + input[type="checkbox"] + label { + font-size: 9pt; + color: var(--sdpi-color); + font-weight: normal; + margin-right: 8px; + -webkit-user-select: none; + } + + input[type="radio"] + label:after, + input[type="checkbox"] + label:after { + content: " " !important; + } + + .sdpi-item[type="radio"] > .sdpi-item-value, + .sdpi-item[type="checkbox"] > .sdpi-item-value { + padding-top: 2px; + } + + .sdpi-item[type="checkbox"] > .sdpi-item-value > * { + margin-top: 4px; + } + + .sdpi-item[type="checkbox"] .sdpi-item-child, + .sdpi-item[type="radio"] .sdpi-item-child { + display: inline-block; + } + + .sdpi-item[type="range"] .sdpi-item-value, + .sdpi-item[type="meter"] .sdpi-item-child, + .sdpi-item[type="progress"] .sdpi-item-child { + display: flex; + } + + .sdpi-item[type="range"] .sdpi-item-value { + min-height: 26px; + } + + .sdpi-item[type="range"] .sdpi-item-value span, + .sdpi-item[type="meter"] .sdpi-item-child span, + .sdpi-item[type="progress"] .sdpi-item-child span { + margin-top: -2px; + min-width: 8px; + text-align: right; + user-select: none; + cursor: pointer; + } + + .sdpi-item[type="range"] .sdpi-item-value span { + margin-top: 7px; + text-align: right; + } + + span + input[type="range"] { + display: flex; + max-width: 168px; + + } + + .sdpi-item[type="range"] .sdpi-item-value span:first-child, + .sdpi-item[type="meter"] .sdpi-item-child span:first-child, + .sdpi-item[type="progress"] .sdpi-item-child span:first-child { + margin-right: 4px; + } + + .sdpi-item[type="range"] .sdpi-item-value span:last-child, + .sdpi-item[type="meter"] .sdpi-item-child span:last-child, + .sdpi-item[type="progress"] .sdpi-item-child span:last-child { + margin-left: 4px; + } + + .reverse { + transform: rotate(180deg); + } + + .sdpi-item[type="meter"] .sdpi-item-child meter + span:last-child { + margin-left: -10px; + } + + .sdpi-item[type="progress"] .sdpi-item-child meter + span:last-child { + margin-left: -14px; + } + + .sdpi-item[type="radio"] > .sdpi-item-value > * { + margin-top: 2px; + } + + details { + padding: 8px 18px 8px 12px; + min-width: 86px; + } + + details > h4 { + border-bottom: 1px solid var(--sdpi-bordercolor); + } + + legend { + display: none; + } + .sdpi-item-value > textarea { + padding: 0px; + width: 227px; + margin-left: 1px; + } + + input[type="radio"] + label span, + input[type="checkbox"] + label span { + display: inline-block; + width: 16px; + height: 16px; + margin: 2px 4px 2px 0; + border-radius: 3px; + vertical-align: middle; + background: var(--sdpi-background); + cursor: pointer; + border: 1px solid rgb(0,0,0,.2); + } + + input[type="radio"] + label span { + border-radius: 100%; + } + + input[type="radio"]:checked + label span, + input[type="checkbox"]:checked + label span { + background-color: #77f; + background-image: url(check.svg); + background-repeat: no-repeat; + background-position: center center; + border: 1px solid rgb(0,0,0,.4); + } + + input[type="radio"]:active:checked + label span, + input[type="radio"]:active + label span, + input[type="checkbox"]:active:checked + label span, + input[type="checkbox"]:active + label span { + background-color: #303030; + } + + input[type="radio"]:checked + label span { + background-image: url(rcheck.svg); + } + + + /* + input[type="radio"] + label span { + background: url(buttons.png) -38px top no-repeat; + } + + input[type="radio"]:checked + label span { + background: url(buttons.png) -57px top no-repeat; + } + */ + + input[type="range"] { + width: var(--sdpi-width); + height: 30px; + overflow: hidden; + cursor: pointer; + background: transparent !important; + } + + .sdpi-item > input[type="range"] { + margin-left: 8px; + max-width: var(--sdpi-width); + width: var(--sdpi-width); + padding: 0px; + } + + /* + input[type="range"], + input[type="range"]::-webkit-slider-runnable-track, + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + } + */ + + input[type="range"]::-webkit-slider-runnable-track { + height: 5px; + background: #979797; + border-radius: 3px; + padding:0px !important; + border: 1px solid var(--sdpi-background); + } + + input[type="range"]::-webkit-slider-thumb { + position: relative; + -webkit-appearance: none; + background-color: var(--sdpi-color); + width: 12px; + height: 12px; + border-radius: 20px; + margin-top: -5px; + border: none; + + } + input[type="range" i]{ + margin: 0; + } + + input[type="range"]::-webkit-slider-thumb::before { + position: absolute; + content: ""; + height: 5px; /* equal to height of runnable track or 1 less */ + width: 500px; /* make this bigger than the widest range input element */ + left: -502px; /* this should be -2px - width */ + top: 8px; /* don't change this */ + background: #77f; + } + + input[type="color"] { + min-width: 32px; + min-height: 32px; + width: 32px; + height: 32px; + padding: 0; + background-color: var(--sdpi-bgcolor); + flex: none; + } + + ::-webkit-color-swatch { + min-width: 24px; + } + + textarea { + height: 3em; + word-break: break-word; + line-height: 1.5em; + } + + .textarea { + padding: 0px !important; + } + + textarea { + width: 221px; /*98%;*/ + height: 96%; + min-height: 6em; + resize: none; + border-radius: var(--sdpi-borderradius); + } + + /* CAROUSEL */ + + .sdpi-item[type="carousel"]{ + + } + + .sdpi-item.card-carousel-wrapper, + .sdpi-item > .card-carousel-wrapper { + padding: 0; + } + + + .card-carousel-wrapper { + display: flex; + align-items: center; + justify-content: center; + margin: 12px auto; + color: #666a73; + } + + .card-carousel { + display: flex; + justify-content: center; + width: 278px; + } + .card-carousel--overflow-container { + overflow: hidden; + } + .card-carousel--nav__left, + .card-carousel--nav__right { + /* display: inline-block; */ + width: 12px; + height: 12px; + border-top: 2px solid #42b883; + border-right: 2px solid #42b883; + cursor: pointer; + margin: 0 4px; + transition: transform 150ms linear; + } + .card-carousel--nav__left[disabled], + .card-carousel--nav__right[disabled] { + opacity: 0.2; + border-color: black; + } + .card-carousel--nav__left { + transform: rotate(-135deg); + } + .card-carousel--nav__left:active { + transform: rotate(-135deg) scale(0.85); + } + .card-carousel--nav__right { + transform: rotate(45deg); + } + .card-carousel--nav__right:active { + transform: rotate(45deg) scale(0.85); + } + .card-carousel-cards { + display: flex; + transition: transform 150ms ease-out; + transform: translatex(0px); + } + .card-carousel-cards .card-carousel--card { + margin: 0 5px; + cursor: pointer; + /* box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08); */ + background-color: #fff; + border-radius: 4px; + z-index: 3; + } + .xxcard-carousel-cards .card-carousel--card:first-child { + margin-left: 0; + } + .xxcard-carousel-cards .card-carousel--card:last-child { + margin-right: 0; + } + .card-carousel-cards .card-carousel--card img { + vertical-align: bottom; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + transition: opacity 150ms linear; + width: 60px; + } + .card-carousel-cards .card-carousel--card img:hover { + opacity: 0.5; + } + .card-carousel-cards .card-carousel--card--footer { + border-top: 0; + max-width: 80px; + overflow: hidden; + display: flex; + height: 100%; + flex-direction: column; + } + .card-carousel-cards .card-carousel--card--footer p { + padding: 3px 0; + margin: 0; + margin-bottom: 2px; + font-size: 15px; + font-weight: 500; + color: #2c3e50; + } + .card-carousel-cards .card-carousel--card--footer p:nth-of-type(2) { + font-size: 12px; + font-weight: 300; + padding: 6px; + color: #666a73; + } + + + h1 { + font-size: 1.3em; + font-weight: 500; + text-align: center; + margin-bottom: 12px; + } + + ::-webkit-datetime-edit { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background: url(elg_calendar_inv.svg) no-repeat left center; + padding-right: 1em; + padding-left: 25px; + background-position: 4px 0px; + } + ::-webkit-datetime-edit-fields-wrapper { + + } + ::-webkit-datetime-edit-text { padding: 0 0.3em; } + ::-webkit-datetime-edit-month-field { } + ::-webkit-datetime-edit-day-field {} + ::-webkit-datetime-edit-year-field {} + ::-webkit-inner-spin-button { + + /* display: none; */ + } + ::-webkit-calendar-picker-indicator { + background: transparent; + font-size: 17px; + } + + ::-webkit-calendar-picker-indicator:focus { + background-color: rgba(0,0,0,0.2); + } + + input[type="date"] { + -webkit-align-items: center; + display: -webkit-inline-flex; + font-family: monospace; + overflow: hidden; + padding: 0; + -webkit-padding-start: 1px; + } + + input::-webkit-datetime-edit { + -webkit-flex: 1; + -webkit-user-modify: read-only !important; + display: inline-block; + min-width: 0; + overflow: hidden; + } + + /* + input::-webkit-datetime-edit-fields-wrapper { + -webkit-user-modify: read-only !important; + display: inline-block; + padding: 1px 0; + white-space: pre; + + } + */ + + /* + input[type="date"] { + background-color: red; + outline: none; + } + + input[type="date"]::-webkit-clear-button { + font-size: 18px; + height: 30px; + position: relative; + } + + input[type="date"]::-webkit-inner-spin-button { + height: 28px; + } + + input[type="date"]::-webkit-calendar-picker-indicator { + font-size: 15px; + } */ + + input[type="file"] { + opacity: 0; + display: none; + } + + .sdpi-item > input[type="file"] { + opacity: 1; + display: flex; + } + + input[type="file"] + span { + display: flex; + flex: 0 1 auto; + background-color: #0000ff50; + } + + label.sdpi-file-label { + cursor: pointer; + user-select: none; + display: inline-block; + min-height: 21px !important; + height: 21px !important; + line-height: 20px; + padding: 0px 4px; + margin: auto; + margin-right: 0px; + float:right; + } + + .sdpi-file-label > label:active, + .sdpi-file-label.file:active, + label.sdpi-file-label:active, + label.sdpi-file-info:active, + input[type="file"]::-webkit-file-upload-button:active, + button:active { + background-color: var(--sdpi-color); + color:#303030; + } + + + input:required:invalid, input:focus:invalid { + background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPgogICAgPHBhdGggZmlsbD0iI0Q4RDhEOCIgZD0iTTQuNSwwIEM2Ljk4NTI4MTM3LC00LjU2NTM4NzgyZS0xNiA5LDIuMDE0NzE4NjMgOSw0LjUgQzksNi45ODUyODEzNyA2Ljk4NTI4MTM3LDkgNC41LDkgQzIuMDE0NzE4NjMsOSAzLjA0MzU5MTg4ZS0xNiw2Ljk4NTI4MTM3IDAsNC41IEMtMy4wNDM1OTE4OGUtMTYsMi4wMTQ3MTg2MyAyLjAxNDcxODYzLDQuNTY1Mzg3ODJlLTE2IDQuNSwwIFogTTQsMSBMNCw2IEw1LDYgTDUsMSBMNCwxIFogTTQuNSw4IEM0Ljc3NjE0MjM3LDggNSw3Ljc3NjE0MjM3IDUsNy41IEM1LDcuMjIzODU3NjMgNC43NzYxNDIzNyw3IDQuNSw3IEM0LjIyMzg1NzYzLDcgNCw3LjIyMzg1NzYzIDQsNy41IEM0LDcuNzc2MTQyMzcgNC4yMjM4NTc2Myw4IDQuNSw4IFoiLz4KICA8L3N2Zz4) no-repeat 98% center; + } + + input:required:valid { + background: var(--sdpi-background) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjkiIHZpZXdCb3g9IjAgMCA5IDkiPjxwb2x5Z29uIGZpbGw9IiNEOEQ4RDgiIHBvaW50cz0iNS4yIDEgNi4yIDEgNi4yIDcgMy4yIDcgMy4yIDYgNS4yIDYiIHRyYW5zZm9ybT0icm90YXRlKDQwIDQuNjc3IDQpIi8+PC9zdmc+) no-repeat 98% center; + } + + .tooltip, + :tooltip, + :title { + color: yellow; + } + + [title]:hover { + display: flex; + align-items: center; + justify-content: center; + } + + [title]:hover::after { + content: ''; + position: absolute; + bottom: -1000px; + left: 8px; + display: none; + color: #fff; + border: 8px solid transparent; + border-bottom: 8px solid #000; + } + [title]:hover::before { + content: attr(title); + display: flex; + justify-content: center; + align-self: center; + padding: 6px 12px; + border-radius: 5px; + background: rgba(0,0,0,0.8); + color: var(--sdpi-color); + font-size: 9pt; + font-family: sans-serif; + opacity: 1; + position: absolute; + height: auto; + /* width: 50%; + left: 35%; */ + text-align: center; + bottom: 2px; + z-index: 100; + box-shadow: 0px 3px 6px rgba(0, 0, 0, .5); + /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */ + } + + .sdpi-item-group.file { + width: 232px; + display: flex; + align-items: center; + } + + .sdpi-file-info { + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + + min-width: 132px; + max-width: 144px; + max-height: 32px; + margin-top: 0px; + margin-left: 5px; + display: inline-block; + overflow: hidden; + padding: 6px 4px; + background-color: var(--sdpi-background); + } + + + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + } + + ::-webkit-scrollbar-thumb { + background-color: #999999; + outline: 1px solid slategrey; + border-radius: 8px; + } + + a { + color: #7397d2; + } + + .testcontainer { + display: flex; + background-color: #0000ff20; + max-width: 400px; + height: 200px; + align-content: space-evenly; + } + + input[type=range] { + -webkit-appearance: none; + /* background-color: green; */ + height:6px; + margin-top: 12px; + z-index: 0; + overflow: visible; + } + + /* + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: var(--sdpi-color); + width: 12px; + height: 12px; + border-radius: 20px; + margin-top: -6px; + border: none; + } */ + + :-webkit-slider-thumb { + -webkit-appearance: none; + background-color: var(--sdpi-color); + width: 16px; + height: 16px; + border-radius: 20px; + margin-top: -6px; + border: 1px solid #999999; + } + + .sdpi-item[type="range"] .sdpi-item-group { + display: flex; + flex-direction: column; + } + + .xxsdpi-item[type="range"] .sdpi-item-group input { + max-width: 204px; + } + + .sdpi-item[type="range"] .sdpi-item-group span { + margin-left: 0px !important; + } + + .sdpi-item[type="range"] .sdpi-item-group > .sdpi-item-child { + display: flex; + flex-direction: row; + } + + :disabled { + color: #993333; + } + + select, + select option { + color: var(--sdpi-color); + } + + select.disabled, + select option:disabled { + color: #fd9494; + font-style: italic; + } + + .runningAppsContainer { + display: none; + } + + /* debug + div { + background-color: rgba(64,128,255,0.2); + } + */ + + .min80 > .sdpi-item-child { + min-width: 80px; + } + + .min100 > .sdpi-item-child { + min-width: 100px; + } + + .min120 > .sdpi-item-child { + min-width: 120px; + } + + .min140 > .sdpi-item-child { + min-width: 140px; + } + + .min160 > .sdpi-item-child { + min-width: 160px; + } + + .min200 > .sdpi-item-child { + min-width: 200px; + } + + .max40 { + flex-basis: 40%; + flex-grow: 0; + } + + .max30 { + flex-basis: 30%; + flex-grow: 0; + } + + .max20 { + flex-basis: 20%; + flex-grow: 0; + } + + .up20 { + margin-top: -20px; + } + + .alignCenter { + align-items: center; + } + + .alignTop { + align-items: flex-start; + } + + .alignBaseline { + align-items: baseline; + } + + .noMargins, + .noMargins *, + .noInnerMargins * { + margin: 0; + padding: 0; + } + + + /** + input[type=range].vVertical { + -webkit-appearance: none; + background-color: green; + margin-left: -60px; + width: 100px; + height:6px; + margin-top: 0px; + transform:rotate(90deg); + z-index: 0; + overflow: visible; + } + + input[type=range].vHorizon { + -webkit-appearance: none; + background-color: pink; + height: 10px; + width:200px; + + } + + .test2 { + background-color: #00ff0020; + display: flex; + } + + + .vertical.sdpi-item[type="range"] .sdpi-item-value { + display: block; + } + + + .vertical.sdpi-item:first-child, + .vertical { + margin-top: 12px; + margin-bottom: 16px; + } + .vertical > .sdpi-item-value { + margin-right: 16px; + } + + .vertical .sdpi-item-group { + width: 100%; + display: flex; + justify-content: space-evenly; + } + + .vertical input[type=range] { + height: 100px; + width: 21px; + -webkit-appearance: slider-vertical; + display: flex; + flex-flow: column; + } + + .vertical input[type="range"]::-webkit-slider-runnable-track { + height: auto; + width: 5px; + } + + .vertical input[type="range"]::-webkit-slider-thumb { + margin-top: 0px; + margin-left: -6px; + } + + .vertical .sdpi-item-value { + flex-flow: column; + align-items: flex-start; + } + + .vertical.sdpi-item[type="range"] .sdpi-item-value { + align-items: center; + margin-right: 16px; + text-align: center; + } + + .vertical.sdpi-item[type="range"] .sdpi-item-value span, + .vertical input[type="range"] .sdpi-item-value span { + text-align: center; + margin: 4px 0px; + } + */ + + /* + .file { + box-sizing: border-box; + display: block; + overflow: hidden; + padding: 10px; + position: relative; + text-indent: 100%; + white-space: nowrap; + height: 190px; + width: 160px; + } + .file::before { + content: ""; + display: block; + position: absolute; + top: 10px; + left: 10px; + height: 170px; + width: 140px; + } + .file::after { + content: ""; + height: 90px; + width: 90px; + position: absolute; + right: 0; + bottom: 0; + overflow: visible; + } + + .list--files { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: auto; + padding: 30px 0; + width: 630px; + } + .list--files > li { + margin: 0; + padding: 15px; + } + + .type-document::before { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNzBweCIgdmlld0JveD0iMCAwIDE0MCAxNzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0E3QTlBQyIgZD0iTTAsMHYxNzBoMTQwVjBIMHogTTEzMCwxNjBIMTBWMTBoMTIwVjE2MHogTTExMCw0MEgzMFYzMGg4MFY0MHogTTExMCw2MEgzMFY1MGg4MFY2MHogTTExMCw4MEgzMFY3MGg4MFY4MHoNCiAgIE0xMTAsMTAwSDMwVjkwaDgwVjEwMHogTTExMCwxMjBIMzB2LTEwaDgwVjEyMHogTTkwLDE0MEgzMHYtMTBoNjBWMTQweiIvPg0KPC9zdmc+); + } + + .type-image { + height: 160px; + } + .type-image::before { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNDBweCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE0MCAxNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxwYXRoIGZpbGw9IiNBN0E5QUMiIGQ9Ik0wLDB2MTQwaDE0MFYwSDB6IE0xMzAsMTMwSDEwVjEwaDEyMFYxMzB6Ii8+DQogIDxwb2x5Z29uIGZpbGw9IiNFNkU3RTgiIHBvaW50cz0iOTAsMTEwIDQwLDQwIDEwLDgwIDEwLDEzMCA5MCwxMzAgICIvPg0KICA8cG9seWdvbiBmaWxsPSIjRDFEM0Q0IiBwb2ludHM9IjEwLDEzMCA1MCw5MCA2MCwxMDAgMTAwLDYwIDEzMCwxMzAgICIvPg0KPC9nPg0KPC9zdmc+); + height: 140px; + } + + .state-synced::after { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzAwQTY1MSIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMCw0NUwyMCw0NWMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAuMSwxMC4xYzIuNywyLjcsNy4yLDIuNyw5LjksMEw3MCwzNWMyLjgtMi44LDIuOC03LjIsMC0xMGwwLDANCiAgICBjLTIuOC0yLjgtNy4yLTIuOC0xMCwwTDM1LDUwbC01LTVDMjcuMiw0Mi4yLDIyLjgsNDIuMiwyMCw0NXoiLz4NCjwvZz4NCjwvc3ZnPg==); + } + + .state-deleted::after { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iI0VEMUMyNCIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02NSwyNUw2NSwyNWMtMi44LTIuOC03LjItMi44LTEwLDBMNDUsMzVMMzUsMjVjLTIuOC0yLjgtNy4yLTIuOC0xMCwwbDAsMGMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAsMTANCiAgICBMMjUsNTVjLTIuOCwyLjgtMi44LDcuMiwwLDEwbDAsMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwxMC0xMGwxMCwxMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwwLDBjMi44LTIuOCwyLjgtNy4yLDAtMTBMNTUsNDVsMTAtMTANCiAgICBDNjcuOCwzMi4yLDY3LjgsMjcuOCw2NSwyNXoiLz4NCjwvZz4NCjwvc3ZnPg==); + } + .state-deleted::before { + opacity: .25; + } + + .state-locked::after { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzU4NTk1QiIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxyZWN0IHg9IjIwIiB5PSI0MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjMwIi8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMi41LDQ2LjVjLTIuOCwwLTUtMi4yLTUtNVYyOWMwLTkuNiw3LjktMTcuNSwxNy41LTE3LjVTNjIuNSwxOS40LDYyLjUsMjljMCwyLjgtMi4yLDUtNSw1cy01LTIuMi01LTUNCiAgICBjMC00LjEtMy40LTcuNS03LjUtNy41cy03LjUsMy40LTcuNSw3LjV2MTIuNUMzNy41LDQ0LjMsMzUuMyw0Ni41LDMyLjUsNDYuNXoiLz4NCjwvZz4NCjwvc3ZnPg==); + } + + + + html { + --fheight: 95px; + --fwidth: 80px; + --fspacing: 5px; + --ftotalwidth: 315px; + --bgsize: 50%; + --bgsize2: cover; + --bgsize3: contain; + } + + ul { + list-style: none; + } + + + .file { + height: var(--fheight); + width: var(--fwidth); + } + .file::before { + content: ""; + display: block; + position: absolute; + top: var(--fspacing); + left: var(--fspacing); + height: calc(var(--fheight) - var(--fspacing)*2); + width: calc(var(--fwidth) - var(--fspacing)*2); + } + .file::after { + content: ""; + height: calc(var(--fheight)/2); + width: calc(var(--fheight)/2); + position: absolute; + right: 0; + bottom: 0; + overflow: visible; + } + + .list--files { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: auto; + padding: calc(var(--fspacing)*3) 0; + width: var(--ftotalwidth); + } + .list--files > li { + margin: 0; + padding: var(--fspacing); + } + + .type-document::before { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNzBweCIgdmlld0JveD0iMCAwIDE0MCAxNzAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0E3QTlBQyIgZD0iTTAsMHYxNzBoMTQwVjBIMHogTTEzMCwxNjBIMTBWMTBoMTIwVjE2MHogTTExMCw0MEgzMFYzMGg4MFY0MHogTTExMCw2MEgzMFY1MGg4MFY2MHogTTExMCw4MEgzMFY3MGg4MFY4MHoNCiAgIE0xMTAsMTAwSDMwVjkwaDgwVjEwMHogTTExMCwxMjBIMzB2LTEwaDgwVjEyMHogTTkwLDE0MEgzMHYtMTBoNjBWMTQweiIvPg0KPC9zdmc+); + height: calc(var(--fheight) - var(--fspacing)*2); + background-size: var(--bgsize2); + background-repeat: no-repeat; + } + + .type-image { + height: var(--fwidth); + height: calc(var(--fheight) - var(--fspacing)*2); + } + .type-image::before { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNDBweCIgaGVpZ2h0PSIxNDBweCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE0MCAxNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxwYXRoIGZpbGw9IiNBN0E5QUMiIGQ9Ik0wLDB2MTQwaDE0MFYwSDB6IE0xMzAsMTMwSDEwVjEwaDEyMFYxMzB6Ii8+DQogIDxwb2x5Z29uIGZpbGw9IiNFNkU3RTgiIHBvaW50cz0iOTAsMTEwIDQwLDQwIDEwLDgwIDEwLDEzMCA5MCwxMzAgICIvPg0KICA8cG9seWdvbiBmaWxsPSIjRDFEM0Q0IiBwb2ludHM9IjEwLDEzMCA1MCw5MCA2MCwxMDAgMTAwLDYwIDEzMCwxMzAgICIvPg0KPC9nPg0KPC9zdmc+); + height: calc(var(--fheight) - var(--fspacing)*2); + background-size: var(--bgsize3); + background-repeat: no-repeat; + } + + .state-synced::after { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzAwQTY1MSIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMCw0NUwyMCw0NWMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAuMSwxMC4xYzIuNywyLjcsNy4yLDIuNyw5LjksMEw3MCwzNWMyLjgtMi44LDIuOC03LjIsMC0xMGwwLDANCiAgICBjLTIuOC0yLjgtNy4yLTIuOC0xMCwwTDM1LDUwbC01LTVDMjcuMiw0Mi4yLDIyLjgsNDIuMiwyMCw0NXoiLz4NCjwvZz4NCjwvc3ZnPg==); + background-size: var(--bgsize); + background-repeat: no-repeat; + background-position: bottom right; + } + + .state-deleted::after { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iI0VEMUMyNCIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik02NSwyNUw2NSwyNWMtMi44LTIuOC03LjItMi44LTEwLDBMNDUsMzVMMzUsMjVjLTIuOC0yLjgtNy4yLTIuOC0xMCwwbDAsMGMtMi44LDIuOC0yLjgsNy4yLDAsMTBsMTAsMTANCiAgICBMMjUsNTVjLTIuOCwyLjgtMi44LDcuMiwwLDEwbDAsMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwxMC0xMGwxMCwxMGMyLjgsMi44LDcuMiwyLjgsMTAsMGwwLDBjMi44LTIuOCwyLjgtNy4yLDAtMTBMNTUsNDVsMTAtMTANCiAgICBDNjcuOCwzMi4yLDY3LjgsMjcuOCw2NSwyNXoiLz4NCjwvZz4NCjwvc3ZnPg==); + background-size: var(--bgsize); + background-repeat: no-repeat; + background-position: bottom right; + } + .state-deleted::before { + opacity: .25; + } + + .state-locked::after { + background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KICAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MHB4IiBoZWlnaHQ9IjkwcHgiIHZpZXdCb3g9IjAgMCA5MCA5MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTAgOTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQogIDxjaXJjbGUgZmlsbD0iIzU4NTk1QiIgY3g9IjQ1IiBjeT0iNDUiIHI9IjQ1Ii8+DQogIDxyZWN0IHg9IjIwIiB5PSI0MCIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjUwIiBoZWlnaHQ9IjMwIi8+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMi41LDQ2LjVjLTIuOCwwLTUtMi4yLTUtNVYyOWMwLTkuNiw3LjktMTcuNSwxNy41LTE3LjVTNjIuNSwxOS40LDYyLjUsMjljMCwyLjgtMi4yLDUtNSw1cy01LTIuMi01LTUNCiAgICBjMC00LjEtMy40LTcuNS03LjUtNy41cy03LjUsMy40LTcuNSw3LjV2MTIuNUMzNy41LDQ0LjMsMzUuMyw0Ni41LDMyLjUsNDYuNXoiLz4NCjwvZz4NCjwvc3ZnPg==); + background-size: var(--bgsize); + background-repeat: no-repeat; + background-position: bottom right; + } + */ \ No newline at end of file diff --git a/Sources/com.jk.weather.sdPlugin/plugin/main.html b/Sources/com.jk.weather.sdPlugin/plugin/main.html new file mode 100644 index 0000000..83a3115 --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/plugin/main.html @@ -0,0 +1,12 @@ + + + + + com.jk.weather + + + + + + + diff --git a/Sources/com.jk.weather.sdPlugin/plugin/main.js b/Sources/com.jk.weather.sdPlugin/plugin/main.js new file mode 100644 index 0000000..431e080 --- /dev/null +++ b/Sources/com.jk.weather.sdPlugin/plugin/main.js @@ -0,0 +1,103 @@ +let websocket = null, + pluginUUID = null; +apiKey = ""; + +function connectElgatoStreamDeckSocket(inPort, inPluginUUID, inRegisterEvent, inInfo) { + pluginUUID = inPluginUUID; + + // Open the web socket + websocket = new WebSocket("ws://localhost:" + inPort); + + websocket.onopen = function () { + // WebSocket is connected, register the plugin + const json = { + "event": inRegisterEvent, + "uuid": inPluginUUID + }; + + websocket.send(JSON.stringify(json)); + }; + + websocket.onmessage = function (evt) { + // Received message from Stream Deck + const jsonObj = JSON.parse(evt.data); + let context = jsonObj['context']; + + if (jsonObj['event'] === "keyUp") { + let cityName = ""; + if (jsonObj.payload.settings != null && jsonObj.payload.settings.hasOwnProperty('cityName')) { + cityName = jsonObj.payload.settings["cityName"]; + } + + if (cityName === "" || apiKey === "") { + console.log('Missing fields here...'); + const json = { + "event": "showAlert", + "context": jsonObj.context, + }; + websocket.send(JSON.stringify(json)); + } else { + const request = new XMLHttpRequest(); + request.open("GET", 'https://api.weatherapi.com/v1/current.json?key=' + apiKey + '&q=' + cityName + '&aqi=no'); + request.send(); + request.onreadystatechange = function () { + if (request.readyState === XMLHttpRequest.DONE) { + const response = JSON.parse(request.responseText); + const temperature = response.current.temp_c ? response.current.temp_c : "NaN"; + let json = { + "event": "setTitle", + "context": context, + "payload": { + "title": "" + temperature + "°C", + "target": 1 + } + }; + + websocket.send(JSON.stringify(json)); + + function toDataURL(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + let reader = new FileReader(); + reader.onloadend = function () { + callback(reader.result); + } + reader.readAsDataURL(xhr.response); + }; + xhr.open('GET', url); + xhr.responseType = 'blob'; + xhr.send(); + } + + if (response.current.condition.icon != null) { + toDataURL("https:" + response.current.condition.icon, function (dataUrl) { + let json = { + "event": "setImage", + "context": context, + "payload": { + "image": '' + dataUrl, + "target": 1 + } + }; + + websocket.send(JSON.stringify(json)); + }) + } + } + } + } + } else if (jsonObj['event'] === "didReceiveGlobalSettings") { + if (jsonObj.payload.settings != null && jsonObj.payload.settings.hasOwnProperty('apiKey')) { + apiKey = jsonObj.payload.settings["apiKey"]; + } + + } else if (jsonObj['event'] === "keyDown") { + const json = { + "event": "getGlobalSettings", + "context": pluginUUID + }; + + websocket.send(JSON.stringify(json)); + } + }; +} diff --git a/Sources/com.jk.weather.sdPlugin/resources/actionDefaultImage.png b/Sources/com.jk.weather.sdPlugin/resources/actionDefaultImage.png new file mode 100644 index 0000000..c577482 Binary files /dev/null and b/Sources/com.jk.weather.sdPlugin/resources/actionDefaultImage.png differ diff --git a/Sources/com.jk.weather.sdPlugin/resources/actionDefaultImage@2x.png b/Sources/com.jk.weather.sdPlugin/resources/actionDefaultImage@2x.png new file mode 100644 index 0000000..c577482 Binary files /dev/null and b/Sources/com.jk.weather.sdPlugin/resources/actionDefaultImage@2x.png differ diff --git a/Sources/com.jk.weather.sdPlugin/resources/actionIcon.png b/Sources/com.jk.weather.sdPlugin/resources/actionIcon.png new file mode 100644 index 0000000..c577482 Binary files /dev/null and b/Sources/com.jk.weather.sdPlugin/resources/actionIcon.png differ diff --git a/Sources/com.jk.weather.sdPlugin/resources/actionIcon@2x.png b/Sources/com.jk.weather.sdPlugin/resources/actionIcon@2x.png new file mode 100644 index 0000000..c577482 Binary files /dev/null and b/Sources/com.jk.weather.sdPlugin/resources/actionIcon@2x.png differ diff --git a/Sources/com.jk.weather.sdPlugin/resources/pluginIcon.png b/Sources/com.jk.weather.sdPlugin/resources/pluginIcon.png new file mode 100644 index 0000000..91e3997 Binary files /dev/null and b/Sources/com.jk.weather.sdPlugin/resources/pluginIcon.png differ diff --git a/Sources/com.jk.weather.sdPlugin/resources/pluginIcon@2x.png b/Sources/com.jk.weather.sdPlugin/resources/pluginIcon@2x.png new file mode 100644 index 0000000..c83360c Binary files /dev/null and b/Sources/com.jk.weather.sdPlugin/resources/pluginIcon@2x.png differ diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..8c055fb Binary files /dev/null and b/screenshot.png differ