Hello, I would like to replace Übersicht with the new BTT's floating menus but I struggle to create event the simplest "widget". Is it event possible to use it like that? Is it meant to be used like that?
Simple widget description:
I am psn trophy hunter and I have Übersicht widget that shows my trophy card on my desktop. The trophy card is publicly available .png image. Let's pretend, that this is the link to the trophy card: https://upload.wikimedia.org/wikipedia/commons/8/89/PNG-Gradient.png. How/Can I use BTT to show this image on my desktop aligned to bottom right corner? Maybe even better for that would be macOS native desktop widgets feature.
Yep currently a web view item is the best way (you can use chatgpt to convert your übersicht widget to plain html + js). in general it should also be possible with standard items and some java script, but I'm currently ironing out some final issues there. I'll post an update here once this stuff is also fully possible without webview items.
Thx for your example. I was able to use it as base and achieve the 1:1 result from what I have in XXX . It's shame that to achieve this result, I need to hardcode many things (size of image + padding). Is there way to reload the image let's say every 6 hours? I see that there is Script tab there but I don't know how would I achieve that.
let shellScript = `/path/to/your/ip.widget/ip.sh`;
let shellScriptWrapper = {
script: shellScript
};
// this will execute the Shell Script and store the result in the result variable.
let result = await runShellScript(shellScriptWrapper);
Here is a ChatGPT converted version of your linked example (you would still need to adapt the path to the ip.sh file) . This was the prompt:
Can you convert this to standard html & javascript?
To run shell scripts you can assume a runShellScript function is available and make use of it, example:
let result = await runShellScript({script: "say hello"})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IP Widget</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Fira Code Retina', monospace;
color: #fff;
background-color: #000;
}
#ip-widget {
position: absolute;
bottom: 5px;
left: 5px;
font-weight: 100;
font-size: 12px;
}
span {
color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div id="ip-widget">
Loading...
</div>
<script>
const refreshFrequency = 10000; // Refresh every 10 seconds
async function fetchIPData() {
try {
// Run the shell script to fetch IP data
const result = await runShellScript({ script: "ip.widget/ip.sh" });
// Parse the output assuming it's a JSON structure
const data = JSON.parse(result);
const interfaces = data.interfaces;
// Construct the table HTML
let tableHtml = '<table><tbody>';
interfaces.forEach(iface => {
const cidr = iface.cidr ? `/${iface.cidr}` : '';
const router = iface.router ? ` -> ${iface.router}` : '';
tableHtml += `
<tr>
<td>${iface.iface}:
<span>${iface.address}</span>
<span style="color: rgba(255,255,255,0.8);">${cidr}</span>
<span style="color: rgba(255,255,255,0.6);">${router}</span>
</td>
</tr>
`;
});
tableHtml += '</tbody></table>';
// Update the widget content
document.getElementById('ip-widget').innerHTML = tableHtml;
} catch (error) {
// Display error message if something goes wrong
document.getElementById('ip-widget').innerHTML = `
<div>Oops: <strong>${error.message}</strong></div>
`;
}
}
// Initial fetch and set an interval for refreshing
fetchIPData();
setInterval(fetchIPData, refreshFrequency);
</script>
</body>
</html>
Ok, was able to achieve same results with the proposed script in Standard Item. It again required big amount of hardcoding (menu size to be exactly same as picture size) but the script version feels like much better "template" for other widgets I have and it is cleaner with the refresh. Thx
(on picture, upper version is standard item and bottom version is web item)
is the "runShellScript" working in current alpha versions? I am getting the SyntaxError: Unexpected identifier 'runShellScript'. Expected ';' after variable declaration. Even for the "Running Shell Scripts from the WebView" example from here: Apple Scripts & Shell Scripts in the webview · GitBook
In general it works fine, however there is an issue I noticed with your export:
While you had the standard item script deactivated, the webview item did still execute it, resulting in the error (because there is a syntax error in there). I'll fix that.
