kopia lustrzana https://github.com/inkstitch/inkstitch
realistic rendering checkboxes
rodzic
ea6b89581e
commit
f10393989b
|
@ -206,10 +206,10 @@ class PrintPreviewServer(Thread):
|
||||||
|
|
||||||
@self.app.route('/realistic', methods=['GET'])
|
@self.app.route('/realistic', methods=['GET'])
|
||||||
def get_realistic():
|
def get_realistic():
|
||||||
return jsonify({
|
realistic = { 'overview': self.realistic_overview_svg }
|
||||||
'overview': self.realistic_overview_svg,
|
for i, svg in enumerate(self.realistic_color_block_svgs):
|
||||||
'color_blocks': self.realistic_color_block_svgs
|
realistic["block%d" % i] = svg
|
||||||
})
|
return jsonify(realistic)
|
||||||
|
|
||||||
def stop(self):
|
def stop(self):
|
||||||
# for whatever reason, shutting down only seems possible in
|
# for whatever reason, shutting down only seems possible in
|
||||||
|
|
|
@ -7,6 +7,9 @@ $.postJSON = function(url, data, success=null) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var realistic_rendering = {};
|
||||||
|
var normal_rendering = {};
|
||||||
|
|
||||||
function ping() {
|
function ping() {
|
||||||
$.get("/ping")
|
$.get("/ping")
|
||||||
.done(function() { setTimeout(ping, 1000) })
|
.done(function() { setTimeout(ping, 1000) })
|
||||||
|
@ -142,6 +145,11 @@ $(function() {
|
||||||
setSVGTransform($(this), $(this).find('svg').css('transform'));
|
setSVGTransform($(this), $(this).find('svg').css('transform'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ignore mouse events on the buttons (Fill, 100%, Apply to All)
|
||||||
|
$('figure.inksimulation div').on('mousedown mouseup', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
/* Apply transforms to All */
|
/* Apply transforms to All */
|
||||||
$('button.svg-apply').click(function() {
|
$('button.svg-apply').click(function() {
|
||||||
var transform = $(this).parent().siblings('svg').css('transform');
|
var transform = $(this).parent().siblings('svg').css('transform');
|
||||||
|
@ -190,6 +198,12 @@ $(function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$.getJSON('/realistic', function(realistic_data) {
|
||||||
|
// realistic_rendering is global
|
||||||
|
realistic_rendering = realistic_data;
|
||||||
|
});
|
||||||
|
|
||||||
// wait until page size is set (if they've specified one) and then scale SVGs to fit
|
// wait until page size is set (if they've specified one) and then scale SVGs to fit
|
||||||
setTimeout(function() { scaleAllSvg() }, 500);
|
setTimeout(function() { scaleAllSvg() }, 500);
|
||||||
});
|
});
|
||||||
|
@ -288,8 +302,8 @@ $(function() {
|
||||||
$('.modal').hide();
|
$('.modal').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
//Checkbox
|
// View selection checkboxes
|
||||||
$(':checkbox').on('change initialize', function() {
|
$(':checkbox.view').on('change initialize', function() {
|
||||||
var field_name = $(this).attr('data-field-name');
|
var field_name = $(this).attr('data-field-name');
|
||||||
|
|
||||||
$('.' + field_name).toggle($(this).prop('checked'));
|
$('.' + field_name).toggle($(this).prop('checked'));
|
||||||
|
@ -299,6 +313,42 @@ $(function() {
|
||||||
$.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
|
$.postJSON('/settings/' + field_name, {value: $(this).prop('checked')});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Realistic rendering checkboxes
|
||||||
|
$(':checkbox.realistic').on('change', function(e) {
|
||||||
|
console.log("realistic rendering checkbox");
|
||||||
|
|
||||||
|
var item = $(this).data('field-name');
|
||||||
|
var figure = $(this).closest('figure');
|
||||||
|
var svg = figure.find('svg');
|
||||||
|
var transform = svg.css('transform');
|
||||||
|
var checked = $(this).prop('checked');
|
||||||
|
|
||||||
|
console.log("" + item + " " + transform);
|
||||||
|
|
||||||
|
// do this later to allow this event handler to return now,
|
||||||
|
// which will cause the checkbox to be checked or unchecked
|
||||||
|
// immediately even if SVG rendering takes awhile
|
||||||
|
setTimeout(function() {
|
||||||
|
if (checked) {
|
||||||
|
if (!(item in normal_rendering)) {
|
||||||
|
normal_rendering[item] = svg[0].outerHTML;
|
||||||
|
}
|
||||||
|
svg[0].outerHTML = realistic_rendering[item];
|
||||||
|
} else {
|
||||||
|
svg[0].outerHTML = normal_rendering[item];
|
||||||
|
}
|
||||||
|
// can't use the svg variable here because setting outerHTML created a new tag
|
||||||
|
figure.find('svg').css({transform: transform});
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
e.stopPropagation();
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
$('button.svg-realistic').click(function(e){
|
||||||
|
$(this).find('input').click();
|
||||||
|
});
|
||||||
|
|
||||||
// Logo
|
// Logo
|
||||||
$('#logo-picker').change(function(e) {
|
$('#logo-picker').change(function(e) {
|
||||||
var file = e.originalEvent.currentTarget.files[0];
|
var file = e.originalEvent.currentTarget.files[0];
|
||||||
|
|
|
@ -473,6 +473,28 @@ body {
|
||||||
border: none;
|
border: none;
|
||||||
background: grey;
|
background: grey;
|
||||||
color: white;
|
color: white;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: "Barlow", sans-serif;
|
||||||
|
padding-left: 3px;
|
||||||
|
padding-right: 3px;
|
||||||
|
margin: 0px 1px 0px 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.realistic {
|
||||||
|
position: absolute;
|
||||||
|
transform: scale(0.7);
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.realistic {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* prevents Chrome from sending a double event for the checkbox
|
||||||
|
and the containing <button> */
|
||||||
|
.realistic {
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Color Swatches */
|
/* Color Swatches */
|
||||||
|
|
|
@ -32,6 +32,10 @@
|
||||||
<button class="svg-fit">{{ _('Fit') }}</button>
|
<button class="svg-fit">{{ _('Fit') }}</button>
|
||||||
<button class="svg-full">100%</button>
|
<button class="svg-full">100%</button>
|
||||||
<button class="svg-apply">{{ _('Apply to all') }}</button>
|
<button class="svg-apply">{{ _('Apply to all') }}</button>
|
||||||
|
<button class="svg-realistic">
|
||||||
|
<input type="checkbox" id="realistic-operator-overview" data-field-name="overview" class="realistic" />
|
||||||
|
<label for="realistic-operator-overview" class="realistic">Realistic</label>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -22,9 +22,12 @@
|
||||||
<button class="svg-fit">Fit</button>
|
<button class="svg-fit">Fit</button>
|
||||||
<button class="svg-full">100%</button>
|
<button class="svg-full">100%</button>
|
||||||
<button class="svg-apply">Apply to all</button>
|
<button class="svg-apply">Apply to all</button>
|
||||||
|
<button class="svg-realistic">
|
||||||
|
<input type="checkbox" id="realistic-color-block-{{ loop.index0 }}" data-field-name="block{{ loop.index0 }}" class="realistic" />
|
||||||
|
<label for="realistic-color-block-{{ loop.index0 }}" class="realistic">Realistic</label>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<div class="color-palette detailed">
|
<div class="color-palette detailed">
|
||||||
{% include 'color_swatch.html' %}
|
{% include 'color_swatch.html' %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -32,14 +32,18 @@
|
||||||
<button class="svg-fit">Fit</button>
|
<button class="svg-fit">Fit</button>
|
||||||
<button class="svg-full">100%</button>
|
<button class="svg-full">100%</button>
|
||||||
<button class="svg-apply">Apply to all</button>
|
<button class="svg-apply">Apply to all</button>
|
||||||
|
<button class="svg-realistic">
|
||||||
|
<input type="checkbox" id="realistic-client-overview" data-field-name="overview" class="realistic" />
|
||||||
|
<label for="realistic-client-overview" class="realistic">Realistic</label>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<div class="color-palette">
|
<div class="color-palette">
|
||||||
{% for color_block in color_blocks %}
|
{% for color_block in color_blocks %}
|
||||||
{% include 'color_swatch.html' %}
|
{% include 'color_swatch.html' %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="signature">{{ _('Client Signature') }}</div>
|
<div class="signature">{{ _('Client Signature') }}</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -26,10 +26,10 @@
|
||||||
<div>
|
<div>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>{{ _('Print Layouts') }}</legend>
|
<legend>{{ _('Print Layouts') }}</legend>
|
||||||
<p><input type="checkbox" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p>
|
<p><input type="checkbox" class="view" id="client-overview" data-field-name="client-overview" /><label for="client-overview">Client Overview</label></p>
|
||||||
<p><input type="checkbox" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p>
|
<p><input type="checkbox" class="view" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">Client Detailed View</label></p>
|
||||||
<p><input type="checkbox" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p>
|
<p><input type="checkbox" class="view" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">Operator Overview</label></p>
|
||||||
<p><input type="checkbox" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">Operator Detailed View</label></p>
|
<p><input type="checkbox" class="view" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">Operator Detailed View</label></p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<button id="save-settings" title="{{ _("Includes these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
|
<button id="save-settings" title="{{ _("Includes these Page Setup settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
Ładowanie…
Reference in New Issue