diff --git a/README.md b/README.md index 0b28e82..3ed27f5 100644 --- a/README.md +++ b/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) diff --git a/appbkg.png b/appbkg.png new file mode 100644 index 0000000..6063be1 Binary files /dev/null and b/appbkg.png differ diff --git a/appdmg.json b/appdmg.json new file mode 100644 index 0000000..2c123c5 --- /dev/null +++ b/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" } + ] +} diff --git a/flows.json b/flows.json index 82a8cfd..be465cb 100755 --- a/flows.json +++ b/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":"

Welcome to Node-RED

\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 Admin.","storeOutMessages":false,"fwdInMessages":false,"x":81,"y":45,"wires":[[]]}] \ No newline at end of file +[{"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":"

Welcome to Node-RED

\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 Admin.","storeOutMessages":false,"fwdInMessages":false,"x":80,"y":40,"wires":[[]]}] \ No newline at end of file diff --git a/main.js b/main.js index 03d1a21..304dd0e 100755 --- a/main.js +++ b/main.js @@ -1,3 +1,4 @@ + 'use strict'; const electron = require('electron'); @@ -43,40 +44,74 @@ 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; function createWindow () { - // Create the browser window. - mainWindow = new BrowserWindow({ - autoHideMenuBar: true, - webPreferences: { - nodeIntegration: false - }, - width: 1024, - height: 768, - icon: __dirname + "/nodered.png" - }); + // Create the browser window. + mainWindow = new BrowserWindow({ + autoHideMenuBar: true, + webPreferences: { + nodeIntegration: false + }, + title: "Node-RED", + width: 1024, + height: 768, + icon: __dirname + "/nodered.png" + }); + mainWindow.loadURL("http://localhost:8000/ui"); - 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) { - setTimeout(webContents.reload, 200); - } - }); + var webContents = mainWindow.webContents; + webContents.on('did-get-response-details', function(event, status, newURL, originalURL, httpResponseCode) { + if ((httpResponseCode == 404) && (newURL == "http://localhost:8000/ui")) { + setTimeout(webContents.reload, 200); + } + Menu.setApplicationMenu(Menu.buildFromTemplate(template)); + }); - // Open the DevTools. - //mainWindow.webContents.openDevTools(); + // Open the DevTools. + //mainWindow.webContents.openDevTools(); - // Emitted when the window is closed. - mainWindow.on('closed', function() { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null; - }); + 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 + // in an array if your app supports multi windows, this is the time + // when you should delete the corresponding element. + mainWindow = null; + }); } // This method will be called when Electron has finished @@ -85,40 +120,17 @@ app.on('ready', createWindow); // Quit when all windows are closed. app.on('window-all-closed', function () { - // On OS X it is common for applications and their menu bar - // to stay active until the user quits explicitly with Cmd + Q - if (process.platform !== 'darwin') { - app.quit(); - } + // On OS X it is common for applications and their menu bar + // to stay active until the user quits explicitly with Cmd + Q + if (process.platform !== 'darwin') { + app.quit(); + } }); app.on('activate', function () { - // On OS X it's common to re-create a window in the app when the - // dock icon is clicked and there are no other windows open. - 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)); - + // On OS X it's common to re-create a window in the app when the + // dock icon is clicked and there are no other windows open. + if (mainWindow === null) { + createWindow(); + } }); diff --git a/package.json b/package.json index 0273aa2..12ccba6 100644 --- a/package.json +++ b/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" } }