webview popover #261

cycle4passion · 2021-12-30T19:26:51Z

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 · 2022-01-14T02:50:02Z

#!/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 · 2022-01-16T16:31:05Z

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 · 2022-01-16T17:46:04Z

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 · 2022-01-16T22:17:18Z

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 · 2022-01-16T22:23:40Z

Try using the right click!

cycle4passion · 2022-01-16T22:48:58Z

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 · 2022-01-16T23:09:08Z

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 · 2022-01-17T01:14:56Z

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 · 2022-01-17T02:32:20Z

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 · 2022-01-17T02:57:25Z

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 · 2022-01-17T12:00:37Z

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

fails in 1.4.2 - CONSOLE

and 1.4.3 - CONSOLE

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 · 2022-01-17T14:51:18Z

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

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

cycle4passion · 2022-01-18T23:13:50Z

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 · 2022-01-19T03:12:08Z

Added

arohl · 2022-03-26T08:40:29Z

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 · 2022-03-26T11:17:15Z

@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 · 2022-03-27T15:16:50Z

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 · 2022-03-27T21:18:57Z

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 · 2022-03-29T13:59:59Z

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 · 2022-04-16T22:32:54Z

@arohl try beta

melonamin added the enhancement New feature or request label Dec 31, 2021

melonamin added a commit that referenced this issue Jan 14, 2022

Initial take on webview popover #261

447bf60

melonamin added this to the 1.4.3 milestone Jan 14, 2022

melonamin added a commit that referenced this issue Jan 19, 2022

Handle local files URL #261

7b8a3b2

melonamin mentioned this issue Jan 28, 2022

Explore HTML plugins idea #270

Closed

melonamin closed this as completed Jan 31, 2022

melonamin added a commit that referenced this issue Apr 16, 2022

Add percent encoding to local URLs #261

b4ef582

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webview popover #261

webview popover #261

cycle4passion commented Dec 30, 2021 •

edited

Loading

melonamin commented Jan 14, 2022 •

edited

Loading

cycle4passion commented Jan 16, 2022

melonamin commented Jan 16, 2022 •

edited

Loading

cycle4passion commented Jan 16, 2022

melonamin commented Jan 16, 2022

cycle4passion commented Jan 16, 2022

melonamin commented Jan 16, 2022

melonamin commented Jan 17, 2022

cycle4passion commented Jan 17, 2022

melonamin commented Jan 17, 2022

cycle4passion commented Jan 17, 2022 •

edited

Loading

melonamin commented Jan 17, 2022

cycle4passion commented Jan 18, 2022 •

edited

Loading

melonamin commented Jan 19, 2022

arohl commented Mar 26, 2022 •

edited

Loading

melonamin commented Mar 26, 2022

arohl commented Mar 27, 2022

melonamin commented Mar 27, 2022

arohl commented Mar 29, 2022

melonamin commented Apr 16, 2022

webview popover #261

webview popover #261

Comments

cycle4passion commented Dec 30, 2021 • edited Loading

melonamin commented Jan 14, 2022 • edited Loading

cycle4passion commented Jan 16, 2022

melonamin commented Jan 16, 2022 • edited Loading

cycle4passion commented Jan 16, 2022

melonamin commented Jan 16, 2022

cycle4passion commented Jan 16, 2022

melonamin commented Jan 16, 2022

melonamin commented Jan 17, 2022

cycle4passion commented Jan 17, 2022

melonamin commented Jan 17, 2022

cycle4passion commented Jan 17, 2022 • edited Loading

melonamin commented Jan 17, 2022

cycle4passion commented Jan 18, 2022 • edited Loading

melonamin commented Jan 19, 2022

arohl commented Mar 26, 2022 • edited Loading

melonamin commented Mar 26, 2022

arohl commented Mar 27, 2022

melonamin commented Mar 27, 2022

arohl commented Mar 29, 2022

melonamin commented Apr 16, 2022

cycle4passion commented Dec 30, 2021 •

edited

Loading

melonamin commented Jan 14, 2022 •

edited

Loading

melonamin commented Jan 16, 2022 •

edited

Loading

cycle4passion commented Jan 17, 2022 •

edited

Loading

cycle4passion commented Jan 18, 2022 •

edited

Loading

arohl commented Mar 26, 2022 •

edited

Loading