mirror of
https://github.com/webui-dev/webui.git
synced 2024-09-11 14:06:09 +03:00
Adding webui.js to C++ examples
- Adding `webui.js` to C++ examples
This commit is contained in:
parent
4fae3e19ed
commit
294883704b
@ -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
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user