search

eclipse-thingweb / playground

Browser application for validating and designing W3C Thing Descriptions and Thing Models.
https://playground.thingweb.io/
Other
29 stars 19 forks source link

Creating a TD/TM from other Formats #591

Open egekorkan opened 3 months ago

egekorkan commented 3 months ago

In a discussion today, we had the idea to put more functionality to the + button where other formats can be given in a small pop-up window. For now, the easiest would be to add AID to TD converter in there and allow AID as an input. In the future, we can have OPC UA Nodeset file, Open or Async API converters. The editor field below will still just see TDs.

So the workflow would be:

  1. Click the + button. This can be right click or long click. If it is not a simple click, the current behavior for a simple click stays the same.
  2. A pop-up window appears. Anything that happens in this window should result in a TD or TM being "pasted" to the monaco editor below.
  3. Multiple input formats appear.
  4. First one is the TD template we currently have. We can add another button for TM
  5. There are other buttons for AID, OPC UA nodeset, Open API etc.
  6. Clicking on one of them, shows an editor window to just paste some text.
  7. Clicking another button below transforms that format to TD or TM
danielpeintner commented 3 months ago

I think the idea of having more functionality is fine. About to "use" the + button I am not so sure. Do people understand that there is a right click? This expectation does not exist for web applications ... I think.

Maybe we can have a pull-down menu next to + that allows more.. just an idea.

egekorkan commented 3 months ago

Yeah I am also not sure about the UX about hidden clicks etc. v button for a pulldown makes also sense or simply another button with a convert meaning. Alternatively, the + button can enlarge when the mouse hovers over it.

SergioCasCeb commented 3 months ago

Considering the feedback and the conversation with @egekorkan , we came up with the following ideas.

  1. Firstly the option to import another format, could be displayed in the control menu from the left, which shows this functionality as a feature rather than an afterthought. Additionally, the import feature will also appear next to the plus + button as a quick access option.

import-feature

  1. The pop-up window for importing and converting other formats, will have two editors, one for the Thing and the other for any extra (JSON) parameters that might be needed for the conversion.

import-window

  1. Finally, if an error were to occur (conversion failed) this will be displayed under the editors and will stay there unless the user closes it manually. This is to provide more information to the user, that should not get lost in the console.

import-fail-msg

egekorkan commented 3 months ago

Just one thing about the error: it should be a text field since we can dump long error messages there.

sebastiankb commented 3 months ago

Many thanks for this UI preview. Here are some comments.

  1. Picture 1: The Tab "+ | Import" should be only "+"
  2. Proposal: clicking on "+", a small sub-menu opens with 2 entries: 1. Add plain TD 2. Import Alternative Device Descriptions
  3. The "Import" Button on the left hand side should have symbol of an TD, AID, etc.. The idea is to give the impression to the user, that also other device description can be imported
  4. in the Import window (picture 2 above): The tab "AAS AID" should say "AAS AID (JSON)"
  5. an Upload File option would be also great
  6. picture 3 above: there should be the option to see more details of an error (@kaz040 can provide a JSON Schema for validation)
SergioCasCeb commented 3 months ago

Hey @sebastiankb and @egekorkan, thank you for the feedback.