TC
/
3DPRCU


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
<title>Cloud Slicer UI</title>
<script src="upld.js"></script>
<script src="stl_viewer.min.js"></script> 
<style>
	#stl_cont{
		width:100%;
		min-height:500px;
	}
	#gcodePreview{
		width:100%;
		min-height:500px;
	}
</style>
</head>
<body>
<br><br>
<div class="ts container">
<div class="ts segment">
<div class="ts header">
    <i class="cloud icon"></i> 3D 打印機集群雲端切片界面 （測試版）
    <div class="sub header">對，即使是 ESP8266 也能直接打印 STL</div>
</div>
<div class="ts steps">
    <div class="active step">
        <i class="cloud upload icon"></i>
        <div class="content">
            <div class="title">上載 STL 檔</div>
            <div class="description">最大限制 256MB</div>
        </div>
    </div>
    <div class="step">
        <i class="wait icon"></i>
        <div class="content">
            <div class="title">等待切片</div>
            <div class="description">應該不會等得久，因為雲端已經幫你做了大部分的運算</div>
        </div>
    </div>
    <div class="step">
        <i class="print icon"></i>
        <div class="content">
            <div class="title">開始打印</div>
			<div class="description">現在就到你的 ESP8266 開始工作了</div>
        </div>
    </div>
</div>
</div>

<div class="ts segment">
<form id="fileform" enctype="multipart/form-data">
    <input type="file" name="file" id="modelfile">
	
</form>
<button class="ts basic button" onClick="uploadFile();">上載並預覽</button>
</div>

<div id="previewWindow" class="ts segment">
<div id="stl_cont"></div> 
<p></p>
</div>

<div class="ts segment">
<button class="ts basic button" onClick="slice();">切片並取得 Gcode</button>
<textarea id="gcodePreview">
	
</textarea>
</div>

<div class="ts segment">
	<button class="ts basic button" onClick="sendToESP();">傳送至 ESP8266 並打印</button>
</div>
<br><br><br><br>
</div>
<script>
var cloudServerAddress = "http://" + window.location.host + "/CURA/"; //Replace this with your cloud slicer URL
var filename = "";
var gcodeFilename = "";
function previewStl(filename){
	var stl_viewer = new StlViewer(document.getElementById("stl_cont"), { models: [ {id:0, filename: cloudServerAddress + "input/" + filename} ] }); 	
	$("#previewWindow").find("p").text(filename);
}

function sendToESP(){
	alert("This is implemented by the developer");
}

function slice(){
	if (filename != ""){
		$.get(cloudServerAddress + "slice.php?inputfile=" + filename,function(data){
			gcodeFilename = data;
			previewGcode(gcodeFilename);
		});
	}else{
		alert("Please upload a file and press preview before slicing");
	}
}

function previewGcode(filename){
	$.get(cloudServerAddress + "output/" + filename,function(data){
		$("#gcodePreview").val(data);
	});
}

function uploadFile(){
	$('#modelfile').simpleUpload(cloudServerAddress + "upload.php",{
		start: function(file){
			//upload started
			console.log(file);
		},
		progress: function(progress){
			//received progress
		},
		success: function(data){
			//upload successful
			console.log(data);
			filename = data;
			//filename example: 1553943731.stl (which is PHP time stamp)
			previewStl(data);
		},
		error: function(error){
			//upload failed
		}
	});
}


</script>
</body>
</html>