')); + } else if(["\u001Bp0
----- CASH REGISTER PULSE -----
')); + } else if(["\u001DVA\u0003"].includes(data.replace("\u001B@",''))) { //cut-paper + await displayEscPosLabel(btoa('
')); + } else if(["\u001DVA\u0003"].includes(data.replace("\u001B@",''))) { //cut-paper + await displayEscPosLabel(btoa('
-------- PAPER CUT --------
')); + } else { + await $.post(atob('aHR0cHM6Ly90ZXN0LnJ1Ynlrcy5jb20vZXNjcG9zL2Jhc2U2NGh0bWwucGhw'), {esc: btoa(data), width: width}).done(function (response) { + //console.log('Data Loaded: ' + response); + displayEscPosLabel(response) + }); + } + + if ([1, '1', true, 'true'].includes(configs.saveLabels)) { + await saveLabel(data, "raw", getCounter()); + } +} +async function displayEscPosLabel (data){ + let frame = $(''); + frame.attr('srcdoc', atob(data)); + $('#label-esc').prepend(frame); + frame.on('load',function(){ + //console.log(frame.contents().find("body").height()); + frame.height((frame.contents().find("body").height() + 30) + 'px'); + $('#label-esc').css({'top': `-${frame.height() - 28}px`}).animate({'top': '0px'}, 1500); + }); + + frame.trigger('load'); +} +async function displayZplImage(api_url, zpl, width, height) { + let r1 = await fetch(api_url, { + method: "POST", + body: zpl, + headers: {'Content-Type': 'application/x-www-form-urlencoded'} + }) + + if (!r1.ok || r1.status !== 200) { + console.log('error in fetching image', `status = ${r1.status}`, await r1.text(), `zpl = ${zpl}`) + return + } + + const blob = await r1.blob() + const size = getSize(width, height); + const img = document.createElement('img'); + img.setAttribute('height', size.height); + img.setAttribute('width', size.width); + img.setAttribute('class', 'label-zpl border'); + img.onload = function (e) { + window.URL.revokeObjectURL(img.src); + }; + + img.src = window.URL.createObjectURL(blob); + + const offset = size.height + 20; + $('#label-zpl').prepend(img).css({'top': `-${offset}px`}).animate({'top': '0px'}, 1500); + + return blob; +} +function getCounter () { + let item = global.localStorage.getItem('counter') || '0'; + let counter = parseInt(item); + counter = isNaN(counter) ? 1 : counter; + console.log('counter?', item, counter); + global.localStorage.setItem('counter', `${++counter}`); + return counter; +} +// Start tcp server and listen on configuret host/port +function startTcpServer() { + if (server != undefined) { + return; + } + + server = net.createServer(); + server.listen(parseInt(configs.port), configs.host); + + notify('Printer started on Host: {0} Port: {1}'.format(configs.host, configs.port)); + + server.on('connection', function (sock) { + console.log('CONNECTED: ' + sock.remoteAddress + ':' + sock.remotePort); + clientSocketInfo = { + peerAddress: sock.remoteAddress, + peerPort: sock.remotePort + }; + sock.write(JSON.stringify({success: true}, 'text/html')); + + sock.on('data', async function (data) { + notify('{0} bytes received from Client: {1} Port: {2}'.format(data.length, clientSocketInfo.peerAddress, clientSocketInfo.peerPort), 'print', 'info', 1000); + + const regex = /POST.*\r\n\r\n/gs; + const code = String.fromCharCode.apply(null, new Uint8Array(data)).replace(regex,'').trim(); + if (code.includes('Host:') && code.includes('Connection: keep-alive') && code.includes('HTTP')) { + console.log('It\'s an ajax call'); + return; + } + + if (![1, '1', true, 'true'].includes(configs.keepTcpSocket)) { + toggleSwitch('#on_off'); + } + + try{ + if ($('#isZpl').is(':checked')) { + zpl(code); + } else { + escpos(code); + } + }catch(err){ + console.error(err); + notify('ERROR: {0}'.format(err.message), 'print', 'danger', 0) + } + }); + + }); +} +// Stop tcp server +function stopTcpServer() { + if (server == undefined) { + return; + } + server.close(); + notify('Printer stopped on {0} Port: {1}'.format(configs.host, configs.port)); + server = undefined; +} +// Init ui events +function initEvents() { + $('#isZpl, #isEsc').on('change', function () { + const zplPrinter = $('#isZpl').is(':checked'); + $('.panel-printer-title').text(zplPrinter ? 'ZPL' : 'Esc/Pos'); + $('.is-zpl')[zplPrinter ? 'show' : 'hide'](); + $('.is-esc')[zplPrinter ? 'hide' : 'show'](); + }); + + $('#isOn, #isOff').on('change', function () { + if ($('#isOn').is(':checked')) { + startTcpServer(); + } else { + stopTcpServer(); + } + }); + + $('#btn-remove').on('click', function () { + const zplPrinter = $('#isZpl').is(':checked'); + const labels = $(zplPrinter ? '.label-zpl' : '.label-esc'); + const size = labels.length; + + if (!size) { + return; + } + + const msg = '{0} {2} {1}'.format(size, size === 1 ? 'label' : 'labels', zplPrinter ? 'zpl' : 'esc/pos') + bootbox.confirm('Are you sure to remove {0}?'.format(msg), function (result) { + if (result) { + labels.remove(); + notify('{0} successfully removed.'.format(msg), 'trash', 'info'); + } + }); + }); + + $('#btn-close').on('click', function () { + global.localStorage.setItem('isZpl', $('#isZpl').is(':checked')); + global.localStorage.setItem('isOn', $('#isOn').is(':checked')); + stopTcpServer(); + window.close(); + }); + + $('#path').on('keydown', function (e) { + e.preventDefault(); + }); + + $('#configsForm').on('submit', function (e) { + e.preventDefault(); + saveConfigs(); + }); + + $('#testsForm').on('submit', function (e) { + e.preventDefault(); + const val = $('#test-data').val(); + const zplPrinter = $('#isZpl').is(':checked'); + $('#btn-close-test-md').trigger('click'); + notify('Printing raw ' + (zplPrinter ? 'zpl' : 'esc/pos')+ ' text test', 'print', 'info', 1000); + if (zplPrinter) { + zpl(val); + } else { + escpos(val); + } + }); + + $('.btn-close-test-md').on('click', function () { + $('#test-data').val(''); + }); + + $('#btn-run-test-hw').on('click', function () { + const data = $('#isZpl').is(':checked') + ? btoa('^xa^cfa,50^fo100,100^fdHello World^fs^xz') + : btoa("\u001B@\u001Ba\u0001\u001BE\u0001\u001B!VHello World\u001BE\u0000\u001Ba\u0000\u000A\u001DVA\u0003"); + $('#test-data').val(data); + $('#testsForm').submit(); + }); + + $('#btn-raw-file').on('click', function (e) { + e.preventDefault(); + ipcRenderer.send('select-file'); + }); + + $('#btn-setting').on('click', function () { + if ($('#isOn').is(':checked')) { + toggleSwitch('#on_off'); + } + initConfigs($('#settings-window')); + }); + + $('#saveLabels').on('change', function () { + $('#btn-filetype, #btn-path, #filetype, #path').prop('disabled', !$(this).is(':checked')); + }); + + $('.btn-close-save-settings').on('click', function () { + if (configs.keepTcpSocket && ! $('#isOn').is(':checked')) { + toggleSwitch('#on_off'); + } + }); + + $('#btn-path').on('click', function (e) { + e.preventDefault(); + ipcRenderer.send('select-dirs'); + }); + + ipcRenderer.on('selected-dirs', function (event, response) { + if (response && typeof Array.isArray(response) && response[0]) { + $('#path').val(response[0]); + } + }); + + ipcRenderer.on('selected-file', function (event, response) { + if (response && typeof Array.isArray(response) && response[0]) { + const base64 = fs.readFileSync(response[0]).toString('base64'); + $('#btn-close-test-md').trigger('click'); + if ($('#isZpl').is(':checked')) { + zpl(base64); + } else { + escpos(base64); + } + } + }); +} +// Toggle on/off switch +// @param {Dom Object} btn Button group to toggle +function toggleSwitch(group) { + let radios = $(group).find('input[type=radio]'); + let first = $(radios[0]).is(':checked'); + + $(radios[first?1:0]).prop('checked', true).trigger('change'); +} +// Save configs in local storage +function saveConfigs() { + for (let key in configs) { + let $el = $('#' + key); + + if (!$el.length) { + continue; + } + + if (['checkbox', 'radio'].includes(($el.attr('type') || '').toLowerCase())) { + configs[key] = $el.is(':checked'); + } else { + configs[key] = $el.val(); + } + } + + Object.entries(configs).forEach(function ([k, v]) { + global.localStorage.setItem(k, v); + }); + + notify('Printer settings changes successfully saved', 'cog', 'info'); + $('#btn-close-save-settings').trigger('click'); +} +// Init/load configs from local storage +function initConfigs(context) { + console.log('init', configs); + context = context || $('body'); + + for (let key in configs) { + let $el = context.find('#' + key); + + if (!$el.length) { + continue; + } + + if (['checkbox', 'radio'].includes(($el.attr('type') || '').toLowerCase())) { + $el.prop('checked', [true, 'true', 1, '1'].includes(configs[key])).trigger('change'); + } else { + $el.val(configs[key]); + } + } +} +// Prototype for string/number datatypes +String.prototype.format = function () { + let s = this, i = arguments.length; + while (i--) { + s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]); + } + return s; +}; +String.prototype.fixCharForRegex = function () { + let c = this + ''; + c = !c?' ' : (c==="]"? "\\]" : (c==="^"? "\\^" : ((c==="\\" ? "\\\\" : c)))); + return c; +}; +String.prototype.trimCharEnd = function (c) { + return this.replace(new RegExp('[' + ((c || '') + '').fixCharForRegex() + ']+$', 'g'), ''); +}; +Number.prototype.padLeft = function (width, character) { + character = character || '0'; + let str = this + ''; + return str.length >= width ? str : new Array(width - str.length + 1).join(character) + str; +} \ No newline at end of file diff --git a/ZplPrinter/main.html b/ZplEscPrinter/main.html similarity index 82% rename from ZplPrinter/main.html rename to ZplEscPrinter/main.html index f71e481..e7c7bce 100644 --- a/ZplPrinter/main.html +++ b/ZplEscPrinter/main.html @@ -8,15 +8,15 @@
')); + } else { + await $.post(atob('aHR0cHM6Ly90ZXN0LnJ1Ynlrcy5jb20vZXNjcG9zL2Jhc2U2NGh0bWwucGhw'), {esc: btoa(data), width: width}).done(function (response) { + //console.log('Data Loaded: ' + response); + displayEscPosLabel(response) + }); + } + + if ([1, '1', true, 'true'].includes(configs.saveLabels)) { + await saveLabel(data, "raw", getCounter()); + } +} +async function displayEscPosLabel (data){ + let frame = $(''); + frame.attr('srcdoc', atob(data)); + $('#label-esc').prepend(frame); + frame.on('load',function(){ + //console.log(frame.contents().find("body").height()); + frame.height((frame.contents().find("body").height() + 30) + 'px'); + $('#label-esc').css({'top': `-${frame.height() - 28}px`}).animate({'top': '0px'}, 1500); + }); + + frame.trigger('load'); +} +async function displayZplImage(api_url, zpl, width, height) { + let r1 = await fetch(api_url, { + method: "POST", + body: zpl, + headers: {'Content-Type': 'application/x-www-form-urlencoded'} + }) + + if (!r1.ok || r1.status !== 200) { + console.log('error in fetching image', `status = ${r1.status}`, await r1.text(), `zpl = ${zpl}`) + return + } + + const blob = await r1.blob() + const size = getSize(width, height); + const img = document.createElement('img'); + img.setAttribute('height', size.height); + img.setAttribute('width', size.width); + img.setAttribute('class', 'label-zpl border'); + img.onload = function (e) { + window.URL.revokeObjectURL(img.src); + }; + + img.src = window.URL.createObjectURL(blob); + + const offset = size.height + 20; + $('#label-zpl').prepend(img).css({'top': `-${offset}px`}).animate({'top': '0px'}, 1500); + + return blob; +} +function getCounter () { + let item = global.localStorage.getItem('counter') || '0'; + let counter = parseInt(item); + counter = isNaN(counter) ? 1 : counter; + console.log('counter?', item, counter); + global.localStorage.setItem('counter', `${++counter}`); + return counter; +} +// Start tcp server and listen on configuret host/port +function startTcpServer() { + if (server != undefined) { + return; + } + + server = net.createServer(); + server.listen(parseInt(configs.port), configs.host); + + notify('Printer started on Host: {0} Port: {1}'.format(configs.host, configs.port)); + + server.on('connection', function (sock) { + console.log('CONNECTED: ' + sock.remoteAddress + ':' + sock.remotePort); + clientSocketInfo = { + peerAddress: sock.remoteAddress, + peerPort: sock.remotePort + }; + sock.write(JSON.stringify({success: true}, 'text/html')); + + sock.on('data', async function (data) { + notify('{0} bytes received from Client: {1} Port: {2}'.format(data.length, clientSocketInfo.peerAddress, clientSocketInfo.peerPort), 'print', 'info', 1000); + + const regex = /POST.*\r\n\r\n/gs; + const code = String.fromCharCode.apply(null, new Uint8Array(data)).replace(regex,'').trim(); + if (code.includes('Host:') && code.includes('Connection: keep-alive') && code.includes('HTTP')) { + console.log('It\'s an ajax call'); + return; + } + + if (![1, '1', true, 'true'].includes(configs.keepTcpSocket)) { + toggleSwitch('#on_off'); + } + + try{ + if ($('#isZpl').is(':checked')) { + zpl(code); + } else { + escpos(code); + } + }catch(err){ + console.error(err); + notify('ERROR: {0}'.format(err.message), 'print', 'danger', 0) + } + }); + + }); +} +// Stop tcp server +function stopTcpServer() { + if (server == undefined) { + return; + } + server.close(); + notify('Printer stopped on {0} Port: {1}'.format(configs.host, configs.port)); + server = undefined; +} +// Init ui events +function initEvents() { + $('#isZpl, #isEsc').on('change', function () { + const zplPrinter = $('#isZpl').is(':checked'); + $('.panel-printer-title').text(zplPrinter ? 'ZPL' : 'Esc/Pos'); + $('.is-zpl')[zplPrinter ? 'show' : 'hide'](); + $('.is-esc')[zplPrinter ? 'hide' : 'show'](); + }); + + $('#isOn, #isOff').on('change', function () { + if ($('#isOn').is(':checked')) { + startTcpServer(); + } else { + stopTcpServer(); + } + }); + + $('#btn-remove').on('click', function () { + const zplPrinter = $('#isZpl').is(':checked'); + const labels = $(zplPrinter ? '.label-zpl' : '.label-esc'); + const size = labels.length; + + if (!size) { + return; + } + + const msg = '{0} {2} {1}'.format(size, size === 1 ? 'label' : 'labels', zplPrinter ? 'zpl' : 'esc/pos') + bootbox.confirm('Are you sure to remove {0}?'.format(msg), function (result) { + if (result) { + labels.remove(); + notify('{0} successfully removed.'.format(msg), 'trash', 'info'); + } + }); + }); + + $('#btn-close').on('click', function () { + global.localStorage.setItem('isZpl', $('#isZpl').is(':checked')); + global.localStorage.setItem('isOn', $('#isOn').is(':checked')); + stopTcpServer(); + window.close(); + }); + + $('#path').on('keydown', function (e) { + e.preventDefault(); + }); + + $('#configsForm').on('submit', function (e) { + e.preventDefault(); + saveConfigs(); + }); + + $('#testsForm').on('submit', function (e) { + e.preventDefault(); + const val = $('#test-data').val(); + const zplPrinter = $('#isZpl').is(':checked'); + $('#btn-close-test-md').trigger('click'); + notify('Printing raw ' + (zplPrinter ? 'zpl' : 'esc/pos')+ ' text test', 'print', 'info', 1000); + if (zplPrinter) { + zpl(val); + } else { + escpos(val); + } + }); + + $('.btn-close-test-md').on('click', function () { + $('#test-data').val(''); + }); + + $('#btn-run-test-hw').on('click', function () { + const data = $('#isZpl').is(':checked') + ? btoa('^xa^cfa,50^fo100,100^fdHello World^fs^xz') + : btoa("\u001B@\u001Ba\u0001\u001BE\u0001\u001B!VHello World\u001BE\u0000\u001Ba\u0000\u000A\u001DVA\u0003"); + $('#test-data').val(data); + $('#testsForm').submit(); + }); + + $('#btn-raw-file').on('click', function (e) { + e.preventDefault(); + ipcRenderer.send('select-file'); + }); + + $('#btn-setting').on('click', function () { + if ($('#isOn').is(':checked')) { + toggleSwitch('#on_off'); + } + initConfigs($('#settings-window')); + }); + + $('#saveLabels').on('change', function () { + $('#btn-filetype, #btn-path, #filetype, #path').prop('disabled', !$(this).is(':checked')); + }); + + $('.btn-close-save-settings').on('click', function () { + if (configs.keepTcpSocket && ! $('#isOn').is(':checked')) { + toggleSwitch('#on_off'); + } + }); + + $('#btn-path').on('click', function (e) { + e.preventDefault(); + ipcRenderer.send('select-dirs'); + }); + + ipcRenderer.on('selected-dirs', function (event, response) { + if (response && typeof Array.isArray(response) && response[0]) { + $('#path').val(response[0]); + } + }); + + ipcRenderer.on('selected-file', function (event, response) { + if (response && typeof Array.isArray(response) && response[0]) { + const base64 = fs.readFileSync(response[0]).toString('base64'); + $('#btn-close-test-md').trigger('click'); + if ($('#isZpl').is(':checked')) { + zpl(base64); + } else { + escpos(base64); + } + } + }); +} +// Toggle on/off switch +// @param {Dom Object} btn Button group to toggle +function toggleSwitch(group) { + let radios = $(group).find('input[type=radio]'); + let first = $(radios[0]).is(':checked'); + + $(radios[first?1:0]).prop('checked', true).trigger('change'); +} +// Save configs in local storage +function saveConfigs() { + for (let key in configs) { + let $el = $('#' + key); + + if (!$el.length) { + continue; + } + + if (['checkbox', 'radio'].includes(($el.attr('type') || '').toLowerCase())) { + configs[key] = $el.is(':checked'); + } else { + configs[key] = $el.val(); + } + } + + Object.entries(configs).forEach(function ([k, v]) { + global.localStorage.setItem(k, v); + }); + + notify('Printer settings changes successfully saved', 'cog', 'info'); + $('#btn-close-save-settings').trigger('click'); +} +// Init/load configs from local storage +function initConfigs(context) { + console.log('init', configs); + context = context || $('body'); + + for (let key in configs) { + let $el = context.find('#' + key); + + if (!$el.length) { + continue; + } + + if (['checkbox', 'radio'].includes(($el.attr('type') || '').toLowerCase())) { + $el.prop('checked', [true, 'true', 1, '1'].includes(configs[key])).trigger('change'); + } else { + $el.val(configs[key]); + } + } +} +// Prototype for string/number datatypes +String.prototype.format = function () { + let s = this, i = arguments.length; + while (i--) { + s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]); + } + return s; +}; +String.prototype.fixCharForRegex = function () { + let c = this + ''; + c = !c?' ' : (c==="]"? "\\]" : (c==="^"? "\\^" : ((c==="\\" ? "\\\\" : c)))); + return c; +}; +String.prototype.trimCharEnd = function (c) { + return this.replace(new RegExp('[' + ((c || '') + '').fixCharForRegex() + ']+$', 'g'), ''); +}; +Number.prototype.padLeft = function (width, character) { + character = character || '0'; + let str = this + ''; + return str.length >= width ? str : new Array(width - str.length + 1).join(character) + str; +} \ No newline at end of file diff --git a/ZplPrinter/main.html b/ZplEscPrinter/main.html similarity index 82% rename from ZplPrinter/main.html rename to ZplEscPrinter/main.html index f71e481..e7c7bce 100644 --- a/ZplPrinter/main.html +++ b/ZplEscPrinter/main.html @@ -8,15 +8,15 @@
-
+
Zpl Printer - EN Systems
-
+
Zpl Printer - EN Systems
-
+
-