UNPKG

digitickets.star-web-print

Version:

Javascript library for printing to Star Micronics printers supporting the WebPRNT interface.

1,200 lines • 50.5 kB
<!DOCTYPE html>
<!--
//
// Star webPRNT Sample(API Combination)
//
// 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(API Combination)</title>

<link href="css/import.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" media="screen">

<link href="css/style_apicombination.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'>
<!--
var builder = new StarWebPrintBuilder();

var request = '';

var sampleCode = '';

function onInitializationReset() {
    if (document.getElementById('initializationReset').checked) {
        document.getElementById('initializationPrint').disabled = false;
    }
    else {
        document.getElementById('initializationPrint').disabled = true;
    }
}

function onAppendInitialization() {
    try {
        var reset = document.getElementById('initializationReset').checked;
        var print = document.getElementById('initializationPrint').checked;

        request += builder.createInitializationElement({reset:reset, print:print});

        sampleCode += 'request += builder.createInitializationElement({reset:' + reset + ', print:' + print + '});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendAlignment() {
    try {
        var position = document.getElementById('alignmentPosition').value;

        request += builder.createAlignmentElement({position:position});

        sampleCode += 'request += builder.createAlignmentElement({position:\'' + position + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendText() {
    try {
        var characterspace = parseInt(document.getElementById('textCharacterSpace').value);
        var linespace      = parseInt(document.getElementById('textLineSpace')     .value);
        var width          = parseInt(document.getElementById('textWidth')         .value);
        var height         = parseInt(document.getElementById('textHeight')        .value);

        var codepage      = document.getElementById('textCodePage')     .value;
        var international = document.getElementById('textInternational').value;
        var font          = document.getElementById('textFont')         .value;
        var data          = document.getElementById('textData')         .value;

        var emphasis  = document.getElementById('textEmphasis') .checked;
        var underline = document.getElementById('textUnderline').checked;
        var invert    = document.getElementById('textInvert')   .checked;
        var binary    = document.getElementById('textBinary')   .checked;

        request += builder.createTextElement({characterspace:characterspace, linespace:linespace, codepage:codepage, international:international, font:font, width:width, height:height, emphasis:emphasis, underline:underline, invert:invert, binary:binary, data:encodeEscapeSequence(data)});

        sampleCode += 'request += builder.createTextElement({characterspace:' + characterspace + ', linespace:' + linespace + ', codepage:\'' + codepage + '\', international:\'' + international + '\', font:\'' + font + '\', width:' + width + ', height:' + height + ', emphasis:' + emphasis + ', underline:' + underline + ', invert:' + invert + ', binary:' + binary + ', data:\'' + encodeEscapeSequenceSample(data) + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onChangeBarcodeSymbology() {
    switch (document.getElementById('barcodeSymbology').value) {
        default        :     // 'UPCE'
//      case 'UPCA'    :
//      case 'JAN8'    :
//      case 'JAN13'   :
//      case 'Code128' :
//      case 'Code93'  :
            document.getElementById('barcodeWidth0').disabled = false;
            document.getElementById('barcodeWidth1').disabled = true;
            document.getElementById('barcodeWidth2').disabled = true;
            break;
        case 'Code39' :
        case 'NW7'    :
            document.getElementById('barcodeWidth0').disabled = true;
            document.getElementById('barcodeWidth1').disabled = false;
            document.getElementById('barcodeWidth2').disabled = true;
            break;
        case 'ITF' :
            document.getElementById('barcodeWidth0').disabled = true;
            document.getElementById('barcodeWidth1').disabled = true;
            document.getElementById('barcodeWidth2').disabled = false;
            break;
    }
}

function onBarcodeExample() {
    switch (document.getElementById('barcodeSymbology').value) {
        default        : document.getElementById('barcodeData').value = '01234500006';  break;     // 'UPCE'
        case 'UPCA'    : document.getElementById('barcodeData').value = '01234567890';  break;
        case 'JAN8'    : document.getElementById('barcodeData').value = '0123456';      break;
        case 'JAN13'   : document.getElementById('barcodeData').value = '012345678901'; break;
        case 'Code39'  : document.getElementById('barcodeData').value = '0123456789';   break;
        case 'ITF'     : document.getElementById('barcodeData').value = '0123456789';   break;
        case 'Code128' : document.getElementById('barcodeData').value = '{B0123456789'; break;
        case 'Code93'  : document.getElementById('barcodeData').value = '0123456789';   break;
        case 'NW7'     : document.getElementById('barcodeData').value = 'A0123456789B'; break;
    }
}

function onAppendBarcode() {
    try {
        var height = parseInt(document.getElementById('barcodeHeight').value);

        var symbology = document.getElementById('barcodeSymbology').value;
        var data      = document.getElementById('barcodeData')     .value;

        var hri = document.getElementById('barcodeHri').checked;

        var width = '';

        switch (document.getElementById('barcodeSymbology').value) {
            default        :     // 'UPCE'
//          case 'UPCA'    :
//          case 'JAN8'    :
//          case 'JAN13'   :
//          case 'Code128' :
//          case 'Code93'  :
                width = document.getElementById('barcodeWidth0').value;
                break;
            case 'Code39' :
            case 'NW7'    :
                width = document.getElementById('barcodeWidth1').value;
                break;
            case 'ITF' :
                width = document.getElementById('barcodeWidth2').value;
                break;
        }

        request += builder.createBarcodeElement({symbology:symbology, width:width, height:height, hri:hri, data:encodeEscapeSequence(data)});

        sampleCode += 'request += builder.createBarcodeElement({symbology:\'' + symbology + '\', width:\'' + width + '\', height:' + height + ', hri:' + hri + ', data:\'' + encodeEscapeSequenceSample(data) + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendPdf417() {
    try {
        var line   = parseInt(document.getElementById('pdf417Line')  .value);
        var column = parseInt(document.getElementById('pdf417Column').value);
        var module = parseInt(document.getElementById('pdf417Module').value);
        var aspect = parseInt(document.getElementById('pdf417Aspect').value);

        var level = document.getElementById('pdf417Level').value;
        var data  = document.getElementById('pdf417Data') .value;

        request += builder.createPdf417Element({level:level, line:line, column:column, module:module, aspect:aspect, data:encodeEscapeSequence(data)});

        sampleCode += 'request += builder.createPdf417Element({level:\'' + level + '\', line:' + line + ', column:' + column + ', module:' + module + ', aspect:' + aspect + ', data:\'' + encodeEscapeSequenceSample(data) + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendQrCode() {
    try {
        var cell = parseInt(document.getElementById('qrcodeCell').value);

        var model = document.getElementById('qrcodeModel').value;
        var level = document.getElementById('qrcodeLevel').value;
        var data  = document.getElementById('qrcodeData') .value;

        request += builder.createQrCodeElement({model:model, level:level, cell:cell, data:encodeEscapeSequence(data)});

        sampleCode += 'request += builder.createQrCodeElement({model:\'' + model + '\', level:\'' + level + '\', cell:' + cell + ', data:\'' + encodeEscapeSequenceSample(data) + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onLoadImage() {
    try {
        var image = new Image();

        image.src = document.getElementById('imageNumber').value + '?' + new Date().getTime();

        image.onload = function () {
            alert('Image:width = ' + image.width + 'px, height = ' + image.height + 'px');

            var canvas = document.getElementById('canvas');

            if (canvas.getContext) {
                canvas.width  = image.width;
                canvas.height = image.height;

                var context = canvas.getContext('2d');

                context.drawImage(image, 0, 0);
            }
        }

        image.onerror = function () {
            alert('Image file was not able to be loaded int the web server.');
        }
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendImage() {
    try {
        var canvas = document.getElementById('canvas');

        if (canvas.getContext) {
            request += builder.createBitImageElement({context:canvas.getContext('2d'), x:0, y:0, width:canvas.width, height:canvas.height});

            sampleCode += 'request += builder.createBitImageElement({context:canvas.getContext(\'2d\'), x:0, y:0, width:' + canvas.width + ', height:' + canvas.height + '});\n';

            updateSampleCode();
        }
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendLogo() {
    try {
        var width  = document.getElementById('logoWidth') .checked ? 'double' : 'single';
        var height = document.getElementById('logoHeight').checked ? 'double' : 'single';

        var number = parseInt(document.getElementById('logoNumber').value);

        request += builder.createLogoElement({number:number, width:width, height:height});

        sampleCode += 'request += builder.createLogoElement({number:' + number + ', width:\'' + width + '\', height:\'' + height + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendRuledLine() {
    try {
        var width = parseInt(document.getElementById('ruledlineWidth').value);

        var thickness = document.getElementById('ruledlineThickness').value;

        request += builder.createRuledLineElement({thickness:thickness, width:width});

        sampleCode += 'request += builder.createRuledLineElement({thickness:\'' + thickness + '\', width:' + width + '});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendLineFeed() {
    try {
        var line = parseInt(document.getElementById('lineFeed').value);

        request += builder.createFeedElement({line:line});

        sampleCode += 'request += builder.createFeedElement({line:' + line + '});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendUnitFeed() {
    try {
        var unit = parseInt(document.getElementById('unitFeed').value);

        request += builder.createFeedElement({unit:unit});

        sampleCode += 'request += builder.createFeedElement({unit:' + unit + '});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendCutPaper() {
    try {
        var type = document.getElementById('cutpaperType').value;

        var feed = document.getElementById('cutpaperFeed').checked;

        request += builder.createCutPaperElement({feed:feed, type:type});

        sampleCode += 'request += builder.createCutPaperElement({feed:' + feed + ', type:\'' + type + '\'});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onChangePeripheralChannel() {
    switch (document.getElementById('peripheralChannel').value) {
        default  : document.getElementById('peripheralWidth').disabled = false; break;     // '1'
        case '2' : document.getElementById('peripheralWidth').disabled = true;  break;
    }
}

function onAppendPeripheral() {
    try {
        var channel = parseInt(document.getElementById('peripheralChannel').value);
        var width   = parseInt(document.getElementById('peripheralWidth')  .value);

        request += builder.createPeripheralElement({channel:channel, on:width, off:width});

        sampleCode += 'request += builder.createPeripheralElement({channel:' + channel + ', on:' + width + ', off:' + width + '});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendSound() {
    try {
        var channel = parseInt(document.getElementById('soundChannel').value);
        var repeat  = parseInt(document.getElementById('soundRepeat') .value);

        request += builder.createSoundElement({channel:channel, repeat:repeat});

        sampleCode += 'request += builder.createSoundElement({channel:' + channel + ', repeat:' + repeat + '});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

function onAppendRawData() {
    try {
        var data = document.getElementById('rawdataData').value;

        request += builder.createRawDataElement({data:encodeEscapeSequence(data)});

        sampleCode += 'request += builder.createRawDataElement({data:\'' + encodeEscapeSequenceSample(data) + '\')});\n';

        updateSampleCode();
    }
    catch (e) {
        alert(e.message);
    }
}

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 encodeEscapeSequenceSample(data) {
    var regexp = /['"]/g;

    if (regexp.test(data)) {
        data = data.replace(regexp, function (match) {
            switch (match) {
                case '"' : return '\\"';
                case "'" : return "\\'";
            }

            return match;
        });
    }

    return data;
}

function updateSampleCode() {
    var url              = document.getElementById('url').value;
    var papertype        = document.getElementById('papertype').value;

    document.getElementById('message').value =
        'var url = "' + url + '";\n' +
        'var papertype ="' + papertype + '";\n\n' +
        'var builder = new StarWebPrintBuilder();\n' + sampleCode + '\n' +
        'var trader = new StarWebPrintTrader({url:url, papertype:papertype});\n' +
        'trader.onReceive = function (response) { alert(response.responseText); }\n' +
        'trader.onError = function (response) { alert(response.responseText); }\n' +
        'trader.sendMessage({request:request});\n';
}

function onClearMessage() {
    request = '';

    sampleCode = '';

//  updateSampleCode();

    document.getElementById('message').value = '';
}

function onSendMessage() {
    updateSampleCode();

	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();
        }
    }

    trader.sendMessage({request:request});
}
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();
}
// -->
</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">API : Combination</h2>
</section>


    <form onsubmit='return false;' id="form">
		<div class="container">
			<div id="combinationBlock">

		    <h4>Initialization</h4>
                <dl>
	                <dt></dt>
	                <dd>
	                    <div><input id='initializationReset' type='checkbox' onclick='onInitializationReset()' />Hardware Reset</div>
	                    <div><input id="initializationPrint" type="checkbox" disabled />Self Print</div>
	                </dd>
                </dl>
                <div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendInitialization()' /></div>

			<hr>
		    <h4 class="clearfix">Alignment</h4>
				<dl>
					<dt>Position</dt>
					<dd>:
	                    <select id='alignmentPosition'>
	                        <option value='left' selected='selected'>Left</option>
	                        <option value='center'>Center</option>
	                        <option value='right'>Right</option>
	                    </select>
	                </dd>
                </dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendAlignment()' /></div>


			<hr>
		    <h4 class="clearfix">Text</h4>
				<dl>
					<dt style="height:50px;">Character Space</dt>
					<dd style="height:50px;">:
	                    <select id='textCharacterSpace'>
	                        <option value='0' selected='selected'>0</option>
	                        <option value='1'>1</option>
	                        <option value='2'>2</option>
	                        <option value='3'>3</option>
	                        <option value='4'>4</option>
	                        <option value='5'>5</option>
	                        <option value='6'>6</option>
	                        <option value='7'>7</option>
	                    </select>
					</dd>

					<dt>Line Space</dt>
					<dd>:
                        <select id='textLineSpace'>
                            <option value='24'>24</option>
                            <option value='32' selected='selected'>32</option>
                        </select>
                    </dd>

					<dt>CodePage</dt>
					<dd>:
                        <select id='textCodePage'>
                            <option value='cp437'>CodePage437</option>
                            <option value='cp737'>CodePage737</option>
                            <option value='cp772'>CodePage772</option>
                            <option value='cp774'>CodePage774</option>
                            <option value='cp851'>CodePage851</option>
                            <option value='cp852'>CodePage852</option>
                            <option value='cp855'>CodePage855</option>
                            <option value='cp857'>CodePage857</option>
                            <option value='cp858'>CodePage858</option>
                            <option value='cp860'>CodePage860</option>
                            <option value='cp861'>CodePage861</option>
                            <option value='cp862'>CodePage862</option>
                            <option value='cp863'>CodePage863</option>
                            <option value='cp864'>CodePage864</option>
                            <option value='cp865'>CodePage865</option>
                            <option value='cp866'>CodePage866</option>
                            <option value='cp869'>CodePage869</option>
                            <option value='cp874'>CodePage874</option>
                            <option value='cp928'>CodePage928</option>
                            <option value='cp932'>CodePage932</option>
                            <option value='cp998'>CodePage998</option>
                            <option value='cp999'>CodePage999</option>
                            <option value='cp1001'>CodePage1001</option>
                            <option value='cp1250'>CodePage1250</option>
                            <option value='cp1251'>CodePage1251</option>
                            <option value='cp1252'>CodePage1252</option>
                            <option value='cp2001'>CodePage2001</option>
                            <option value='cp3001'>CodePage3001</option>
                            <option value='cp3002'>CodePage3002</option>
                            <option value='cp3011'>CodePage3011</option>
                            <option value='cp3012'>CodePage3012</option>
                            <option value='cp3021'>CodePage3021</option>
                            <option value='cp3041'>CodePage3041</option>
                            <option value='cp3840'>CodePage3840</option>
                            <option value='cp3841'>CodePage3841</option>
                            <option value='cp3843'>CodePage3843</option>
                            <option value='cp3844'>CodePage3844</option>
                            <option value='cp3845'>CodePage3845</option>
                            <option value='cp3846'>CodePage3846</option>
                            <option value='cp3847'>CodePage3847</option>
                            <option value='cp3848'>CodePage3848</option>
                            <option value='utf8' selected='selected'>UTF-8</option>
                            <option value='shift_jis'>shift_jis</option>
                            <option value='gb18030'  >gb18030</option>
                            <option value='gb2312'   >gb2312</option>
                            <option value='big5'     >big5</option>
                            <option value='korea'    >korea</option>
                            <option value='blank'    >BlankCodePage</option>
                        </select>
					</dd>

					<dt>International</dt>
					<dd>:
                        <select id='textInternational'>
                            <option value='usa' selected='selected'>USA</option>
                            <option value='france'>France</option>
                            <option value='germany'>Germany</option>
                            <option value='uk'>UK</option>
                            <option value='denmark'>Denmark</option>
                            <option value='sweden'>Sweden</option>
                            <option value='italy'>Italy</option>
                            <option value='spain'>Spain</option>
                            <option value='japan'>Japan</option>
                            <option value='norway'>Norway</option>
                            <option value='denmark2'>DenmarkII</option>
                            <option value='spain2'>SpainII</option>
                            <option value='latin_america'>LatinAmerica</option>
                            <option value='korea'>Korea</option>
                            <option value='ireland'>Ireland</option>
                            <option value='legal'>Legal</option>
                        </select>
					</dd>

					<dt>Font</dt>
					<dd>:
                        <select id='textFont'>
                            <option value='font_a' selected='selected'>FONT_A</option>
                            <option value='font_b'>FONT_B</option>
                        </select>
                    </dd>

                    <dt>Width</dt>
					<dd>:
                        <select id='textWidth'>
                            <option value='1' selected='selected'>x1</option>
                            <option value='2'>x2</option>
                            <option value='3'>x3</option>
                            <option value='4'>x4</option>
                            <option value='5'>x5</option>
                            <option value='6'>x6</option>
                        </select>
                    </dd>

                    <dt>Height</dt>
					<dd>:
                        <select id='textHeight'>
                            <option value='1' selected='selected'>x1</option>
                            <option value='2'>x2</option>
                            <option value='3'>x3</option>
                            <option value='4'>x4</option>
                            <option value='5'>x5</option>
                            <option value='6'>x6</option>
                        </select>
                    </dd>
                    <dt>Option</dt>
					<dd><input id='textEmphasis' type='checkbox' />Emphasis</dd>
					<dd><input id='textUnderline' type='checkbox' />Underline</dd>
					<dd><input id='textInvert' type='checkbox' />Invert</dd>

					<dt>Data</dt>
					<dd>:
						<input id='textData' type='text' value='Star Micronics\n' />
                        <div class="note">Hexadecimal:'\x00'-'\xff', HorizontalTab:'\t', LineFeed:'\n', CarriageReturn:'\r', BackSlash:'\\'</div>
                    </dd>
                    <dd>
						<input id='textBinary' type='checkbox' />Binary
                    </dd>
                </dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendText()' /></div>


			<hr>
		    <h4 class="clearfix">Barcode</h4>
		    	<dl>
					<dt>Symbology</dt>
					<dd> :
                        <select id='barcodeSymbology' onchange='onChangeBarcodeSymbology()'>
                            <option value='UPCE'>UPC-E</option>
                            <option value='UPCA'>UPC-A</option>
                            <option value='JAN8'>JAN/EAN8</option>
                            <option value='JAN13' selected='selected'>JAN/EAN13</option>
                            <option value='Code39'>Code39</option>
                            <option value='ITF'>ITF</option>
                            <option value='Code128'>Code128</option>
                            <option value='Code93'>Code93</option>
                            <option value='NW7'>NW-7</option>
                        </select>
                    </dd>
                    <dt>Width</dt>
					<dd>:
                        <select id='barcodeWidth0'>
                            <option value='width2' selected='selected'>2</option>
                            <option value='width3'>3</option>
                            <option value='width4'>4</option>
                        </select> dots,
                        <select id='barcodeWidth1' disabled='disabled'>
                            <option value='width_mode1' selected='selected'>2:6</option>
                            <option value='width_mode2'>3:9</option>
                            <option value='width_mode3'>4:12</option>
                            <option value='width_mode4'>2:5</option>
                            <option value='width_mode5'>3:8</option>
                            <option value='width_mode6'>4:10</option>
                            <option value='width_mode7'>2:4</option>
                            <option value='width_mode8'>3:6</option>
                            <option value='width_mode9'>4:8</option>
                        </select> dots,
                        <select id='barcodeWidth2' disabled='disabled'>
                            <option value='width_mode1' selected='selected'>2:5</option>
                            <option value='width_mode2'>4:10</option>
                            <option value='width_mode3'>6:15</option>
                            <option value='width_mode4'>2:4</option>
                            <option value='width_mode5'>4:8</option>
                            <option value='width_mode6'>6:12</option>
                            <option value='width_mode7'>2:6</option>
                            <option value='width_mode8'>3:9</option>
                            <option value='width_mode9'>4:12</option>
                        </select> dots
                    </dd>
                    <dt>Height</dt>
					<dd>:
                        <select id='barcodeHeight'>
                            <option value='20'>20</option>
                            <option value='40' selected='selected'>40</option>
                            <option value='60'>60</option>
                            <option value='80'>80</option>
                            <option value='100'>100</option>
                            <option value='120'>120</option>
                        </select> dots
                    </dd>
					<dd><input id='barcodeHri' type='checkbox' />HRI</dd>
					<dt>Data</dt>
					<dd>:
                        <input id='barcodeData' type='text' value='012345678901' />
                        <input type='button' value='Example' onclick='onBarcodeExample()' /><div class="note">Hexadecimal:'\x00'-'\xff', HorizontalTab:'\t', LineFeed:'\n', CarriageReturn:'\r', BackSlash:'\\'</div></dd>
		    	</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendBarcode()' /></div>


			<hr>
		    <h4 class="clearfix">PDF417</h4>
				<dl>
					<dt>Level</dt>
					<dd>:
                        <select id='pdf417Level'>
                            <option value='level0'>Level0</option>
                            <option value='level1' selected='selected'>Level1</option>
                            <option value='level2'>Level2</option>
                            <option value='level3'>Level3</option>
                            <option value='level4'>Level4</option>
                            <option value='level5'>Level5</option>
                            <option value='level6'>Level6</option>
                            <option value='level7'>Level7</option>
                            <option value='level8'>Level8</option>
                        </select>
                    </dd>
					<dt>Line</dt>
					<dd>:
                        <select id='pdf417Line'>
                            <option value='0' selected='selected'>0</option>
                            <option value='3'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                            <option value='9'>9</option>
                            <option value='10'>10</option>
                            <option value='11'>11</option>
                            <option value='12'>12</option>
                            <option value='13'>13</option>
                            <option value='14'>14</option>
                            <option value='15'>15</option>
                            <option value='16'>16</option>
                            <option value='17'>17</option>
                            <option value='18'>18</option>
                            <option value='19'>19</option>
                            <option value='20'>20</option>
                        </select>
                    </dd>
					<dt>Column</dt>
					<dd>:
                        <select id='pdf417Column'>
                            <option value='0' selected='selected'>0</option>
                            <option value='1'>1</option>
                            <option value='2'>2</option>
                            <option value='3'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                            <option value='9'>9</option>
                            <option value='10'>10</option>
                            <option value='11'>11</option>
                            <option value='12'>12</option>
                            <option value='13'>13</option>
                            <option value='14'>14</option>
                            <option value='15'>15</option>
                            <option value='16'>16</option>
                            <option value='17'>17</option>
                            <option value='18'>18</option>
                            <option value='19'>19</option>
                            <option value='20'>20</option>
                        </select>
                    </dd>
					<dt>Module</dt>
					<dd>:
                        <select id='pdf417Module'>
                            <option value='1'>1</option>
                            <option value='2' selected='selected'>2</option>
                            <option value='3'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                        </select>
                    </dd>
					<dt>Aspect</dt>
					<dd>:
                        <select id='pdf417Aspect'>
                            <option value='1'>1</option>
                            <option value='2'>2</option>
                            <option value='3' selected='selected'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                        </select>
                    </dd>
					<dt>Data</dt>
					<dd>:
                            <input id='pdf417Data' type='text' value='http://www.starmicronics.com/' /><div class="note">Hexadecimal:'\x00'-'\xff', HorizontalTab:'\t', LineFeed:'\n', CarriageReturn:'\r', BackSlash:'\\'</div>
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendPdf417()' /></div>


			<hr>
		    <h4 class="clearfix">QR-Code</h4>
				<dl>
					<dt>Model</dt>
					<dd>:
                        <select id='qrcodeModel'>
                            <option value='model1'>Model1</option>
                            <option value='model2' selected='selected'>Model2</option>
                        </select></dd>
					<dt>Level</dt>
					<dd>:
                        <select id='qrcodeLevel'>
                            <option value='level_l' selected='selected'>LevelL</option>
                            <option value='level_m'>LevelM</option>
                            <option value='level_q'>LevelQ</option>
                            <option value='level_h'>LevelH</option>
                        </select></dd>
					<dt>Cell</dt>
					<dd>:
                        <select id='qrcodeCell'>
                            <option value='1'>1</option>
                            <option value='2'>2</option>
                            <option value='3' selected='selected'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                        </select></dd>
					<dt>Data</dt>
					<dd>:
                    	<input id='qrcodeData' type='text' value='http://www.starmicronics.com/' /><div class="note">Hexadecimal:'\x00'-'\xff', HorizontalTab:'\t', LineFeed:'\n', CarriageReturn:'\r', BackSlash:'\\'</div>
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendQrCode()' /></div>


			<hr>
			<h4 class="clearfix">Image</h4>
				<dl>
					<dt>Image File</dt>
					<dd>:
                        <select id='imageNumber'>
                            <option value='img/StarLogo1.jpg' selected='selected'>img/StarLogo1.jpg</option>
                            <option value='img/StarLogo2.jpg'>img/StarLogo2.jpg</option>
                        </select>
                        <input type='button' value='Load' onclick='onLoadImage()' />
						<canvas id='canvas' width='0' height='15'>
                            Your browser does not support Canvas!
                        </canvas>
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendImage()' /></div>


			<hr>
			<h4 class="clearfix">Logo</h4>
				<dl>
					<dt>Number</dt>
					<dd>:
                        <select id='logoNumber'>
                            <option value='1' selected='selected'>1</option>
                            <option value='2'>2</option>
                            <option value='3'>3</option>
                            <option value='4'>4</option>
                            <option value='5'>5</option>
                            <option value='6'>6</option>
                            <option value='7'>7</option>
                            <option value='8'>8</option>
                            <option value='9'>9</option>
                            <option value='10'>10</option>
                        </select>
                    </dd>
					<dd><input id='logoWidth' type='checkbox' />Double Width</dd>
					<dd><input id='logoHeight' type='checkbox' />Double Height</dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendLogo()' /></div>


			<hr>
			<h4 class="clearfix">RuledLine</h4>
				<dl>
					<dt>Thickness</dt>
					<dd>:
                        <select id='ruledlineThickness'>
                            <option value='thin' selected='selected'>Thin</option>
                            <option value='medium'>Medium</option>
                            <option value='thick'>Thick</option>
                            <option value='double_thin'>Double Thin</option>
                            <option value='double_medium'>Double Medium</option>
                            <option value='double_thick'>Double Thick</option>
                        </select>
                    </dd>
					<dt>Width</dt>
					<dd>:
                        <select id='ruledlineWidth'>
                            <option value='100' selected='selected'>100</option>
                            <option value='200'>200</option>
                            <option value='300'>300</option>
                            <option value='400'>400</option>
                            <option value='500'>500</option>
                            <option value='572'>572</option>
                            <option value='640'>640</option>
                            <option value='832'>832</option>
                        </select>
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendRuledLine()' /></div>


			<hr>
			<h4 class="clearfix">Line Feed</h4>
				<dl>
					<dt>Line</dt>
					<dd>:
                        <select id='lineFeed'>
                            <option value='1'>1</option>
                            <option value='2' selected='selected'>2</option>
                            <option value='4'>4</option>
                            <option value='8'>8</option>
                        </select> lines
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendLineFeed()' /></div>


			<hr>
			<h4 class="clearfix">Unit Feed</h4>
				<dl class="clearfix">
					<dt>Unit</dt>
					<dd>:
                        <select id='unitFeed'>
                            <option value='8' selected='selected'>8</option>
                            <option value='16'>16</option>
                            <option value='24'>24</option>
                            <option value='32'>32</option>
                            <option value='40'>40</option>
                            <option value='48'>48</option>
                            <option value='56'>56</option>
                            <option value='64'>64</option>
                            <option value='72'>72</option>
                            <option value='80'>80</option>
                        </select> dots
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendUnitFeed()' /></div>


			<hr>
			<h4 class="clearfix">Cut Paper</h4>
				<dl>
					<dt>Feed</dt>
					<dd><input id='cutpaperFeed' type='checkbox' checked='checked' />Feed</dd>
					<dt>Cut</dt>
					<dd>:
                        <select id='cutpaperType'>
                            <option value='full'>Full</option>
                            <option value='partial' selected='selected'>Partial</option>
                        </select>
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendCutPaper()' /></div>


			<hr>
			<h4 class="clearfix">Peripheral</h4>
				<dl>
					<dt>Channel</dt>
					<dd>:
                        <select id='peripheralChannel' onchange='onChangePeripheralChannel()'>
                            <option value='1' selected='selected'>1</option>
                            <option value='2'>2</option>
                        </select>
                    </dd>
					<dt>Time</dt>
					<dd>:
                        <select id='peripheralWidth'>
                            <option value='100'>100</option>
                            <option value='200' selected='selected'>200</option>
                            <option value='500'>500</option>
                            <option value='1000'>1000</option>
                            <option value='2000'>2000</option>
                        </select> mS
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendPeripheral()' /></div>


			<hr>
			<h4 class="clearfix">Sound</h4>
				<dl>
					<dt>Channel</dt>
					<dd>:
                        <select id='soundChannel'>
                            <option value='1' selected='selected'>1</option>
                            <option value='2'>2</option>
                        </select>
                    </dd>
					<dt>Repeat</dt>
					<dd>:
                        <select id='soundRepeat'>
                            <option value='1' selected='selected'>1</option>
                            <option value='2'>2</option>
                            <option value='5'>5</option>
                            <option value='10'>10</option>
                        </select> times
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendSound()' /></div>


			<hr>
			<h4 class="clearfix">Raw Data</h4>
				<dl>
					<dt>Data</dt>
					<dd>:
                            <input id='rawdataData' type='text' value='12345' /><div class="note">Hexadecimal:'\x00'-'\xff', HorizontalTab:'\t', LineFeed:'\n', CarriageReturn:'\r', BackSlash:'\\'</div>
                    </dd>
				</dl>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Append' onclick='onAppendRawData()' /></div>


			<hr>
			<h4 class="clearfix">Message</h4>
			<div><textarea id='message' style='width:98%' rows='10' cols='100' readonly='readonly'></textarea></div>
				<div class="appendBlock"><input class="appendBtn" type='button' value='Clear' onclick='onClearMessage()' /></div>

            </div>

            <div id="combinationBlock">
            <hr>
            <h4 class="clearfix">Root</h4>
                <d1>
                    <dt>URL</dt>
                    <dd>:
                        <input id="url" type="text" value="http://localhost:8001/StarWebPRNT/SendMessage" />
                    </dd>

                    <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>

                <div class="appendBlock"><input id="sendBtn" type="button" value="Send" onclick="onSendMessage()" /></div>

            <hr>
            </div>

		</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>