soruh/centralex
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add connected symbol

Browse Source
This commit is contained in:
soruh 2023-06-11 05:29:59 +02:00
parent 04deb1d89c
commit 75c12677d9
5 changed files with 77 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
build.rs
View File

@ -2,9 +2,10 @@ fn main() {
#[cfg(feature = "debug_server")] #[cfg(feature = "debug_server")]
pack_debug_page().unwrap(); pack_debug_page().unwrap();
println!("cargo:rerun-if-changed=main.js"); println!("cargo:rerun-if-changed=web/main.js");
println!("cargo:rerun-if-changed=index.html"); println!("cargo:rerun-if-changed=web/index.html");
println!("cargo:rerun-if-changed=main.css"); println!("cargo:rerun-if-changed=web/main.css");
println!("cargo:rerun-if-changed=web/connected.svg");
} }
#[cfg(feature = "debug_server")] #[cfg(feature = "debug_server")]
@ -17,6 +18,7 @@ fn pack_debug_page() -> Result<(), Box<dyn std::error::Error>> {
let js = std::fs::read_to_string("web/main.js").unwrap(); let js = std::fs::read_to_string("web/main.js").unwrap();
let html = std::fs::read_to_string("web/index.html").unwrap(); let html = std::fs::read_to_string("web/index.html").unwrap();
let css = std::fs::read_to_string("web/main.css").unwrap(); let css = std::fs::read_to_string("web/main.css").unwrap();
let svg = std::fs::read_to_string("web/connected.svg").unwrap();
let mut out = Vec::new(); let mut out = Vec::new();
minify_js::minify( minify_js::minify(
@ -30,9 +32,15 @@ fn pack_debug_page() -> Result<(), Box<dyn std::error::Error>> {
let css = Minifier::default().minify(&css, Level::Three).unwrap(); let css = Minifier::default().minify(&css, Level::Three).unwrap();
let (start, end) = html
.split_once("<!--INSERT SVG HERE-->")
.expect("did not find svg split point in html");
let html = format!("{start}{svg}{end}");
let (head, body) = html let (head, body) = html
.split_once("<!--INSERT HEAD CONTENT HERE-->") .split_once("<!--INSERT HEAD CONTENT HERE-->")
.expect("did not find split point in html"); .expect("did not find head split point in html");
let html = minify_html::minify( let html = minify_html::minify(
format!("{head}<style>{css}</style><script>{js}</script>{body}").as_bytes(), format!("{head}<style>{css}</style><script>{js}</script>{body}").as_bytes(),

1
web/connected.svg Normal file
View File

@ -0,0 +1 @@
<svg><g transform="translate(-38.3 -51.4)"><path d="m98.8 55.1-6.52 6.52-3.78-3.78 6.52-6.52zm-7.49 20.5-8.5 8.5-16.8-16.8 8.5-8.5zm-16.9 0.0741a11.9 11.9 45 0 1 0.0256-16.8 11.9 11.9 45 0 1 16.8-0.0256 11.9 11.9 45 0 1-0.0256 16.8 11.9 11.9 45 0 1-16.8 0.0256zm-36.2 32.6 6.52-6.52 3.78 3.78-6.52 6.52zm19.7-25.3 8.39-8.39 1.88 1.88-8.39 8.39zm7.46 7.5 8.39-8.39 1.88 1.88-8.39 8.39zm-19.7-2.72 8.5-8.5 16.8 16.8-8.5 8.5zm16.9-0.0741a11.9 11.9 45 0 1-0.0256 16.8 11.9 11.9 45 0 1-16.8 0.0256 11.9 11.9 45 0 1 0.0256-16.8 11.9 11.9 45 0 1 16.8-0.0256z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 564 B

2
web/index.html
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
<p id="last_update" /> <p id="last_update" />
<pre id="data"></pre> <pre id="data"></pre>
<list id="list" /> <list id="list" />

20
web/main.css
View File

@ -1,3 +1,23 @@
body { body {
background-color: #eee; background-color: #eee;
}
#connected {
position: absolute;
top: 5%;
right: 5%;
width: 5%;
height: 5%;
}
.visible {
opacity: 1;
/* visibility: visible; */
transition: opacity 500ms linear;
}
.hidden {
/* visibility: hidden; */
opacity: 0.2;
transition: opacity 6000ms linear;
} }

61
web/main.js
View File

@ -1,28 +1,53 @@
window.onload = () => { window.onload = () => {
const evtSource = new EventSource("/events");
const data = document.getElementById("data"); const data = document.getElementById("data");
const last_update = document.getElementById("last_update"); const last_update = document.getElementById("last_update");
evtSource.addEventListener("change", event => { const connected = document.getElementById("connected");
console.log(event);
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`; const timeout_duration = 10*1000;
const retry_timeout = 5*1000;
const newElement = document.createElement("li"); let reconnect_timeout;
const eventList = document.getElementById("list"); let ping_timeout;
newElement.textContent = `change at ${+event.data}`; let evtSource;
eventList.appendChild(newElement);
fetch("/data").then(res => res.json().then(res => data.innerText = JSON.stringify(res, null, 1)));
});
evtSource.addEventListener("ping", event => { let connect_event_source = () => {
console.log(event);
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`; clearTimeout(reconnect_timeout);
clearTimeout(ping_timeout);
ping_timeout = setTimeout(connect_event_source, timeout_duration);
evtSource && evtSource.close && evtSource.close();
evtSource = new EventSource("/events");
evtSource.addEventListener("change", event => {
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
fetch("/data")
.then(res => res.json())
.then(res => data.innerText = JSON.stringify(res, null, 1));
});
evtSource.addEventListener("ping", event => {
clearTimeout(ping_timeout);
ping_timeout = setTimeout(connect_event_source, timeout_duration);
console.log("ping", new Date());
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
connected.className = "visible";
setTimeout(() => connected.className = "hidden", 1000);
});
evtSource.onerror = () => {
clearTimeout(reconnect_timeout);
reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
};
}
connect_event_source();
const newElement = document.createElement("li");
const eventList = document.getElementById("list");
newElement.textContent = `ping at ${+event.data}`;
eventList.appendChild(newElement);
});
}; };