alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display layout alphanumeric (#2203)

Browse Source 
* Support displaying and adding telemerty points in display layouts.

* Create TelemetryView component. Also disable the toolbar frame button for telemetry objects.

* Add 'components' directory and move the toolbar provider definition to a separate file.

* Saving work

* Saving work

* Saving work

* Fix telemetryClass

* Fixes for .no-frame in new markup structure

- CSS cleaned up and reorganized;
- Added .c-telemetry-view classes;

* Add computed properties for hiding label and value.

* Filter value meta data based on the item config display mode.

* Add drop down menus for display mode and value

* Add toolbar controls for telemerty points

* Set border and fill related styles on telemetry view instead of layout item

* Refinements to telemetry view

- Stoke and fill styling now work;
- Internal element layout now much better when sizing in a Layout frame;
- Tweaked color of frame border while editing;

* Prevents adding a new (panel) object if it's already in the composition.

* Fix for jumping edit area

- Removed v-if from Toolbar.vue;
- Refined c-toolbar styling;
- TODO: don't include toolbar component when not editing, and for
components that don't use a toolbar;

* Add a separator toolbar control

* Check for domainObject being on the toolbar item as not all controls have that property

* Hide 'no fill' option from the text palette.
Modify the color-picker component to say 'No border' for stroke palette.

* Move the listener for hasFrame to the subobject view configuration

* Fixes for toolbar-separator

- New mixin;
- Corrected markup for separator;
- New class for .c-toolbar__separator;
- Updated DisplayLayoutToolbar.js to include separators in the right
spots;

* Get type from item.

* Include copyright notice.

* Use arrow function for consistency and define a TEXT_SIZE constant.

* Use composition API to add non-telemetry objects instead of relying on the drop handler.
Display a blocking dialog if an existing non-telemetry object is dropped.

* Fix text color picker icon

* Address reviewer's feedback

* Load the composition and update addObject() to render existing panels as well. Also, cache the telemetry value formatter.

* Add listener for changes to time bounds.

* Code cleanup

* Use getFormatMap() to store formats. Reset telemetry value and class before fetching new data.

* Fix a typo

* Define telemetry class and value as computed properties.

* Change context object definition

* Look at the telemetry metadata to find a good default for the value key instead of defaulting to 'sin'. Also, make formats reactive.

* Use let instead of var.
This commit is contained in:
Pegah Sarram
2018-11-08 17:09:17 -08:00
committed by Pete Richards
parent 55d3ab5e8a
commit d13d59bfa0
17 changed files with 1066 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/plugins/displayLayout/components/TelemetryView.vue Normal file
View File

@@ -0,0 +1,181 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2018, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
<template>
<div class="c-telemetry-view"
:style="styleObject">
<div v-if="showLabel"
class="c-telemetry-view__label">
<div class="c-telemetry-view__label-text">{{ item.domainObject.name }}</div>
</div>
<div v-if="showValue"
class="c-telemetry-view__value"
:class="[telemetryClass]">
<div class="c-telemetry-view__value-text">{{ telemetryValue }}</div>
</div>
</div>
</template>
<style lang="scss">
@import '~styles/sass-base';
.c-telemetry-view {
display: flex;
align-items: stretch;
> * {
// Label and value holders
flex: 1 1 auto;
display: flex;
flex-direction: row;
// justify-content: center;
align-items: center;
overflow: hidden;
padding: $interiorMargin;
> * {
// Text elements
@include ellipsize();
}
}
> * + * {
margin-left: $interiorMargin;
}
.c-frame & {
@include abs();
border: 1px solid transparent;
}
}
</style>
<script>
export default {
inject: ['openmct'],
props: {
item: Object
},
computed: {
showLabel() {
let displayMode = this.item.config.alphanumeric.displayMode;
return displayMode === 'all' || displayMode === 'label';
},
showValue() {
let displayMode = this.item.config.alphanumeric.displayMode;
return displayMode === 'all' || displayMode === 'value';
},
styleObject() {
let alphanumeric = this.item.config.alphanumeric;
return {
backgroundColor: alphanumeric.fill,
borderColor: alphanumeric.stroke,
color: alphanumeric.color,
fontSize: alphanumeric.size
}
},
valueMetadata() {
return this.metadata.value(this.item.config.alphanumeric.value);
},
valueFormatter() {
return this.formats[this.item.config.alphanumeric.value];
},
telemetryValue() {
if (!this.datum) {
return;
}
return this.valueFormatter && this.valueFormatter.format(this.datum);
},
telemetryClass() {
if (!this.datum) {
return;
}
let alarm = this.limitEvaluator && this.limitEvaluator.evaluate(this.datum, this.valueMetadata);
return alarm && alarm.cssClass;
}
},
data() {
return {
datum: {},
formats: {}
}
},
methods: {
requestHistoricalData() {
let bounds = this.openmct.time.bounds();
let options = {
start: bounds.start,
end: bounds.end,
size: 1
};
this.openmct.telemetry.request(this.item.domainObject, options)
.then(data => {
if (data.length > 0) {
this.updateView(data[data.length - 1]);
}
});
},
subscribeToObject() {
this.subscription = this.openmct.telemetry.subscribe(this.item.domainObject, function (datum) {
if (this.openmct.time.clock() !== undefined) {
this.updateView(datum);
}
}.bind(this));
},
updateView(datum) {
this.datum = datum;
},
removeSubscription() {
if (this.subscription) {
this.subscription();
this.subscription = undefined;
}
},
refreshData(bounds, isTick) {
if (!isTick) {
this.datum = undefined;
this.requestHistoricalData(this.item.domainObject);
}
}
},
mounted() {
this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.item.domainObject);
this.metadata = this.openmct.telemetry.getMetadata(this.item.domainObject);
this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
this.requestHistoricalData();
this.subscribeToObject();
this.item.config.attachListeners();
this.openmct.time.on("bounds", this.refreshData);
},
destroyed() {
this.removeSubscription();
this.item.config.removeListeners();
this.openmct.time.off("bounds", this.refreshData);
}
}
</script>