I have a floating menu with webview that refreshes every 5 minutes. But it ends up with shadow of the previous content sometimes. How do I avoid it ?
Here's an example -
Can you share this floating menu?
Here is the preset.
quotes_floating_menu.bttpreset (15.9 KB)
Not sure why, but when I import it - I cannot see the menu. Either way I see that the "Web view config" is some html, but you said that the webview refreshes every 5 mins, how is this refresh done?
@hirendhindocha, could you share the HTML your menu is referencing? Try setting a background color in your HTML, with transparent blurred webviews, such artifacts can happen in some situations. There are ways to get rid of them, but easiest is just setting a background color.
random_doc.html (1.2 KB)
The reason I wanted a transparent background is so that the desktop wallpaper is visible. Now I have another problem, the refresh does not happen at all. As you can see in the HTML, there is a small javascript that calls the qotd.txt . I have nginix serving on port 9000 and the webview config is http://localhost:9000/random_doc.html . I don’t see that being requested in the access.log . Does BTT cache the results ? How do I force BTT to fetch the content ?
I have several such widgets on my second screen . I have one for my meetings, one for my todo from Things, one for quotes and one for the caption of desktop image being shown. I’m using BTT from Setapp and the version is 5.640
Is there a log that BTT generates ? Any way I can see what it thinks it should be doing ?
The BTT fetch mechanism doesn't specifically declare the caching behavior and instead uses the platform and server defaults.
However you can usually easily get around any caching by adding some random query parameter. Here an example that just appends the current timestamp
<script>
async function fetchContent() {
try {
const response = await fetch(`qotd.txt?q=${Date.now()}`);
const text = await response.text();
const lines = text.trim().split("\n");
const html = lines.map((line) => `<div>${line}</div>`).join("");
document.getElementById("content").innerHTML = html;
} catch (err) {
document.getElementById("content").innerText = "Failed to load.";
console.error("Fetch error:", err);
}
}
fetchContent(); // Initial load
setInterval(fetchContent, 300000); // Refresh every 5 minutes
</script>
Thanks. In the BTT setup, I changed one thing - I added “open links in system browser with prefix http” and for now it seems to be refreshing as I expected. I still have the shadow on a refresh
possibly try a backdrop effect like this: Realtime Backdrop effects in Floating Webview - #2 by yw4z