Sensor Web, Geoprocessing, Security & GeoRM, Geostatistics, Semantics, 3D, Ilwis, Earth Observation

Usability improvements for smle – Midterm

June 24th, 2016 @ 09:15 by Aleksandr Shevchenko
Posted in 52°North, GSoC, Metadata Management, Sensor Web

smle /ˈsmaɪ.li/ is one of 52°North’s new developments. It is a SensorML editor based on TypeScript and Angular 2. The implementation of this editor  started earlier this year within the projects NeXOS and FixO3. The idea of the Google Summer of Code activity is to enrich the editor with further functionality and input fields.
After the one month of development in this GSoC project, we can see the progress and can give an insight into the current state of development. The introductory blog post with the plans for all the summer can be found here.

Implemented features

It is worth saying that our plans were changed a bit to adjust the development plans to some further user requirements. As a result, several tasks are implemented which were not presented in the first blog post. All the implemented features are illustrated in this post.

GUI structure improvement

As was written in the initial post, the smle interface was very big, complex and uncomfortable to use because of the visually nested elements. During the first week, I designed and implemented the new UI architecture which reduced visual nesting by using stacked editor cards. The following figures demonstrate the difference between the look and feel of the old and new interfaces.
Before
Old smle UI

After
New smle UI
As you can see, the interface has became more compact and easier to use.

Development of the new UI components

There are some new editor components developed for the following SensorML inputs:

  • Keywords
  • Classifiers
  • Identifiers
  • Terms (as elements of the three input types above)

These classes provide a basis for a lot of SensorML entities and it will help us in the future developments.

Customization of displaying fields

SensorML entities may contain a lot of specific attributes which are not necessary for current users. Keeping this in mind, I have developed the mechanism for configuring the fields displayed in the editor. I use JSON to describe this configuration. When the application starts in the browser, it fetches the configuration and hides the fields listed there.
Currently, the configuration JSON looks like this:

{
  "DescribedObject": {
    "keywords": {
      "codeSpace": false,
      "definition": false,
      "identifier": false,
      "label": false,
      "description": false,
      "id": false,
      "extension": false
    },
    "identification": {
      "identifiers": {
        "codeSpace": false,
        "definition": false,
        "id": false,
        "extension": false
      },
      "definition": false,
      "identifier": false,
      "label": false,
      "description": false,
      "id": false,
      "extension": false
    },
    "classification": {
      "classifiers": {
        "codeSpace": false,
        "definition": false,
        "id": false,
        "extension": false
      },
      "definition": false,
      "identifier": false,
      "label": false,
      "description": false,
      "id": false,
      "extension": false
    },
    "language": false
  }
}

It is simply the enumeration of hidden fields (fields are displayed by default) and the fields of the nested objects. Of course, there is a “Show all” checkbox on the each editor card, so the user can see all the fields in one click.
smle "Show all" function

Further work

For the next two months we have a big plans. As described in the first post, we need to develop a lot of new specific UI components, such as date picker, map component and others. Also we need to connect smle with SOS servers that shall be used as sensor metadata repositories and make other usability improvements such as validation, hotkey support, etc.
Please follow the project on the GitHub repository and Wiki page.

0 Comments »

No comments yet.

RSS feed for comments on this post.

Leave a comment

Time limit is exhausted. Please reload CAPTCHA.