varnicas
/
testingwasm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Final prototype, added README.md

main
Stipe Varnica 5 months ago
parent
cc8b7648f3
commit
263403fa16
8 changed files with 1626 additions and 482 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 51
      .vscode/settings.json
  2. 2
      C++/cmd.txt
  3. 26
      C++/test.cpp
  4. 1866
      C++/test.js
  5. BIN
      C++/test.wasm
  6. 11
      README.md
  7. 123
      index.html
  8. 17
      index.js

51
.vscode/settings.json
View File

@ -0,0 +1,51 @@
{
"liveServer.settings.port": 5501,
"files.associations": {
"cctype": "cpp",
"clocale": "cpp",
"cmath": "cpp",
"cstdarg": "cpp",
"cstddef": "cpp",
"cstdio": "cpp",
"cstdlib": "cpp",
"cstring": "cpp",
"cwchar": "cpp",
"cwctype": "cpp",
"array": "cpp",
"atomic": "cpp",
"bit": "cpp",
"*.tcc": "cpp",
"compare": "cpp",
"concepts": "cpp",
"cstdint": "cpp",
"deque": "cpp",
"string": "cpp",
"unordered_map": "cpp",
"vector": "cpp",
"exception": "cpp",
"algorithm": "cpp",
"functional": "cpp",
"iterator": "cpp",
"memory": "cpp",
"memory_resource": "cpp",
"numeric": "cpp",
"random": "cpp",
"string_view": "cpp",
"system_error": "cpp",
"tuple": "cpp",
"type_traits": "cpp",
"utility": "cpp",
"initializer_list": "cpp",
"iosfwd": "cpp",
"iostream": "cpp",
"istream": "cpp",
"limits": "cpp",
"new": "cpp",
"numbers": "cpp",
"ostream": "cpp",
"stdexcept": "cpp",
"streambuf": "cpp",
"cinttypes": "cpp",
"typeinfo": "cpp"
}
}

2
C++/cmd.txt
View File

@ -1 +1 @@
emcc -o test.js test.cpp -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"
emcc -lembind -o test.js test.cpp -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

26
C++/test.cpp
View File

@ -1,18 +1,20 @@
#include <iostream>
#include <emscripten/emscripten.h>
#include <emscripten/bind.h>
#include <string>
using namespace emscripten;
extern "C" {
EMSCRIPTEN_KEEPALIVE
int myFunction(int number) {
return number * number;
}
std::string myFunction(std::string word)
{
std::string test = " testing";
return word + test;
};
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
}
EMSCRIPTEN_BINDINGS(my_module)
{
function("myFunction", &myFunction);
};
int main() {
int main()
{
return 0;
}

1866
C++/test.js
File diff suppressed because it is too large
View File

BIN
C++/test.wasm
View File

11
README.md
View File

@ -0,0 +1,11 @@
# Prototype
Link for compiling code with Embind → https://emscripten.org/docs/porting connecting_cpp_and_javascript/embind.html
Command for compiling code with Embind:
```
emcc -lembind -o test.js test.cpp -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"
```
- EMSCRIPTEN_BINDINGS macro is used to bind the C++ function to make it callable from JavaScript
- Emscripten compiles the C++ code to WebAssembly, generating a .wasm file and JavaScript glue code that loads the WebAssembly module and sets up the bindings
- When the HTML page is loaded, test.js is executed, loading the WebAssembly module , Emscripten's Module object is created, exposing the C++ functions (like myFunction) to JavaScript
- Example of using Module: var result = Module.myFunction(input)

123
index.html
View File

@ -10,27 +10,21 @@
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<script src="./C++/test.js"></script>
<script src="index.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="p-4">
<h1 class="mb-4">Square calculator</h1>
<input
id="numberInput"
class="form-control"
type="number"
placeholder="Enter a number"
/>
<h1 class="mb-4">Test</h1>
<input id="numberInput" class="form-control" type="text" />
<button
id="calculateBtn"
class="btn btn-primary mt-3"
onClick="calculateResult()"
>
Calculate square
Test
</button>
</div>
</div>
@ -42,115 +36,6 @@
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="p-4">
<h1>Sum calculator</h1>
<input
type="number"
class="form-control mb-1"
id="input1"
placeholder="Enter first number"
/>
<input
type="number"
class="form-control"
id="input2"
placeholder="Enter second number"
/>
<button onclick="calculate()" class="btn btn-primary mt-3">
Calculate Sum
</button>
</div>
</div>
<div class="col-sm-6">
<div class="p-4">
<h1 class="mb-4">Output</h1>
<div id="result" class="form-control"></div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>Checkbox Container</h1>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox1"
/>
<label class="form-check-label" for="checkbox1">
Checkbox 1
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox2"
/>
<label class="form-check-label" for="checkbox2">
Checkbox 2
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox3"
/>
<label class="form-check-label" for="checkbox3">
Checkbox 3
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox4"
/>
<label class="form-check-label" for="checkbox4">
Checkbox 4
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox5"
/>
<label class="form-check-label" for="checkbox5">
Checkbox 5
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkbox6"
/>
<label class="form-check-label" for="checkbox6">
Checkbox 6
</label>
</div>
</div>
</div>
</div>
</div>
<script src="index.js" defer></script>
</body>
</html>

17
index.js
View File

@ -1,16 +1,9 @@
function calculateResult() {
var numberInput = parseInt(document.getElementById("numberInput").value);
var result = Module.ccall("myFunction", "number", ["number"], [numberInput]);
document.getElementById("output").innerText = "Result: " + result;
var input = document.getElementById("numberInput").value;
var result = Module.myFunction(input)
document.getElementById("output").innerText = result;
}
// document
// .getElementById("calculateBtn")
// .addEventListener("click", calculateResult);
function calculate() {
var a = parseInt(document.getElementById("input1").value);
var b = parseInt(document.getElementById("input2").value);
var result = Module.ccall("add", "number", ["number", "number"], [a, b]);
document.getElementById("result").innerText = "Result: " + result;
}
Write Preview
Loading…
Cancel
Save