iotmaker webassembly

In development phase.

Use at your own risk.

Why do?

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.

English:

This project is porting documentation from https://developer.mozilla.org into Golang and many of the examples are taken from it.

Instructions/Instruções:

How to turn on the local server:

  cd examples/server
  make build

To see examples:

http://localhost:3000/examples/svg/

Example of use

Reference/Referência:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion

HTML

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

Golang

//go:build js
package main

import (
  "github.com/helmutkemper/iotmaker.webassembly/browser/factoryBrowser"
  "github.com/helmutkemper/iotmaker.webassembly/browser/html"
  "github.com/helmutkemper/iotmaker.webassembly/platform/factoryColor"
  "time"
)

func main() {
  
  s1 := factoryBrowser.NewTagSvg().ViewBox([]float64{0, 0, 200, 100}).Append(
    factoryBrowser.NewTagSvgPath().Fill(nil).Stroke(factoryColor.NewLightgrey()).D(factoryBrowser.NewPath().M(20, 50).C(20, -50, 180, 150, 180, 50).C(180, -50, 20, 150, 20, 50).Z()),
    factoryBrowser.NewTagSvgCircle().R(5).Fill(factoryColor.NewRed()).Append(
      factoryBrowser.NewTagSvgAnimateMotion().Dur(10*time.Second).RepeatCount(html.KSvgDurIndefinite).Path(factoryBrowser.NewPath().M(20, 50).C(20, -50, 180, 150, 180, 50).C(180, -50, 20, 150, 20, 50).Z()),
    ),
  )

  stage := factoryBrowser.NewStage()
  stage.Append(s1)

  done := make(chan struct{}, 0)
  <-done
}

Browser:

How to generate binary file:

  cd examples/svg/tags/animateMotion
  make build

List of examples:

Example	Date
battery	07/august/22
event/animateMotion	07/august/22
event/feDisplacementMap	07/august/22
event/use	07/august/22
geolocation/getPosition	07/august/22
geolocation/watchPosition	07/august/22
BezierCurve/1_addCurve	08/august/22
BezierCurve/2_addEasingTween	08/august/22
BezierCurve/3_addRipple	08/august/22
canvas/addColorStopPosition	16/august/22
canvas/arc	16/august/22
canvas/arcTo	16/august/22
canvas/beginPath	16/august/22
canvas/bezierCurveTo	16/august/22
canvas/clearRect	16/august/22
canvas/createLinearGradient	16/august/22
canvas/createPattern	16/august/22
canvas/createRadialGradient	16/august/22
canvas/fillRect	16/august/22
canvas/fillText	16/august/22
canvas/font	16/august/22
canvas/globalAlpha	16/august/22
canvas/globalCompositeOperation	16/august/22