Skip to content

Commit 3cdc32b

Browse files
NSTechBytesNSTechBytes
committed
Add comprehensive documentation, features, usage, and examples for the WebView2 Rainmeter Plugin.
1 parent 27856d4 commit 3cdc32b

File tree

1 file changed

+279
-1
lines changed

1 file changed

+279
-1
lines changed

‎README.md‎

Lines changed: 279 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,279 @@
1-
# WebView2-Plugin
1+
# WebView2 Rainmeter Plugin
2+
3+
A powerful Rainmeter plugin that embeds Microsoft Edge WebView2 control to display web content or local HTML files directly in your Rainmeter skins.
4+
5+
![Version](https://img.shields.io/badge/version-1.0.0-blue)
6+
![Platform](https://img.shields.io/badge/platform-Windows%2010%2F11-lightgrey)
7+
![License](https://img.shields.io/badge/license-GPL--2.0-green)
8+
9+
## ✨ Features
10+
11+
- 🌐 **Display Web Pages** - Load any website directly in your Rainmeter skin
12+
- 📄 **Local HTML Files** - Display custom HTML/CSS/JavaScript content
13+
- 🪟 **Seamless Integration** - WebView window automatically parents to skin window
14+
- 🎮 **Full Control** - Navigate, reload, go back/forward via bang commands
15+
- 💻 **JavaScript Support** - Execute JavaScript code in the WebView
16+
- 🎨 **Customizable** - Configure size, position, and visibility
17+
- ⚡ **Modern** - Uses Microsoft Edge WebView2 (Chromium-based)
18+
19+
## 📋 Requirements
20+
21+
- Windows 10/11
22+
- Rainmeter 4.5 or later
23+
- WebView2 Runtime (usually pre-installed on Windows 10/11)
24+
- If not installed, download from: [WebView2 Runtime](https://developer.microsoft.com/microsoft-edge/webview2/)
25+
26+
## 🚀 Quick Start
27+
28+
### Installation
29+
30+
1. Download the latest release from [Releases](https://github.com/NSTechBytes/WebView2/releases)
31+
2. Install the `.rmskin` package, or
32+
3. Manually copy `WebView2.dll` to `%APPDATA%\Rainmeter\Plugins\`
33+
34+
### Basic Usage
35+
36+
```ini
37+
[Rainmeter]
38+
Update=1000
39+
40+
[MeasureWebView]
41+
Measure=Plugin
42+
Plugin=WebView2
43+
Url=https://www.google.com
44+
Width=1000
45+
Height=700
46+
X=0
47+
Y=0
48+
Visible=1
49+
```
50+
51+
## 📖 Documentation
52+
53+
### Plugin Options
54+
55+
| Option | Type | Default | Description |
56+
|--------|------|---------|-------------|
57+
| `Url` | String | (empty) | URL or file path to load. Supports web URLs and local file paths |
58+
| `Width` | Integer | 800 | Width of the WebView window in pixels |
59+
| `Height` | Integer | 600 | Height of the WebView window in pixels |
60+
| `X` | Integer | 0 | X position relative to skin window |
61+
| `Y` | Integer | 0 | Y position relative to skin window |
62+
| `Visible` | Integer | 1 | Show (1) or hide (0) the WebView window |
63+
64+
### Bang Commands
65+
66+
Execute commands using `!CommandMeasure`:
67+
68+
#### Navigate to URL
69+
```ini
70+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "Navigate https://example.com"]
71+
```
72+
73+
#### Reload Current Page
74+
```ini
75+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "Reload"]
76+
```
77+
78+
#### Navigation Controls
79+
```ini
80+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "GoBack"]
81+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "GoForward"]
82+
```
83+
84+
#### Show/Hide WebView
85+
```ini
86+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "Show"]
87+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "Hide"]
88+
```
89+
90+
#### Execute JavaScript
91+
```ini
92+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "ExecuteScript alert('Hello from Rainmeter!')"]
93+
```
94+
95+
## 💡 Examples
96+
97+
### Example 1: Web Browser Skin
98+
99+
```ini
100+
[Rainmeter]
101+
Update=1000
102+
BackgroundMode=2
103+
SolidColor=30,30,30,255
104+
105+
[Variables]
106+
WebWidth=1200
107+
WebHeight=800
108+
109+
[MeasureWebView]
110+
Measure=Plugin
111+
Plugin=WebView2
112+
Url=https://www.rainmeter.net
113+
Width=#WebWidth#
114+
Height=#WebHeight#
115+
X=0
116+
Y=50
117+
Visible=1
118+
119+
[MeterNavigate]
120+
Meter=String
121+
X=20
122+
Y=15
123+
FontSize=12
124+
FontColor=100,150,255
125+
Text="Go to Google"
126+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "Navigate https://www.google.com"]
127+
128+
[MeterReload]
129+
Meter=String
130+
X=150
131+
Y=15
132+
FontSize=12
133+
FontColor=200,200,200
134+
Text="Reload"
135+
LeftMouseUpAction=[!CommandMeasure MeasureWebView "Reload"]
136+
```
137+
138+
### Example 2: Local HTML Dashboard
139+
140+
```ini
141+
[Rainmeter]
142+
Update=1000
143+
144+
[MeasureWebView]
145+
Measure=Plugin
146+
Plugin=WebView2
147+
Url=#@#dashboard.html
148+
Width=800
149+
Height=600
150+
X=0
151+
Y=0
152+
Visible=1
153+
```
154+
155+
Create `@Resources\dashboard.html`:
156+
```html
157+
<!DOCTYPE html>
158+
<html>
159+
<head>
160+
<style>
161+
body {
162+
font-family: 'Segoe UI', sans-serif;
163+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
164+
color: white;
165+
padding: 40px;
166+
}
167+
h1 { font-size: 3em; }
168+
</style>
169+
</head>
170+
<body>
171+
<h1>My Dashboard</h1>
172+
<p>Current time: <span id="clock"></span></p>
173+
<script>
174+
setInterval(() => {
175+
document.getElementById('clock').textContent = new Date().toLocaleTimeString();
176+
}, 1000);
177+
</script>
178+
</body>
179+
</html>
180+
```
181+
182+
## 🔧 Building from Source
183+
184+
### Prerequisites
185+
186+
- Visual Studio 2022 (or 2019)
187+
- Windows 10/11 SDK
188+
- NuGet Package Manager
189+
190+
### Build Steps
191+
192+
1. Clone the repository:
193+
```bash
194+
git clone https://github.com/NSTechBytes/WebView2.git
195+
cd WebView2
196+
```
197+
198+
2. Open `WebView2-Plugin.sln` in Visual Studio
199+
200+
3. Restore NuGet packages (right-click solution → Restore NuGet Packages)
201+
202+
4. Build the solution (Ctrl+Shift+B)
203+
204+
5. Find the compiled DLLs in:
205+
- `WebView2\x64\Release\WebView2.dll` (64-bit)
206+
- `WebView2\x32\Release\WebView2.dll` (32-bit)
207+
208+
### Build via PowerShell
209+
210+
```powershell
211+
powershell -ExecutionPolicy Bypass -Command "& { . .\Build-CPP.ps1; Dist -major 1 -minor 0 -patch 0 }"
212+
```
213+
214+
This creates:
215+
- Plugin DLLs in `dist\` folder
216+
- Complete `.rmskin` package for distribution
217+
218+
## 🐛 Troubleshooting
219+
220+
### WebView2 doesn't appear
221+
- Ensure WebView2 Runtime is installed
222+
- Check Rainmeter log (Ctrl+Shift+L) for error messages
223+
- Verify the skin window is visible and has appropriate dimensions
224+
225+
### File paths not loading
226+
- Use `#@#` for @Resources folder: `Url=#@#mypage.html`
227+
- Or use absolute paths: `Url=C:\MyFolder\page.html`
228+
- The plugin automatically converts file paths to `file:///` format
229+
230+
### Access Denied Error
231+
- The plugin uses TEMP directory for WebView2 data
232+
- Ensure you have write permissions to `%TEMP%\RainmeterWebView2`
233+
234+
### Hide/Show not working
235+
- Make sure you're using the latest version (v1.0.0+)
236+
- The plugin properly synchronizes window and controller visibility
237+
238+
## 📝 Technical Details
239+
240+
- **WebView2 SDK**: Microsoft.Web.WebView2 (v1.0.2792.45)
241+
- **Runtime**: Uses Windows Implementation Library (WIL)
242+
- **Architecture**: Supports both x86 and x64
243+
- **Language**: C++17
244+
- **User Data**: Stored in `%TEMP%\RainmeterWebView2`
245+
246+
## 🤝 Contributing
247+
248+
Contributions are welcome! Please feel free to submit a Pull Request.
249+
250+
1. Fork the repository
251+
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
252+
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
253+
4. Push to the branch (`git push origin feature/AmazingFeature`)
254+
5. Open a Pull Request
255+
256+
## 📄 License
257+
258+
This project is licensed under the GPL-2.0 License - see the [LICENSE](LICENSE) file for details.
259+
260+
## 🙏 Acknowledgments
261+
262+
- Microsoft Edge WebView2 team for the excellent SDK
263+
- Rainmeter community for inspiration and support
264+
- ModernSearchBar plugin for reference implementation
265+
266+
## 📧 Contact
267+
268+
- **Author**: NSTechBytes
269+
- **GitHub**: [https://github.com/NSTechBytes/WebView2](https://github.com/NSTechBytes/WebView2)
270+
271+
## 🔗 Related Links
272+
273+
- [Rainmeter Documentation](https://docs.rainmeter.net/)
274+
- [WebView2 Documentation](https://docs.microsoft.com/microsoft-edge/webview2/)
275+
- [Example Skins](Resources/Skins/WebView2-Plugin/)
276+
277+
---
278+
279+
**Made with ❤️ for the Rainmeter community**

0 commit comments

Comments
 (0)