start to add printer

.github/workflows/build.yaml

@@ -0,0 +1,123 @@
+name: Build & Release
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - v*
+  pull_request:
+
+jobs:
+  test:
+    name: Test (${{ matrix.os }} - ${{ matrix.arch }})
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ macOS-latest, ubuntu-latest, windows-latest ]
+        arch: [ x64 ]
+        include:
+          - os: macOS-latest
+            arch: arm64
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3.5.0
+        with:
+          node-version: 16.x
+          cache: yarn
+      - name: Install
+        run: yarn --frozen-lockfile --network-timeout 100000 || yarn --frozen-lockfile --network-timeout 100000 || yarn --frozen-lockfile --network-timeout 100000
+      - name: Create fake contributors
+        uses: 1arp/create-a-file-action@0.2
+        with:
+          path: 'static'
+          file: 'contributors.json'
+          content: "[]"
+#      - name: lint
+#        run: yarn lint
+#      - name: test
+#        run: yarn test:ci
+#      - name: Coveralls
+#        if: matrix.os == 'ubuntu-latest'
+#        uses: coverallsapp/github-action@1.1.3
+#        with:
+#          github-token: ${{ secrets.GITHUB_TOKEN }}
+  build:
+    needs: test
+    name: Build (${{ matrix.os }} - ${{ matrix.arch }})
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        # Build for supported platforms
+        # https://github.com/electron/electron-packager/blob/ebcbd439ff3e0f6f92fa880ff28a8670a9bcf2ab/src/targets.js#L9
+        # 32-bit Linux unsupported as of 2019: https://www.electronjs.org/blog/linux-32bit-support
+        os: [ macOS-latest, ubuntu-latest, windows-latest ]
+        arch: [ x64, arm64 ]
+        include:
+          - os: windows-latest
+            arch: ia32
+          - os: windows-latest
+            arch: i386
+          - os: ubuntu-latest
+            arch: armv7l
+        # Publishing artifacts for multiple Windows architectures has
+        # a bug which can cause the wrong architecture to be downloaded
+        # for an update, so until that is fixed, only build Windows x64
+        exclude:
+          - os: windows-latest
+            arch: arm64
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3.5.0
+        with:
+          node-version: 16.x
+          cache: yarn
+#      - name: Set MacOS signing certs
+#        if: matrix.os == 'macOS-latest'
+#        run: chmod +x tools/add-macos-cert.sh && ./tools/add-macos-cert.sh
+#        env:
+#          MACOS_CERT_P12: ${{ secrets.MACOS_CERT_P12 }}
+#          MACOS_CERT_PASSWORD: ${{ secrets.MACOS_CERT_PASSWORD }}
+#      - name: Set Windows signing certificate
+#        if: matrix.os == 'windows-latest'
+#        continue-on-error: true
+#        id: write_file
+#        uses: timheuer/base64-to-file@v1
+#        with:
+#          fileName: 'win-certificate.pfx'
+#          encodedString: ${{ secrets.WINDOWS_CODESIGN_P12 }}
+      - name: Install
+        run: yarn --network-timeout 100000 || yarn --network-timeout 100000 || yarn --network-timeout 100000
+      - name: Make
+        if: startsWith(github.ref, 'refs/tags/')
+        run: yarn make --arch=${{ matrix.arch }}
+        env:
+#          APPLE_ID: ${{ secrets.APPLE_ID }}
+#          APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#          WINDOWS_CODESIGN_FILE: ${{ steps.write_file.outputs.filePath }}
+#          WINDOWS_CODESIGN_PASSWORD: ${{ secrets.WINDOWS_CODESIGN_PASSWORD }}
+      # - name: Archive production artifacts
+      #   uses: actions/upload-artifact@v2
+      #   with:
+      #     name: ${{ matrix.os }}
+      #     path: out/make/**/*
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        if: startsWith(github.ref, 'refs/tags/')
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          draft: true
+          files: |
+            out/**/*.deb
+            out/**/*.dmg
+            out/**/*setup*.exe
+            out/**/*.nupkg
+            out/**/*.rpm
+            out/**/*.zip
+            out/**/RELEASES
+            out/**/*portable*.exe

.gitignore

@@ -189,4 +189,5 @@ _Pvt_Extensions/
 ModelManifest.xml
 /.vs/config/applicationhost.config
 
-out/
+out/
+.idea/

README.md

