lib/openjscad/test.html


<!DOCTYPE html>

<html><head>
  <script src="lib/three.min.js"></script>
  <script src="GridRect.js"></script>  <!-- Courtesy of https://github.com/mrdoob/three.js/issues/6549 -->
  <script src="lib/orbitcontrols.js"></script>
  <!-- fallback if no WebGL -->
  <script src="lib/projector.js"></script>
  <script src="lib/canvasrenderer.js"></script>
  <script src="lib/jquery-2.1.3.min.js"></script>
  <script src="src/csg.js"></script>
  <script src="src/threecsg.js"></script>
  <script src="src/openjscad.js"></script>
  <script src="src/formats.js"></script>
  <script src="TrackballControls.js"></script>

  <link rel="stylesheet" href="bootstrap.min.css" />
  <link rel="stylesheet" href="bootstrap-theme.min.css" />
  <script src="bootstrap.min.js"></script>

  <style>

body {
  font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  max-width: 820px;
}

pre, code, textarea {
  font: 12px/20px Monaco, monospace;
  border: 1px solid #CCC;
  border-radius: 3px;
  background: #F9F9F9;
  padding: 0 3px;
  color: #555;
}
pre, textarea {
  padding: 10px;
  width: 100%;
}
textarea:focus {
  outline: none;
}

a { color: inherit; }
</style>

<link rel="stylesheet" href="openjscad.css" type="text/css">
<script>
var gCurrentFile = null;
var gProcessor=null;

// Show all exceptions to the user:
OpenJsCad.AlertUserOfUncaughtExceptions();

function updateSolid()
{
  gProcessor.setJsCad(document.getElementById('code').value);
}

function onload()
{
  gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
  getProg('gear.jscad');
}

function getProg(name) {
  var el = document.getElementById('code');
  $.get(name, function(data) {
    el.value = data;
    updateSolid();
  });
}

$(document).ready(function() {
  $('#code').bind('input propertychange', function() {
      console.log('empty');
        // Todo if empty
        if(this.value.length){
          updateSolid();
          console.log('full');
        }
  });
  $('#jsEA').on('click', function() {
    console.log('Clicked JSEA');
    $('#jsE').addClass('active');
    $('#jsV').removeClass('active');
    $('#jsD').removeClass('active');
    $('#jsEdit').show();
    $('#jsDXF').hide();
    $('#jsView').hide();
  });
  $('#jsVA').on('click', function() {
    console.log('Clicked JSVA');
    $('#jsV').addClass('active');
    $('#jsE').removeClass('active');
    $('#jsD').removeClass('active');
    $('#jsEdit').hide();
    $('#jsDXF').hide();
    $('#jsView').show();
  });
  $('#jsDA').on('click', function() {
    console.log('Clicked JSVA');
    $('#jsD').addClass('active');
    $('#jsE').removeClass('active');
    $('#jsV').removeClass('active');
    $('#jsEdit').hide();
    $('#jsView').hide();
    $('#jsDXF').show();
  });
});

</script>
<body onload="onload()">
  <!-- Tabs -->
  <ul class="nav nav-tabs nav-justified" role="tablist">
    <li id="jsV"  class="active">
      <a id="jsVA" href="#">Viewer</a>
    </li>
    <li id="jsE">
      <a id="jsEA" href="#">Editor</a>
    </li>
    <li id="jsD">
      <a id="jsDA" href="#">DXF</a>
    </li>
  </ul>
  <!-- Tab 1 -->
  <div id="jsView">
    <div id="viewer"></div>
    <div class="btn btn-danger" id="generateOutputFileButton"><i class="fa fa-street-view fa-lg"></i>Render to DXF</div>
  </div>

  <!-- Tab 2 -->
  <div id="jsEdit" style="display: none;">
    <textarea id="code"></textarea>
  </div>

  <!-- Tab 3 -->
  <div id="jsDXF" style="display: none;">
    <textarea id="dxf"></textarea>
  </div>


</body>
</html>