Compare commits
3 commits
stable-1.2
...
camera_sup
| Author | SHA1 | Date | |
|---|---|---|---|
|
20906bca4d | ||
|
|
ac0ed5e9b5 | ||
|
|
1cc6ed6a61 |
2 changed files with 107 additions and 55 deletions
|
|
@ -44,6 +44,8 @@ $(function(){
|
|||
}
|
||||
var dim = [w,h];
|
||||
return dim;
|
||||
} else {
|
||||
return [0,0];
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -97,7 +99,7 @@ $(function(){
|
|||
|
||||
|
||||
self.trigger_resize = function(){
|
||||
if(typeof(snap) !== 'undefined') self.abortFreeTransforms();
|
||||
self.abortFreeTransforms();
|
||||
self.availableHeight(document.documentElement.clientHeight - $('body>nav').outerHeight() - $('footer>*').outerHeight() - 39); // magic number
|
||||
self.availableWidth($('#workingarea div.span8').innerWidth());
|
||||
};
|
||||
|
|
@ -613,12 +615,14 @@ $(function(){
|
|||
};
|
||||
|
||||
self.abortFreeTransforms = function(){
|
||||
var tip = snap.selectAll('._freeTransformInProgress');
|
||||
for (var i = 0; i < tip.length; i++) {
|
||||
var el = tip[i];
|
||||
el.ftRemoveHandles();
|
||||
if(typeof(snap) !== 'undefined'){
|
||||
var tip = snap.selectAll('._freeTransformInProgress');
|
||||
for (var i = 0; i < tip.length; i++) {
|
||||
var el = tip[i];
|
||||
el.ftRemoveHandles();
|
||||
}
|
||||
self.check_sizes_and_placements();
|
||||
}
|
||||
self.check_sizes_and_placements();
|
||||
};
|
||||
|
||||
self.getCompositionSVG = function(fillAreas, callback){
|
||||
|
|
@ -827,6 +831,38 @@ $(function(){
|
|||
self._cleanup_render_mess = function(){
|
||||
$('#tmpSvg').remove();
|
||||
};
|
||||
|
||||
self.onTabChange = function (current, previous) {
|
||||
if (current === "#workingarea") {
|
||||
|
||||
//self.trigger_resize();
|
||||
//self.check_sizes_and_placements();
|
||||
|
||||
if (self.webcamDisableTimeout !== undefined) {
|
||||
clearTimeout(self.webcamDisableTimeout);
|
||||
}
|
||||
var webcamImage = $("#webcam_image");
|
||||
var currentSrc = webcamImage.attr("src");
|
||||
if (currentSrc === undefined || currentSrc.trim() == "") {
|
||||
var newSrc = CONFIG_WEBCAM_STREAM;
|
||||
if (CONFIG_WEBCAM_STREAM.lastIndexOf("?") > -1) {
|
||||
newSrc += "&";
|
||||
} else {
|
||||
newSrc += "?";
|
||||
}
|
||||
newSrc += new Date().getTime();
|
||||
|
||||
//self.updateRotatorWidth();
|
||||
webcamImage.attr("src", newSrc);
|
||||
}
|
||||
} else if (previous === "#workingArea") {
|
||||
// only disable webcam stream if tab is out of focus for more than 5s, otherwise we might cause
|
||||
// more load by the constant connection creation than by the actual webcam stream
|
||||
self.webcamDisableTimeout = setTimeout(function () {
|
||||
$("#webcam_image").attr("src", "");
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
self.onBeforeBinding = function(){
|
||||
self.files.workingArea = self;
|
||||
|
|
@ -837,6 +873,6 @@ $(function(){
|
|||
// view model class, parameters for constructor, container to bind to
|
||||
ADDITIONAL_VIEWMODELS.push([WorkingAreaViewModel,
|
||||
["loginStateViewModel", "settingsViewModel", "printerStateViewModel", "gcodeFilesViewModel"],
|
||||
[document.getElementById("area_preview"), document.getElementById("working_area_files")]]);
|
||||
[document.getElementById("area_preview"), document.getElementById("working_area_files"), document.getElementById("webcam_container")]]);
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<!-- Navbar -->
|
||||
<ul class="nav nav-pills">
|
||||
<ul class="nav nav-pills" id="tabs">
|
||||
<li class="active"><a href="#workingarea" data-toggle="tab" id="wa_tab_btn">working area</a></li>
|
||||
<li><a href="#designlib" data-toggle="tab">design library</a></li>
|
||||
<li><a href="#focus" data-toggle="tab">focus</a></li>
|
||||
|
|
@ -282,54 +282,70 @@
|
|||
<!-- end sidebar -->
|
||||
|
||||
<div class="span8">
|
||||
<svg id="area_preview" class="workingarea"
|
||||
data-bind="style: {
|
||||
backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
|
||||
width: workingAreaWidthPx()+'px',
|
||||
height: workingAreaHeightPx()+'px'
|
||||
}
|
||||
">
|
||||
<filter id="grayscale_filter">
|
||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
|
||||
</filter>
|
||||
<filter id="gcimage_preview">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="table" tableValues="1"></feFuncR>
|
||||
<feFuncG type="table" tableValues="0.2 1"></feFuncG>
|
||||
<feFuncB type="table" tableValues="0.2 1"></feFuncB>
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
<g id="scaleGroup" data-bind="attr: { transform: scaleMatrix() }">
|
||||
|
||||
<text
|
||||
xml:space="preserve"
|
||||
data-bind="visible: working_area_empty"
|
||||
style="font-size:64px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#DDDDDD;fill-opacity:1;stroke:none;font-family:DIN-BoldAlternate, Helvetica, Arial, Sans-serif;"
|
||||
x="396.81018"
|
||||
y="552.36218"
|
||||
id="add_designs_hint"
|
||||
>
|
||||
<tspan
|
||||
id="tspan2987" x="368.571426" y="532.36218"
|
||||
style="text-anchor:middle;text-align:center">add designs via </tspan>
|
||||
<tspan
|
||||
x="500" y="592.36218" id="tspan2989"
|
||||
style="text-anchor:middle;text-align:center">the design library </tspan>
|
||||
<tspan
|
||||
x="568.571426" y="652.36218" id="tspan2993"
|
||||
style="text-anchor:middle;text-align:center">or drag 'n' drop </tspan>
|
||||
<tspan
|
||||
x="368.571426" y="712.36218" id="tspan2991"
|
||||
style="text-anchor:middle;text-align:center" /></text>
|
||||
<g id="placedGcodes" data-bind="visible: !state.isPrinting() && !state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
|
||||
<g id="gCodePreview" data-bind="visible: state.isPrinting() || state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
|
||||
<rect data-bind="click: move_laser"
|
||||
id="coordGrid" x="0" y="0" width="0" height="0"
|
||||
stroke="none" fill="none"></rect>
|
||||
<g id="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
|
||||
</g>
|
||||
</svg>
|
||||
<div style="position:relative">
|
||||
{% if webcamStream %}
|
||||
<div id="webcam_container" tabindex="0"
|
||||
style="position:absolute; top:0;left:0"
|
||||
data-bind="style: {
|
||||
width: workingAreaWidthPx()+'px'
|
||||
}">
|
||||
<div id="webcam_rotator" data-bind="css: { rotate90: settings.webcam_rotate90() }">
|
||||
<img id="webcam_image"
|
||||
data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() },
|
||||
style: {
|
||||
width: workingAreaWidthPx()+'px',
|
||||
}"/>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<svg id="area_preview" class="workingarea"
|
||||
data-bind="style: {
|
||||
backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
|
||||
width: workingAreaWidthPx()+'px',
|
||||
height: workingAreaHeightPx()+'px'
|
||||
}
|
||||
">
|
||||
<filter id="grayscale_filter">
|
||||
<feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
|
||||
</filter>
|
||||
<filter id="gcimage_preview">
|
||||
<feComponentTransfer>
|
||||
<feFuncR type="table" tableValues="1"></feFuncR>
|
||||
<feFuncG type="table" tableValues="0.2 1"></feFuncG>
|
||||
<feFuncB type="table" tableValues="0.2 1"></feFuncB>
|
||||
</feComponentTransfer>
|
||||
</filter>
|
||||
<g id="scaleGroup" data-bind="attr: { transform: scaleMatrix() }">
|
||||
|
||||
<text
|
||||
xml:space="preserve"
|
||||
data-bind="visible: working_area_empty"
|
||||
style="font-size:64px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#DDDDDD;fill-opacity:1;stroke:none;font-family:DIN-BoldAlternate, Helvetica, Arial, Sans-serif;"
|
||||
x="396.81018"
|
||||
y="552.36218"
|
||||
id="add_designs_hint"
|
||||
>
|
||||
<tspan
|
||||
id="tspan2987" x="368.571426" y="532.36218"
|
||||
style="text-anchor:middle;text-align:center">add designs via </tspan>
|
||||
<tspan
|
||||
x="500" y="592.36218" id="tspan2989"
|
||||
style="text-anchor:middle;text-align:center">the design library </tspan>
|
||||
<tspan
|
||||
x="568.571426" y="652.36218" id="tspan2993"
|
||||
style="text-anchor:middle;text-align:center">or drag 'n' drop </tspan>
|
||||
<tspan
|
||||
x="368.571426" y="712.36218" id="tspan2991"
|
||||
style="text-anchor:middle;text-align:center" /></text>
|
||||
<g id="placedGcodes" data-bind="visible: !state.isPrinting() && !state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
|
||||
<g id="gCodePreview" data-bind="visible: state.isPrinting() || state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
|
||||
<rect data-bind="click: move_laser"
|
||||
id="coordGrid" x="0" y="0" width="0" height="0"
|
||||
stroke="none" fill="none"></rect>
|
||||
<g id="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue