mirror of
https://github.com/pklaus/brother_ql_web.git
synced 2024-05-25 11:56:53 +03:00
216 lines
10 KiB
Django/Jinja
216 lines
10 KiB
Django/Jinja
{% extends "base.jinja2" %}
|
|
|
|
{% block page_title %}{{ title }}{% endblock %}
|
|
|
|
{% block jumbotron %}
|
|
<h1>{{ website['PAGE_TITLE'] }}</h1>
|
|
<p>{{ website['PAGE_HEADLINE'] }}</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 label['DEFAULT_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="{{ label['DEFAULT_FONT_SIZE'] }}" 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>
|
|
|
|
<div {% if printers|length == 1 %} hidden {% endif %}>
|
|
<label for="printer">Printer:</label>
|
|
<select class="form-control" id="printer">
|
|
<option value="" disabled {% if printers|length > 1 %} selected {% endif %} > -- select a printer -- </option>
|
|
{% for printer in printers %}
|
|
<option value="{{printer}}" {% if printers|length == 1 %} selected {% endif %} >{{printer}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<br/>
|
|
</div>
|
|
|
|
<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();
|
|
|
|
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(),
|
|
printer_name: $('#printer option:selected').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 %}
|