nodes/syllebra-bilbox-comfyui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add reboot button/menu compatibility with new UI

Browse Source
This commit is contained in:
syllebra
2024-09-12 15:46:06 -10:00
parent fa98195d50
commit 5aedea2565
3 changed files with 80 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pyproject.toml
+1 -1
View File
@@ -1,7 +1,7 @@
[project]
name = "bilbox-comfyui"
description = "Nodes: BilboX's PromptGeek Photo Prompt. This provides a convenient way to compose photorealistic prompts into ComfyUI. Post-Processing: adds various post processing effects. Bonus: Option to show a distant server shutdown menu."
version = "1.0.0"
version = "1.0.1"
license = {file = "LICENSE"}
dependencies = ["colour-science>=0.4.3", "numpy>=1.19.0", "imageio>=2.31.0", "opencv-python>=4.8.1.78"]
web/bilbox.css
+11 -5
View File
@@ -286,7 +286,13 @@
}
#bxRebootContextMenu .menu {
.bx-reboot-cm-new {
left: 50px;
bottom: 0px;
position:absolute;
}
.bx-reboot-context-menu .menu {
list-style: none;
display: flex;
flex-direction: column;
@@ -295,7 +301,7 @@
box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
padding: 10px 0;
}
#bxRebootContextMenu .menu > li > a {
.bx-reboot-context-menu .menu > li > a {
font: inherit;
border: 0;
padding: 10px 30px 10px 15px;
@@ -311,13 +317,13 @@ transition: 0.5s linear;
-ms-transition: 0.5s linear;
-o-transition: 0.5s linear;
}
#bxRebootContextMenu .menu > li > a:hover {
.bx-reboot-context-menu .menu > li > a:hover {
background:#161616;
color: #97a9c4;
}
#bxRebootContextMenu .menu > li > a > i {
.bx-reboot-context-menu .menu > li > a > i {
padding-right: 10px;
}
#bxRebootContextMenu .menu > li.shutdown > a:hover {
.bx-reboot-context-menu .menu > li.shutdown > a:hover {
color: red;
}
web/reboot.js
+68 -39
View File
@@ -6,36 +6,13 @@ app.registerExtension({
},
async setup() {
const menu = document.querySelector(".comfy-menu");
const separator = document.createElement("hr");
separator.style.margin = "20px 0";
separator.style.width = "100%";
//menu.append(separator);
const rebootButton = document.createElement("button");
rebootButton.textContent = "Server...";
rebootButton.onclick = () => {
if (document.getElementById("bxRebootContextMenu") .style.display == "block"){
document.getElementById("bxRebootContextMenu").style.display = "none" ;
function toggle_menu(el) {
if ( el.style.display == "block"){
el.style.display = "none" ;
}else{
var menu = document.getElementById("bxRebootContextMenu")
menu.style.display = 'block';
el.style.display = 'block';
}
}
menu.append(rebootButton);
menu.insertAdjacentHTML('beforeend',' \
<div id="bxRebootContextMenu" class="bx-reboot-context-menu" style="display: none"> \
<ul class="menu"> \
<li class="lock"><a href="#">Lock Session</a></li> \
<li class="logout"><a href="#">Logout</a></li> \
<li class="reboot"><a href="#">Reboot</a></li> \
<li class="shutdown"><a href="#">Shutdown</a></li> \
</ul> \
</div> ');
}
function apiReboot(type) {
api.fetchApi('/bilbox/reboot?mode='+type)
@@ -50,14 +27,58 @@ app.registerExtension({
});
}
menu.querySelector(".lock").onclick = () => { apiReboot("lock");}
menu.querySelector(".logout").onclick = () => { apiReboot("logout");}
menu.querySelector(".reboot").onclick = () => { apiReboot("reboot");}
menu.querySelector(".shutdown").onclick = () => { apiReboot("shutdown");}
function create_menu(el, id, isnew=false) {
rebootButton.style.background = "linear-gradient(90deg, #442222 0%, #222222 100%)";
//rebootButton.style.color = "black";
let cl = "bx-reboot-context-menu";
if(isnew)
cl = "bx-reboot-cm-new " + cl;
el.insertAdjacentHTML('beforeend',' \
<div id="'+id+'" class="'+cl+'" style="display: none"> \
<ul class="menu"> \
<li class="lock"><a href="#">Lock Session</a></li> \
<li class="logout"><a href="#">Logout</a></li> \
<li class="reboot"><a href="#">Reboot</a></li> \
<li class="shutdown"><a href="#">Shutdown</a></li> \
</ul> \
</div> ');
el.querySelector(".lock").onclick = () => { apiReboot("lock");}
el.querySelector(".logout").onclick = () => { apiReboot("logout");}
el.querySelector(".reboot").onclick = () => { apiReboot("reboot");}
el.querySelector(".shutdown").onclick = () => { apiReboot("shutdown");}
}
// Old Interface
const menu = document.querySelector(".comfy-menu");
if(menu)
{
const rebootButton = document.createElement("button");
rebootButton.id = "bxRebootButtonOld";
rebootButton.textContent = "Server...";
rebootButton.onclick = () => { toggle_menu(document.getElementById("bxRebootContextMenuOld")) }
rebootButton.style.background = "linear-gradient(90deg, #442222 0%, #222222 100%)";
menu.append(rebootButton);
create_menu(menu, "bxRebootContextMenuOld")
}
// New interface
const side_tb = document.querySelector(".side-tool-bar-end");
const params_button = document.querySelector(".pi-cog");
if(side_tb && params_button)
{
const shutButton = params_button.parentElement.cloneNode(true);
shutButton.id = "bxRebootButtonNew";
let shuticon = shutButton.querySelector(".pi-cog");
shuticon.classList.remove("pi-cog");
shuticon.classList.add("pi-power-off");
side_tb.append(shutButton);
shutButton.onclick = () => { toggle_menu(document.getElementById("bxRebootContextMenuNew")) }
create_menu(document.querySelector(".side-tool-bar-container"), "bxRebootContextMenuNew", true)
}
const setting = app.ui.settings.addSetting({
id: "BilboX.DistantShutdownMenu",
@@ -65,13 +86,21 @@ app.registerExtension({
defaultValue: false,
type: "boolean",
onChange: async (v) => {
console.log("Value:",v, rebootButton);
rebootButton.style.display = v ? "block":"none";
if(!v)
document.getElementById("bxRebootContextMenu").style.display = "none";
let b_old = document.getElementById("bxRebootButtonOld");
let m_old = document.getElementById("bxRebootContextMenuOld");
if(b_old)
b_old.style.display = v ? "block":"none";
if(!v && m_old)
m_old.style.display = "none";
let b_new = document.getElementById("bxRebootButtonNew");
let m_new = document.getElementById("bxRebootContextMenuNew");
if(b_new)
b_new.style.display = v ? "block":"none";
if(!v && m_new)
m_new.style.display = "none";
}
});
},
});