⬆️ Added functionality of fetching frequency and temperature units

JaouherK · Apr 18, 2021 · 656e7d3 · 656e7d3
1 parent 3b9d6c7
commit 656e7d3
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 
 # Description
 
-`Weather` is a plugin that displays a weather condition and temperature. It is connected to weatherApi provider and requires an API Key and a city as inputs.
+`Weather` is a plugin that displays a weather condition and temperature. It is connected to weatherApi provider and requires an API Key and a city as required inputs. It has also selection for frequency of fetching and temperature unit.
 
 # Features
 

diff --git a/Release/com.jk.weather.streamDeckPlugin b/Release/com.jk.weather.streamDeckPlugin
diff --git a/Sources/com.jk.weather.sdPlugin/pi/main_pi.html b/Sources/com.jk.weather.sdPlugin/pi/main_pi.html
@@ -2,25 +2,61 @@
 <html>
 
 <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8"/>
     <title>com.jk.weather.pi</title>
     <link rel="stylesheet" href="sdpi.css">
     <script src="main_pi.js"></script>
 </head>
 
 <body>
 <div class="sdpi-wrapper hidden">
+    <div class="sdpi-item" id="apiProviderContainer">
+        <div class="sdpi-item-label">Provider</div>
+        <select class="sdpi-item-value select" id="api">
+            <option value="weatherApi">WeatherAPI</option>
+        </select>
+    </div>
+    <div class="sdpi-item">
+        <details class="message info">
+            <summary>Please do not set a title or an image for this plugin as they are being generated on the fly!</summary>
+        </details>
+    </div>
+
+    <div class="sdpi-heading">API SETUP</div>
+
     <div class="sdpi-item">
         <div class="sdpi-item-label">API Key</div>
-        <input class="sdpi-item-value" id="apiKey" value="" onchange="updateApiKey()" placeholder="Enter your WeatherApi Key">
+        <input class="sdpi-item-value" id="apiKey" value="" onchange="updateApiKey()"
+               placeholder="Enter your WeatherApi Key" required>
     </div>
     <div class="sdpi-item">
         <div class="sdpi-item-label">City Name</div>
-        <input class="sdpi-item-value" id="cityName" value="" onchange="updateCityName()" placeholder="Enter the city for the current weather details">
+        <input class="sdpi-item-value" id="cityName" value="" onchange="updateSettings()"
+               placeholder="Enter the city for the current weather details" required>
+    </div>
+
+    <div class="sdpi-item">
+        <div class="sdpi-item-label">Temperature</div>
+        <select class="sdpi-item-value select" id="unit" onchange="updateSettings()">
+            <option value="celsius">Celsius °C</option>
+            <option value="fahrenheit">Fahrenheit °F</option>
+        </select>
+    </div>
+
+    <div class="sdpi-item">
+        <div class="sdpi-item-label">Fetch frequency</div>
+        <select class="sdpi-item-value select" id="frequency" onchange="updateSettings()">
+            <option value="0">On push</option>
+            <option value="600000">10 Minutes</option>
+            <option value="1800000">30 Minutes</option>
+            <option value="3600000">1 Hour</option>
+        </select>
     </div>
+
     <div class="sdpi-item">
         <button class="sdpi-item-value" onclick="openPage('weatherapi.com/my/')">Get my API key</button>
-        <button class="sdpi-item-value" onclick="openPage('github.com/JaouherK/streamDeck-weatherPlugin')">GitHub</button>
+        <button class="sdpi-item-value" onclick="openPage('github.com/JaouherK/streamDeck-weatherPlugin')">GitHub
+        </button>
     </div>
 </div>
 </body>

