q3k
/
OctoPrint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First version with gcode viewer integration. 

Did some minor changes: renamed gcode tab, renamed gcode file download endpoint, added some margin for gcode viewer accordion. Not sure yet what to do about the gcode viewer controls/settings, until I figure this out they'll stay where they are now ,)
master
Gina Häußge 2013-02-03 22:01:11 +01:00
parent ea52bbfb14
commit 959feba9ca
4 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
octoprint/server.py
View File

@ -232,7 +232,7 @@ def getCustomControls():
def readGcodeFiles(): def readGcodeFiles():
return jsonify(files=gcodeManager.getAllFileData()) return jsonify(files=gcodeManager.getAllFileData())
@app.route("/gcodefile/<path:filename>", methods=["GET"]) @app.route(BASEURL + "gcodefiles/<path:filename>", methods=["GET"])
def readGcodeFile(filename): def readGcodeFile(filename):
return send_from_directory(UPLOAD_FOLDER, filename, as_attachment=True) return send_from_directory(UPLOAD_FOLDER, filename, as_attachment=True)

4
octoprint/static/gcodeviewer/css/style.css
View File

@ -39,14 +39,14 @@
margin-left: 5px; margin-left: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
#gcode { /*#gcode {
background: #ffffff; background: #ffffff;
float:right; float:right;
width: 680px; width: 680px;
height: 680px; height: 680px;
border-width: 2px; border-width: 2px;
border-style: none none none solid; border-style: none none none solid;
} }*/
#canvas{ #canvas{
/*float: left;*/ /*float: left;*/

24
octoprint/static/js/ui.js
View File

