diff --git a/package-lock.json b/package-lock.json
index 0d328d4c72d6fc5596a0aad2ecb0165af8d38024..987f269b7b6aaf27fa70d070a8892c440a3caa51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7489,6 +7489,11 @@
"slash": "^3.0.0"
}
},
+ "google-closure-library": {
+ "version": "20220104.0.0",
+ "resolved": "https://registry.npmjs.org/google-closure-library/-/google-closure-library-20220104.0.0.tgz",
+ "integrity": "sha512-gHrIxIKcnn9pR/8sVwCLH6C4urmAekSYZKYzTawKG72HQsRnadXOCuRTA+kf6nagDCbsu6HzhSWA2rMBb2L1Aw=="
+ },
"graceful-fs": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -11569,6 +11574,11 @@
"path-key": "^2.0.0"
}
},
+ "nrp-jsproto": {
+ "version": "1.1.1-alpha.10",
+ "resolved": "https://registry.npmjs.org/nrp-jsproto/-/nrp-jsproto-1.1.1-alpha.10.tgz",
+ "integrity": "sha512-KFe2AQuhtx4wD76PIzxlhKFXtWYeUtyqSkONA8nYvIV9HfG67q09Qcnzhl745jZHZHZMC03xj9QVEr0x5so8Cg=="
+ },
"nth-check": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
diff --git a/package.json b/package.json
index 1790b6fd137da5084d1bd90ea5c347dceafa6961..02d0c98a3056a4a4308cc107b6715ce6dee9f5cb 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,11 @@
"@material-ui/lab": "4.0.0-alpha.57",
"bootstrap": "4.5",
"flexlayout-react": "0.5.5",
+ "google-closure-library": "20220104.0.0",
"jquery": "3.6.0",
"jszip": "3.2.0",
"mqtt": "4.3.5",
+ "nrp-jsproto": "1.1.1-alpha.10",
"react": "^17.0.1",
"react-bootstrap": "1.4.0",
"react-dom": "^17.0.1",
diff --git a/public/index.html b/public/index.html
index 7f0865ce4253fcf744735fc958f2c41579992d56..0224056df00f35dc103cad4c52b77d11ac89b311 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,9 @@
<title>Neurorobotics Platform</title>
</head>
<body>
+ <script src="./google-closure-library/closure/goog/base.js"></script>
<script src="https://iam.ebrains.eu/auth/js/keycloak.js"></script>
+
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
diff --git a/src/App.js b/src/App.js
index 3bd90d7e416050cf119cc00428ce33543c4c08da..dad8a107abcd43ff12c53dfb175906423ba6e7a2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,12 +7,12 @@ import ErrorDialog from './components/dialog/error-dialog.js';
import ExperimentOverview from './components/experiment-overview/experiment-overview';
import SimulationView from './components/simulation-view/simulation-view';
import NotificationDialog from './components/dialog/notification-dialog.js';
-import MqttClientService from './services/nrp-core/mqtt-client-service';
+//import MqttClientService from './services/nrp-core/mqtt-client-service';
class App extends React.Component {
componentDidMount() {
- MqttClientService.instance.connect('ws://' + window.location.hostname + ':1884');
+ //MqttClientService.instance.connect('ws://' + window.location.hostname + ':1884');
}
render() {
diff --git a/src/components/nrp-core-dashboard/nrp-core-dashboard.js b/src/components/nrp-core-dashboard/nrp-core-dashboard.js
new file mode 100644
index 0000000000000000000000000000000000000000..108037b7485fa5b3bc17156c94c2b2e91545be55
--- /dev/null
+++ b/src/components/nrp-core-dashboard/nrp-core-dashboard.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import MqttClientService from '../../services/nrp-core/mqtt-client-service';
+
+export default class NrpCoreDashboard extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.mqttBrokerUrl = 'ws://' + window.location.hostname + ':1884';
+ }
+
+ componentDidMount() {
+ MqttClientService.instance.on(MqttClientService.EVENTS.CONNECTED, this.onMqttClientConnected);
+ MqttClientService.instance.connect(this.mqttBrokerUrl);
+ }
+
+ onMqttClientConnected() {
+ this.client.subscribe('#', (err) => {
+ if (err) {
+ console.error(err);
+ }
+ });
+ }
+
+ render() {
+ return (
+ <div>
+ {this.mqttBrokerUrl}
+ </div>
+ );
+ }
+}
+
+NrpCoreDashboard.CONSTANTS = Object.freeze({
+ TOOL_CONFIG: {
+ singleton: true,
+ flexlayoutNode: {
+ 'type': 'tab',
+ 'name': 'NRP-Core Dashboard',
+ 'component': 'nrp-core-dashboard'
+ },
+ flexlayoutFactoryCb: () => {
+ return <NrpCoreDashboard />;
+ },
+ getIcon: () => {
+ return <div>
+ <span>NRP-Core Dashboard</span>
+ </div>;
+ }
+ }
+});
diff --git a/src/components/simulation-view/simulation-tools-service.js b/src/components/simulation-view/simulation-tools-service.js
index 243460adf3559319af97de995119f9918fd796da..1d16e533f7f3722ea40880c881adce782605bee0 100644
--- a/src/components/simulation-view/simulation-tools-service.js
+++ b/src/components/simulation-view/simulation-tools-service.js
@@ -1,3 +1,6 @@
+import NrpCoreDashboard from '../nrp-core-dashboard/nrp-core-dashboard';
+
+
let _instance = null;
const SINGLETON_ENFORCER = Symbol();
@@ -14,6 +17,7 @@ class SimulationToolsService {
for (const toolEntry in SimulationToolsService.TOOLS) {
this.registerToolConfig(SimulationToolsService.TOOLS[toolEntry]);
}
+ this.registerToolConfig(NrpCoreDashboard.CONSTANTS.TOOL_CONFIG);
}
static get instance() {
@@ -25,6 +29,8 @@ class SimulationToolsService {
}
registerToolConfig(toolConfig) {
+ console.info('registerToolConfig');
+ console.info(toolConfig);
let id = toolConfig.flexlayoutNode.component;
if (this.tools.has(id)) {
console.warn('SimulationToolsService.registerToolConfig() - tool with ID ' + id + ' already exists');
diff --git a/src/services/nrp-core/mqtt-client-service.js b/src/services/nrp-core/mqtt-client-service.js
index ca824d4e406841a5f20eec25677e67a03304b769..06ac19ee02c710f4d546243a599313dc8621870d 100644
--- a/src/services/nrp-core/mqtt-client-service.js
+++ b/src/services/nrp-core/mqtt-client-service.js
@@ -1,4 +1,7 @@
import mqtt from 'mqtt';
+import { EventEmitter } from 'events';
+
+import 'nrp-jsproto/nrp-jsproto';
let _instance = null;
const SINGLETON_ENFORCER = Symbol();
@@ -6,11 +9,14 @@ const SINGLETON_ENFORCER = Symbol();
/**
* Service handling state and info of running simulations.
*/
-export default class MqttClientService {
+export default class MqttClientService extends EventEmitter {
constructor(enforcer) {
+ super();
if (enforcer !== SINGLETON_ENFORCER) {
throw new Error('Use ' + this.constructor.name + '.instance');
}
+
+ //console.info(proto);
}
static get instance() {
@@ -30,12 +36,6 @@ export default class MqttClientService {
});
this.client.on('error', this.onError);
this.client.on('message', this.onMessage);
-
- this.client.subscribe('#', (err) => {
- if (err) {
- console.error(err);
- }
- });
}
onError(error) {
@@ -43,9 +43,15 @@ export default class MqttClientService {
}
onMessage(topic, payload, packet) {
- console.info('MQTT message');
- console.info(topic);
- console.info(payload);
- console.info(packet);
+ console.info('MQTT message: [topic, payload, packet]');
+ console.info([topic, payload, packet]);
+
+ /*try {
+ let dump =
+ }*/
}
-}
\ No newline at end of file
+}
+
+MqttClientService.EVENTS = Object.freeze({
+ CONNECTED: 'CONNECTED'
+});
\ No newline at end of file