webview popover - Githubissues

cycle4passion commented 2 years ago

This is an enhancement request. The data from swiftbar could be output to HTML file, that is visualized in a popover webview such as on main menubar display mouseover and/or item clicks. Ideally this would also give the author webview size controls. This open source project (no affiliation) gives you a good idea: Menubar Popup Browser

melonamin commented 2 years ago

#!/bin/bash

echo ":house:| href=https://google.com webview=true webvieww=720 webviewh=400"
echo "---"
echo "My link| href=https://apple.com"

Reusing href, new webviewparameter enables the popover, webvieww and webviewh are optional width and height of the popover.

cycle4passion commented 2 years ago

Very nice.

how would this Will this support a local html file? I was thinking Swiftbar aggregates the data, and then writes it out to html file in a display format of your choice.

melonamin commented 2 years ago

Exactly the same, you can put local file url like file:///Users/user/Documents/index.html in href

Here is a test build, if you want to give it a try SwiftBar.app.zip

cycle4passion commented 2 years ago

It looks like when you attach a webview to the menubar display, it blocks the click triggering the dropdown of other information. Can you display on mouseover rather than click?

melonamin commented 2 years ago

Try using the right click!

cycle4passion commented 2 years ago

Right click is a little hidden, as we always accessed via left click, but if mousover is difficult, I am more than happy to have this functionality.

I was trying to write out to the plugin directory in node. Successful with hardcoded path, but having trouble accessing ENV variable SWIFTBAR_PLUGIN_PATH

const fs = require('fs');
const writefile = (data, filename="") => {
    if (!filename) {
        filename = `/Users/scottrhamy/Documents/Shared/Application Settings/Swiftbar/plugins/BTC Holdings/index.html`; // works
        //filename = `${SWIFTBAR_PLUGIN_PATH}/index.html` // breaks
    }
    fs.writeFile(filename, data, (err) => {
        if (err) {
            console.log(err);
        }
    });
}

let html = `<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../base.css">
</head>
<body>
Hello, world!
</body>
</html>`

writefile(html)

melonamin commented 2 years ago

It fails because SWIFTBAR_PLUGIN_PATH is the file path to plugin's file, and you're trying to use it as a folder. You should use either SWIFTBAR_PLUGIN_CACHE_PATH or SWIFTBAR_PLUGIN_DATA_PATH

melonamin commented 2 years ago

Right click is a little hidden, as we always accessed via left click, but if mousover is difficult, I am more than happy to have this functionality.

As for right title - it was there since the beginning, and it was in BitBar forever. It is a common pattern for other menu bar items on the Mac as well. Mouse over is not difficult to implement, it is prone to accidental activation which will be annoying.

cycle4passion commented 2 years ago

Now that you have explained it, I agree mouseover would be annoying.

Accessing any ENV variables in node causes plug-in to disappear. No warning icon on menubar, no warnings in console. Anywhere else to look for logs?

melonamin commented 2 years ago

SwiftBar is running but plugin disappears from the menu bar? One potential reason for that - SwiftBar would hide plugin if it produces empty output

You can check Debug View, see this comment

cycle4passion commented 2 years ago

defaults write com.ameba.SwiftBar PluginDebugMode -bool YES
Run Swiftbar 1.4.3
Choose plug in debug
Update plug in with ENV reference (as below)
Refresh plug in

Screen Shot 2022-01-17 at 7 08 41 AM

fails in 1.4.2 - CONSOLE v142

and 1.4.3 - CONSOLE v1 4 3

Minimal reproducible Node example: Error.js

#!/usr/bin/env /usr/local/bin/node
// <bitbar.title>Erroring in Node</bitbar.title>
// <bitbar.version>v1.0</bitbar.version>
// <bitbar.author>Scott Rhamy</bitbar.author>
// <bitbar.author.github>cycle4passion</bitbar.author.github>
// <bitbar.desc></bitbar.desc>
// <bitbar.image></bitbar.image>
// <bitbar.dependencies>node - https://nodejs.org/en/download/</bitbar.dependencies>
// <bitbar.abouturl></bitbar.abouturl>
// </swiftbar.environment> 
// <swiftbar.runInBash>false</swiftbar.runInBash>

(async () => {
  console.log(`SWIFTBAR_VERSION: ${SWIFTBAR_VERSION}`);
  console.log(`---`);
})();

melonamin commented 2 years ago

This is not how you access env variables in node.js, do this:

console.log(`SWIFTBAR_VERSION: ${process.env.SWIFTBAR_VERSION}`);

cycle4passion commented 2 years ago

I have been playing around with more...

I pointed Swiftbar at:

console.log('hello | href=file:///Users/username/Documents/Shared/Application Settings/Swiftbar/cache/index.html webview=true webvieww=720 webviewh=400');

it failed. I dropped it into the browser URL, and it worked. Noticed it appropriately URIencoded it

file:///Users/scottrhamy/Documents/Shared/Application%20Settings/Swiftbar/cache/index.html

Maybe consider URIencode() on the swiftbar side so people can copy path from finder/explorer and use it with spaces.

melonamin commented 2 years ago

Added

arohl commented 2 years ago

Not sure that the URLencode enhancement is working

`Australia 391 | href=file:///Users/andrew/Library/Application%20Support/SwiftBar/Plugins/testcricket.5m.py/innings_1.html webview=true webvieww=650 webviewh=800

Australia 391 | href=file:///Users/andrew/Library/Application Support/SwiftBar/Plugins/testcricket.5m.py/innings_1.html webview=true webvieww=650 webviewh=800 `

The first of these works but the second doesn't

melonamin commented 2 years ago

@arohl SwiftBar line parameters must be quoted, it should be like this: Australia 391 | href="file:///Users/andrew/Library/Application Support/SwiftBar/Plugins/testcricket.5m.py/innings_1.html" webview=true webvieww=650 webviewh=800

The change I made above wasnt't about URL encoding, but rather alowing for local file URLs.

arohl commented 2 years ago

That still didn't work for me Pakistan 235 | href="file:///Users/andrew/Library/Application%20Support/SwiftBar/Plugins/testcricket.5m.py/innings_4.html" webview=true webvieww=650 webviewh=800

worked but Pakistan 235 | href="file:///Users/andrew/Library/Application Support/SwiftBar/Plugins/testcricket.5m.py/innings_4.html" webview=true webvieww=650 webviewh=800 didn't (it displayed a blank 650x800 page)

melonamin commented 2 years ago

Interesting, can you share the plugin with me?

Because this works just as expected for me:

#!/bin/bash

echo ":house:| href='/Users/alex/Downloads/swiftbar website master/docs/index.html' webview=true webvieww=720 webviewh=400"
echo "---"
echo "My link| href=''"

arohl commented 2 years ago

My python code is

#!/usr/bin/env -P/Users/andrew/.asdf/shims/   python3

# <bitbar.title>Current cricket score</bitbar.title>
# <bitbar.version>v0.1</bitbar.version>
# <bitbar.author>Andrew Rohl</bitbar.author>
# <bitbar.author.github>arohl</bitbar.author.github>
# <bitbar.dependencies>python3</bitbar.dependencies>
from urllib.request import pathname2url
import os

innings_file_prefix = "innings"

print(":australia: 313/7 | symbolize=false")
print("---")

innings_with_path = f"{os.environ['SWIFTBAR_PLUGIN_DATA_PATH']}/{innings_file_prefix}_{1}.html"
print (innings_with_path)
print(f"313/7 | href=\"file://{innings_with_path}\" webview=true webvieww=680 webviewh=855")
print(f"313/7 | href=\"file://{pathname2url(innings_with_path)}\" webview=true webvieww=680 webviewh=855")

and I have attached the datafile to go in the SWIFTBAR_PLUGIN_DATA_PATH directory (you will have to remove the .txt - surprisingly I can't upload a html file! innings_1.html.txt

melonamin commented 2 years ago

@arohl try beta

swiftbar / SwiftBar

webview popover #261