Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140101

Madeleine.js for 3D model slicing

$
0
0

I am trying to create a 3D printing cost calculator website, that takes some input data and an stl file and renders the model + outputs costs associated with the printing.

The rendering is made with Madeleine.js and the slicing with CuraEngine. The only thing that is missing is to pass the uploaded STL file to the php code that runs CuraEngine (at the moment I am slicing a test file bitcoin_coin_flowalistik.stl on my local server). I can't find where Madeleine stores the STL files and how can I pass that information to the shell_exec php function towards the end of my file. Thanks.

<!DOCTYPE HTML>
<html lang="en" class="no-js">
  <!-- based on https://3daddict.com/tool/3D_Print_Cost_Calculator.html -->
  <head>
    <title>3D Printing Price Cost Calculator Tool</title>
    <!-- code to add Madeleine http://jinjunho.github.io/Madeleine.js/ -->
    <link href="/madeleine/src/css/Madeleine.css" rel="stylesheet">
    <script src="/madeleine/src/lib/stats.js"></script>
    <script src="/madeleine/src/lib/detector.js"></script>
    <script src="/madeleine/src/lib/three.min.js"></script>
    <script src="/madeleine/src/Madeleine.js"></script>
    <style>
      #target{max-width:640px;}
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <h1>3D Printing Price Cost Calculator Tool</h1>
    <p>This tool is designed to help calculate the "actual" cost and profit when selling a 3D Printed part.<br>
      To use the 3D Printing Calculator upload your STL file, enter the values below and click submit. The calculator will slice your file and estimate the values needed to calculate the cost of the print.<br>
      To fine tune and adjust the data below click on the setting button and adjust as needed.</p>      
    <!-- Default values -->
    <?PHP
      if (isset($_POST["submit1"])) {
          $lheight = $_POST["lheight"];
          $infill = $_POST["infill"];
          $speed = $_POST["speed"];
          $erate = $_POST["erate"];
          $packfee = $_POST["packfee"];
          $shipfee = $_POST["shipfee"];
          $example = $_POST["material"];
          $profit = $_POST["profit"];;
      }
      else{
          $lheight = 0.2;
          $infill = 20;
          $speed = 60;
          $erate = 0.12376;
          $packfee = 1;
          $shipfee = 2;
          $profit = 10;
      }
      ?>
    <h2>1- Input 3D model (stl file)</h2>
    <form id="myForm" name="myForm">
      <input type="file" id="files" name="files" multiple>
    </form>
    <div id="target"></div>

    <form action="" method="POST">
      <h2>2- Material</h2>
      <select id="mtype" name="material">     
    <option <?php if (isset($example) && $example=="PLA") echo "selected";?>>PLA</option>
    <option <?php if (isset($example) && $example=="PETG") echo "selected";?>>PETG</option>
    <option <?php if (isset($example) && $example=="FilaFlex") echo "selected";?>>FilaFlex</option>
      </select>
      <div id="PLA" class="materials" style="display:none"> Density: 1.3 g/cm<sup>3</sup> Price: £18/kg     </div>
      <div id="PETG" class="materials" style="display:none"> Density: 1.38 g/cm<sup>3</sup> Price: £18/kg  </div>
      <div id="FilaFlex" class="materials" style="display:none"> Density: 1.21 g/cm<sup>3</sup> Price: £18/kg  </div>
      <p>You can read more about each material at the following guide 
    <a href="https://www.simplify3d.com/support/materials-guide/" target="_blank">link</a>.
      </p>
      <h2>3- Input data</h2>
      <p>Default values below (click on links for further explanation)
      <table style="width:30%">
    <!-- Options defined by the client -->
    <tr>
      <td><a href="https://www.3dhubs.com/knowledge-base/impact-layer-height-3d-print/" target="_blank">Layer Height</a></td>
      <td><input type="number" style="width:66px;height:5px;" step="0.05" value="<?PHP print $lheight; ?>" name="lheight" min="0.05" max="0.3"> mm</td>
    </tr>
    <tr>
      <td><a href="https://rigid.ink/blogs/news/optimum-infill" target="_blank">Infill Percentage</a>
      </td>
      <td><input type="number" style="width:66px;height:5px;" step="1" value="<?PHP print $infill; ?>" name="infill" min="0" max="100"> %</td>
    </tr>
    <tr>
      <td><a href="https://all3dp.com/3d-printing-speed/" target="_blank">Print Speed</a>
      </td>
      <td><input type="number" style="width:66px;height:5px;" step="0.1" value="<?PHP print $speed; ?>" name="speed" min="1" max="60"> mm/s</td>
    </tr>
    <tr>
      <td>Electricity rate </td>
      <td><input type="number" style="width:66px;height:5px;" step="0.00001" value="<?PHP print $erate; ?>" name="erate" min="0" max="10"> £/kWh</td>
    </tr>
    <!-- Extra costs -->
    <tr>
      <td>Packaging (£)</td>
      <td><input type="number" style="width:66px;height:5px;" step="0.01" value="<?PHP print $packfee; ?>" name="packfee" min="0" max="10"></td>
    </tr>
    <tr>
      <td>Shipping (£)</td>
      <td><input type="number" style="width:66px;height:5px;" step="0.01" value="<?PHP print $shipfee; ?>" name="shipfee" min="0" max="20"></td>
    </tr>
    <tr>
      <td>Profit (%)</td>
      <td><input type="number" style="width:66px;height:5px;" step="1" value="<?PHP print $profit; ?>" name="profit" min="0" max="100"></td>
    </tr>
      </table>
      <input type="submit" name="submit1" value="Submit">
    </form>
    <h2>4- Results</h2>
    <!-- show results -->    
    <?php               
      if (isset($_POST['submit1'])) { 
          // slicing
          $old_path = getcwd();
          chdir('/var/www/html/');
          $output=shell_exec("./slice.sh {$_POST['lheight']} {$_POST['infill']} {$_POST['speed']} bitcoin_coin_flowalistik.stl 2>&1");
          chdir($old_path);
          // Printing time costs
          echo "Printing time: " . $output ."<br>";
          $time=shell_exec("grep ';TIME:' cura_output");
          $time=explode(":",$time);
          $tcost=$time[1]/3600*$_POST['erate']*90/1000;
          echo "Printing time costs: £" . number_format($tcost,2,'.','') . "<br>";
          // material cost
          $vol=shell_exec("grep 'Filament: ' cura_output");
          $vol=explode(": ",$vol);
          if ($_POST["material"]=="PLA") {
              $mcost=$vol[1]*18*1.3/1000000;
          } elseif ($_POST["material"]=="PETG") {
              $mcost=$vol[1]*18*1.38/1000000;
          } elseif ($_POST["material"]=="FilaFlex") {
              $mcost=$vol[1]*18*1.21/1000000;
          }else{
              echo "No material selected" . "<br>";          
          }
          echo "Material costs: £" . number_format($mcost,2,'.','') . "<br>";
          $hcost=$_POST['packfee']+$_POST['shipfee'];
          // Handling costs
          echo "Handling costs: £" . number_format($hcost,2,'.','') . "<br>";
          // Total costs
          $tprice=$tcost+$mcost+$_POST['packfee']+$_POST['shipfee'];
          echo "Total costs: £" . number_format($tprice,2,'.','') . "<br>";          
          // Selling price
          echo "Selling price: £" . number_format($tprice*(1+$_POST['profit']/100),2,'.','') . "<br>";          
          // Profit
          echo "Profit: £" . number_format($tprice*(1+$_POST['profit']/100)-$tprice,2,'.','') . "<br>";          
      }
      else {
          echo "Enter data and click submit";    
      }
    ?>               
    <script language="JavaScript">      
      var fu1 = document.getElementById("files");
      document.write(fu1.value)
      window.onload = function(){
      Lily.ready({
          target: 'target',  // target div id
          file: 'files',  // file input id
          path: 'madeleine/src/'  // path to source directory from current html file
      });
      };
    </script>
    <script language="JavaScript">
      $(function() {      
      $('#mtype').change(function(){
          $('.materials').hide();
          $('#' + $(this).val()).show();
      });
      });
    </script>
    <script language="JavaScript">
      function checkOption(){
      //This will fire on changing of the value of "requests"
      var dropDown = document.getElementById("requestDropDown");
      var textBox = document.getElementById("otherBox");
      if(dropDown.value == "other"){
          textBox.style.visibility = "visible";
      }
      }
    </script>
  </body>
</html>

Viewing all articles
Browse latest Browse all 140101

Trending Articles