diff --git a/src/webui/client/modules/performances/views/templates/layout.tpl b/src/webui/client/modules/performances/views/templates/layout.tpl index f824c6693..52afdb42f 100644 --- a/src/webui/client/modules/performances/views/templates/layout.tpl +++ b/src/webui/client/modules/performances/views/templates/layout.tpl @@ -7,7 +7,6 @@

Timelines

-
diff --git a/src/webui/client/modules/puppeteering/config/layout.yaml b/src/webui/client/modules/puppeteering/config/layout.yaml new file mode 100644 index 000000000..ec7483446 --- /dev/null +++ b/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' diff --git a/src/webui/client/modules/puppeteering/css/puppeteering.css b/src/webui/client/modules/puppeteering/css/puppeteering.css index 9ae267bd4..eecce6f38 100644 --- a/src/webui/client/modules/puppeteering/css/puppeteering.css +++ b/src/webui/client/modules/puppeteering/css/puppeteering.css @@ -1,4 +1,4 @@ -.app-timeline-editor-region, .app-right-column { +.app-puppeteering-column { position: relative; } diff --git a/src/webui/client/modules/puppeteering/views/layout.js b/src/webui/client/modules/puppeteering/views/layout.js index c51a809e7..ad1ebccd0 100644 --- a/src/webui/client/modules/puppeteering/views/layout.js +++ b/src/webui/client/modules/puppeteering/views/layout.js @@ -1,9 +1,9 @@ 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: { @@ -11,111 +11,147 @@ define(['application', 'marionette', './templates/layout.tpl', 'lib/regions/fade 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']) + } + } + } } - }); - }); + }) + }) diff --git a/src/webui/client/modules/puppeteering/views/templates/layout.tpl b/src/webui/client/modules/puppeteering/views/templates/layout.tpl index 085cac9dc..8953c88e6 100644 --- a/src/webui/client/modules/puppeteering/views/templates/layout.tpl +++ b/src/webui/client/modules/puppeteering/views/templates/layout.tpl @@ -1,22 +1,16 @@
-
+ <% for (let w of config) { %> +
+ <% for (let row of w.rows) { %>
-
-
-
+ <% for (let col of row.cols) { %> +
+ <% } %>
+ <% } %>
-
-
-
-
-
-
-
-
-
-
-
+ <% } %>