bitbybit.dev runner example - IO from Rete editor

This project contains a basic example of how to use Inputs and Outputs of the script that was embedded from Rete editor

by matas_bitbybitdev

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Runner Example - IO from Rete editor</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!--
      Need a visual blank slate?
      Remove all code in `styles.css`!
    -->
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/[email protected]/runner/bitbybit-runner.js"></script>
    <script type="module" src="script.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 - IO from Rete editor</h1>
      <div class="myCanvasZone">
        <canvas id="myCanvas"></canvas>
      </div>
      <div>
        <button
          onclick="updateProp('radius1', false)"
          title="Decrease radius1 by 1"
        >
          -
        </button>
        <span class="label" id="radius1">Radius1 is 4</span>
        <button
          onclick="updateProp('radius1', true)"
          title="Increase radius1 by 1"
        >
          +
        </button>
      </div>
      <div class="actions">
        <div>
          <button
            onclick="updateProp('radius2', false)"
            title="Decrease radius2 by 1"
          >
            -
          </button>
          <span class="label" id="radius2">Radius2 is 4</span>
          <button
            onclick="updateProp('radius2', true)"
            title="Increase radius2 by 1"
          >
            +
          </button>
        </div>
        <div>
          <button
            onclick="updateProp('distance', false)"
            title="Decrease distance by 1"
          >
            -
          </button>
          <span...

CSS

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

button {
  background-color: #1a1c1f;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
}

.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;
}

.actions {
  margin-bottom: 20px;
}

.label {
  text-align: center;
  display: inline-block;
  min-width: 130px;
}

JavaScript

// Timeout is needed for HTML to have time to finish rendering. This also makes sure that myCanvas actually can be found
window.inputs = {
  radius1: 4,
  radius2: 2,
  distance: 24,
};

const bounds = {
  radius1Min: 2,
  radius1Max: 10,
  radius2Min: 2,
  radius2Max: 10,
  distanceMin: 5,
  distanceMax: 40,
};

window.previousMeshes = [];
updateLabels();

setTimeout(async () => {
  const runnerOptions = {
    canvasId: 'myCanvas',
    canvasZoneClass: 'myCanvasZone',
    enablePhysics: true,
    enableOCCT: true,
    enableJSCAD: false,
    enableKeyEventListeners: false,
    loadFonts: ['Roboto'],
  };

  const { bitbybit, Bit } = await window.bitbybitRunner.run(runnerOptions);

  // we adjust camera here. If script would adjust camera then every time we run the script it would reset position

  const cameraOpt = new Bit.Inputs.BabylonScene.CameraConfigurationDto();
  cameraOpt.position = [-10, 20, -20];
  cameraOpt.lookAt = [10, 0, 0];
  bitbybit.babylon.scene.adjustActiveArcRotateCamera(cameraOpt);

  const res = await window.bitbybitRunner.executeScript(
    exportedScript(),
    inputs
  );
  previousMeshes = res.meshes;
}, 0);

async function updateProp(prop, increase) {
  let newVal = inputs[prop];
  if (increase) {
    newVal++;
  } else {
    newVal--;
  }
  if (newVal >= bounds[prop + 'Min'] && newVal <= bounds[prop + 'Max']) {
    buttonActivation(true);
    inputs[prop] = newVal;
    updateLabels();
    const res = await window.bitbybitRunner.executeScript(
      exportedScript(),
      inputs
    );
    previousMeshes.forEach((m) => m.dispose());
    previousMeshes = res.meshes;
    buttonActivation(false);
  }
}

function updateLabels() {
  document.getElementById('radius1').innerHTML =
    'Radius 1 is ' + inputs.radius1;
  document.getElementById('radius2').innerHTML =
    'Radius 2 is ' + inputs.radius2;
  document.getElementById('distance').innerHTML =
    'Distance is ' + inputs.distance;
}

function buttonActivation(disabled) {
  const...