From fd12b114d04bf2135559cce273cdce21b4deb1c6 Mon Sep 17 00:00:00 2001 From: venizelou andreas Date: Wed, 10 Jul 2024 20:11:20 +0300 Subject: [PATCH] UIUX optimization --- Protest/Front/deviceview.js | 84 ++++++++++++++++++++++++------------- Protest/Front/ui.js | 4 ++ Protest/Front/view.css | 17 -------- 3 files changed, 59 insertions(+), 46 deletions(-) diff --git a/Protest/Front/deviceview.js b/Protest/Front/deviceview.js index 99b65d69..8ccea623 100644 --- a/Protest/Front/deviceview.js +++ b/Protest/Front/deviceview.js @@ -900,28 +900,34 @@ class DeviceView extends View { this.liveD.textContent = ""; spinnerBox = document.createElement("div"); - spinnerBox.style.height = "88px"; + spinnerBox.style.height = "0"; spinnerBox.style.transition = ".2s"; this.liveB.appendChild(spinnerBox); - + const spinner = document.createElement("div"); spinner.className = "spinner"; spinner.style.textAlign = "left"; spinner.style.marginTop = "8px"; spinner.style.marginBottom = "8px"; spinner.style.transform = "scale(.85)"; - spinner.style.animation = "delayed-fade-in 1s ease-in 1"; + spinner.style.animation = "delayed-fade-in .65s ease-in 1"; spinner.appendChild(document.createElement("div")); const status = document.createElement("div"); status.textContent = "Retrieving device metrics..."; status.style.textAlign = "center"; status.style.fontWeight = "bold"; - status.style.animation = "delayed-fade-in 1.5s ease-in 1"; + status.style.animation = "delayed-fade-in 1s ease-in 1"; spinnerBox.append(spinner, status); this.liveStatsWebSockets.send(this.args.file); + + setTimeout(()=> { + if (this.liveStatsWebSockets && !this.liveStatsWebSockets.isClosed) { + spinnerBox.style.height = "88px"; + } + }, 400); }; this.liveStatsWebSockets.onmessage = async event=> { @@ -1234,7 +1240,7 @@ class DeviceView extends View { const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle"); dot.setAttribute("cx", x); dot.setAttribute("cy", 24); - dot.setAttribute("r", 2); + dot.setAttribute("r", 1); dot.setAttribute("fill", "var(--clr-light)"); svg.appendChild(dot); @@ -1266,10 +1272,6 @@ class DeviceView extends View { iconBox.style.backgroundImage = `url(${icon}?light)`; graphBox.appendChild(iconBox); - const infoBox = document.createElement("div"); - infoBox.className = "view-lifeline-info"; - graphBox.appendChild(infoBox); - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", 800); svg.setAttribute("height", `${height + 28}px`); @@ -1287,7 +1289,6 @@ class DeviceView extends View { for (let i=0; i<14; i++) { let x = 750 - i * 50; - const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); line.setAttribute("x1", x); line.setAttribute("y1", 0); @@ -1419,28 +1420,39 @@ class DeviceView extends View { d += `L ${750 - (today.getTime() - data[data.length - 1].d) / DeviceView.DAY_TICKS * 50} ${height + 5} Z`; path.setAttribute("d", d); + const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + circle.setAttribute("cx", 750 - (today.getTime() - data[data.length - 1].d) / DeviceView.DAY_TICKS * 50); + circle.setAttribute("cy", height + 5); + circle.setAttribute("r", 4); + circle.setAttribute("stroke", "#fff"); + circle.setAttribute("stroke-width", 2); + circle.setAttribute("fill", "none"); + circle.style.opacity = "0"; + circle.style.transition = ".25s cx, .25s cy, .1s opacity"; + svg.appendChild(circle); + + const valueLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); + valueLabel.setAttribute("x", 750 - (today.getTime() - data[data.length - 1].d) / DeviceView.DAY_TICKS * 50); + valueLabel.setAttribute("y", height + 5); + valueLabel.setAttribute("fill", "#fff"); + valueLabel.setAttribute("text-anchor", "end"); + valueLabel.style.fontSize = "12px"; + valueLabel.style.fontWeight = "700"; + valueLabel.style.opacity = "0"; + valueLabel.style.transition = ".25s x, .25s y, .1s opacity"; + svg.appendChild(valueLabel); graphBox.onmouseenter = ()=>{ - infoBox.style.opacity = "1"; + circle.style.opacity = "1"; + valueLabel.style.opacity = "1"; }; graphBox.onmouseleave = ()=>{ - infoBox.style.opacity = "0"; + circle.style.opacity = "0"; + valueLabel.style.opacity = "0"; }; graphBox.onmousemove = event=>{ - let right = graphBox.clientWidth - event.layerX + 12 - (graphBox.clientWidth - svg.clientWidth); - right = Math.max(right, 8); - right = Math.min(right, graphBox.clientWidth - infoBox.clientWidth - 8); - infoBox.style.right = `${right}px`; - - if (event.layerY > height / 2) { - infoBox.style.top = "4px"; - } - else { - infoBox.style.top = `${height-16}px`; - } - let closestX = 750 - Math.round((today.getTime() - data[0].d) / DeviceView.DAY_TICKS * 50); let closestIndex = 0; for (let i=0; i 0? Math.round(1000 * data[closestIndex].v / data[closestIndex].t) / 10 : 0; - infoBox.textContent = `${UI.SizeToString(data[closestIndex].v)} / ${UI.SizeToString(data[closestIndex].t)} (${percent}%)`; + valueLabel.textContent = `${UI.SizeToGB(data[closestIndex].v)} / ${UI.SizeToGB(data[closestIndex].t)} GB (${percent}%)`; + cy = (height + 4) - Math.round(height * data[closestIndex].v / data[closestIndex].t); } else if (type === "percent") { - infoBox.textContent = `${data[closestIndex].v}%`; + valueLabel.textContent = `${data[closestIndex].v}%`; + cy = (height + 4) - Math.round(height * data[closestIndex].v / 100); } else if (type === "delta") { - infoBox.textContent = data[closestIndex].delta; + valueLabel.textContent = data[closestIndex].delta; + cy = (height + 4) - Math.round(height * data[closestIndex].delta / max); } + + circle.setAttribute("cx", cx); + circle.setAttribute("cy", cy); + + valueLabel.setAttribute("x", cx - 8); + valueLabel.setAttribute("y", Math.max(cy - 8, 10)); }; return svg; diff --git a/Protest/Front/ui.js b/Protest/Front/ui.js index a879cb19..e9a3fd1d 100644 --- a/Protest/Front/ui.js +++ b/Protest/Front/ui.js @@ -248,6 +248,10 @@ const UI = { if (size < 8_192 * Math.pow(1024,8)) return `${(size / Math.pow(1024,8)).toFixed(2)} BB`; }, + SizeToGB: size=> { + return (size / Math.pow(1024,3)).toFixed(2); + }, + BytesPerSecToString: bps=> { if (bps < 8_192) return `${bps} Bps`; if (bps < 8_192 * 1024) return `${(bps / 1024).toFixed(2)} KBps`; diff --git a/Protest/Front/view.css b/Protest/Front/view.css index 9a9f7912..c3e50e65 100644 --- a/Protest/Front/view.css +++ b/Protest/Front/view.css @@ -577,23 +577,6 @@ button.view-live-button:active { transition: .4s; } -.view-lifeline-graph > .view-lifeline-info { - position: absolute; - z-index: 2; - min-Width: 50px; - min-Height: 20px; - padding: 0 4px; - box-sizing: border-box; - color: var(--clr-dark); - background-color: var(--clr-pane); - border-radius: 2px; - box-sizing: rgba(32,32,32,.5) 0 0 4px; - opacity: 0; - pointer-events: none; - white-space: nowrap; - transition: opacity .25s, top .2s; -} - .view-lifeline-graph:hover > .view-lifeline-label, .view-lifeline-graph:hover > .view-lifeline-icon{ opacity: 0;