Initial draft

[khanhas]

WebView Meter (WVM) features set including:

• Load online webpage (https://...), local HTML file with relative or absolute path
• Customisable Zoom Factor: easily scale meter to preferred size.
• Right click on WVM would open normal Skin context menu. Ctrl + Right click would open WebView2 default context menu.
• Meter's Hidden option should hide WebView2 window

Anatomy

[Meter1]
Meter = WebView
URL = <A Web URL or HTML file location>
W = <int>
H = <int>
X = <int, default = 0>
Y = <int, default = 0>
Zoom = <float, default = 1.0>

TODO

• [ ] HRESULT handling
• [ ] Embed Library.tlb file and load it at runtime
• [ ] Relative positioning
• [ ] Padding
• [x] Better way to update window size. Right now it uses a bit of CPU on every update cycle.
• [x] Find a way to make skin draggable with WVM. Right now mouse drag event is soaked up by WebView2 window
  • https://github.com/MicrosoftEdge/WebView2Feedback/issues/200
• [ ] Layering with other type of meter: Seems impossible because of how D2D renders stuff.
• [ ] Container: Also seems impossible

Notes

• No overlaying: https://github.com/MicrosoftEdge/WebView2Feedback/issues/286
• Each WebView2 is contained in a separated window. These windows are child of Skin window. Layering is now possible
• Visual Studio 2022 also uses WebView2 for something. Don't track WebView2 instances memory usage while VS is on.
• One solution to embed Library.tlb:
  1. Define it in Library.rc
  2. Load its binary data using FindResource
  3. Write data to a file in %TEMP%
  4. Finally LoadTypeLib that file

Potential features

• Change UserAgent (ICoreWebView2Settings2)
• Disallow new window popup
• Disallow changing zoom with mouse or keyboard (set_IsZoomControlEnabled)
• Freeze WVM in between Update intervals to reduce resource usage: https://github.com/MicrosoftEdge/WebView2Feedback/blob/master/specs/Freeze.md Throttled by hiding window is good enough
• Call user's JavaScript Update function on meter Update.
• Width, height and DynamicVariables synergy
• Auto expand Width and Height on document.body size change
• Should ZoomFactor be resetted on Update?

[khanhas]

Hi @@brianferguson, I keep my WebView meter development in this repo. If you have any comment or suggestion, please leave them in this Issue or make a new one.

I attach here Rainmeter executable (on https://github.com/rainmeter/rainmeter/commit/6b54b5ffa23fc28694b5a6e2210cb27341d0488c) compiled with WebView meter. Example skins folder is also included, please copy it to your Document\Rainmeter\Skins folder. Remember to remove plugin WebView.dll if you had it.

RM-WebViewMeter-v1.zip

[brianferguson]

I think this a great first draft showing WVM as a meter instead of a plugin. Good work!

It looks like you covered all the issues I could see already, so hopefully with some luck we can figure this out. IMO, the main issues are:

1. Dragging the skin, which may cause issues for web items that are also draggable on the web canvas.
2. Getting Rainmeter mouse actions to work. (Probably related to item 1.) Feels like passing the event from javascript to Rainmeter might work.
3. Layering with other meters.
4. There is a weird artifact when dynamically hiding/showing the meter. Click the red meter:

   
   [Rainmeter]
   Update=-1

[mes] Meter=WebView URL=index.html Y=10 X=10 W=400 H=700 SolidColor=0,0,0,1

[Test] Meter=Image W=100 H=100 SolidColor=255,0,0 LeftMouseUpAction=[!ToggleMeter mes][!UpdateMeter mes][!Redraw]

I am most concerned about item 1, 2 and 4. I feel like for item 3, we could just document the behavior if we can't find a solution.

I am not concerned with the Container option for this particular meter, since they do use different rendering systems. Maybe @TheAzack9 would have some thoughts on that if it is possible.

-Brian

[khanhas]

I drafted second release with all Mouse Actions supported including drag.

RM-WebViewMeter-v2.zip

I tried to match all mouse actions functionalities, and dragging is probably the most annoying thing to perfect. Please test it thoroughly and see if I missed anything. If a web element want to be excluded from mouse actions, user just need to call event.stopPropagation() in mouseup (if XXMouseUpAction is set) or mousedown (if XXMouseDownAction is set) event handler. There is a change on context menu action: Shift + Right click will open WebView2 context menu. Alt + Right click causes context menu to behave weirdly and I can't really figure out why. Rainmeter menu now can be opened via Right click (if there is no RightMouseXXAction is set) or Ctrl + Right click.

I also fixed artifact problem when toggling meter. Hide meter now also put WebView2 into resource saving mode (throttle any running timer to 1s and reduce memory usage).