code wiki / _hdl_build / nx_viz_zoom_page.nx
`nx_viz_zoom_page.nx` source

1// nx_viz_zoom_page.nx -- COMPOSED live WASM zoom/pan page. Reads zoom.wasm (compiled from our zoom.wat by
2// nx_wat_compiler), base64-embeds it inline (one self-contained file, no CDN/no fetch), emits a zoomable SVG grid
3// in a <g id=stage>, and the THIN platform glue (instantiate wasm + bind wheel/drag -> call zoom_k/zoom_t/pan_t ->
4// set the transform). ALL transform math is in the sovereign WASM; the JS is only the unavoidable DOM binding (no
5// d3.js, no transform math in JS). usage: nx_viz_zoom_page [zoom.wasm] [out.html]. license_tier: ORIGINAL
6import "nx_viz_shape.nx"
7import "nx_syscalls.nx"
8const K_MAGIC_65536: i64 = 65536
9const K_MAGIC_262144: i64 = 262144
10
11func cw(fd: i64, s: *u8) -> i64 { var n: i64 = 0; while s[n] != (0 as u8) { n = n + 1 } sys_write(fd, s, n); return 0 }
12// base64-encode src[0..n) into out (null-terminated). returns length.
13func b64_enc(src: *u8, n: i64, out: *u8) -> i64 {
  let alpha: *u8 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" as *u8
  var o: i64 = 0; var i: i64 = 0
  while i < n {
      let b0: i64 = src[i] as i64
      var b1: i64 = 0; var b2: i64 = 0; var have: i64 = 1
      if i + 1 < n { b1 = src[i + 1] as i64; have = 2 }
      if i + 2 < n { b2 = src[i + 2] as i64; have = 3 }
      let triple: i64 = (b0 << 16) | (b1 << 8) | b2
      out[o] = alpha[(triple >> 18) & 63]; o = o + 1
      out[o] = alpha[(triple >> 12) & 63]; o = o + 1
      if have >= 2 { out[o] = alpha[(triple >> 6) & 63] } else { out[o] = 61 as u8 }
      o = o + 1
      if have >= 3 { out[o] = alpha[triple & 63] } else { out[o] = 61 as u8 }
      o = o + 1
      i = i + 3
  }
  out[o] = 0 as u8
  return o
32}
33
34func main(argc: i64, argv: *i64) -> i64 {
  var inp: *u8 = "web_assets/zoom.wasm" as *u8
  var outp: *u8 = "/mnt/c/Users/elder/nishi-core/nxc2/web_assets/viz_zoom.html" as *u8
  if argc >= 2 { inp = argv[1] as *u8 }
  if argc >= 3 { outp = argv[2] as *u8 }
39
  let lenp: *i64 = sys_mmap(16) as *i64
  let wasm: *u8 = sys_read_file(inp, lenp)
  if (wasm as i64) == 0 { cw(2, "nx_viz_zoom_page: cannot read zoom.wasm\n" as *u8); return 2 }
  let wn: i64 = lenp[0]
  let b64: *u8 = sys_mmap(K_MAGIC_65536)
  b64_enc(wasm, wn, b64)
46
  let ob: *u8 = sys_mmap(K_MAGIC_262144)
  var o: i64 = 0
  o = vsh_lit(ob, o, "<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>Nishi Viz &mdash; WASM Zoom</title>" as *u8)
  o = vsh_lit(ob, o, "<style>body{margin:0;background:#0d1117;color:#e6edf3;font-family:system-ui,-apple-system,sans-serif;padding:28px}h1{font-size:20px;margin:0 0 6px}p{color:#9aa4b2;max-width:820px;line-height:1.55}code{color:#79c0ff}#sv{cursor:grab;touch-action:none}.card{margin-top:18px;background:#161b22;border:1px solid #30363d;border-radius:10px;padding:12px;display:inline-block}</style></head><body>" as *u8)
  o = vsh_lit(ob, o, "<h1>Nishi Visualization Suite &mdash; in-browser pan/zoom, powered by sovereign WASM</h1>" as *u8)
  o = vsh_lit(ob, o, "<p>Scroll to zoom (the point under the cursor stays fixed), drag to pan. Every transform is computed by <code>zoom.wasm</code> &mdash; our <code>zoom.wat</code> compiled by <code>nx_wat_compiler</code>, embedded inline (base64, no fetch, no CDN). The ONLY JavaScript is the unavoidable WASM-instantiate + event binding; there is NO d3.js and NO transform math in JS.</p>" as *u8)
  o = vsh_lit(ob, o, "<div class=\"card\"><svg id=\"sv\" xmlns=\"http://www.w3.org/2000/svg\" width=\"720\" height=\"480\"><rect width=\"720\" height=\"480\" fill=\"#0b0f14\"/><g id=\"stage\">" as *u8)
  // zoomable content: a grid of points
  var r: i64 = 0
  while r < 7 {
      var c: i64 = 0
      while c < 11 {
          let cx: i64 = c * 64 + 48
          let cy: i64 = r * 64 + 48
          o = vsh_lit(ob, o, "<circle cx=\"" as *u8); o = vsh_n(ob, o, cx); o = vsh_lit(ob, o, "\" cy=\"" as *u8); o = vsh_n(ob, o, cy)
          o = vsh_lit(ob, o, "\" r=\"7\" fill=\"#238636\" stroke=\"#7ee787\"/>" as *u8)
          c = c + 1
      }
      r = r + 1
  }
  o = vsh_lit(ob, o, "<text x=\"48\" y=\"470\" fill=\"#58a6ff\" font-size=\"13\">scroll = zoom &middot; drag = pan (both via WASM)</text>" as *u8)
  o = vsh_lit(ob, o, "</g></svg></div>" as *u8)
69
  // thin glue: instantiate + bind events -> call the WASM transform math
  o = vsh_lit(ob, o, "<script>var b64='" as *u8)
  var i: i64 = 0
  while b64[i] != (0 as u8) { ob[o] = b64[i]; o = o + 1; i = i + 1 }
  o = vsh_lit(ob, o, "';var by=Uint8Array.from(atob(b64),function(c){return c.charCodeAt(0)});var k=1000,tx=0,ty=0;" as *u8)
  o = vsh_lit(ob, o, "WebAssembly.instantiate(by).then(function(R){var w=R.instance.exports;var st=document.getElementById('stage');var sv=document.getElementById('sv');" as *u8)
  o = vsh_lit(ob, o, "function ap(){st.setAttribute('transform','translate('+tx+','+ty+') scale('+(k/1000)+')');}" as *u8)
  o = vsh_lit(ob, o, "sv.addEventListener('wheel',function(e){e.preventDefault();var f=e.deltaY<0?1100:909;var px=e.offsetX,py=e.offsetY;tx=Number(w.zoom_t(BigInt(px),BigInt(tx),BigInt(f)));ty=Number(w.zoom_t(BigInt(py),BigInt(ty),BigInt(f)));k=Number(w.zoom_k(BigInt(k),BigInt(f)));ap();});" as *u8)
  o = vsh_lit(ob, o, "var dg=false,lx,ly;sv.addEventListener('mousedown',function(e){dg=true;lx=e.offsetX;ly=e.offsetY;});sv.addEventListener('mousemove',function(e){if(!dg){return;}tx=Number(w.pan_t(BigInt(tx),BigInt(e.offsetX-lx)));ty=Number(w.pan_t(BigInt(ty),BigInt(e.offsetY-ly)));lx=e.offsetX;ly=e.offsetY;ap();});window.addEventListener('mouseup',function(){dg=false;});ap();});" as *u8)
  o = vsh_lit(ob, o, "</script>" as *u8)
  o = vsh_lit(ob, o, "<p style=\"margin-top:16px;font-size:13px\">Generated by <code>nx_viz_zoom_page</code>; zoom math = <code>nx_viz_zoom</code> -&gt; <code>zoom.wat</code> -&gt; <code>zoom.wasm</code>. &nbsp;<a href=\"viz-graph.html\">&larr; module graph</a></p></body></html>" as *u8)
81
  let fd: i64 = sys_openat_wr(outp, 0x1a4)
  if fd < 0 { cw(2, "nx_viz_zoom_page: cannot open output\n" as *u8); return 4 }
  sys_write(fd, ob, o)
  sys_close(fd)
  cw(1, "[nx_viz_zoom_page] wrote " as *u8); cw(1, outp); cw(1, " (wasm " as *u8)
  var m: i64 = wn; let t: *u8 = sys_mmap(28); var tk: i64 = 0
  if m == 0 { t[0] = 48 as u8; tk = 1 }
  while m > 0 { t[tk] = (48 + m % 10) as u8; m = m / 10; tk = tk + 1 }
  var z: i64 = 0; let nb: *u8 = sys_mmap(28); while z < tk { nb[z] = t[tk - 1 - z]; z = z + 1 } sys_write(1, nb, tk)
  cw(1, "B embedded)\n" as *u8)
  return 0
93}
nx_viz_zoom_page.nx source

`nx_viz_zoom_page.nx` source