diff --git a/Sources/com.jk.weather.sdPlugin/pi/main_pi.js b/Sources/com.jk.weather.sdPlugin/pi/main_pi.js
@@ -42,6 +42,18 @@ function connectElgatoStreamDeckSocket(inPort, inPropertyInspectorUUID, inRegist
             if(document.getElementById('cityName').value === "undefined") {
                 document.getElementById('cityName').value = "";
             }
+
+            document.getElementById('frequency').value = payload.frequency;
+
+            if(document.getElementById('frequency').value === "undefined") {
+                document.getElementById('frequency').value = "0";
+            }
+
+            document.getElementById('unit').value = payload.unit;
+
+            if(document.getElementById('unit').value === "undefined") {
+                document.getElementById('unit').value = "celsius";
+            }
         }
         if (jsonObj.event === 'didReceiveGlobalSettings') {
             const payload = jsonObj.payload.settings;
@@ -59,18 +71,19 @@ function connectElgatoStreamDeckSocket(inPort, inPropertyInspectorUUID, inRegist
 
 }
 
-function updateCityName() {
+function updateSettings() {
     if (websocket && (websocket.readyState === 1)) {
         let payload = {};
         payload.cityName = document.getElementById('cityName').value;
+        payload.frequency = document.getElementById('frequency').value;
+        payload.unit = document.getElementById('unit').value;
         const json = {
             "event": "setSettings",
             "context": uuid,
             "payload": payload
         };
         websocket.send(JSON.stringify(json));
-        console.log(json)
-    }    
+    }
 }
 
 function updateApiKey() {
@@ -83,8 +96,7 @@ function updateApiKey() {
             "payload": payload
         };
         websocket.send(JSON.stringify(json));
-        console.log(json)
-    }    
+    }
 }
 
 function openPage(site) {

diff --git a/Sources/com.jk.weather.sdPlugin/plugin/main.js b/Sources/com.jk.weather.sdPlugin/plugin/main.js
@@ -21,69 +21,33 @@ function connectElgatoStreamDeckSocket(inPort, inPluginUUID, inRegisterEvent, in
     websocket.onmessage = function (evt) {
         // Received message from Stream Deck
         const jsonObj = JSON.parse(evt.data);
-        let context = jsonObj['context'];
+        const context = jsonObj['context'];
 
         if (jsonObj['event'] === "keyUp") {
             let cityName = "";
-            if (jsonObj.payload.settings != null && jsonObj.payload.settings.hasOwnProperty('cityName')) {
+            let unit = "";
+            let frequency = null;
+            if (
+                jsonObj.payload.settings != null &&
+                jsonObj.payload.settings.hasOwnProperty('cityName') &&
+                jsonObj.payload.settings.hasOwnProperty('unit') &&
+                jsonObj.payload.settings.hasOwnProperty('frequency')
+            ) {
                 cityName = jsonObj.payload.settings["cityName"];
+                unit = jsonObj.payload.settings["unit"];
+                frequency = (jsonObj.payload.settings["frequency"] !== "0") ? parseInt(jsonObj.payload.settings["frequency"]) : false;
             }
 
             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));
-                            })
-                        }
-                    }
+                requestSending(context, cityName, unit);
+                if (frequency) {
+                    setInterval(() => requestSending(context, cityName, unit), frequency);
                 }
             }
         } else if (jsonObj['event'] === "didReceiveGlobalSettings") {
@@ -101,3 +65,62 @@ function connectElgatoStreamDeckSocket(inPort, inPluginUUID, inRegisterEvent, in
         }
     };
 }
+
+
+function requestSending(context, cityName, unit) {
+    console.log('Sending');
+    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);
+            let temperature = "";
+            if (unit === 'celsius') {
+                temperature = response.current.temp_c ? response.current.temp_c + "°C" : "NaN";
+            }
+            if (unit === 'fahrenheit') {
+                temperature = response.current.temp_f ? response.current.temp_f + "°F" : "NaN";
+            }
+            let json = {
+                "event": "setTitle",
+                "context": context,
+                "payload": {
+                    "title": "" + temperature,
+                    "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));
+                })
+            }
+        }
+    }
+}
diff --git a/screenshot.png b/screenshot.png