Runner Inline Example

This site contains a very simple example of how runner can handle inline script of the alloy wheel concept design that was exported from bitbybit.dev Rete editor

by matas_bitbybitdev

HTML

<!doctype html>
<html lang="en">

<head>
    <title>Runner Inline Example - Bit By Bit Developers</title>
    <base href="/">
    <link rel="icon" type="image/x-icon" href="https://bitbybit.dev/assets/favicon.png">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
        content="This site contains a very simple example of how runner can handle inline script of the alloy wheel concept design that was exported from bitbybit.dev Rete editor">
    <script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/[email protected]/runner/bitbybit-runner.js"></script>
</head>

<body>
    <div class="example">
        <a class="logo" href="https://bitbybit.dev" target="_blank" rel="noopener noreferrer">
            <img alt="Logo of Bit by bit developers company" src="https://bitbybit.dev/assets/logo-gold-small.png" />
            <div>bitbybit.dev</div>
        </a>
        <h1>Runner Example - Inline Script Embed</h1>
        <div class="myCanvasZone">
            <canvas id="myCanvas"></canvas>
        </div>
        <a href="https://bitbybit.dev/projects/public/EMfBhqxbI5DibbwVactv/script/7LRqBI8nFqx32lXiK3G1/script-rete-script-alloy-wheel-cad-model-in-project-3d-alloy-wheel-cad-concept-by-author-matas"
            target="_blank" rel="noopener noreferrer">
            Embed string generated by using the "Rete Script Alloy Wheel CAD Model".
        </a>
    </div>
</body>

</html>

CSS

body {
  margin: 0;
  background-color: #1a1c1f;
  color: white;
  font-weight: 400;
  font-family: 'IBM Plex Sans';
  width: 100%;
  height: 100%;
}

.example {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 300px;
  margin-right: 300px;
}

@media(max-width:1400px) {
  .example {
    margin-left: 100px;
    margin-right: 100px;
  }
}

@media(max-width:769px) {
  .example {
    margin-left: 20px;
    margin-right: 20px;
  }
}

#myCanvas {
  display: block;
  outline: none;
  border: 1px solid white;
  border-radius: 5px;
  width: 100%;
}

.logo {
  margin-bottom: 20px;
}

.logo img {
  width: 50px;
  height: 50px;
}

.myCanvasZone {
  margin-top: 20px;
  margin-bottom: 10px;
}

a {
  color: white;
  vertical-align: middle;
}

JavaScript

// Timeout is needed for HTML to have time to finish rendering. This also makes sure that myCanvas actually can be found
setTimeout(async () => {
  const runnerOptions = {
    canvasId: "myCanvas",
    canvasZoneClass: "myCanvasZone",
    enablePhysics: true,
    enableOCCT: true,
    enableJSCAD: false,
    enableKeyEventListeners: false,
    loadFonts: ["Roboto"]
  };

  await window.bitbybitRunner.run(runnerOptions);
  window.bitbybitRunner.executeScript(exportedScript(), {});
}, 0);

function exportedScript() {
  return '{\"type\":\"rete\",\"version\":\"0.15.9\",\"script\":\"!async function(e,t,s,n,r){let a={};a={x:[0],y:[0],z:[1],...a};const o=[{result:e.HS.executeBasedOnType(a,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}];let i={};i={text:[\\"[true,false]\\"],...i};const c=[{result:e.HS.executeBasedOnType(i,!1,(e=>t.json.parse(e))),transformers:[]}];let p={};p={text:[\\"[false,true]\\"],...p};const u=[{result:e.HS.executeBasedOnType(p,!1,(e=>t.json.parse(e))),transformers:[]}],l=[{result:[5],transformers:[]}];let d={};d={x:[1],y:[0],z:[0],...d};const m=[{result:e.HS.executeBasedOnType(d,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}],y=[{result:[12],transformers:[]}],S=[{result:[7],transformers:[]}];let H={};H={x:[0],y:[1],z:[0],...H};const f=[{result:e.HS.executeBasedOnType(H,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}];let h={};h={x:[0],y:[0],z:[1],...h};const x=[{result:e.HS.executeBasedOnType(h,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}];let v={};v={number:[.4],...v};const O=[{result:e.HS.executeBasedOnType(v,!1,(e=>t.math.number(e))),transformers:[]}];let I={};I={x:[0],y:[0],z:[-1],...I};const L=[{result:e.HS.executeBasedOnType(I,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}];let B={};B={x:[0],y:[0],z:[-2],...B};const w=[{result:e.HS.executeBasedOnType(B,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}];let T={};T={x:[0],y:[0],z:[1],...T};const g=[{result:e.HS.executeBasedOnType(T,!1,(e=>t.vector.vectorXYZ(e))),transformers:[]}];let...