Skip to content

Commit

Permalink
Merge pull request #505 from SergioCasCeb/Changes-web-new
Browse files Browse the repository at this point in the history
New AAS/AID visualization view
  • Loading branch information
egekorkan authored Oct 9, 2023
2 parents 73b4289 + c8ca466 commit 679848e
Show file tree
Hide file tree
Showing 12 changed files with 968 additions and 732 deletions.
69 changes: 58 additions & 11 deletions packages/web-new/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion packages/web-new/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"webpack-dev-server": "^4.15.1"
},
"dependencies": {
"@node-wot/td-tools": "^0.8.8",
"d3": "^3.5.17",
"d3-tip": "^0.6.7",
"express": "^4.18.2",
Expand All @@ -51,4 +52,4 @@
"vega": "^5.22.1",
"vega-embed": "^6.21.0"
}
}
}
4 changes: 2 additions & 2 deletions packages/web-new/server/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*/

const express = require('express')
const port = 5000
const port = 5100

const app = express()

Expand All @@ -24,4 +24,4 @@ app.use(express.urlencoded({extended: false}))

app.use('/', express.static('./dist/'))

app.listen(port, () => console.log(`Server started on port ${port}`))
app.listen(port, () => console.log(`Server started on port ${port}`))
20 changes: 10 additions & 10 deletions packages/web-new/src/examples-paths/examples-paths.json
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,6 @@
"description": "A simple Thing Description using CoAP. The target resource is specified in the Thing Description by the href member of a form and the request method (e.g., GET, PUT, POST, or DELETE) is specified using the cov:method member of a form.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/CoAP-simple-td-no-defaults.td.jsonld"
},
"extended-forms-multiple-op.td.jsonld": {
"title": "Extended Forms Multiple op",
"description": "In the case of a forms entry that has multiple op values the usage of the htv:methodName is not permitted. A TD Processor will extend the multiple op values to separate forms entries and associates a single operation with the default assumption.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/extended-forms-multiple-op.td.jsonld"
},
"HTTP-readproperty.td.jsonld": {
"title": "HTTP readproperty",
"description": "This example shows the binding of the readproperty operation for the HTTP.",
Expand All @@ -148,6 +143,11 @@
"description": "This example shows the minimal set of terms to configure a single coil reading using Modbus. Notice that the unitID is contained in the href as the first element of the path.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/Modbus-single-coil.td.jsonld"
},
"extended-forms-multiple-op.td.jsonld": {
"title": "Extended Forms Multiple op",
"description": "In the case of a forms entry that has multiple op values the usage of the htv:methodName is not permitted. A TD Processor will extend the multiple op values to separate forms entries and associates a single operation with the default assumption.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/5-protocols/extended-forms-multiple-op.td.jsonld"
},
"subprotocol-longpoll.td.jsonld": {
"title": "Subprotocol Longpoll",
"description": "protocols may have defined Subprotocols that can be used for some interaction types. For example, to receive asynchronous notifications using HTTP, some servers may support long polling.",
Expand All @@ -158,6 +158,11 @@
"6-security-schemas": {
"description": "This category contains various examples concerning the different types of security schemas that could/should be used for a Thing Description, as well as the different ways to combine multiple security schemes.",
"examples": {
"OAuth2-scopes.td.jsonld": {
"title": "OAuth2 Scopes",
"description": "OAuth 2.0 makes use of scopes. These are identifiers that may appear in tokens and must match with corresponding identifiers in a resource to allow access to that resource.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/OAuth2-scopes.td.jsonld"
},
"apikey-in-body-simplified.td.jsonld": {
"title": "Apikey In Body Simplified",
"description": "It is possbile to simplify how security parameters are included in the payload by using the feature that the location referenced by a JSON pointer in a body location will be automatically inserted if it does not exist.",
Expand Down Expand Up @@ -207,11 +212,6 @@
"title": "noSec Security",
"description": "Security configuration in the TD is mandatory, therefore the nosec security scheme is provided for the case that no security is needed.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/noSec-security.td.jsonld"
},
"OAuth2-scopes.td.jsonld": {
"title": "OAuth2 Scopes",
"description": "OAuth 2.0 makes use of scopes. These are identifiers that may appear in tokens and must match with corresponding identifiers in a resource to allow access to that resource.",
"path": "https://raw.githubusercontent.com/eclipse-thingweb/playground/master/examples/td/6-security-schemas/OAuth2-scopes.td.jsonld"
}
}
},
Expand Down
77 changes: 77 additions & 0 deletions packages/web-new/src/scripts/aas.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/*
* Copyright (c) 2023 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0, or the W3C Software Notice and
* Document License (2015-05-13) which is available at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document.
*
* SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
*/

/**
* @file The `aas.js` takes care of the main functionality for the
* AAS AID feature within the console. This include initializing the editor,
* connecting it to the local storage, as well as the main buttons within the AAS
* feature such as json, yaml conversion and the download option.
*/

import { editor } from 'monaco-editor'
import { setFontSize, editorForm, fontSizeSlider } from './settings-menu'
import { generateTD, offerFileDownload } from './util'
import { getEditorData } from './editor'

/******************************************************************/
/* AAS functionality */
/******************************************************************/

//AAS Elements
export const AASTab = document.querySelector(".aas-tab-btn")
export const AASJsonBtn = document.querySelector("#aas-json")
export const AASView = document.querySelector("#aas-view")
const AASDownload = document.querySelector("#aas-download")

/**
* Initialize the monaco editor for the AAS feature, sets it to an empty value,
* a default language of json and as a read only document. Also it connects the editor
* to the local storage to change the fontsize correspondingly
*/
async function initAASEditor() {
window.AASEditor = editor.create(document.getElementById('aas-container'), {
value: "",
language: "json",
automaticLayout: true,
readOnly: true,
formatOnPaste: true
})

document.onload = setFontSize(window.AASEditor)
fontSizeSlider.addEventListener("input", () => {
setFontSize(window.AASEditor)
})

//Bind the reset button form the settings to the editor and assign the specied font size
editorForm.addEventListener("reset", () => {
setFontSize(window.AASEditor)
})
}

initAASEditor()


//Donwload btn
AASDownload.addEventListener("click", () => {
const editorData = getEditorData(window.AASEditor)
const contentType = `application/${editorData[0]};charset=utf-8;`
const visualizationName = editorData[2]["submodelElements"][0]["value"][0]["value"]

offerFileDownload(
`${visualizationName}-AAS.${editorData[0]}`,
window.AASEditor.getModel().getValue(),
contentType
)
})
Loading

0 comments on commit 679848e

Please sign in to comment.