digitickets.star-web-print
Version:
Javascript library for printing to Star Micronics printers supporting the WebPRNT interface.
519 lines (449 loc) • 19.3 kB
HTML
<!--
//
// Star webPRNT Sample(Canvas Barcode)
//
// Version 1.2.0
//
// Copyright (C) 2012-2015 STAR MICRONICS CO., LTD. All Rights Reserved.
//
-->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Expires" content="86400">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Star webPRNT Sample(Canvas Barcode)</title>
<link href="css/import.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" media="screen">
<link href="css/style_canvasbarcode.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='js/StarWebPrintBuilder.js'></script>
<script type='text/javascript' src='js/StarWebPrintTrader.js'></script>
<script type='text/javascript' src='js/StarBarcodeEncoder.js'></script>
<script type='text/javascript'>
<!--
function encodeEscapeSequence(data) {
var regexp = /\\[tnr\\]/g;
if (regexp.test(data)) {
data = data.replace(regexp, function (match) {
switch (match) {
case '\\t' : return '\\x09';
case '\\n' : return '\\x0a';
case '\\r' : return '\\x0d';
}
return '\\x5c';
});
}
var regexp = /\\[Xx][0-9A-Fa-f]{2}/g;
if (regexp.test(data)) {
data = data.replace(regexp, function (match) {
return String.fromCharCode(parseInt(match.slice(2), 16));
});
}
return data;
}
function onChangeSymbology() {
switch (document.getElementById('symbology').value) {
default : // 'UPC-E'
// case 'UPC-A' :
// case 'JAN/EAN8' :
// case 'JAN/EAN13' :
// case 'Code128' :
// case 'Code93' :
document.getElementById('modulebox0').style.display="inline";
document.getElementById('modulebox1').style.display="none";
document.getElementById('modulebox2').style.display="none";
break;
case 'Code39' :
case 'NW-7' :
document.getElementById('modulebox0').style.display="none";
document.getElementById('modulebox1').style.display="inline";
document.getElementById('modulebox2').style.display="none";
break;
case 'ITF' :
document.getElementById('modulebox0').style.display="none";
document.getElementById('modulebox1').style.display="none";
document.getElementById('modulebox2').style.display="inline";
break;
}
}
function onExampleData() {
switch (document.getElementById('symbology').value) {
default : document.getElementById('data').value = '01234500006'; break; // 'UPC-E'
case 'UPC-A' : document.getElementById('data').value = '01234567890'; break;
case 'JAN/EAN8' : document.getElementById('data').value = '0123456'; break;
case 'JAN/EAN13' : document.getElementById('data').value = '012345678901'; break;
case 'Code39' : document.getElementById('data').value = '0123456789'; break;
case 'ITF' : document.getElementById('data').value = '0123456789'; break;
case 'Code128' : document.getElementById('data').value = '{B0123456789'; break;
case 'Code93' : document.getElementById('data').value = '0123456789'; break;
case 'NW-7' : document.getElementById('data').value = 'A0123456789B'; break;
}
}
function onDrawBarcode() {
var canvas = document.getElementById('canvasPaper');
if (canvas.getContext) {
var context = canvas.getContext('2d');
try {
var x = parseInt(document.getElementById('positionX').value);
var y = parseInt(document.getElementById('positionY').value);
var moduleSize = 0;
var narrowModuleSize = 0;
var wideModuleSize = 0;
switch (document.getElementById('symbology').value) {
default : // 'UPC-E'
// case 'UPC-A' :
// case 'JAN/EAN8' :
// case 'JAN/EAN13' :
// case 'Code128' :
// case 'Code93' :
var module = document.getElementById('module0').value;
moduleSize = parseInt(module);
break;
case 'Code39' :
case 'NW-7' :
var module = document.getElementById('module1').value;
narrowModuleSize = parseInt(module.split(':')[0]);
wideModuleSize = parseInt(module.split(':')[1]);
break;
case 'ITF' :
var module = document.getElementById('module2').value;
narrowModuleSize = parseInt(module.split(':')[0]);
wideModuleSize = parseInt(module.split(':')[1]);
break;
}
var height = parseInt(document.getElementById('height').value);
var encoder = new StarBarcodeEncoder();
var lineImage = '';
var data = encodeEscapeSequence(document.getElementById('data').value);
switch (document.getElementById('symbology').value) {
default : lineImage = encoder.createUPCE ({data:data}); break; // 'UPC-E'
case 'UPC-A' : lineImage = encoder.createUPCA ({data:data}); break;
case 'JAN/EAN8' : lineImage = encoder.createJAN8 ({data:data}); break;
case 'JAN/EAN13' : lineImage = encoder.createJAN13 ({data:data}); break;
case 'Code39' : lineImage = encoder.createCode39 ({data:data}); break;
case 'ITF' : lineImage = encoder.createITF ({data:data}); break;
case 'Code128' : lineImage = encoder.createCode128({data:data}); break;
case 'Code93' : lineImage = encoder.createCode93 ({data:data}); break;
case 'NW-7' : lineImage = encoder.createNW7 ({data:data}); break;
}
var pos = x;
for (var i = 0; i < lineImage.length; i++) {
if (lineImage.charAt(i).match(/[1WN]/g)) {
context.fillStyle = '#000000';
}
switch (lineImage.charAt(i)) {
case '1' :
context.fillRect(pos, y, moduleSize, height);
// break; // through!!!
case '0' :
pos += moduleSize;
break;
case 'N' :
context.fillRect(pos, y, narrowModuleSize, height);
// break; // through!!!
case 'n' :
pos += narrowModuleSize;
break;
case 'W' :
context.fillRect(pos, y, wideModuleSize, height);
// break; // through!!!
case 'w' :
pos += wideModuleSize;
break;
}
}
document.getElementById('positionY').value = y + height + 16;
// document.getElementById('positionY').value = y + height;
}
catch (e) {
alert(e.message);
}
}
}
function onResizeCanvas() {
var canvas = document.getElementById('canvasPaper');
if (canvas.getContext) {
var context = canvas.getContext('2d');
switch (document.getElementById('paperWidth').value) {
case 'inch2' :
canvas.width = 384;
canvas.height = 213;
break;
case 'inch3DotImpact' :
canvas.width = 576;
canvas.height = 320;
break;
default :
canvas.width = 576;
canvas.height = 320;
break;
case 'inch4' :
canvas.width = 832;
canvas.height = 476;
break;
}
document.getElementById('canvasPaper').style.width="700px";
onClearCanvas();
}
}
function onClearCanvas() {
var canvas = document.getElementById('canvasPaper');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('positionX').value = 0;
document.getElementById('positionY').value = 0;
}
}
function onSendMessage() {
showNowPrinting();
var url = document.getElementById('url').value;
var papertype = document.getElementById('papertype').value;
var trader = new StarWebPrintTrader({url:url, papertype:papertype});
trader.onReceive = function (response) {
hideNowPrinting();
var msg = '- onReceive -\n\n';
msg += 'TraderSuccess : [ ' + response.traderSuccess + ' ]\n';
// msg += 'TraderCode : [ ' + response.traderCode + ' ]\n';
msg += 'TraderStatus : [ ' + response.traderStatus + ',\n';
if (trader.isCoverOpen ({traderStatus:response.traderStatus})) {msg += '\tCoverOpen,\n';}
if (trader.isOffLine ({traderStatus:response.traderStatus})) {msg += '\tOffLine,\n';}
if (trader.isCompulsionSwitchClose({traderStatus:response.traderStatus})) {msg += '\tCompulsionSwitchClose,\n';}
if (trader.isEtbCommandExecute ({traderStatus:response.traderStatus})) {msg += '\tEtbCommandExecute,\n';}
if (trader.isHighTemperatureStop ({traderStatus:response.traderStatus})) {msg += '\tHighTemperatureStop,\n';}
if (trader.isNonRecoverableError ({traderStatus:response.traderStatus})) {msg += '\tNonRecoverableError,\n';}
if (trader.isAutoCutterError ({traderStatus:response.traderStatus})) {msg += '\tAutoCutterError,\n';}
if (trader.isBlackMarkError ({traderStatus:response.traderStatus})) {msg += '\tBlackMarkError,\n';}
if (trader.isPaperEnd ({traderStatus:response.traderStatus})) {msg += '\tPaperEnd,\n';}
if (trader.isPaperNearEnd ({traderStatus:response.traderStatus})) {msg += '\tPaperNearEnd,\n';}
msg += '\tEtbCounter = ' + trader.extractionEtbCounter({traderStatus:response.traderStatus}).toString() + ' ]\n';
// msg += 'Status : [ ' + response.status + ' ]\n';
//
// msg += 'ResponseText : [ ' + response.responseText + ' ]\n';
alert(msg);
}
trader.onError = function (response) {
var msg = '- onError -\n\n';
msg += '\tStatus:' + response.status + '\n';
msg += '\tResponseText:' + response.responseText + '\n\n';
msg += 'Do you want to retry?\n';
var answer = confirm(msg);
if (answer) {
onSendMessage();
}
else {
hideNowPrinting();
}
}
try {
var canvas = document.getElementById('canvasPaper');
if (canvas.getContext) {
var context = canvas.getContext('2d');
var builder = new StarWebPrintBuilder();
var request = '';
request += builder.createInitializationElement();
request += builder.createBitImageElement({context:context, x:0, y:0, width:canvas.width, height:canvas.height});
request += builder.createCutPaperElement({feed:true});
trader.sendMessage({request:request});
}
}
catch (e) {
hideNowPrinting();
alert(e.message);
}
}
function nowLoading(){
document.getElementById('form').style.display="block";
document.getElementById('overlay').style.display="none";
document.getElementById('nowLoadingWrapper').style.display="none";
}
function showNowPrinting(){
document.getElementById('overlay').style.display="block";
document.getElementById('nowPrintingWrapper').style.display="table";
}
function hideNowPrinting(){
document.getElementById('overlay').style.opacity= 0.0;
document.getElementById('overlay').style.transition= "all 0.3s";
intimer = setTimeout(function (){
document.getElementById('overlay').style.display="none";
document.getElementById('overlay').style.opacity= 1;
clearTimeout(intimer);
}, 300);
document.getElementById('nowPrintingWrapper').style.display="none";
}
window.onload = function() {
nowLoading();
onResizeCanvas();
}
// -->
</script>
<noscript>
Your browser does not support JavaScript!
</noscript>
</head>
<body>
<div id="overlay">
<div id="nowPrintingWrapper">
<section id="nowPrinting">
<h1>Now Printing</h1>
<p><img src="images/icon_loading.gif" /></p>
</section>
</div>
<div id="nowLoadingWrapper">
<section id="nowLoading">
<h1>Now Loading</h1>
<p><img src="images/icon_loading.gif" /></p>
</section>
</div>
</div>
<header id="global-header">
<h1><a href="A001.html"><img src="images/logo_01.png" alt="HOME" width="108" height="61"></a></h1>
<div id="sub-logo"><a href="http://www.star-m.jp/" target="_blank"><img src="images/logo_02.png" alt="" width="120" height="13"></a></div>
</header>
<section class="btmMg20">
<h2 class="h2-tit-01 btmMg20">Canvas : Barcode</h2>
</section>
<form onsubmit='return false;' id="form">
<div class="container">
<div class="wrapper">
<div id="canvasBlock">
<div id='canvasFrame'>
<canvas id='canvasPaper' width='700' height='388'>
Your browser does not support Canvas!
</canvas>
</div>
</div>
</div>
<div id="optionBlock">
<dl>
<dt>Symbology</dt>
<dd>:
<select id='symbology' onchange='onChangeSymbology()'>
<option>UPC-E</option>
<option>UPC-A</option>
<option>JAN/EAN8</option>
<option selected='selected'>JAN/EAN13</option>
<option>Code39</option>
<option>ITF</option>
<option>Code128</option>
<option>Code93</option>
<option>NW-7</option>
</select>
</dd>
</dl>
<dl>
<dt>Module</dt>
<dd>:
<span id="modulebox0">
<select id='module0'>
<option selected='selected'>2</option>
<option>3</option>
<option>4</option>
</select> dots
</span>
<span id="modulebox1" style="display:none;"> <select id='module1'>
<option selected='selected'>2:6</option>
<option>3:9</option>
<option>4:12</option>
<option>2:5</option>
<option>3:8</option>
<option>4:10</option>
<option>2:4</option>
<option>3:6</option>
<option>4:8</option>
</select> dots
</span>
<span id="modulebox2" style="display:none;">
<select id='module2'>
<option selected='selected'>2:5</option>
<option>4:10</option>
<option>6:15</option>
<option>2:4</option>
<option>4:8</option>
<option>6:12</option>
<option>2:6</option>
<option>3:9</option>
<option>4:12</option>
</select> dots
</span>
</dd>
</dl>
<dl>
<dt>Height</dt>
<dd>:
<select id='height'>
<option>20</option>
<option selected='selected'>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
<option>120</option>
</select> dots
</dd>
</dl>
<dl>
<dt>Data</dt>
<dd>:
<input id='data' type='text' size='30' value='012345678901' />
<input type='button' value='Example' onclick='onExampleData()' />
<div class="note">Hexadecimal:'\x00'-'\xff', HorizontalTab:'\t', LineFeed:'\n', CarriageReturn:'\r', BackSlash:'\\'</div>
</dd>
</dl>
<dl>
<dt>Position</dt>
<dd>:
X=
<input id='positionX' type='text' size='5' value='0' />
Y=
<input id='positionY' type='text' size='5' value='0' />
</dd>
</dl>
<dl>
<dt>Paper Width</dt>
<dd>:
<select id='paperWidth' onchange='onResizeCanvas()'>
<option value='inch2' selected='selected'>2 Inch</option>
<option value='inch3'>3 Inch</option>
<option value='inch4'>4 Inch</option>
</select>
</dd>
</dl>
<div id="drawBtnBlock">
<input id="drawBtn" type='button' value='Draw' onclick='onDrawBarcode()' />
</div>
<div id="clearBtnBlock">
<input id="clearBtn" type="button" value="Clear" onclick="onClearCanvas()" />
</div>
</div>
<hr>
<footer>
<dl>
<dt>URL</dt>
<dd>:
<input id="url" type="text" value="http://localhost:8001/StarWebPRNT/SendMessage" /></dd>
</dl>
<d1>
<dt>Paper Type</dt>
<dd>:
<select id='papertype'>
<option value='' selected='selected'>-</option>
<option value='normal'>Normal</option>
<option value='black_mark'>Black Mark</option>
<option value='black_mark_and_detect_at_power_on'>Black Mark and Detect at Power On</option>
</select>
</dd>
</dl>
<input id="sendBtn" type="button" value="Send" onclick="onSendMessage()" />
</footer>
</div>
</form>
<div class="to_top">
<a href="#global-header">Go to top</a>
</div>
<footer id="global-footer" class="clearfix">
<a href="https://www.star-m.jp/starwebprnt-oml.html" target="_blank"><img src="images/footer-logo.png" width="123" alt="" id="footer-logo"></a>
<img src="images/footer-image.png"height="54" alt=""/>
</footer>
</body>
</html>