Skip to content

Commit

Permalink
Fixing remaining issues with STL viewer. Closes #794
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexsielicki
alexsielicki committed Dec 4, 2017
1 parent 077a144 commit 486e611
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 43 deletions.
66 changes: 34 additions & 32 deletions web-server/js/slycat-3d-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,13 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping'
vm.controlsZoomingSpeed = ko.observable(1.5);
vm.controlsPanningSpeed = ko.observable(1);
vm.controlsDynamicDampingFactor = ko.observable(0.3);

vm.rotating = ko.observable(false);
vm.rotate_x = ko.observable(false);
vm.rotate_y = ko.observable(true);
vm.rotate_z = ko.observable(false);

vm.displayStats = ko.observable(false);
/** */

var mid = params.mid || URI(window.location).segment(-1);
Expand Down Expand Up @@ -221,15 +228,32 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping'
return false;
});

$('.slycat-3d-btn-rotate', $container).on('click', function() {
onRotation.bind(this)(animation, container, renderer, scene, camera, mesh, controls, fps, ms);
vm.rotate = function(data, event) {
cancelAnimationFrame(animation.id);
if (!vm.rotating()) {
renderRotate(animation, container, renderer, scene, camera, mesh, controls, fps, ms, vm);
} else {
renderFixed(animation, renderer, scene, camera, controls, fps, ms);
}
// Toggle roation state
vm.rotating(!vm.rotating());
return false;
});
}

$('.slycat-3d-stats-check', $container).on('change', function() {
toggleStats(container, viewer, renderer, camera, fps, ms, $(this).is(':checked'), isModel);
});
vm.toggleStats = function(data, event) {
toggleStats(container, viewer, renderer, camera, fps, ms, !vm.displayStats(), isModel);
vm.displayStats(!vm.displayStats());
}

vm.toggleX = function(data, event) {
vm.rotate_x(!vm.rotate_x());
}
vm.toggleY = function(data, event) {
vm.rotate_y(!vm.rotate_y());
}
vm.toggleZ = function(data, event) {
vm.rotate_z(!vm.rotate_z());
}

$(window).on('resize', function() { resizeViewer(container, viewer, renderer, camera, isModel); });
},
Expand Down Expand Up @@ -345,14 +369,14 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping'
* @param {Object} fps
* @param {Object} ms
*/
var renderRotate = function(animation, container, renderer, scene, camera, mesh, controls, fps, ms) {
var renderRotate = function(animation, container, renderer, scene, camera, mesh, controls, fps, ms, vm) {
var rr = function() {
controls.update();
renderer.render(scene, camera);

var x = $('.slycat-3d-x-check', $(container)).is(':checked');
var y = $('.slycat-3d-y-check', $(container)).is(':checked');
var z = $('.slycat-3d-z-check', $(container)).is(':checked');
var x = vm.rotate_x();
var y = vm.rotate_y();
var z = vm.rotate_z();

if (mesh && x) mesh.rotation.x -= 0.01;
if (mesh && y) mesh.rotation.y -= 0.01;
Expand All @@ -367,28 +391,6 @@ define('slycat-3d-viewer', ['slycat-server-root', 'knockout', 'knockout-mapping'
rr();
};

/**
* Function executed on click on the Rotate/Fixed button.
* @param {Object} animation animation object with an 'id' attribute
* @param {Object} container
* @param {Object} renderer reference to the rendered
* @param {Object} scene reference to the scene
* @param {Object} camera reference to the camera
* @param {Object} mesh reference to the mesh (i.e. geometry)
* @param {Object} controls reference to the controls
*/
var onRotation = function(animation, container, renderer, scene, camera, mesh, controls, fps, ms) {
cancelAnimationFrame(animation.id);

if ($(this).text() === 'Rotate') {
renderRotate(animation, container, renderer, scene, camera, mesh, controls, fps, ms);
$(this).text('Fixed');
} else {
renderFixed(animation, renderer, scene, camera, controls, fps, ms);
$(this).text('Rotate');
}
};

/**
* Function executed on click on the Reset button.
* @param {Object} controls refernce to the controls
Expand Down
1 change: 0 additions & 1 deletion web-server/plugins/slycat-parameter-image/css/ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1031,7 +1031,6 @@ a {
}

slycat-3d-viewer .header-bar {
overflow: scroll;
height: 37px;
white-space: nowrap;
}
27 changes: 17 additions & 10 deletions web-server/templates/slycat-3d-viewer.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
<div class="bootstrap-styles header-bar" style="padding: 10px 0 5px 10px; background-color: white;">
<button class="btn btn-warning btn-xs slycat-3d-btn-reset">Reset</button>
<button class="btn btn-default btn-xs slycat-3d-btn-settings" data-bind="click: run_settings">Settings</button>
<button class="btn btn-default btn-xs slycat-3d-btn-rotate">Rotate</button>
<label><input class="slycat-3d-x-check" type="checkbox"> x</label>
<label><input class="slycat-3d-y-check" type="checkbox" checked="checked"> y</label>
<label><input class="slycat-3d-z-check" type="checkbox"> z</label>

<div class="btn-group" role="group" aria-label="...">
<button class="btn btn-warning btn-xs slycat-3d-btn-reset">Reset</button>
<button class="btn btn-default btn-xs slycat-3d-btn-settings" data-bind="click: run_settings">Settings</button>
<button class="btn btn-default btn-xs slycat-3d-btn-rotate" data-bind="click: rotate, css: {active: rotating}">Rotate</button>
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Axis of rotation</li>
<li data-bind="css: {active: rotate_x}, click: toggleX,"><a href="#">x</a></li>
<li data-bind="css: {active: rotate_y}, click: toggleY,"><a href="#">y</a></li>
<li data-bind="css: {active: rotate_z}, click: toggleZ,"><a href="#">z</a></li>
<li role="separator" class="divider"></li>
<li data-bind="css: {active: displayStats}, click: toggleStats,"><a href="#">Display performance statistics</a></li>
</ul>
</div>

<!-- <button class="btn btn-default btn-xs slycat-3d-btn-settings" data-toggle="modal" data-target="#slycat-3d-modal">Settings</button> -->


<label><input class="slycat-3d-stats-check" type="checkbox" style="margin-left: 15px"> Display performance statistics</label>

<div class="slycat-3d-stats" style="display: none; float: right; margin-right: 25px;">
Number of faces: <span id="slycat-3d-face3-number"></span>
</div>
Expand Down

0 comments on commit 486e611

Please sign in to comment.