webui-dev/webui
1
1
Fork 0
mirror of https://github.com/webui-dev/webui.git synced 2024-09-11 14:06:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adding webui.js to C++ examples

Browse Source 
- Adding `webui.js` to C++ examples
This commit is contained in:
Hassan DRAGA 2023-08-30 21:48:56 -04:00
parent 4fae3e19ed
commit 294883704b
3 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
examples/C++/call_cpp_from_js/main.cpp
View File

@ -63,45 +63,47 @@ int main() {
// HTML
const std::string my_html = R"V0G0N(
<html>
<head>
<title>Call C++ from JavaScript Example</title>
<style>
body {
background: linear-gradient(to left, #36265a, #654da9);
color: AliceBlue;
font-size: 16px sans-serif;
text-align: center;
margin-top: 30px;
}
button {
margin: 5px 0 10px;
}
</style>
</head>
<body>
<h1>WebUI - Call C++ from JavaScript</h1>
<p>Call C++ functions with arguments (<em>See the logs in your terminal</em>)</p>
<button onclick="webui.call('MyID_One', 'Hello');">Call my_function_string()</button>
<br>
<button onclick="webui.call('MyID_Two', 123456789);">Call my_function_integer()</button>
<br>
<button onclick="webui.call('MyID_Three', true);">Call my_function_boolean()</button>
<br>
<p>Call a C++ function that returns a response</p>
<button onclick="MyJS();">Call my_function_with_response()</button>
<div>Double: <input type="text" id="MyInputID" value="2"></div>
<script>
function MyJS() {
const MyInput = document.getElementById('MyInputID');
const number = MyInput.value;
webui.call('MyID_Four', number).then((response) => {
MyInput.value = response;
});
}
</script>
</body>
</html>
<html>
<head>
<script src="webui.js"></script>
<title>Call C++ from JavaScript Example</title>
<style>
body {
background: linear-gradient(to left, #36265a, #654da9);
color: AliceBlue;
font-size: 16px sans-serif;
text-align: center;
margin-top: 30px;
}
button {
margin: 5px 0 10px;
}
</style>
</head>
<body>
<h1>WebUI - Call C++ from JavaScript</h1>
<p>Call C++ functions with arguments (<em>See the logs in your terminal</em>)</p>
<button onclick="webui.call('MyID_One', 'Hello');">Call my_function_string()</button>
<br>
<button onclick="webui.call('MyID_Two', 123456789);">Call my_function_integer()</button>
<br>
<button onclick="webui.call('MyID_Three', true);">Call my_function_boolean()</button>
<br>
<p>Call a C++ function that returns a response</p>
<button onclick="MyJS();">Call my_function_with_response()</button>
<div>Double: <input type="text" id="MyInputID" value="2"></div>
<script>
function MyJS() {
const MyInput = document.getElementById('MyInputID');
const number = MyInput.value;
webui.call('MyID_Four', number).then((response) => {
MyInput.value = response;
});
}
</script>
</body>
</html>
)V0G0N";
// Create a window

70
examples/C++/call_js_from_cpp/main.cpp
View File

@ -52,40 +52,42 @@ int main() {
// HTML
const std::string my_html = R"V0G0N(
<html>
<head>
<title>Call JavaScript from C++ Example</title>
<style>
body {
background: linear-gradient(to left, #36265a, #654da9);
color: AliceBlue;
font-size: 16px sans-serif;
text-align: center;
margin-top: 30px;
}
button {
margin: 5px 0 10px;
}
</style>
</head>
<body>
<h1>WebUI - Call JavaScript from C++</h1>
<br>
<button id="MyButton1">Count <span id="count">0</span>!</button>
<br>
<button id="MyButton2">Exit</button>
<script>
let count = 0;
function GetCount() {
return count;
}
function SetCount(number) {
document.getElementById('count').innerHTML = number;
count = number;
}
</script>
</body>
</html>
<html>
<head>
<script src="webui.js"></script>
<title>Call JavaScript from C++ Example</title>
<style>
body {
background: linear-gradient(to left, #36265a, #654da9);
color: AliceBlue;
font-size: 16px sans-serif;
text-align: center;
margin-top: 30px;
}
button {
margin: 5px 0 10px;
}
</style>
</head>
<body>
<h1>WebUI - Call JavaScript from C++</h1>
<br>
<button id="MyButton1">Count <span id="count">0</span></button>
<br>
<button id="MyButton2">Exit</button>
<script>
let count = 0;
function GetCount() {
return count;
}
function SetCount(number) {
document.getElementById('count').innerHTML = number;
count = number;
}
</script>
</body>
</html>
)V0G0N";
// Create a window

2
examples/C++/minimal/main.cpp
View File

@ -3,7 +3,7 @@
int main() {
webui::window my_window;
my_window.show("<html>Hello World!</html>");
my_window.show("<html><head><script src=\"webui.js\"></script></head> C++ Hello World ! </html>");
webui::wait();
return 0;
}