@acransac/vtk.js/Sources/Widgets/Widgets3D/LineWidget/example/controlPanel.html

Visualization Toolkit for the Web

<div>
  <button id="addWidget">Add widget</button> 
  <br />
  <button id="removeWidget">Remove widget</button> 
  <br />
  <br />
  <div>Distance: <span id="distance">0</span></div>
  <br />
  <div>Text:</div>
  <textarea id="txtIpt" name="name"></textarea>
  <br />
  <br />
  <div>Line position</div>
  <input
    title="Line position"
    id="linePos"
    type="range"
    min="0"
    max="100"
    step="1"
    value="50"
  />
  <br />

  <br />
  <label for="pet-select">Handle1</label>
  <br />

  <select name="handle1" class="HandleSource" id="idh1">
    <option value="sphere">Sphere</option>
    <option value="cone">Cone</option>
    <option value="cube">Cube</option>
    <option value="triangle">Triangle</option>
    <option value="4pointsArrowHead">4 points arrow head</option>
    <option value="6pointsArrowHead">6 points arrow head</option>
    <option value="star">Star</option>
    <option value="disk">Disk</option>
    <option value="circle">Circle</option>
    <option value="viewFinder">View Finder</option>
    <option value="voidSphere">None</option>
  </select>
  <div>Visibility
    <input id="visiH1" type="checkbox" />
    <br />
  </div>
  <br />
  <label for="pet-select">Handle2</label>
  <br />
  <select name="handle2" class="HandleSource" id="idh2">
    <option value="sphere">Sphere</option>
    <option value="cone">Cone</option>
    <option value="cube">Cube</option>
    <option value="triangle">Triangle</option>
    <option value="4pointsArrowHead">4 points arrow head</option>
    <option value="6pointsArrowHead">6 points arrow head</option>
    <option value="star">Star</option>
    <option value="disk">Disk</option>
    <option value="circle">Circle</option>
    <option value="viewFinder">View Finder</option>
    <option value="voidSphere">None</option>
  </select>
  <div>Visibility
    <input id="visiH2" type="checkbox" />
    <br />
  </div>
</div>