Skip to content

Commit

Permalink
Proper uploading incl. drag-n-drop for both local storage and SD card
Browse files Browse the repository at this point in the history
  • Loading branch information
@foosel
foosel committed May 20, 2013
1 parent 039a17d commit b048cc3
Show file tree
Hide file tree
Showing 4 changed files with 257 additions and 42 deletions.
127 changes: 127 additions & 0 deletions octoprint/static/css/octoprint.less
View file
Expand Up @@ -145,6 +145,9 @@ body {
padding-right: 4px;
}

.upload-buttons .btn {
margin-right: 0;
}

/** Tables */

Expand Down Expand Up @@ -399,3 +402,127 @@ ul.dropdown-menu li a {
overflow: visible !important;
}

#drop_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: none;

&.in {
display: block;
}

#drop_overlay_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

#drop_overlay_wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 60px;

@dropzone_width: 400px;
@dropzone_height: 400px;
@dropzone_distance: 50px;
@dropzone_border: 2px;

#drop, #drop_background {
position: absolute;
top: 50%;
left: 50%;
margin-left: -1 * @dropzone_width / 2;
margin-top: -1 * @dropzone_height / 2;
}

#drop_locally, #drop_locally_background {
position: absolute;
top: 50%;
left: 50%;
margin-left: -1 * @dropzone_width - @dropzone_distance / 2;
margin-top: -1 * @dropzone_height / 2;
}

#drop_sd, #drop_sd_background {
position: absolute;
top: 50%;
left: 50%;
margin-left: @dropzone_distance / 2;
margin-top: -1 * @dropzone_height / 2;
}

.dropzone {
width: @dropzone_width + 2 * @dropzone_border;
height: @dropzone_height + 2 * @dropzone_border;
z-index: 10001;

color: #ffffff;
font-size: 30px;

i {
font-size: 50px;
}

.centered {
display: table-cell;
text-align: center;
vertical-align: middle;
width: @dropzone_width;
height: @dropzone_height;
line-height: 40px;

filter:alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}
}

