brother_ql_web/views/labeldesigner.jinja2

204 lines
9.7 KiB
Django/Jinja

{% extends "base.jinja2" %}
{% block page_title %}{{ title }}{% endblock %}
{% block jumbotron %}
<h1>{{page_headline}}</h1>
<p>Design your label and print it...</p>
<!--<p><a class="btn btn-primary btn-lg" href="#" role="button">History of printed labels</a></p>-->
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-4">
<fieldset class="form-group">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span> Label Size</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="chooser panel-body">
<label for="labelSize" style="display: none">Label Size:</label>
<select class="form-control" id="labelSize" onChange="preview()">
{% for label_size in label_sizes %}<option value="{{label_size[0]}}" {% if default_label_size == label_size[0] %}selected{% endif %}>{{label_size[1]}}</option>{% endfor %}
</select>
<label for="orientation" style="margin-top: 10px; margin-bottom: 0">Label Orientation:</label>
<div class="radio" style="margin-top: 5px;">
<label><input type="radio" onchange="preview()" name="orientation" value="standard" {% if default_orientation == 'standard' %}checked{% endif %}>Standard</label>
</div>
<div class="radio">
<label><input type="radio" onchange="preview()" name="orientation" value="rotated" {% if default_orientation == 'rotated' %}checked{% endif %}>Rotated</label>
</div>
</div> <!-- class="chooser panel-body" -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
Font Settings
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="chooser panel-body">
<label for="fontFamily">Font Family:</label>
<select class="form-control" id="fontFamily" onChange="preview()">
{% for font_family_name in font_family_names %}
{% for font_style in fonts[font_family_name].keys() %}
<option>{{font_family_name}} ({{ font_style }})</option>
{% endfor %}
{% endfor %}
</select>
<label for="fontSize" >Font Size:</label>
<input id="fontSize" class="form-control" type="number" min="1" value="70" onChange="preview()" required>
<label for="fontAlign" class="control-label input-group">Font Alignment:</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="fontAlign" onchange="preview()" value="left" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</label>
<label class="btn btn-default active">
<input type="radio" name="fontAlign" onchange="preview()" value="center" aria-label="Center Align" checked=""><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="fontAlign" onchange="preview()" value="right" aria-label="Right Align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</label>
</div>
</div> <!-- class="chooser panel-body" -->
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
Detailed Settings
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="chooser panel-body">
<label for="marginTop">Margin Top:</label>
<div class="input-group marginsTopBottom">
<input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
<label for="marginBottom">Margin Bottom:</label>
<div class="input-group marginsTopBottom">
<input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
<label for="marginLeft">Margin Left:</label>
<div class="input-group marginsLeftRight">
<input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
<label for="marginRight">Margin Right:</label>
<div class="input-group marginsLeftRight">
<input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
</div> <!-- class="chooser panel-body" -->
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset class="form-group">
<label for="labelText">Label Text:</label>
<textarea rows="7" id="labelText" class="form-control" onChange="preview()" onInput="preview()"></textarea>
</fieldset>
</div>
<div class="col-md-4">
<fieldset class="form-group">
<label for="previewImg">Label Preview:</label><br />
<img id="previewImg" style="border: 1px solid #444; max-height: 350px; width: auto; max-width: 100%; margin-bottom: 10px;"/>
<p>Printed size w/o margins: <span id="labelWidth">?</span> cm x <span id="labelHeight">?</span> cm</p>
<button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
<span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
</button>
</fieldset>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-console" aria-hidden="true" style="margin-right: 0.3em"></span> Status</h3>
</div>
<div id="statusPanel" class="panel-body">
- undefined -
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
var text = $('#labelText');
function formData() {
//var text = $('#labelText').val().replace(/\n/g, "%0A");
var text = $('#labelText').val();
if (text == '') text = ' ';
return {
text: text,
font_family: $('#fontFamily option:selected').text(),
font_size: $('#fontSize').val(),
label_size: $('#labelSize option:selected').val(),
align: $('input[name=fontAlign]:checked').val(),
orientation: $('input[name=orientation]:checked').val(),
margin_top: $('#marginTop').val(),
margin_bottom: $('#marginBottom').val(),
margin_left: $('#marginLeft').val(),
margin_right: $('#marginRight').val()
}
}
function preview() {
if ($('input[name=orientation]:checked').val() == 'standard') {
$('.marginsTopBottom').prop('disabled', false).removeAttr('title');
$('.marginsLeftRight').prop('disabled', true).prop('title', 'Only relevant if rotated orientation is selected.');
} else {
$('.marginsTopBottom').prop('disabled', true).prop('title', 'Only relevant if standard orientation is selected.');
$('.marginsLeftRight').prop('disabled', false).removeAttr('title');
}
$.ajax({
type: 'POST',
url: '/api/preview/text?return_format=base64',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: formData(),
success: function( data ) {
$('#previewImg').attr('src', 'data:image/png;base64,' + data);
var img = $('#previewImg')[0];
img.onload = function() {
$('#labelWidth').html( (img.naturalWidth /300*2.54).toFixed(1));
$('#labelHeight').html((img.naturalHeight/300*2.54).toFixed(1));
};
}
});
}
function setStatus(data) {
if (data['success'])
$('#statusPanel').html('<div id="statusBox" class="alert alert-success" role="alert"><i class="glyphicon glyphicon-check"></i><span>Printing was successful.</span></div>');
else
$('#statusPanel').html('<div id="statusBox" class="alert alert-warning" role="alert"><i class="glyphicon glyphicon-alert"></i><span>Printing was unsuccessful:<br />'+data['message']+'</span></div>');
$('#printButton').prop('disabled', false);
}
function print() {
$('#printButton').prop('disabled', true);
$('#statusPanel').html('<div id="statusBox" class="alert alert-info" role="alert"><i class="glyphicon glyphicon-hourglass"></i><span>Processing print request...</span></div>');
$.ajax({
type: 'POST',
dataType: 'json',
data: formData(),
url: '/api/print/text',
success: setStatus,
error: setStatus
});
}
preview()
{% endblock %}