Windows Taskbar Context Menu Implemented

.gitignore

@@ -1 +1,2 @@
 node_modules
+out

main.js

@@ -1,13 +1,10 @@
-const { app, Tray, Menu, nativeImage, BrowserWindow, ipcMain } = require('electron')
+const { app, Tray, Menu, nativeImage, BrowserWindow, ipcMain, globalShortcut } = require('electron')
 const path = require('path');
-const {sendData} = require("./src/internetConnection.js")
+const {InternetConnection} = require("./src/internetConnection.js")
 
 let tray
 let win
 
-
-ipcMain.on("call",(_event,params)=>{sendData(params)})
-
 const createWindow=()=>{
     win = new BrowserWindow({
         width: 350,
@@ -25,23 +22,69 @@ const createWindow=()=>{
 app.whenReady().then(() => {
   const icon = nativeImage.createFromDataURL('data:image/png;base64,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')
   tray = new Tray(icon)
-  createWindow()
+//  createWindow()
+
+const internetConnection= new InternetConnection()
+ipcMain.on("call",(_event,params)=>{internetConnection.sendData(params)})
 
   const Brightness = Menu.buildFromTemplate([
-    { label:"10%",type: "normal",click:()=>{sendData({"dimming":10})}},
+    { label:"10%",type: "normal",click:()=>{internetConnection.sendData({"dimming":10})}},
-    { label:"25%",type: "normal",click:()=>{sendData({"dimming":25})}},
+    { label:"25%",type: "normal",click:()=>{internetConnection.sendData({"dimming":25})}},
-    { label:"50%",type: "normal",click:()=>{sendData({"dimming":50})}},
+    { label:"50%",type: "normal",click:()=>{internetConnection.sendData({"dimming":50})}},
-    { label:"75%",type: "normal",click:()=>{sendData({"dimming":75})}},
+    { label:"75%",type: "normal",click:()=>{internetConnection.sendData({"dimming":75})}},
-    { label:"100%",type: "normal",click:()=>{sendData({"dimming":100})}},
+    { label:"100%",type: "normal",click:()=>{internetConnection.sendData({"dimming":100})}},
+  ])
+  const White = Menu.buildFromTemplate([
+    { label:"Warm White",type: "normal",click:()=>{internetConnection.sendData({"sceneId":11})}},
+    { label:"Daylight",type: "normal",click:()=>{internetConnection.sendData({"sceneId":12})}},
+    { label:"Cool White",type: "normal",click:()=>{internetConnection.sendData({"sceneId":13})}},
+    { label:"Night Light",type: "normal",click:()=>{internetConnection.sendData({"sceneId":14})}},
+  ])
+  const Dynamic = Menu.buildFromTemplate([
+    { label:"Candlelight",type: "normal",click:()=>{internetConnection.sendData({"sceneId":29})}},
+    { label:"Fireplace",type: "normal",click:()=>{internetConnection.sendData({"sceneId":5})}},
+    { label:"Fall",type: "normal",click:()=>{internetConnection.sendData({"sceneId":22})}},
+    { label:"Club",type: "normal",click:()=>{internetConnection.sendData({"sceneId":26})}},
+    { label:"Sunset",type: "normal",click:()=>{internetConnection.sendData({"sceneId":3})}},
+    { label:"Romance",type: "normal",click:()=>{internetConnection.sendData({"sceneId":2})}},
+    { label:"Party",type: "normal",click:()=>{internetConnection.sendData({"sceneId":4})}},
+    { label:"Pastel Colors",type: "normal",click:()=>{internetConnection.sendData({"sceneId":8})}},
+    { label:"Spring",type: "normal",click:()=>{internetConnection.sendData({"sceneId":20})}},
+    { label:"Summer",type: "normal",click:()=>{internetConnection.sendData({"sceneId":21})}},
+    { label:"Forest",type: "normal",click:()=>{internetConnection.sendData({"sceneId":7})}},
+    { label:"Jungle",type: "normal",click:()=>{internetConnection.sendData({"sceneId":24})}},
+    { label:"Mojito",type: "normal",click:()=>{internetConnection.sendData({"sceneId":25})}},
+    { label:"Ocean",type: "normal",click:()=>{internetConnection.sendData({"sceneId":1})}},
+    { label:"Deep Dive",type: "normal",click:()=>{internetConnection.sendData({"sceneId":23})}},
+    { label:"Pulse",type: "normal",click:()=>{internetConnection.sendData({"sceneId":31})}},
+    { label:"Golden White",type: "normal",click:()=>{internetConnection.sendData({"sceneId":30})}},
+    { label:"Steampunk",type: "normal",click:()=>{internetConnection.sendData({"sceneId":32})}},
+    { label:"Christmas",type: "normal",click:()=>{internetConnection.sendData({"sceneId":27})}},
+    { label:"Halloween",type: "normal",click:()=>{internetConnection.sendData({"sceneId":28})}},
+
+  ])
+  const color = Menu.buildFromTemplate([
+    { label:"Vermilion",type: "normal",click:()=>{internetConnection.sendData({"r":255,"g":75,"b":0,"c":0,"w":54})}},
   ])
 
 
   const contextMenu = Menu.buildFromTemplate([
+    { label:"ON",type: "normal",click:()=>{internetConnection.sendData({"state":true})}},
+    { label:"OFF",type: "normal",click:()=>{internetConnection.sendData({"state":false})}},
     { label:"Brightness", type:"submenu", submenu:Brightness},
-    { label:"Close", type: "normal", click:()=>{win.close()}}
+    { label:"Dynamic", type:"submenu", submenu:Dynamic},
+    { label:"White",type:"submenu",submenu:White},
+    // { label:"Get State",type:"normal",click:()=>{internetConnection.getState()}},
+    { label:"Color",type:"submenu",submenu:color},
+    { label:"Close", type: "normal", click:()=>{app.quit()}},
   ])
 
-  tray.addListener("click",()=>{win.isVisible() ? win.hide() : win.show()});
+//  tray.addListener("click",()=>{win.isVisible() ? win.hide() : win.show()});
   tray.setToolTip('WIZ App')
   tray.setContextMenu(contextMenu)
+  tray.addListener("click",()=>{tray.popUpContextMenu()})
+  const shortcut=globalShortcut.register("`",()=>{
+    tray.popUpContextMenu()
+  })
+
 })

package.json

@@ -12,7 +12,7 @@
     "@electron-forge/maker-zip": "^6.0.0-beta.65",
     "electron": "^19.0.8"
   },
-  "name": "taskbarapp",
+  "name": "WIZ App",
   "version": "1.0.0",
   "description": "Testing",
   "main": "main.js",
@@ -21,7 +21,7 @@
     "package": "electron-forge package",
     "make": "electron-forge make"
   },
-  "author": "",
+  "author": "Daniel Cujba",
   "license": "ISC",
   "config": {
     "forge": {

src/button.js

@@ -1 +0,0 @@
-document.getElementById("ON").onclick=api.func;

src/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <title>WizBulbs</title>
     <link rel="stylesheet" type="text/css" href="style.css" >
-    <script src='./button.js'></script>
   </head>
   <body>
     <div class="container">
@@ -13,6 +12,13 @@
       <div class="button" id="B10" onclick="api.func({'dimming':10})">10%</div>
       <div class="button" id="B50" onclick="api.func({'dimming':50})">50%</div>
       <div class="button" id="B100" onclick="api.func({'dimming':100})">100%</div>
+      <div class="slider" id="temp">
+        <input class="range" id="range" type="range" min="2200" max="6300" onchange="api.func({'temp':parseInt(this.value)})"> 
+      </div>
+      <div class="slider" id="brightness">
+        <input class="range" id="range" type="range" min="10" max="100" onchange="api.func({'dimming':parseInt(this.value)})"> 
+      </div>
+      
     </div>
   </body>
 </html>

src/internetConnection.js

@@ -1,28 +1,47 @@
 const dgram = require("node:dgram");
 const find = require("local-devices");
 
-const MAC_adress="a8:bb:50:4c:e6:1a";
+class InternetConnection{
-const port=38899;
+    constructor(MAC_address,IP=null){
-const message={"method": "setPilot","params": {}}
+        if(IP==null){
-const getmsg={"method":"getPilot","params":{}}
+            this.findIP();
-let address="";
+        }
+        else{
+            this.address=IP;
+        }
+        this.MAC_address=MAC_address;
+        this.port=38899;
+        this.setmsg={"method": "setPilot","params": {}};
+        this.getmsg={"method":"getPilot","params":{}};
+        this.server=new dgram.createSocket("udp4");
+    }
 
-const sendData = (params)=>{
+    sendData(params){
-    find().then(devices=>{
+        const message=this.setmsg;
-        devices.forEach(device => {
+        message.params=params;
-            if(device.mac===MAC_adress){
+        this.sendMessage(message);
-                address=device.ip;
+    }
-            }
-        });
-        message.params=params
-    }).then(()=>{
-        server.send(JSON.stringify(message),port,address);
-    })   
-    const server=new dgram.createSocket("udp4");
-    server.on("message",(msg,rinfo)=>{
-        console.log(msg.toString()+" "+rinfo.toString());
-    });
     
-};
+    getState(){
+        this.sendMessage(this.getmsg);
+    }
+    
+    findIP(){
+        find().then(devices=>{
+            devices.forEach(device => {
+                if(device.mac===this.MAC_address){
+                    this.address=device.ip;
+                }
+            });
+        })
+    }
+    
+    sendMessage(message){
+        this.server.send(JSON.stringify(message),this.port,this.address);
+        this.server.on("message",(msg,rinfo)=>{
+            console.log(msg.toString()+" "+rinfo.toString());
+        });
+    }
+}
 
-module.exports={sendData}
+module.exports={InternetConnection}

src/style.css

@@ -14,6 +14,8 @@
     overflow: hidden;
     text-align: center;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    width: 50%;
+    text-align: center;
    }
    
    .button::before {
@@ -28,7 +30,7 @@
     z-index: -1;
     -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
     box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
-    transition: all 250ms
+    transition: all 250ms;
    }
    
    .button:hover {
@@ -40,12 +42,16 @@
    }
 
 .container{
-    max-width: 330px;
+    width: 330px;
-    max-height: 600px;
+    height: 600px;
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: 50% 50%;
-    grid-template-rows: auto auto auto auto;
+    grid-template-rows: auto auto auto auto auto auto;
     gap: 20px 20px;
+    border-color:#000000;
+    background-color: #b8b8b8;
+    padding: 10px;
+    border-radius: 10px;
 }
 
 #ON{
@@ -68,3 +74,19 @@
     grid-column: 1;
     grid-row: 3;
 }
+.slider{
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+.range{
+    width: 80%;
+}
+#temp{
+    grid-column: 1;
+    grid-row: 4;
+}
+#brightness{
+    grid-column: 2;
+    grid-row: 4;
+}