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()

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

@ -1,9 +1,17 @@
# 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.

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)
}

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

@ -1,13 +1,18 @@
<!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
id="canvas"
width="200"
height="200"
style="width: 100%; height: 100%; image-rendering: crisp-edges"
></canvas>
<script> <script>
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
@ -17,31 +22,33 @@
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 = { const env = {
canvas_x: () => canvas.width, canvas_x: () => canvas.width,
canvas_y: () => canvas.height, canvas_y: () => canvas.height,
setpixel: (x, y, c) => { setpixel: (x, y, c) => {
ctx.fillStyle = "rgba(1,1,1,"+(c/255)+")"; ctx.fillStyle = "rgba(1,1,1," + c / 255 + ")";
ctx.fillRect(x, y, 1, 1); ctx.fillRect(x, y, 1, 1);
}, },
__writeln: (ptr, len) => { __writeln: (ptr, len) => {
console.log(get_string(ptr, len)) console.log(get_string(ptr, len));
}, },
__panic_abort: (ptr, len) => { __panic_abort: (ptr, len) => {
throw get_string(ptr, len); throw get_string(ptr, len);
} },
} };
WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {env: env}).then((res) => { WebAssembly.instantiateStreaming(fetch("mandelbrot.wasm"), {
memory = res.instance.exports['memory']; env: env,
}).then((res) => {
memory = res.instance.exports["memory"];
console.time('main.main') console.time("main.main");
res.instance.exports['main.main']() res.instance.exports["main.main"]();
console.timeEnd('main.main') console.timeEnd("main.main");
}); });
</script> </script>
</body> </body>
</html> </html>

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