Skip to content

Commit 097a9dd

Browse files
malisipimalisipi
authored
Merge pull request #4 from malisipi/v2.1.1
Update `WebUI Library 2.1.1`
2 parents 581e01b + e88c83c commit 097a9dd

File tree

13 files changed

+2712
-1358
lines changed

13 files changed

+2712
-1358
lines changed

‎LICENSE

Lines changed: 282 additions & 617 deletions
Large diffs are not rendered by default.

‎examples/call_c_from_js/call_c_from_js.v

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import malisipi.vwebui as webui
2+
3+
fn my_function_string(e &webui.Event_t) {
4+
// JavaScript:
5+
// webui_fn('MyID_One', 'Hello');
6+
7+
response := e.get().string
8+
println("my_function_string: ${response}") // Hello
9+
10+
// Need Multiple Arguments?
11+
//
12+
// WebUI support only one argument. To get multiple arguments
13+
// you can send a JSON string from JavaScript then decode it.
14+
}
15+
16+
fn my_function_integer(e &webui.Event_t) {
17+
// JavaScript:
18+
// webui_fn('MyID_Two', 123456789);
19+
20+
response := e.get().string
21+
println("my_function_integer: ${response}") // 123456789
22+
}
23+
24+
fn my_function_boolean(e &webui.Event_t) {
25+
// JavaScript:
26+
// webui_fn('MyID_Three', true);
27+
28+
response := e.get().bool
29+
println("my_function_boolean: ${response}") // true
30+
}
31+
32+
fn my_function_with_response(e &webui.Event_t) {
33+
// JavaScript:
34+
// const result = webui_fn('MyID_Four', number);
35+
36+
number := e.get().int * 2
37+
println("my_function_with_response: ${number}")
38+
e.@return(number)
39+
}
40+
41+
mut my_window := webui.new_window() // Create a window
42+
43+
my_html := ('
44+
<html>
45+
<head>
46+
<title>Call C from JavaScript Example</title>
47+
<style>
48+
body {
49+
color: white;
50+
background: #0F2027;
51+
text-align: center;
52+
font-size: 16px;
53+
font-family: sans-serif;
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<h2>WebUI - Call C from JavaScript Example</h2>
59+
<p>Call C function with argument (<em>See the logs in your terminal</em>)</p>
60+
<br>
61+
<button onclick="webui_fn(\'MyID_One\', \'Hello\');">Call my_function_string()</button>
62+
<br>
63+
<br>
64+
<button onclick="webui_fn(\'MyID_Two\', 123456789);">Call my_function_integer()</button>
65+
<br>
66+
<br>
67+
<button onclick="webui_fn(\'MyID_Three\', true);">Call my_function_boolean()</button>
68+
<br>
69+
<br>
70+
<p>Call C function and wait for the response</p>
71+
<br>
72+
<button onclick="MyJS();">Call my_function_with_response()</button>
73+
<br>
74+
<br>
75+
<input type="text" id="MyInputID" value="2">
76+
<script>
77+
function MyJS() {
78+
const MyInput = document.getElementById("MyInputID");
79+
const number = MyInput.value;
80+
const result = webui_fn("MyID_Four", number);
81+
MyInput.value = result;
82+
}
83+
</script>
84+
</body>
85+
</html>')
86+
87+
if !my_window.show(my_html) { // Run the window
88+
panic("The browser(s) was failed") // If not, print a error info
89+
}
90+
91+
my_window.bind("MyID_One", my_function_string)
92+
my_window.bind("MyID_Two", my_function_integer)
93+
my_window.bind("MyID_Three", my_function_boolean)
94+
my_window.bind("MyID_Four", my_function_with_response)
95+
96+
// Wait until all windows get closed
97+
webui.wait()

‎examples/call_js_from_c/call_js_from_c.v

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import malisipi.vwebui as webui
2+
3+
fn my_function_count(e &webui.Event_t) {
4+
mut js := webui.Script_t {timeout: 3}
5+
js.set_script("return GetCount();")
6+
7+
e.window.script(&js)
8+
9+
if js.result.error { // Check if there is any JavaScript error
10+
println("JavaScript Error:\n"+js.result.get())
11+
return
12+
}
13+
14+
count := js.result.get().int() + 1
15+
js.set_script("SetCount(${count});")
16+
17+
e.window.script(&js)
18+
19+
js.cleanup() // Free data resources
20+
}
21+
22+
fn my_function_exit(e &webui.Event_t) { // Close all opened windows
23+
webui.exit()
24+
}
25+
26+
mut my_window := webui.new_window() // Create a window
27+
28+
// UI HTML
29+
my_html := ('
30+
<html>
31+
<head>
32+
<title>Call JavaScript from C Example</title>
33+
<style>
34+
body {
35+
color: white;
36+
background: #0F2027;
37+
text-align: center;
38+
font-size: 16px;
39+
font-family: sans-serif;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<h2>WebUI - Call JavaScript from C Example</h2>
45+
<br>
46+
<h1 id="MyElementID">Count is ?</h1>
47+
<br>
48+
<br>
49+
<button id="MyButton1">Count</button>
50+
<br>
51+
<br>
52+
<button id="MyButton2">Exit</button>
53+
<script>
54+
var count = 1;
55+
function GetCount() {
56+
return count;
57+
}
58+
function SetCount(number) {
59+
const MyElement = document.getElementById("MyElementID");
60+
MyElement.innerHTML = "Count is " + number;
61+
count = number;
62+
}
63+
</script>
64+
</body>
65+
</html>')
66+
67+
// Bind HTML elements with functions
68+
my_window.bind("MyButton1", my_function_count)
69+
my_window.bind("MyButton2", my_function_exit)
70+
71+
// Show the window
72+
if !my_window.show(my_html) { // Run the window
73+
panic("The browser(s) was failed") // If not, print a error info
74+
}
75+
76+
// Wait until all windows get closed
77+
webui.wait()

‎examples/hello_world.v

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
WebUI Library 2.x
3+
V Example
4+
Licensed under GNU General Public License v3.0.
5+
Copyright (C)2022 Hassan DRAGA <https://github.com/hassandraga>.
6+
Copyright (C)2022-2023 Mehmet Ali Şipi <https://github.com/malisipi>.
7+
*/
8+
9+
import malisipi.vwebui as webui
10+
11+
fn check_the_password(e &webui.Event_t) { // Check the password function
12+
mut js := webui.Script_t {timeout: 3} // This function get called every time the user click on "MyButton1"
13+
js.set_script("return document.getElementById(\"MyInput\").value;")
14+
15+
e.window.script(&js)
16+
17+
if js.result.error { // Check if there is any JavaScript error
18+
println("JavaScript Error:\n"+js.result.get())
19+
return
20+
}
21+
22+
password := js.result.get() // Get the password
23+
println("Password: "+password)
24+
25+
if password == "123456" { // Check the password
26+
js.set_script("alert('Good. Password is correct.')") // Correct password
27+
} else {
28+
js.set_script("alert('Sorry. Wrong password.')") // Wrong password
29+
}
30+
e.window.script(&js)
31+
32+
js.cleanup() // Free data resources
33+
}
34+
35+
fn close_the_application(e &webui.Event_t) { // Close all opened windows
36+
webui.exit()
37+
}
38+
39+
mut my_window := webui.new_window() // Create a window
40+
41+
// UI HTML
42+
my_html := ('
43+
<!DOCTYPE html>
44+
<html><head><title>WebUI 2 - V Example</title>
45+
<style>body{color: white; background: #0F2027;
46+
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);
47+
background: linear-gradient(to right, #2C5364, #203A43, #0F2027);
48+
text-align:center; font-size: 18px; font-family: sans-serif;}</style></head><body>
49+
<h1>WebUI 2 - V Example</h1><br>
50+
<input type=\"password\" id=\"MyInput\"><br><br>
51+
<button id=\"MyButton1\">Check Password</button> - <button id=\"MyButton2\">Exit</button>
52+
</body></html>
53+
')
54+
55+
// Bind HTML elements with functions
56+
my_window.bind("MyButton1", check_the_password)
57+
my_window.bind("MyButton2", close_the_application)
58+
59+
// Show the window
60+
if !my_window.show(my_html) { // Run the window
61+
panic("The browser(s) was failed") // If not, print a error info
62+
}
63+
64+
// Wait until all windows get closed
65+
webui.wait()

‎examples/main.v

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎examples/minimal.v

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import malisipi.vwebui as webui
2+
3+
mut my_window := webui.new_window()
4+
my_window.show("<html>Hello</html>")
5+
webui.wait()

‎examples/serve_a_folder/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>WebUI - Serve a Folder Example (C99)</title>
5+
<style>
6+
body {
7+
color: white;
8+
background: #0F2027;
9+
background: -webkit-linear-gradient(to right, #3e6983, #314562, #10273e);
10+
background: linear-gradient(to right, #3e6983, #314562, #10273e);
11+
text-align: center;
12+
font-size: 16px;
13+
font-family: sans-serif;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h3 id="title">Serve a Folder Example (C99)</h3>
19+
<br>
20+
<p id="description">
21+
You can edit this HTML file as you need.<br>
22+
Also, you can config WebUI to use Deno or Nodejs runtime for your JS/TS files.<br>
23+
<br>
24+
Please click on the link to switch to the second page<br>
25+
Or click on the button to switch to the second page programmatically.
26+
</p>
27+
<br>
28+
<h4><a href="second.html">Second Page As A Simple Link</a></h4>
29+
<br>
30+
<button id="SwitchToSecondPage">Switch to The Second Page Programmatically</button>
31+
<br>
32+
<br>
33+
<button id="OpenNewWindow">Open The Second Window</button>
34+
</body>
35+
36+
<!-- Connect this window to the background app -->
37+
<script src="/webui.js"></script>
38+
39+
</html>

‎examples/serve_a_folder/second.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>WebUI - Second Page (C99)</title>
5+
<style>
6+
body {
7+
color: white;
8+
background: #0F2027;
9+
background: -webkit-linear-gradient(to right, #3e6983, #314562, #10273e);
10+
background: linear-gradient(to right, #3e6983, #314562, #10273e);
11+
text-align: center;
12+
font-size: 16px;
13+
font-family: sans-serif;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h3 id="title">This is the second page !</h3>
19+
<br>
20+
<button id="Exit">Call Exit()</button>
21+
</body>
22+
23+
<!-- Connect this window to the background app -->
24+
<script src="/webui.js"></script>
25+
</html>

0 commit comments

Comments
 (0)