fyears · hokiedsp · Sep 25, 2019 · Sep 25, 2019 · Sep 25, 2019 · Sep 25, 2019
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 api.spec
-.venv/
+venv/
 node_modules/
 build/
 dist/
-pycalcdist/
+package-lock.json
+pretty-calculator*/
+.vscode/
diff --git a/index.html b/index.html
@@ -3,20 +3,19 @@
   <head>
     <meta charset="UTF-8">
     <title>Hello Calculator!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
   </head>
   <body>
     <h1>Hello Calculator!</h1>
-    <p> We are using Node.js <script>document.write(process.versions.node)</script>,
-    Chromium <script>document.write(process.versions.chrome)</script>,
-    and Electron <script>document.write(process.versions.electron)</script>.</p>
+    We are using Node.js <span id="node-version"></span>,
+    Chromium <span id="chrome-version"></span>,
+    and Electron <span id="electron-version"></span>.
     <p>Input something like <code>1 + 1</code>.</p>
     <p>This calculator supports <code>+-*/^()</code>, 
     whitespaces, and integers and floating numbers.</p>
     <input id="formula" value="1 + 2.0 * 3.1 / (4 ^ 5.6)"></input>
     <div id="result"></div>
   </body>
 
-  <script>
-    require('./renderer.js')
-  </script>
+  <script src="./renderer.js"></script>
 </html>
diff --git a/main.js b/main.js
@@ -8,7 +8,7 @@ const path = require('path')
  * py process
  *************************************************************/
 
-const PY_DIST_FOLDER = 'pycalcdist'
+const PY_DIST_FOLDER = 'dist'
 const PY_FOLDER = 'pycalc'
 const PY_MODULE = 'api' // without .py suffix
 
@@ -68,7 +68,10 @@ app.on('will-quit', exitPyProc)
 let mainWindow = null
 
 const createWindow = () => {
-  mainWindow = new BrowserWindow({width: 800, height: 600})
+  mainWindow = new BrowserWindow({width: 800, height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }})
   mainWindow.loadURL(require('url').format({
     pathname: path.join(__dirname, 'index.html'),
     protocol: 'file:',

diff --git a/package.json b/package.json
@@ -1,10 +1,12 @@
 {
   "name": "pretty-calculator",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A minimal Electron and Python - based calculator ",
   "main": "main.js",
   "scripts": {
-    "start": "electron ."
+    "start": "electron .",
+    "electron-rebuild": "electron-rebuild",
+    "electron-package": "electron-packager . --ignore=^/\\.vscode --ignore=^/old-post-backup --ignore=^/pycalc --ignore=^/venv --ignore=package_win32.bat --ignore=package-lock.json"
   },
   "repository": "https://github.com/fyears/electron-python-example",
   "keywords": [
@@ -13,13 +15,15 @@
     "zerorpc",
     "demo"
   ],
-  "author": "fyears",
+  "author": "fyears/hokiedsp",
   "license": "MIT",
   "dependencies": {
+    "zeromq": "^5.1.0",
     "zerorpc": "git+https://github.com/fyears/zerorpc-node.git"
   },
   "devDependencies": {
-    "electron": "^1.7.6",
-    "electron-packager": "^9.0.1"
+    "electron": "6.0.10",
+    "electron-packager": "^14.0.6",
+    "electron-rebuild": "^1.8.6"
   }
-}
+}
diff --git a/package_win32.bat b/package_win32.bat
@@ -0,0 +1,25 @@
+REM if exist venv rmdir /s /q venv
+if exist build rmdir /s /q build
+if exist dist rmdir /s /q dist
+if exist pretty-calculator-win32-x64 rmdir /q /s pretty-calculator-win32-x64
+
+REM Python - create new virtual environment 
+REM python -m venv .\venv
+
+REM Python - activate the new virtual environment
+REM venv/Scripts/activate
+
+REM Python - make sure all the required packages are installed
+pip install -r pycalc\requirements.txt
+
+REM Python build - just includes .pyc not source code ok
+pyinstaller pycalc\api.py
+
+REM remove temporary build directory
+if exist build rmdir /s /q build
+
+REM Run - test final application
+npm run electron-package 
+echo The exe is built and lives in the pretty-calculator-win32-x64\pretty-calculator.exe
+
+echo Next run inno script, result typically is Output/setup.exe
diff --git a/preload.js b/preload.js
@@ -0,0 +1,24 @@
+// All of the Node.js APIs are available in the preload process.
+// It has the same sandbox as a Chrome extension.
+
+const zerorpc = require('zerorpc')
+
+function init() {
+  // add global variables to your web page
+  // window.isElectron = true
+  window.zerorpcClient = new zerorpc.Client()
+}
+
+init();
+
+window.addEventListener('DOMContentLoaded', () => {
+  const replaceText = (selector, text) => {
+    const element = document.getElementById(selector)
+    if (element) element.innerText = text
+  } 
+
+  for (const type of ['chrome', 'node', 'electron']) {
+    replaceText(`${type}-version`, process.versions[type])
+  }
+
+})
diff --git a/renderer.js b/renderer.js
@@ -1,9 +1,6 @@
-const zerorpc = require("zerorpc")
-let client = new zerorpc.Client()
+window.zerorpcClient.connect("tcp://127.0.0.1:4242")
 
-client.connect("tcp://127.0.0.1:4242")
-
-client.invoke("echo", "server ready", (error, res) => {
+window.zerorpcClient.invoke("echo", "server ready", (error, res) => {
   if(error || res !== 'server ready') {
     console.error(error)
   } else {
@@ -15,7 +12,7 @@ let formula = document.querySelector('#formula')
 let result = document.querySelector('#result')
 
 formula.addEventListener('input', () => {
-  client.invoke("calc", formula.value, (error, res) => {
+  window.zerorpcClient.invoke("calc", formula.value, (error, res) => {
     if(error) {
       console.error(error)
     } else {