Maelstrom 2

- Add adapters

index.html

@@ -45,6 +45,7 @@
         ].forEach(
             openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
         );
+        openmct.install(openmct.plugins.MaelstromPlugin());
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalStorage());
         openmct.install(openmct.plugins.Generator());
@@ -82,6 +83,8 @@
         openmct.install(openmct.plugins.Notebook());
         openmct.install(openmct.plugins.FolderView());
         openmct.install(openmct.plugins.Tabs());
+        openmct.install(openmct.plugins.Gauge());
+        openmct.install(openmct.plugins.Bignumbers());
         openmct.install(openmct.plugins.FlexibleLayout());
         openmct.install(openmct.plugins.LADTable());
         openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));

src/plugins/bignumbers/bignumbers.js

@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    './components/bignumbers.vue',
+    'vue'
+], function (
+    BignumbersComponent,
+    Vue
+) {
+    function Bignumbers(openmct) {
+        return {
+            key: 'bignumbers',
+            name: 'Bignumbers',
+            cssClass: 'icon-telemetry',
+            canView: function (domainObject) {
+                return domainObject.type === 'bignumbers';
+            },
+            canEdit: function (domainObject) {
+                return domainObject.type === 'bignumbers';
+            },
+            view: function (domainObject) {
+                let component;
+
+                return {
+                    show: function (element) {
+                        component =  new Vue({
+                            components: {
+                                BignumbersComponent: BignumbersComponent.default
+                            },
+                            provide: {
+                                openmct,
+                                domainObject,
+                                composition: openmct.composition.get(domainObject)
+                            },
+                            el: element,
+                            template: '<bignumbers-component></bignumbers-component>'
+                        });
+                    },
+                    destroy: function (element) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                };
+            },
+            priority: function () {
+                return 1;
+            }
+        };
+    }
+    return Bignumbers;
+});

src/plugins/bignumbers/components/bignumbers.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="c-bignumbers">
+        <svg class="c-bignumbers__int" viewBox="0 0 52 32">
+            <text textLength=100% lengthAdjust=spacingAndGlyphs x="0" y="32">{{ this.curValInt }}</text>
+        </svg>
+        <svg class="c-bignumbers__dec" viewBox="0 0 40 20">
+            <text textLength=100% lengthAdjust=spacing x="0" y="20">.{{ this.curValDec }}</text>
+        </svg>
+        <svg class="c-bignumbers__units" viewBox="0 0 45 11">
+            <text textLength=100% lengthAdjust=spacingAndGlyphs x="0" y="11">{{ this.units }}</text>
+        </svg>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-bignumbers {
+        $w1: 53%;
+
+        @include abs();
+        bottom: auto;
+        padding-bottom: 33%;
+
+        &__int,
+        &__dec,
+        &__units {
+            position: absolute;
+            fill: #fff;
+        }
+
+        &__int,
+        &__dec {
+            font-family: $heroFont;
+        }
+
+        &__int {
+            font-size: 51px;
+            opacity: 0.8;
+            width: $w1;
+        }
+
+        &__dec {
+            left: $w1;
+            font-size: 32px;
+            opacity: 0.4;
+            width: 100% - $w1;
+        }
+
+        &__units {
+            font-size: 9px;
+            font-family: $headerFont;
+            left: $w1;
+            bottom: 0;
+            opacity: 0.2;
+            width: 99% - $w1; // Font has different char spacing, so use reduced width
+        }
+    }
+
+</style>
+
+<script>
+    export default {
+        name: "bignumbers",
+        inject: ['openmct', 'domainObject', 'composition'],
+        data: function () {
+            let config = this.domainObject.configuration,
+                units = config.units;
+            console.log(config);
+            return {
+                curValInt: 0,
+                curValDec: 0,
+                units: units
+
+            }
+        },
+        methods: {
+            getInt: function(val, digits) {
+                // Extract integer portion of val and zero-pad it if its length < digits
+                return this.zeroPad(Math.floor(val), digits);
+            },
+            getDec: function(val, digits) {
+                // Extract decimal portion of val to the specified number of digits
+                return Number.parseFloat(val).toFixed(digits).split('.')[1];
+            },
+            zeroPad: function(val, length) {
+                // Zero pads an integer and returns it as a string
+                let s = Math.abs(val).toString();
+                if (s.length < length) {
+                    for (let i = 0; i <= (length - s.length); i++) {
+                        s = '0' + s;
+                    }
+                }
+                if (val < 0) {
+                    s = '-' + s;
+                }
+                return s;
+            },
+            updateValue(datum) {
+                let cv = this.formats[this.valueKey].format(datum);
+                this.curValInt = this.getInt(cv, 3);
+                this.curValDec = this.getDec(cv, 3);
+            },
+            subscribe(domainObject) {
+                this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+                this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+
+                this.valueKey = this
+                    .metadata
+                    .valuesForHints(['range'])[0].key;
+                this.unsubscribe = this.openmct
+                    .telemetry
+                    .subscribe(domainObject, this.updateValue.bind(this), {});
+                this.openmct
+                    .telemetry
+                    .request(domainObject, {strategy: 'latest'})
+                    .then((values) => values.forEach(this.updateValue));
+            }
+        },
+        computed: {
+        },
+        mounted() {
+            this.composition.on('add', this.subscribe);
+            this.composition.load();
+        },
+        destroyed() {
+            this.composition.off('add', this.subscribe);
+            this.unsubscribe();
+        }
+    }
+</script>

