2015-05-13 22:58:22 +00:00
|
|
|
<!--
|
2017-04-05 21:35:12 +00:00
|
|
|
Open MCT, Copyright (c) 2014-2017, United States Government
|
2015-05-13 22:58:22 +00:00
|
|
|
as represented by the Administrator of the National Aeronautics and Space
|
|
|
|
|
Administration. All rights reserved.
|
|
|
|
|
|
2016-07-12 23:21:58 +00:00
|
|
|
Open MCT is licensed under the Apache License, Version 2.0 (the
|
2015-05-13 22:58:22 +00:00
|
|
|
"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.
|
|
|
|
|
|
2016-07-12 23:21:58 +00:00
|
|
|
Open MCT includes source code licensed under additional open source
|
2015-05-13 22:58:22 +00:00
|
|
|
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.
|
|
|
|
|
-->
|
2016-08-22 18:38:17 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
2018-05-25 18:19:27 +00:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
<title></title>
|
2018-08-07 21:47:50 +00:00
|
|
|
<script src="dist/openmct.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="dist/openmct.css">
|
|
|
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32">
|
|
|
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96">
|
|
|
|
|
<link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16">
|
|
|
|
|
<link rel="shortcut icon" href="dist/favicons/favicon.ico">
|
2018-05-25 18:19:27 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
</body>
|
2018-08-07 21:47:50 +00:00
|
|
|
<script>
|
|
|
|
|
var THIRTY_MINUTES = 30 * 60 * 1000;
|
|
|
|
|
[
|
|
|
|
|
'example/eventGenerator',
|
|
|
|
|
'example/styleguide'
|
|
|
|
|
].forEach(
|
|
|
|
|
openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
|
|
|
|
|
);
|
|
|
|
|
openmct.install(openmct.plugins.MyItems());
|
|
|
|
|
openmct.install(openmct.plugins.LocalStorage());
|
|
|
|
|
openmct.install(openmct.plugins.Generator());
|
|
|
|
|
openmct.install(openmct.plugins.ExampleImagery());
|
|
|
|
|
openmct.install(openmct.plugins.UTCTimeSystem());
|
|
|
|
|
openmct.install(openmct.plugins.ImportExport());
|
|
|
|
|
openmct.install(openmct.plugins.AutoflowView({
|
|
|
|
|
type: "telemetry.panel"
|
|
|
|
|
}));
|
|
|
|
|
openmct.install(openmct.plugins.Conductor({
|
|
|
|
|
menuOptions: [
|
|
|
|
|
{
|
|
|
|
|
name: "Fixed",
|
|
|
|
|
timeSystem: 'utc',
|
|
|
|
|
bounds: {
|
|
|
|
|
start: Date.now() - THIRTY_MINUTES,
|
|
|
|
|
end: Date.now()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Realtime",
|
|
|
|
|
timeSystem: 'utc',
|
|
|
|
|
clock: 'local',
|
|
|
|
|
clockOffsets: {
|
|
|
|
|
start: -25 * 60 * 1000,
|
|
|
|
|
end: 5 * 60 * 1000
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}));
|
|
|
|
|
openmct.install(openmct.plugins.SummaryWidget());
|
|
|
|
|
openmct.install(openmct.plugins.Notebook());
|
2018-09-26 22:34:44 +00:00
|
|
|
openmct.install(openmct.plugins.FolderView());
|
2018-10-26 21:14:00 +00:00
|
|
|
openmct.install(openmct.plugins.Tabs());
|
Flexible Layout (#2201)
* first cut of flexible layout
* better drag handling
* add drop targets to every row
* enable drag and drop between columns and rows
* enable persistance
* add editing capability
* chage rows to frames and columns to containers, switch draggable to whole frame object
* Merge latest, resolve conflicts.
Need to just apply these changes to Deep's branch and push
* enhancements to drag targets
* WIP in flexibleLayout, container.vue files
- Refined classes and markup;
- min-width changed to flex-basis;
- Added toggle direction button;
* Significant progress but still WIP
- Refined classes and markup;
- Layout toggling working;
- Add Container working properly;
- TODOs: fix sizing in empty container, fix bordering, more refinements;
* add resizing of frames - still wip
* Significant enhancements
- Moved all CSS into flexibleLayout.vue;
- Layout now improved for empty container and drop hints;
- Proportional sizing now better for frames and containers;
* Resize handle WIP
* abstract splitter and logic into self contained component that will emit an event when mouse is moving
* Resize handle WIP
- Minor tweak to handle padding and hover;
* add container resize todo persist
* persist container resize
* add frame header, fix column resize on last column
* Refinements to resize-handle
- Fixed sizing;
- Transition on hover;
- TODOs: needs is-dragging to maintain hover style while dragging;
* fix drop hints showing after drop
* move header
* improve mouse move gesture
* Added frame size indicator
* add snapto functionality
* Refined container and frame size indicators
- Also added overflow handling to l-grid-view
* improve resizing logic
* add selection on frames
* Various resizing-frames related
- Fixed overflow - now frame widths can be collapsed to 5% minimum;
- Sizing indicators refined, better positioning and layout;
- Added grippy drag indicators to column heads;
- TODOs: add column head cursors and hover effects, hide indicators
when not in edit mode, handle nested layout and flex layouts while
editing
* Selecting and emtpy layout messaging
- Better empty layout message;
- Moved s-selected to proper element in c-fl-frame;
* Drop-hint and sizing related various
- Drop-hints for first placeholder container now display;
- Drop-hints moved into drag-wrapper;
* add delete frame
* Editing various
- Adjust Snow theme constants related to editing;
- Changed delete message wording;
* Updated icon and added description
* add toggle and remove container to toolbar
* miscellaneous cleanup
* add container button to toolbar
* improve toolbar
* code cleanup in plugin.js
* Various icons, toolbar separator
- Copied in c-toolbar__separator and associated changes in _controls
from Pegah's layout_alpha branch - may have conflicts later.
- Added separator to FL toolbar;
- Updated icons for grippy-ew, toolbar icons;
* add check for empty containers"
* logic to resize frames on drop
* fix delete frame and persisting toolbar
* Significant changes to edit / selection styling
- Both Flexible and fixed Display Layouts addressed;
- Both themes addressed;
- Changed drop-hint icon to icon-plus;
* add correct icons to frame header and fix toolbars showing up in wrong views
* Moving and resizing various
- Cursors;
- Grippy added to frame resize-handle, WIP!;
* add container reordering
* add frame/no frame support to toolbar'
* fix regression of resize handles showing after last frame in container
* force selection of flexible-layout when editing is first clicked, to apply correct toolbar
* make changes to simplify toolbar
* Modified sizing algorithm slightly
* make changes reviewer requested
* fix regression that causes top drop hint to not show
* remove unused variables and bind events to vue
* unsub selection before destroy
2018-11-09 01:17:14 +00:00
|
|
|
openmct.install(openmct.plugins.FlexibleLayout());
|
2018-12-20 21:18:22 +00:00
|
|
|
openmct.install(openmct.plugins.LADTable());
|
2018-08-07 21:47:50 +00:00
|
|
|
openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
|
|
|
|
|
openmct.time.timeSystem('utc');
|
|
|
|
|
openmct.start();
|
2018-10-11 18:33:33 +00:00
|
|
|
|
|
|
|
|
// openmct.toolbars.addProvider({
|
|
|
|
|
// name: "Testing Toolbar",
|
|
|
|
|
// key: "testing",
|
|
|
|
|
// description: "a mock toolbar that exercises all controls",
|
|
|
|
|
// forSelection: function (selection) {
|
|
|
|
|
// return true; // always applies.
|
|
|
|
|
// },
|
|
|
|
|
// toolbar: function (selection) {
|
|
|
|
|
// return [
|
|
|
|
|
// {
|
|
|
|
|
// control: 'menu',
|
|
|
|
|
// icon: 'icon-plus',
|
|
|
|
|
// label: 'Add',
|
|
|
|
|
// options: [
|
|
|
|
|
// { name: 'Box', class: 'icon-box', title: 'Add Box' },
|
|
|
|
|
// { name: 'Line', class: 'icon-line-horz', title: 'Add Line' },
|
|
|
|
|
// { name: 'Text', class: 'icon-font', title: 'Add Text' },
|
|
|
|
|
// { name: 'Image', class: 'icon-image', title: 'Add Image' }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'color-picker',
|
|
|
|
|
// icon: 'icon-paint-bucket',
|
|
|
|
|
// value: '#33ff00',
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'color-picker',
|
|
|
|
|
// icon: 'icon-pencil',
|
|
|
|
|
// value: '#ffffff',
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'color-picker',
|
|
|
|
|
// icon: 'icon-font',
|
|
|
|
|
// value: '#333333',
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'select-menu',
|
|
|
|
|
// value: 11,
|
|
|
|
|
// options: [
|
|
|
|
|
// { value: 9, name: '9 px' },
|
|
|
|
|
// { value: 10, name: '10 px' },
|
|
|
|
|
// { value: 11, name: '11 px' },
|
|
|
|
|
// { value: 12, name: '12 px' },
|
|
|
|
|
// { value: 13, name: '13 px' },
|
|
|
|
|
// { value: 14, name: '14 px' },
|
|
|
|
|
// { value: 16, name: '16 px' },
|
|
|
|
|
// { value: 18, name: '18 px' },
|
|
|
|
|
// { value: 20, name: '20 px' },
|
|
|
|
|
// { value: 24, name: '24 px' },
|
|
|
|
|
// { value: 28, name: '28 px' },
|
|
|
|
|
// { value: 32, name: '32 px' },
|
|
|
|
|
// { value: 40, name: '40 px' },
|
|
|
|
|
// { value: 48, name: '48 px' },
|
|
|
|
|
// { value: 56, name: '56 px' },
|
|
|
|
|
// { value: 64, name: '64 px' },
|
|
|
|
|
// { value: 72, name: '72 px' },
|
|
|
|
|
// { value: 80, name: '80 px' },
|
|
|
|
|
// { value: 88, name: '88 px' },
|
|
|
|
|
// { value: 96, name: '96 px' },
|
|
|
|
|
// { value: 128, name: '128 px' },
|
|
|
|
|
// { value: 160, name: '160 px' }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'menu',
|
|
|
|
|
// icon: 'icon-layers',
|
|
|
|
|
// options: [
|
|
|
|
|
// { name: 'Move to top', class: 'icon-arrow-double-up', title: 'Move to top' },
|
|
|
|
|
// { name: 'Move up', class: 'icon-arrow-up', title: 'Move up' },
|
|
|
|
|
// { name: 'Move down', class: 'icon-arrow-down', title: 'Move down' },
|
|
|
|
|
// { name: 'Move to bottom', class: 'icon-arrow-double-down', title: 'Move to bottom' }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'button',
|
|
|
|
|
// icon: 'icon-gear'
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'input',
|
|
|
|
|
// type: 'number',
|
|
|
|
|
// label: 'X',
|
|
|
|
|
// value: 1,
|
|
|
|
|
// title: 'X position'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'input',
|
|
|
|
|
// type: 'number',
|
|
|
|
|
// label: 'Y',
|
|
|
|
|
// value: 2,
|
|
|
|
|
// title: 'Y position'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'input',
|
|
|
|
|
// type: 'number',
|
|
|
|
|
// label: 'W',
|
|
|
|
|
// value: 3,
|
|
|
|
|
// title: 'Width'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'input',
|
|
|
|
|
// type: 'number',
|
|
|
|
|
// label: 'H',
|
|
|
|
|
// value: 4,
|
|
|
|
|
// title: 'Height'
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'button',
|
|
|
|
|
// icon: 'icon-trash',
|
|
|
|
|
// label: 'delete',
|
|
|
|
|
// modifier: 'caution'
|
|
|
|
|
// },
|
|
|
|
|
//
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'checkbox',
|
|
|
|
|
// name: 'this is a checkbox',
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'separator'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'toggle-button',
|
|
|
|
|
// title: 'Toggle Frame',
|
|
|
|
|
// property: 'hideFrame',
|
|
|
|
|
// value: false,
|
|
|
|
|
// options: [
|
|
|
|
|
// {
|
|
|
|
|
// value: true,
|
|
|
|
|
// icon: 'icon-frame-hide'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value: false,
|
|
|
|
|
// icon: 'icon-frame-show'
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'toggle-button',
|
|
|
|
|
// title: 'Snap to grid',
|
|
|
|
|
// property: 'snapToGrid',
|
|
|
|
|
// value: true,
|
|
|
|
|
// options: [
|
|
|
|
|
// {
|
|
|
|
|
// value: true,
|
|
|
|
|
// icon: 'icon-grid-snap-to'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value: false,
|
|
|
|
|
// icon: 'icon-grid-snap-no'
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// control: 'toggle-button',
|
|
|
|
|
// title: 'Toggle label',
|
|
|
|
|
// property: 'showLabel',
|
|
|
|
|
// value: true,
|
|
|
|
|
// options: [
|
|
|
|
|
// {
|
|
|
|
|
// value: true,
|
|
|
|
|
// icon: 'icon-two-parts-both'
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// value: false,
|
|
|
|
|
// icon: 'icon-two-parts-one-only'
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
// }
|
|
|
|
|
// ];
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
|
2018-08-07 21:47:50 +00:00
|
|
|
</script>
|
2015-05-13 22:58:22 +00:00
|
|
|
</html>
|
