Node.js
node-red

Node-REDの画面カスタマイズ方法

More than 3 years have passed since last update.

Node-REDの画面をカスタマイズする方法です。


Node-REDを別のExpressアプリケーションに組込む

Node-REDは別のExpressアプリケーションに埋め込むことが可能です。

やり方は別のExpressアプリケーションのpackage.jsondependenciesnode-redを追加して以下のようにExpressアプリケーションを動かします。これをapp.jsとします。


app.js

var http = require('http');

var express = require("express");
var RED = require("node-red");

// Create an Express app
var app = express();

// Add a simple route for static content served from 'public'
app.use("/",express.static("public"));

// Create a server
var server = http.createServer(app);

// Create the settings object - see default settings.js file for other options
var settings = {
httpAdminRoot:"/red",
httpNodeRoot: "/api",
functionGlobalContext: { } // enables global context
};

// Initialise the runtime with a server and settings
RED.init(server,settings);

// Serve the editor UI from /red
app.use(settings.httpAdminRoot,RED.httpAdmin);

// Serve the http nodes UI from /api
app.use(settings.httpNodeRoot,RED.httpNode);

server.listen(8000);

// Start the runtime
RED.start();


ちなみにsetting.jsで設定していた内容はRED.initで渡さなければいけません。したがって上記のようにベタに書くか以下のようにsetting.jsmodule.exportsしてrequireします。


setting.js

module.exports = {

httpAdminRoot:"/red",
httpNodeRoot: "/api",
functionGlobalContext: { } // enables global context
};


app.js

var http = require('http');

var express = require("express");
var settings = require("./settings"); // <- require
var RED = require("node-red");

// Create an Express app
var app = express();

// Add a simple route for static content served from 'public'
app.use("/",express.static("public"));

// Create a server
var server = http.createServer(app);

// Initialise the runtime with a server and settings
RED.init(server,settings);

// Serve the editor UI from /red
app.use(settings.httpAdminRoot,RED.httpAdmin);

// Serve the http nodes UI from /api
app.use(settings.httpNodeRoot,RED.httpNode);

server.listen(8000);

// Start the runtime
RED.start();


あとはapp.use("/",express.static("public"))と指定している通りapp.js同階層のpublicディレクトリで/(ルート)へのアクセスで表示するHTMLやCSSを配置します。


index.html

<link rel="stylesheet" href="style.css" />

<p class="test">Node-REDを組込んだExpressアプリケーション</p>


style.css

.test { color: red; }


これでnode app.jsをしてExpressアプリケーションを起動すると/は以下が表示され/redはNode-REDのEditorが表示されます。

スクリーンショット 2015-12-09 16.34.00.png


Node-REDのEditor画面をカスタマイズする

試しにapp.use("/",express.static("public"))app.use("/red",express.static("public"))にしてみますと/Cannot GET /となって/redに上記で作成したHTMLが表示されます。

続いてpublic/index.htmlを削除してpublic/style.csspublic/red/style.min.cssに移動すると以下のようなEditorが表示されました。

スクリーンショット 2015-12-09 16.46.52.png

これでEditor画面のカスタマイズのやり方がわかりました。Expressアプリケーションで静的コンテンツの場所を指定するapp.use("/",express.static("public"))とNode-REDでEditor画面を指定するhttpAdminRootを同じ場所にすると、そこに配置したHTMLやCSS、javascriptなどでEditorを描写してくれます。

ということはpublicnode_modules/node-red/publicを丸っとコピーしてpublic/index.htmlにデフォルトのEditorのHTMLにして色々と修正してみると画面がカスタマイズできるはずです。

このようにしてenebular-agentは作られています。参考にしてみてください。