Implementining puppeteering layout configuration

src/webui/client/modules/performances/views/templates/layout.tpl

@@ -7,7 +7,6 @@
 <div class="app-queue-container row">
     <div class="col-md-12">
         <h2>Timelines</h2>
-
         <div class="app-queue-region"></div>
     </div>
 </div>

src/webui/client/modules/puppeteering/config/layout.yaml

@@ -0,0 +1,19 @@
+- rows:
+  - cols:
+    - type: 'animation_mode'
+  - cols:
+    - type: 'timelines'
+  - cols:
+    - type: 'poses'
+- rows:
+  - cols:
+    - type: 'crosshairs'
+      size: 5
+    - type: 'face_select'
+      size: 7
+  - cols:
+    - type: 'speech'
+  - cols:
+    - type: 'interaction'
+  - cols:
+    - type: 'animations'

src/webui/client/modules/puppeteering/css/puppeteering.css

@@ -1,4 +1,4 @@
-.app-timeline-editor-region, .app-right-column {
+.app-puppeteering-column {
     position: relative;
 }
 

src/webui/client/modules/puppeteering/views/layout.js

@@ -1,121 +1,157 @@
 define(['application', 'marionette', './templates/layout.tpl', 'lib/regions/fade_in', 'modules/performances/views/layout',
-        'modules/interaction/views/interaction', 'modules/interaction/views/faces', 'jquery', '../../interaction/views/operator',
-        'modules/gestures/views/animation_mode', 'modules/gestures/views/poses', 'modules/gestures/views/animations', './crosshairs',
-        'scrollbar', 'scrollbar-css'],
-    function (App, Marionette, template, FadeInRegion, TimelineEditorView, InteractionView, FacesView, $, OperatorView,
-              AnimationModeView, PosesView, AnimationsView, CrosshairsView) {
+        'modules/interaction/views/interaction', 'modules/interaction/views/faces', 'jquery',
+        '../../interaction/views/operator', 'modules/gestures/views/animation_mode', 'modules/gestures/views/poses',
+        'modules/gestures/views/animations', './crosshairs', '../config/layout', 'scrollbar', 'scrollbar-css'],
+    function(App, Marionette, template, FadeInRegion, TimelineEditorView, InteractionView, FacesView, $, OperatorView,
+             AnimationModeView, PosesView, AnimationsView, CrosshairsView, config) {
         return Marionette.View.extend({
             template: template,
             ui: {
                 container: '.app-puppeteering-container',
                 timeline: '.app-timeline-editor-region',
                 controls: '.app-controls',
                 leftColumn: '.app-left-column',
-                rightColumn: '.app-right-column'
+                rightColumn: '.app-right-column',
+                columns: '.app-puppeteering-column'
             },
             events: {},
-            regions: {
+            widgetRegions: {
                 timeline: {
-                    el: ".app-timeline-editor-region",
+                    el: '[data-column="timelines"]',
                     regionClass: FadeInRegion
                 },
                 animationMode: {
-                    el: ".app-animation-mode-region",
+                    el: '[data-column="animation_mode"]',
                     regionClass: FadeInRegion
                 },
                 chat: {
-                    el: ".app-chat-region",
+                    el: '[data-column="interaction"]',
                     regionClass: FadeInRegion
                 },
                 poses: {
-                    el: '.app-pose-region',
+                    el: '[data-column="poses"]',
                     regionClass: FadeInRegion
                 },
                 animations: {
-                    el: '.app-animations-region',
+                    el: '[data-column="animations"]',
                     regionClass: FadeInRegion
                 },
                 faces: {
-                    el: '.app-faces-region',
+                    el: '[data-column="face_select"]',
                     regionClass: FadeInRegion
                 },
                 crosshairs: {
-                    el: '.app-cross-hairs-region',
+                    el: '[data-column="crosshairs"]',
                     regionClass: FadeInRegion
                 },
                 speech: {
-                    el: '.app-speech-region',
+                    el: '[data-column="speech"]',
                     regionClass: FadeInRegion
                 }
             },
-            onAttach: function () {
-                let self = this;
+            initialize: function() {
+                this.parseConfig(config)
+                this.updateDimensions = _.bind(this.updateDimensions, this)
+            },
+            serializeData: function() {
+                return {
+                    config: config,
+                }
+            },
+            onAttach: function() {
+                let self = this
+
+                _.forOwn(this.widgetRegions, function(definition, name) {
+                    self.addRegion(name, definition)
+                })
+
+                if (_.includes(this.widgets, 'poses')) {
+                    this.posesView = new PosesView({config: {duration: {min: 1, max: 8}}})
+                    this.getRegion('poses').show(this.posesView)
+                }
 
-                // left col
-                this.posesView = new PosesView({config: {duration: {min: 1, max: 8}}});
-                this.animationModeView = new AnimationModeView();
-                this.timelineEditorView = new TimelineEditorView({
-                    fluid: true,
-                    readonly: true,
-                    autoplay: true,
-                    nav: false,
-                    disableSaving: true,
-                    queueHeight: 300
-                });
+                if (_.includes(this.widgets, 'timelines')) {
+                    this.timelineEditorView = new TimelineEditorView({
+                        fluid: true,
+                        readonly: true,
+                        autoplay: true,
+                        nav: false,
+                        disableSaving: true,
+                        queueHeight: 300
+                    })
+                    this.getRegion('timeline').show(this.timelineEditorView)
+                }
+
+                if (_.includes(this.widgets, 'animation_mode')) {
+                    this.animationModeView = new AnimationModeView()
+                    this.getRegion('animationMode').show(this.animationModeView)
+                }
+
+                if (_.includes(this.widgets, 'crosshairs')) {
+                    this.crosshairsView = new CrosshairsView()
+                    this.getRegion('crosshairs').show(this.crosshairsView)
+                }
 
-                // right col
-                this.chatView = new InteractionView({
-                    hide_faces: true,
-                    recognition_method: 'webspeech',
-                    hide_method_select: true,
-                    hide_noise: true
-                });
+                if (_.includes(this.widgets, 'face_select')) {
+                    this.facesView = new FacesView({always_visible: true, enableBTMode: true})
+                    this.getRegion('faces').show(this.facesView)
+                }
 
-                this.crosshairsView = new CrosshairsView();
-                this.facesView = new FacesView({always_visible: true, enableBTMode: true});
-                this.animationsView = new AnimationsView({config: {speed: {min: 0.5, max: 2}}});
-                this.speechView = new OperatorView({interactionView: this.chatView});
+                if (_.includes(this.widgets, 'animations')) {
+                    this.animationsView = new AnimationsView({config: {speed: {min: 0.5, max: 2}}})
+                    this.getRegion('animations').show(this.animationsView)
+                    this.animationsView.collection.on('add', this.updateDimensions)
+                }
 
-                this.getRegion('poses').show(this.posesView);
-                this.getRegion('timeline').show(this.timelineEditorView);
-                this.getRegion('animationMode').show(this.animationModeView);
-                this.getRegion('chat').show(this.chatView);
-                this.getRegion('crosshairs').show(this.crosshairsView);
-                this.getRegion('faces').show(this.facesView);
-                this.getRegion('animations').show(this.animationsView);
-                this.getRegion('speech').show(this.speechView);
+                if (_.includes(this.widgets, 'interaction')) {
+                    this.chatView = new InteractionView({
+                        hide_faces: true,
+                        recognition_method: 'webspeech',
+                        hide_method_select: true,
+                        hide_noise: true
+                    })
+                    this.getRegion('chat').show(this.chatView)
+                    this.chatView.setHeight(500)
+                }
 
-                let updateDimensions = function () {
-                    if (self.isDestroyed())
-                        $(window).off('resize', updateDimensions);
-                    else
-                        self.updateDimensions();
-                };
+                if (_.includes(this.widgets, 'speech')) {
+                    this.speechView = new OperatorView({interactionView: this.chatView})
+                    this.getRegion('speech').show(this.speechView)
+                }
 
-                this.updateDimensions();
-                $(window).resize(updateDimensions).resize();
-                this.animationsView.collection.on('add', updateDimensions);
+                this.updateDimensions()
+                $(window).resize(this.updateDimensions)
+            },
+            onDestroy: function() {
+                $(window).off('resize', this.updateDimensions)
             },
-            updateDimensions: function () {
-                let contentHeight = App.LayoutInstance.getContentHeight();
+            updateDimensions: function() {
+                let contentHeight = App.LayoutInstance.getContentHeight()
 
-                if (this.ui.leftColumn.offset().left === this.ui.rightColumn.offset().left) {
-                    this.ui.leftColumn.height('auto').perfectScrollbar('destroy');
-                    this.ui.rightColumn.height('auto').perfectScrollbar('destroy');
+                if (this.ui.columns.length > 1 &&
+                    this.ui.columns.first().offset().left === this.ui.columns.last().offset().left) {
+                    this.ui.columns.height('auto').perfectScrollbar('destroy')
                 } else {
-                    this.ui.leftColumn.height(contentHeight).perfectScrollbar({
+                    this.ui.columns.height(contentHeight).perfectScrollbar({
                         suppressScrollX: true,
                         wheelPropagation: true,
                         swipePropagation: true
-                    });
-                    this.ui.rightColumn.height(contentHeight).perfectScrollbar({
-                        suppressScrollX: true,
-                        wheelPropagation: true,
-                        swipePropagation: true
-                    });
+                    })
                 }
+            },
+            parseConfig: function(config) {
+                this.widgets = []
+                for (let w of config) {
+                    if (!('rows' in w)) w['rows'] = []
 
-                this.chatView.setHeight(contentHeight - this.ui.controls.outerHeight());
+                    for (let row of w['rows']) {
+                        if (!('cols' in row)) row['cols'] = {}
+
+                        for (let col of row['cols']) {
+                            if (col['type']) this.widgets.push(col['type'])
+                        }
+                    }
+                }
             }
-        });
-    });
+        })
+    })

src/webui/client/modules/puppeteering/views/templates/layout.tpl

@@ -1,22 +1,16 @@
 <div class="container-fluid">
     <div class="app-puppeteering-container row">
-        <div class="app-left-column col-md-6">
+        <% for (let w of config) { %>
+        <div class="app-puppeteering-column col-md-<%= w.size || parseInt(12 / config.length) %>">
+            <% for (let row of w.rows) { %>
             <div class="row">
-                <div class="app-animation-mode-region col-md-12"></div>
-                <div class="app-timeline-editor-region col-md-12"></div>
-                <div class="app-pose-region col-md-12"></div>
+                <% for (let col of row.cols) { %>
+                <div class="col-md-<%= col.size || parseInt(12 / row.cols.length) %>"
+                     data-column="<%= col.type %>"></div>
+                <% } %>
             </div>
+            <% } %>
         </div>
-        <div class="app-right-column col-md-6">
-            <div class="app-controls">
-                <div class="row">
-                    <div class="app-cross-hairs-region col-md-5"></div>
-                    <div class="app-faces-region col-md-7"></div>
-                </div>
-                <div class="app-speech-region"></div>
-            </div>
-            <div class="app-chat-region"></div>
-            <div class="app-animations-region"></div>
-        </div>
+        <% } %>
     </div>
 </div>