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
After
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.
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.
Leave a Reply