LOTS of changes. period

README.md

@@ -1,55 +1,4 @@
-![IFTTT Integration for Elgato Stream Deck](resources/readme/integration-logo.png "IFTTT Integration for Elgato Stream Deck")
+![IFTTT for Elgato Stream Deck](resources/readme/integration-logo.png "IFTTT for Elgato Stream Deck")
 > Easily integrate the Elgato Stream Deck in your IFTTT setup and control smart home devices.
 
-Works crossplatform. Tested on MacOS Mojave 10.14 and Windows 10.
-
-## How to use
-
-If you know how IFTTT Webhooks work, this tutorial is rather obsolete for you. Just enter the Event Name and the Maker Key in the property inspector of your action and you'll be ready to go.
-
-### General installation and setup
-Download the latest release [here](https://github.com/tobimori/streamdeck-ifttt/releases/latest "Hello from the other side...") and execute the file. The Stream Deck software should ask you to continue the installation.
-
-![Installation](resources/readme/installation.png)
-
-Click on install and navigate to IFTTT's website, [IFTTT.com](https://ifttt.com).
-Create a new account if you haven't done that yet. 
-
-To continue with the setup, you need to connect your IFTTT account to the Maker Webhooks service. Search for the service or visit the corresponding website [here](https://ifttt.com/services/maker_webhooks) and click on "Connect".
-
-![Connect](resources/readme/connect.png)
-
-### Creating a new action/applet
-
-Drag and drop the IFTTT button action from the actions list to the canvas area.
-After selecting it, you'll see two important settings in the property inspector. 
-
-![Settings](resources/readme/settings.png)
-
-The Event Name setting defines the Event that will be called on IFTTT. We will get to that later on.
-
-The second setting, the Maker Key, is basically an access key for your IFTTT account. To see your Maker Key, go on the [Maker Webhooks services]() page and click on Documentation. You'll find your Maker Key right there.
-
-![Documentation](resources/readme/documentation.png)
-
-Copy the Maker Key into the property inspector. Then, go back to the IFTTT page and [create a new applet](https://ifttt.com/create). This is how actions are called on IFTTT. 
-
-Click on "[+] this" and search for Webhooks.
-
-![Search](resources/readme/search.png)
-
-Select the "Receive a web request" trigger and enter the decided Event Name for this applet. This also needs to be entered in the property inspector of your action. If two applets have the same Event Name, they will both trigger when pressing the corresponding stream deck button.
-
-![Event Name](resources/readme/eventname.png)
-
-Click on create trigger and switch into the Elgato Stream Deck software. Enter the Event Name in the property inspector. Your property inspector panel now should look like this.
-
-![Property Inspector](resources/readme/done.png)
-
-You can now switch back to IFTTT's page and choose the action service like you want. Examples for this are controlling Phillips Hue lamps or resuming your Sonos speaker.
-
-#### Have fun with your new Smart home-enabled Stream Deck! 
-
-## Support
-
-Feel free to ask your questions/report bugs on the [community-ran Elgato Discord Server](https://discord.gg/aWVu2eM). I'm there too ;)
+Works crossplatform. Tested on MacOS Mojave 10.14 and Windows 10.

manifest.json

@@ -1,38 +1,41 @@
 {
-  "Actions": [
-    {
-      "Icon": "resources/actionIcon",
-      "Name": "IFTTT Button",
-      "States": [
-    {
-      "Image": "resources/actionDefaultImage",
-      "TitleAlignment": "bottom",
-      "FontSize": "10"
-    }
-  ],
-  "SupportedInMultiActions": true,
-  "Tooltip": "If Stream Deck button pressed, then...",
-  "UUID": "de.tobimori.streamdeck.ifttt.action"
-}
-],
-"Author": "tobimori",
-"CodePath": "plugin/main.html",
-"Description": "Easily integrate the Elgato Stream Deck in your IFTTT setup and control smart home devices.",
-"Name": "IFTTT Integration",
-"Icon": "resources/pluginIcon",
-"URL": "https://streamdeck.tobimori.de",
-"PropertyInspectorPath": "propertyinspector/main_pi.html",
-"Version": "1.3",
-"Category": "tobimori",
-"CategoryIcon": "resources/categoryIcon",
-"OS": [
-{
-  "MinimumVersion" : "10.11",
-  "Platform": "mac"
-},
-  {
-"Platform": "windows",
-"MinimumVersion" : "10"
-    }
-  ]
-}
+    "Actions": [
+      {
+        "Icon": "resources/actionIcon", 
+        "Name": "IFTTT", 
+        "States": [
+          {
+            "Image": "resources/actionDefaultImage",
+            "TitleAlignment": "bottom",
+            "FontSize": "10"
+          }
+        ], 
+        "SupportedInMultiActions": true,
+        "Tooltip": "If Stream Deck button pressed, then...", 
+        "UUID": "de.tobimori.streamdeck.ifttt.action"
+      }
+    ], 
+    "SDKVersion": 2,
+    "Author": "tobimori", 
+    "CodePath": "plugin/main.html", 
+    "Description": "Easily integrate the Elgato Stream Deck in your IFTTT setup and control smart home devices.", 
+    "Name": "IFTTT", 
+    "Icon": "resources/pluginIcon", 
+    "PropertyInspectorPath": "pi/main_pi.html",
+    "URL": "https://moeritz.cc", 
+    "Version": "2.0",
+    "OS": [
+      {
+          "Platform": "mac", 
+          "MinimumVersion" : "10.11"
+      },
+      {
+          "Platform": "windows", 
+          "MinimumVersion" : "10"
+      }
+    ],
+    "Software": 
+      {
+          "MinimumVersion" : "4.1"
+      }
+  }

pi/main_pi.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>de.tobimori.streamdeck.ifttt.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">
+        <div class="sdpi-item-label">Maker Key</div>
+        <input class="sdpi-item-value" id="makerkey" value="" onchange="updateMakerKey()" placeholder="Enter your IFTTT Maker Key">
+    </div>
+    <div class="sdpi-item">
+        <div class="sdpi-item-label">Event Name</div>
+        <input class="sdpi-item-value" id="eventname" value="" onchange="updateEventName()" placeholder="Enter the Event name to be fired">
+    </div>
+    <div class="sdpi-item">
+        <button class="sdpi-item-value" onclick="openPage('ifttt.com/create/if-receive-a-web-request?sid=2')">Create new Applet</button>
+        <button class="sdpi-item-value" onclick="openPage('github.com/tobimori/streamdeck-ifttt')">GitHub</button>
+    </div>
+</div>
+</body>
+
+</html>

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('eventname').value = payload.eventname;
+
+            if(document.getElementById('eventname').value == "undefined") {
+                document.getElementById('eventname').value = "";
+            }
+        }
+        if (jsonObj.event === 'didReceiveGlobalSettings') {
+            const payload = jsonObj.payload.settings;
+
+            document.getElementById('makerkey').value = payload.makerkey;
+
+            if(document.getElementById('makerkey').value == "undefined") {
+                document.getElementById('makerkey').value = "";
+            }
+
+            const el = document.querySelector('.sdpi-wrapper');
+            el && el.classList.remove('hidden');
+        }
+    };
+
+}
+
+function updateEventName() {
+    if (websocket && (websocket.readyState === 1)) {
+        let payload = {};
+        payload.eventname = document.getElementById('eventname').value;
+        const json = {
+            "event": "setSettings",
+            "context": uuid,
+            "payload": payload
+        };
+        websocket.send(JSON.stringify(json));
+        console.log(json)
+    }    
+}
+
+function updateMakerKey() {
+    if (websocket && (websocket.readyState === 1)) {
+        let payload = {};
+        payload.makerkey = document.getElementById('makerkey').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));
+    }
+}