Windows Taskbar Context Menu Implemented
This commit is contained in:
@@ -1 +0,0 @@
|
||||
document.getElementById("ON").onclick=api.func;
|
||||
+7
-1
@@ -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
@@ -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
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user