@ -825,10 +825,10 @@ function GcodeViewModel() {
} }
self.loadFile = function(filename){ self.loadFile = function(filename){
if(self.status == 'idle'){ if (self.status == 'idle') {
self.status = 'request'; self.status = 'request';
$.ajax({ $.ajax({
url: "gcodefile/"+filename, url: AJAX_BASEURL + "gcodefiles/" + filename,
type: "GET", type: "GET",
success: function(response, rstatus) { success: function(response, rstatus) {
if(rstatus === 'success'){ if(rstatus === 'success'){
@ -844,7 +844,7 @@ function GcodeViewModel() {
} }
} }
self.showGCodeViewer = function(response, rstatus){ self.showGCodeViewer = function(response, rstatus) {
var par = {}; var par = {};
par.target = {}; par.target = {};
par.target.result = response; par.target.result = response;
@ -862,13 +862,13 @@ function GcodeViewModel() {
self._processData = function(data) { self._processData = function(data) {
if(!self.enabled)return; if(!self.enabled)return;
if(self.loadedFilename == data.job.filename){ if(self.loadedFilename == data.job.filename) {
var cmdIndex = GCODE.gCodeReader.getLinesCmdIndex(data.progress.progress); var cmdIndex = GCODE.gCodeReader.getLinesCmdIndex(data.progress.progress);
if(cmdIndex){ if(cmdIndex){
GCODE.renderer.render(cmdIndex.layer, 0, cmdIndex.cmd); GCODE.renderer.render(cmdIndex.layer, 0, cmdIndex.cmd);
GCODE.ui.updateLayerInfo(cmdIndex.layer); GCODE.ui.updateLayerInfo(cmdIndex.layer);
} }
}else{ } else if (data.job.filename) {
self.loadFile(data.job.filename); self.loadFile(data.job.filename);
} }
} }
@ -951,6 +951,7 @@ $(function() {
var gcodeFilesViewModel = new GcodeFilesViewModel(); var gcodeFilesViewModel = new GcodeFilesViewModel();
var webcamViewModel = new WebcamViewModel(); var webcamViewModel = new WebcamViewModel();
var gcodeViewModel = new GcodeViewModel(); var gcodeViewModel = new GcodeViewModel();
var dataUpdater = new DataUpdater( var dataUpdater = new DataUpdater(
connectionViewModel, connectionViewModel,
printerStateViewModel, printerStateViewModel,
@ -963,16 +964,6 @@ $(function() {
gcodeViewModel gcodeViewModel
); );
var dataUpdater = new DataUpdater(
connectionViewModel,
printerStateViewModel,
temperatureViewModel,
controlsViewModel,
speedViewModel,
terminalViewModel,
gcodeFilesViewModel,
webcamViewModel);
//~~ Print job control //~~ Print job control
$("#job_print").click(function() { $("#job_print").click(function() {
@ -1120,12 +1111,13 @@ $(function() {
ko.applyBindings(controlsViewModel, document.getElementById("controls")); ko.applyBindings(controlsViewModel, document.getElementById("controls"));
ko.applyBindings(terminalViewModel, document.getElementById("term")); ko.applyBindings(terminalViewModel, document.getElementById("term"));
ko.applyBindings(speedViewModel, document.getElementById("speed")); ko.applyBindings(speedViewModel, document.getElementById("speed"));
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
var webcamElement = document.getElementById("webcam"); var webcamElement = document.getElementById("webcam");
if (webcamElement) { if (webcamElement) {
ko.applyBindings(webcamViewModel, document.getElementById("webcam")); ko.applyBindings(webcamViewModel, document.getElementById("webcam"));
} }
var gCodeVisualizerElement = document.getElementById("tab2d"); var gCodeVisualizerElement = document.getElementById("gcode");
if(gCodeVisualizerElement){ if(gCodeVisualizerElement){
gcodeViewModel.initialize(); gcodeViewModel.initialize();
} }

17
octoprint/templates/index.html
View File

@ -126,7 +126,7 @@
<ul class="nav nav-tabs" id="tabs"> <ul class="nav nav-tabs" id="tabs">
<li class="active"><a href="#temp" data-toggle="tab">Temperature</a></li> <li class="active"><a href="#temp" data-toggle="tab">Temperature</a></li>
<li><a href="#controls" data-toggle="tab">Controls</a></li> <li><a href="#controls" data-toggle="tab">Controls</a></li>
{% if gCodeVisualizer %}<li><a href="#tab2d" data-toggle="tab">GCode Viewer</a></li>{% endif %} {% if enableGCodeVisualizer %}<li><a href="#gcode" data-toggle="tab">GCode Viewer</a></li>{% endif %}
<!--<li><a href="#speed" data-toggle="tab">Speed</a></li>--> <!--<li><a href="#speed" data-toggle="tab">Speed</a></li>-->
<li><a href="#term" data-toggle="tab">Terminal</a></li> <li><a href="#term" data-toggle="tab">Terminal</a></li>
{% if webcamStream %}<li><a href="#webcam" data-toggle="tab">Webcam</a></li>{% endif %} {% if webcamStream %}<li><a href="#webcam" data-toggle="tab">Webcam</a></li>{% endif %}
@ -244,14 +244,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-pane" id="tab2d"> <div class="tab-pane" id="gcode">
<canvas id="canvas" width="572" height="588"></canvas> <canvas id="canvas" width="572" height="588"></canvas>
<div id="slider-vertical"></div> <div id="slider-vertical"></div>
<div id="slider-horizontal"></div> <div id="slider-horizontal"></div>
<div id="accordion2" class="accordion">
<div id="gcode_accordion" class="accordion" style="margin-top: 20px">
<div class="accordion-group"> <div class="accordion-group">
<div class="accordion-heading"> <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#progressAccordionTab"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#gcode_accordion" href="#progressAccordionTab">
Progress indicators Progress indicators
</a> </a>
</div> </div>
@ -270,7 +271,7 @@
</div> </div>
<div class="accordion-group"> <div class="accordion-group">
<div class="accordion-heading"> <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#infoAccordionTab"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#gcode_accordion" href="#infoAccordionTab">
Model info Model info
</a> </a>
</div> </div>
@ -282,7 +283,7 @@
</div> </div>
<div class="accordion-group"> <div class="accordion-group">
<div class="accordion-heading"> <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#layerAccordionTab"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#gcode_accordion" href="#layerAccordionTab">
Layer Info Layer Info
</a> </a>
</div> </div>
@ -294,7 +295,7 @@
</div> </div>
<div class="accordion-group"> <div class="accordion-group">
<div class="accordion-heading"> <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#options2DAccordionTab"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#gcode_accordion" href="#options2DAccordionTab">
2D Render options 2D Render options
</a> </a>
</div> </div>
@ -313,7 +314,7 @@
<div class="accordion-group"> <div class="accordion-group">
<div class="accordion-heading"> <div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#analyzeOptionsAccordioinTab"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#gcode_accordion" href="#analyzeOptionsAccordioinTab">
GCode analyzer options GCode analyzer options
</a> </a>
</div> </div>