The power of symbolic computation meets web design
Tiny web server and hypertext preprocessor built on the freeware wolfram engine with websokets
Get startedWolfram Script Pages
- hypertext preprocessor built on top of Wolfram Kernel -
Embed Mathematica code into HTML/CSS/JS. It works similar to PHP or Mustache template engine.
<?wsp Table[ ?> <?wsp Graphics3D[i[], ImageSize->Small] ?> <?wsp, {i, {Icosahedron, Octahedron, Tetrahedron}}] ?>
If you need to calculate something more complex, use Module, With, Block as usual. All variables can be global
<ul>
<?wsp
Module[{cities = <||>},
(cities[#[[2, 1]]] = First@Normal@GeoDistance[#, Here]) & /@ GeoNearest[Entity["City"], Here, 5];
With[{max = Max@cities},
cities = #/max & /@ cities;
?>
<?wsp Table[ ?>
<li style="display: block; font-size: <?wsp 1.5 cities[i] ?>em"><?wsp i ?></li>
<?wsp , {i, cities//Keys} ] ?>
<?wsp
]
]
?>
</ul>
List of cities nearby your location scaled by the distance via CSS
- Konigsbrunn
- Augsburg
- Kissing
- Bobingen
- Stadtbergen
Organize your code into components with designer-friendly HTML templates.
<?wsp LoadPage["page.wsp", {id = "some-id-from-database-or-idunno", other vars...}] ?>
The direct access to the query/session data
<?wsp session ?>
<|Scheme->None,User->None,Domain->None,Port->None,Path->{},Query-><||>,Fragment->None,method->GET,Host->{127.0.0.1},Connection->{keep-alive},Upgrade-Insecure-Requests->{1},User-Agent->{Mozilla/5.0,(Windows,NT,10.0,Win64,x64),AppleWebKit/537.36,(KHTML,,like,Gecko),Chrome/102.0.5005.63,Safari/537.36},Accept->{text/html,application/xhtml+xml,application/xml,q=0.9,image/avif,image/webp,image/apng,*/*,q=0.8,application/signed-exchange,v=b3,q=0.9},Accept-Encoding->{gzip,,deflate},Accept-Language->{ru-RU,ru,q=0.9,en-US,q=0.8,en,q=0.7,de,q=0.6}|>
Websockets
An easy broadcast to all connected clients from Mathematica
Every second Mathematica executes the following code
WebSocketBroadcast[server,
With[{
hr = Now[[1, 4]] 180/12 // N,
mn = Now[[1, 5]] 180/60 // N,
sc = Now[[1, 6]] 180/60 // N
},
SetClock[hr, mn, sc]
]
]
On the client side the function SetClock is defined using JS
core.SetClock = function(args, env) {
hr.style = "transform: rotate("+ args[0] +"deg)";
mn.style = "transform: rotate("+ args[1] +"deg)";
sec.style = "transform: rotate("+ args[2] +"deg)";
}
Effortlessly data transfer to across all clients in real-time
Built-in functions in a tiny JS framework allows to use the same syntax as in Mathematica
Client's side
<input id="webinput" type="textarea" value="Type something...">
<script>
const input = document.getElementById('webinput');
input.addEventListener('input', updateValue);
function updateValue(e) {
socket.send(`UpdateInput["${input.value}"]`);
console.log(`${input.value}`);
};
core.SetInput = function(args, env) {
input.value = interpretate(args[0]);
};
</script>
On the Mathematica's side there is only one line
UpdateInput[string_] := WebSocketBroadcast[server, SetInput[string], client]