@@ -2,12 +2,35 @@
 
 Printer emulator for zpl rendering engine. The emulator is based on the [labelary](http://labelary.com/service.html) web service. You can configure print density, label size and the tcp server to listen for any incoming labels.
 
+[Releases](https://github.com/MrL0co/ZplPrinter/releases/latest)
+
+## New in Version 2.0
+
+The app now runs standalone via Electron and can be installed via the binaries/zips on the GitHub Releases page. It currently supports:
+
+* Windows:
+  * Squarrel installer (zpl-printer-**version**-win32-**arch**-setup.exe)
+  * Portable runner (zpl-printer-portable-**version**.exe)
+  * NuGet package (zpl-printer-**version**-full.nupkg)
+  * msi installer (TODO)
+* Linux:
+  * Rpm (zpl-printer-**version**.**arch**.rpm)
+  * Deb (zpl-printer\_**version**\_**arch**.deb)
+  * Zip (Zpl.Printer-linux-**arch**-**version**.zip)
+* Mac:
+  * Zip (Zpl.Printer-darwin-**arch**-**version**.zip)
+
 ## References
 * [ZPL Command Support](http://labelary.com/docs.html)
 * [ZPL Web Service](http://labelary.com/service.html)
+* [Electron](https://www.electronjs.org)
+* [Electron Forge](https://www.electronforge.io)
 
 ## Release notes
 
+### Version 2.0
+* **Refactor** Reworked entire app to run in an Electron app instead of the Chrome Plugin API
+
 ### Version 1.6
 * **Fix** PDF label export.
 * **New** TCP input buffer size can be configure in settings.
@@ -29,6 +52,7 @@ Printer emulator for zpl rendering engine. The emulator is based on the [labelar
 
 * **Change** Labelary web service call from GET to POST to support large ZPL templates. (Thanks to [pitufo](https://github.com/sbinkert/ZplPrinter/issues/1))
 
-## Download
+### Contributing
+
+checkout the project. run `yarn install`. use `yarn start` to run in development mode and use `yarn make` to generate binaries for your OS
 
-<a target="_blank" href="https://chrome.google.com/webstore/detail/zpl-printer/phoidlklenidapnijkabnfdgmadlcmjo"><img alt="Try it now" src="https://raw.github.com/GoogleChrome/chrome-app-samples/master/tryitnowbutton_small.png" title="Click here to install ZplPrinter from the Chrome Web Store"/></a>

ZplPrinter.sln

@@ -1,48 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio 2013
-VisualStudioVersion = 12.0.31101.0
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "ZplPrinter", "ZplPrinter\ZplPrinter.jsproj", "{2B889882-DCF5-4B87-9473-B6FCCC306081}"
-EndProject
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|Any CPU = Debug|Any CPU
-		Debug|ARM = Debug|ARM
-		Debug|x64 = Debug|x64
-		Debug|x86 = Debug|x86
-		Release|Any CPU = Release|Any CPU
-		Release|ARM = Release|ARM
-		Release|x64 = Release|x64
-		Release|x86 = Release|x86
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|ARM.ActiveCfg = Debug|ARM
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|ARM.Build.0 = Debug|ARM
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|ARM.Deploy.0 = Debug|ARM
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|x64.ActiveCfg = Debug|x64
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|x64.Build.0 = Debug|x64
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|x64.Deploy.0 = Debug|x64
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|x86.ActiveCfg = Debug|x86
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|x86.Build.0 = Debug|x86
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Debug|x86.Deploy.0 = Debug|x86
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|Any CPU.Build.0 = Release|Any CPU
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|Any CPU.Deploy.0 = Release|Any CPU
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|ARM.ActiveCfg = Release|ARM
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|ARM.Build.0 = Release|ARM
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|ARM.Deploy.0 = Release|ARM
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|x64.ActiveCfg = Release|x64
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|x64.Build.0 = Release|x64
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|x64.Deploy.0 = Release|x64
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|x86.ActiveCfg = Release|x86
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|x86.Build.0 = Release|x86
-		{2B889882-DCF5-4B87-9473-B6FCCC306081}.Release|x86.Deploy.0 = Release|x86
-	EndGlobalSection
-	GlobalSection(SolutionProperties) = preSolution
-		HideSolutionNode = FALSE
-	EndGlobalSection
-EndGlobal

ZplPrinter/ZplPrinter.jsproj

@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <ItemGroup Label="ProjectConfigurations">
-    <ProjectConfiguration Include="Debug|AnyCPU">
-      <Configuration>Debug</Configuration>
-      <Platform>AnyCPU</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Debug|ARM">
-      <Configuration>Debug</Configuration>
-      <Platform>ARM</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Debug|x64">
-      <Configuration>Debug</Configuration>
-      <Platform>x64</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Debug|x86">
-      <Configuration>Debug</Configuration>
-      <Platform>x86</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Release|AnyCPU">
-      <Configuration>Release</Configuration>
-      <Platform>AnyCPU</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Release|ARM">
-      <Configuration>Release</Configuration>
-      <Platform>ARM</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Release|x64">
-      <Configuration>Release</Configuration>
-      <Platform>x64</Platform>
-    </ProjectConfiguration>
-    <ProjectConfiguration Include="Release|x86">
-      <Configuration>Release</Configuration>
-      <Platform>x86</Platform>
-    </ProjectConfiguration>
-  </ItemGroup>
-  <PropertyGroup Label="Globals">
-    <ProjectGuid>2b889882-dcf5-4b87-9473-b6fccc306081</ProjectGuid>
-  </PropertyGroup>
-  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
-  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '12.0'">
-    <VisualStudioVersion>12.0</VisualStudioVersion>
-  </PropertyGroup>
-  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
-  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
-  <PropertyGroup>
-    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
-    <TargetPlatformVersion>8.1</TargetPlatformVersion>
-    <RequiredPlatformVersion>8.1</RequiredPlatformVersion>
-    <MinimumVisualStudioVersion>12.0</MinimumVisualStudioVersion>
-    <DefaultLanguage>en-US</DefaultLanguage>
-    <PackageCertificateKeyFile>ZplPrinter_TemporaryKey.pfx</PackageCertificateKeyFile>
-  </PropertyGroup>
-  <ItemGroup>
-    <Content Include="bootstrap\css\bootstrap-notify.css" />
-    <Content Include="bootstrap\css\bootstrap-theme.css" />
-    <Content Include="bootstrap\css\bootstrap-theme.css.map" />
-    <Content Include="bootstrap\css\bootstrap-theme.min.css" />
-    <Content Include="bootstrap\css\bootstrap.css" />
-    <Content Include="bootstrap\css\bootstrap.css.map" />
-    <Content Include="bootstrap\css\bootstrap.min.css" />
-    <Content Include="bootstrap\fonts\glyphicons-halflings-regular.eot" />
-    <Content Include="bootstrap\fonts\glyphicons-halflings-regular.svg" />
-    <Content Include="bootstrap\fonts\glyphicons-halflings-regular.ttf" />
-    <Content Include="bootstrap\fonts\glyphicons-halflings-regular.woff" />
-    <Content Include="bootstrap\js\bootbox.min.js" />
-    <Content Include="bootstrap\js\bootstrap-notify.js" />
-    <Content Include="bootstrap\js\bootstrap.js" />
-    <Content Include="bootstrap\js\bootstrap.min.js" />
-    <Content Include="bootstrap\js\npm.js" />
-    <Content Include="css\style.css" />
-    <Content Include="icons\Icon-128.png" />
-    <Content Include="icons\Icon-16-white.png" />
-    <Content Include="icons\Icon-16.png" />
-    <Content Include="icons\Icon-24.png" />
-    <Content Include="icons\Icon-32.png" />
-    <Content Include="icons\Icon-64.png" />
-    <Content Include="jquery\jquery-2.1.1.min.js" />
-    <Content Include="js\background.js" />
-    <Content Include="js\main.js" />
-    <Content Include="main.html" />
-    <Content Include="manifest.json" />
-  </ItemGroup>
-  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
-  <!-- To modify your build process, add your task inside one of the targets below then uncomment
-       that target and the DisableFastUpToDateCheck PropertyGroup. 
-       Other similar extension points exist, see Microsoft.Common.targets.
-  <Target Name="BeforeBuild">
-  </Target>
-  <Target Name="AfterBuild">
-  </Target>
-  <PropertyGroup>
-    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
-  </PropertyGroup>
-  -->
-</Project>

ZplPrinter/css/style.css

@@ -19,7 +19,7 @@ input:required:invalid, input:focus:invalid { border-color: #d9534f; }
     border: 1px solid transparent;
     border-color: #e7e7e7 !important;
     border-radius: 4px;
-    height: 623px;
+    height: 80vh;
     overflow: auto;
 }
 
@@ -47,4 +47,7 @@ input:required:invalid, input:focus:invalid { border-color: #d9534f; }
 .panel-heading-blur {
     background-color: #215480 !important;
     border-color: #215480 !important;
+}
+table {
+    width: 100%;
 }

ZplPrinter/icons/icon.svg

@@ -0,0 +1,16 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        style="transform: matrix(1.69, 0, 0, 1.69, -4, 102); transform-origin: 50% 50%; cursor: move; max-height: 288.34px; transition: none 0s ease 0s;"
+        width="1024" height="1024" viewBox="0 0 1280 1280">
+    <g fill="rgb(0,0,0)"
+       style="transform: none; transform-origin: 50% 50%;"
+    >
+        <g style="transform: none;">
+            <path
+                    d="M320 1040 l0 -200 320 0 320 0 0 200 0 200 -320 0 -320 0 0 -200z m560 80 l0 -40 -240 0 -240 0 0 40 0 40 240 0 240 0 0 -40z m0 -160 l0 -40 -240 0 -240 0 0 40 0 40 240 0 240 0 0 -40z"></path>
+            <path
+                    d="M135 991 c-45 -11 -82 -38 -107 -80 -22 -35 -23 -44 -23 -271 0 -228 1 -236 23 -272 32 -51 78 -77 151 -84 l61 -7 0 122 0 121 400 0 400 0 0 -121 0 -122 61 7 c73 7 119 33 151 84 22 36 23 44 23 272 0 228 -1 236 -23 272 -32 51 -78 77 -151 84 l-61 7 0 -122 0 -121 -400 0 -400 0 0 120 0 120 -37 -1 c-21 -1 -52 -4 -68 -8z"></path>
+            <path d="M320 240 l0 -200 320 0 320 0 0 200 0 200 -320 0 -320 0 0 -200z"></path>
+        </g>
+    </g>
+</svg>

ZplPrinter/js/background.js

@@ -1,16 +1,11 @@
 chrome.app.runtime.onLaunched.addListener(function () {
     chrome.app.window.create('main.html', {
-        frame: 'none',
-        bounds: {
-            width: 535,
-            height: 768
-        },
-        resizable: false,
+        frame: 'chrome'
     });
 });
 
 chrome.runtime.onInstalled.addListener(function (details) {
-    if (details.reason == "install" || details.reason == "update") {
+    if (details.reason === "install" || details.reason === "update") {
         chrome.storage.local.set({
             isOn: true,
             density: '8',
@@ -23,8 +18,8 @@ chrome.runtime.onInstalled.addListener(function (details) {
             keepTcpSocket: false,
             saveLabels: false,
             filetype: '1',
-            path: null,
-	    counter: 0
+            path: "/tmp",
+	        counter: 0
         });
     }
 });

ZplPrinter/js/main.js

@@ -1,16 +1,15 @@
-// const store = require('./store');
-var $ = require('jquery');
+const {app, BrowserWindow, dialog, ipcRenderer} = require('electron')
+const fs = require('fs');
+const $ = require('jquery');
 global.$ = $;
 global.jQuery = $;
-var net = require('net');
+const net = require('net');
 
-var socketId, clientSocketInfo;
-var server;
-var configs = {};
-var retainEntry = null;
-var pathEntry = null;
+let clientSocketInfo;
+let server;
+const configs = {};
 
-var defaults ={
+const defaults = {
     isOn: true,
     density: '8',
     width: '4',
@@ -23,25 +22,29 @@ var defaults ={
     saveLabels: false,
     filetype: '1',
     path: null,
-    counter: 0
+    counter: 0,
+    printer: '',
+    paperSize: ''
 };
 
-$(function() {
-    $(window).bind('focus blur', function() {
+$(function () {
+    $(window).bind('focus blur', function () {
         $('#panel-head').toggleClass('panel-heading-blur');
     });
 
     // todo only on first run
     if (!global.localStorage.getItem('isOn')) {
-        Object.entries(defaults).forEach(function([k,v]) {
-            global.localStorage.setItem(k,v);
+        Object.entries(defaults).forEach(function ([k, v]) {
+            if (global.localStorage.getItem(k)) {
+                global.localStorage.setItem(k, v);
+            }
         });
     }
 
 });
 
-$(document).ready(function() {
-    Object.keys(defaults).forEach(function(k) {
+$(document).ready(function () {
+    Object.keys(defaults).forEach(function (k) {
         configs[k] = global.localStorage.getItem(k);
     });
 
@@ -49,51 +52,52 @@ $(document).ready(function() {
     initEvents();
 });
 
-function getSize (width, height) {
-    var defaultWidth = 386;
+function getSize(width, height) {
+    const defaultWidth = 386;
 
-    var factor = width / height;
+    const factor = width / height;
     return {
         width: defaultWidth,
         height: defaultWidth / factor
     };
 }
 
-function saveLabel (blob, ext) {
-    items = global.localStorage.getItem('counter');
+async function saveLabel(blob, ext, counter) {
 
-    chrome.fileSystem.getWritableEntry(pathEntry, function(entry) {
-        var counter = parseInt(items.counter);
-        var fileName = 'LBL' + pad(counter, 6) + '.' + ext;
+    const fileName = `LBL${pad(counter, 6)}.${ext}`;
 
-        global.localStorage.setItem('counter', ++counter);
 
-        entry.getFile(fileName, { create: true }, function(entry) {
-            entry.createWriter(function(writer) {
-                writer.write(blob);
-                notify('Label <b>{0}</b> saved in folder <b>{1}</b>'.format(fileName, $('#txt-path').val()), 'floppy-saved', 'info', 1000);
+    try {
+        fs.writeFileSync(fileName, new Uint8Array(await blob.arrayBuffer()))
+        // file written successfully
+        notify('Label <b>{0}</b> saved in folder <b>{1}</b>'.format(fileName, $('#txt-path').val()), 'floppy-saved', 'info', 1000);
+    } catch (err) {
+        console.error(err);
+        notify(`error in saving label to ${fileName} ${err}`, 'floppy-saved', 'danger', 0)
+    }
 
-            });
-        });
-    });
 }
 
-function savePdf (zpl, density, width, height) {
-    var xhr = new XMLHttpRequest();
-    xhr.open('POST', 'http://api.labelary.com/v1/printers/{0}dpmm/labels/{1}x{2}/0/'.format(density, width, height), true);
-    xhr.setRequestHeader('Accept', 'application/pdf');
-    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-    xhr.responseType = 'blob';
-    xhr.onload = function(e) {
-        if (this.status == 200) {
-            saveLabel(this.response, 'pdf');
+async function fetchAndSavePDF(api_url, zpl, counter) {
+
+    let r1 = await fetch(api_url, {
+        method: "POST",
+        body: zpl,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Accept': 'application/pdf'
         }
-    };
+    })
 
-    xhr.send(zpl);
+    if (r1.ok && r1.status === 200) {
+        let blob = await r1.blob()
+        await saveLabel(blob, 'pdf', counter);
+    } else {
+        console.log('error in fetching pdf', `status = ${r1.status}`, await r1.text(), `zpl=${zpl}`)
+    }
 }
 
-function pad (n, width, z) {
+function pad(n, width, z) {
     z = z || '0';
     n = n + '';
     return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
@@ -104,16 +108,16 @@ function pad (n, width, z) {
 // @param {Number} glyphicon Notification icon
 // @param {String} type Notification type
 // @param {Number} delay Notification fade out delay in ms
-function notify (text, glyphicon, type, delay) {
-    var log = $('<p>' + text + '</p>').text();
-    if (type == 'danger') {
+function notify(text, glyphicon, type, delay) {
+    const log = $('<p>' + text + '</p>').text();
+    if (type === 'danger') {
         console.error(log);
     } else {
         console.info(log);
     }
 
     $('.bottom-left').notify({
-        message: { html: text },
+        message: {html: text},
         glyphicon: glyphicon,
         type: type,
         fadeOut: {
@@ -122,8 +126,44 @@ function notify (text, glyphicon, type, delay) {
     }).show();
 }
 
+async function displayAndSaveImage(api_url, zpl, width, height, savePng, counter) {
+    let r1 = await fetch(api_url, {
+        method: "POST",
+        body: zpl,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        }
+    })
+
+    if (r1.ok && r1.status === 200) {
+        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', 'thumbnail');
+        img.onload = function (e) {
+            window.URL.revokeObjectURL(img.src);
+        };
+
+        img.src = window.URL.createObjectURL(blob);
+
+        $('#label').prepend(img);
+        const offset = size.height + 20;
+        $('#label').css({'top': `-${offset}px`});
+        $('#label').animate({'top': '0px'}, 1500);
+
+        if (savePng) {
+            await saveLabel(blob, "png", counter)
+        }
+
+    } else {
+        console.log('error in fetching image', `status = ${r1.status}`, await r1.text(), `zpl = ${zpl}`)
+    }
+}
+
 // Start tcp server and listen on configuret host/port
-function startTcpServer () {
+function startTcpServer() {
     if (server != undefined) {
         return;
     }
@@ -137,7 +177,7 @@ function startTcpServer () {
     //         if (result == 0) {
     notify('Printer started on Host: <b>{0}</b> Port: <b>{1}</b>'.format(configs.host, configs.port));
     // chrome.sockets.tcpServer.onAccept.addListener(function (clientInfo) {
-    server.on('connection', function(sock) {
+    server.on('connection', function (sock) {
         // socketId = sock;
         console.log('CONNECTED: ' + sock.remoteAddress + ':' + sock.remotePort);
         clientSocketInfo = {
@@ -145,79 +185,51 @@ function startTcpServer () {
             peerPort: sock.remotePort
         };
 
-        sock.on('data', function(data) {
+        sock.on('data', async function (data) {
             // chrome.sockets.tcp.onReceive.addListener(function (info) {
             notify('{0} bytes received from Client: <b>{1}</b> Port: <b>{2}</b>'.format(data.length, clientSocketInfo.peerAddress, clientSocketInfo.peerPort), 'print', 'info', 1000);
-            var zpls = String.fromCharCode.apply(null, data).split(/\^XZ/);
+            const zpls = String.fromCharCode.apply(null, data).split(/\^XZ/);
             if (!configs.keepTcpSocket) {
                 server.close();
             }
-            var factor = (configs.unit == '1') ? 1 : (configs.unit == '2') ? 2.54 : 25.4;
-            var width = parseFloat(configs.width) / factor;
-            var height = parseFloat(configs.height) / factor;
+            const factor = (configs.unit === '1') ? 1 : (configs.unit === '2') ? 2.54 : 25.4;
+            const width = parseFloat(configs.width) / factor;
+            const height = parseFloat(configs.height) / factor;
 
-            for (var i in zpls) {
-                var zpl = zpls[i];
+            for (let zpl of zpls) {
                 if (!(!zpl || !zpl.length)) {
                     zpl += '^XZ';
+                } else {
+                    console.warn(`zpl = ${zpl}, seems invalid`)
+                    continue
                 }
 
-                // if (configs['saveLabels']) {
-                //     if (configs['filetype'] == '2') {
-                //         savePdf(zpl, configs.density, width, height);
-                //     }
-                // }
+                let items = global.localStorage.getItem('counter') || '0';
+                let counter = parseInt(items);
+                counter = isNaN(counter) ? 1 : counter;
+                console.log('counter?', items, counter)
 
-                var xhr = new XMLHttpRequest();
-                xhr.open('POST', 'http://api.labelary.com/v1/printers/{0}dpmm/labels/{1}x{2}/0/'.format(configs.density, width, height), true);
-                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-                xhr.responseType = 'blob';
-                xhr.onload = function(e) {
-                    if (this.status == 200) {
-                        var blob = this.response;
-                        // if (configs['saveLabels']) {
-                        //     if (configs['filetype'] == '1') {
-                        //         saveLabel(blob, 'png');
-                        //     }
-                        // }
-                        var size = getSize(width, height);
-                        var img = document.createElement('img');
-                        img.setAttribute('height', size.height);
-                        img.setAttribute('width', size.width);
-                        img.setAttribute('class', 'thumbnail');
-                        img.onload = function(e) {
-                            window.URL.revokeObjectURL(img.src);
-                        };
+                let api_url = `https://api.labelary.com/v1/printers/${configs.density}dpmm/labels/${width}x${height}/0`;
+                console.warn("configs", configs["saveLabels"], "fileType", configs["fileType"])
+                let savePdf = configs['saveLabels'] && configs['filetype'] === '2';
+                let savePng = configs['saveLabels'] && configs['filetype'] === '1';
+                if (savePdf) {
+                    await fetchAndSavePDF(api_url, zpl, counter);
+                }
+
+                await displayAndSaveImage(api_url, zpl, width, height, savePng, counter);
+
+                global.localStorage.setItem('counter', `${++counter}`);
 
-                        img.src = window.URL.createObjectURL(blob);
 
-                        $('#label').prepend(img);
-                        var offset = size.height + 20;
-                        $('#label').css({ 'top': '-' + offset + 'px' });
-                        $('#label').animate({ 'top': '0px' }, 1500);
-                    }
-                };
-                xhr.send(zpl);
             }
         });
-        // chrome.sockets.tcp.getInfo(clientInfo.clientSocketId, function (socketInfo) {
-        //                 clientSocketInfo = socketInfo;
-        //     chrome.sockets.tcp.update(clientInfo.clientSocketId,{bufferSize: parseInt(configs.bufferSize) }, function(){
-        //         chrome.sockets.tcp.setPaused(clientInfo.clientSocketId, false);
-        //     });
-        // });
-        // });
-        // } else {
-        //     socketId = undefined;
-        //     toggleSwitch('.btn-toggle');
-        //     notify('Error occurs while creating Printer on Host: <b>{0}</b> Port: <b>{1}</b>'.format(configs.host, configs.port), 'exclamation-sign', 'danger', 4000);
-        // }
+
     });
-    // });
 }
 
 // Stop tcp server
-function stopTcpServer () {
+function stopTcpServer() {
     if (server == undefined) {
         return;
     }
@@ -231,8 +243,8 @@ function stopTcpServer () {
 }
 
 // Init ui events
-function initEvents () {
-    $('.btn-toggle').click(function() {
+function initEvents() {
+    $('.btn-toggle').click(function () {
         toggleSwitch(this);
 
         if ($('#btn-on').hasClass('active')) {
@@ -242,12 +254,12 @@ function initEvents () {
         }
     });
 
-    $('#btn-remove').click(function() {
-        var size = $('.thumbnail').length;
+    $('#btn-remove').click(function () {
+        const size = $('.thumbnail').length;
 
         if (size > 0) {
-            var label = size == 1 ? 'label' : 'labels';
-            bootbox.confirm('Are you sure to remove {0} {1}?'.format(size, label), function(result) {
+            const label = size === 1 ? 'label' : 'labels';
+            bootbox.confirm('Are you sure to remove {0} {1}?'.format(size, label), function (result) {
                 if (result) {
                     $('.thumbnail').remove();
                     notify('{0} {1} successfully removed.'.format(size, label), 'trash', 'info');
@@ -255,56 +267,64 @@ function initEvents () {
             });
         }
     });
+    $('#btn-save-label').click(function () {
+        const size = $('.thumbnail').length;
 
-    $('#btn-close').click(function() {
+        if (size > 0) {
+            const label = size === 1 ? 'label' : 'labels';
+
+        }
+    });
+
+    $('#btn-close').click(function () {
         global.localStorage.setItem('isOn', $('#btn-on').hasClass('active'));
         window.close();
         stopTcpServer();
     });
 
-    $('#density li > a').click(function() {
-        var btn = $('#btn-density');
+    $('#density li > a').click(function () {
+        const btn = $('#btn-density');
         btn.attr('aria-valuenow', $(this).parent().attr('aria-valuenow'));
         btn.html($(this).text() + ' <span class="caret"></span>');
     });
 
-    $('#unit li > a').click(function() {
-        var btn = $('#btn-unit');
+    $('#unit li > a').click(function () {
+        const btn = $('#btn-unit');
         btn.attr('aria-valuenow', $(this).parent().attr('aria-valuenow'));
         btn.html($(this).text() + ' <span class="caret"></span>');
     });
 
-    $('#filetype li > a').click(function() {
-        var btn = $('#btn-filetype');
+    $('#filetype li > a').click(function () {
+        const btn = $('#btn-filetype');
         btn.attr('aria-valuenow', $(this).parent().attr('aria-valuenow'));
         btn.html($(this).text() + ' <span class="caret"></span>');
     });
 
-    $('#txt-path').keydown(function(e) {
+    $('#txt-path').keydown(function (e) {
         e.preventDefault();
     });
 
-    $('#configsForm').submit(function(e) {
+    $('#configsForm').submit(function (e) {
         e.preventDefault();
         saveConfigs();
 
     });
 
-    $('#settings-window').on('shown.bs.modal', function() {
+    $('#settings-window').on('shown.bs.modal', function () {
         if ($('#btn-on').hasClass('active')) {
             toggleSwitch('.btn-toggle');
             stopTcpServer();
         }
     });
 
-    $('#ckb-saveLabels').change(function() {
-        var disabled = !$(this).is(':checked');
+    $('#ckb-saveLabels').change(function () {
+        const disabled = !$(this).is(':checked');
         $('#btn-filetype').prop('disabled', disabled);
         $('#btn-path').prop('disabled', disabled);
         $('#txt-path').prop('disabled', disabled);
     });
 
-    $('#btn-path').click(function() {
+    $('#btn-path').click(function (e) {
         // chrome.fileSystem.chooseEntry({
         //     type: 'openDirectory',
         // }, function (entry) {
@@ -316,13 +336,20 @@ function initEvents () {
         //         retainEntry = chrome.fileSystem.retainEntry(entry);
         //     }
         // });
-    });
+        e.preventDefault()
 
+        ipcRenderer.send('select-dirs')
+        ipcRenderer.on('selected-dirs', (event, response) => {
+            if (response && typeof Array.isArray(response)) {
+                document.getElementById('txt-path').value = response[0]
+            }
+        })
+    });
 }
 
 // Toggle on/off switch
 // @param {Dom Object} btn Button group to toggle
-function toggleSwitch (btn) {
+function toggleSwitch(btn) {
     $(btn).find('.btn').toggleClass('active');
 
     if ($(btn).find('.btn-primary').length > 0) {
@@ -333,8 +360,8 @@ function toggleSwitch (btn) {
 }
 
 // Svae configs in local storage
-function saveConfigs () {
-    for (var key in configs) {
+function saveConfigs() {
+    for (let key in configs) {
         if (key == 'density') {
             configs[key] = $('#btn-density').attr('aria-valuenow');
         } else if (key == 'unit') {
@@ -346,14 +373,14 @@ function saveConfigs () {
         } else if (key == 'keepTcpSocket') {
             configs[key] = $('#ckb-keep-tcp-socket').is(':checked');
         } else if (key == 'path') {
-            configs[key] = retainEntry;
+            configs[key] = document.getElementById('txt-path').value;
         } else {
             configs[key] = $('#' + key).val();
         }
     }
 
-    Object.entries(configs).forEach(function([k,v]) {
-        global.localStorage.setItem(k,v);
+    Object.entries(configs).forEach(function ([k, v]) {
+        global.localStorage.setItem(k, v);
     });
 
     $('#settings-window').modal('hide');
@@ -361,53 +388,45 @@ function saveConfigs () {
 }
 
 // Init/load configs from local storage
-function initConfigs () {
-    for (var key in configs) {
-        if (key == 'density') {
+function initConfigs() {
+    console.log('init', configs)
+    for (let key in configs) {
+        if (key === 'density') {
             initDropDown('density', configs[key]);
-        } else if (key == 'unit') {
+        } else if (key === 'unit') {
             initDropDown('unit', configs[key]);
-        } else if (key == 'filetype') {
+        } else if (key === 'filetype') {
             initDropDown('filetype', configs[key]);
-        } else if (key == 'saveLabels') {
+        } else if (key === 'saveLabels') {
             $('#ckb-saveLabels').prop('checked', configs[key]);
-            var disabled = !configs[key];
+            const disabled = !configs[key];
             $('#btn-filetype').prop('disabled', disabled);
             $('#btn-path').prop('disabled', disabled);
             $('#txt-path').prop('disabled', disabled);
-        } else if (key == 'isOn' && configs[key]) {
+        } else if (key === 'isOn' && configs[key]) {
             toggleSwitch('.btn-toggle');
             startTcpServer();
-        } else if (key == 'keepTcpSocket') {
+        } else if (key === 'keepTcpSocket') {
             $('#ckb-keep-tcp-socket').prop('checked', configs[key]);
-        } else if (key == 'path' && configs[key]) {
-            retainEntry = configs[key];
-            // chrome.fileSystem.restoreEntry(configs[key], function (entry) {
-            //     pathEntry = entry;
-            //     initPath(entry);
-            // });
+        } else if (key === 'path' && configs[key]) {
+            document.getElementById('txt-path').value = configs[key]
         } else {
             $('#' + key).val(configs[key]);
         }
     }
 }
 
-function initPath (entry) {
-    // chrome.fileSystem.getDisplayPath(entry, function (path) {
-    //     $('#txt-path').val(path);
-    // });
-}
 
-function initDropDown (btnId, value) {
-    var btn = $('#btn-' + btnId);
-    var text = $('#' + btnId).find('li[aria-valuenow=' + value + '] > a').html();
+function initDropDown(btnId, value) {
+    const btn = $('#btn-' + btnId);
+    const text = $('#' + btnId).find('li[aria-valuenow=' + value + '] > a').html();
     btn.attr('aria-valuenow', value);
     btn.html(text + ' <span class="caret"></span>');
 }
 
 // Prototype for string.format method
-String.prototype.format = function() {
-    var s = this,
+String.prototype.format = function () {
+    let s = this,
         i = arguments.length;
 
     while (i--) {

ZplPrinter/main.html

@@ -188,11 +188,19 @@
                                         <td>
                                             <div class="input-group" style="padding-right: 10px;">
                                                 <span class="input-group-addon">Path</span>
-                                                <input id="txt-path" name="path" class="form-control" type="text" required disabled>
+                                                <input id="txt-path" name="path" class="form-control" type="text" disabled required>
                                             </div>
                                         </td>
                                         <td>
-                                            <button id="btn-path" type="button" class="btn btn-default" disabled>Choose</button>
+                                            <button id="btn-path" type="button" class="btn btn-default">Choose</button>
+                                        </td>
+                                    </tr>
+                                </table>
+                                <br />
+                                <table>
+                                    <tr>
+                                        <td>
+
                                         </td>
                                     </tr>
                                 </table>

forge.config.js

@@ -0,0 +1,75 @@
+const path = require('path');
+
+const packageJson = require('./package.json');
+
+const {version} = packageJson;
+const iconDir = path.resolve(__dirname, 'icons');
+
+const config = {
+    packagerConfig: {
+        name: "Zpl Printer",
+        executableName: 'zpl-printer',
+        icon: path.resolve(__dirname, 'icons', 'icon'),
+    },
+    makers: [
+        {
+            name: "@rabbitholesyndrome/electron-forge-maker-portable",
+            platforms: ['win32'],
+            config: {
+                portable: {
+                    artifactName: "${name}-portable-${version}.exe"
+                }
+            }
+        },
+        {
+            name: "@electron-forge/maker-squirrel",
+            platforms: ['win32'],
+            config: (arch) => ({
+                name: "zpl-printer",
+                exe: 'zpl-printer.exe',
+                iconUrl: "https://github.com/MrL0co/ZplPrinter/blob/electron/icons/icon.ico?raw=true",
+                noMsi: true,
+                setupExe: `zpl-printer-${version}-win32-${arch}-setup.exe`,
+                setupIcon: path.resolve(iconDir, "icon.ico"),
+            })
+        },
+        {
+            name: "@electron-forge/maker-zip",
+            platforms: [
+                "darwin",
+                "linux"
+            ]
+        },
+        {
+            name: "@electron-forge/maker-deb",
+            config: {
+                icon: {
+                    scalable: path.resolve(iconDir, 'icon.svg')
+                }
+            }
+        },
+        {
+            name: "@electron-forge/maker-rpm",
+            config: {
+                icon: {
+                    scalable: path.resolve(iconDir, 'icon.svg')
+                }
+            }
+        }
+    ],
+    publishers: [
+        {
+            name: "@electron-forge/publisher-github",
+            config: {
+                repository: {
+                    owner: "MrL0co",
+                    name: "ZplPrinter"
+                },
+                prerelease: false,
+                draft: true
+            }
+        }
+    ]
+};
+
+module.exports = config;

icons/icon.svg

@@ -0,0 +1,16 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        style="transform: matrix(1.69, 0, 0, 1.69, -4, 102); transform-origin: 50% 50%; cursor: move; max-height: 288.34px; transition: none 0s ease 0s;"
+        width="1024" height="1024" viewBox="0 0 1280 1280">
+    <g fill="rgb(0,0,0)"
+       style="transform: none; transform-origin: 50% 50%;"
+    >
+        <g style="transform: none;">
+            <path
+                    d="M320 1040 l0 -200 320 0 320 0 0 200 0 200 -320 0 -320 0 0 -200z m560 80 l0 -40 -240 0 -240 0 0 40 0 40 240 0 240 0 0 -40z m0 -160 l0 -40 -240 0 -240 0 0 40 0 40 240 0 240 0 0 -40z"></path>
+            <path
+                    d="M135 991 c-45 -11 -82 -38 -107 -80 -22 -35 -23 -44 -23 -271 0 -228 1 -236 23 -272 32 -51 78 -77 151 -84 l61 -7 0 122 0 121 400 0 400 0 0 -121 0 -122 61 7 c73 7 119 33 151 84 22 36 23 44 23 272 0 228 -1 236 -23 272 -32 51 -78 77 -151 84 l-61 7 0 -122 0 -121 -400 0 -400 0 0 120 0 120 -37 -1 c-21 -1 -52 -4 -68 -8z"></path>
+            <path d="M320 240 l0 -200 320 0 320 0 0 200 0 200 -320 0 -320 0 0 -200z"></path>
+        </g>
+    </g>
+</svg>

main.js

@@ -1,22 +1,38 @@
-const { app, BrowserWindow } = require('electron')
+require('update-electron-app')()
+
+const { app, BrowserWindow, dialog, ipcMain } = require('electron')
+const path = require("path")
 
 if (require('electron-squirrel-startup')) return app.quit();
-
+let win
 const createWindow = () => {
-    const win = new BrowserWindow({
+    win = new BrowserWindow({
         width: 535,
         height: 768,
         frame: false,
-        resizable: false,
+        resizable: true,
+        icon: __dirname + '/icons/512x512.png',
         webPreferences: {
             nodeIntegration: true,
             contextIsolation: false,
+            enableRemoteModule: true,
         }
     })
 
     win.loadFile('ZplPrinter/main.html')
+    if(process.env.NODE_ENV === "development"){
+        win.webContents.openDevTools()
+    }
 }
 
+ipcMain.on('select-dirs', async (event, arg) => {
+    const result = await dialog.showOpenDialog(win, {
+        properties: ['openDirectory']
+    })
+    event.sender.send('selected-dirs', result.filePaths)
+
+})
+
 app.whenReady().then(() => {
     createWindow()
 })

package.json

@@ -1,69 +1,42 @@
 {
-  "name": "zplprinter",
-  "version": "1.0.0",
+  "name": "zpl-printer",
+  "productName": "Zpl Printer",
+  "version": "2.1.0",
   "description": "Printer emulator for zpl rendering engine.",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "electron-forge start",
+    "start": "NODE_ENV=development electron-forge start",
     "package": "electron-forge package",
-    "make": "electron-forge make"
+    "make": "electron-forge make",
+    "publish": "electron-forge publish"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MrL0co/ZplPrinter.git"
   },
-  "author": "MrL0co <beheer.loco@gmail.com>",
+  "author": "Gowthaman Basuvaraj <techie2go@gmail.com>",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/MrL0co/ZplPrinter/issues"
   },
   "homepage": "https://github.com/MrL0co/ZplPrinter#readme",
   "devDependencies": {
-    "@electron-forge/cli": "^6.0.0-beta.67",
-    "@electron-forge/maker-deb": "^6.0.0-beta.67",
-    "@electron-forge/maker-rpm": "^6.0.0-beta.67",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.67",
-    "@electron-forge/maker-zip": "^6.0.0-beta.67",
+    "@electron-forge/cli": "^7.1.0",
+    "@electron-forge/maker-deb": "^7.1.0",
+    "@electron-forge/maker-rpm": "^7.1.0",
+    "@electron-forge/maker-squirrel": "^7.1.0",
+    "@electron-forge/maker-zip": "^7.1.0",
+    "@electron-forge/publisher-github": "^7.1.0",
     "@rabbitholesyndrome/electron-forge-maker-portable": "^0.1.1",
-    "electron": "^21.1.0"
+    "electron": "22.3.23"
   },
   "dependencies": {
-    "bootstrap": "3.3.1",
+    "bootstrap": "3.4.1",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^8.1.0",
-    "jquery": "^3.6.1"
-  },
-  "config": {
-    "forge": {
-      "packagerConfig": {},
-      "makers": [
-        {
-          "name": "@rabbitholesyndrome/electron-forge-maker-portable",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "name": "zplprinter"
-          }
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin",
-            "linux"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
-        }
-      ]
-    }
+    "jquery": "^3.6.1",
+    "pdf-to-printer": "^5.6.0",
+    "update-electron-app": "^2.0.1"
   }
 }