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

examples: serve the wasm mandelbrot project using a v web server (#19937)

Browse Source
This commit is contained in:
Hitalo Souza 2023-12-11 08:10:06 -04:00 committed by GitHub
parent 131052c1ed
commit 1b3c4f596e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

18
examples/wasm/mandelbrot/README.md
View File

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

29
examples/wasm/mandelbrot/main.v Normal file
View File

@ -0,0 +1,29 @@
module main
import vweb
import os
const http_port = 3001
struct App {
vweb.Context
}
fn main() {
vweb.run(new_app(), http_port)
}
fn new_app() &App {
mut app := &App{}
os.execute_or_panic('v -b wasm -os browser mandelbrot.wasm.v')
app.mount_static_folder_at(os.resource_abs_path('./'), '/')
return app
}
@['/'; get]
pub fn (mut app App) controller_mandelbrot() !vweb.Result {
file := os.read_file('mandelbrot.html') or { panic(err) }
return app.html(file)
}

85
examples/wasm/mandelbrot/mandelbrot.html
View File

@ -1,47 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>V Mandelbrot WebAssembly Example</title> <title>V Mandelbrot WebAssembly Example</title>
</head> </head>
<body> <body>
<canvas id="canvas" width="200" height="200" style="width:100%;height:100%;image-rendering: crisp-edges;"></canvas> <canvas
<script> id="canvas"
var canvas = document.getElementById("canvas"); width="200"
var ctx = canvas.getContext("2d"); height="200"
var memory; style="width: 100%; height: 100%; image-rendering: crisp-edges"
></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var memory;
function get_string(ptr, len) { function get_string(ptr, len) {
const buf = new Uint8Array(memory.buffer, ptr, len); const buf = new Uint8Array(memory.buffer, ptr, len);
const str = new TextDecoder("utf8").decode(buf); const str = new TextDecoder("utf8").decode(buf);
return str return str;
}
const env = {
canvas_x: () => canvas.width,
canvas_y: () => canvas.height,
setpixel: (x, y, c) => {
ctx.fillStyle = "rgba(1,1,1,"+(c/255)+")";
ctx.fillRect(x, y, 1, 1);
},
__writeln: (ptr, len) => {
console.log(get_string(ptr, len))
},
__panic_abort: (ptr, len) => {
throw get_string(ptr, len);
} }
}
WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {env: env}).then((res) => { const env = {
memory = res.instance.exports['memory']; canvas_x: () => canvas.width,
canvas_y: () => canvas.height,
setpixel: (x, y, c) => {
ctx.fillStyle = "rgba(1,1,1," + c / 255 + ")";
ctx.fillRect(x, y, 1, 1);
},
__writeln: (ptr, len) => {
console.log(get_string(ptr, len));
},
__panic_abort: (ptr, len) => {
throw get_string(ptr, len);
},
};
console.time('main.main') WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {
res.instance.exports['main.main']() env: env,
console.timeEnd('main.main') }).then((res) => {
}); memory = res.instance.exports["memory"];
</script>
</body> console.time("main.main");
res.instance.exports["main.main"]();
console.timeEnd("main.main");
});
</script>
</body>
</html> </html>

0
examples/wasm/mandelbrot/mandelbrot.v → examples/wasm/mandelbrot/mandelbrot.wasm.v
View File