Add more packaging goodness

README.md

@@ -1,6 +1,6 @@
 # electron-node-red
 
-This is an Electron template to embed Node-RED with a UI generated by node-red-contrib-ui.
+This is an Electron template to embed Node-RED with a Dashboard generated by node-red-dashboard.
 
 You can base off this model and update the package.json file to include your own required dependencies.
 
@@ -36,4 +36,11 @@ electron-packager electron-node-red Node-RED --icon=nodered.icns --platform=linu
 
 Learn more about Electron and its API in the [documentation](http://electron.atom.io/docs/latest).
 
+
+### To package as a dmg
+
+look at `https://github.com/LinusU/node-appdmg`
+
+    appdmg appdmg.json ~/Desktop/NodeRED.dmg
+
 #### License [CC0 (Public Domain)](LICENSE.md)

appdmg.json

@@ -0,0 +1,10 @@
+{
+  "title": "Node-RED installer",
+  "icon": "nodered.icns",
+  "background": "appbkg.png",
+  "icon-size": 80,
+  "contents": [
+    { "x": 448, "y": 344, "type": "link", "path": "/Applications" },
+    { "x": 192, "y": 344, "type": "file", "path": "Node-RED-darwin-x64/Node-RED.app" }
+  ]
+}

flows.json

@@ -1 +1 @@
-[{"type":"tab","id":"41f61d2.fbe09e4","label":"Flow 1"},{"id":"52a903f3.ad56fc","type":"ui_tab","z":"41f61d2.fbe09e4","name":"Home","icon":"dashboard","order":"1"},{"id":"d3a0fd6d.2c5f","type":"ui_slider","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","name":"Slider","topic":"","group":"","order":"3","min":0,"max":10,"x":147.5,"y":87,"wires":[["42ddca5b.bd2234"]]},{"id":"42ddca5b.bd2234","type":"ui_gauge","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","name":"Gauge","group":"","order":"2","format":"{{value}}","min":0,"max":10,"x":300.5,"y":87,"wires":[]},{"id":"852d9c04.7ad26","type":"ui_link","z":"41f61d2.fbe09e4","name":"Admin","link":"http://localhost:8000/admin","icon":"open_in_browser","order":1,"x":72.5,"y":273,"wires":[]},{"id":"fce4a072.031b6","type":"ui_button","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","name":"Button","payload":"Hello !","topic":"","group":"","order":"4","x":124.5,"y":145,"wires":[["a09bb056.68216"]]},{"id":"a09bb056.68216","type":"ui_toast","z":"41f61d2.fbe09e4","name":"","x":328,"y":144,"wires":[]},{"id":"189cf871.681118","type":"ui_template","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","name":"Welcome","group":"Introduction","order":1,"format":"<h3>Welcome to Node-RED</h3>\nOn the right you will see some simple widgets to play with.\nTo get started making something a bit more useful click the menu icon at the top-left, and select <b>Admin</b>.","storeOutMessages":false,"fwdInMessages":false,"x":81,"y":45,"wires":[[]]}]
+[{"type":"tab","id":"41f61d2.fbe09e4","label":"Flow 1"},{"id":"52a903f3.ad56fc","type":"ui_tab","z":"41f61d2.fbe09e4","name":"Home","icon":"dashboard","order":"1"},{"id":"30e652f.d9de3ae","type":"ui_group","z":"41f61d2.fbe09e4","order":"2","name":"Widgets","width":"6"},{"id":"a8ecb9.c60f4348","type":"ui_group","z":"41f61d2.fbe09e4","order":"1","name":"Introduction","width":"6"},{"id":"d3a0fd6d.2c5f","type":"ui_slider","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","group":"30e652f.d9de3ae","order":"3","width":"6","height":"1","name":"Slider","label":"Slider","topic":"","min":0,"max":10,"x":130,"y":100,"wires":[["42ddca5b.bd2234"]]},{"id":"42ddca5b.bd2234","type":"ui_gauge","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","group":"30e652f.d9de3ae","order":"2","width":"6","height":"4","name":"Gauge","title":"","label":"","format":"{{value}}","min":0,"max":10,"x":290,"y":100,"wires":[]},{"id":"852d9c04.7ad26","type":"ui_link","z":"41f61d2.fbe09e4","name":"Admin","link":"http://localhost:8000/admin","icon":"open_in_browser","target":"newtab","order":1,"x":69.5,"y":217,"wires":[]},{"id":"fce4a072.031b6","type":"ui_button","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","group":"30e652f.d9de3ae","order":"4","width":"6","height":"1","name":"Button","label":"Click Me","color":"green","icon":"","payload":"Hello !","topic":"","x":130,"y":160,"wires":[["a09bb056.68216"]]},{"id":"a09bb056.68216","type":"ui_toast","z":"41f61d2.fbe09e4","name":"","x":310,"y":160,"wires":[]},{"id":"189cf871.681118","type":"ui_template","z":"41f61d2.fbe09e4","tab":"52a903f3.ad56fc","group":"a8ecb9.c60f4348","name":"Welcome","order":1,"format":"<h3>Welcome to Node-RED</h3>\nOn the right you will see some simple widgets to play with.\nTo get started making something a bit more useful click the menu icon at the top-left, and select <b>Admin</b>.","storeOutMessages":false,"fwdInMessages":false,"x":80,"y":40,"wires":[[]]}]

main.js

@@ -1,3 +1,4 @@
+
 'use strict';
 
 const electron = require('electron');
@@ -43,6 +44,26 @@ server.listen(8000);
 // Start the runtime
 RED.start();
 
+// Create the Application's main menu
+var template = [{
+    label: "Application",
+    submenu: [
+        { label: "About Application", selector: "orderFrontStandardAboutPanel:" },
+        { type: "separator" },
+        { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }}
+    ]}, {
+    label: "Edit",
+    submenu: [
+        { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
+        { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
+        { type: "separator" },
+        { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
+        { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
+        { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
+        { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }
+    ]}
+];
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;
@@ -54,22 +75,36 @@ function createWindow () {
         webPreferences: {
             nodeIntegration: false
         },
+        title: "Node-RED",
         width: 1024,
         height: 768,
         icon: __dirname + "/nodered.png"
     });
-
     mainWindow.loadURL("http://localhost:8000/ui");
+
     var webContents = mainWindow.webContents;
     webContents.on('did-get-response-details', function(event, status, newURL, originalURL, httpResponseCode) {
-    if (httpResponseCode == 404) {
+        if ((httpResponseCode == 404) && (newURL == "http://localhost:8000/ui")) {
             setTimeout(webContents.reload, 200);
         }
+        Menu.setApplicationMenu(Menu.buildFromTemplate(template));
     });
 
     // Open the DevTools.
     //mainWindow.webContents.openDevTools();
 
+    mainWindow.webContents.on("new-window", function(e, url, frameName, disposition, options) {
+        // if a child window opens... modify any other options such as width/height, etc
+        // in this case make the child overlap the parent exactly...
+        var w = mainWindow.getBounds();
+        options.x = w.x;
+        options.y = w.y;
+        options.width = w.width;
+        options.height = w.height;
+        //re-use the same child name so all "2nd" windows use the same one.
+        //frameName = "child";
+    })
+
     // Emitted when the window is closed.
     mainWindow.on('closed', function() {
         // Dereference the window object, usually you would store windows
@@ -98,27 +133,4 @@ app.on('activate', function () {
     if (mainWindow === null) {
         createWindow();
     }
-
-  // Create the Application's main menu
-  var template = [{
-      label: "Application",
-      submenu: [
-          { label: "About Application", selector: "orderFrontStandardAboutPanel:" },
-          { type: "separator" },
-          { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }}
-      ]}, {
-      label: "Edit",
-      submenu: [
-          { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
-          { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
-          { type: "separator" },
-          { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
-          { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
-          { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
-          { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }
-      ]}
-  ];
-
-  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
-
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-node-red",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Electron Node-RED template",
   "main": "main.js",
   "scripts": {
@@ -12,14 +12,13 @@
   },
   "dependencies": {
     "node-red": "~0.13.4",
-    "node-red-contrib-ui": "^1.2.19",
+    "node-red-dashboard": "git+https://github.com/node-red/node-red-dashboard.git",
     "express": "^4.13.0"
   },
   "keywords": [
-    "Electron",
+    "electron",
     "quick",
     "start",
-    "tutorial",
     "node-red"
   ],
   "author": "Nathanaël Lécaudé",
@@ -29,6 +28,6 @@
   },
   "homepage": "https://github.com/natcl/electron-node-red#readme",
   "devDependencies": {
-    "electron-prebuilt": "^0.37.0"
+    "electron-prebuilt": "^0.37.8"
   }
 }