TheCloud/v
1
0
Fork 0
mirror of https://github.com/vlang/v.git synced 2025-09-09 15:27:05 -04:00
Code Issues Packages Projects Releases Wiki Activity

examples: add examples/wasm/change_color_by_id/ (#20519)

Browse Source
This commit is contained in:
Hitalo Souza 2024-01-14 07:34:23 -04:00 committed by GitHub
parent 175ede54b6
commit cb224076ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 117 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
cmd/tools/modules/testing/common.v
View File

@ -277,8 +277,9 @@ pub fn new_test_session(_vargs string, will_compile bool) TestSession {
skip_files << 'examples/sokol/sounds/wav_player.v'
skip_files << 'examples/sokol/sounds/simple_sin_tones.v'
}
// examples/wasm/mandelbrot/mandelbrot.wasm.v requires special compilation flags: `-b wasm -os browser`, skip it for now:
// requires special compilation flags: `-b wasm -os browser`, skip it for now:
skip_files << 'examples/wasm/mandelbrot/mandelbrot.wasm.v'
skip_files << 'examples/wasm/change_color_by_id/change_color_by_id.wasm.v'
}
vargs := _vargs.replace('-progress', '')
vexe := pref.vexe_path()

20
examples/wasm/change_color_by_id/README.md Normal file
View File

@ -0,0 +1,20 @@
# Run V Mandelbrot Example
## Using only V
```
v run .
```
## Using Python or Emscripten
1. First, create `change_color_by_id.wasm`. Compile with `-os browser`.
```
v -b wasm -os browser change_color_by_id.wasm.v
```
2. Then, open the `change_color_by_id.html` file in the browser.
- CORS errors do not allow `change_color_by_id.wasm` to be loaded.
- Use `python -m http.server 8080`
- Use `emrun change_color_by_id.html`

55
examples/wasm/change_color_by_id/change_color_by_id.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App</title>
</head>
<body>
<p id="description">Some cool description</p>
<p id="description1">Some cool description</p>
<p id="description2">Some cool description</p>
<p id="description3">Some cool description</p>
<button id="myButton" onclick="click_callback()">Click here</button>
<script type="text/javascript">
var memory;
var click_callback;
function get_string(ptr, len) {
const buf = new Uint8Array(memory.buffer, ptr, len);
const str = new TextDecoder("utf8").decode(buf);
return str;
}
const env = {
change_color_by_id: (ptr, len, color_ptr, color_len) => {
const elementId = get_string(ptr, len);
const color = get_string(color_ptr, color_len);
var element = document.getElementById(elementId);
element.style.color = color;
},
__writeln: (ptr, len) => {
console.log(get_string(ptr, len));
},
__panic_abort: (ptr, len) => {
throw get_string(ptr, len);
},
};
WebAssembly.instantiateStreaming(fetch("change_color_by_id.wasm"), {
env: env,
}).then((res) => {
memory = res.instance.exports["memory"];
console.time("main.main");
res.instance.exports["main.main"]();
console.timeEnd("main.main");
click_callback = res.instance.exports["main.click_callback"];
});
</script>
</body>
</html>

18
examples/wasm/change_color_by_id/change_color_by_id.wasm.v Normal file
View File

@ -0,0 +1,18 @@
fn JS.change_color_by_id(ptr u8, len int, color_ptr u8, color_len int)
// `main` must be public!
pub fn main() {
println('starting main.main...')
change_color_by_id('description', 'red')
change_color_by_id('description1', 'green')
change_color_by_id('description2', 'blue')
change_color_by_id('description3', 'black')
}
pub fn click_callback() {
println('Hello from V')
}
fn change_color_by_id(id string, color string) {
JS.change_color_by_id(id.str, id.len, color.str, color.len)
}

BIN
examples/wasm/change_color_by_id/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 991 B

22
examples/wasm/change_color_by_id/serve_folder.v Normal file
View File

@ -0,0 +1,22 @@
module main
import vweb
import os
struct App {
vweb.Context
}
fn main() {
os.chdir(os.dir(@FILE))!
cmd := '${os.quoted_path(@VEXE)} -b wasm -os browser change_color_by_id.wasm.v'
println('>> compiling change_color_by_id.wasm.v, using: ${cmd}')
os.execute_or_panic(cmd)
mut app := App{}
app.mount_static_folder_at(os.resource_abs_path('.'), '/')
vweb.run(app, 3001)
}
pub fn (mut app App) index() vweb.Result {
return app.html(os.read_file('change_color_by_id.html') or { '' })
}