mirror of
https://github.com/nasa/openmct.git
synced 2025-06-24 02:04:02 +00:00
Remove legacy codebase (#4844)
* Remove legacy codebase * Remove legacy docs * Fixed memory leak in timer spec * Remove Angular dependency * Removed adapter layer * Removed legacy support plugin from main Open MCT repo * Restored TelemetryAPI.js which had been inexplicably deleted? * Fix linting error * Drop line coverage threshold due to removed code * Added a section on Open MCT 2.0.0 to the readme
This commit is contained in:
Andrew Henry
GitHub
@ -1,89 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([], function () {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* An example of using the `exportService`; queries for telemetry
|
||||
* and provides the results as a CSV file.
|
||||
* @param {platform/exporters.ExportService} exportService the
|
||||
* service which will handle the CSV export
|
||||
* @param {ActionContext} context the action's context
|
||||
* @constructor
|
||||
* @memberof example/export
|
||||
* @implements {Action}
|
||||
*/
|
||||
function ExportTelemetryAsCSVAction(exportService, context) {
|
||||
this.exportService = exportService;
|
||||
this.context = context;
|
||||
}
|
||||
|
||||
ExportTelemetryAsCSVAction.prototype.perform = function () {
|
||||
var context = this.context,
|
||||
domainObject = context.domainObject,
|
||||
telemetry = domainObject.getCapability("telemetry"),
|
||||
metadata = telemetry.getMetadata(),
|
||||
domains = metadata.domains,
|
||||
ranges = metadata.ranges,
|
||||
exportService = this.exportService;
|
||||
|
||||
function getName(domainOrRange) {
|
||||
return domainOrRange.name;
|
||||
}
|
||||
|
||||
telemetry.requestData({}).then(function (series) {
|
||||
var headers = domains.map(getName).concat(ranges.map(getName)),
|
||||
rows = [],
|
||||
row,
|
||||
i;
|
||||
|
||||
function copyDomainsToRow(telemetryRow, index) {
|
||||
domains.forEach(function (domain) {
|
||||
telemetryRow[domain.name] = series.getDomainValue(index, domain.key);
|
||||
});
|
||||
}
|
||||
|
||||
function copyRangesToRow(telemetryRow, index) {
|
||||
ranges.forEach(function (range) {
|
||||
telemetryRow[range.name] = series.getRangeValue(index, range.key);
|
||||
});
|
||||
}
|
||||
|
||||
for (i = 0; i < series.getPointCount(); i += 1) {
|
||||
row = {};
|
||||
copyDomainsToRow(row, i);
|
||||
copyRangesToRow(row, i);
|
||||
rows.push(row);
|
||||
}
|
||||
|
||||
exportService.exportCSV(rows, { headers: headers });
|
||||
});
|
||||
};
|
||||
|
||||
ExportTelemetryAsCSVAction.appliesTo = function (context) {
|
||||
return context.domainObject
|
||||
&& context.domainObject.hasCapability("telemetry");
|
||||
};
|
||||
|
||||
return ExportTelemetryAsCSVAction;
|
||||
});
|
||||
@ -1,46 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./ExportTelemetryAsCSVAction'
|
||||
], function (ExportTelemetryAsCSVAction) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/export",
|
||||
definition: {
|
||||
"name": "Example of using CSV Export",
|
||||
"extensions": {
|
||||
"actions": [
|
||||
{
|
||||
"key": "example.export",
|
||||
"name": "Export Telemetry as CSV",
|
||||
"implementation": ExportTelemetryAsCSVAction,
|
||||
"category": "contextual",
|
||||
"cssClass": "icon-download",
|
||||
"depends": ["exportService"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,53 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/ExampleFormController"
|
||||
], function (
|
||||
ExampleFormController
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/forms",
|
||||
definition: {
|
||||
"name": "Declarative Forms example",
|
||||
"sources": "src",
|
||||
"extensions": {
|
||||
"controllers": [
|
||||
{
|
||||
"key": "ExampleFormController",
|
||||
"implementation": ExampleFormController,
|
||||
"depends": [
|
||||
"$scope"
|
||||
]
|
||||
}
|
||||
],
|
||||
"routes": [
|
||||
{
|
||||
"templateUrl": "templates/exampleForm.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,42 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div ng-controller="ExampleFormController">
|
||||
<mct-toolbar structure="toolbar"
|
||||
ng-model="state"
|
||||
name="aToolbar"></mct-toolbar>
|
||||
|
||||
<mct-form structure="form"
|
||||
ng-model="state"
|
||||
class="validates"
|
||||
name="aForm"></mct-form>
|
||||
|
||||
<ul>
|
||||
<li>Dirty: {{aForm.$dirty}}</li>
|
||||
<li>Valid: {{aForm.$valid}}</li>
|
||||
</ul>
|
||||
|
||||
<pre>
|
||||
<textarea>
|
||||
{{state | json}}
|
||||
</textarea>
|
||||
</pre>
|
||||
</div>
|
||||
@ -1,205 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
function ExampleFormController($scope) {
|
||||
$scope.state = {
|
||||
|
||||
};
|
||||
|
||||
$scope.toolbar = {
|
||||
name: "An example toolbar.",
|
||||
sections: [
|
||||
{
|
||||
description: "First section",
|
||||
items: [
|
||||
{
|
||||
name: "X",
|
||||
description: "X coordinate",
|
||||
control: "textfield",
|
||||
pattern: "^\\d+$",
|
||||
disabled: true,
|
||||
size: 2,
|
||||
key: "x"
|
||||
},
|
||||
{
|
||||
name: "Y",
|
||||
description: "Y coordinate",
|
||||
control: "textfield",
|
||||
pattern: "^\\d+$",
|
||||
size: 2,
|
||||
key: "y"
|
||||
},
|
||||
{
|
||||
name: "W",
|
||||
description: "Cell width",
|
||||
control: "textfield",
|
||||
pattern: "^\\d+$",
|
||||
size: 2,
|
||||
key: "w"
|
||||
},
|
||||
{
|
||||
name: "H",
|
||||
description: "Cell height",
|
||||
control: "textfield",
|
||||
pattern: "^\\d+$",
|
||||
size: 2,
|
||||
key: "h"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
description: "Second section",
|
||||
items: [
|
||||
{
|
||||
control: "button",
|
||||
csslass: "icon-save",
|
||||
click: function () {
|
||||
console.log("Save");
|
||||
}
|
||||
},
|
||||
{
|
||||
control: "button",
|
||||
csslass: "icon-x",
|
||||
description: "Button B",
|
||||
click: function () {
|
||||
console.log("Cancel");
|
||||
}
|
||||
},
|
||||
{
|
||||
control: "button",
|
||||
csslass: "icon-trash",
|
||||
description: "Button C",
|
||||
disabled: true,
|
||||
click: function () {
|
||||
console.log("Delete");
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
control: "color",
|
||||
key: "color"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
$scope.form = {
|
||||
name: "An example form.",
|
||||
sections: [
|
||||
{
|
||||
name: "First section",
|
||||
rows: [
|
||||
{
|
||||
name: "Check me",
|
||||
control: "checkbox",
|
||||
key: "checkMe"
|
||||
},
|
||||
{
|
||||
name: "Enter your name",
|
||||
required: true,
|
||||
control: "textfield",
|
||||
key: "yourName"
|
||||
},
|
||||
{
|
||||
name: "Enter a number",
|
||||
control: "textfield",
|
||||
pattern: "^\\d+$",
|
||||
key: "aNumber"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Second section",
|
||||
rows: [
|
||||
{
|
||||
name: "Pick a date",
|
||||
required: true,
|
||||
description: "Enter date in form YYYY-DDD",
|
||||
control: "datetime",
|
||||
key: "aDate"
|
||||
},
|
||||
{
|
||||
name: "Choose something",
|
||||
control: "select",
|
||||
options: [
|
||||
{
|
||||
name: "Hats",
|
||||
value: "hats"
|
||||
},
|
||||
{
|
||||
name: "Bats",
|
||||
value: "bats"
|
||||
},
|
||||
{
|
||||
name: "Cats",
|
||||
value: "cats"
|
||||
},
|
||||
{
|
||||
name: "Mats",
|
||||
value: "mats"
|
||||
}
|
||||
],
|
||||
key: "aChoice"
|
||||
},
|
||||
{
|
||||
name: "Choose something",
|
||||
control: "select",
|
||||
required: true,
|
||||
options: [
|
||||
{
|
||||
name: "Hats",
|
||||
value: "hats"
|
||||
},
|
||||
{
|
||||
name: "Bats",
|
||||
value: "bats"
|
||||
},
|
||||
{
|
||||
name: "Cats",
|
||||
value: "cats"
|
||||
},
|
||||
{
|
||||
name: "Mats",
|
||||
value: "mats"
|
||||
}
|
||||
],
|
||||
key: "aRequiredChoice"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
return ExampleFormController;
|
||||
}
|
||||
);
|
||||
@ -1,48 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/ExampleIdentityService"
|
||||
], function (
|
||||
ExampleIdentityService
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/identity",
|
||||
definition: {
|
||||
"extensions": {
|
||||
"components": [
|
||||
{
|
||||
"implementation": ExampleIdentityService,
|
||||
"provides": "identityService",
|
||||
"type": "provider",
|
||||
"depends": [
|
||||
"dialogService",
|
||||
"$q"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,94 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
var DEFAULT_IDENTITY = {
|
||||
key: "user",
|
||||
name: "Example User"
|
||||
},
|
||||
DIALOG_STRUCTURE = {
|
||||
name: "Identify Yourself",
|
||||
sections: [{
|
||||
rows: [
|
||||
{
|
||||
name: "User ID",
|
||||
control: "textfield",
|
||||
key: "key",
|
||||
required: true
|
||||
},
|
||||
{
|
||||
name: "Human name",
|
||||
control: "textfield",
|
||||
key: "name",
|
||||
required: true
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
/**
|
||||
* Example implementation of an identity service. This prompts the
|
||||
* user to enter a name and user ID; in a more realistic
|
||||
* implementation, this would be read from a server, possibly
|
||||
* prompting for a user name and password (or similar) as
|
||||
* appropriate.
|
||||
*
|
||||
* @implements {IdentityService}
|
||||
* @memberof platform/identity
|
||||
*/
|
||||
function ExampleIdentityProvider(dialogService, $q) {
|
||||
this.dialogService = dialogService;
|
||||
this.$q = $q;
|
||||
|
||||
this.returnUser = this.returnUser.bind(this);
|
||||
this.returnUndefined = this.returnUndefined.bind(this);
|
||||
}
|
||||
|
||||
ExampleIdentityProvider.prototype.getUser = function () {
|
||||
if (this.user) {
|
||||
return this.$q.when(this.user);
|
||||
} else {
|
||||
return this.dialogService.getUserInput(DIALOG_STRUCTURE, DEFAULT_IDENTITY)
|
||||
.then(this.returnUser, this.returnUndefined);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ExampleIdentityProvider.prototype.returnUser = function (user) {
|
||||
return this.user = user;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ExampleIdentityProvider.prototype.returnUndefined = function () {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
return ExampleIdentityProvider;
|
||||
}
|
||||
);
|
||||
@ -1,41 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([], function () {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/mobile",
|
||||
definition: {
|
||||
"name": "Mobile",
|
||||
"description": "Allows elements with pertinence to mobile usage and development",
|
||||
"extensions": {
|
||||
"stylesheets": [
|
||||
{
|
||||
"stylesheetUrl": "css/mobile-example.css",
|
||||
"priority": "mandatory"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
@import "../../../../platform/commonUI/general/res/sass/constants";
|
||||
@import "../../../../platform/commonUI/general/res/sass/mobile/constants";
|
||||
@import "../../../../platform/commonUI/general/res/sass/mobile/mixins";
|
||||
|
||||
@include phoneandtablet {
|
||||
// Show the Create button
|
||||
.create-button-holder {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
To use this bundle, add the following paths to /main.js -
|
||||
'./platform/features/conductor/bundle',
|
||||
'./example/msl/bundle',
|
||||
|
||||
An example plugin that integrates with public data from the Curiosity rover.
|
||||
The data shown used by this plugin is published by the Centro de
|
||||
Astrobiología (CSIC-INTA) at http://cab.inta-csic.es/rems/
|
||||
|
||||
Fetching data from this source requires a cross-origin request which will
|
||||
fail on most modern browsers due to restrictions on such requests. As such,
|
||||
it is proxied through a local proxy defined in app.js. In order to use this
|
||||
example you will need to run app.js locally.
|
||||
|
||||
This example shows integration with an historical telemetry source, as
|
||||
opposed to a real-time data source that is streaming back current information
|
||||
about the state of a system. This example is atypical of a historical data
|
||||
source in that it fetches all data in one request. The server infrastructure
|
||||
of an historical telemetry source should ideally allow queries bounded by
|
||||
time and other data attributes.
|
||||
|
||||
@ -1,115 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/RemsTelemetryServerAdapter",
|
||||
"./src/RemsTelemetryModelProvider",
|
||||
"./src/RemsTelemetryProvider"
|
||||
], function (
|
||||
RemsTelemetryServerAdapter,
|
||||
RemsTelemetryModelProvider,
|
||||
RemsTelemetryProvider
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/msl",
|
||||
definition: {
|
||||
"name": "Mars Science Laboratory Data Adapter",
|
||||
"extensions": {
|
||||
"types": [
|
||||
{
|
||||
"name": "Mars Science Laboratory",
|
||||
"key": "msl.curiosity",
|
||||
"cssClass": "icon-object"
|
||||
},
|
||||
{
|
||||
"name": "Instrument",
|
||||
"key": "msl.instrument",
|
||||
"cssClass": "icon-object",
|
||||
"model": {"composition": []}
|
||||
},
|
||||
{
|
||||
"name": "Measurement",
|
||||
"key": "msl.measurement",
|
||||
"cssClass": "icon-telemetry",
|
||||
"model": {"telemetry": {}},
|
||||
"telemetry": {
|
||||
"source": "rems.source",
|
||||
"domains": [
|
||||
{
|
||||
"name": "Time",
|
||||
"key": "utc",
|
||||
"format": "utc"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"constants": [
|
||||
{
|
||||
"key": "REMS_WS_URL",
|
||||
"value": "/proxyUrl?url=http://cab.inta-csic.es/rems/wp-content/plugins/marsweather-widget/api.php"
|
||||
}
|
||||
],
|
||||
"roots": [
|
||||
{
|
||||
"id": "msl:curiosity"
|
||||
}
|
||||
],
|
||||
"models": [
|
||||
{
|
||||
"id": "msl:curiosity",
|
||||
"priority": "preferred",
|
||||
"model": {
|
||||
"type": "msl.curiosity",
|
||||
"name": "Mars Science Laboratory",
|
||||
"composition": ["msl_tlm:rems"]
|
||||
}
|
||||
}
|
||||
],
|
||||
"services": [
|
||||
{
|
||||
"key": "rems.adapter",
|
||||
"implementation": RemsTelemetryServerAdapter,
|
||||
"depends": ["$http", "$log", "REMS_WS_URL"]
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"provides": "modelService",
|
||||
"type": "provider",
|
||||
"implementation": RemsTelemetryModelProvider,
|
||||
"depends": ["rems.adapter"]
|
||||
},
|
||||
{
|
||||
"provides": "telemetryService",
|
||||
"type": "provider",
|
||||
"implementation": RemsTelemetryProvider,
|
||||
"depends": ["rems.adapter", "$q"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,78 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
/**
|
||||
* A data dictionary describes the telemetry available from a data
|
||||
* source and its data types. The data dictionary will be parsed by a custom
|
||||
* server provider for this data source (in this case
|
||||
* {@link RemsTelemetryServerAdapter}).
|
||||
*
|
||||
* Typically a data dictionary would be made available alongside the
|
||||
* telemetry data source itself.
|
||||
*/
|
||||
function () {
|
||||
return {
|
||||
"name": "Mars Science Laboratory",
|
||||
"identifier": "msl",
|
||||
"instruments": [
|
||||
{
|
||||
"name": "rems",
|
||||
"identifier": "rems",
|
||||
"measurements": [
|
||||
{
|
||||
"name": "Min. Air Temperature",
|
||||
"identifier": "min_temp",
|
||||
"units": "Degrees (C)",
|
||||
"type": "float"
|
||||
},
|
||||
{
|
||||
"name": "Max. Air Temperature",
|
||||
"identifier": "max_temp",
|
||||
"units": "Degrees (C)",
|
||||
"type": "float"
|
||||
},
|
||||
{
|
||||
"name": "Atmospheric Pressure",
|
||||
"identifier": "pressure",
|
||||
"units": "Millibars",
|
||||
"type": "float"
|
||||
},
|
||||
{
|
||||
"name": "Min. Ground Temperature",
|
||||
"identifier": "min_gts_temp",
|
||||
"units": "Degrees (C)",
|
||||
"type": "float"
|
||||
},
|
||||
{
|
||||
"name": "Max. Ground Temperature",
|
||||
"identifier": "max_gts_temp",
|
||||
"units": "Degrees (C)",
|
||||
"type": "float"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
);
|
||||
@ -1,96 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
var PREFIX = "msl_tlm:",
|
||||
FORMAT_MAPPINGS = {
|
||||
float: "number",
|
||||
integer: "number",
|
||||
string: "string"
|
||||
};
|
||||
|
||||
function RemsTelemetryModelProvider(adapter) {
|
||||
|
||||
function isRelevant(id) {
|
||||
return id.indexOf(PREFIX) === 0;
|
||||
}
|
||||
|
||||
function makeId(element) {
|
||||
return PREFIX + element.identifier;
|
||||
}
|
||||
|
||||
function buildTaxonomy(dictionary) {
|
||||
var models = {};
|
||||
|
||||
function addMeasurement(measurement, parent) {
|
||||
var format = FORMAT_MAPPINGS[measurement.type];
|
||||
models[makeId(measurement)] = {
|
||||
type: "msl.measurement",
|
||||
name: measurement.name,
|
||||
location: parent,
|
||||
telemetry: {
|
||||
key: measurement.identifier,
|
||||
ranges: [{
|
||||
key: "value",
|
||||
name: measurement.units,
|
||||
units: measurement.units,
|
||||
format: format
|
||||
}]
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function addInstrument(subsystem, spacecraftId) {
|
||||
var measurements = (subsystem.measurements || []),
|
||||
instrumentId = makeId(subsystem);
|
||||
|
||||
models[instrumentId] = {
|
||||
type: "msl.instrument",
|
||||
name: subsystem.name,
|
||||
location: spacecraftId,
|
||||
composition: measurements.map(makeId)
|
||||
};
|
||||
measurements.forEach(function (measurement) {
|
||||
addMeasurement(measurement, instrumentId);
|
||||
});
|
||||
}
|
||||
|
||||
(dictionary.instruments || []).forEach(function (instrument) {
|
||||
addInstrument(instrument, "msl:curiosity");
|
||||
});
|
||||
|
||||
return models;
|
||||
}
|
||||
|
||||
return {
|
||||
getModels: function (ids) {
|
||||
return ids.some(isRelevant) ? buildTaxonomy(adapter.dictionary) : {};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return RemsTelemetryModelProvider;
|
||||
}
|
||||
);
|
||||
@ -1,83 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
define (
|
||||
['./RemsTelemetrySeries'],
|
||||
function (RemsTelemetrySeries) {
|
||||
"use strict";
|
||||
|
||||
var SOURCE = "rems.source";
|
||||
|
||||
function RemsTelemetryProvider(adapter, $q) {
|
||||
this.adapter = adapter;
|
||||
this.$q = $q;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve telemetry from this telemetry source.
|
||||
* @memberOf example/msl
|
||||
* @param {Array<TelemetryRequest>} requests An array of all request
|
||||
* objects (which needs to be filtered to only those relevant to this
|
||||
* source)
|
||||
* @returns {Promise} A {@link Promise} resolved with a {@link RemsTelemetrySeries}
|
||||
* object that wraps the telemetry returned from the telemetry source.
|
||||
*/
|
||||
RemsTelemetryProvider.prototype.requestTelemetry = function (requests) {
|
||||
var packaged = {},
|
||||
relevantReqs,
|
||||
adapter = this.adapter;
|
||||
|
||||
function matchesSource(request) {
|
||||
return (request.source === SOURCE);
|
||||
}
|
||||
|
||||
function addToPackage(history) {
|
||||
packaged[SOURCE][history.id] =
|
||||
new RemsTelemetrySeries(history.values);
|
||||
}
|
||||
|
||||
function handleRequest(request) {
|
||||
return adapter.history(request).then(addToPackage);
|
||||
}
|
||||
|
||||
relevantReqs = requests.filter(matchesSource);
|
||||
packaged[SOURCE] = {};
|
||||
|
||||
return this.$q.all(relevantReqs.map(handleRequest))
|
||||
.then(function () {
|
||||
return packaged;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* This data source does not support real-time subscriptions
|
||||
*/
|
||||
RemsTelemetryProvider.prototype.subscribe = function (callback, requests) {
|
||||
return function () {};
|
||||
};
|
||||
|
||||
RemsTelemetryProvider.prototype.unsubscribe = function (callback, requests) {
|
||||
return function () {};
|
||||
};
|
||||
|
||||
return RemsTelemetryProvider;
|
||||
}
|
||||
);
|
||||
@ -1,84 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
define(
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* @typedef {Object} RemsTelemetryValue
|
||||
* @memberOf example/msl
|
||||
* @property {number} date The date/time of the telemetry value. Constitutes the domain value of this value pair
|
||||
* @property {number} value The value of this telemetry datum.
|
||||
* A floating point value representing some observable quantity (eg.
|
||||
* temperature, air pressure, etc.)
|
||||
*/
|
||||
|
||||
/**
|
||||
* A representation of a collection of telemetry data. The REMS
|
||||
* telemetry data is time ordered, with the 'domain' value
|
||||
* constituting the time stamp of each data value and the
|
||||
* 'range' being the value itself.
|
||||
*
|
||||
* TelemetrySeries will typically wrap an array of telemetry data,
|
||||
* and provide an interface for retrieving individual an telemetry
|
||||
* value.
|
||||
* @memberOf example/msl
|
||||
* @param {Array<RemsTelemetryValue>} data An array of telemetry values
|
||||
* @constructor
|
||||
*/
|
||||
function RemsTelemetrySeries(data) {
|
||||
this.data = data;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {number} A count of the number of data values available in
|
||||
* this series
|
||||
*/
|
||||
RemsTelemetrySeries.prototype.getPointCount = function () {
|
||||
return this.data.length;
|
||||
};
|
||||
|
||||
/**
|
||||
* The domain value at the given index. The Rems telemetry data is
|
||||
* time ordered, so the domain value is the time stamp of each data
|
||||
* value.
|
||||
* @param index
|
||||
* @returns {number} the time value in ms since 1 January 1970
|
||||
*/
|
||||
RemsTelemetrySeries.prototype.getDomainValue = function (index) {
|
||||
return this.data[index].date;
|
||||
};
|
||||
|
||||
/**
|
||||
* The range value of the REMS data set is the value of the thing
|
||||
* being measured, be it temperature, air pressure, etc.
|
||||
* @param index The datum in the data series to return the range
|
||||
* value of.
|
||||
* @returns {number} A floating point number
|
||||
*/
|
||||
RemsTelemetrySeries.prototype.getRangeValue = function (index) {
|
||||
return this.data[index].value;
|
||||
};
|
||||
|
||||
return RemsTelemetrySeries;
|
||||
}
|
||||
);
|
||||
@ -1,145 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
/*jslint es5: true */
|
||||
|
||||
define(
|
||||
[
|
||||
"./MSLDataDictionary",
|
||||
"module"
|
||||
],
|
||||
function (MSLDataDictionary, module) {
|
||||
"use strict";
|
||||
|
||||
var TERRESTRIAL_DATE = "terrestrial_date",
|
||||
LOCAL_DATA = "../data/rems.json";
|
||||
|
||||
/**
|
||||
* Fetches historical data from the REMS instrument on the Curiosity
|
||||
* Rover.
|
||||
* @memberOf example/msl
|
||||
* @param $q
|
||||
* @param $http
|
||||
* @param REMS_WS_URL The location of the REMS telemetry data.
|
||||
* @constructor
|
||||
*/
|
||||
function RemsTelemetryServerAdapter($http, $log, REMS_WS_URL) {
|
||||
this.localDataURI = module.uri.substring(0, module.uri.lastIndexOf('/') + 1) + LOCAL_DATA;
|
||||
this.REMS_WS_URL = REMS_WS_URL;
|
||||
this.$http = $http;
|
||||
this.$log = $log;
|
||||
this.promise = undefined;
|
||||
|
||||
this.dataTransforms = {
|
||||
//Convert from pascals to millibars
|
||||
'pressure': function pascalsToMillibars(pascals) {
|
||||
return pascals / 100;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* The data dictionary for this data source.
|
||||
* @type {MSLDataDictionary}
|
||||
*/
|
||||
RemsTelemetryServerAdapter.prototype.dictionary = MSLDataDictionary;
|
||||
|
||||
/**
|
||||
* Fetches historical data from source, and associates it with the
|
||||
* given request ID.
|
||||
* @private
|
||||
*/
|
||||
RemsTelemetryServerAdapter.prototype.requestHistory = function (request) {
|
||||
var self = this,
|
||||
id = request.key;
|
||||
|
||||
var dataTransforms = this.dataTransforms;
|
||||
|
||||
function processResponse(response) {
|
||||
var data = [];
|
||||
/*
|
||||
* History data is organised by Sol. Iterate over sols...
|
||||
*/
|
||||
response.data.soles.forEach(function (solData) {
|
||||
/*
|
||||
* Check that valid data exists
|
||||
*/
|
||||
if (!isNaN(solData[id])) {
|
||||
var dataTransform = dataTransforms[id];
|
||||
/*
|
||||
* Append each data point to the array of values
|
||||
* for this data point property (min. temp, etc).
|
||||
*/
|
||||
data.unshift({
|
||||
date: Date.parse(solData[TERRESTRIAL_DATE]),
|
||||
value: dataTransform ? dataTransform(solData[id]) : solData[id]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function fallbackToLocal() {
|
||||
self.$log.warn("Loading REMS data failed, probably due to"
|
||||
+ " cross origin policy. Falling back to local data");
|
||||
|
||||
return self.$http.get(self.localDataURI);
|
||||
}
|
||||
|
||||
//Filter results to match request parameters
|
||||
function filterResults(results) {
|
||||
return results.filter(function (result) {
|
||||
return result.date >= (request.start || Number.MIN_VALUE)
|
||||
&& result.date <= (request.end || Number.MAX_VALUE);
|
||||
});
|
||||
}
|
||||
|
||||
function packageAndResolve(results) {
|
||||
return {
|
||||
id: id,
|
||||
values: results
|
||||
};
|
||||
}
|
||||
|
||||
return (this.promise = this.promise || this.$http.get(this.REMS_WS_URL))
|
||||
.catch(fallbackToLocal)
|
||||
.then(processResponse)
|
||||
.then(filterResults)
|
||||
.then(packageAndResolve);
|
||||
};
|
||||
|
||||
/**
|
||||
* Requests historical telemetry for the named data attribute. In
|
||||
* the case of REMS, this data source exposes multiple different
|
||||
* data variables from the REMS instrument, including temperature
|
||||
* and others
|
||||
* @param id The telemetry data point key to be queried.
|
||||
* @returns {Promise | Array<RemsTelemetryValue>} that resolves with an Array of {@link RemsTelemetryValue} objects for the request data key.
|
||||
*/
|
||||
RemsTelemetryServerAdapter.prototype.history = function (request) {
|
||||
return this.requestHistory(request);
|
||||
};
|
||||
|
||||
return RemsTelemetryServerAdapter;
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/DialogLaunchController",
|
||||
"./src/NotificationLaunchController",
|
||||
"./src/DialogLaunchIndicator",
|
||||
"./src/NotificationLaunchIndicator",
|
||||
"./res/dialog-launch.html",
|
||||
"./res/notification-launch.html"
|
||||
], function (
|
||||
DialogLaunchController,
|
||||
NotificationLaunchController,
|
||||
DialogLaunchIndicator,
|
||||
NotificationLaunchIndicator,
|
||||
DialogLaunch,
|
||||
NotificationLaunch
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/notifications",
|
||||
definition: {
|
||||
"extensions": {
|
||||
"templates": [
|
||||
{
|
||||
"key": "dialogLaunchTemplate",
|
||||
"template": DialogLaunch
|
||||
},
|
||||
{
|
||||
"key": "notificationLaunchTemplate",
|
||||
"template": NotificationLaunch
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "DialogLaunchController",
|
||||
"implementation": DialogLaunchController,
|
||||
"depends": [
|
||||
"$scope",
|
||||
"$timeout",
|
||||
"$log",
|
||||
"dialogService",
|
||||
"notificationService"
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "NotificationLaunchController",
|
||||
"implementation": NotificationLaunchController,
|
||||
"depends": [
|
||||
"$scope",
|
||||
"$timeout",
|
||||
"$log",
|
||||
"notificationService"
|
||||
]
|
||||
}
|
||||
],
|
||||
"indicators": [
|
||||
{
|
||||
"implementation": DialogLaunchIndicator,
|
||||
"priority": "fallback"
|
||||
},
|
||||
{
|
||||
"implementation": NotificationLaunchIndicator,
|
||||
"priority": "fallback"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
<span class="h-indicator" ng-controller="DialogLaunchController">
|
||||
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
|
||||
<div class="c-indicator c-indicator--clickable icon-box-with-arrow s-status-available"><span class="label c-indicator__label">
|
||||
<button ng-click="launchProgress(true)">Known</button>
|
||||
<button ng-click="launchProgress(false)">Unknown</button>
|
||||
<button ng-click="launchError()">Error</button>
|
||||
<button ng-click="launchInfo()">Info</button>
|
||||
</span></div>
|
||||
</span>
|
||||
@ -1,9 +0,0 @@
|
||||
<span class="h-indicator" ng-controller="NotificationLaunchController">
|
||||
<!-- DO NOT ADD SPACES BETWEEN THE SPANS - IT ADDS WHITE SPACE!! -->
|
||||
<div class="c-indicator c-indicator--clickable icon-bell s-status-available"><span class="label c-indicator__label">
|
||||
<button ng-click="newInfo()">Success</button>
|
||||
<button ng-click="newError()">Error</button>
|
||||
<button ng-click="newAlert()">Alert</button>
|
||||
<button ng-click="newProgress()">Progress</button>
|
||||
</span></div>
|
||||
</span>
|
||||
@ -1,157 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* A controller for the dialog launch view. This view allows manual
|
||||
* launching of dialogs for demonstration and testing purposes. It
|
||||
* also demonstrates the use of the DialogService.
|
||||
* @param $scope
|
||||
* @param $timeout
|
||||
* @param $log
|
||||
* @param dialogService
|
||||
* @param notificationService
|
||||
* @constructor
|
||||
*/
|
||||
function DialogLaunchController($scope, $timeout, $log, dialogService, notificationService) {
|
||||
|
||||
/*
|
||||
Demonstrates launching a progress dialog and updating it
|
||||
periodically with the progress of an ongoing process.
|
||||
*/
|
||||
$scope.launchProgress = function (knownProgress) {
|
||||
var dialog,
|
||||
model = {
|
||||
title: "Progress Dialog Example",
|
||||
progress: 0,
|
||||
hint: "Do not navigate away from this page or close this browser tab while this operation is in progress.",
|
||||
actionText: "Calculating...",
|
||||
unknownProgress: !knownProgress,
|
||||
unknownDuration: false,
|
||||
severity: "info",
|
||||
options: [
|
||||
{
|
||||
label: "Cancel Operation",
|
||||
callback: function () {
|
||||
$log.debug("Operation cancelled");
|
||||
dialog.dismiss();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Do something else...",
|
||||
callback: function () {
|
||||
$log.debug("Something else pressed");
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
function incrementProgress() {
|
||||
model.progress = Math.min(100, Math.floor(model.progress + Math.random() * 30));
|
||||
model.progressText = ["Estimated time remaining: about ", 60 - Math.floor((model.progress / 100) * 60), " seconds"].join(" ");
|
||||
if (model.progress < 100) {
|
||||
$timeout(incrementProgress, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
dialog = dialogService.showBlockingMessage(model);
|
||||
|
||||
if (dialog) {
|
||||
//Do processing here
|
||||
model.actionText = "Processing 100 objects...";
|
||||
if (knownProgress) {
|
||||
$timeout(incrementProgress, 1000);
|
||||
}
|
||||
} else {
|
||||
$log.error("Could not display modal dialog");
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Demonstrates launching an error dialog
|
||||
*/
|
||||
$scope.launchError = function () {
|
||||
var dialog,
|
||||
model = {
|
||||
title: "Error Dialog Example",
|
||||
actionText: "Something happened, and it was not good.",
|
||||
severity: "error",
|
||||
options: [
|
||||
{
|
||||
label: "Try Again",
|
||||
callback: function () {
|
||||
$log.debug("Try Again Pressed");
|
||||
dialog.dismiss();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: "Cancel",
|
||||
callback: function () {
|
||||
$log.debug("Cancel Pressed");
|
||||
dialog.dismiss();
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
dialog = dialogService.showBlockingMessage(model);
|
||||
|
||||
if (!dialog) {
|
||||
$log.error("Could not display modal dialog");
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Demonstrates launching an error dialog
|
||||
*/
|
||||
$scope.launchInfo = function () {
|
||||
var dialog,
|
||||
model = {
|
||||
title: "Info Dialog Example",
|
||||
actionText: "This is an example of a blocking info"
|
||||
+ " dialog. This dialog can be used to draw the user's"
|
||||
+ " attention to an event.",
|
||||
severity: "info",
|
||||
primaryOption: {
|
||||
label: "OK",
|
||||
callback: function () {
|
||||
$log.debug("OK Pressed");
|
||||
dialog.dismiss();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
dialog = dialogService.showBlockingMessage(model);
|
||||
|
||||
if (!dialog) {
|
||||
$log.error("Could not display modal dialog");
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return DialogLaunchController;
|
||||
}
|
||||
);
|
||||
@ -1,55 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* A tool for manually invoking dialogs. When included this
|
||||
* indicator will allow for dialogs of different types to be
|
||||
* launched for demonstration and testing purposes.
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
function DialogLaunchIndicator() {
|
||||
|
||||
}
|
||||
|
||||
DialogLaunchIndicator.template = 'dialogLaunchTemplate';
|
||||
|
||||
DialogLaunchIndicator.prototype.getGlyphClass = function () {
|
||||
return 'ok';
|
||||
};
|
||||
|
||||
DialogLaunchIndicator.prototype.getText = function () {
|
||||
return "Launch test dialog";
|
||||
};
|
||||
|
||||
DialogLaunchIndicator.prototype.getDescription = function () {
|
||||
return "Launch test dialog";
|
||||
};
|
||||
|
||||
return DialogLaunchIndicator;
|
||||
}
|
||||
);
|
||||
@ -1,126 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Allows launching of notification messages for the purposes of
|
||||
* demonstration and testing. Also demonstrates use of
|
||||
* the NotificationService. Notifications are non-blocking messages that
|
||||
* appear at the bottom of the screen to inform the user of events
|
||||
* in a non-intrusive way. For more information see the
|
||||
* {@link NotificationService}
|
||||
* @param $scope
|
||||
* @param $timeout
|
||||
* @param $log
|
||||
* @param notificationService
|
||||
* @constructor
|
||||
*/
|
||||
function NotificationLaunchController($scope, $timeout, $log, notificationService) {
|
||||
var messageCounter = 1;
|
||||
|
||||
function getExampleActionText() {
|
||||
var actionTexts = [
|
||||
"Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.",
|
||||
"Eros turpis, pulvinar turpis eros eu",
|
||||
"Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!"
|
||||
];
|
||||
|
||||
return actionTexts[Math.floor(Math.random() * 3)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Launch a new notification with a severity level of 'Error'.
|
||||
*/
|
||||
$scope.newError = function () {
|
||||
notificationService.notify({
|
||||
title: "Example error notification " + messageCounter++,
|
||||
hint: "An error has occurred",
|
||||
severity: "error"
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Launch a new notification with a severity of 'Alert'.
|
||||
*/
|
||||
$scope.newAlert = function () {
|
||||
notificationService.notify({
|
||||
title: "Alert notification " + (messageCounter++),
|
||||
hint: "This is an alert message",
|
||||
severity: "alert",
|
||||
autoDismiss: true
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Launch a new notification with a progress bar that is updated
|
||||
* periodically, tracking an ongoing process.
|
||||
*/
|
||||
$scope.newProgress = function () {
|
||||
let progress = 0;
|
||||
var notificationModel = {
|
||||
title: "Progress notification example",
|
||||
severity: "info",
|
||||
progress: progress,
|
||||
actionText: getExampleActionText()
|
||||
};
|
||||
let notification;
|
||||
|
||||
/**
|
||||
* Simulate an ongoing process and update the progress bar.
|
||||
* @param notification
|
||||
*/
|
||||
function incrementProgress() {
|
||||
progress = Math.min(100, Math.floor(progress + Math.random() * 30));
|
||||
let progressText = ["Estimated time"
|
||||
+ " remaining:"
|
||||
+ " about ", 60 - Math.floor((progress / 100) * 60), " seconds"].join(" ");
|
||||
notification.progress(progress, progressText);
|
||||
|
||||
if (progress < 100) {
|
||||
$timeout(function () {
|
||||
incrementProgress(notificationModel);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
notification = notificationService.notify(notificationModel);
|
||||
incrementProgress();
|
||||
};
|
||||
|
||||
/**
|
||||
* Launch a new notification with severity level of INFO.
|
||||
*/
|
||||
$scope.newInfo = function () {
|
||||
notificationService.info({
|
||||
title: "Example Info notification " + messageCounter++
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return NotificationLaunchController;
|
||||
}
|
||||
);
|
||||
@ -1,55 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* A tool for manually invoking notifications. When included this
|
||||
* indicator will allow for notifications of different types to be
|
||||
* launched for demonstration and testing purposes.
|
||||
* @constructor
|
||||
*/
|
||||
|
||||
function NotificationLaunchIndicator() {
|
||||
|
||||
}
|
||||
|
||||
NotificationLaunchIndicator.template = 'notificationLaunchTemplate';
|
||||
|
||||
NotificationLaunchIndicator.prototype.getGlyphClass = function () {
|
||||
return 'ok';
|
||||
};
|
||||
|
||||
NotificationLaunchIndicator.prototype.getText = function () {
|
||||
return "Launch notification";
|
||||
};
|
||||
|
||||
NotificationLaunchIndicator.prototype.getDescription = function () {
|
||||
return "Launch notification";
|
||||
};
|
||||
|
||||
return NotificationLaunchIndicator;
|
||||
}
|
||||
);
|
||||
@ -1,54 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/BrowserPersistenceProvider"
|
||||
], function (
|
||||
BrowserPersistenceProvider
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/persistence",
|
||||
definition: {
|
||||
"extensions": {
|
||||
"components": [
|
||||
{
|
||||
"provides": "persistenceService",
|
||||
"type": "provider",
|
||||
"implementation": BrowserPersistenceProvider,
|
||||
"depends": [
|
||||
"$q",
|
||||
"PERSISTENCE_SPACE"
|
||||
]
|
||||
}
|
||||
],
|
||||
"constants": [
|
||||
{
|
||||
"key": "PERSISTENCE_SPACE",
|
||||
"value": "mct"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,102 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/**
|
||||
* Stubbed implementation of a persistence provider,
|
||||
* to permit objects to be created, saved, etc.
|
||||
*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
'use strict';
|
||||
|
||||
function BrowserPersistenceProvider($q, SPACE) {
|
||||
var spaces = SPACE ? [SPACE] : [],
|
||||
caches = {},
|
||||
promises = {
|
||||
as: function (value) {
|
||||
return $q.when(value);
|
||||
}
|
||||
};
|
||||
|
||||
spaces.forEach(function (space) {
|
||||
caches[space] = {};
|
||||
});
|
||||
|
||||
return {
|
||||
listSpaces: function () {
|
||||
return promises.as(spaces);
|
||||
},
|
||||
listObjects: function (space) {
|
||||
var cache = caches[space];
|
||||
|
||||
return promises.as(
|
||||
cache ? Object.keys(cache) : null
|
||||
);
|
||||
},
|
||||
createObject: function (space, key, value) {
|
||||
var cache = caches[space];
|
||||
|
||||
if (!cache || cache[key]) {
|
||||
return promises.as(null);
|
||||
}
|
||||
|
||||
cache[key] = value;
|
||||
|
||||
return promises.as(true);
|
||||
},
|
||||
readObject: function (space, key) {
|
||||
var cache = caches[space];
|
||||
|
||||
return promises.as(
|
||||
cache ? cache[key] : null
|
||||
);
|
||||
},
|
||||
updateObject: function (space, key, value) {
|
||||
var cache = caches[space];
|
||||
|
||||
if (!cache || !cache[key]) {
|
||||
return promises.as(null);
|
||||
}
|
||||
|
||||
cache[key] = value;
|
||||
|
||||
return promises.as(true);
|
||||
},
|
||||
deleteObject: function (space, key, value) {
|
||||
var cache = caches[space];
|
||||
|
||||
if (!cache || !cache[key]) {
|
||||
return promises.as(null);
|
||||
}
|
||||
|
||||
delete cache[key];
|
||||
|
||||
return promises.as(true);
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return BrowserPersistenceProvider;
|
||||
}
|
||||
);
|
||||
@ -1,45 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/ExamplePolicy"
|
||||
], function (
|
||||
ExamplePolicy
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/policy",
|
||||
definition: {
|
||||
"name": "Example Policy",
|
||||
"description": "Provides an example of using policies to prohibit actions.",
|
||||
"extensions": {
|
||||
"policies": [
|
||||
{
|
||||
"implementation": ExamplePolicy,
|
||||
"category": "action"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,47 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
function ExamplePolicy() {
|
||||
return {
|
||||
/**
|
||||
* Disallow the Remove action on objects whose name contains
|
||||
* "foo."
|
||||
*/
|
||||
allow: function (action, context) {
|
||||
var domainObject = (context || {}).domainObject,
|
||||
model = (domainObject && domainObject.getModel()) || {},
|
||||
name = model.name || "",
|
||||
metadata = action.getMetadata() || {};
|
||||
|
||||
return metadata.key !== 'remove' || name.indexOf('foo') < 0;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return ExamplePolicy;
|
||||
}
|
||||
);
|
||||
@ -1,55 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/WatchIndicator",
|
||||
"./src/DigestIndicator"
|
||||
], function (
|
||||
WatchIndicator,
|
||||
DigestIndicator
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/profiling",
|
||||
definition: {
|
||||
"extensions": {
|
||||
"indicators": [
|
||||
{
|
||||
"implementation": WatchIndicator,
|
||||
"depends": [
|
||||
"$interval",
|
||||
"$rootScope"
|
||||
]
|
||||
},
|
||||
{
|
||||
"implementation": DigestIndicator,
|
||||
"depends": [
|
||||
"$interval",
|
||||
"$rootScope"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,82 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Displays the number of digests that have occurred since the
|
||||
* indicator was first instantiated.
|
||||
* @constructor
|
||||
* @param $interval Angular's $interval
|
||||
* @implements {Indicator}
|
||||
*/
|
||||
function DigestIndicator($interval, $rootScope) {
|
||||
var digests = 0,
|
||||
displayed = 0,
|
||||
start = Date.now();
|
||||
|
||||
function update() {
|
||||
var now = Date.now(),
|
||||
secs = (now - start) / 1000;
|
||||
displayed = Math.round(digests / secs);
|
||||
start = now;
|
||||
digests = 0;
|
||||
}
|
||||
|
||||
function increment() {
|
||||
digests += 1;
|
||||
}
|
||||
|
||||
$rootScope.$watch(increment);
|
||||
|
||||
// Update state every second
|
||||
$interval(update, 1000);
|
||||
|
||||
// Provide initial state, too
|
||||
update();
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get the CSS class that defines the icon
|
||||
* to display in this indicator. This will appear
|
||||
* as a dataflow icon.
|
||||
* @returns {string} the cssClass of the dataflow icon
|
||||
*/
|
||||
getCssClass: function () {
|
||||
return "icon-connectivity";
|
||||
},
|
||||
getText: function () {
|
||||
return displayed + " digests/sec";
|
||||
},
|
||||
getDescription: function () {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return DigestIndicator;
|
||||
|
||||
}
|
||||
);
|
||||
@ -1,86 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Updates a count of currently-active Angular watches.
|
||||
* @constructor
|
||||
* @param $interval Angular's $interval
|
||||
*/
|
||||
function WatchIndicator($interval, $rootScope) {
|
||||
var watches = 0;
|
||||
|
||||
function count(scope) {
|
||||
if (scope) {
|
||||
watches += (scope.$$watchers || []).length;
|
||||
count(scope.$$childHead);
|
||||
count(scope.$$nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
watches = 0;
|
||||
count($rootScope);
|
||||
}
|
||||
|
||||
// Update state every second
|
||||
$interval(update, 1000);
|
||||
|
||||
// Provide initial state, too
|
||||
update();
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get the CSS class (single character used as an icon)
|
||||
* to display in this indicator. This will return ".",
|
||||
* which should appear as a database icon.
|
||||
* @returns {string} the character of the database icon
|
||||
*/
|
||||
getCssClass: function () {
|
||||
return "icon-database";
|
||||
},
|
||||
/**
|
||||
* Get the text that should appear in the indicator.
|
||||
* @returns {string} brief summary of connection status
|
||||
*/
|
||||
getText: function () {
|
||||
return watches + " watches";
|
||||
},
|
||||
/**
|
||||
* Get a longer-form description of the current connection
|
||||
* space, suitable for display in a tooltip
|
||||
* @returns {string} longer summary of connection status
|
||||
*/
|
||||
getDescription: function () {
|
||||
return "";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return WatchIndicator;
|
||||
|
||||
}
|
||||
);
|
||||
@ -1,2 +0,0 @@
|
||||
Example of using multiple persistence stores by exposing a root
|
||||
object with a different space prefix.
|
||||
@ -1,63 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/ScratchPersistenceProvider"
|
||||
], function (
|
||||
ScratchPersistenceProvider
|
||||
) {
|
||||
"use strict";
|
||||
|
||||
return {
|
||||
name: "example/scratchpad",
|
||||
definition: {
|
||||
"extensions": {
|
||||
"roots": [
|
||||
{
|
||||
"id": "scratch:root"
|
||||
}
|
||||
],
|
||||
"models": [
|
||||
{
|
||||
"id": "scratch:root",
|
||||
"model": {
|
||||
"type": "folder",
|
||||
"composition": [],
|
||||
"name": "Scratchpad"
|
||||
},
|
||||
"priority": "preferred"
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"provides": "persistenceService",
|
||||
"type": "provider",
|
||||
"implementation": ScratchPersistenceProvider,
|
||||
"depends": [
|
||||
"$q"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@ -1,79 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* The ScratchPersistenceProvider keeps JSON documents in memory
|
||||
* and provides a persistence interface, but changes are lost on reload.
|
||||
* @memberof example/scratchpad
|
||||
* @constructor
|
||||
* @implements {PersistenceService}
|
||||
* @param q Angular's $q, for promises
|
||||
*/
|
||||
function ScratchPersistenceProvider($q) {
|
||||
this.$q = $q;
|
||||
this.table = {};
|
||||
}
|
||||
|
||||
ScratchPersistenceProvider.prototype.listSpaces = function () {
|
||||
return this.$q.when(['scratch']);
|
||||
};
|
||||
|
||||
ScratchPersistenceProvider.prototype.listObjects = function (space) {
|
||||
return this.$q.when(
|
||||
space === 'scratch' ? Object.keys(this.table) : []
|
||||
);
|
||||
};
|
||||
|
||||
ScratchPersistenceProvider.prototype.createObject = function (space, key, value) {
|
||||
if (space === 'scratch') {
|
||||
this.table[key] = JSON.stringify(value);
|
||||
}
|
||||
|
||||
return this.$q.when(space === 'scratch');
|
||||
};
|
||||
|
||||
ScratchPersistenceProvider.prototype.readObject = function (space, key) {
|
||||
return this.$q.when(
|
||||
(space === 'scratch' && this.table[key])
|
||||
? JSON.parse(this.table[key]) : undefined
|
||||
);
|
||||
};
|
||||
|
||||
ScratchPersistenceProvider.prototype.deleteObject = function (space, key, value) {
|
||||
if (space === 'scratch') {
|
||||
delete this.table[key];
|
||||
}
|
||||
|
||||
return this.$q.when(space === 'scratch');
|
||||
};
|
||||
|
||||
ScratchPersistenceProvider.prototype.updateObject =
|
||||
ScratchPersistenceProvider.prototype.createObject;
|
||||
|
||||
return ScratchPersistenceProvider;
|
||||
}
|
||||
);
|
||||
@ -1,188 +0,0 @@
|
||||
define([
|
||||
"./src/ExampleStyleGuideModelProvider",
|
||||
"./src/MCTExample",
|
||||
"./res/templates/intro.html",
|
||||
"./res/templates/standards.html",
|
||||
"./res/templates/colors.html",
|
||||
"./res/templates/status.html",
|
||||
"./res/templates/glyphs.html",
|
||||
"./res/templates/controls.html",
|
||||
"./res/templates/input.html",
|
||||
"./res/templates/menus.html"
|
||||
], function (
|
||||
ExampleStyleGuideModelProvider,
|
||||
MCTExample,
|
||||
introTemplate,
|
||||
standardsTemplate,
|
||||
colorsTemplate,
|
||||
statusTemplate,
|
||||
glyphsTemplate,
|
||||
controlsTemplate,
|
||||
inputTemplate,
|
||||
menusTemplate
|
||||
) {
|
||||
return {
|
||||
name: "example/styleguide",
|
||||
definition: {
|
||||
"name": "Open MCT Style Guide",
|
||||
"description": "Examples and documentation illustrating UI styles in use in Open MCT.",
|
||||
"extensions":
|
||||
{
|
||||
"types": [
|
||||
{
|
||||
"key": "styleguide.intro",
|
||||
"name": "Introduction",
|
||||
"cssClass": "icon-page",
|
||||
"description": "Introduction and overview to the style guide"
|
||||
},
|
||||
{
|
||||
"key": "styleguide.standards",
|
||||
"name": "Standards",
|
||||
"cssClass": "icon-page",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"key": "styleguide.colors",
|
||||
"name": "Colors",
|
||||
"cssClass": "icon-page",
|
||||
"description": ""
|
||||
},
|
||||
{
|
||||
"key": "styleguide.status",
|
||||
"name": "status",
|
||||
"cssClass": "icon-page",
|
||||
"description": "Limits, telemetry paused, etc."
|
||||
},
|
||||
{
|
||||
"key": "styleguide.glyphs",
|
||||
"name": "Glyphs",
|
||||
"cssClass": "icon-page",
|
||||
"description": "Glyphs overview"
|
||||
},
|
||||
{
|
||||
"key": "styleguide.controls",
|
||||
"name": "Controls",
|
||||
"cssClass": "icon-page",
|
||||
"description": "Buttons, selects, HTML controls"
|
||||
},
|
||||
{
|
||||
"key": "styleguide.input",
|
||||
"name": "Text Inputs",
|
||||
"cssClass": "icon-page",
|
||||
"description": "Various text inputs"
|
||||
},
|
||||
{
|
||||
"key": "styleguide.menus",
|
||||
"name": "Menus",
|
||||
"cssClass": "icon-page",
|
||||
"description": "Context menus, dropdowns"
|
||||
}
|
||||
],
|
||||
"views": [
|
||||
{
|
||||
"key": "styleguide.intro",
|
||||
"type": "styleguide.intro",
|
||||
"template": introTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.standards",
|
||||
"type": "styleguide.standards",
|
||||
"template": standardsTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.colors",
|
||||
"type": "styleguide.colors",
|
||||
"template": colorsTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.status",
|
||||
"type": "styleguide.status",
|
||||
"template": statusTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.glyphs",
|
||||
"type": "styleguide.glyphs",
|
||||
"template": glyphsTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.controls",
|
||||
"type": "styleguide.controls",
|
||||
"template": controlsTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.input",
|
||||
"type": "styleguide.input",
|
||||
"template": inputTemplate,
|
||||
"editable": false
|
||||
},
|
||||
{
|
||||
"key": "styleguide.menus",
|
||||
"type": "styleguide.menus",
|
||||
"template": menusTemplate,
|
||||
"editable": false
|
||||
}
|
||||
],
|
||||
"roots": [
|
||||
{
|
||||
"id": "styleguide:home"
|
||||
}
|
||||
],
|
||||
"models": [
|
||||
{
|
||||
"id": "styleguide:home",
|
||||
"priority": "preferred",
|
||||
"model": {
|
||||
"type": "noneditable.folder",
|
||||
"name": "Style Guide Home",
|
||||
"location": "ROOT",
|
||||
"composition": [
|
||||
"intro",
|
||||
"standards",
|
||||
"colors",
|
||||
"status",
|
||||
"glyphs",
|
||||
"styleguide:ui-elements"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "styleguide:ui-elements",
|
||||
"priority": "preferred",
|
||||
"model": {
|
||||
"type": "noneditable.folder",
|
||||
"name": "UI Elements",
|
||||
"location": "styleguide:home",
|
||||
"composition": [
|
||||
"controls",
|
||||
"input",
|
||||
"menus"
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
{
|
||||
"key": "mctExample",
|
||||
"implementation": MCTExample
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"provides": "modelService",
|
||||
"type": "provider",
|
||||
"implementation": ExampleStyleGuideModelProvider,
|
||||
"depends": [
|
||||
"$q"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.7 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 622.47"><defs><style>.a,.d{fill:#fff;}.b,.c,.k,.m,.n,.o{fill:none;}.b{stroke:#000;stroke-linecap:square;}.b,.c,.d,.f,.k,.m,.n,.o{stroke-miterlimit:10;}.b,.k{stroke-width:2px;}.c{stroke:#ababab;stroke-dasharray:5;}.d,.k,.o{stroke:#737373;}.e{opacity:0.5;fill:url(#a);}.f{fill:#d6d6d6;fill-opacity:0.8;stroke:#fff;}.g{mask:url(#b);}.h{fill:#a8a8a8;}.i{fill:#00b1e2;}.j{fill:#f16e86;}.k{stroke-linecap:round;}.l{mask:url(#c);}.m{stroke:#00b1e2;}.m,.n{stroke-width:10px;}.n{stroke:#f16e86;}</style><linearGradient id="a" x1="523.15" y1="-401.02" x2="513.75" y2="-437.16" gradientTransform="translate(90.62 338.26) rotate(45)" gradientUnits="userSpaceOnUse"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><mask id="b" x="-1187.45" y="-269.68" width="1813.84" height="554.26" maskUnits="userSpaceOnUse"><polygon class="a" points="625.33 284.58 452.55 238.2 452.55 170.5 625.33 216.88 625.33 284.58"/><line class="b" x1="486.25" y1="179.55" x2="486.25" y2="247.32"/><line class="b" x1="573.58" y1="202.99" x2="573.58" y2="270.76"/><line class="b" x1="452.46" y1="192.89" x2="625.16" y2="239.25"/><line class="b" x1="452.46" y1="215.48" x2="625.16" y2="261.83"/></mask><mask id="c" x="-1468.9" y="-163.59" width="1866.4" height="673.87" maskUnits="userSpaceOnUse"><polygon class="a" points="344.11 510.28 171.1 462.49 171.1 289.49 344.11 337.28 344.11 510.28"/></mask></defs><title>objects-diagram</title><polyline class="c" points="460.63 153.71 480.14 142.45 513.15 123.39"/><polyline class="c" points="312.69 239.13 336.82 225.2 365.42 208.68"/><polygon class="d" points="742.15 65.53 519.88 5.97 519.88 368.97 742.15 428.53 742.15 65.53"/><polygon class="e" points="742.15 428.53 742.15 377.47 786.44 403 742.15 428.53"/><polyline class="c" points="619.05 308.21 626.95 303.65 636.44 298.17"/><polygon class="f" points="637.26 156.11 443.71 104.25 443.71 402.92 637.26 454.78 637.26 156.11"/><g class="g"><polygon class="h" points="625.33 239.44 452.55 193.07 452.55 170.5 625.33 216.88 625.33 239.44"/><polygon class="i" points="625.33 262.01 452.55 215.64 452.55 193.07 625.33 239.44 625.33 262.01"/><polygon class="j" points="625.33 284.58 452.55 238.2 452.55 215.64 625.33 262.01 625.33 284.58"/></g><polyline class="c" points="467.58 395.66 481.45 387.65 490.54 382.4"/><polygon class="f" points="490.33 240.94 296.78 189.08 296.78 487.75 490.33 539.62 490.33 240.94"/><polygon class="h" points="386.94 387.36 314 367.78 314 238.33 386.94 257.91 386.94 387.36"/><line class="k" x1="402.02" y1="280.97" x2="355.33" y2="284.32"/><line class="k" x1="401.71" y1="316.74" x2="355.33" y2="291.74"/><polygon class="i" points="473.63 301.9 400.69 282.32 400.69 261.6 473.63 281.18 473.63 301.9"/><polygon class="j" points="473.63 337.63 400.69 318.05 400.69 297.32 473.63 316.9 473.63 337.63"/><polyline class="c" points="331.67 474.13 343.85 467.1 356.86 459.58"/><polyline class="c" points="183.35 313.8 207.44 299.89 231.58 285.96"/><polygon class="c" points="710.61 148.05 546.55 104.09 546.55 144.26 710.61 188.22 710.61 148.05"/><polygon class="c" points="710.61 215.05 546.55 171.09 546.55 211.26 710.61 255.22 710.61 215.05"/><line class="c" x1="162.68" y1="266.5" x2="533" y2="52.7"/><line class="c" x1="356.23" y1="617.04" x2="726.54" y2="403.24"/><polygon class="f" points="356.23 318.36 162.68 266.5 162.68 565.18 356.23 617.04 356.23 318.36"/><g class="l"><path class="m" d="M165.1,350.83c12-19.68,24-57.37,47,7s29,42,46,35.71,27,34.46,50,51.81,75,16.72,89,15.59"/><path class="n" d="M349.1,427.78c-9.13-13.05-13.7-31.26-31.2-9.54s-22.07,9.47-35,.86-20.55,6.69-38.05,6.89-67.08-25.38-77.73-30.61"/></g><polygon class="i" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="o" points="211.4 436.27 47.34 392.31 47.34 432.48 211.4 476.44 211.4 436.27"/><polygon class="j" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><polygon class="o" points="211.4 503.27 47.34 459.31 47.34 499.48 211.4 543.44 211.4 503.27"/><line class="c" x1="513.15" y1="123.39" x2="544.97" y2="105.02"/><line class="c" x1="365.42" y1="208.68" x2="460.63" y2="153.71"/><line class="c" x1="231.58" y1="285.96" x2="312.69" y2="239.13"/><line class="c" x1="48.79" y1="391.49" x2="183.35" y2="313.8"/><line class="c" x1="636.44" y1="298.17" x2="709.92" y2="255.75"/><line class="c" x1="490.54" y1="382.4" x2="619.05" y2="308.21"/><line class="c" x1="356.86" y1="459.58" x2="467.58" y2="395.66"/><line class="c" x1="212.34" y1="543.03" x2="331.67" y2="474.13"/></svg>
|
||||
|
Before Width: | Height: | Size: 4.5 KiB |
@ -1,84 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div ng-init="colors = [
|
||||
{ 'category': 'Interface', 'description': 'Colors used in the application envelope, buttons and controls.', 'items': [{ 'name': 'Body Background', 'constant': '$colorBodyBg', 'valEspresso': '#333', 'valSnow': '#fcfcfc' },
|
||||
{ 'name': 'Body Foreground', 'constant': '$colorBodyFg', 'valEspresso': '#999', 'valSnow': '#666' },
|
||||
{ 'name': 'Key Color Background', 'constant': '$colorKey', 'valEspresso': '#0099cc', 'valSnow': '#0099cc' },
|
||||
{ 'name': 'Key Color Foreground', 'constant': '$colorKeyFg', 'valEspresso': '#fff', 'valSnow': '#fff' },
|
||||
{ 'name': 'Paused Color Background', 'constant': '$colorPausedBg', 'valEspresso': '#c56f01', 'valSnow': '#ff9900' },
|
||||
{ 'name': 'Paused Color Foreground', 'constant': '$colorPausedFg', 'valEspresso': '#fff', 'valSnow': '#fff' }]},
|
||||
{ 'category': 'Forms', 'description': 'Colors in forms, mainly to articulate validation status.', 'items': [{ 'name': 'Valid Entry', 'constant': '$colorFormValid', 'valEspresso': '#33cc33', 'valSnow': '#33cc33' },
|
||||
{ 'name': 'Errorenous Entry', 'constant': '$colorFormError', 'valEspresso': '#990000', 'valSnow': '#990000' },
|
||||
{ 'name': 'Invalid Entry', 'constant': '$colorFormInvalid', 'valEspresso': '#ff3300', 'valSnow': '#ff2200' }]},
|
||||
{ 'category': 'Application Status', 'description': 'Colors related to the status of application objects, such as a successful connection to a service.', 'items': [{ 'name': 'Alert Color', 'constant': '$colorAlert', 'valEspresso': '#ff3c00', 'valSnow': '#ff3c00' },
|
||||
{ 'name': 'Status Color Foreground', 'constant': '$colorStatusFg', 'valEspresso': '#ccc', 'valSnow': '#fff' },
|
||||
{ 'name': 'Default Status Color', 'constant': '$colorStatusDefault', 'valEspresso': '#ccc', 'valSnow': '#ccc' },
|
||||
{ 'name': 'Status: Informational Color', 'constant': '$colorStatusInfo', 'valEspresso': '#62ba72', 'valSnow': '#60ba7b' },
|
||||
{ 'name': 'Status: Alert Color', 'constant': '$colorStatusAlert', 'valEspresso': '#ffa66d', 'valSnow': '#ffb66c' },
|
||||
{ 'name': 'Status: Error Color', 'constant': '$colorStatusError', 'valEspresso': '#d4585c', 'valSnow': '#c96b68' }]},
|
||||
{ 'category': 'Telemetry Status', 'description': 'Telemetry status colors used to indicate limit violations and alarm states. Note that these colors should be reserved exclusively for this usage.', 'items': [{ 'name': 'Yellow Limit Color Background', 'constant': '$colorLimitYellowBg', 'valEspresso': 'rgba(255,170,0,0.3)', 'valSnow': 'rgba(255,170,0,0.3)' },
|
||||
{ 'name': 'Yellow Limit Color Icon', 'constant': '$colorLimitYellowIc', 'valEspresso': '#ffaa00', 'valSnow': '#ffaa00' },
|
||||
{ 'name': 'Red Limit Color Background', 'constant': '$colorLimitRedBg', 'valEspresso': 'rgba(255,0,0,0.3)', 'valSnow': 'rgba(255,0,0,0.3)' },
|
||||
{ 'name': 'Red Limit Color Icon', 'constant': '$colorLimitRedIc', 'valEspresso': 'red', 'valSnow': 'red' }]}
|
||||
]"></div>
|
||||
|
||||
|
||||
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Colors</h1>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Overview</h2>
|
||||
<p>In mission operations, color is used to convey meaning. Alerts, warnings and status conditions are by convention communicated with colors in the green, yellow and red families. Colors must also be reserved for use in plots. As a result, Open MCT uses color selectively and sparingly. Follow these guidelines:</p>
|
||||
<ul>
|
||||
<li>Don't use red, orange, yellow or green colors in any element that isn't conveying some kind of status information.</li>
|
||||
<li>Each theme has a key color (typically blue-ish) that should be used to emphasize interactive elements and important UI controls.</li>
|
||||
<li>Within each theme values are used to push elements back or bring them forward, lowering or raising them in visual importance.
|
||||
<span class="themed espresso">In this theme, Espresso, lighter colors are placed on a dark background. The lighter a color is, the more it comes toward the observer and is raised in importance.</span>
|
||||
<span class="themed snow">In this theme, Snow, darker colors are placed on a light background. The darker a color is, the more it comes toward the observer and is raised in importance.</span>
|
||||
</li>
|
||||
<li>For consistency, use a theme's pre-defined status colors.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="l-section" ng-repeat="colorSet in colors">
|
||||
<h2>{{ colorSet.category }}</h2>
|
||||
<p>{{ colorSet.description }}</p>
|
||||
<div class="items-holder grid">
|
||||
<div class="item swatch-item" ng-repeat="color in colorSet.items">
|
||||
<div class="h-swatch">
|
||||
<div class="swatch themed espresso" style="background-color: {{ color.valEspresso }}"></div>
|
||||
<div class="swatch themed snow" style="background-color: {{ color.valSnow }}"></div>
|
||||
</div>
|
||||
<table class="details">
|
||||
<tr><td class="label">Name</td><td class="value">{{color.name}}</td></tr>
|
||||
<tr><td class="label">SASS</td><td class="value">{{color.constant}}</td></tr>
|
||||
<tr><td class="label">Value</td><td class="value">
|
||||
<span class="themed espresso">{{color.valEspresso}}</span>
|
||||
<span class="themed snow">{{color.valSnow}}</span>
|
||||
</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,172 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Controls</h1>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Standard Buttons</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
|
||||
<p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
|
||||
</div>
|
||||
<mct-example><a class="s-button icon-pencil" title="Edit"></a>
|
||||
<a class="s-button" title="Edit">Edit</a>
|
||||
<a class="s-button icon-pencil" title="Edit">
|
||||
<span class="title-label">Edit</span>
|
||||
</a>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>"Major" Buttons</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
|
||||
</div>
|
||||
<mct-example><a class="s-button major">Ok</a>
|
||||
<a class="s-button">Cancel</a>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Button Sets</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
|
||||
<p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
|
||||
</div>
|
||||
<mct-example><span class="l-btn-set">
|
||||
<a class="s-button icon-magnify"></a>
|
||||
<a class="s-button icon-magnify-in"></a>
|
||||
<a class="s-button icon-magnify-out"></a>
|
||||
</span>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Icon-only Buttons</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>When a button is presented within another control it may be advantageous to avoid visual clutter by using an icon-only button. These type of controls present an icon without the "base" of standard buttons. Icon-only buttons should only be used in a context where they are clearly an interactive element and not an object-type identifier, and should not be used with text.</p>
|
||||
</div>
|
||||
<mct-example><a class="s-icon-button icon-pencil" title="Edit"></a>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Checkboxes</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
|
||||
<p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
|
||||
</div>
|
||||
<mct-example><label class="checkbox custom no-text">
|
||||
<input type="checkbox" />
|
||||
<em></em>
|
||||
</label>
|
||||
<br />
|
||||
<label class="checkbox custom no-text">
|
||||
<input type="checkbox" checked />
|
||||
<em></em>
|
||||
</label>
|
||||
<br />
|
||||
<label class="checkbox custom">Labeled checkbox
|
||||
<input type="checkbox" />
|
||||
<em></em>
|
||||
</label></mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Radio Buttons</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Radio buttons use the same technique as checkboxes above.</p>
|
||||
</div>
|
||||
<mct-example><label class="radio custom">Red
|
||||
<input name="Alarm Status" type="radio" />
|
||||
<em></em>
|
||||
</label>
|
||||
<br />
|
||||
<label class="radio custom">Orange
|
||||
<input name="Alarm Status" type="radio" checked />
|
||||
<em></em>
|
||||
</label>
|
||||
<br />
|
||||
<label class="radio custom">Yellow
|
||||
<input name="Alarm Status" type="radio" />
|
||||
<em></em>
|
||||
</label>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Selects</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms. The <code>select</code> element is wrapped by another element, such as a <code>div</code>, which acts as the main display element for the styling. The <code>select</code> provides the click and select functionality, while having all of its native look-and-feel suppressed.</p>
|
||||
</div>
|
||||
<mct-example><div class="select">
|
||||
<select>
|
||||
<option value="" selected="selected">- Select One -</option>
|
||||
<option value="Colussus">Colussus</option>
|
||||
<option value="HAL 9000">HAL 9000</option>
|
||||
<option value="Mother">Mother</option>
|
||||
<option value="Skynet">Skynet</option>
|
||||
</select>
|
||||
</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Local Controls</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Local controls are typically buttons and selects that provide actions in close proximity to a component.</p>
|
||||
<p>These controls can optionally be hidden to reduce clutter until the user hovers their cursor over an enclosing element. To use this approach, apply the class <code>.has-local-controls</code> to the element that should be aware of the hover and ensure that element encloses <code>.h-local-controls</code>.</p>
|
||||
</div>
|
||||
<mct-example><div class="plot-display-area" style="padding: 10px; position: relative;">
|
||||
Some content in here
|
||||
<div class="h-local-controls h-local-controls-overlay-content l-btn-set">
|
||||
<a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
|
||||
<a class="s-button icon-reset" title="Reset pan/zoom"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plot-display-area has-local-controls" style="padding: 10px; position: relative;">
|
||||
Hover here
|
||||
<div class="h-local-controls h-local-controls-overlay-content local-controls-hidden l-btn-set">
|
||||
<a class="s-button icon-arrow-left" title="Restore previous pan/zoom"></a>
|
||||
<a class="s-button icon-reset" title="Reset pan/zoom"></a>
|
||||
</div>
|
||||
</div></mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,216 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div ng-init="general= [{ 'meaning': 'Pay attention', 'cssClass': 'icon-alert-rect', 'cssContent': 'e900', 'htmlEntity': '&#xe900' },
|
||||
{ 'meaning': 'Warning', 'cssClass': 'icon-alert-triangle', 'cssContent': 'e901', 'htmlEntity': '&#xe901' },
|
||||
{ 'meaning': 'Invoke menu', 'cssClass': 'icon-arrow-down', 'cssContent': 'e902', 'htmlEntity': '&#xe902' },
|
||||
{ 'meaning': 'General usage arrow pointing left', 'cssClass': 'icon-arrow-left', 'cssContent': 'e903', 'htmlEntity': '&#xe903' },
|
||||
{ 'meaning': 'General usage arrow pointing right', 'cssClass': 'icon-arrow-right', 'cssContent': 'e904', 'htmlEntity': '&#xe904' },
|
||||
{ 'meaning': 'Upper limit, red', 'cssClass': 'icon-arrow-double-up', 'cssContent': 'e905', 'htmlEntity': '&#xe905' },
|
||||
{ 'meaning': 'Upper limit, yellow', 'cssClass': 'icon-arrow-tall-up', 'cssContent': 'e906', 'htmlEntity': '&#xe906' },
|
||||
{ 'meaning': 'Lower limit, yellow', 'cssClass': 'icon-arrow-tall-down', 'cssContent': 'e907', 'htmlEntity': '&#xe907' },
|
||||
{ 'meaning': 'Lower limit, red', 'cssClass': 'icon-arrow-double-down', 'cssContent': 'e908', 'htmlEntity': '&#xe908' },
|
||||
{ 'meaning': 'General usage arrow pointing up', 'cssClass': 'icon-arrow-up', 'cssContent': 'e909', 'htmlEntity': '&#xe909' },
|
||||
{ 'meaning': 'Required form element', 'cssClass': 'icon-asterisk', 'cssContent': 'e910', 'htmlEntity': '&#xe910' },
|
||||
{ 'meaning': 'Alert', 'cssClass': 'icon-bell', 'cssContent': 'e911', 'htmlEntity': '&#xe911' },
|
||||
{ 'meaning': 'General usage box symbol', 'cssClass': 'icon-box', 'cssContent': 'e912', 'htmlEntity': '&#xe912' },
|
||||
{ 'meaning': 'Click on or into', 'cssClass': 'icon-box-with-arrow', 'cssContent': 'e913', 'htmlEntity': '&#xe913' },
|
||||
{ 'meaning': 'General usage checkmark, used in checkboxes; complete', 'cssClass': 'icon-check', 'cssContent': 'e914', 'htmlEntity': '&#xe914' },
|
||||
{ 'meaning': 'Connected', 'cssClass': 'icon-connectivity', 'cssContent': 'e915', 'htmlEntity': '&#xe915' },
|
||||
{ 'meaning': 'Status: DB connected', 'cssClass': 'icon-database-in-brackets', 'cssContent': 'e916', 'htmlEntity': '&#xe916' },
|
||||
{ 'meaning': 'View or make visible', 'cssClass': 'icon-eye-open', 'cssContent': 'e917', 'htmlEntity': '&#xe917' },
|
||||
{ 'meaning': 'Settings, properties', 'cssClass': 'icon-gear', 'cssContent': 'e918', 'htmlEntity': '&#xe918' },
|
||||
{ 'meaning': 'Process, progress, time', 'cssClass': 'icon-hourglass', 'cssContent': 'e919', 'htmlEntity': '&#xe919' },
|
||||
{ 'meaning': 'Info', 'cssClass': 'icon-info', 'cssContent': 'e920', 'htmlEntity': '&#xe920' },
|
||||
{ 'meaning': 'Link (alias)', 'cssClass': 'icon-link', 'cssContent': 'e921', 'htmlEntity': '&#xe921' },
|
||||
{ 'meaning': 'Locked', 'cssClass': 'icon-lock', 'cssContent': 'e922', 'htmlEntity': '&#xe922' },
|
||||
{ 'meaning': 'General usage minus symbol; used in timer object', 'cssClass': 'icon-minus', 'cssContent': 'e923', 'htmlEntity': '&#xe923' },
|
||||
{ 'meaning': 'An item that is shared', 'cssClass': 'icon-people', 'cssContent': 'e924', 'htmlEntity': '&#xe924' },
|
||||
{ 'meaning': 'User profile or belonging to an individual', 'cssClass': 'icon-person', 'cssContent': 'e925', 'htmlEntity': '&#xe925' },
|
||||
{ 'meaning': 'General usage plus symbol; used in timer object', 'cssClass': 'icon-plus', 'cssContent': 'e926', 'htmlEntity': '&#xe926' },
|
||||
{ 'meaning': 'Delete', 'cssClass': 'icon-trash', 'cssContent': 'e927', 'htmlEntity': '&#xe927' },
|
||||
{ 'meaning': 'Close, remove', 'cssClass': 'icon-x', 'cssContent': 'e928', 'htmlEntity': '&#xe928' },
|
||||
{ 'meaning': 'Enclosing, inclusive; used in Time Conductor', 'cssClass': 'icon-brackets', 'cssContent': 'e929', 'htmlEntity': '&#xe929' },
|
||||
{ 'meaning': 'Something is targeted', 'cssClass': 'icon-crosshair', 'cssContent': 'e930', 'htmlEntity': '&#xe930' },
|
||||
{ 'meaning': 'Draggable', 'cssClass': 'icon-grippy', 'cssContent': 'e931', 'htmlEntity': '&#xe931' }
|
||||
]; controls= [{ 'meaning': 'Reset zoom/pam', 'cssClass': 'icon-arrows-out', 'cssContent': 'e1000', 'htmlEntity': '&#xe1000' },
|
||||
{ 'meaning': 'Expand vertically', 'cssClass': 'icon-arrows-right-left', 'cssContent': 'e1001', 'htmlEntity': '&#xe1001' },
|
||||
{ 'meaning': 'View scrolling', 'cssClass': 'icon-arrows-up-down', 'cssContent': 'e1002', 'htmlEntity': '&#xe1002' },
|
||||
{ 'meaning': 'Bullet; used in radio buttons', 'cssClass': 'icon-bullet', 'cssContent': 'e1004', 'htmlEntity': '&#xe1004' },
|
||||
{ 'meaning': 'Invoke datetime picker', 'cssClass': 'icon-calendar', 'cssContent': 'e1005', 'htmlEntity': '&#xe1005' },
|
||||
{ 'meaning': 'Web link', 'cssClass': 'icon-chain-links', 'cssContent': 'e1006', 'htmlEntity': '&#xe1006' },
|
||||
{ 'meaning': 'Collapse left', 'cssClass': 'icon-collapse-pane-left', 'cssContent': 'e1007', 'htmlEntity': '&#xe1007' },
|
||||
{ 'meaning': 'Collapse right', 'cssClass': 'icon-collapse-pane-right', 'cssContent': 'e1008', 'htmlEntity': '&#xe1008' },
|
||||
{ 'meaning': 'Download', 'cssClass': 'icon-download', 'cssContent': 'e1009', 'htmlEntity': '&#xe1009' },
|
||||
{ 'meaning': 'Copy/Duplicate', 'cssClass': 'icon-duplicate', 'cssContent': 'e1010', 'htmlEntity': '&#xe1010' },
|
||||
{ 'meaning': 'New folder', 'cssClass': 'icon-folder-new', 'cssContent': 'e1011', 'htmlEntity': '&#xe1011' },
|
||||
{ 'meaning': 'Exit fullscreen mode', 'cssClass': 'icon-fullscreen-collapse', 'cssContent': 'e1012', 'htmlEntity': '&#xe1012' },
|
||||
{ 'meaning': 'Display fullscreen', 'cssClass': 'icon-fullscreen-expand', 'cssContent': 'e1013', 'htmlEntity': '&#xe1013' },
|
||||
{ 'meaning': 'Layer order', 'cssClass': 'icon-layers', 'cssContent': 'e1014', 'htmlEntity': '&#xe1014' },
|
||||
{ 'meaning': 'Line color', 'cssClass': 'icon-line-horz', 'cssContent': 'e1015', 'htmlEntity': '&#xe1015' },
|
||||
{ 'meaning': 'Search', 'cssClass': 'icon-magnify', 'cssContent': 'e1016', 'htmlEntity': '&#xe1016' },
|
||||
{ 'meaning': 'Zoom in', 'cssClass': 'icon-magnify-in', 'cssContent': 'e1017', 'htmlEntity': '&#xe1017' },
|
||||
{ 'meaning': 'Zoom out', 'cssClass': 'icon-magnify-out', 'cssContent': 'e1018', 'htmlEntity': '&#xe1018' },
|
||||
{ 'meaning': 'Menu', 'cssClass': 'icon-menu-hamburger', 'cssContent': 'e1019', 'htmlEntity': '&#xe1019' },
|
||||
{ 'meaning': 'Move', 'cssClass': 'icon-move', 'cssContent': 'e1020', 'htmlEntity': '&#xe1020' },
|
||||
{ 'meaning': 'Open in new window', 'cssClass': 'icon-new-window', 'cssContent': 'e1021', 'htmlEntity': '&#xe1021' },
|
||||
{ 'meaning': 'Fill', 'cssClass': 'icon-paint-bucket', 'cssContent': 'e1022', 'htmlEntity': '&#xe1022' },
|
||||
{ 'meaning': 'Pause real-time streaming', 'cssClass': 'icon-pause', 'cssContent': 'e1023', 'htmlEntity': '&#xe1023' },
|
||||
{ 'meaning': 'Edit', 'cssClass': 'icon-pencil', 'cssContent': 'e1024', 'htmlEntity': '&#xe1024' },
|
||||
{ 'meaning': 'Stop pause, resume real-time streaming', 'cssClass': 'icon-play', 'cssContent': 'e1025', 'htmlEntity': '&#xe1025' },
|
||||
{ 'meaning': 'Plot resources', 'cssClass': 'icon-plot-resource', 'cssContent': 'e1026', 'htmlEntity': '&#xe1026' },
|
||||
{ 'meaning': 'Previous', 'cssClass': 'icon-pointer-left', 'cssContent': 'e1027', 'htmlEntity': '&#xe1027' },
|
||||
{ 'meaning': 'Next, navigate to', 'cssClass': 'icon-pointer-right', 'cssContent': 'e1028', 'htmlEntity': '&#xe1028' },
|
||||
{ 'meaning': 'Refresh', 'cssClass': 'icon-refresh', 'cssContent': 'e1029', 'htmlEntity': '&#xe1029' },
|
||||
{ 'meaning': 'Save', 'cssClass': 'icon-save', 'cssContent': 'e1030', 'htmlEntity': '&#xe1030' },
|
||||
{ 'meaning': 'View plot', 'cssClass': 'icon-sine', 'cssContent': 'e1031', 'htmlEntity': '&#xe1031' },
|
||||
{ 'meaning': 'Text color', 'cssClass': 'icon-T', 'cssContent': 'e1032', 'htmlEntity': '&#xe1032' },
|
||||
{ 'meaning': 'Image thumbs strip; view items grid', 'cssClass': 'icon-thumbs-strip', 'cssContent': 'e1033', 'htmlEntity': '&#xe1033' },
|
||||
{ 'meaning': 'Two part item, both parts', 'cssClass': 'icon-two-parts-both', 'cssContent': 'e1034', 'htmlEntity': '&#xe1034' },
|
||||
{ 'meaning': 'Two part item, one only', 'cssClass': 'icon-two-parts-one-only', 'cssContent': 'e1035', 'htmlEntity': '&#xe1035' },
|
||||
{ 'meaning': 'Resync', 'cssClass': 'icon-resync', 'cssContent': 'e1036', 'htmlEntity': '&#xe1036' },
|
||||
{ 'meaning': 'Reset', 'cssClass': 'icon-reset', 'cssContent': 'e1037', 'htmlEntity': '&#xe1037' },
|
||||
{ 'meaning': 'Clear', 'cssClass': 'icon-x-in-circle', 'cssContent': 'e1038', 'htmlEntity': '&#xe1038' },
|
||||
{ 'meaning': 'Brightness', 'cssClass': 'icon-brightness', 'cssContent': 'e1039', 'htmlEntity': '&#xe1039' },
|
||||
{ 'meaning': 'Contrast', 'cssClass': 'icon-contrast', 'cssContent': 'e1040', 'htmlEntity': '&#xe1040' },
|
||||
{ 'meaning': 'Expand', 'cssClass': 'icon-expand', 'cssContent': 'e1041', 'htmlEntity': '&#xe1041' },
|
||||
{ 'meaning': 'View items in a tabular list', 'cssClass': 'icon-list-view', 'cssContent': 'e1042', 'htmlEntity': '&#xe1042' },
|
||||
{ 'meaning': 'Snap an object corner to a grid', 'cssClass': 'icon-grid-snap-to', 'cssContent': 'e1043', 'htmlEntity': '&#xe1043' },
|
||||
{ 'meaning': 'Do not snap an object corner to a grid', 'cssClass': 'icon-grid-snap-no', 'cssContent': 'e1044', 'htmlEntity': '&#xe1044' },
|
||||
{ 'meaning': 'Show an object frame in a Display Layout', 'cssClass': 'icon-frame-show', 'cssContent': 'e1045', 'htmlEntity': '&#xe1045' },
|
||||
{ 'meaning': 'Do not show an object frame in a Display Layout', 'cssClass': 'icon-frame-hide', 'cssContent': 'e1046', 'htmlEntity': '&#xe1046' }
|
||||
]; objects= [{ 'meaning': 'Activity', 'cssClass': 'icon-activity', 'cssContent': 'e1100', 'htmlEntity': '&#xe1100' },
|
||||
{ 'meaning': 'Activity Mode', 'cssClass': 'icon-activity-mode', 'cssContent': 'e1101', 'htmlEntity': '&#xe1101' },
|
||||
{ 'meaning': 'Auto-flow Tabular view', 'cssClass': 'icon-autoflow-tabular', 'cssContent': 'e1102', 'htmlEntity': '&#xe1102' },
|
||||
{ 'meaning': 'Clock object type', 'cssClass': 'icon-clock', 'cssContent': 'e1103', 'htmlEntity': '&#xe1103' },
|
||||
{ 'meaning': 'Database', 'cssClass': 'icon-database', 'cssContent': 'e1104', 'htmlEntity': '&#xe1104' },
|
||||
{ 'meaning': 'Data query', 'cssClass': 'icon-database-query', 'cssContent': 'e1105', 'htmlEntity': '&#xe1105' },
|
||||
{ 'meaning': 'Data Set domain object', 'cssClass': 'icon-dataset', 'cssContent': 'e1106', 'htmlEntity': '&#xe1106' },
|
||||
{ 'meaning': 'Datatable, channel table', 'cssClass': 'icon-datatable', 'cssContent': 'e1107', 'htmlEntity': '&#xe1107' },
|
||||
{ 'meaning': 'Dictionary', 'cssClass': 'icon-dictionary', 'cssContent': 'e1108', 'htmlEntity': '&#xe1108' },
|
||||
{ 'meaning': 'Folder', 'cssClass': 'icon-folder', 'cssContent': 'e1109', 'htmlEntity': '&#xe1109' },
|
||||
{ 'meaning': 'Imagery', 'cssClass': 'icon-image', 'cssContent': 'e1110', 'htmlEntity': '&#xe1110' },
|
||||
{ 'meaning': 'Display Layout', 'cssClass': 'icon-layout', 'cssContent': 'e1111', 'htmlEntity': '&#xe1111' },
|
||||
{ 'meaning': 'Generic Object', 'cssClass': 'icon-object', 'cssContent': 'e1112', 'htmlEntity': '&#xe1112' },
|
||||
{ 'meaning': 'Unknown object type', 'cssClass': 'icon-object-unknown', 'cssContent': 'e1113', 'htmlEntity': '&#xe1113' },
|
||||
{ 'meaning': 'Packet domain object', 'cssClass': 'icon-packet', 'cssContent': 'e1114', 'htmlEntity': '&#xe1114' },
|
||||
{ 'meaning': 'Page', 'cssClass': 'icon-page', 'cssContent': 'e1115', 'htmlEntity': '&#xe1115' },
|
||||
{ 'meaning': 'Overlay plot', 'cssClass': 'icon-plot-overlay', 'cssContent': 'e1116', 'htmlEntity': '&#xe1116' },
|
||||
{ 'meaning': 'Stacked plot', 'cssClass': 'icon-plot-stacked', 'cssContent': 'e1117', 'htmlEntity': '&#xe1117' },
|
||||
{ 'meaning': 'Session object', 'cssClass': 'icon-session', 'cssContent': 'e1118', 'htmlEntity': '&#xe1118' },
|
||||
{ 'meaning': 'Table', 'cssClass': 'icon-tabular', 'cssContent': 'e1119', 'htmlEntity': '&#xe1119' },
|
||||
{ 'meaning': 'Latest available data object', 'cssClass': 'icon-tabular-lad', 'cssContent': 'e1120', 'htmlEntity': '&#xe1120' },
|
||||
{ 'meaning': 'Latest available data set', 'cssClass': 'icon-tabular-lad-set', 'cssContent': 'e1121', 'htmlEntity': '&#xe1121' },
|
||||
{ 'meaning': 'Real-time table view', 'cssClass': 'icon-tabular-realtime', 'cssContent': 'e1122', 'htmlEntity': '&#xe1122' },
|
||||
{ 'meaning': 'Real-time scrolling table', 'cssClass': 'icon-tabular-scrolling', 'cssContent': 'e1123', 'htmlEntity': '&#xe1123' },
|
||||
{ 'meaning': 'Telemetry element', 'cssClass': 'icon-telemetry', 'cssContent': 'e1124', 'htmlEntity': '&#xe1124' },
|
||||
{ 'meaning': 'Telemetry Panel object', 'cssClass': 'icon-telemetry-panel', 'cssContent': 'e1125', 'htmlEntity': '&#xe1125' },
|
||||
{ 'meaning': 'Timeline object', 'cssClass': 'icon-timeline', 'cssContent': 'e1126', 'htmlEntity': '&#xe1126' },
|
||||
{ 'meaning': 'Timer object', 'cssClass': 'icon-timer', 'cssContent': 'e1127', 'htmlEntity': '&#xe1127' },
|
||||
{ 'meaning': 'Data Topic', 'cssClass': 'icon-topic', 'cssContent': 'e1128', 'htmlEntity': '&#xe1128' },
|
||||
{ 'meaning': 'Fixed Position object', 'cssClass': 'icon-box-with-dashed-lines', 'cssContent': 'e1129', 'htmlEntity': '&#xe1129' },
|
||||
{ 'meaning': 'Summary Widget', 'cssClass': 'icon-summary-widget', 'cssContent': 'e1130', 'htmlEntity': '&#xe1130' },
|
||||
{ 'meaning': 'Notebook object', 'cssClass': 'icon-notebook', 'cssContent': 'e1131', 'htmlEntity': '&#xe1131' }
|
||||
];
|
||||
"></div>
|
||||
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Glyphs</h1>
|
||||
<div class="l-section">
|
||||
<p>Symbolic glyphs are used extensively in Open MCT to call attention to interactive elements, identify objects, and aid in visual recall. Glyphs are made available in a custom symbols font, and have associated CSS classes for their usage. Using a font in this way (versus using images or sprites) has advantages in that each symbol is in effect a scalable vector that can be sized up or down as needed. Color can also quite easily be applied via CSS.</p>
|
||||
<p>New glyphs can be added if needed. Take care to observe the following guidelines:
|
||||
<ul>
|
||||
<li>Symbols should be created at 512 pixels high, and no more than 512 pixels wide. This size is based on a "crisp" 16px approach. Find out more about <a class="link" target="_blank" href="http://asimpleframe.com/writing/custom-icon-font-tutorial-icomoon">crisp symbol fonts</a>.</li>
|
||||
<li>In general, the symbol should occupy most of a square area as possible; avoid symbol aspect ratios that are squat or tall.</li>
|
||||
<li>For consistency and legibility, symbols are designed as mostly solid shapes. Avoid using thin lines or fine detail that will be lost when the icon is sized down. In general, no stroke should be less than 32 pixels.</li>
|
||||
<li>Symbols should be legible down to a minimum of 12 x 12 pixels.</li>
|
||||
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>How to Use Glyphs</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>The easiest way to use a glyph is to include its CSS class in an element. The CSS adds a pseudo <code>:before</code> HTML element to whatever element it's attached to that makes proper use of the symbols font.</p>
|
||||
<p>Alternately, you can use the <code>.ui-symbol</code> class in an object that contains encoded HTML entities. This method is only recommended if you cannot use the aforementioned CSS class approach.</p>
|
||||
</div>
|
||||
<mct-example><a class="s-button icon-gear" title="Settings"></a>
|
||||
<br /><br />
|
||||
<a class="s-icon-button icon-gear" title="Settings"></a>
|
||||
<br /><br />
|
||||
<div class="ui-symbol">  </div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>General User Interface Glyphs</h2>
|
||||
<p>Glyphs suitable for denoting general user interface verbs and nouns.</p>
|
||||
<div class="items-holder grid">
|
||||
<div class="item glyph-item" ng-repeat="glyph in general">
|
||||
<div class="glyph" ng-class="glyph.cssClass"></div>
|
||||
<table class="details">
|
||||
<tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
|
||||
<tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
|
||||
<tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
|
||||
<tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Control Glyphs</h2>
|
||||
<p>Glyphs created for use in various controls.</p>
|
||||
<div class="items-holder grid">
|
||||
<div class="item glyph-item" ng-repeat="glyph in controls">
|
||||
<div class="glyph" ng-class="glyph.cssClass"></div>
|
||||
<table class="details">
|
||||
<tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
|
||||
<tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
|
||||
<tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
|
||||
<tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Object Type Glyphs</h2>
|
||||
<p>These glyphs are reserved exclusively to denote types of objects in the application. Only use them if you are referring to a pre-existing object type.</p>
|
||||
<div class="items-holder grid">
|
||||
<div class="item glyph-item" ng-repeat="glyph in objects">
|
||||
<div class="glyph" ng-class="glyph.cssClass"></div>
|
||||
<table class="details">
|
||||
<tr><td class="label">Class</td><td class="value">.{{glyph.cssClass}}</td></tr>
|
||||
<tr><td class="label">Meaning</td><td class="value">{{glyph.meaning}}</td></tr>
|
||||
<tr><td class="label">CSS Content</td><td class="value">\{{glyph.cssContent}}</td></tr>
|
||||
<tr><td class="label">HTML Entity</td><td class="value">{{glyph.htmlEntity}}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Text Input</h1>
|
||||
<div class="l-section">
|
||||
<p>Text inputs and textareas have a consistent look-and-feel across the application. The input's <code>placeholder</code> attribute is styled to appear visually different from an entered value.</p>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Text Inputs</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Use a text input where the user should enter relatively short text entries.</p>
|
||||
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
|
||||
</div>
|
||||
<mct-example><input type="text" placeholder="Enter a value" />
|
||||
<br /><br />
|
||||
<input type="text" placeholder="Enter a value" value="An entered value" />
|
||||
<br /><br />
|
||||
<input type="text" placeholder="Enter a value" class="sm" value="Small" />
|
||||
<br /><br />
|
||||
<input type="text" placeholder="Enter a value" class="med" value="A medium input" />
|
||||
<br /><br />
|
||||
<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
|
||||
<br /><br />
|
||||
<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Textareas</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
|
||||
<p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
|
||||
</div>
|
||||
<mct-example><div style="position: relative; height: 100px">
|
||||
<textarea placeholder="Enter a value"></textarea>
|
||||
</div>
|
||||
<br />
|
||||
<div style="position: relative; height: 100px">
|
||||
<textarea placeholder="Enter a value">An entered value</textarea>
|
||||
</div>
|
||||
<br /><br />
|
||||
<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
|
||||
<br /><br />
|
||||
<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
|
||||
<br /><br />
|
||||
<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Introduction</h1>
|
||||
<div class="l-section">
|
||||
<p>Open MCT is a robust, extensible telemetry monitoring and situational awareness system that provides a framework supporting fast and efficient multi-mission deployment. This guide will explore the major concepts and design elements of Open MCT. Its overall goal is to guide you in creating new features and plugins that seamlessly integrate with the base application.</p>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Everything Is An Object</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>First and foremost, Open MCT uses a “object-oriented” approach: everything in the system is an object. Objects come in different types, and some objects can contain other objects of given types. This is similar to how the file management system of all modern computers works: a folder object can contain any other type of object, a presentation file can contain an image. This is conceptually the same in Open MCT.</p>
|
||||
<p>As you develop plugins for Open MCT, consider how a generalized component might be combined with others when designing to create a rich and powerful larger object, rather than adding a single monolithic, non-modular plugin. To solve a particular problem or allow a new feature in Open MCT, you may need to introduce more than just one new object type.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="../images/diagram-objects.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Object Types</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>In the same way that different types of files might be opened and edited by different applications, objects in Open MCT also have different types. For example, a Display Layout provides a way that other objects that display information can be combined and laid out in a canvas area to create a recallable display that suits the needs of the user that created it. A Telemetry Panel allows a user to collect together Telemetry Points and visualize them as a plot or a table.</p>
|
||||
<p>Object types provide a containment model that guides the user in their choices while creating a new object, and allows view normalization when flipping between different views. When a given object may only contain other objects of certain types, advantages emerge: the result of adding new objects is more predictable, more alternate views can be provided because the similarities between the contained objects is close, and we can provide more helpful and pointed guidance to the user because we know what types of objects they might be working with at a given time.</p>
|
||||
<p>The types of objects that a container can hold should be based on the purpose of the container and the views that it affords. For example, a Folder’s purpose is to allow a user to conceptually organize objects of all other types; a Folder must therefore be able to contain an object of any type.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="../images/diagram-containment.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Object Views</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Views are simply different ways to view the content of a given object. For example, telemetry data could be viewed as a plot or a table. A clock can display its time in analog fashion or with digital numbers. In each view, all of the content is present; it’s just represented differently. When providing views for an object, all the content of the object should be present in each view.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="../images/diagram-views.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
</div>
|
||||
@ -1,8 +0,0 @@
|
||||
<div class="col">
|
||||
<h3>Markup</h3>
|
||||
<span class="w-markup">
|
||||
<pre></pre>
|
||||
</span>
|
||||
<h3>Example</h3>
|
||||
<div class="w-mct-example"></div>
|
||||
</div>
|
||||
@ -1,168 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Menus</h1>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Context Menus</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Context menus are used extensively in Open MCT. They are created dynamically upon a contextual click and positioned at the user's cursor position coincident with the element that invoked them. Context menus must use absolute position and utilize a z-index that places them above other in-page elements.</p>
|
||||
<p>See <a class="link" href="http://localhost:8080/#/browse/styleguide:home/controls?view=styleguide.standards">User Interface Standards</a> for more details on z-indexing in Open MCT. Context menus should be destroyed if the user clicks outside the menu element.</p>
|
||||
</div>
|
||||
<mct-example><div style="height: 120px">
|
||||
<div class="menu-element context-menu-wrapper mobile-disable-select">
|
||||
<div class="menu context-menu">
|
||||
<ul>
|
||||
<li onclick="alert('Perform an action')" title="Open in a new browser tab" class="icon-new-window">Open In New Tab</li>
|
||||
<li onclick="alert('Perform an action')" title="Remove this object from its containing object." class="icon-trash">Remove</li>
|
||||
<li onclick="alert('Perform an action')" title="Create Link to object in another location." class="icon-link">Create Link</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div></mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Dropdown Menus</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Dropdown menus are a dedicated, more discoverable context menu for a given object. Like context menus, dropdown menus are used extensively in Open MCT, and are most often associated with object header elements. They visually manifest as a downward pointing arrow <span class="context-available"></span> associated with an element, and when clicked displays a context menu at that location. See guidelines above about context menus in regards to z-indexing and element lifecycle.</p>
|
||||
<p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
|
||||
</div>
|
||||
<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
|
||||
|
||||
<div class="l-flex-row flex-elem grows object-header">
|
||||
<span class="type-icon flex-elem icon-layout"></span>
|
||||
<span class="l-elem-wrapper l-flex-row flex-elem grows">
|
||||
<span class="title-label flex-elem holder flex-can-shrink ng-binding">Object Header</span>
|
||||
<span class="flex-elem context-available-w">
|
||||
<span ng-controller="MenuArrowController as menuArrow" class="ng-scope">
|
||||
<a class="context-available" ng-click="menuArrow.showMenu($event)"></a>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div></mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Checkbox Menus</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Checkbox menus add checkbox options to each item of a dropdown menu. Use this to </p>
|
||||
<p>Use a dropdown menu to encapsulate important the actions of an object in the object's header, or in a place that you'd use a context menu, but want to make the availability of the menu more apparent.</p>
|
||||
</div>
|
||||
<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
|
||||
<div ng-controller="SearchMenuController as controller" class="ng-scope">
|
||||
<div class="menu checkbox-menu" mct-click-elsewhere="parameters.menuVisible(false)">
|
||||
<ul>
|
||||
<!-- First element is special - it's a reset option -->
|
||||
<li class="search-menu-item special icon-asterisk" title="Select all filters" ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
|
||||
<label class="checkbox custom no-text">
|
||||
<input type="checkbox" class="checkbox ng-untouched ng-valid ng-dirty" ng-model="ngModel.checkAll" ng-change="controller.checkAll()">
|
||||
<em></em>
|
||||
</label>
|
||||
All
|
||||
</li>
|
||||
<li class="search-menu-item icon-folder">
|
||||
<label class="checkbox custom no-text">
|
||||
<input type="checkbox" class="checkbox">
|
||||
<em></em>
|
||||
</label>
|
||||
Folder
|
||||
</li>
|
||||
<li class="search-menu-item icon-layout">
|
||||
<label class="checkbox custom no-text">
|
||||
<input type="checkbox" class="checkbox">
|
||||
<em></em>
|
||||
</label>
|
||||
Display Layout
|
||||
</li>
|
||||
<li class="search-menu-item icon-box-with-dashed-lines">
|
||||
<label class="checkbox custom no-text">
|
||||
<input type="checkbox" class="checkbox">
|
||||
<em></em>
|
||||
</label>
|
||||
Fixed Position Display
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Palettes</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Use a palette to provide color choices. Similar to context menus and dropdowns, palettes should be dismissed when a choice is made within them, or if the user clicks outside one. Selected palette choices should utilize the <code>selected</code> CSS class to visualize indicate that state.</p>
|
||||
<p>Note that while this example uses static markup for illustrative purposes, don't do this - use a front-end framework with repeaters to build the color choices.</p>
|
||||
</div>
|
||||
<mct-example><div style="height: 220px" title="Ignore me, I'm just here to provide space for this example.">
|
||||
|
||||
<div class="s-button s-menu-button menu-element t-color-palette icon-paint-bucket" ng-controller="ClickAwayController as toggle">
|
||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||
<span class="color-swatch" style="background: rgb(255, 0, 0);"></span>
|
||||
<div class="menu l-palette l-color-palette" ng-show="toggle.isActive()">
|
||||
<div class="l-palette-row l-option-row">
|
||||
<div class="l-palette-item s-palette-item no-selection"></div>
|
||||
<span class="l-palette-item-label">None</span>
|
||||
</div>
|
||||
<div class="l-palette-row">
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(0, 0, 0);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(28, 28, 28);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(57, 57, 57);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(85, 85, 85);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(113, 113, 113);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(142, 142, 142);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(170, 170, 170);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(198, 198, 198);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(227, 227, 227);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(255, 255, 255);"></div>
|
||||
</div>
|
||||
<div class="l-palette-row">
|
||||
<div class="l-palette-item s-palette-item selected" style="background: rgb(255, 0, 0);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(224, 64, 64);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(240, 160, 72);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(255, 248, 96);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(128, 240, 72);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(128, 248, 248);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(88, 144, 224);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(0, 72, 240);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(136, 80, 240);"></div>
|
||||
<div class="l-palette-item s-palette-item" style="background: rgb(224, 96, 248);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div></mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,48 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Standards</h1>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Absolute Positioning and Z-Indexing</h2>
|
||||
<p>Absolute positioning is used in Open MCT in the main envelope interface to handle layout and draggable pane splitters, for elements that must be dynamically created and positioned (like context menus) and for buttons that are placed over other elements, such as a plot's zoom/pan history and reset buttons. When using absolute positioning, follow these guidelines:</p>
|
||||
<ul>
|
||||
<li>Don't specify a z-index if you don't have to.</li>
|
||||
<li>If you must specify a z-index, use the lowest number you that prevents your element from being covered and puts it at the correct level per the table below.</li>
|
||||
</ul>
|
||||
<!-- This content maintained at https://docs.google.com/spreadsheets/d/1AzhUY0P3hLCfT8yPa2Cb1dwOOsQXBuSgCrOkhIoVm0A/edit#gid=0 -->
|
||||
<table>
|
||||
<tr class='header'><td>Type</td><td>Description</td><td>Z-index Range</td></tr>
|
||||
<tr><td>Base interface items</td><td>Base level elements</td><td>0 - 1</td></tr>
|
||||
<tr><td>Primary pane</td><td>Elements in the primary "view area" pane</td><td>2</td></tr>
|
||||
<tr><td>Inspector pane, splitters</td><td>Elements in the Inspector, and splitters themselves</td><td>3</td></tr>
|
||||
<tr><td>More base interface stuff</td><td>Base level elements</td><td>4 - 9</td></tr>
|
||||
<tr><td>Treeview</td><td>Lefthand treeview elements</td><td>30 - 39</td></tr>
|
||||
<tr><td>Help bubbles, rollover hints</td><td>Infobubbles, and similar</td><td>50 - 59</td></tr>
|
||||
<tr><td>Context, button and dropdown menus</td><td>Context menus, button menus, etc. that must overlay other elements</td><td>70 - 79</td></tr>
|
||||
<tr><td>Overlays</td><td>Modal overlay displays</td><td>100 - 109</td></tr>
|
||||
<tr><td>Event messages</td><td>Alerts, event dialogs</td><td>1000</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,227 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2022, 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.
|
||||
-->
|
||||
<style>
|
||||
.w-mct-example div[class*="s-status"],
|
||||
.w-mct-example span[class*="s-status"],
|
||||
.w-mct-example div[class*="s-limit"],
|
||||
.w-mct-example span[class*="s-limit"] {
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.w-mct-example table {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Status Indication</h1>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Status Classes</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Status classes allow any block or inline-block element to be decorated in order to articulate a
|
||||
status. Provided classes include color-only and color plus icon; custom icons can easily be
|
||||
employed by using a color-only status class in combination with an <a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">glyph</a>.</p>
|
||||
<ul>
|
||||
<li>Color only</li>
|
||||
<ul>
|
||||
<li><code>s-status-warning-hi</code></li>
|
||||
<li><code>s-status-warning-lo</code></li>
|
||||
<li><code>s-status-diagnostic</code></li>
|
||||
<li><code>s-status-info</code></li>
|
||||
<li><code>s-status-ok</code></li>
|
||||
</ul>
|
||||
<li>Color and icon</li>
|
||||
<ul>
|
||||
<li><code>s-status-icon-warning-hi</code></li>
|
||||
<li><code>s-status-icon-warning-lo</code></li>
|
||||
<li><code>s-status-icon-diagnostic</code></li>
|
||||
<li><code>s-status-icon-info</code></li>
|
||||
<li><code>s-status-icon-ok</code></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<mct-example><!-- Color alone examples -->
|
||||
<div class="s-status-warning-hi">WARNING HI</div>
|
||||
<div class="s-status-warning-lo">WARNING LOW</div>
|
||||
<div class="s-status-diagnostic">DIAGNOSTIC</div>
|
||||
<div class="s-status-info">INFO</div>
|
||||
<div class="s-status-ok">OK</div>
|
||||
|
||||
<!-- Color and icon examples -->
|
||||
<div class="s-status-icon-warning-hi">WARNING HI with icon</div>
|
||||
<div class="s-status-icon-warning-lo">WARNING LOW with icon</div>
|
||||
<div class="s-status-icon-diagnostic">DIAGNOSTIC with icon</div>
|
||||
<div class="s-status-icon-info">INFO with icon</div>
|
||||
<div class="s-status-icon-ok">OK with icon</div>
|
||||
<div class="s-status-warning-hi icon-alert-triangle">WARNING HI with custom icon</div>
|
||||
<div>Some text with an <span class="s-status-icon-diagnostic">inline element</span> showing a Diagnostic status.</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Limit Classes</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Limit classes are a specialized form of status, specifically meant to be applied to telemetry
|
||||
displays to indicate that a limit threshold has been violated. Open MCT provides both severity
|
||||
and direction classes; severity (yellow and red) can be used alone or in combination
|
||||
with direction (upper or lower). Direction classes cannot be used on their own.</p>
|
||||
<p>Like Status classes, Limits can be used as color-only, or color plus icon. Custom icons can
|
||||
be applied in the same fashion as described above.</p>
|
||||
<ul>
|
||||
<li>Severity color alone</li>
|
||||
<ul>
|
||||
<li><code>s-limit-yellow</code>: A yellow limit.</li>
|
||||
<li><code>s-limit-red</code>: A red limit.</li>
|
||||
</ul>
|
||||
<li>Severity color and icon</li>
|
||||
<ul>
|
||||
<li><code>s-limit-icon-yellow</code>: A yellow limit with icon.</li>
|
||||
<li><code>s-limit-icon-red</code>: A red limit with icon.</li>
|
||||
</ul>
|
||||
<li>Direction indicators. MUST be used with a "color alone" limit class. See
|
||||
examples for more.</li>
|
||||
<ul>
|
||||
<li><code>s-limit-upr</code>: Upper limit.</li>
|
||||
<li><code>s-limit-lwr</code>: Lower limit.</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<mct-example><!-- Color alone examples -->
|
||||
<div class="s-limit-yellow">Yellow limit</div>
|
||||
<div class="s-limit-red">Red limit</div>
|
||||
|
||||
<!-- Color and icon examples -->
|
||||
<div class="s-limit-icon-yellow">Yellow limit with icon</div>
|
||||
<div class="s-limit-icon-red">Red limit with icon</div>
|
||||
<div class="s-limit-red icon-alert-rect">Red Limit with a custom icon</div>
|
||||
<div>Some text with an <span class="s-limit-icon-yellow">inline element</span> showing a yellow limit.</div>
|
||||
|
||||
<!-- Severity and direction examples -->
|
||||
<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
|
||||
<div class="s-limit-red s-limit-upr">Upper red limit</div>
|
||||
|
||||
<!-- Limits applied in a table -->
|
||||
<table>
|
||||
<tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
|
||||
<tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
|
||||
<tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
|
||||
<tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-alert-triangle">0.451</td><td>1.007</td></tr>
|
||||
</table>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Status Bar Indicators</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Indicators are small iconic notification elements that appear in the Status Bar area of
|
||||
the application at the window's bottom. Indicators should be used to articulate the state of a
|
||||
system and optionally provide gestures related to that system. They use a combination of icon and
|
||||
color to identify themselves and articulate a state respectively.</p>
|
||||
<h3>Recommendations</h3>
|
||||
<ul>
|
||||
<li><strong>Keep the icon consistent</strong>. The icon is the principal identifier of the system and is a valuable
|
||||
recall aid for the user. Don't change the icon as a system's state changes, use color and
|
||||
text for that purpose.</li>
|
||||
<li><strong>Don't use the same icon more than once</strong>. Select meaningful and distinct icons so the user
|
||||
will be able to quickly identify what they're looking for.</li>
|
||||
</ul>
|
||||
|
||||
<h3>States</h3>
|
||||
<ul>
|
||||
<li><strong>Disabled</strong>: The system is not available to the user.</li>
|
||||
<li><strong>Off / Available</strong>: The system is accessible to the user but is not currently
|
||||
"On" or has not been configured. If the Indicator directly provides gestures
|
||||
related to the system, such as opening a configuration dialog box, then use
|
||||
"Available"; if the user must act elsewhere or the system isn't user-controllable,
|
||||
use "Off".</li>
|
||||
<li><strong>On</strong>: The system is enabled or configured; it is having an effect on the larger application.</li>
|
||||
<li><strong>Alert / Error</strong>: There has been a problem with the system. Generally, "Alert"
|
||||
should be used to call attention to an issue that isn't critical, while "Error"
|
||||
should be used to call attention to a problem that the user should really be aware of or do
|
||||
something about.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Structure</h3>
|
||||
<p>Indicators consist of a <code>.ls-indicator</code>
|
||||
wrapper element with <code>.icon-*</code> classes for the type of thing they represent and
|
||||
<code>.s-status-*</code> classes to articulate the current state. Title attributes should be used
|
||||
to provide more verbose information about the thing and/or its status.</p>
|
||||
<p>The wrapper encloses a <code>.label</code> element that is displayed on hover. This element should
|
||||
include a brief statement of the current status, and can also include clickable elements
|
||||
as <code><a></code> tags. An optional <code>.count</code> element can be included to display
|
||||
information such as a number of messages.</p>
|
||||
<p>Icon classes are as defined on the
|
||||
<a class="link" href="#/browse/styleguide:home/glyphs?tc.mode=local&tc.timeSystem=utc&tc.startDelta=1800000&tc.endDelta=0&view=styleguide.glyphs">
|
||||
Glyphs page</a>. Status classes applicable to Indicators are as follows:</p>
|
||||
<ul>
|
||||
<li><code>s-status-disabled</code></li>
|
||||
<li><code>s-status-off</code></li>
|
||||
<li><code>s-status-available</code></li>
|
||||
<li><code>s-status-on</code></li>
|
||||
<li><code>s-status-alert</code></li>
|
||||
<li><code>s-status-error</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<mct-example><div class="s-ue-bottom-bar status-holder s-status-bar">
|
||||
<span class="ls-indicator icon-database s-status-disabled" title="The system is currently disabled.">
|
||||
<span class="label">System not enabled.</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="s-ue-bottom-bar status-holder s-status-bar">
|
||||
<span class="ls-indicator icon-database s-status-available" title="Configure data connection.">
|
||||
<span class="label">Data connection available
|
||||
<a class="icon-gear">Configure</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="s-ue-bottom-bar status-holder s-status-bar">
|
||||
<span class="ls-indicator icon-database s-status-on" title="Data connected.">
|
||||
<span class="label">Connected to Skynet
|
||||
<a class="icon-gear">Change</a>
|
||||
<a>Disconnect</a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="s-ue-bottom-bar status-holder s-status-bar">
|
||||
<span class="ls-indicator icon-database s-status-alert" title="System is self-aware.">
|
||||
<span class="label">Skynet at Turing Level 5</span>
|
||||
</span>
|
||||
<span class="ls-indicator icon-bell s-status-error" title="You have alerts.">
|
||||
<span class="label">
|
||||
<a class="icon-alert-triangle">View Alerts</a>
|
||||
</span>
|
||||
<span class="count">495</span>
|
||||
</span>
|
||||
</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,82 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2022, 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
function ExampleStyleGuideModelProvider($q) {
|
||||
var pages = {};
|
||||
|
||||
// Add pages
|
||||
pages.intro = {
|
||||
name: "Introduction",
|
||||
type: "styleguide.intro",
|
||||
location: "styleguide:home"
|
||||
};
|
||||
pages.standards = {
|
||||
name: "Standards",
|
||||
type: "styleguide.standards",
|
||||
location: "styleguide:home"
|
||||
};
|
||||
pages.colors = {
|
||||
name: "Colors",
|
||||
type: "styleguide.colors",
|
||||
location: "styleguide:home"
|
||||
};
|
||||
pages.glyphs = {
|
||||
name: "Glyphs",
|
||||
type: "styleguide.glyphs",
|
||||
location: "styleguide:home"
|
||||
};
|
||||
pages.status = {
|
||||
name: "Status Indication",
|
||||
type: "styleguide.status",
|
||||
location: "styleguide:home"
|
||||
};
|
||||
pages.controls = {
|
||||
name: "Controls",
|
||||
type: "styleguide.controls",
|
||||
location: "styleguide:ui-elements"
|
||||
};
|
||||
pages.input = {
|
||||
name: "Text Inputs",
|
||||
type: "styleguide.input",
|
||||
location: "styleguide:ui-elements"
|
||||
};
|
||||
pages.menus = {
|
||||
name: "Menus",
|
||||
type: "styleguide.menus",
|
||||
location: "styleguide:ui-elements"
|
||||
};
|
||||
|
||||
return {
|
||||
getModels: function () {
|
||||
return $q.when(pages);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return ExampleStyleGuideModelProvider;
|
||||
}
|
||||
);
|
||||
@ -1,30 +0,0 @@
|
||||
define([
|
||||
'../res/templates/mct-example.html'
|
||||
], function (
|
||||
MCTExampleTemplate
|
||||
) {
|
||||
|
||||
function MCTExample() {
|
||||
function link($scope, $element, $attrs, controller, $transclude) {
|
||||
var codeEl = $element.find('pre');
|
||||
var exampleEl = $element.find('div');
|
||||
|
||||
$transclude(function (clone) {
|
||||
exampleEl.append(clone);
|
||||
codeEl.text(exampleEl.html()
|
||||
.replace(/ class="ng-scope"/g, "")
|
||||
.replace(/ ng-scope"/g, '"'));
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
restrict: "E",
|
||||
template: MCTExampleTemplate,
|
||||
transclude: true,
|
||||
link: link,
|
||||
replace: true
|
||||
};
|
||||
}
|
||||
|
||||
return MCTExample;
|
||||
});
|
||||
Reference in New Issue
Block a user