From 54f9b745ff2962752e2985a6942472a9d34c61b4 Mon Sep 17 00:00:00 2001 From: ValeriiMalkov Date: Thu, 8 Nov 2018 16:22:36 +0200 Subject: [PATCH 1/2] Progress bar was added to media application view. Also there is was added an OnSeekMediaClockTimer notification to SDL --- app/controller/sdl/Abstract/Controller.js | 3 + app/controller/sdl/MediaController.js | 3 + app/model/sdl/Abstract/AppModel.js | 4 + app/model/sdl/MediaModel.js | 113 +++++++++++++++++++++- app/view/media/sdl/controllsView.js | 4 +- css/media.css | 4 +- css/sdl.css | 8 +- ffw/UIRPC.js | 21 ++++ 8 files changed, 149 insertions(+), 11 deletions(-) diff --git a/app/controller/sdl/Abstract/Controller.js b/app/controller/sdl/Abstract/Controller.js index 8f94cac55..432e86513 100644 --- a/app/controller/sdl/Abstract/Controller.js +++ b/app/controller/sdl/Abstract/Controller.js @@ -198,6 +198,9 @@ SDL.SDLController = Em.Object.extend( */ deactivateApp: function() { if (this.model) { + if(this.model.seekBar) { + this.model.progressBar.remove(); + } SDL.SDLModel.onDeactivateApp(SDL.States.nextState, this.model.appID); } SDL.SDLController.onSubMenu('top'); diff --git a/app/controller/sdl/MediaController.js b/app/controller/sdl/MediaController.js index 6fe2dfb2b..260928da1 100644 --- a/app/controller/sdl/MediaController.js +++ b/app/controller/sdl/MediaController.js @@ -68,6 +68,9 @@ SDL.SDLMediaController = Em.Object.create( // store active application id this.set('currentAppId', applicationModel.appID); + if(applicationModel.seekBar){ + document.getElementById('sdlmedia').appendChild(applicationModel.progressBar); + } // set active model SDL.SDLController.set('model', applicationModel); SDL.MediaController.turnOnSDL(); diff --git a/app/model/sdl/Abstract/AppModel.js b/app/model/sdl/Abstract/AppModel.js index beff386b7..488edafa4 100644 --- a/app/model/sdl/Abstract/AppModel.js +++ b/app/model/sdl/Abstract/AppModel.js @@ -58,6 +58,10 @@ SDL.ABSAppModel = Em.Object.extend( * depends on BC.SubscribeButton request */ TUNEDOWN: false, + /** + * Flag to display/hide seek bar on media screen + */ + seekBar: false, /** * mediaPlayerIndicator flag for SDL.SDLMediaControlls view */ diff --git a/app/model/sdl/MediaModel.js b/app/model/sdl/MediaModel.js index bd47c704e..5db222222 100644 --- a/app/model/sdl/MediaModel.js +++ b/app/model/sdl/MediaModel.js @@ -80,16 +80,54 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ this.set('VRCommands', []); this.set('tbtActivate', false); this.set('isPlaying', true); + this.set('seekBar', false); this.set('globalProperties.helpPrompt', []); this.set('globalProperties.timeoutPrompt', []); this.set('globalProperties.keyboardProperties', Em.Object.create()); this.set('globalProperties.keyboardProperties.keyboardLayout', 'QWERTY'); this.set('globalProperties.keyboardProperties.limitedCharacterList', []); - this.set('commandsList', {'top': []}); this.set('softButtons', []); + this.initProgressBar(); + }, + + /** + * Function for initialization a progress bar. + * Called from init function of this object + */ + initProgressBar: function() { + this.progressBar = document.createElement('progress'); + this.progressBar.id = this.appID; + this.progressBar.value = 0; + this.progressBar.max = 100; + this.progressBar.style = this.createProgressBarStyle(); + this.progressBar.onmousemove=this.seekTracking; + this.progressBar.onmousedown=this.seekTracking; + this.progressBar.onmouseup=this.seekTracking; }, + /** + * Function for initialization a progress bar style + * Called from initProgressBar function + */ + createProgressBarStyle: function() { + return "top: 155px;" + + "position: absolute;" + + "display: block;" + + "width: 450px;" + + "height: 16px;" + + "margin: 2em auto;" + + "padding: 4px;" + + "border: 0 none;" + + "background: #444;" + + "border-radius: 14px;" + + "box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);"; + }, + + /** + * Parameter which contain progress bar element + */ + progressBar: null, /** * Parameter for presets for Media App to show presets on media screen * @@ -133,7 +171,7 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ maxTimeValue: 68400, // 19 hours duration: 0, currTime: 0, - + endTime: 0, /** * Method hides sdl activation button and sdl application * @@ -178,6 +216,18 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ } }.observes('this.pause'), + /** + * Hide/display progress bar call back function + * which handle a seekBar Boolean parameter + */ + hideDisplayProgressBar: function() { + if(this.seekBar) { + document.getElementById('sdlmedia').appendChild(this.progressBar); + } else { + this.progressBar.remove(); + } + }.observes('this.seekBar'), + stopTimer: function() { clearInterval(this.timer); @@ -188,10 +238,27 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ setDuration: function() { var number, str = '', hrs = 0, min = 0, sec = 0; + if(this.seekBar) { + var divisor = (this.countUp ? + this.endTime - this.duration : + this.duration - this.endTime); + var progress = this.currTime / divisor * 100; + this.progressBar.value = progress; + } if (this.countUp) { + + if(this.currTime != (this.endTime - this.duration)){ + number = this.duration + this.currTime; + + } else { + clearInterval(this.timer); + this.currTime = 0; + return; + } } else { - if (this.duration <= this.currTime) { + if (this.duration <= this.currTime || + this.endTime != 0 && (this.duration - this.endTime) <= this.currTime) { clearInterval(this.timer); this.currTime = 0; this.appInfo.set('mediaClock', '00:00:00'); @@ -219,6 +286,33 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ }.observes('this.currTime'), + /** + * seekTracking function for a tracking progress bar + */ + seekTracking: function(event){ + if(event.which == 1){ + SDL.SDLController.model.set('pause', true); + var percent = event.offsetX / this.offsetWidth; + this.value = percent * 100; + if(SDL.SDLController.model.countUp){ + SDL.SDLController.model.set('currTime',parseInt((SDL.SDLController.model.endTime - SDL.SDLController.model.duration) * percent)); + } + else{ + SDL.SDLController.model.set('currTime',parseInt((SDL.SDLController.model.duration - SDL.SDLController.model.endTime) * percent)); + } + if(event.type == 'mouseup'){ + var number = SDL.SDLController.model.duration + SDL.SDLController.model.currTime; + var params = {}; + params.appID = SDL.SDLController.model.appID; + params.hrs = parseInt(number / 3600); // hours + params.min = parseInt(number / 60) % 60; // minutes + params.sec = number % 60; // seconds + FFW.UI.onSeekMediaClockTimerNotification(params); + } + } + SDL.SDLController.model.set('pause',false); + }, + changeDuration: function() { clearInterval(this.timer); @@ -259,6 +353,19 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ params.startTime.hours * 3600 + params.startTime.minutes * 60 + params.startTime.seconds ); + if(params.endTime) { + this.set('endTime', null); + this.set('endTime', + params.endTime.hours * 3600 + params.endTime.minutes * 60 + + params.endTime.seconds + ); + if(params.enableSeek !== undefined){ + this.set('seekBar', params.enableSeek); + } + } + else { + this.set('seekBar', false); + } } this.set('pause', false); } diff --git a/app/view/media/sdl/controllsView.js b/app/view/media/sdl/controllsView.js index c615ebf52..ea9b2b8ac 100644 --- a/app/view/media/sdl/controllsView.js +++ b/app/view/media/sdl/controllsView.js @@ -49,7 +49,7 @@ SDL.SDLMediaControlls = Em.ContainerView.create( template: Em.Handlebars .compile( '{{#with view}}' + - '
' + + '
' + '
{{SDL.SDLController.model.deviceName}}
' + '
' + '
{{SDL.SDLController.model.appInfo.field1}}
' + @@ -57,7 +57,7 @@ SDL.SDLMediaControlls = Em.ContainerView.create( '
{{SDL.SDLController.model.appInfo.field3}}
' + '
{{SDL.SDLController.model.appInfo.mediaClock}}
' + '' + - '' + + '' + '
' + '{{/with}}' ) } diff --git a/css/media.css b/css/media.css index def941c05..1f9bb9080 100644 --- a/css/media.css +++ b/css/media.css @@ -632,7 +632,7 @@ } #sdl_media_presetButtons.main-preset-buttons-wraper { - top: 291px; + top: 315px; left: 165px; } @@ -967,7 +967,7 @@ #usb_logo { position: absolute; - top: 90px; + top: 70px; right: 10px; border: 1px solid #393939; border-radius: 2px; diff --git a/css/sdl.css b/css/sdl.css index f52a03366..1d3ad2e8a 100644 --- a/css/sdl.css +++ b/css/sdl.css @@ -319,7 +319,7 @@ } #sdl_view_container .player_controllsV2 { - top: 241px !important; + top: 264px !important; height: 48px; } @@ -631,7 +631,7 @@ } #sdl_view_container .timeV2 { - top: 155px; + top: 150px; } #sdl_view_container .textLimit { @@ -1567,7 +1567,7 @@ } #sdl_view_container .title { - top: 79px; + top: 69px; font-size: 38px; left: 7px; width: 340px; @@ -1575,7 +1575,7 @@ } #sdl_view_container .album { - top: 123px; + top: 106px; font-size: 26px; left: 10px; width: 330px; diff --git a/ffw/UIRPC.js b/ffw/UIRPC.js index de3fe4209..8f39042bb 100644 --- a/ffw/UIRPC.js +++ b/ffw/UIRPC.js @@ -1571,6 +1571,27 @@ FFW.UI = FFW.RPCObserver.create( }; this.client.send(JSONMessage); }, + + /** + * Notification method to send seek media clock timer to SDLCore + */ + onSeekMediaClockTimerNotification: function(params) { + Em.Logger.log('onSeekMediaClockTimerNotification'); + var JSONMessage = { + 'jsonrpc': '2.0', + 'method': 'UI.OnSeekMediaClockTimer', + 'params': { + 'seekTime': { + 'hours': params.hrs, + 'minutes': params.min, + 'seconds': params.sec + }, + 'appID': params.appID + } + }; + this.client.send(JSONMessage); + }, + /** * send notification when command was triggered * From 18dbd1e850057500a76d312272be822b842556a2 Mon Sep 17 00:00:00 2001 From: ONyzhnyk Date: Tue, 11 Dec 2018 14:26:41 +0200 Subject: [PATCH 2/2] progress bar seek feature added --- app/controller/sdl/Abstract/Controller.js | 52 ++++++++-- app/controller/sdl/MediaController.js | 6 -- app/model/sdl/Abstract/AppModel.js | 12 +++ app/model/sdl/MediaModel.js | 97 ++++-------------- app/view/media/sdl/controllsView.js | 5 + css/general.css | 116 ++++++++++++++++++++++ 6 files changed, 193 insertions(+), 95 deletions(-) diff --git a/app/controller/sdl/Abstract/Controller.js b/app/controller/sdl/Abstract/Controller.js index 432e86513..8e2bb850a 100644 --- a/app/controller/sdl/Abstract/Controller.js +++ b/app/controller/sdl/Abstract/Controller.js @@ -192,21 +192,54 @@ SDL.SDLController = Em.Object.extend( openCommandsList: function() { SDL.OptionsView.activate(); }, + /** - * Notification of deactivation of current application model initiated in - * StateManager + * Function for enable\disable progress bar tracking */ - deactivateApp: function() { - if (this.model) { - if(this.model.seekBar) { - this.model.progressBar.remove(); - } - SDL.SDLModel.onDeactivateApp(SDL.States.nextState, this.model.appID); + seekBarActive: function() { + if(SDL.SDLController.model === null) { + return; } + var seekBar = SDL.SDLController.model.seekBar; + SDL.SDLController.model.set('seekBarStyle', seekBar ? "progressBarWithSeek" : "progressBarWithoutSeek"); + }.observes('SDL.SDLController.model.seekBar'), + + /** + * Deactivate current application + */ + deactivateApp: function() { + SDL.SDLModel.onDeactivateApp(SDL.States.nextState, this.model.appID); SDL.SDLController.onSubMenu('top'); SDL.SDLController.model.set('tbtActivate', false); this.set('model', null); }, + + /** + * seekTracking function for a tracking progress bar + */ + seekTracking: function(event){ + if(event.type == 'change'){ + SDL.SDLController.model.set('pause', true); + var percent = event.currentTarget.value; + SDL.SDLController.model.set('valueOfSeekBar',percent); + var currentTime = 0; + if(SDL.SDLController.model.countUp){ + currentTime = parseInt((SDL.SDLController.model.endTime - SDL.SDLController.model.duration) * percent/100); + } + else { + currentTime = parseInt((SDL.SDLController.model.duration - SDL.SDLController.model.endTime) * percent/100); + } + SDL.SDLController.model.set('currTime', currentTime); + var number = SDL.SDLController.model.duration + SDL.SDLController.model.currTime; + var params = {}; + params.appID = SDL.SDLController.model.appID; + params.hrs = parseInt(number / 3600); // hours + params.min = parseInt(number / 60) % 60; // minutes + params.sec = number % 60; // seconds + FFW.UI.onSeekMediaClockTimerNotification(params); + SDL.SDLController.model.set('pause',false); + } + }, /** * Notification to SDL about triggered events on HMI * @param reason @@ -619,9 +652,6 @@ SDL.SDLController = Em.Object.extend( if (methodName == 'UI.Slider') { SDL.SliderView.deactivate(true); } - // if (SDL.VRHelpListView.active) { - // SDL.VRHelpListView.deactivate(); - // } }, /** * Method to close InteractionChoices view diff --git a/app/controller/sdl/MediaController.js b/app/controller/sdl/MediaController.js index 260928da1..046343b1b 100644 --- a/app/controller/sdl/MediaController.js +++ b/app/controller/sdl/MediaController.js @@ -65,13 +65,7 @@ SDL.SDLMediaController = Em.Object.create( }, /** Switching on Application */ activateApp: function(applicationModel) { - - // store active application id this.set('currentAppId', applicationModel.appID); - if(applicationModel.seekBar){ - document.getElementById('sdlmedia').appendChild(applicationModel.progressBar); - } - // set active model SDL.SDLController.set('model', applicationModel); SDL.MediaController.turnOnSDL(); }, diff --git a/app/model/sdl/Abstract/AppModel.js b/app/model/sdl/Abstract/AppModel.js index 488edafa4..8310869a2 100644 --- a/app/model/sdl/Abstract/AppModel.js +++ b/app/model/sdl/Abstract/AppModel.js @@ -94,6 +94,18 @@ SDL.ABSAppModel = Em.Object.extend( * @type {Number} */ appID: null, + /** + * Current value of seek bar + * + * @type {Number} + */ + valueOfSeekBar: null, + /** + * Style for progress bar + * + * @type {String} + */ + seekBarStyle: "", /** * Application name * diff --git a/app/model/sdl/MediaModel.js b/app/model/sdl/MediaModel.js index 5db222222..1c90a1f9f 100644 --- a/app/model/sdl/MediaModel.js +++ b/app/model/sdl/MediaModel.js @@ -81,6 +81,8 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ this.set('tbtActivate', false); this.set('isPlaying', true); this.set('seekBar', false); + this.set('seekBarStyle', 'progressBarWithoutSeek'); + this.set('valueOfSeekBar', 0); this.set('globalProperties.helpPrompt', []); this.set('globalProperties.timeoutPrompt', []); this.set('globalProperties.keyboardProperties', Em.Object.create()); @@ -88,46 +90,8 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ this.set('globalProperties.keyboardProperties.limitedCharacterList', []); this.set('commandsList', {'top': []}); this.set('softButtons', []); - this.initProgressBar(); }, - /** - * Function for initialization a progress bar. - * Called from init function of this object - */ - initProgressBar: function() { - this.progressBar = document.createElement('progress'); - this.progressBar.id = this.appID; - this.progressBar.value = 0; - this.progressBar.max = 100; - this.progressBar.style = this.createProgressBarStyle(); - this.progressBar.onmousemove=this.seekTracking; - this.progressBar.onmousedown=this.seekTracking; - this.progressBar.onmouseup=this.seekTracking; - }, - - /** - * Function for initialization a progress bar style - * Called from initProgressBar function - */ - createProgressBarStyle: function() { - return "top: 155px;" + - "position: absolute;" + - "display: block;" + - "width: 450px;" + - "height: 16px;" + - "margin: 2em auto;" + - "padding: 4px;" + - "border: 0 none;" + - "background: #444;" + - "border-radius: 14px;" + - "box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);"; - }, - - /** - * Parameter which contain progress bar element - */ - progressBar: null, /** * Parameter for presets for Media App to show presets on media screen * @@ -172,6 +136,14 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ duration: 0, currTime: 0, endTime: 0, + + /** + * Flag for progress bar show/hide state + * + * @param {Boolean} + */ + disabled: true, + /** * Method hides sdl activation button and sdl application * @@ -221,11 +193,7 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ * which handle a seekBar Boolean parameter */ hideDisplayProgressBar: function() { - if(this.seekBar) { - document.getElementById('sdlmedia').appendChild(this.progressBar); - } else { - this.progressBar.remove(); - } + this.set('disabled', !this.seekBar); }.observes('this.seekBar'), stopTimer: function() { @@ -238,13 +206,12 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ setDuration: function() { var number, str = '', hrs = 0, min = 0, sec = 0; - if(this.seekBar) { - var divisor = (this.countUp ? - this.endTime - this.duration : - this.duration - this.endTime); - var progress = this.currTime / divisor * 100; - this.progressBar.value = progress; - } + var divisor = (this.countUp ? + this.endTime - this.duration : + this.duration - this.endTime); + var progress = this.currTime / divisor * 100; + this.valueOfSeekBar = progress; + if (this.countUp) { if(this.currTime != (this.endTime - this.duration)){ @@ -285,34 +252,7 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ } }.observes('this.currTime'), - - /** - * seekTracking function for a tracking progress bar - */ - seekTracking: function(event){ - if(event.which == 1){ - SDL.SDLController.model.set('pause', true); - var percent = event.offsetX / this.offsetWidth; - this.value = percent * 100; - if(SDL.SDLController.model.countUp){ - SDL.SDLController.model.set('currTime',parseInt((SDL.SDLController.model.endTime - SDL.SDLController.model.duration) * percent)); - } - else{ - SDL.SDLController.model.set('currTime',parseInt((SDL.SDLController.model.duration - SDL.SDLController.model.endTime) * percent)); - } - if(event.type == 'mouseup'){ - var number = SDL.SDLController.model.duration + SDL.SDLController.model.currTime; - var params = {}; - params.appID = SDL.SDLController.model.appID; - params.hrs = parseInt(number / 3600); // hours - params.min = parseInt(number / 60) % 60; // minutes - params.sec = number % 60; // seconds - FFW.UI.onSeekMediaClockTimerNotification(params); - } - } - SDL.SDLController.model.set('pause',false); - }, - + changeDuration: function() { clearInterval(this.timer); @@ -362,6 +302,7 @@ SDL.SDLMediaModel = SDL.ABSAppModel.extend({ if(params.enableSeek !== undefined){ this.set('seekBar', params.enableSeek); } + else this.set('seekBar', false); } else { this.set('seekBar', false); diff --git a/app/view/media/sdl/controllsView.js b/app/view/media/sdl/controllsView.js index ea9b2b8ac..f8dece847 100644 --- a/app/view/media/sdl/controllsView.js +++ b/app/view/media/sdl/controllsView.js @@ -56,6 +56,11 @@ SDL.SDLMediaControlls = Em.ContainerView.create( '
{{SDL.SDLController.model.appInfo.field2}}
' + '
{{SDL.SDLController.model.appInfo.field3}}
' + '
{{SDL.SDLController.model.appInfo.mediaClock}}
' + + '' + '' + '' + '
' + '{{/with}}' diff --git a/css/general.css b/css/general.css index 6118c513b..dd45a614a 100644 --- a/css/general.css +++ b/css/general.css @@ -1777,3 +1777,119 @@ to { width: 50px; z-index: 1001; } + +#progressBarWithSeek{ /* container */ + top: 187px; + width: 463px; + position: absolute; + -webkit-appearance: none; + appearance: none; + padding: 0; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc; + background: #fff linear-gradient(#BCBCBC, #fff0f5); + overflow: hidden; + } + + #progressBarWithSeek::-webkit-slider-thumb { /* slider in Chrome/Chromium */ + -webkit-appearance: none; + width:15px; + height:15px; + border: 1px solid #818181; + border-radius: 2px; + background-image: linear-gradient(#dedede, #f2f2f2); + box-shadow: -13px 0 #40310a, + -26px 0 #40310a, + -39px 0 #40310a, + -52px 0 #40310a, + -65px 0 #40310a, + -78px 0 #40310a, + -91px 0 #40310a, + -104px 0 #40310a, + -117px 0 #40310a, + -130px 0 #40310a, + -143px 0 #40310a, + -156px 0 #40310a, + -169px 0 #40310a, + -182px 0 #40310a, + -195px 0 #40310a, + -208px 0 #40310a, + -221px 0 #40310a, + -234px 0 #40310a, + -247px 0 #40310a, + -260px 0 #40310a, + -273px 0 #40310a, + -286px 0 #40310a, + -299px 0 #40310a, + -312px 0 #40310a, + -325px 0 #40310a, + -338px 0 #40310a, + -351px 0 #40310a, + -364px 0 #40310a, + -377px 0 #40310a, + -390px 0 #40310a, + -403px 0 #40310a, + -416px 0 #40310a, + -429px 0 #40310a, + -442px 0 #40310a, + -455px 0 #40310a; + } + + #progressBarWithoutSeek{ /* container */ + top: 187px; + width: 463px; + position: absolute; + -webkit-appearance: none; + appearance: none; + padding: 0; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: inset 0 1px #ccc, inset 0 1px 1px #575555, inset 0 -2px #ccc; + background: #fff linear-gradient(#BCBCBC, #fff0f5); + overflow: hidden; + } + + #progressBarWithoutSeek::-webkit-slider-thumb { /* slider in Chrome/Chromium */ + -webkit-appearance: none; + width:15px; + height:15px; + border: 1px solid #40310a; + border-radius: 2px; + background-image: linear-gradient(#40310a, #40310a); + box-shadow: -13px 0 #40310a, + -26px 0 #40310a, + -39px 0 #40310a, + -52px 0 #40310a, + -65px 0 #40310a, + -78px 0 #40310a, + -91px 0 #40310a, + -104px 0 #40310a, + -117px 0 #40310a, + -130px 0 #40310a, + -143px 0 #40310a, + -156px 0 #40310a, + -169px 0 #40310a, + -182px 0 #40310a, + -195px 0 #40310a, + -208px 0 #40310a, + -221px 0 #40310a, + -234px 0 #40310a, + -247px 0 #40310a, + -260px 0 #40310a, + -273px 0 #40310a, + -286px 0 #40310a, + -299px 0 #40310a, + -312px 0 #40310a, + -325px 0 #40310a, + -338px 0 #40310a, + -351px 0 #40310a, + -364px 0 #40310a, + -377px 0 #40310a, + -390px 0 #40310a, + -403px 0 #40310a, + -416px 0 #40310a, + -429px 0 #40310a, + -442px 0 #40310a, + -455px 0 #40310a; + }