Skip to content

Commit e226891

Browse files
NSTechBytesNSTechBytes
authored
Merge pull request #5 from NSTechBytes/working2
Working2
2 parents 31d8dd6 + 43f1363 commit e226891

22 files changed

Lines changed: 1107 additions & 207 deletions

File tree

‎README.md‎

Lines changed: 546 additions & 177 deletions
Large diffs are not rendered by default.

‎Resources/Skins/WebView2/@Resources/JSInteraction/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>JS Interaction Demo</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>JS Interaction</h1>
11+
12+
<div class="container">
13+
<div class="card">
14+
<div class="card-header">
15+
<span class="card-title">OnUpdate Cycle</span>
16+
<span class="card-subtitle">Updates every second</span>
17+
</div>
18+
<div id="update-display" class="value-display">Waiting...</div>
19+
</div>
20+
21+
<div class="card">
22+
<div class="card-header">
23+
<span class="card-title">Event Log</span>
24+
<span class="card-subtitle">Recent activity</span>
25+
</div>
26+
<div id="log-container" class="log-container"></div>
27+
</div>
28+
29+
<div class="card">
30+
<div class="card-header">
31+
<span class="card-title">CallJS Demo</span>
32+
</div>
33+
<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">
34+
Rainmeter is calling <code>addNumbers(15, 25)</code> via section variable.
35+
</p>
36+
<p style="color: var(--text-muted); font-size: 0.9rem;">
37+
Check the Rainmeter skin to see the result!
38+
</p>
39+
</div>
40+
</div>
41+
42+
<script src="script.js"></script>
43+
</body>
44+
</html>

‎Resources/Skins/WebView2/@Resources/JSInteraction/script.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
let updateCount = 0;
2+
3+
// Called once when the plugin is ready
4+
window.OnInitialize = function() {
5+
log("🚀 OnInitialize called!");
6+
return "Initialized!";
7+
};
8+
9+
// Called on every Rainmeter update cycle
10+
window.OnUpdate = function() {
11+
updateCount++;
12+
const message = `Update #${updateCount}`;
13+
14+
// Update the display in HTML
15+
const display = document.getElementById('update-display');
16+
if (display) {
17+
display.textContent = message;
18+
}
19+
20+
// Return value updates the measure's string value in Rainmeter
21+
return message;
22+
};
23+
24+
// Function callable from Rainmeter via [Measure:CallJS('addNumbers', 'a', 'b')]
25+
window.addNumbers = function(a, b) {
26+
const sum = parseInt(a) + parseInt(b);
27+
log(`🧮 addNumbers called: ${a} + ${b} = ${sum}`);
28+
return sum;
29+
};
30+
31+
// Helper to log to HTML
32+
function log(message) {
33+
const container = document.getElementById('log-container');
34+
if (container) {
35+
const entry = document.createElement('div');
36+
entry.className = 'log-entry';
37+
entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
38+
container.insertBefore(entry, container.firstChild);
39+
40+
// Keep log size manageable
41+
if (container.children.length > 50) {
42+
container.removeChild(container.lastChild);
43+
}
44+
}
45+
console.log(message);
46+
}

‎Resources/Skins/WebView2/@Resources/JSInteraction/style.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
:root {
2+
--primary: #6366f1;
3+
--secondary: #a855f7;
4+
--bg: #0f172a;
5+
--card-bg: rgba(30, 41, 59, 0.7);
6+
--text: #f8fafc;
7+
--text-muted: #94a3b8;
8+
--success: #22c55e;
9+
--error: #ef4444;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
font-family: 'Segoe UI', system-ui, sans-serif;
20+
background: var(--bg);
21+
color: var(--text);
22+
height: 100vh;
23+
overflow: hidden;
24+
display: flex;
25+
flex-direction: column;
26+
padding: 20px;
27+
}
28+
29+
h1 {
30+
font-size: 1.5rem;
31+
margin-bottom: 1rem;
32+
background: linear-gradient(to right, var(--primary), var(--secondary));
33+
-webkit-background-clip: text;
34+
-webkit-text-fill-color: transparent;
35+
text-align: center;
36+
}
37+
38+
.container {
39+
flex: 1;
40+
display: flex;
41+
flex-direction: column;
42+
gap: 1rem;
43+
overflow-y: auto;
44+
padding-right: 5px;
45+
}
46+
47+
.card {
48+
background: var(--card-bg);
49+
backdrop-filter: blur(10px);
50+
border: 1px solid rgba(255, 255, 255, 0.1);
51+
border-radius: 12px;
52+
padding: 1rem;
53+
transition: transform 0.2s;
54+
}
55+
56+
.card:hover {
57+
transform: translateY(-2px);
58+
border-color: rgba(255, 255, 255, 0.2);
59+
}
60+
61+
.card-header {
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
margin-bottom: 0.5rem;
66+
}
67+
68+
.card-title {
69+
font-weight: 600;
70+
color: var(--text);
71+
}
72+
73+
.card-subtitle {
74+
font-size: 0.8rem;
75+
color: var(--text-muted);
76+
}
77+
78+
.value-display {
79+
font-family: 'Consolas', monospace;
80+
background: rgba(0, 0, 0, 0.3);
81+
padding: 0.5rem;
82+
border-radius: 6px;
83+
color: var(--success);
84+
word-break: break-all;
85+
text-align: center;
86+
font-size: 1.2rem;
87+
}
88+
89+
.log-container {
90+
font-family: 'Consolas', monospace;
91+
font-size: 0.8rem;
92+
color: var(--text-muted);
93+
background: rgba(0, 0, 0, 0.3);
94+
padding: 0.5rem;
95+
border-radius: 6px;
96+
height: 150px;
97+
overflow-y: auto;
98+
}
99+
100+
.log-entry {
101+
margin-bottom: 4px;
102+
border-bottom: 1px solid rgba(255,255,255,0.05);
103+
padding-bottom: 2px;
104+
}
105+
106+
/* Custom Scrollbar */
107+
::-webkit-scrollbar {
108+
width: 8px;
109+
height: 8px;
110+
}
111+
112+
::-webkit-scrollbar-track {
113+
background: rgba(255, 255, 255, 0.05);
114+
border-radius: 4px;
115+
}
116+
117+
::-webkit-scrollbar-thumb {
118+
background: linear-gradient(to bottom, var(--primary), var(--secondary));
119+
border-radius: 4px;
120+
border: 2px solid transparent;
121+
background-clip: content-box;
122+
}
123+
124+
::-webkit-scrollbar-thumb:hover {
125+
background: linear-gradient(to bottom, var(--secondary), var(--primary));
126+
border-radius: 2px solid transparent;
127+
background-clip: content-box;
128+
}

‎Resources/Skins/WebView2/BangCommand/BangCommand.ini‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ DynamicWindowSize=1
77
Name=BangCommand
88
Author=nstechbytes
99
Information=Demonstrates controlling WebView2 via !CommandMeasure bangs.
10-
Version=1.0
10+
Version=0.0.6
1111
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
1212

1313
[Variables]

‎Resources/Skins/WebView2/Calendar/Calendar.ini‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ Update=1000
55
Name=Calendar
66
Author=nstechbytes
77
Information=Calendar Widget using WebView2
8-
Version=0.0.3
9-
License=MIT
8+
Version=0.0.6
9+
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
1010
; ========================================
1111
; Measure
1212
; ========================================

‎Resources/Skins/WebView2/Clock/Clock.ini‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ Update=1000
55
Name=Calendar
66
Author=nstechbytes
77
Information=Calendar Widget using WebView2
8-
Version=0.0.3
9-
License=MIT
8+
Version=0.0.6
9+
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
1010
; ========================================
1111
; Measure
1212
; ========================================

‎Resources/Skins/WebView2/InformationProperty/InformationProperty.ini‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ DynamicWindowSize=1
77
Name=InformationProperty
88
Author=nstechbytes
99
Information=Shows Rainmeter information properties via WebView2.
10-
Version=1.0
10+
Version=0.0.6
1111
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
1212
; ========================================
1313
; Measure

‎Resources/Skins/WebView2/IslamicDate/IslamicDate.ini‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ Update=1000
55
Name=Islamic Date
66
Author=nstechbytes
77
Information=Islamic (Hijri) Date Widget using WebView2
8-
Version=0.0.1
9-
License=MIT
8+
Version=0.0.6
9+
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
1010
; ========================================
1111
; Measure
1212
; ========================================

‎Resources/Skins/WebView2/JSInteraction/JSInteraction.ini‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
[Rainmeter]
2+
Update=1000
3+
AccurateText=1
4+
DynamicWindowSize=1
5+
6+
[Metadata]
7+
Name=JSInteraction
8+
Author=nstechbytes
9+
Information=Demonstrates JavaScript interaction (OnInitialize, OnUpdate, CallJS) with the WebView2 plugin.
10+
Version=0.0.6
11+
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
12+
13+
; ========================================
14+
; Measure
15+
; ========================================
16+
[MeasureWebView]
17+
Measure=Plugin
18+
Plugin=WebView2
19+
URL=file://#@#JSInteraction\index.html
20+
W=400
21+
H=450
22+
X=25
23+
Y=25
24+
DynamicVariables=1
25+
26+
; ==================================================
27+
; Background
28+
; ==================================================
29+
30+
[MeterBackground]
31+
Meter=Shape
32+
Shape=Rectangle 0,0,450,650,12 | FillColor 136,93,244,200 | StrokeWidth 0
33+
34+
; ==================================================
35+
; Meters
36+
; ==================================================
37+
38+
[MeterTitle]
39+
Meter=String
40+
MeasureName=MeasureWebView
41+
X=225
42+
Y=500
43+
W=400
44+
H=20
45+
FontFace=Segoe UI
46+
FontSize=14
47+
FontWeight=700
48+
FontColor=255,255,255,255
49+
StringAlign=Center
50+
AntiAlias=1
51+
Text=JS Interaction Demo
52+
53+
[MeterStatus]
54+
Meter=String
55+
MeasureName=MeasureWebView
56+
X=225
57+
Y=5R
58+
W=400
59+
H=40
60+
FontFace=Consolas
61+
FontSize=10
62+
FontColor=100,255,100,255
63+
StringAlign=Center
64+
AntiAlias=1
65+
Text=Status: %1
66+
67+
[MeterCallJSResult]
68+
Meter=String
69+
X=225
70+
Y=5R
71+
W=400
72+
H=40
73+
FontFace=Segoe UI
74+
FontSize=11
75+
FontColor=200,200,255,255
76+
StringAlign=Center
77+
AntiAlias=1
78+
Text=Result from JS: [MeasureWebView:CallJS('addNumbers', '15', '25')]
79+
DynamicVariables=1
80+
81+
[MeterInstruction]
82+
Meter=String
83+
X=225
84+
Y=5R
85+
W=380
86+
H=40
87+
FontFace=Segoe UI
88+
FontSize=9
89+
FontColor=150,150,150,255
90+
StringAlign=Center
91+
AntiAlias=1
92+
Text=Check the console (F12) for logs
93+
ClipString=1

0 commit comments

Comments
 (0)