From 11c280623c5afc7f83ea60dad9dd0ca80ef8bb9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 3 Jul 2024 11:46:13 +0200 Subject: [PATCH 01/12] initial AJAN page for the blocksworld demo --- app/components/services/demo-service.js | 132 ++++++++++++++++++ app/router.js | 1 + app/routes/editor/services/demo.js | 23 +++ .../components/services/demo-service.css | 89 ++++++++++++ .../components/services/action-bar.hbs | 5 + .../components/services/demo-service.hbs | 36 +++++ .../components/services/test-service.hbs | 2 +- app/templates/editor/services/demo.hbs | 4 + 8 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 app/components/services/demo-service.js create mode 100644 app/routes/editor/services/demo.js create mode 100644 app/styles/components/services/demo-service.css create mode 100644 app/templates/components/services/demo-service.hbs create mode 100644 app/templates/editor/services/demo.hbs diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js new file mode 100644 index 00000000..fdd5252f --- /dev/null +++ b/app/components/services/demo-service.js @@ -0,0 +1,132 @@ +/* + * Created on Tue Nov 10 2020 + * + * The MIT License (MIT) + * Copyright (c) 2020 André Antakli (German Research Center for Artificial Intelligence, DFKI). + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of this software + * and associated documentation files (the "Software"), to deal in the Software without restriction, + * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all copies or substantial + * portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED + * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL + * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, + * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ +import Ember from "ember"; + +let that; +let $ = Ember.$; + +export default Ember.Component.extend({ + websockets: Ember.inject.service(), + wssConnection: false, + socketRef: null, + response: "", + wssMessage: {}, + + didInsertElement() { + this._super(...arguments); + that = this; + setTriplestoreField(); + this.set("wssMessage.body", "Here you can see the output of the TestService (testService.js) that it received via an HTTP/POST (Content-Type: text/turtle; Request-URI: http://localhost:4201/post) message."); + getResponseMessage(); + }, + + willDestroyElement() { + this._super(...arguments); + this.actions.disconnect(); + }, + + actions: { + connect() { + var socket = that.get('websockets').socketFor("ws://" + document.location.hostname + ":4201"); + socket.on('open', myOpenHandler, that); + socket.on('message', myMessageHandler, that); + socket.on('close', myCloseHandler, that); + that.set('socketRef', socket); + }, + + disconnect() { + const socket = that.get('socketRef'); + if (socket != null) { + socket.off('open', myOpenHandler); + socket.off('message', myMessageHandler); + socket.off('close', myCloseHandler); + that.set("wssConnection", false); + that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201"); + that.set('socketRef', null); + } + }, + + clean() { + that.set("wssMessage", ""); + }, + + setResponse(content) { + Promise.resolve(content) + .then(x => { + Promise.resolve(sendResponseMessage(content)) + .then(function () { + $("#send-message").trigger("showToast"); + that.set("messageError", ""); + }); + }) + .catch(function (error) { + that.set("messageError", uri); + }); + } + } +}) + +function myOpenHandler(event) { + console.log(`On open event has been called: ${event}`); + that.set("wssConnection", true); +} + +function myMessageHandler(event) { + console.log(`Message: ${event.data}`); + that.set("wssMessage", JSON.parse(event.data)); +} + +function myCloseHandler(event) { + console.log(`On close event has been called: ${event}`); + that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201"); + that.set("wssConnection", false); +} + +function setTriplestoreField() { + $(".store-url").text(localStorage.currentStore); +} + +function getResponseMessage() { + return $.ajax({ + url: "http://localhost:4201/getResponse", + type: "GET", + headers: { Accept: "text/plain" } + }).then(function (data) { + console.log(data); + that.set("response", data); + }).catch(function (error) { + alert("No TestServiceAction Service is running on http://" + document.location.hostname + ":4201"); + }); +} + +function sendResponseMessage(content) { + return $.ajax({ + url: "http://" + document.location.hostname + ":4201/response", + type: "POST", + contentType: "text/plain", + data: content, + }).then(function (data) { + $("#send-message").trigger("showToast"); + getResponseMessage(); + }).catch (function (error) { + console.log(error); + }); +} diff --git a/app/router.js b/app/router.js index ae15c67a..35903b14 100644 --- a/app/router.js +++ b/app/router.js @@ -40,6 +40,7 @@ Router.map(function() { this.route("actions", { path: "/" }); this.route("actions"); this.route("service"); + this.route("demo"); }); this.route("domain", function () { this.route("domain-view", { path: "/" }); diff --git a/app/routes/editor/services/demo.js b/app/routes/editor/services/demo.js new file mode 100644 index 00000000..8be653de --- /dev/null +++ b/app/routes/editor/services/demo.js @@ -0,0 +1,23 @@ +/* + * Created on Tue Nov 10 2020 + * + * The MIT License (MIT) + * Copyright (c) 2020 André Antakli (German Research Center for Artificial Intelligence, DFKI). + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of this software + * and associated documentation files (the "Software"), to deal in the Software without restriction, + * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all copies or substantial + * portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED + * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL + * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, + * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ +import Ember from "ember"; + +export default Ember.Route.extend({}); diff --git a/app/styles/components/services/demo-service.css b/app/styles/components/services/demo-service.css new file mode 100644 index 00000000..6f34695c --- /dev/null +++ b/app/styles/components/services/demo-service.css @@ -0,0 +1,89 @@ +:global(#demo-service) { + width: 100%; + padding-top: 40px; + padding-bottom: 40px; +} + +:global(#test-service-wrapper) { + width: 80%; + margin-left: auto; + margin-right: auto; + padding: 30px; + box-shadow: 0px 5px 10px #d1d1e0; +} + +:global(#test-service-wrapper h1) { + padding-left: 15px; + height: 45px; + font-size: 35px; + margin-bottom: 20px; + width: 100% !important; + background: linear-gradient(to right, #1E1B55, #1E1B55, #1E1B55, #1B3284, #EA5B97, #F5A399); + color: #FFF; +} + +:global(#test-service-content) { + padding-top: 20px; +} + +.connect-button, +.disconnect-button { + height: 45px; + float: right; + margin-right: 0px !important; + position: relative; + border-radius: 0px !important; +} + +:global(#test-service-message) { + max-width: 100%; + min-height: 50px; + padding: 20px; + margin: 30px 0; + color: #ffffff; + position: relative; + box-shadow: inset 0px 0px 5px #cccccc; + font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; + background-color: rgb(24, 25, 64); +} + +:global(#test-service-message button) { + float: right; + margin-right: -10px; + margin-top: -10px; + width: 25px; + height: 25px; + padding: 0px !important; +} + +:global(#test-service-response) { + position: relative; + overflow: auto; +} + +:global(#test-service-response textarea) { + float: left; +} + +.test-service-ser-response { + height: 25px; + width: 25px; + float: left; + padding: 0px !important; + margin-left: 10px !important; +} + +/* clearfix */ +.clearfix::before, +.clearfix::after { + content: " "; + display: table; +} + +.clearfix::after { + clear: both; +} + +.clearfix { + *zoom: 1; /* Für den IE6 und IE7 */ +} diff --git a/app/templates/components/services/action-bar.hbs b/app/templates/components/services/action-bar.hbs index 69048c0c..4fd5defa 100644 --- a/app/templates/components/services/action-bar.hbs +++ b/app/templates/components/services/action-bar.hbs @@ -11,6 +11,11 @@ Test Service {{/link-to}} +
+ {{#link-to "editor.services.demo" class="tabbar-link"}} + AJAN Demo + {{/link-to}} +
{{#ui/menu-bar/dropdown label="File" class="action-bar" diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs new file mode 100644 index 00000000..e86b64a3 --- /dev/null +++ b/app/templates/components/services/demo-service.hbs @@ -0,0 +1,36 @@ +
+ +
+ {{services/action-bar}} +
+ +
+ +
+
+

+ AJAN Demo + {{#if wssConnection}} + + {{/if}} + {{#unless wssConnection}} + + {{/unless}} +

+
+ +
+

+ lorem ipsum dolor .... +

+ +
+
+
+
+
+ diff --git a/app/templates/components/services/test-service.hbs b/app/templates/components/services/test-service.hbs index 5b7d47ab..2ba5b3d0 100644 --- a/app/templates/components/services/test-service.hbs +++ b/app/templates/components/services/test-service.hbs @@ -25,7 +25,7 @@

- To test the input for ServiceActions (generated by the Payload Query), you can start a TestService. To do this, execute the startTestService.bat in the ajan-editor root folder. Afterwards you can connect to this service via connect. To see the received input of the TestService create a new ServiceAction change the Request-Uri to "http://localhost:4201/post" and execute it with an behavior action. + To test the input for ServiceActions (generated by the Payload Query), you can start a TestService. To do this, execute the startTestService.bat in the ajan-editor root folder. Afterwards you can connect to this service via connect. To see the received input of the TestService, create a new ServiceAction, change the Request-Uri to "http://localhost:4201/post" and execute it with an behavior action.

Received message

Date: {{wssMessage.date}}
diff --git a/app/templates/editor/services/demo.hbs b/app/templates/editor/services/demo.hbs new file mode 100644 index 00000000..5c8d314e --- /dev/null +++ b/app/templates/editor/services/demo.hbs @@ -0,0 +1,4 @@ +{{services/demo-service}} +{{universal-modal class="modal-parent"}} + +{{outlet}} From 229fd2d4b13cc3b78595ea5aad15221e38faecac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 3 Jul 2024 16:53:37 +0200 Subject: [PATCH 02/12] initialized blocksworld scene --- app/components/services/demo-service.js | 29 +---- .../components/services/demo-service.css | 119 ++++++++++++------ .../components/services/demo-service.hbs | 14 ++- 3 files changed, 98 insertions(+), 64 deletions(-) diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index fdd5252f..070251eb 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -28,13 +28,11 @@ export default Ember.Component.extend({ wssConnection: false, socketRef: null, response: "", - wssMessage: {}, didInsertElement() { this._super(...arguments); that = this; setTriplestoreField(); - this.set("wssMessage.body", "Here you can see the output of the TestService (testService.js) that it received via an HTTP/POST (Content-Type: text/turtle; Request-URI: http://localhost:4201/post) message."); getResponseMessage(); }, @@ -45,7 +43,7 @@ export default Ember.Component.extend({ actions: { connect() { - var socket = that.get('websockets').socketFor("ws://" + document.location.hostname + ":4201"); + var socket = that.get('websockets').socketFor("ws://" + document.location.hostname + ":4203"); socket.on('open', myOpenHandler, that); socket.on('message', myMessageHandler, that); socket.on('close', myCloseHandler, that); @@ -59,7 +57,7 @@ export default Ember.Component.extend({ socket.off('message', myMessageHandler); socket.off('close', myCloseHandler); that.set("wssConnection", false); - that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201"); + that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4203"); that.set('socketRef', null); } }, @@ -67,20 +65,6 @@ export default Ember.Component.extend({ clean() { that.set("wssMessage", ""); }, - - setResponse(content) { - Promise.resolve(content) - .then(x => { - Promise.resolve(sendResponseMessage(content)) - .then(function () { - $("#send-message").trigger("showToast"); - that.set("messageError", ""); - }); - }) - .catch(function (error) { - that.set("messageError", uri); - }); - } } }) @@ -91,12 +75,11 @@ function myOpenHandler(event) { function myMessageHandler(event) { console.log(`Message: ${event.data}`); - that.set("wssMessage", JSON.parse(event.data)); } function myCloseHandler(event) { console.log(`On close event has been called: ${event}`); - that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201"); + that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4203"); that.set("wssConnection", false); } @@ -106,20 +89,20 @@ function setTriplestoreField() { function getResponseMessage() { return $.ajax({ - url: "http://localhost:4201/getResponse", + url: "http://localhost:4203/getResponse", type: "GET", headers: { Accept: "text/plain" } }).then(function (data) { console.log(data); that.set("response", data); }).catch(function (error) { - alert("No TestServiceAction Service is running on http://" + document.location.hostname + ":4201"); + alert("No AJAN Demo Service is running on http://" + document.location.hostname + ":4203"); }); } function sendResponseMessage(content) { return $.ajax({ - url: "http://" + document.location.hostname + ":4201/response", + url: "http://" + document.location.hostname + ":4203/response", type: "POST", contentType: "text/plain", data: content, diff --git a/app/styles/components/services/demo-service.css b/app/styles/components/services/demo-service.css index 6f34695c..f6f40715 100644 --- a/app/styles/components/services/demo-service.css +++ b/app/styles/components/services/demo-service.css @@ -4,7 +4,7 @@ padding-bottom: 40px; } -:global(#test-service-wrapper) { +:global(#demo-service-wrapper) { width: 80%; margin-left: auto; margin-right: auto; @@ -12,7 +12,7 @@ box-shadow: 0px 5px 10px #d1d1e0; } -:global(#test-service-wrapper h1) { +:global(#demo-service-wrapper h1) { padding-left: 15px; height: 45px; font-size: 35px; @@ -22,55 +22,96 @@ color: #FFF; } -:global(#test-service-content) { - padding-top: 20px; -} - -.connect-button, -.disconnect-button { - height: 45px; - float: right; - margin-right: 0px !important; +:global(#demo-service-content) { + padding-top: 0px; position: relative; - border-radius: 0px !important; + width: 100%; } -:global(#test-service-message) { - max-width: 100%; - min-height: 50px; - padding: 20px; - margin: 30px 0; - color: #ffffff; - position: relative; - box-shadow: inset 0px 0px 5px #cccccc; - font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; - background-color: rgb(24, 25, 64); +:global(#demo-playground) { + padding-top: 0px; + width: 80%; + margin-left: 10%; + margin-right: 10%; } -:global(#test-service-message button) { - float: right; - margin-right: -10px; - margin-top: -10px; - width: 25px; - height: 25px; - padding: 0px !important; +:global(#demo-arm-open) { + box-shadow: + -0em -1em 0 0 black, + -1em -1em 0 0 black, + 1em -1em 0 0 black, + -3em -1em 0 0 black, + -2em -1em 0 0 black, + 2em -1em 0 0 black, + 3em -1em 0 0 black, + -4em -1em 0 0 black, + 4em -1em 0 0 black, + -5em 0em 0 0 black, + -4em 0em 0 0 black, + 4em 0em 0 0 black, + 5em 0em 0 0 black, + -5em 1em 0 0 black, + 5em 1em 0 0 black, + 6em 1em 0 0 black, + -6em 1em 0 0 black, + 6em 2em 0 0 black, + -6em 2em 0 0 black; + background: white; + width: 1em; + height: 1em; + overflow: hidden; + margin: 0 50% 20px 50%; } -:global(#test-service-response) { - position: relative; - overflow: auto; +:global(#demo-blocks) { + margin-left: auto; + margin-right: auto; + margin-top: 300px; + margin-bottom: 1em; + width: 36em; } -:global(#test-service-response textarea) { +:global(.demo-block) { + background: red; + width: 7em; + height: 4em; + overflow: hidden; + margin: 0 1em; float: left; } -.test-service-ser-response { - height: 25px; - width: 25px; - float: left; - padding: 0px !important; - margin-left: 10px !important; +:global(#demo-block-purple) { + background: purple; +} + +:global(#demo-block-orange) { + background: orange; +} + +:global(#demo-block-blue) { + background: blue; +} + +:global(#demo-block-green) { + background: green; +} + +:global(#demo-table) { + background: black; + height: 1em; + width: 36em; + margin-top: 10em; + margin-left: auto; + margin-right: auto; +} + +.connect-button, +.disconnect-button { + height: 45px; + float: right; + margin-right: 0px !important; + position: relative; + border-radius: 0px !important; } /* clearfix */ diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs index e86b64a3..b9d2c421 100644 --- a/app/templates/components/services/demo-service.hbs +++ b/app/templates/components/services/demo-service.hbs @@ -6,7 +6,7 @@
-
+

AJAN Demo @@ -27,7 +27,17 @@

lorem ipsum dolor ....

- +
+
+
+
+
+
+
+
+
+
+

From 6ab18e918d1e7d725a40e3f70bbc31db1677d84e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 10 Jul 2024 11:31:35 +0200 Subject: [PATCH 03/12] adapted style and implemented arm movement animation --- ajanDemoService.js | 135 ++++++++++++++++++ app/components/services/demo-service.js | 79 +++++++++- .../components/services/demo-service.css | 102 +++++++++---- .../components/services/demo-service.hbs | 13 +- startAJANDemoService.bat | 3 + startAll.bat | 1 + 6 files changed, 294 insertions(+), 39 deletions(-) create mode 100644 ajanDemoService.js create mode 100644 startAJANDemoService.bat diff --git a/ajanDemoService.js b/ajanDemoService.js new file mode 100644 index 00000000..fecad73b --- /dev/null +++ b/ajanDemoService.js @@ -0,0 +1,135 @@ +const express = require('express'); +const fs = require('fs'); +const http = require('http'); +const WebSocket = require('ws'); +const cors = require('cors'); +const bodyParser = require('body-parser'); + +const app = express(); +const port = 4203; + +//initialize a simple http server +const server = http.createServer(app); + +let start; +let startAll; +let endAll; +let performance = ""; +let iterations = 1000; +let iteration = 0; +let data = ""; +let body = ""; +let response = " ."; +const wss = new WebSocket.Server({ server }); + +app.use(bodyParser.text({ type: 'text/plain', limit: '50mb' })); +app.use(bodyParser.text({ type: 'text/turtle', limit: '50mb' })); +app.use(bodyParser.text({ type: 'text/xml', limit: '50mb' })); +app.use(bodyParser.text({ type: 'application/json', limit: '50mb' })); +app.use(bodyParser.text({ type: 'application/sparql-results+xml', limit: '50mb' })); +app.use(bodyParser.text({ type: 'application/trig', limit: '50mb' })); +app.use(bodyParser()); +app.use(function (err, req, res, next) { + console.error(err.stack); +}); + +app.use(cors()); + +app.get('/', (req, res) => { + res.send('Hello World!'); +}); + +app.get('/performance', (req, res) => { + let total = endAll - startAll - (1000 * iterations) ; + let average = total / iterations; + res.send(performance + " --> " + total + "ms" + ", 1 cycle = " + average + "ms"); +}); + +app.get('/start', (req, res) => { + res.send('start'); + iteration = iterations; + performance = ""; + startAll = Date.now(); + sendRequest(); +}); + +function sendRequest() { + const options = { + hostname: 'localhost', + port: 8080, + path: '/ajan/agents/test?capability=execute', + method: 'POST', + headers: { + 'Content-Type': 'text/turtle', + 'Content-Length': data.length + } + } + + const reqTest = http.request(options, res => { + console.log(`statusCode: ${res.statusCode}`) + res.on('data', d => { + process.stdout.write(d) + }); + }); + + reqTest.on('error', error => { + console.error(error) + }); + start = Date.now(); + reqTest.write(data); + reqTest.end(); +} + +app.post('/end', (req, res) => { + +}); + +app.post('/post', (req, res) => { + let wssMessage = {}; + wssMessage.date = new Date().toUTCString(); + wssMessage.headers = getHeaders(req.headers); + wssMessage.body = req.body; + console.log(wssMessage); + wss.clients.forEach(client => { + body = wssMessage; + client.send(JSON.stringify(wssMessage)); + }); + res.set('Content-Type', 'text/turtle'); + res.send(response); +}); + +wss.on('connection', function connection(ws) { + ws.on('message', function incoming(message) { + console.log('received: %s', message); + ws.send(message); + }); + + ws.on("error", (err) => { + console.log("Caught flash policy server socket error: "); + console.log(err.stack); + }); + + sendConnectMessage(ws); +}); + +server.listen(port, () => { + console.log(`Server started on port ${server.address().port} :)`); +}); + +function sendConnectMessage(ws) { + let wssMessage = {}; + wssMessage.body = "You are now connected to the AJAN Demo Service (ajanDemoService.js)!"; + const start = Date.now(); + ws.send(JSON.stringify(wssMessage)); + wssMessage.body = "This is the last response: ."; + let now = Date.now(); + while ((Date.now() - now) < 1000) { } + while ((Date.now() - start) < 5000) { + now = Date.now(); + while ((Date.now() - now) < 500) {} + wssMessage.body = wssMessage.body + "."; + ws.send(JSON.stringify(wssMessage)); + } + ws.send(JSON.stringify(body)); + console.log("send!"); +} diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index 070251eb..cd8deabe 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -23,17 +23,33 @@ import Ember from "ember"; let that; let $ = Ember.$; +const timer = ms => new Promise(res => setTimeout(res, ms)) + +let grid = [[{ "x": 0, "y": 0 }, { "x": 9, "y": 0 }, { "x": 18, "y": 0 }, { "x": 27, "y": 0 }], +[{ "x": 0, "y": -4 }, { "x": 9, "y": -4 }, { "x": 18, "y": -4 }, { "x": 27, "y": -4 }], +[{ "x": 0, "y": -8 }, { "x": 9, "y": -8 }, { "x": 18, "y": -8 }, { "x": 27, "y": -8 }], +[{ "x": 0, "y": -12 }, { "x": 9, "y": -12 }, { "x": 18, "y": -12 }, { "x": 27, "y": -12 }]]; + export default Ember.Component.extend({ websockets: Ember.inject.service(), wssConnection: false, socketRef: null, response: "", + px2em: 16, + + arm: { "id": "demo-arm", "closed": true, "x": 4, "y": -23 }, + purple: { "id": "demo-block-purple", "name": "purple", "d1": 0, "d2": 0 }, + orange: { "id": "demo-block-orange", "name": "orange", "d1": 0, "d2": 1 }, + blue: { "id": "demo-block-blue", "name": "blue", "d1": 0, "d2": 2 }, + green: { "id": "demo-block-green", "name": "green", "d1": 0, "d2": 3 }, + table: { "id": "demo-table", "name": "table", "purple": 0, "orange": 1, "blue": 2, "green": 3 }, didInsertElement() { this._super(...arguments); that = this; setTriplestoreField(); - getResponseMessage(); + setPX2EM(); + grapBlock(this.orange); }, willDestroyElement() { @@ -68,6 +84,67 @@ export default Ember.Component.extend({ } }) +function setPX2EM() { + let $arm = $("#" + that.get("arm.id") + ""); + let armTop = parseInt($arm.css("top"), 10); + let y = that.get("arm.y"); + let value = (armTop) / (y); + that.set("px2em", value); +} + +function setBlockPosition(block, destination) { + if (destination.name == "table") return; + else { + let $block = $("#" + block.id + ""); + console.log($block); + + let $destination = $("#" + destination.id + ""); + console.log($destination); + console.log(grid[destination.d1][destination.d2]); + let cell = grid[destination.d1][destination.d2]; + $block.css("top", cell.y + "em"); + $block.css("left", cell.x + "em"); + } +} + +async function grapBlock(block) { + let $block = $("#" + block.id + ""); + let $arm = $("#" + that.get("arm.id") + ""); + console.log($arm); + if($arm.hasClass("closed")) { + $arm.removeClass("closed"); + $arm.addClass("open"); + } + + let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); + let cell = grid[block.d1][block.d2]; + let destTop = cell.y; + let destLeft = cell.x + 4; + + console.log(armLeft, destLeft); + + for(let i=armLeft; i<=destLeft; i++) { + console.log(i); + $arm.css("left", i + "em"); + await timer(50); + } + + for(let i=armTop; i<=destTop; i++) { + console.log(i); + $arm.css("top", i + "em"); + await timer(50); + } + + if($arm.hasClass("open")) { + $arm.removeClass("open"); + $arm.addClass("closed"); + } + + //$arm.css("top", top + "em"); + //$arm.css("left", left + "em"); +} + function myOpenHandler(event) { console.log(`On open event has been called: ${event}`); that.set("wssConnection", true); diff --git a/app/styles/components/services/demo-service.css b/app/styles/components/services/demo-service.css index f6f40715..3e21b484 100644 --- a/app/styles/components/services/demo-service.css +++ b/app/styles/components/services/demo-service.css @@ -8,7 +8,7 @@ width: 80%; margin-left: auto; margin-right: auto; - padding: 30px; + padding: 30px 30px 50px 30px; box-shadow: 0px 5px 10px #d1d1e0; } @@ -30,13 +30,23 @@ :global(#demo-playground) { padding-top: 0px; - width: 80%; - margin-left: 10%; - margin-right: 10%; + width: 100%; + height: 30em; } -:global(#demo-arm-open) { +:global(#demo-arm) { + width: 1em; + height: 1em; + overflow: hidden; + position: absolute; + top: -23em; + left: 4em; +} + +:global(#demo-arm.open) { box-shadow: + -0em -2em 0 0 black, + -0em -3em 0 0 black, -0em -1em 0 0 black, -1em -1em 0 0 black, 1em -1em 0 0 black, @@ -51,58 +61,88 @@ 4em 0em 0 0 black, 5em 0em 0 0 black, -5em 1em 0 0 black, - 5em 1em 0 0 black, - 6em 1em 0 0 black, - -6em 1em 0 0 black, - 6em 2em 0 0 black, - -6em 2em 0 0 black; - background: white; - width: 1em; - height: 1em; - overflow: hidden; - margin: 0 50% 20px 50%; + 5em 1em 0 0 black; +} + +:global(#demo-arm.closed) { + box-shadow: + -0em -2em 0 0 black, + -0em -3em 0 0 black, + -0em -1em 0 0 black, + -1em -1em 0 0 black, + 1em -1em 0 0 black, + -3em -1em 0 0 black, + -2em -1em 0 0 black, + 2em -1em 0 0 black, + 3em -1em 0 0 black, + -4em -1em 0 0 black, + 4em -1em 0 0 black, + -4em 0em 0 0 black, + 4em 0em 0 0 black, + -4em 1em 0 0 black, + 4em 1em 0 0 black, + 4em 1em 0 0 black, + -4em 1em 0 0 black, + 4em 2em 0 0 black, + -4em 2em 0 0 black; } :global(#demo-blocks) { margin-left: auto; margin-right: auto; - margin-top: 300px; margin-bottom: 1em; width: 36em; + position: relative; + top: 24em; +} + +:global(#demo-table) { + background: black; + height: 1em; + width: 36em; + margin-left: auto; + margin-right: auto; + position: relative; + top: 29em; } :global(.demo-block) { - background: red; width: 7em; height: 4em; overflow: hidden; margin: 0 1em; - float: left; + position: absolute; +} + +:global(.demo-block p) { + font-weight: bold; + color: #FFFFFF; + background: rgba(0,0,0,0.5); + padding-left: 0.5em; } :global(#demo-block-purple) { - background: purple; + background: #EA5B97; + top: 0em; + left: 0em; } :global(#demo-block-orange) { - background: orange; + background: #FBBD08; + top: 0em; + left: 9em; } :global(#demo-block-blue) { - background: blue; + background: #1B3284; + top: 0em; + left: 18em; } :global(#demo-block-green) { - background: green; -} - -:global(#demo-table) { - background: black; - height: 1em; - width: 36em; - margin-top: 10em; - margin-left: auto; - margin-right: auto; + background: #8EC8B1; + top: 0em; + left: 27em; } .connect-button, diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs index b9d2c421..17292628 100644 --- a/app/templates/components/services/demo-service.hbs +++ b/app/templates/components/services/demo-service.hbs @@ -28,15 +28,14 @@ lorem ipsum dolor ....

-
-
+
-
-
-
-
+
+

purple

+

orange

+

blue

+

green

-
diff --git a/startAJANDemoService.bat b/startAJANDemoService.bat new file mode 100644 index 00000000..2a94356b --- /dev/null +++ b/startAJANDemoService.bat @@ -0,0 +1,3 @@ +node ajanDemoService.js + +pause diff --git a/startAll.bat b/startAll.bat index b4667979..37b44cc4 100644 --- a/startAll.bat +++ b/startAll.bat @@ -9,6 +9,7 @@ if "%NODE_VERSION%" == "node is not recognized as an internal or external comman start cmd.exe /c startEditor.bat start cmd.exe /c startReportService.bat start cmd.exe /c startTestActionService.bat + start cmd.exe /c startAJANDemoService.bat echo Local IP: ipconfig | findstr "IPv4" From fbdfbc4591df59f1f7f6971905503f860b19cb48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Fri, 12 Jul 2024 10:24:27 +0200 Subject: [PATCH 04/12] implemented inital block positioning methods --- app/components/services/demo-service.js | 178 ++++++++++++++++++++---- 1 file changed, 153 insertions(+), 25 deletions(-) diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index cd8deabe..dc221e59 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -36,6 +36,7 @@ export default Ember.Component.extend({ socketRef: null, response: "", px2em: 16, + grabbed: "", arm: { "id": "demo-arm", "closed": true, "x": 4, "y": -23 }, purple: { "id": "demo-block-purple", "name": "purple", "d1": 0, "d2": 0 }, @@ -49,7 +50,7 @@ export default Ember.Component.extend({ that = this; setTriplestoreField(); setPX2EM(); - grapBlock(this.orange); + pickUpBlock(this.orange); }, willDestroyElement() { @@ -92,25 +93,22 @@ function setPX2EM() { that.set("px2em", value); } -function setBlockPosition(block, destination) { - if (destination.name == "table") return; - else { - let $block = $("#" + block.id + ""); - console.log($block); +async function moveArm2Init() { + let $arm = $("#" + that.get("arm.id") + ""); + let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); - let $destination = $("#" + destination.id + ""); - console.log($destination); - console.log(grid[destination.d1][destination.d2]); - let cell = grid[destination.d1][destination.d2]; - $block.css("top", cell.y + "em"); - $block.css("left", cell.x + "em"); - } + for(let i=armTop; i>=that.get("arm.y"); i--) { + $arm.css("top", i + "em"); + await timer(50); + } + $arm.css("top", that.get("arm.y") + "em"); } -async function grapBlock(block) { +async function pickUpBlock(block) { let $block = $("#" + block.id + ""); let $arm = $("#" + that.get("arm.id") + ""); - console.log($arm); + if($arm.hasClass("closed")) { $arm.removeClass("closed"); $arm.addClass("open"); @@ -119,30 +117,160 @@ async function grapBlock(block) { let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); let cell = grid[block.d1][block.d2]; - let destTop = cell.y; - let destLeft = cell.x + 4; + let blockTop = cell.y; + let blockLeft = cell.x + 4; - console.log(armLeft, destLeft); - - for(let i=armLeft; i<=destLeft; i++) { - console.log(i); + for(let i=armLeft; i<=blockLeft; i++) { $arm.css("left", i + "em"); await timer(50); } + $arm.css("left", blockLeft + "em"); + + for(let i=armTop; i<=blockTop; i++) { + $arm.css("top", i + "em"); + await timer(50); + } + $arm.css("top", blockTop + "em"); + + if($arm.hasClass("open")) { + $arm.removeClass("open"); + $arm.addClass("closed"); + } + + armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + for(let i=armTop; i>=that.get("arm.y"); i--) { + $arm.css("top", i + "em"); + $block.css("top", i + "em"); + await timer(50); + } + $arm.css("top", that.get("arm.y") + "em"); + $block.css("top", that.get("arm.y") + "em"); + + that.set("grabbed", block); + + stackBlock(that.orange, that.blue); +} + +async function putDownBlock(block) { + let $arm = $("#" + that.get("arm.id") + ""); + let $block = $("#" + block.id + ""); + + let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); + + let tableTop = grid[0][that.get("table." + block.name + "")].y; + let tableLeft = grid[0][that.get("table." + block.name + "")].x; + +console.log(armLeft, tableLeft); + + for(let i=armLeft; i<=tableLeft; i++) { + $arm.css("left", i + 4 + "em"); + $block.css("left", i + "em"); + await timer(50); + } + $arm.css("left", tableLeft + 4 + "em"); + $block.css("left", tableLeft + "em"); + + armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + for(let i=armTop; i=that.get("arm.y"); i--) { + $arm.css("top", i + "em"); + $block.css("top", i + "em"); + await timer(50); + } + $arm.css("top", that.get("arm.y") + "em"); + $block.css("top", that.get("arm.y") + "em"); + + that.set("grabbed", block); + + putDownBlock(block); +} + +async function stackBlock(block, dest) { + let $arm = $("#" + that.get("arm.id") + ""); + let $block = $("#" + block.id + ""); + + let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); + let blockTop = grid[block.d1][block.d2].y; + let blockLeft = grid[block.d1][block.d2].x + 4; + let destTop = grid[dest.d1 + 1][dest.d2].y; + let destLeft = grid[dest.d1][dest.d2].x + 4; + + for(let i=armLeft; i<=destLeft; i++) { + $arm.css("left", i + "em"); + $block.css("left", i - 4 + "em"); + await timer(50); + } + $arm.css("left", destLeft + "em"); + $block.css("left", destLeft - 4 + "em"); + + armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); + for(let i=armTop; i Date: Wed, 17 Jul 2024 11:12:54 +0200 Subject: [PATCH 05/12] implemented communication between AJAN-Service and Demo platform --- ajanDemoService.js | 109 ++++++++---------------- app/components/services/demo-service.js | 73 ++++++++++------ 2 files changed, 82 insertions(+), 100 deletions(-) diff --git a/ajanDemoService.js b/ajanDemoService.js index fecad73b..54402e68 100644 --- a/ajanDemoService.js +++ b/ajanDemoService.js @@ -10,22 +10,17 @@ const port = 4203; //initialize a simple http server const server = http.createServer(app); +let running = null; -let start; -let startAll; -let endAll; -let performance = ""; -let iterations = 1000; -let iteration = 0; -let data = ""; -let body = ""; let response = " ."; +let blocked = " ."; const wss = new WebSocket.Server({ server }); app.use(bodyParser.text({ type: 'text/plain', limit: '50mb' })); app.use(bodyParser.text({ type: 'text/turtle', limit: '50mb' })); app.use(bodyParser.text({ type: 'text/xml', limit: '50mb' })); app.use(bodyParser.text({ type: 'application/json', limit: '50mb' })); +app.use(bodyParser.text({ type: 'application/ld+json', limit: '50mb' })); app.use(bodyParser.text({ type: 'application/sparql-results+xml', limit: '50mb' })); app.use(bodyParser.text({ type: 'application/trig', limit: '50mb' })); app.use(bodyParser()); @@ -39,74 +34,42 @@ app.get('/', (req, res) => { res.send('Hello World!'); }); -app.get('/performance', (req, res) => { - let total = endAll - startAll - (1000 * iterations) ; - let average = total / iterations; - res.send(performance + " --> " + total + "ms" + ", 1 cycle = " + average + "ms"); -}); - -app.get('/start', (req, res) => { - res.send('start'); - iteration = iterations; - performance = ""; - startAll = Date.now(); - sendRequest(); -}); - -function sendRequest() { - const options = { - hostname: 'localhost', - port: 8080, - path: '/ajan/agents/test?capability=execute', - method: 'POST', - headers: { - 'Content-Type': 'text/turtle', - 'Content-Length': data.length - } - } - - const reqTest = http.request(options, res => { - console.log(`statusCode: ${res.statusCode}`) - res.on('data', d => { - process.stdout.write(d) - }); - }); - - reqTest.on('error', error => { - console.error(error) +app.post('/pickUp', (req, res) => { + let wssMessage = JSON.parse(req.body); + console.log(req.body); + let action = createAction(wssMessage, "pickUp"); + action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.block + "> strips:is ajan:Holding."; + let actionRequest = JSON.stringify(action); + wss.clients.forEach(client => { + client.send(actionRequest); }); - start = Date.now(); - reqTest.write(data); - reqTest.end(); -} - -app.post('/end', (req, res) => { - + res.set('Content-Type', 'text/turtle'); + res.send(response); }); -app.post('/post', (req, res) => { - let wssMessage = {}; - wssMessage.date = new Date().toUTCString(); - wssMessage.headers = getHeaders(req.headers); - wssMessage.body = req.body; - console.log(wssMessage); +app.post('/putDown', (req, res) => { + let wssMessage = JSON.parse(req.body); + console.log(req.body); wss.clients.forEach(client => { - body = wssMessage; - client.send(JSON.stringify(wssMessage)); + client.send(createAction(wssMessage, "putDown")); }); res.set('Content-Type', 'text/turtle'); - res.send(response); + res.send(wssMessage); }); wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { console.log('received: %s', message); - ws.send(message); + if (running == message) { + running = null; + console.log("done!"); + } }); ws.on("error", (err) => { console.log("Caught flash policy server socket error: "); console.log(err.stack); + running = null; }); sendConnectMessage(ws); @@ -119,17 +82,19 @@ server.listen(port, () => { function sendConnectMessage(ws) { let wssMessage = {}; wssMessage.body = "You are now connected to the AJAN Demo Service (ajanDemoService.js)!"; - const start = Date.now(); ws.send(JSON.stringify(wssMessage)); - wssMessage.body = "This is the last response: ."; - let now = Date.now(); - while ((Date.now() - now) < 1000) { } - while ((Date.now() - start) < 5000) { - now = Date.now(); - while ((Date.now() - now) < 500) {} - wssMessage.body = wssMessage.body + "."; - ws.send(JSON.stringify(wssMessage)); - } - ws.send(JSON.stringify(body)); - console.log("send!"); +} + +function createAction(wssMessage, actionType) { + let action = { "action": actionType }; + wssMessage.forEach((entry) => { + if(entry["http://www.ajan.de/actn#asyncRequestURI"] != null) { + console.log(entry["http://www.ajan.de/actn#asyncRequestURI"][0]["@id"]); + action.requestURI = entry["http://www.ajan.de/actn#asyncRequestURI"][0]["@id"]; + } + if(entry["@type"] == "http://www.ajan.de/ajan-ns#Block") { + action.block = entry["@id"]; + } + }); + return action; } diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index dc221e59..263a1513 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -50,7 +50,6 @@ export default Ember.Component.extend({ that = this; setTriplestoreField(); setPX2EM(); - pickUpBlock(this.orange); }, willDestroyElement() { @@ -93,6 +92,30 @@ function setPX2EM() { that.set("px2em", value); } +function getDemoObject(value) { + let object = ""; + switch (value) { + case "http://www.ajan.de/ajan-ns#PurpleBlock": + object = that.purple; + break; + case "http://www.ajan.de/ajan-ns#OrangeBlock": + object = that.orange; + break; + case "http://www.ajan.de/ajan-ns#BlueBlock": + object = that.blue; + break; + case "http://www.ajan.de/ajan-ns#GreenBlock": + object = that.green; + break; + case "http://www.ajan.de/ajan-ns#OrangeBlock": + object = that.table; + break; + default: + object = that.table; + } + return object; +} + async function moveArm2Init() { let $arm = $("#" + that.get("arm.id") + ""); let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); @@ -105,7 +128,8 @@ async function moveArm2Init() { $arm.css("top", that.get("arm.y") + "em"); } -async function pickUpBlock(block) { +async function pickUpBlock(action) { + let block = getDemoObject(action.block); let $block = $("#" + block.id + ""); let $arm = $("#" + that.get("arm.id") + ""); @@ -147,11 +171,12 @@ async function pickUpBlock(block) { $block.css("top", that.get("arm.y") + "em"); that.set("grabbed", block); - - stackBlock(that.orange, that.blue); + let ws = that.get("socketRef"); + sendResponse(action); } -async function putDownBlock(block) { +async function putDownBlock(action) { + let block = getDemoObject(action.val1); let $arm = $("#" + that.get("arm.id") + ""); let $block = $("#" + block.id + ""); @@ -161,8 +186,6 @@ async function putDownBlock(block) { let tableTop = grid[0][that.get("table." + block.name + "")].y; let tableLeft = grid[0][that.get("table." + block.name + "")].x; -console.log(armLeft, tableLeft); - for(let i=armLeft; i<=tableLeft; i++) { $arm.css("left", i + 4 + "em"); $block.css("left", i + "em"); @@ -186,8 +209,9 @@ console.log(armLeft, tableLeft); } that.set("grabbed", ""); - moveArm2Init(); + let ws = that.get("socketRef"); + ws.send(action); } async function unStackBlock(block) { @@ -280,6 +304,13 @@ function myOpenHandler(event) { function myMessageHandler(event) { console.log(`Message: ${event.data}`); + let action = $.parseJSON(event.data); + console.log(action); + if (action.action == "pickUp") { + pickUpBlock(action); + } else if (action.action == "putDown") { + putDownBlock(action); + } } function myCloseHandler(event) { @@ -292,29 +323,15 @@ function setTriplestoreField() { $(".store-url").text(localStorage.currentStore); } -function getResponseMessage() { - return $.ajax({ - url: "http://localhost:4203/getResponse", - type: "GET", - headers: { Accept: "text/plain" } - }).then(function (data) { - console.log(data); - that.set("response", data); - }).catch(function (error) { - alert("No AJAN Demo Service is running on http://" + document.location.hostname + ":4203"); - }); -} - -function sendResponseMessage(content) { +function sendResponse(action) { + console.log(action); return $.ajax({ - url: "http://" + document.location.hostname + ":4203/response", + url: action.requestURI, type: "POST", - contentType: "text/plain", - data: content, - }).then(function (data) { - $("#send-message").trigger("showToast"); - getResponseMessage(); + contentType: "text/turtle", + data: action.asyncResponse, }).catch (function (error) { console.log(error); }); } + From 585e482389ec9a24b10d36e48abb8afbc588f394 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 17 Jul 2024 16:11:48 +0200 Subject: [PATCH 06/12] realized all AJAN interfaces to call blocksworld actions --- ajanDemoService.js | 78 ++++++++++++++++++++--- app/components/services/demo-service.js | 84 +++++++++++++------------ 2 files changed, 115 insertions(+), 47 deletions(-) diff --git a/ajanDemoService.js b/ajanDemoService.js index 54402e68..0a0df6e0 100644 --- a/ajanDemoService.js +++ b/ajanDemoService.js @@ -35,10 +35,11 @@ app.get('/', (req, res) => { }); app.post('/pickUp', (req, res) => { - let wssMessage = JSON.parse(req.body); console.log(req.body); + let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "pickUp"); - action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.block + "> strips:is ajan:Holding."; + action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Table"); + action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding."; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); @@ -47,14 +48,48 @@ app.post('/pickUp', (req, res) => { res.send(response); }); -app.post('/putDown', (req, res) => { +app.post('/stack', (req, res) => { + console.log(req.body); let wssMessage = JSON.parse(req.body); + let action = createAction(wssMessage, "stack"); + action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); + action.blockY = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); + action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . <" + action.blockX + "> strips:is ajan:Clear . \n <" + action.blockX + "> ajan:on <" + action.blockY + "> ."; + let actionRequest = JSON.stringify(action); + wss.clients.forEach(client => { + client.send(actionRequest); + }); + res.set('Content-Type', 'text/turtle'); + res.send(response); +}); + +app.post('/unStack', (req, res) => { + console.log(req.body); + let wssMessage = JSON.parse(req.body); + let action = createAction(wssMessage, "unStack"); + action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); + action.blockY = getActionObject(wssMessage, "http://www.ajan.de/ajan-ns#on"); + action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding . \n <" + action.blockY + "> strips:is ajan:Clear ."; + let actionRequest = JSON.stringify(action); + wss.clients.forEach(client => { + client.send(actionRequest); + }); + res.set('Content-Type', 'text/turtle'); + res.send(response); +}); + +app.post('/putDown', (req, res) => { console.log(req.body); + let wssMessage = JSON.parse(req.body); + let action = createAction(wssMessage, "putDown"); + action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); + action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . \n <" + action.blockX + "> strips:is ajan:Table . \n <" + action.blockX + "> strips:is ajan:Clear ."; + let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { - client.send(createAction(wssMessage, "putDown")); + client.send(actionRequest); }); res.set('Content-Type', 'text/turtle'); - res.send(wssMessage); + res.send(response); }); wss.on('connection', function connection(ws) { @@ -92,9 +127,36 @@ function createAction(wssMessage, actionType) { console.log(entry["http://www.ajan.de/actn#asyncRequestURI"][0]["@id"]); action.requestURI = entry["http://www.ajan.de/actn#asyncRequestURI"][0]["@id"]; } - if(entry["@type"] == "http://www.ajan.de/ajan-ns#Block") { - action.block = entry["@id"]; - } }); return action; } + +function getActionSubject(wssMessage, parameter) { + let result = null; + wssMessage.forEach((entry) => { + if(entry["http://www.ajan.de/behavior/strips-ns#is"] != null) { + entry["http://www.ajan.de/behavior/strips-ns#is"].forEach((object) => { + if(object["@id"] == parameter) { + console.log(entry["@id"]); + result = entry["@id"]; + } + }); + } + }); + return result; +} + +function getActionObject(wssMessage, parameter) { + let result = null; + wssMessage.forEach((entry) => { + if(entry[parameter] != null) { + entry[parameter].forEach((object) => { + if(object["@id"] != null) { + console.log(object["@id"]); + result = object["@id"]; + } + }); + } + }); + return result; +} diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index 263a1513..233a3775 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -116,7 +116,7 @@ function getDemoObject(value) { return object; } -async function moveArm2Init() { +async function moveArm2Init(action) { let $arm = $("#" + that.get("arm.id") + ""); let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); @@ -126,10 +126,11 @@ async function moveArm2Init() { await timer(50); } $arm.css("top", that.get("arm.y") + "em"); + sendResponse(action); } async function pickUpBlock(action) { - let block = getDemoObject(action.block); + let block = getDemoObject(action.blockX); let $block = $("#" + block.id + ""); let $arm = $("#" + that.get("arm.id") + ""); @@ -171,37 +172,38 @@ async function pickUpBlock(action) { $block.css("top", that.get("arm.y") + "em"); that.set("grabbed", block); - let ws = that.get("socketRef"); sendResponse(action); } -async function putDownBlock(action) { - let block = getDemoObject(action.val1); +async function stackBlock(action) { + let block = getDemoObject(action.blockX); + let dest = getDemoObject(action.blockY); let $arm = $("#" + that.get("arm.id") + ""); let $block = $("#" + block.id + ""); let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); + let blockTop = grid[block.d1][block.d2].y; + let blockLeft = grid[block.d1][block.d2].x + 4; + let destTop = grid[dest.d1 + 1][dest.d2].y; + let destLeft = grid[dest.d1][dest.d2].x + 4; - let tableTop = grid[0][that.get("table." + block.name + "")].y; - let tableLeft = grid[0][that.get("table." + block.name + "")].x; - - for(let i=armLeft; i<=tableLeft; i++) { - $arm.css("left", i + 4 + "em"); - $block.css("left", i + "em"); + for(let i=armLeft; i<=destLeft; i++) { + $arm.css("left", i + "em"); + $block.css("left", i - 4 + "em"); await timer(50); } - $arm.css("left", tableLeft + 4 + "em"); - $block.css("left", tableLeft + "em"); + $arm.css("left", destLeft + "em"); + $block.css("left", destLeft - 4 + "em"); armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); - for(let i=armTop; i Date: Thu, 18 Jul 2024 15:16:50 +0200 Subject: [PATCH 07/12] finalized blocksworld demo --- ajanDemoService.js | 8 +++ app/components/services/demo-service.js | 77 ++++++++++++++++++++----- 2 files changed, 69 insertions(+), 16 deletions(-) diff --git a/ajanDemoService.js b/ajanDemoService.js index 0a0df6e0..b8e109c2 100644 --- a/ajanDemoService.js +++ b/ajanDemoService.js @@ -34,6 +34,14 @@ app.get('/', (req, res) => { res.send('Hello World!'); }); +app.get('/initScene', (req, res) => { + wss.clients.forEach(client => { + client.send('{ "init": "true" }'); + }); + res.set('Content-Type', 'text/turtle'); + res.send(" true ."); +}); + app.post('/pickUp', (req, res) => { console.log(req.body); let wssMessage = JSON.parse(req.body); diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index 233a3775..51daf2bd 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -116,6 +116,20 @@ function getDemoObject(value) { return object; } +function initScene() { + console.log("init scene"); + initBlock(that.get("purple")); + initBlock(that.get("orange")) + initBlock(that.get("blue")) + initBlock(that.get("green")); +} + +function initBlock(block) { + let $block = $("#" + block.id + ""); + $block.css("left", grid[block.d1][block.d2].x + "em"); + $block.css("top", grid[block.d1][block.d2].y + "em"); +} + async function moveArm2Init(action) { let $arm = $("#" + that.get("arm.id") + ""); let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); @@ -145,9 +159,16 @@ async function pickUpBlock(action) { let blockTop = cell.y; let blockLeft = cell.x + 4; - for(let i=armLeft; i<=blockLeft; i++) { - $arm.css("left", i + "em"); - await timer(50); + if(armLeft <= blockLeft) { + for(let i=armLeft; i<=blockLeft; i++) { + $arm.css("left", i + "em"); + await timer(50); + } + } else { + for(let i=armLeft; i>=blockLeft; i--) { + $arm.css("left", i + "em"); + await timer(50); + } } $arm.css("left", blockLeft + "em"); @@ -188,10 +209,18 @@ async function stackBlock(action) { let destTop = grid[dest.d1 + 1][dest.d2].y; let destLeft = grid[dest.d1][dest.d2].x + 4; - for(let i=armLeft; i<=destLeft; i++) { - $arm.css("left", i + "em"); - $block.css("left", i - 4 + "em"); - await timer(50); + if(armLeft <= destLeft) { + for(let i=armLeft; i<=destLeft; i++) { + $arm.css("left", i + "em"); + $block.css("left", i - 4 + "em"); + await timer(50); + } + } else { + for(let i=armLeft; i>=destLeft; i--) { + $arm.css("left", i + "em"); + $block.css("left", i - 4 + "em"); + await timer(50); + } } $arm.css("left", destLeft + "em"); $block.css("left", destLeft - 4 + "em"); @@ -230,11 +259,18 @@ async function unStackBlock(action) { let blockTop = parseInt($block.css("top"), 10) / that.get("px2em"); let blockLeft = parseInt($block.css("left"), 10) / that.get("px2em"); - for(let i=armLeft; i<=blockLeft; i++) { - $arm.css("left", i + 2 + "em"); - await timer(50); + if(armLeft <= blockLeft) { + for(let i=armLeft; i<=blockLeft; i++) { + $arm.css("left", i + 4 + "em"); + await timer(50); + } + } else { + for(let i=armLeft; i>=blockLeft; i--) { + $arm.css("left", i + 4 + "em"); + await timer(50); + } } - $arm.css("left", blockLeft + 2 + "em"); + $arm.css("left", blockLeft + 4 + "em"); for(let i=armTop; i<=blockTop; i++) { $arm.css("top", i + "em"); @@ -272,10 +308,18 @@ async function putDownBlock(action) { let tableTop = grid[0][that.get("table." + block.name + "")].y; let tableLeft = grid[0][that.get("table." + block.name + "")].x; - for(let i=armLeft; i<=tableLeft; i++) { - $arm.css("left", i + 4 + "em"); - $block.css("left", i + "em"); - await timer(50); + if(armLeft <= tableLeft) { + for(let i=armLeft; i<=tableLeft; i++) { + $arm.css("left", i + 4 + "em"); + $block.css("left", i + "em"); + await timer(50); + } + } else { + for(let i=armLeft; i>=tableLeft; i--) { + $arm.css("left", i + 4 + "em"); + $block.css("left", i + "em"); + await timer(50); + } } $arm.css("left", tableLeft + 4 + "em"); $block.css("left", tableLeft + "em"); @@ -307,7 +351,8 @@ function myMessageHandler(event) { console.log(`Message: ${event.data}`); let action = $.parseJSON(event.data); console.log(action); - if (action.action == "pickUp") { + if (action.init) initScene(); + else if (action.action == "pickUp") { pickUpBlock(action); } else if (action.action == "stack") { stackBlock(action); From c785aa6df0ff0b50c83e259e61bdd31b4ad6f29d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 7 Aug 2024 11:10:41 +0200 Subject: [PATCH 08/12] directly connect to services, and if they are not available show info --- .../agents/instance/agent-instance.js | 22 ++++++++++++------- app/components/services/demo-service.js | 22 ++++++++++--------- .../agents/instance/agent-instance.hbs | 7 ++++++ .../components/services/demo-service.hbs | 7 ++++++ 4 files changed, 40 insertions(+), 18 deletions(-) diff --git a/app/components/agents/instance/agent-instance.js b/app/components/agents/instance/agent-instance.js index f0693874..a9b096b8 100644 --- a/app/components/agents/instance/agent-instance.js +++ b/app/components/agents/instance/agent-instance.js @@ -39,12 +39,14 @@ export default Ember.Component.extend({ agentMessage: " .", messageError: {}, wssConnection: false, + connectionError: false, wssMessage: "", btView: "", debugReport: null, selectedCapability: null, selectedEndpoint: null, + prefixes: { "http://www.w3.org/1999/02/22-rdf-syntax-ns#": "rdf:", "http://www.w3.org/2000/01/rdf-schema#": "rdfs:", @@ -61,6 +63,7 @@ export default Ember.Component.extend({ this._super(...arguments); that = this; this.get("activeInstance").actions = new Array(); + this.actions.connect(); }, didReceiveAttrs() { @@ -162,14 +165,14 @@ export default Ember.Component.extend({ }, connect() { - console.log("connect"); - console.log("ws://" + document.location.hostname + ":4202"); - var socket = that.get('websockets').socketFor("ws://" + document.location.hostname + ":4202"); - console.log(socket); - socket.on('open', myOpenHandler, that); - socket.on('message', myMessageHandler, that); - socket.on('close', myCloseHandler, that); - that.set('socketRef', socket); + console.log("connect"); + console.log("ws://" + document.location.hostname + ":4202"); + var socket = that.get('websockets').socketFor("ws://" + document.location.hostname + ":4202"); + console.log(socket); + socket.on('open', myOpenHandler, that); + socket.on('message', myMessageHandler, that); + socket.on('close', myCloseHandler, that); + that.set('socketRef', socket); }, disconnect() { @@ -245,6 +248,7 @@ function myOpenHandler(event) { that.set("wssMessage", ""); emptyLogs(); setBTView(that); + that.set("connectionError", false); } function myMessageHandler(event) { @@ -393,9 +397,11 @@ function createEditorMessage($textarea, result, report) { } function myCloseHandler(event) { + console.log(event); console.log(`On close event has been called: ${event}`); closeSocket(); setBTView(that); + that.set("connectionError", true); } function closeSocket() { diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index 51daf2bd..ea728e12 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -33,6 +33,7 @@ let grid = [[{ "x": 0, "y": 0 }, { "x": 9, "y": 0 }, { "x": 18, "y": 0 }, { "x": export default Ember.Component.extend({ websockets: Ember.inject.service(), wssConnection: false, + connectionError: false, socketRef: null, response: "", px2em: 16, @@ -50,6 +51,7 @@ export default Ember.Component.extend({ that = this; setTriplestoreField(); setPX2EM(); + this.actions.connect(); }, willDestroyElement() { @@ -201,29 +203,28 @@ async function stackBlock(action) { let dest = getDemoObject(action.blockY); let $arm = $("#" + that.get("arm.id") + ""); let $block = $("#" + block.id + ""); + let $dest = $("#" + dest.id + ""); let armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); let armLeft = parseInt($arm.css("left"), 10) / that.get("px2em"); - let blockTop = grid[block.d1][block.d2].y; - let blockLeft = grid[block.d1][block.d2].x + 4; - let destTop = grid[dest.d1 + 1][dest.d2].y; - let destLeft = grid[dest.d1][dest.d2].x + 4; + let destTop = parseInt($dest.css("top"), 10) / that.get("px2em") - 4; + let destLeft = parseInt($dest.css("left"), 10) / that.get("px2em"); if(armLeft <= destLeft) { for(let i=armLeft; i<=destLeft; i++) { - $arm.css("left", i + "em"); - $block.css("left", i - 4 + "em"); + $arm.css("left", i + 4 + "em"); + $block.css("left", i + "em"); await timer(50); } } else { for(let i=armLeft; i>=destLeft; i--) { - $arm.css("left", i + "em"); - $block.css("left", i - 4 + "em"); + $arm.css("left", i + 4 + "em"); + $block.css("left", i + "em"); await timer(50); } } - $arm.css("left", destLeft + "em"); - $block.css("left", destLeft - 4 + "em"); + $arm.css("left", destLeft + 4 + "em"); + $block.css("left", destLeft + "em"); armTop = parseInt($arm.css("top"), 10) / that.get("px2em"); for(let i=armTop; i Connect + {{#if connectionError}} +

+ + reportService.js on Port 4202 might not be accessible. + +

+ {{/if}} {{/unless}}
diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs index 17292628..4c833e05 100644 --- a/app/templates/components/services/demo-service.hbs +++ b/app/templates/components/services/demo-service.hbs @@ -19,6 +19,13 @@ + {{#if connectionError}} +

+ + reportService.js on Port 4202 might not be accessible. + +

+ {{/if}} {{/unless}} From 4bfd193428e4592f0238d9b3da70271cf8698174 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 7 Aug 2024 11:59:45 +0200 Subject: [PATCH 09/12] automatic ws connection in for testService --- app/components/services/demo-service.js | 1 + app/components/services/test-service.js | 4 ++++ app/templates/components/services/test-service.hbs | 7 +++++++ 3 files changed, 12 insertions(+) diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index ea728e12..a63d3c33 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -346,6 +346,7 @@ async function putDownBlock(action) { function myOpenHandler(event) { console.log(`On open event has been called: ${event}`); that.set("wssConnection", true); + that.set("connectionError", false); } function myMessageHandler(event) { diff --git a/app/components/services/test-service.js b/app/components/services/test-service.js index fdd5252f..61cd3abc 100644 --- a/app/components/services/test-service.js +++ b/app/components/services/test-service.js @@ -29,6 +29,7 @@ export default Ember.Component.extend({ socketRef: null, response: "", wssMessage: {}, + connectionError: false, didInsertElement() { this._super(...arguments); @@ -36,6 +37,7 @@ export default Ember.Component.extend({ setTriplestoreField(); this.set("wssMessage.body", "Here you can see the output of the TestService (testService.js) that it received via an HTTP/POST (Content-Type: text/turtle; Request-URI: http://localhost:4201/post) message."); getResponseMessage(); + this.actions.connect(); }, willDestroyElement() { @@ -87,6 +89,7 @@ export default Ember.Component.extend({ function myOpenHandler(event) { console.log(`On open event has been called: ${event}`); that.set("wssConnection", true); + that.set("connectionError", false); } function myMessageHandler(event) { @@ -98,6 +101,7 @@ function myCloseHandler(event) { console.log(`On close event has been called: ${event}`); that.get('websockets').closeSocketFor("ws://" + document.location.hostname + ":4201"); that.set("wssConnection", false); + that.set("connectionError", true); } function setTriplestoreField() { diff --git a/app/templates/components/services/test-service.hbs b/app/templates/components/services/test-service.hbs index 2ba5b3d0..f100f6a2 100644 --- a/app/templates/components/services/test-service.hbs +++ b/app/templates/components/services/test-service.hbs @@ -19,6 +19,13 @@ + {{#if connectionError}} +

+ + reportService.js on Port 4202 might not be accessible. + +

+ {{/if}} {{/unless}} From 54b60630eda4f454def109c584ad56fbc8f32dae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 7 Aug 2024 16:25:20 +0200 Subject: [PATCH 10/12] updated visualization of demo scene showing input and output RDF messages --- ajanDemoService.js | 12 +++-- app/components/services/demo-service.js | 25 +++++++++-- .../components/services/demo-service.css | 44 +++++++++++++++++-- .../components/services/demo-service.hbs | 13 ++++-- 4 files changed, 79 insertions(+), 15 deletions(-) diff --git a/ajanDemoService.js b/ajanDemoService.js index b8e109c2..71a2abcf 100644 --- a/ajanDemoService.js +++ b/ajanDemoService.js @@ -47,7 +47,8 @@ app.post('/pickUp', (req, res) => { let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "pickUp"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Table"); - action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding."; + action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding."; + action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); @@ -62,7 +63,8 @@ app.post('/stack', (req, res) => { let action = createAction(wssMessage, "stack"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); action.blockY = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); - action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . <" + action.blockX + "> strips:is ajan:Clear . \n <" + action.blockX + "> ajan:on <" + action.blockY + "> ."; + action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . <" + action.blockX + "> strips:is ajan:Clear . \n <" + action.blockX + "> ajan:on <" + action.blockY + "> ."; + action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); @@ -77,7 +79,8 @@ app.post('/unStack', (req, res) => { let action = createAction(wssMessage, "unStack"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); action.blockY = getActionObject(wssMessage, "http://www.ajan.de/ajan-ns#on"); - action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding . \n <" + action.blockY + "> strips:is ajan:Clear ."; + action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding . \n <" + action.blockY + "> strips:is ajan:Clear ."; + action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); @@ -91,7 +94,8 @@ app.post('/putDown', (req, res) => { let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "putDown"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); - action.asyncResponse = "PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . \n <" + action.blockX + "> strips:is ajan:Table . \n <" + action.blockX + "> strips:is ajan:Clear ."; + action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . \n <" + action.blockX + "> strips:is ajan:Table . \n <" + action.blockX + "> strips:is ajan:Clear ."; + action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index a63d3c33..93e64607 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -38,12 +38,15 @@ export default Ember.Component.extend({ response: "", px2em: 16, grabbed: "", + requestMsg: "", + responseMsg: "", + actionType: "", arm: { "id": "demo-arm", "closed": true, "x": 4, "y": -23 }, - purple: { "id": "demo-block-purple", "name": "purple", "d1": 0, "d2": 0 }, - orange: { "id": "demo-block-orange", "name": "orange", "d1": 0, "d2": 1 }, - blue: { "id": "demo-block-blue", "name": "blue", "d1": 0, "d2": 2 }, - green: { "id": "demo-block-green", "name": "green", "d1": 0, "d2": 3 }, + purple: { "id": "demo-block-purple", "name": "purple", "d1": 0, "d2": 0, "color": "#EA5B97" }, + orange: { "id": "demo-block-orange", "name": "orange", "d1": 0, "d2": 1, "color": "#FBBD08" }, + blue: { "id": "demo-block-blue", "name": "blue", "d1": 0, "d2": 2, "color": "#1B3284" }, + green: { "id": "demo-block-green", "name": "green", "d1": 0, "d2": 3, "color": "#8EC8B1" }, table: { "id": "demo-table", "name": "table", "purple": 0, "orange": 1, "blue": 2, "green": 3 }, didInsertElement() { @@ -352,15 +355,23 @@ function myOpenHandler(event) { function myMessageHandler(event) { console.log(`Message: ${event.data}`); let action = $.parseJSON(event.data); + console.log(action.request); + that.set("requestMsg", JSON.stringify(action.request, null, 2)); + console.log(action.asyncResponse); + that.set("responseMsg", action.asyncResponse); console.log(action); if (action.init) initScene(); else if (action.action == "pickUp") { + setActionHeader(action); pickUpBlock(action); } else if (action.action == "stack") { + setActionHeader(action); stackBlock(action); } else if (action.action == "unStack") { + setActionHeader(action); unStackBlock(action); } else if (action.action == "putDown") { + setActionHeader(action); putDownBlock(action); } } @@ -389,3 +400,9 @@ function sendResponse(action) { }); } +function setActionHeader(action) { + that.set("actionType", action.action); + let block = getDemoObject(action.blockX); + $(".actionType").css("color", block.color); +} + diff --git a/app/styles/components/services/demo-service.css b/app/styles/components/services/demo-service.css index 3e21b484..4721bcac 100644 --- a/app/styles/components/services/demo-service.css +++ b/app/styles/components/services/demo-service.css @@ -30,8 +30,9 @@ :global(#demo-playground) { padding-top: 0px; - width: 100%; + width: 50%; height: 30em; + float: left; } :global(#demo-arm) { @@ -154,9 +155,44 @@ border-radius: 0px !important; } -/* clearfix */ -.clearfix::before, -.clearfix::after { +:global(#requestMsg), +:global(#responseMsg) { + float: left; + width: 25%; +} + +:global(#requestMsg h6 span), +:global(#responseMsg h6 span) { + font-size: 9px; + font-style: italic; + font-size: 10px; +} + +:global(.actionType) { + padding: 0px; +} + +:global(#requestMsg textarea), +:global(#responseMsg textarea) { + width: 90%; + min-height: 1.5rem; + font-size: 9px; + resize: vertical; + border: 0px; + padding: 10px; + box-shadow: inset 0px 0px 5px #cccccc; + font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; + background-color: rgb(24, 25, 64); + color: #ffffff; +} + +:global(#responseMsg textarea), +:global(#responseMsg h6) { + margin-left: 10%; +} + + /* clearfix */ + .clearfix::before, .clearfix::after { content: " "; display: table; } diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs index 4c833e05..fa82d551 100644 --- a/app/templates/components/services/demo-service.hbs +++ b/app/templates/components/services/demo-service.hbs @@ -30,10 +30,13 @@ +

Action: {{actionType}} (Block )

+
-

- lorem ipsum dolor .... -

+
+
Async Request Content-Type: application/ld+json
+ +
@@ -44,6 +47,10 @@

green

+
+
Response Content-Type: text/turtle
+ +
From 3a4517e76f4770ff090507fd89a2922fe486a46b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Wed, 7 Aug 2024 16:39:09 +0200 Subject: [PATCH 11/12] minor changes --- ajanDemoService.js | 8 ++++---- app/templates/components/services/demo-service.hbs | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ajanDemoService.js b/ajanDemoService.js index 71a2abcf..d11345c0 100644 --- a/ajanDemoService.js +++ b/ajanDemoService.js @@ -47,7 +47,7 @@ app.post('/pickUp', (req, res) => { let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "pickUp"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Table"); - action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding."; + action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \n<" + action.blockX + "> strips:is ajan:Holding."; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { @@ -63,7 +63,7 @@ app.post('/stack', (req, res) => { let action = createAction(wssMessage, "stack"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); action.blockY = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); - action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . <" + action.blockX + "> strips:is ajan:Clear . \n <" + action.blockX + "> ajan:on <" + action.blockY + "> ."; + action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \najan:Arm strips:is ajan:Empty . <" + action.blockX + "> strips:is ajan:Clear . \n<" + action.blockX + "> ajan:on <" + action.blockY + "> ."; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { @@ -79,7 +79,7 @@ app.post('/unStack', (req, res) => { let action = createAction(wssMessage, "unStack"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); action.blockY = getActionObject(wssMessage, "http://www.ajan.de/ajan-ns#on"); - action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n <" + action.blockX + "> strips:is ajan:Holding . \n <" + action.blockY + "> strips:is ajan:Clear ."; + action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \n<" + action.blockX + "> strips:is ajan:Holding . \n<" + action.blockY + "> strips:is ajan:Clear ."; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { @@ -94,7 +94,7 @@ app.post('/putDown', (req, res) => { let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "putDown"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); - action.asyncResponse = " PREFIX rdf: \n PREFIX ajan: \n PREFIX actn: \n PREFIX strips: \n \n ajan:Arm strips:is ajan:Empty . \n <" + action.blockX + "> strips:is ajan:Table . \n <" + action.blockX + "> strips:is ajan:Clear ."; + action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \najan:Arm strips:is ajan:Empty . \n<" + action.blockX + "> strips:is ajan:Table . \n<" + action.blockX + "> strips:is ajan:Clear ."; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs index fa82d551..d133fb0f 100644 --- a/app/templates/components/services/demo-service.hbs +++ b/app/templates/components/services/demo-service.hbs @@ -34,7 +34,7 @@
-
Async Request Content-Type: application/ld+json
+
Async Request Content-Type: application/ld+json
@@ -48,7 +48,7 @@
-
Response Content-Type: text/turtle
+
Response Content-Type: text/turtle
From 3cda5adb2d4bf0f5cd233bad1f7996a78c41e053 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Antakli?= Date: Thu, 8 Aug 2024 11:33:06 +0200 Subject: [PATCH 12/12] changed respons mime type to application/ld+json --- ajanDemoService.js | 24 +++++++++---------- app/components/services/demo-service.js | 8 +++---- .../components/services/demo-service.hbs | 4 ++-- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/ajanDemoService.js b/ajanDemoService.js index d11345c0..6b373a89 100644 --- a/ajanDemoService.js +++ b/ajanDemoService.js @@ -12,8 +12,8 @@ const port = 4203; const server = http.createServer(app); let running = null; -let response = " ."; -let blocked = " ."; +let response = [{"@id":"http://localhost:4203/ajan-demo-ns#Received"},{"@id":"http://localhost:4203/post","http://localhost:4203/ajan-demo-ns#message":[{"@id":"http://localhost:4203/ajan-demo-ns#Received"}]}]; +let blocked = [{"@id":"http://localhost:4203/ajan-demo-ns#Blocked"},{"@id":"http://localhost:4203/post","http://localhost:4203/ajan-demo-ns#message":[{"@id":"http://localhost:4203/ajan-demo-ns#Blocked"}]}]; const wss = new WebSocket.Server({ server }); app.use(bodyParser.text({ type: 'text/plain', limit: '50mb' })); @@ -38,8 +38,8 @@ app.get('/initScene', (req, res) => { wss.clients.forEach(client => { client.send('{ "init": "true" }'); }); - res.set('Content-Type', 'text/turtle'); - res.send(" true ."); + res.set('Content-Type', 'application/ld+json'); + res.send([{"@id":"http://www.ajan.de/ajan-ns#Scene","http://www.ajan.de/ajan-ns#init":[{"@value":true}]}]); }); app.post('/pickUp', (req, res) => { @@ -47,13 +47,13 @@ app.post('/pickUp', (req, res) => { let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "pickUp"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Table"); - action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \n<" + action.blockX + "> strips:is ajan:Holding."; + action.asyncResponse = [{"@id": action.blockX,"http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Holding"}]},{"@id":"http://www.ajan.de/ajan-ns#Holding"}]; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); }); - res.set('Content-Type', 'text/turtle'); + res.set('Content-Type', 'application/ld+json'); res.send(response); }); @@ -63,13 +63,13 @@ app.post('/stack', (req, res) => { let action = createAction(wssMessage, "stack"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); action.blockY = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); - action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \najan:Arm strips:is ajan:Empty . <" + action.blockX + "> strips:is ajan:Clear . \n<" + action.blockX + "> ajan:on <" + action.blockY + "> ."; + action.asyncResponse = [{"@id":"http://www.ajan.de/ajan-ns#Arm","http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Empty"}]},{"@id": action.blockX,"http://www.ajan.de/ajan-ns#on":[{"@id": action.blockY}]},{"@id": action.blockY},{"@id":"http://www.ajan.de/ajan-ns#Clear"},{"@id":"http://www.ajan.de/ajan-ns#Empty"},{"@id": action.blockX,"http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Clear"}]}]; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); }); - res.set('Content-Type', 'text/turtle'); + res.set('Content-Type', 'application/ld+json'); res.send(response); }); @@ -79,13 +79,13 @@ app.post('/unStack', (req, res) => { let action = createAction(wssMessage, "unStack"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Clear"); action.blockY = getActionObject(wssMessage, "http://www.ajan.de/ajan-ns#on"); - action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \n<" + action.blockX + "> strips:is ajan:Holding . \n<" + action.blockY + "> strips:is ajan:Clear ."; + action.asyncResponse = [{"@id": action.blockX,"http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Holding"}]},{"@id": action.blockY,"http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Clear"}]},{"@id":"http://www.ajan.de/ajan-ns#Clear"},{"@id":"http://www.ajan.de/ajan-ns#Holding"}]; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); }); - res.set('Content-Type', 'text/turtle'); + res.set('Content-Type', 'application/ld+json'); res.send(response); }); @@ -94,13 +94,13 @@ app.post('/putDown', (req, res) => { let wssMessage = JSON.parse(req.body); let action = createAction(wssMessage, "putDown"); action.blockX = getActionSubject(wssMessage, "http://www.ajan.de/ajan-ns#Holding"); - action.asyncResponse = "PREFIX rdf: \nPREFIX ajan: \nPREFIX actn: \nPREFIX strips: \n \najan:Arm strips:is ajan:Empty . \n<" + action.blockX + "> strips:is ajan:Table . \n<" + action.blockX + "> strips:is ajan:Clear ."; + action.asyncResponse = [{"@id":"http://www.ajan.de/ajan-ns#Arm","http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Empty"}]},{"@id": action.blockX,"http://www.ajan.de/behavior/strips-ns#is":[{"@id":"http://www.ajan.de/ajan-ns#Table"},{"@id":"http://www.ajan.de/ajan-ns#Clear"}]},{"@id":"http://www.ajan.de/ajan-ns#Clear"},{"@id":"http://www.ajan.de/ajan-ns#Empty"},{"@id":"http://www.ajan.de/ajan-ns#Table"}]; action.request = wssMessage; let actionRequest = JSON.stringify(action); wss.clients.forEach(client => { client.send(actionRequest); }); - res.set('Content-Type', 'text/turtle'); + res.set('Content-Type', 'application/ld+json'); res.send(response); }); diff --git a/app/components/services/demo-service.js b/app/components/services/demo-service.js index 93e64607..a4053582 100644 --- a/app/components/services/demo-service.js +++ b/app/components/services/demo-service.js @@ -358,7 +358,7 @@ function myMessageHandler(event) { console.log(action.request); that.set("requestMsg", JSON.stringify(action.request, null, 2)); console.log(action.asyncResponse); - that.set("responseMsg", action.asyncResponse); + that.set("responseMsg", JSON.stringify(action.asyncResponse, null, 2)); console.log(action); if (action.init) initScene(); else if (action.action == "pickUp") { @@ -388,13 +388,13 @@ function setTriplestoreField() { } function sendResponse(action) { - console.log(action.asyncResponse); + console.log(JSON.stringify(action.asyncResponse)); console.log(action.requestURI); return $.ajax({ url: action.requestURI, type: "POST", - contentType: "text/turtle", - data: action.asyncResponse, + contentType: "application/ld+json", + data: JSON.stringify(action.asyncResponse), }).catch (function (error) { console.log(error); }); diff --git a/app/templates/components/services/demo-service.hbs b/app/templates/components/services/demo-service.hbs index d133fb0f..87ebf55d 100644 --- a/app/templates/components/services/demo-service.hbs +++ b/app/templates/components/services/demo-service.hbs @@ -34,7 +34,7 @@
-
Async Request Content-Type: application/ld+json
+
Request Content-Type: application/ld+json
@@ -48,7 +48,7 @@
-
Response Content-Type: text/turtle
+
Response Content-Type: application/ld+json