It is currently January 22nd, 2022, 4:41 am

PluginWebView - Make skin using web technology

Share and get help with Plugins and Addons
User avatar
khanhas
Posts: 40
Joined: October 26th, 2016, 5:00 pm

PluginWebView - Make skin using web technology

Post by khanhas »

Plugin to take advantage of Microsoft Edge WebView2 to display web content on a skin.
  • WebView window is attached into skin window so all skin configuration is respected (position, Z index, transparency,...)
  • Small memory usage and extremely fast skin loading time
  • Natively retrieve other Rainmeter measures' and plugins' values in JavasSript runtime
  • Web renderer provides unlimited rendering capabilites. And there are massive widget resources from the internet (Codepen, CSSHint.com, ...) that you customsize and make them functional
In example skins package, I demostrated how to setup WebView plugin measure and skin window to contain WebView window correctly.

Skin "player" and "visualizer" show how `RainmeterAPI` object is used to get AudioLevel and WebNowPlaying plugins values.
Skin "visualizer", "Miku" and "Minecraft" show 3D render capability. Note that they are for fun only, 3D rendering usew too much CPU and RAM.
"visualiser" is also interactable with mouse (zoom, pan, move)

Image

Download
Download Example Skins package in Releases page: https://github.com/khanhas/PluginWebView/releases to install skins + plugin.

Note: In first plugin load, it will prompt you to download and install WebView2 runtime if your Windows hasn't had it already. Click OK will open download link directly.


Github: https://github.com/khanhas/PluginWebView
Documentation: https://github.com/khanhas/PluginWebView#documentation
User avatar
Brian
Developer
Posts: 2329
Joined: November 24th, 2011, 1:42 am
Location: Utah

Re: PluginWebView - Make skin using web technology

Post by Brian »

Very interesting!
khanhas wrote: December 12th, 2021, 5:38 pm Download Example Skins package in Releases page: https://github.com/khanhas/PluginWebView/releases to install skins + plugin.
I don't see any releases on your github, I would very much like to test this out.

-Brian
User avatar
khanhas
Posts: 40
Joined: October 26th, 2016, 5:00 pm

Re: PluginWebView - Make skin using web technology

Post by khanhas »

:D I forgot to hit Publish drafted release.
I just did, please check Releases page again.
User avatar
death.crafter
Rainmeter Sage
Posts: 1293
Joined: April 24th, 2021, 8:13 pm

Re: PluginWebView - Make skin using web technology

Post by death.crafter »

Can't wait for it to be implemented as a native meter, and see Khan as a dev.
from the Realm of Death
User avatar
Jeff
Posts: 245
Joined: September 3rd, 2018, 11:18 am

Re: PluginWebView - Make skin using web technology

Post by Jeff »

I'm bracing myself for "why does my skin have a scrollbar??" questions.

Anyways, I think the plugin is really great, mainly for 2 reasons:
1. It makes up for a lot of shortcomings that Rainmeter has (for general meters you would have Effects (pixelization, bloom etc.) and 3D matricies; for the Container option it would be the fact it only works as an Union mask and not a Difference mask; for String meters you would have Line Height and honestly anything you can do with with CSS and Vector Text etc.);
2. This opens up skins for a lot more possibility, the possibility being going to three.js or codepen.io and adapting the stuff from there to Rainmeter skins (in a way that makes sense and not just making random samples into RM skins for the sake of it).

Only problem would be that it's a Windows 10+ feature, which is not something new to Rainmeter, rn the only Windows 7 specific feature is Blur, Windows 8(.1) is left in the dust and Windows 10 specific features are all the extra metrics in UsageMonitor plugin.
Maybe a warning popup similar to those when you have no meter in a file or when the SkinPath is wrong should popup anytime sometimes tries to load a skin using this plugin.
death.crafter wrote: December 14th, 2021, 3:34 am Can't wait for it to be implemented as a native meter, and see Khan as a dev.
You're saying this like it has happened before with some kind of GeometryMeter plugin, pffft, like it could ever :rofl:
Oh wait it did happen...
User avatar
khanhas
Posts: 40
Joined: October 26th, 2016, 5:00 pm

Re: PluginWebView - Make skin using web technology

Post by khanhas »

it's a Windows 10+ feature
WebView2 supports Windows 7, 8, and 10. https://docs.microsoft.com/en-us/microsoft-edge/webview2/#webview2-benefits
As long as users have Microsoft Edge Chromium and WebView2 runtime "Evergreen" installed.