wip
This commit is contained in:
Teja
parent
4763a17da6
commit
1cc6ed6a61
3 changed files with 90 additions and 48 deletions
|
|
@ -814,6 +814,34 @@ $(function(){
|
|||
self._cleanup_render_mess = function(){
|
||||
$('#tmpSvg').remove();
|
||||
};
|
||||
|
||||
self.onTabChange = function (current, previous) {
|
||||
if (current === "#workingArea") {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -245,7 +245,8 @@ def index():
|
|||
#~~ prepare full set of template vars for rendering
|
||||
|
||||
render_kwargs = dict(
|
||||
webcamStream=settings().get(["webcam", "stream"]),
|
||||
#webcamStream=settings().get(["webcam", "stream"]),
|
||||
webcamStream=True,
|
||||
enableTemperatureGraph=settings().get(["feature", "temperatureGraph"]),
|
||||
enableAccessControl=userManager is not None,
|
||||
enableSdSupport=settings().get(["feature", "sdSupport"]),
|
||||
|
|
|
|||
|
|
@ -270,53 +270,66 @@
|
|||
<!-- 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() }">
|
||||
<rect data-bind="click: move_laser"
|
||||
id="coordGrid" x="0" y="0" width="0" height="0"
|
||||
stroke="none" fill="none"></rect>
|
||||
<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;-inkscape-font-specification:DIN-BoldAlternate Bold"
|
||||
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="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
|
||||
<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>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div style="position:relative">
|
||||
{% if webcamStream %}
|
||||
<div id="webcam_container" tabindex="0" style="position:absolute; top:0;left:0">
|
||||
<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',
|
||||
height: workingAreaHeightPx()+'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() }">
|
||||
<rect data-bind="click: move_laser"
|
||||
id="coordGrid" x="0" y="0" width="0" height="0"
|
||||
stroke="none" fill="none"></rect>
|
||||
<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;-inkscape-font-specification:DIN-BoldAlternate Bold"
|
||||
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="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
|
||||
<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>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue