HTML Demo

A notebook showcasing the capabilities of compressing and exporting the interactivity of WLJS Notebooks to a single HTML file (no running Kernel is needed).

:::note

Most data was pre-calculated using the Wolfram Kernel during the export procedure. This is not a transpilation/translation. This HTML document does not compute anything except the missing points interpolated using the IDW method. Read more about it at [wljs.io](https://wljs.io/frontend/Exporting/Dynamic%20HTML).

:::

Manipulate[Column[{
  Style[StringTemplate["`` m/s"][x], Blue],
  Table["🚗", {i, Floor[x/25]}]//Row 
}], {x,10,100}, ContinuousAction->True] // Quiet

Basic ManipulatePlot

Interactive (optimized) plotting of curves

ManipulatePlot[{
  (*TB[*)Sum[(*|*)(*FB[*)((Sin[2π(2j - 1) x])(*,*)/(*,*)(2j-1))(*]FB*)(*|*), {(*|*)j(*|*),(*|*)1.0(*|*),(*|*)n(*|*)}](*|*)(*1:eJxTTMoPSmNiYGAoZgMSwaW5TvkVmYwgPguQCCkqTQUAeAcHBQ==*)(*]TB*),
  (*TB[*)Sum[(*|*)(*FB[*)((Cos[2π(2j - 1) x])(*,*)/(*,*)(2j-1))(*]FB*)(*|*), {(*|*)j(*|*),(*|*)1.0(*|*),(*|*)n(*|*)}](*|*)(*1:eJxTTMoPSmNiYGAoZgMSwaW5TvkVmYwgPguQCCkqTQUAeAcHBQ==*)(*]TB*)
  
}, {x, -1,1}, {{n,4}, 1,7, 1}]

__ManipulatePlot__ with a custom update function

Module[{r},
  ManipulatePlot[{
    (*TB[*)Sum[(*|*)(*FB[*)((Sin[2π(2j - 1) x])(*,*)/(*,*)(2j-1))(*]FB*)(*|*), {(*|*)j(*|*),(*|*)1.0(*|*),(*|*)n(*|*)}](*|*)(*1:eJxTTMoPSmNiYGAoZgMSwaW5TvkVmYwgPguQCCkqTQUAeAcHBQ==*)(*]TB*),
    (*TB[*)Sum[(*|*)(*FB[*)((Cos[2π(2j - 1) x])(*,*)/(*,*)(2j-1))(*]FB*)(*|*), {(*|*)j(*|*),(*|*)1.0(*|*),(*|*)n(*|*)}](*|*)(*1:eJxTTMoPSmNiYGAoZgMSwaW5TvkVmYwgPguQCCkqTQUAeAcHBQ==*)(*]TB*)
  
  }, {x, -1,1}, {{n,4}, 1,7, 1},
  Epilog -> {
    Table[{
      RandomColor[], Circle[RandomReal[{-1,1}, 2], r // Offload]
    }, {10}]
  }, "UpdateFunction" -> Function[n,
    r = (n - 1)/5.0;
    True
  ]]
]

Live Animate Widget

Normally, it recalculates every tick on the Wolfram Kernel, but here it was pre-calculated and stored on the page.

Animate[Series[Cos[x], {x,0,n}], {n,2, 10, 1}, AnimationRate->3]

Gaussian Curve

Try to drag a red point

ClearAll[generate];
generate[{x_, y_}, k_] := Table[{t, y Exp[- (*FB[*)(((*SpB[*)Power[(x - t)(*|*),(*|*)2](*]SpB*))(*,*)/(*,*)(2 k))(*]FB*)]}, {t,-1,1, 0.03}];

udata = {{-1,0}, {1,0}};

Graphics[{
  Cyan, Line[udata // Offload], Red, PointSize[0.05],
  EventHandler[Point[{0,0.5}], {
    "drag" -> ((udata = generate[#, 0.1])&)
  }]
}, PlotRange->{{-1,1}, {0,1}}, ImagePadding->None, Axes->{True, False}, ImageSize->Small]

:::warning

If a position was not sampled during the exporting phase, the __IDW interpolation with categorical partitioning__ method will be used. Read more about it at [wljs.io](https://wljs.io/frontend/Exporting/Dynamic%20HTML).

:::

Mouse Follower

A basic widget that tracks and animates an array of lines to follow the mouse cursor.

getLines[xy_] := With[{dir = 0.05 Normalize[xy]},
  (Table[W[{{i,j}, {i,j} + dir / ((*SpB[*)Power[Norm[{i,j}-xy](*|*),(*|*)2](*]SpB*) + 0.1)}], {i, -1,1,0.2}, {j, -1,1,0.2}] // Flatten) /. {W -> Identity}
];

Module[{lines = getLines[{0.01,0.01}]}, 
  Graphics[{
	White,
	EventHandler[
		Rectangle[{-2,-2}, {2,2}],
		{"mousemove"->Function[xy, lines = getLines[xy]]}
	],
	Black,
   Line[lines // Offload]
  }, "TransitionDuration"->270, "TransitionType"->"Linear", PlotRange->{{-1,1}, {-1,1}}]
]

Other examples

Manipulate 3D plot

Manipulate[
  Plot3D[Sin[n x] Cos[n y], {x,-1,1}, {y,-1,1}]
, {n, 1, 5, 1}]