.dropzone_background {
width: @dropzone_width;
height: @dropzone_height;
border: 2px dashed #eeeeee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

background-color: #000000;
filter:alpha(opacity=25);
-moz-opacity:0.25;
-khtml-opacity: 0.25;
opacity: 0.25;

&.hover {
background-color: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

}

&.fade {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 1;
}
}
}
}
127 changes: 95 additions & 32 deletions octoprint/static/js/ui.js
View file
Expand Up @@ -1885,43 +1885,103 @@ $(function() {

//~~ Gcode upload

function gcode_upload_done(e, data) {
gcodeFilesViewModel.fromResponse(data.result);
$("#gcode_upload_progress .bar").css("width", "0%");
$("#gcode_upload_progress").removeClass("progress-striped").removeClass("active");
$("#gcode_upload_progress .bar").text("");
}

function gcode_upload_progress(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#gcode_upload_progress .bar").css("width", progress + "%");
$("#gcode_upload_progress .bar").text("Uploading ...");
if (progress >= 100) {
$("#gcode_upload_progress").addClass("progress-striped").addClass("active");
$("#gcode_upload_progress .bar").text("Saving ...");
}
}

var localTarget;
if (CONFIG_SD_SUPPORT) {
localTarget = $("#drop_locally");
} else {
localTarget = $("#drop");
}

$("#gcode_upload").fileupload({
dataType: "json",
done: function (e, data) {
gcodeFilesViewModel.fromResponse(data.result);
$("#gcode_upload_progress .bar").css("width", "0%");
$("#gcode_upload_progress").removeClass("progress-striped").removeClass("active");
$("#gcode_upload_progress .bar").text("");
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#gcode_upload_progress .bar").css("width", progress + "%");
$("#gcode_upload_progress .bar").text("Uploading ...");
if (progress >= 100) {
$("#gcode_upload_progress").addClass("progress-striped").addClass("active");
$("#gcode_upload_progress .bar").text("Saving ...");
}
}
dropZone: localTarget,
formData: {target: "local"},
done: gcode_upload_done,
progressall: gcode_upload_progress
});

$("#gcode_upload_sd").fileupload({
dataType: "json",
formData: {target: "sd"},
done: function (e, data) {
gcodeFilesViewModel.fromResponse(data.result);
$("#gcode_upload_progress .bar").css("width", "0%");
$("#gcode_upload_progress").removeClass("progress-striped").removeClass("active");
$("#gcode_upload_progress .bar").text("");
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$("#gcode_upload_progress .bar").css("width", progress + "%");
$("#gcode_upload_progress .bar").text("Uploading ...");
if (progress >= 100) {
$("#gcode_upload_progress").addClass("progress-striped").addClass("active");
$("#gcode_upload_progress .bar").text("Saving ...");
if (CONFIG_SD_SUPPORT) {
$("#gcode_upload_sd").fileupload({
dataType: "json",
dropZone: $("#drop_sd"),
formData: {target: "sd"},
done: gcode_upload_done,
progressall: gcode_upload_progress
});
}

$(document).bind("dragover", function (e) {
var dropOverlay = $("#drop_overlay");
var dropZone = $("#drop");
var dropZoneLocal = $("#drop_locally");
var dropZoneSd = $("#drop_sd");
var dropZoneBackground = $("#drop_background");
var dropZoneLocalBackground = $("#drop_locally_background");
var dropZoneSdBackground = $("#drop_sd_background");
var timeout = window.dropZoneTimeout;

if (!timeout) {
dropOverlay.addClass('in');
} else {
clearTimeout(timeout);
}

var foundLocal = false;
var foundSd = false;
var found = false
var node = e.target;
do {
if (dropZoneLocal && node === dropZoneLocal[0]) {
foundLocal = true;
break;
} else if (dropZoneSd && node === dropZoneSd[0]) {
foundSd = true;
break;
} else if (dropZone && node === dropZone[0]) {
found = true;
break;
}
node = node.parentNode;
} while (node != null);

if (foundLocal) {
dropZoneLocalBackground.addClass("hover");
dropZoneSdBackground.removeClass("hover");
} else if (foundSd) {
dropZoneSdBackground.addClass("hover");
dropZoneLocalBackground.removeClass("hover");
} else if (found) {
dropZoneBackground.addClass("hover");
} else {
if (dropZoneLocalBackground) dropZoneLocalBackground.removeClass("hover");
if (dropZoneSdBackground) dropZoneSdBackground.removeClass("hover");
if (dropZoneBackground) dropZoneBackground.removeClass("hover");
}

window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropOverlay.removeClass("in");
if (dropZoneLocal) dropZoneLocalBackground.removeClass("hover");
if (dropZoneSd) dropZoneSdBackground.removeClass("hover");
if (dropZone) dropZoneBackground.removeClass("hover");
}, 100);
});

//~~ Offline overlay
Expand Down Expand Up @@ -2007,10 +2067,13 @@ $(function() {
}

// Fix input element click problem on login dialog
$('.dropdown input, .dropdown label').click(function(e) {
$(".dropdown input, .dropdown label").click(function(e) {
e.stopPropagation();
});

$(document).bind("drop dragover", function (e) {
e.preventDefault();
});
}
);

15 changes: 15 additions & 0 deletions octoprint/templates/dialogs.jinja2
View file
Expand Up @@ -17,6 +17,21 @@
</div>
</div>

<div id="drop_overlay">
<div id="drop_overlay_background"></div>
<div id="drop_overlay_wrapper">
{% if enableSdSupport %}
<div class="dropzone" id="drop_locally"><span class="centered"><i class="icon-upload-alt"></i><br>Upload locally</span></div>
<div class="dropzone_background" id="drop_locally_background"></div>
<div class="dropzone" id="drop_sd"><span class="centered"><i class="icon-upload-alt"></i><br>Upload to SD</span></div>
<div class="dropzone_background" id="drop_sd_background"></div>
{% else %}
<div class="dropzone" id="drop"><span class="centered"><i class="icon-upload-alt"></i><br>Upload</span></div>
<div class="dropzone_background" id="drop_background"></div>
{% endif %}
</div>
</div>

<div id="confirmation_dialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
Expand Down
30 changes: 20 additions & 10 deletions octoprint/templates/index.jinja2
View file
Expand Up @@ -182,16 +182,26 @@
</ul>
</div>
<div style="display: none;" data-bind="visible: loginState.isUser">
<span class="btn btn-primary btn-block fileinput-button" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
<i class="icon-upload icon-white"></i>
<span>Upload</span>
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
</span>
<span class="btn btn-primary btn-block fileinput-button" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
<i class="icon-upload icon-white"></i>
<span>Upload to SD</span>
<input id="gcode_upload_sd" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
</span>
<div class="row-fluid upload-buttons">
{% if enableSdSupport %}
<button class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
<i class="icon-upload-alt icon-white"></i>
<span>Upload</span>
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
</button>
<button class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
<i class="icon-upload-alt icon-white"></i>
<span>Upload to SD</span>
<input id="gcode_upload_sd" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
</button>
{% else %}
<button class="btn btn-primary fileinput-button span12" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
<i class="icon-upload-alt icon-white"></i>
<span>Upload</span>
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
</button>
{% endif %}
</div>
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
<div class="bar" style="width: 0%"></div>
</div>
Expand Down

0 comments on commit b048cc3

Please sign in to comment.