Windows Taskbar Context Menu Implemented

This commit is contained in:
2022-12-14 17:36:27 +02:00
parent 4870bf7883
commit 55e6f28f9d
7 changed files with 134 additions and 44 deletions
-1
View File
@@ -1 +0,0 @@
document.getElementById("ON").onclick=api.func;
+7 -1
View File
@@ -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>
+41 -22
View File
@@ -1,28 +1,47 @@
const dgram = require("node:dgram");
const find = require("local-devices");
const MAC_adress="a8:bb:50:4c:e6:1a";
const port=38899;
const message={"method": "setPilot","params": {}}
const getmsg={"method":"getPilot","params":{}}
let address="";
class InternetConnection{
constructor(MAC_address,IP=null){
if(IP==null){
this.findIP();
}
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)=>{
find().then(devices=>{
devices.forEach(device => {
if(device.mac===MAC_adress){
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());
});
sendData(params){
const message=this.setmsg;
message.params=params;
this.sendMessage(message);
}
};
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}
+27 -5
View File
@@ -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;
max-height: 600px;
width: 330px;
height: 600px;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto auto;
grid-template-columns: 50% 50%;
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;
}