src/plugins/bignumbers/plugin.js

@@ -0,0 +1,58 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    './bignumbers'
+], function (
+    Bignumbers
+) {
+    return function plugin() {
+        return function install(openmct) {
+            openmct.objectViews.addProvider(new Bignumbers(openmct));
+
+            openmct.types.addType('bignumbers', {
+                name: "Big Numbers",
+                creatable: true,
+                description: "Display the value of a telemetry element with units in a stylized numeric view.",
+                cssClass: 'icon-telemetry',
+                initialize(domainObject) {
+                    domainObject.composition = [];
+                    domainObject.configuration = {
+                        units: ''
+                    };
+                },
+                form: [
+                    {
+                        name: "Units",
+                        control: "textfield",
+                        cssClass: "",
+                        key: "units",
+                        property: [
+                            "configuration",
+                            "units"
+                        ]
+                    }
+                ]
+            });
+        };
+    };
+});

src/plugins/gauge/components/gaugeRadial.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="c-gauge">
+        <div class="c-gauge__wrapper">
+            <svg class="c-gauge__range" viewBox="0 0 512 512">
+                <text class="c-gauge__curval" transform="translate(256 310)" text-anchor="middle">{{ this.curVal }}</text>
+                <text font-size="35" transform="translate(105 455) rotate(-45)"
+                      v-if="displayMinMax">{{ this.rangeLow }}</text>
+                <text font-size="35" transform="translate(407 455) rotate(45)" text-anchor="end"
+                      v-if="displayMinMax">{{ this.rangeHigh }}</text>
+            </svg>
+
+            <div class="c-dial">
+                <svg class="c-dial__bg" viewBox="0 0 512 512">
+                    <g>
+                        <path d="M256,0C114.6,0,0,114.6,0,256S114.6,512,256,512,512,397.4,512,256,397.4,0,256,0Zm0,412A156,156,0,1,1,412,256,155.9,155.9,0,0,1,256,412Z"/>
+                    </g>
+                </svg>
+
+                <svg class="c-dial__limit" viewBox="0 0 512 512"
+                     v-if="degLimit < 270"
+                     :class="{
+                        'c-limit-clip--90': this.degLimit > 90,
+                        'c-limit-clip--180': this.degLimit >= 180
+                     }">
+                    <path d="M100,256A156,156,0,1,1,366.3,366.3L437,437a255.2,255.2,0,0,0,75-181C512,114.6,397.4,0,256,0S0,114.6,0,256A255.2,255.2,0,0,0,75,437l70.7-70.7A155.5,155.5,0,0,1,100,256Z"
+                          :style="`transform: rotate(${this.degLimit}deg)`"/>
+                </svg>
+
+                <svg class="c-dial__value" viewBox="0 0 512 512"
+                     v-if="this.degValue > 0"
+                     :class="{
+                        'c-dial-clip--90': this.degValue < 90,
+                        'c-dial-clip--180': this.degValue >= 90 && this.degValue < 180
+                     }">
+                    <path d="M256,31A224.3,224.3,0,0,0,98.3,95.5l48.4,49.2a156,156,0,1,1-1,221.6L96.9,415.1A224.4,224.4,0,0,0,256,481c124.3,0,225-100.7,225-225S380.3,31,256,31Z"
+                          :style="`transform: rotate(${this.degValue}deg)`"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-gauge {
+        @include abs();
+        overflow: hidden;
+
+        &__wrapper {
+            position: absolute;
+            width: 100%;
+            padding-bottom: 100%;
+            overflow: hidden;
+        }
+
+        &__value {
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 3vw;
+        }
+
+        &__range {
+            $o: 21%;
+            position: absolute;
+            fill: rgba(#fff, 0.8);
+        }
+
+        &__curval {
+            font-family: $heroFont;
+            font-size: 170px;
+        }
+    }
+
+    .c-dial {
+        // Dial elements
+        @include abs();
+        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
+
+        svg,
+        &__ticks,
+        &__bg,
+        &__limit,
+        &__value {
+            @include abs();
+        }
+
+        svg {
+            path {
+                transform-origin: center;
+            }
+        }
+
+        &__limit {
+            &.c-limit-clip--90 {
+                clip-path: polygon(0 0, 100% 0, 100% 100%);
+            }
+
+            &.c-limit-clip--180 {
+                clip-path: polygon(100% 0, 100% 100%, 0 100%);
+            }
+
+            path {
+                fill: rgba(orange, 0.4);
+            }
+        }
+
+        &__value {
+            &.c-dial-clip--90 {
+                clip-path: polygon(0 0, 50% 50%, 0 100%);
+            }
+
+            &.c-dial-clip--180 {
+                clip-path: polygon(0 0, 100% 0, 0 100%);
+            }
+
+            path {
+                fill: rgba(#fff, 0.8);
+            }
+        }
+
+        &__bg {
+            g {
+                fill: rgba(#fff, 0.1);
+            }
+        }
+    }
+
+</style>
+
+<script>
+    export default {
+        name: "gaugeRadial",
+        inject: ['openmct', 'domainObject', 'composition'],
+        data: function () {
+            let config = this.domainObject.configuration,
+                rangeLow = config.min,
+                rangeHigh = config.max,
+                displayMinMax = config.displayMinMax,
+                limit = config.limit,
+                decimals = config.decimals;
+
+            return {
+                rangeLow,
+                rangeHigh,
+                displayMinMax: displayMinMax.indexOf('Yes') !== -1,
+                limit1: limit,
+                decimals,
+                curVal: 0
+            }
+        },
+        methods: {
+            round: function(val, decimals) {
+                let precision = Math.pow(10, decimals);
+                return Math.round(val * precision)/precision;
+            },
+            valToPercent: function(vValue) {
+                // Don't let the current value exceed the high range, or the dial won't display right
+                if (vValue >= this.rangeHigh) { return 100; }
+                return ((vValue - this.rangeLow) / (this.rangeHigh - this.rangeLow)) * 100;
+            },
+            percentToDegrees: function(vPercent) {
+                return this.round((vPercent/100)*270, 2);
+            },
+            updateValue(datum) {
+                this.curVal = this.round(this.formats[this.valueKey].format(datum), this.decimals);
+            },
+            subscribe(domainObject) {
+                this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+                this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+
+                this.valueKey = this
+                    .metadata
+                    .valuesForHints(['range'])[0].key;
+                this.unsubscribe = this.openmct
+                    .telemetry
+                    .subscribe(domainObject, this.updateValue.bind(this), {});
+                this.openmct
+                    .telemetry
+                    .request(domainObject, {strategy: 'latest'})
+                    .then((values) => values.forEach(this.updateValue));
+            }
+        },
+        computed: {
+            degValue: function() {
+                return this.percentToDegrees(this.valToPercent(this.curVal));
+            },
+            degLimit: function() {
+                return this.percentToDegrees(this.valToPercent(this.limit1));
+            }
+        },
+        mounted() {
+            this.composition.on('add', this.subscribe);
+            this.composition.load();
+        },
+        destroyed() {
+            this.composition.off('add', this.subscribe);
+            this.unsubscribe();
+        }
+    }
+</script>

src/plugins/gauge/gauge.js

@@ -0,0 +1,71 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    './components/gaugeRadial.vue',
+    'vue'
+], function (
+    GaugeComponent,
+    Vue
+) {
+    function Gauge(openmct) {
+        return {
+            key: 'gauge',
+            name: 'Gauge',
+            cssClass: 'icon-gauge',
+            canView: function (domainObject) {
+                return domainObject.type === 'gauge';
+            },
+            canEdit: function (domainObject) {
+                return domainObject.type === 'gauge';
+            },
+            view: function (domainObject) {
+                let component;
+
+                return {
+                    show: function (element) {
+                        component =  new Vue({
+                            components: {
+                                GaugeComponent: GaugeComponent.default
+                            },
+                            provide: {
+                                openmct,
+                                domainObject,
+                                composition: openmct.composition.get(domainObject)
+                            },
+                            el: element,
+                            template: '<gauge-component></gauge-component>'
+                        });
+                    },
+                    destroy: function (element) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                };
+            },
+            priority: function () {
+                return 1;
+            }
+        };
+    }
+    return Gauge;
+});

src/plugins/gauge/plugin.js

@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define([
+    './gauge'
+], function (
+    Gauge
+) {
+    return function plugin() {
+        return function install(openmct) {
+            openmct.objectViews.addProvider(new Gauge(openmct));
+
+            openmct.types.addType('gauge', {
+                name: "Gauge",
+                creatable: true,
+                description: "Graphically visualize a telemetry element's current value between a minimum and maximum.",
+                cssClass: 'icon-gauge',
+                initialize(domainObject) {
+                    domainObject.composition = [];
+                    domainObject.configuration = {
+                        min: 0,
+                        max: 100,
+                        displayMinMax: 'Yes',
+                        limit: 90,
+                        decimals: 1
+                    };
+                },
+                form: [
+                    {
+                        name: "Minimum Value",
+                        control: "numberfield",
+                        cssClass: "l-input-sm l-numeric",
+                        key: "min",
+                        property: [
+                            "configuration",
+                            "min"
+                        ]
+                    },
+                    {
+                        name: "Maximum Value",
+                        control: "numberfield",
+                        cssClass: "l-input-sm l-numeric",
+                        key: "max",
+                        property: [
+                            "configuration",
+                            "max"
+                        ]
+                    },
+                    {
+                        name: "Display Min/Max",
+                        control: "textfield",
+                        cssClass: "l-input-sm",
+                        key: "displayMinMax",
+                        property: [
+                            "configuration",
+                            "displayMinMax"
+                        ]
+                    },
+                    {
+                        name: "Limit",
+                        control: "numberfield",
+                        cssClass: "l-input-sm l-numeric",
+                        key: "min",
+                        property: [
+                            "configuration",
+                            "limit"
+                        ]
+                    },
+                    {
+                        name: "Decimals",
+                        control: "numberfield",
+                        cssClass: "l-input-sm l-numeric",
+                        key: "decimals",
+                        property: [
+                            "configuration",
+                            "decimals"
+                        ]
+                    }
+                ]
+            });
+        };
+    };
+});

src/plugins/plugins.js

@@ -42,6 +42,9 @@ define([
     './LADTable/plugin',
     './filters/plugin',
     './objectMigration/plugin',
+    './gauge/plugin',
+    './bignumbers/plugin',
+    './maelstrom-adapters/src/MaelstromPlugin.js',
     './goToOriginalAction/plugin'
 ], function (
     _,
@@ -65,6 +68,9 @@ define([
     LADTable,
     Filters,
     ObjectMigration,
+    Gauge,
+    Bignumbers,
+    MaelstromPlugin,
     GoToOriginalAction
 ) {
     var bundleMap = {
@@ -99,6 +105,8 @@ define([
 
     plugins.Conductor = TimeConductorPlugin.default;
 
+    plugins.MaelstromPlugin = MaelstromPlugin.default;
+
     plugins.CouchDB = function (url) {
         return function (openmct) {
             if (url) {
@@ -158,6 +166,8 @@ define([
     plugins.DisplayLayout = DisplayLayoutPlugin.default;
     plugins.FolderView = FolderView;
     plugins.Tabs = Tabs;
+    plugins.Gauge = Gauge;
+    plugins.Bignumbers = Bignumbers;
     plugins.FlexibleLayout = FlexibleLayout;
     plugins.LADTable = LADTable;
     plugins.Filters = Filters;

src/styles-new/_constants-maelstrom.scss

@@ -36,9 +36,10 @@ $bodyFont: 'Chakra Petch', sans-serif;
 
 @mixin headerFont($size: 1em) {
     font-family: $headerFont;
-    font-size: $size * 0.8; // This font is comparatively large, so reduce it a bit
+    font-size: $size;
+    line-height: $size;
     text-transform: uppercase;
-    word-spacing: 0.25em;
+    word-spacing: 0.4em;
 }
 
 @mixin bodyFont($size: 1em) {
@@ -68,14 +69,14 @@ $shdwBtns: rgba(black, 0.2) 0 1px 2px;
 $shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
-$colorBodyBg: #393939;
+$colorBodyBg: #000000;
 $colorBodyFg: #ccc;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
-$colorHeadBg: #262626;
+$colorHeadBg: transparent;
 $colorHeadFg: $colorBodyFg;
 $colorStatusBarBg: $colorHeadBg;
-$colorStatusBarFg: $colorBodyFg;
+$colorStatusBarFg: rgba(white, 0.5);
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
@@ -184,7 +185,7 @@ $colorIconAliasForKeyFilter: #aaa;
 $colorTabsHolderBg: rgba(black, 0.2);
 
 // Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, 10%);
+$colorBtnBg: pullForward($colorBodyBg, 30%);
 $colorBtnBgHov: pullForward($colorBtnBg, 10%);
 $colorBtnFg: pullForward($colorBodyFg, 10%);
 $colorBtnReverseFg: pullForward($colorBtnFg, 10%);
@@ -427,19 +428,3 @@ $createBtnTextTransform: uppercase;
 @mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
     @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
 }
-
-/**************************************************** OVERRIDES */
-.c-frame {
-    &:not(.no-frame) {
-        $bc: #666;
-        $bLR: 3px solid transparent;
-        $br: 20px;
-        background: none !important;
-        border-radius: $br;
-        border-top: 4px solid $bc !important;
-        border-bottom: 2px solid $bc !important;
-        border-left: $bLR !important;;
-        border-right: $bLR !important;;
-        padding: 5px 10px 10px 10px !important;
-    }
-}

src/styles-new/_constants-snow.scss

@@ -42,6 +42,31 @@ $bodyFont: $heroFont;
     font-size: $size;
 }
 
+// FONTS
+@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:400,600,700|Michroma|Teko:400,700');
+
+$heroFont: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$headerFont: $heroFont;
+$bodyFont: $heroFont;
+
+@mixin heroFont($size: 1em) {
+    $mult: 1;
+    font-family: $heroFont;
+    font-size: $size * $mult;
+}
+
+@mixin headerFont($size: 1em) {
+    $mult: 1;
+    font-family: $headerFont;
+    font-size: $size * $mult;
+}
+
+@mixin bodyFont($size: 1em) {
+    $mult: 1;
+    font-family: $bodyFont;
+    font-size: $size * $mult;
+}
+
 // Functions
 @function buttonBg($c: $colorBtnBg) {
     @return $c;

src/styles-new/_mixins.scss

@@ -50,14 +50,14 @@
 }
 
 /************************** EFFECTS */
-@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @keyframes pulse {
-        0%   { opacity: $opacity0; }
-        100% { opacity: $opacity100; }
+@mixin pulse($animName: 'pulse', $dur: 500ms, $iteration: infinite, $prop: opacity, $val0: 0, $val100: 1, $direction: alternate) {
+    @keyframes #{$animName} {
+        0%   { #{$prop}: $val0; }
+        100% { #{$prop}: $val100; }
     }
     animation-name: $animName;
     animation-duration: $dur;
-    animation-direction: alternate;
+    animation-direction: $direction;
     animation-iteration-count: $iteration;
     animation-timing-function: ease-in-out;
 }

src/styles-new/_movie-maelstrom.scss

@@ -0,0 +1,442 @@
+/**************************************************** CONSTANTS, MIXINS */
+$bgKey: #222632;
+$redKeyBg: #990000;
+$redKeyBrdr: #ff0000;
+$redKeyFg: rgba(white, 0.8);
+$ylwKeyBg: #cc6b36;
+$ylwKeyBrdr: #ffbf1a;
+$ylwKeyFg: rgba(white, 0.8);
+
+@mixin widgetOk() {
+    background-color: #bbb !important;
+    border-color: #fff !important;
+    color: #333 !important;
+}
+
+@mixin widgetRed() {
+    background-color: $redKeyBg !important;
+    border-color: $redKeyBrdr !important;
+    color: $redKeyFg !important;
+}
+
+@mixin widgetYellow() {
+    $c: $ylwKeyFg;
+    background-color: $ylwKeyBg !important;
+    border-color: $ylwKeyBrdr !important;
+    color: $ylwKeyFg !important;
+}
+
+/**************************************************** OVERRIDES */
+body {
+    font-size: 1em;
+}
+
+.c-telemetry-view__value {
+    justify-content: center;
+    &[class*='is-limit'] {
+        background: transparent !important;
+        color: inherit !important;
+        &:before { display: none; }
+    }
+}
+
+/**************************************************** CONVENIENCE */
+.u-inspectable[s-selected] {
+    border: none !important;
+}
+
+.c-table.c-telemetry-table {
+    font-size: 0.7em;
+}
+
+.widget-rule-content .t-rule-message-input {
+    width: 100%;
+}
+
+/**************************************************** TIME CONDUCTOR */
+.c-conductor {
+    &__controls {
+        display: none !important;
+    }
+
+    &:hover {
+        .c-conductor__controls { display: flex !important; }
+    }
+
+    [class*='__label'] {
+        display: none;
+    }
+
+    &__end-fixed {
+        display: none;
+    }
+
+    &__end-delta {
+        &:after {
+            content: '';
+            display: block;
+            background: url('../ui/layout/assets/images/logo-app.svg') center no-repeat;
+            background-size: contain;
+            width: 100px;
+            height: 24px;
+        }
+    }
+
+    &-input {
+        input {
+            &.c-input--datetime,
+            &.c-input--hrs-min-sec {
+                color: $colorTime;
+                width: 200px;
+            }
+
+            &.c-input--hrs-min-sec {
+                width: 80px;
+            }
+        }
+    }
+}
+
+/**************************************************** MAIN LAYOUT */
+.l-shell {
+    &:not(.is-editing) {
+        .l-shell__head,
+        .l-shell__main-view-browse-bar {
+            background: none !important;
+            height: $interiorMargin;
+            overflow: hidden;
+            padding: 0 !important;
+            position: absolute;
+            width: 30%;
+            z-index: 100;
+
+            * { opacity: 0; }
+
+            &:hover {
+                background: #666 !important;
+                height: auto;
+                overflow: visible;
+                padding: $interiorMargin !important;
+
+                * { opacity: 1; }
+            }
+        }
+
+        .l-shell__pane-main .l-pane__contents > * + * {
+            margin-top: 0;
+        }
+
+        .l-shell__main-container {
+            margin-top: 0 !important;
+        }
+    }
+
+    .l-shell__main-view-browse-bar {
+        top: -3px; right: 0;
+    }
+
+    &__main > .l-pane {
+        padding-left: $interiorMargin !important;
+        padding-right: $interiorMargin !important;
+    }
+
+    &__status { display: none !important; }
+}
+
+.l-pane {
+    &__contents {
+        overflow: visible !important;
+    }
+
+    &--collapsed {
+        $d: 5px;
+        flex-basis: $d !important;
+        min-width: $d !important;
+        min-height: $d !important;
+
+        .l-pane__label {
+            display: none !important;
+        }
+
+        .l-pane__collapse-button {
+            &:before { display: none !important; }
+        }
+    }
+}
+
+/**************************************************** STYLING BY TITLE */
+*[title*='font-euro'] {
+    @include headerFont();
+}
+
+*[title*='key-widget'] {
+    font-size: 24px;
+}
+
+*[title*='alert-red'] {
+    .c-sw__icon {
+        color: red !important;
+    }
+}
+
+*[title*='alert-yellow'] {
+    .c-sw__icon {
+        color: $ylwKeyBg !important;
+    }
+}
+
+*[title*='widget-ok'] {
+    @include widgetOk();
+}
+
+*[title*='widget-yellow'] {
+    @include widgetYellow();
+}
+
+*[title*='widget-red'] {
+    @include widgetRed();
+}
+
+*[title*='pulse-slow'] {
+    @include pulse($animName: pulseSlow, $dur: 1000ms, $prop: filter, $val0: brightness(1.2), $val100: brightness(0.6), $direction: normal);
+    .c-sw__icon {
+        @include pulse($animName: pulseWarningIcon, $dur: 500ms, $prop: opacity, $val0: 0.1, $val100: 1, $direction: normal);
+    }
+}
+
+*[title*='pulse-fast'] {
+    @include pulse($animName: pulseSlow, $dur: 250ms, $prop: filter, $val0: brightness(1.5), $val100: brightness(0.9), $direction: normal);
+}
+
+*[title*='pulse-warning'] {
+    @include pulse($animName: pulseWarning, $dur: 1500ms, $prop: filter, $val0: brightness(1.2), $val100: brightness(0.7), $direction: normal);
+}
+
+*[title*='Bg Widget'] {
+    // Widgets that provide a flashing red bg for components
+    .c-summary-widget {
+        $b: 5px;
+        border: none !important;
+        border-radius: $b * 4;
+        &[title*='widget-yellow'] {
+            opacity: 0.3;
+            box-shadow: $ylwKeyBg 0px 0px $b $b;
+        }
+
+        &[title*='widget-red'] {
+            opacity: 0.4;
+            box-shadow: $redKeyBg 0px 0px $b $b;
+        }
+    }
+
+}
+
+/**************************************************** SECTIONS */
+/************* SYS OVW WIDGETS */
+*[title*='Sys Ovw'] {
+    *[title*='Widget'] {
+        font-size: 1.4em;
+    }
+
+    *[title*='sys-ok'] {
+        @include widgetOk();
+    }
+
+    *[title*='post-ring'] {
+        @include widgetRed();
+    }
+}
+
+/************* ATTITUDE */
+*[title*='Attitude'] {
+    *[title*='RPY'] {
+        background: black;
+        padding: 3px;
+        border-radius: 5px;
+
+        .l-control-bar {
+            display: none;
+        }
+
+        .l-view-section {
+            top: 0;
+        }
+
+        .gl-plot-axis-area.gl-plot-y {
+            width: 22px;
+        }
+
+        .gl-plot-wrapper-display-area-and-x-axis {
+            left: 24px;
+        }
+    }
+}
+
+/************* VELOCITY COMPONENT */
+*[title*='-not-attained'] {
+    @include widgetRed();
+}
+
+/************* ACCELERATION COMPONENT */
+
+/************* BOOST PHASE WIDGETS */
+*[title*='boost-phase-widget'] {
+    .c-summary-widget {
+        border-width: 2px;
+        padding: 5px 0;
+
+        &:before,
+        &:after {
+            content: '';
+            display: block;
+            position: absolute;
+        }
+    }
+}
+
+*[title*='boost-phase-widget-left'] {
+    .c-summary-widget {
+        $c: #999;
+        align-items: start;
+        background: rgba($c, 0.1) !important;
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:before,
+        &:after {
+            top: 25px; right: 0; bottom: 3%; left: 40%;
+        }
+
+        &:before {
+            @include bgStripes($c: $c, $a: 0.1, $bgsize: 20px, $angle: 0deg);
+        }
+
+        &:after {
+            @include bgStripes($c: $c, $a: 0.1, $bgsize: 63px, $angle: 0deg);
+        }
+    }
+}
+
+*[title*='boost-phase-widget-right'] {
+    .c-summary-widget {
+        $c: #555;
+        border-right: none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:before {
+            //background: deeppink;
+            @include bgTicks($c: $c, $repeatDir: 'y');
+            background-size: 100% 45px;
+            top: 0px; right: 0; bottom: 0; left: 2px;
+        }
+    }
+}
+
+*[title*='Boost Phase Ring Widgets'] {
+    *[title*='Ring Widget'] {
+        //filter: saturate(0.7);
+    }
+
+    *[title*='ring-ok'] {
+        @include widgetOk();
+    }
+
+    *[title*='bad-ring'] {
+        @include widgetRed();
+    }
+
+    *[title*='post-ring'] {
+        @include widgetYellow();
+    }
+}
+
+/************* BOTTOM SYSTEM WIDGETS */
+*[title*='system-widget'] {
+    background: $bgKey !important;
+    border-width: 2px !important;
+    justify-content: left !important;
+
+    .c-sw__icon {
+        $m: $interiorMarginSm;
+        position: absolute;
+        bottom: $m;
+        right: $m;
+    }
+}
+
+*[title*="Bottom System Widgets"] {
+    transform: translateY(-2px);
+}
+
+*[title*='system-widget--hero'] {
+    // Current "tab" in interface
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: none;
+}
+
+*[title*='system-widget--subtle'] {
+    opacity: 0.7;
+}
+
+/**************************************************** INDIVIDUAL ELEMENTS */
+/************* PASSENGER NOTICE */
+*[title*='passenger-notice'] {
+    font-size: 1.4em;
+    .c-sw__icon {
+        font-size: 2.1em;
+        margin-right: $interiorMarginLg;
+    }
+}
+
+*[title*='pulse-passenger-notice--warning'] {
+    @include pulse($animName: pulseWarning, $dur: 1250ms, $prop: background-color, $val0: #aa0000, $val100: #660000, $direction: normal);
+}
+
+*[title*='Main Console'] {
+    $r: $basicCr;
+    background: $bgKey;
+    border-radius: $r;
+    border-bottom: 2px solid rgb(102,102,102);
+}
+
+*[title*='Event Time Str'] {
+    @include heroFont(1.2em);
+    line-height: .8em;
+}
+
+
+*[title*="Sys Ovw LAD Table"] {
+    .c-lad-table {
+        tr {
+            background-color: black;
+            color: rgba(white, 0.3);
+            display: block;
+            font-weight: bold;
+            align-items: center;
+            height: 41px;
+            border-radius: 5px;
+            font-size: 0.75em;
+            margin-bottom: 4px;
+            overflow: hidden;
+            padding: 3px;
+            text-transform: uppercase;
+        }
+        thead,
+        tr td:nth-child(1),
+        tr td:nth-child(2) {
+            display: none;
+        }
+
+        td {
+            display: block;
+            width: auto;
+            white-space: normal;
+
+        }
+    }
+}
+
+

src/styles-new/core.scss

@@ -34,3 +34,5 @@
 @import "legacy";
 @import "legacy-plots";
 @import "legacy-messages";
+@import "theme-maelstrom";
+@import "movie-maelstrom";

src/styles-new/sass-base.scss

@@ -26,7 +26,7 @@
 @import "constants";
 @import "constants-mobile.scss";
 //@import "constants-espresso"; // TEMP
-@import "constants-snow"; // TEMP
-//@import "constants-maelstrom";
+//@import "constants-snow"; // TEMP
+@import "constants-maelstrom";
 @import "mixins";
 @import "animations";

src/styles-new/theme-maelstrom.scss

@@ -0,0 +1,23 @@
+/************* FRAMES */
+.c-so-view {
+    &__header {
+        transform: translateY(3px);
+    }
+
+    &__header__name {
+        transform: translateY(-2px);
+    }
+
+    &:not(.c-so-view--no-frame) {
+        $bc: #666;
+        $bLR: 3px solid transparent;
+        $br: 20px;
+        background: none !important;
+        border-radius: $br;
+        border-top: 4px solid $bc !important;
+        border-bottom: 2px solid $bc !important;
+        border-left: $bLR !important;;
+        border-right: $bLR !important;;
+        padding: 5px 10px 10px 10px !important;
+    }
+}