From ab15172eb00855899da98c9b2b9b028a4d306789 Mon Sep 17 00:00:00 2001 From: thlo Date: Tue, 3 Sep 2013 18:41:33 +0200 Subject: * Image Viewer for Media Folder (press enter on an Image) * Timer GUI improvements * 3D interaction Improvements. --- smarttv-client/CSS/Main.css | 20 +++- smarttv-client/Javascript/Display.js | 5 +- smarttv-client/Javascript/ImgViewer.js | 170 +++++++++++++++++++++++++++++++++ smarttv-client/Javascript/Main.js | 51 ++++++---- smarttv-client/Javascript/Player.js | 2 +- smarttv-client/Javascript/Server.js | 3 +- smarttv-client/Javascript/Timers.js | 42 +++++++- smarttv-client/index.html | 11 ++- 8 files changed, 274 insertions(+), 30 deletions(-) create mode 100644 smarttv-client/Javascript/ImgViewer.js diff --git a/smarttv-client/CSS/Main.css b/smarttv-client/CSS/Main.css index 5ee123c..aea87a6 100755 --- a/smarttv-client/CSS/Main.css +++ b/smarttv-client/CSS/Main.css @@ -44,6 +44,7 @@ body { padding-bottom:3px; margin-top:5px; margin-bottom : 5px; + padding-left:3px; text-align: center; background : transparent; border-radius: 0px; @@ -54,6 +55,7 @@ body { padding-bottom:3px; margin-top:5px; margin-bottom : 5px; + padding-left:3px; text-align: center; border-radius: 3px; background : white; @@ -79,7 +81,7 @@ body { border-style:solid; border-width:1px; background-color: white; - background-color: "-webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%)"; + background-color: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); } .style_overflow { @@ -96,6 +98,14 @@ body { width :8px; } +.style_headline { + color : black; + background : linear-gradient(0deg, #1e5799 0%,#2989d8 41%,#7db9e8 100%); + background : -webkit-linear-gradient(top, #1e5799 0%,#2989d8 41%,#7db9e8 100%); + border-radius: 3px; + -webkit-box-shadow: 2px 2px 1px 2px rgba(0,0,0, 0.5); +} + #timerScreen { position: absolute; left: 0px; top: 0px; @@ -607,3 +617,11 @@ body { z-index:60; } +#imageViewer { + position:absolute; + left:0px; top:0px; + width:100%; height:100%; + text-align: center; + background: black; + z-index:10; +} \ No newline at end of file diff --git a/smarttv-client/Javascript/Display.js b/smarttv-client/Javascript/Display.js index c0b1093..62e3412 100755 --- a/smarttv-client/Javascript/Display.js +++ b/smarttv-client/Javascript/Display.js @@ -168,7 +168,7 @@ Display.getNumString =function(num, fmt) { }; Display.selectItem = function (item) { - +// item.setAttribute("class", "style_menuItemSelected"); item.style.color = "black"; item.style.background = "white"; item.style.background = "-webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%)"; @@ -178,6 +178,7 @@ Display.selectItem = function (item) { }; Display.unselectItem = function (item) { +// item.setAttribute("class", "style_menuItem"); item.style.color = "white"; // item.style.backgroundColor = "transparent"; item.style.background = "transparent"; @@ -1035,7 +1036,7 @@ OverlayHandler.prototype.checkHideCallback = function () { var now = Display.GetEpochTime(); if (now >= this.hideTime) { - this.olDelay = 3000; +// this.olDelay = 3000; if (this.hideCallback) { this.hideCallback(); } diff --git a/smarttv-client/Javascript/ImgViewer.js b/smarttv-client/Javascript/ImgViewer.js new file mode 100644 index 0000000..ea8739f --- /dev/null +++ b/smarttv-client/Javascript/ImgViewer.js @@ -0,0 +1,170 @@ +var ImgViewer = { + returnCallback : null +}; + +ImgViewer.init = function () { + var elem = document.getElementById('iv-anchor'); + elem.setAttribute('onkeydown', 'ImgViewer.onInput();'); + + $("#imageViewer").hide(); +}; + +ImgViewer.show = function () { + Display.hide(); + $("#imageViewer").show(); + + $("#iv-anchor").focus(); + + Main.log ("URL= " + Data.getCurrentItem().childs[Main.selectedVideo].payload.link); + + Spinner.show(); + + if (ImgViewer.isImage() == true) { + ImgViewer.showImage(); + } + else { + ImgViewer.showNextImage(); + } +}; + +ImgViewer.hide = function () { + Display.show(); + $("#imageViewer").hide(); + Spinner.hide(); + Main.enableKeys(); +}; + +ImgViewer.isImage = function() { + if ((Data.getCurrentItem().childs[Main.selectedVideo].payload.mime == "image/jpeg") || + (Data.getCurrentItem().childs[Main.selectedVideo].payload.mime == "image/png")) + return true; + else + return false; + +}; + +ImgViewer.showNextImage = function () { + Main.logToServer("ImgViewer.showNextImage curIdx= " +Main.selectedVideo); + var start_ts = new Date().getTime(); + + var start_idx = Main.selectedVideo; + var found_next = false; + Main.nextVideo(1) ; + while ( start_idx != Main.selectedVideo ) { + Main.logToServer ("ImgViewer.showNextImage: Main.selectedVideo increased to " + Main.selectedVideo); + if (ImgViewer.isImage() == true) { + + Main.logToServer( "Found idx= " +Main.selectedVideo); + found_next = true; + break; + } + Main.nextVideo(1); + + } + var now = new Date().getTime(); + Main.logToServer ("Duration= " + (now-start_ts)); + + if (found_next) + ImgViewer.showImage(); + else { + Notify.showNotify("No Image Found", true); + ImgViewer.hide(); + } +}; + +ImgViewer.showPrevImage = function () { + Main.log("ImgViewer.showPrevImage curIdx= " +Main.selectedVideo); + var start_ts = new Date().getTime(); + + var start_idx = Main.selectedVideo; + var found_next = false; + Main.previousVideo(1); + while ( start_idx != Main.selectedVideo ) { + Main.log ("ImgViewer.showPrevImage: Main.selectedVideo increased to " + Main.selectedVideo); + if (ImgViewer.isImage() == true) { + + Main.log( "Found idx= " +Main.selectedVideo); + found_next = true; + break; + } + Main.previousVideo(1); + + } + var now = new Date().getTime(); + Main.logToServer ("Duration= " + (now-start_ts)); + + if (found_next) + ImgViewer.showImage(); + else { + Notify.showNotify("No Image Found", true); + ImgViewer.hide(); + } +}; + +ImgViewer.showImage = function () { + Main.logToServer("showImage: "+ Data.getCurrentItem().childs[Main.selectedVideo].payload.link); + + $("#ivImage") + .error(function() { + Main.log("ERROR"); + ImgViewer.hide(); + Spinner.hide(); + Notify.showNotify("Error while loading image.", true); + }) + .load(function () { + Main.logToServer("showImage Loaded"); + Spinner.hide(); + if($(this).height() > $(this).width()) { + $(this).css({"height": "100%", "width" : "auto"}); + } + else { + $(this).css({"width": "100%", "height" : "auto"}); + }}) + .attr('src', Data.getCurrentItem().childs[Main.selectedVideo].payload.link +"?"+Math.random()); +}; + +ImgViewer.onInput = function () { + var keyCode = event.keyCode; + Main.log(" ImgViewer key= " + keyCode); + switch(keyCode) { + case tvKey.KEY_LEFT: + Main.log("ImgViewer-Select Left"); + Spinner.show(); + + ImgViewer.showPrevImage(); + break; + case tvKey.KEY_RIGHT: + Main.log("ImgViewer-Select Right"); + Spinner.show(); + + ImgViewer.showNextImage(); + break; + case tvKey.KEY_ENTER: +// Buttons.ynShow(); + // Show overlay info + + break; + case tvKey.KEY_RETURN: + case tvKey.KEY_EXIT: + case tvKey.KEY_STOP: + ImgViewer.hide(); + + if (this.returnCallback != null) + this.returnCallback(); + break; + + } + try { + widgetAPI.blockNavigation(event); + } + catch (e) { + }; + +}; +// In need an Image Folder on the server, similar to Media Folder +// All jpg and JPG are found recursively and provided as a Data Structure +// Subfolders are separated through ~ + +// in need some plugin preceedures to handle, delete, rotate, ... + +// The Media Folder should actually already provide the jpgs \ No newline at end of file diff --git a/smarttv-client/Javascript/Main.js b/smarttv-client/Javascript/Main.js index 1d62d74..0743604 100755 --- a/smarttv-client/Javascript/Main.js +++ b/smarttv-client/Javascript/Main.js @@ -191,14 +191,14 @@ Main.init = function () { Comm.init(); Timers.init(); + ImgViewer.init(); // Timers.show(); if (Config.deviceType == 0){ Main.log("ProductInfo= " + deviceapis.tv.info.getProduct()); Main.logToServer("ProductInfo= " + deviceapis.tv.info.getProduct()); - Main.logToServer("isBdPlayer= " + Main.isBdPlayer()); - Main.logToServer("TimeZone= " + deviceapis.tv.info.getTimeZone()); + Main.logToServer("isTvSet= " + Main.isTvSet()); } // TestHandler.showMenu(20); @@ -221,9 +221,10 @@ Main.init = function () { } */ // Read widget conf. find the file to log -/* + + /* xhttp=new XMLHttpRequest(); - xhttp.open("GET","$MANAGER_WIDGET/Common/webapi/1.0/deviceapis.js",false); + xhttp.open("GET","$MANAGER_WIDGET/Common/API/TVKeyValue.js",false); xhttp.send(""); xmlDoc=xhttp.responseText; Main.logToServer (xmlDoc); @@ -261,8 +262,8 @@ Main.testUrls = function () { }; -Main.isBdPlayer = function () { - if (deviceapis.tv.info.getProduct() == 2) //deviceapis.tv.info.PRODUCT_TYPE_BD +Main.isTvSet = function () { + if (deviceapis.tv.info.getProduct() == 0) //deviceapis.tv.info.PRODUCT_TYPE_TV return true; else return false; @@ -593,19 +594,23 @@ Main.playItem = function (url) { break; case Main.eMED: - Display.hide(); - Display.showProgress(); - Player.mFormat = Player.ePDL; + if (ImgViewer.isImage() == true) { + ImgViewer.show(); + } + else { + Display.hide(); + Display.showProgress(); + Player.mFormat = Player.ePDL; - Main.log(" playItem: now= " + now + " start_time= " + start_time + " dur= " + duration + " (Start + Dur - now)= " + ((start_time + duration) -now)); - - Display.setOlTitle(Data.getCurrentItem().childs[Main.selectedVideo].title); + Main.log(" playItem: now= " + now + " start_time= " + start_time + " dur= " + duration + " (Start + Dur - now)= " + ((start_time + duration) -now)); - Player.setVideoURL( Data.getCurrentItem().childs[Main.selectedVideo].payload.link); - Player.playVideo(-1); + Display.setOlTitle(Data.getCurrentItem().childs[Main.selectedVideo].title); - Player.guid = "unknown"; + Player.setVideoURL( Data.getCurrentItem().childs[Main.selectedVideo].payload.link); + Player.playVideo(-1); + Player.guid = "unknown"; + } break; case Main.eURLS: Display.hide(); @@ -873,10 +878,12 @@ cPlayStateKeyHndl.prototype.handleKeyDown = function (keyCode) { case tvKey.KEY_YELLOW: Player.nextSubtitleTrack(); break; - case 1089: + case tvKey.KEY_SUB_TITLE: // (1089) BD Player Key for Green case tvKey.KEY_3D: case tvKey.KEY_GREEN: Player.toggle3DEffectMode(); + widgetAPI.blockNavigation(event); + break; break; default: @@ -1074,6 +1081,12 @@ cLivePlayStateKeyHndl.prototype.handleKeyDown = function (keyCode) { case tvKey.KEY_YELLOW: Player.nextSubtitleTrack(); break; + case tvKey.KEY_SUB_TITLE: // BD Player Fix for Key Green (1089) + case tvKey.KEY_3D: + case tvKey.KEY_GREEN: + Player.toggle3DEffectMode(); + widgetAPI.blockNavigation(event); + break; default: this.defaultKeyHandler.handleDefKeyDown(keyCode); @@ -1157,7 +1170,9 @@ cMenuKeyHndl.prototype.handleKeyDown = function (keyCode) { break; case tvKey.KEY_RED: - RecCmdHandler.showMenu(Data.getCurrentItem().childs[Main.selectedVideo].payload.guid); + if ((Main.state == Main.eLIVE) || (Main.state == Main.eREC)) { + RecCmdHandler.showMenu(Data.getCurrentItem().childs[Main.selectedVideo].payload.guid); + } break; case tvKey.KEY_YELLOW: if (Main.state == Main.eURLS) { @@ -1603,11 +1618,11 @@ Main.tvKeys = { KEY_LEFT :37, KEY_RIGHT :39, KEY_ENTER :13, + KEY_RED :82, KEY_RETURN :27, KEY_STOP :27, // ESC // KEY_MUTE :27, - KEY_RED :82, KEY_1 :49, KEY_2 :50, diff --git a/smarttv-client/Javascript/Player.js b/smarttv-client/Javascript/Player.js index e6fdf59..709d367 100755 --- a/smarttv-client/Javascript/Player.js +++ b/smarttv-client/Javascript/Player.js @@ -146,7 +146,7 @@ Player.toggleAspectRatio = function () { Player.toggle3DEffectMode = function () { Main.logToServer("Player.toggle3DEffectMode"); - if (Main.isBdPlayer() == true) { + if (Main.isTvSet() == false) { if( 1 == Player.screenObj.Flag3DTVConnect() ) { Main.logToServer("BDPlayer connected to 3D TV"); Player.setNew3DEffectMode(); diff --git a/smarttv-client/Javascript/Server.js b/smarttv-client/Javascript/Server.js index fd8959c..97da591 100755 --- a/smarttv-client/Javascript/Server.js +++ b/smarttv-client/Javascript/Server.js @@ -37,6 +37,7 @@ Server.fetchVideoList = function(url) { var title = $(this).find('title').text(); // var link = $(this).find('link').text(); var link = $(this).find('enclosure').attr('url'); + var mime = $(this).find('enclosure').attr('type'); var guid = $(this).find('guid').text(); var programme = $(this).find('programme').text(); var description = $(this).find('description').text(); @@ -54,7 +55,7 @@ Server.fetchVideoList = function(url) { var title_list = title.split("~"); Data.addItem( title_list, {link : link, prog: programme, desc: description, guid : guid, start: startVal, - dur: durVal, ispes : ispes, isnew : isnew, fps : fps, num : num}); + dur: durVal, ispes : ispes, isnew : isnew, fps : fps, num : num, mime : mime}); }); // each diff --git a/smarttv-client/Javascript/Timers.js b/smarttv-client/Javascript/Timers.js index 29db55c..53c9d4e 100644 --- a/smarttv-client/Javascript/Timers.js +++ b/smarttv-client/Javascript/Timers.js @@ -86,7 +86,7 @@ Timers.readTimers = function () { Main.log ("Timers: Got response"); $(data).find("timer").each(function () { var title = $(this).find('file').text(); - var isSingleEvent = ($(data).find('issingleevent').text() == "true") ? true : false; + var isSingleEvent = ($(this).find('issingleevent').text() == "true") ? true : false; var printday = $(this).find('printday').text(); var weekdays = parseInt($(this).find('weekdays').text()); @@ -119,12 +119,22 @@ Timers.createMenu= function () { var p_width = $("body").outerWidth(); var p_height = $("body").outerHeight(); - var table = $("
", {id : "timerTable", style :"overflow-y: scroll;margin-top:3px;margin-bottom:3px;height:100%;"}); + var table = $("
", {id : "timerTable", style :"overflow-y: scroll;margin-top:3px;margin-bottom:3px; padding-right:3px; height:100%;"}); $("#timerView").append(table); $("#timerScreen").show(); + var cur_date = 0; for (var i = 0; i < Timers.timerList.length; i++) { Main.log("Timers: " + Timers.timerList[i].title); + + if (Timers.timerList[i].isSingleEvent == false) { + cur_date = 0; + table.append( $("
", { text : ((Timers.timerList[i].day != 0) ? (Timers.getPrintDate(Timers.timerList[i].day) + " - ") : "") +Timers.getWeekdays(Timers.timerList[i].weekdays), class : "style_menuItem style_headline", style : "text-align:left;overflow-x: hidden;white-space : nowrap;"})); + + }else if (cur_date != Timers.timerList[i].day) { + cur_date = Timers.timerList[i].day; + table.append( $("
", { text : Timers.getPrintDate(Timers.timerList[i].day) , class : "style_menuItem style_headline", style : "text-align:left;overflow-x: hidden;white-space : nowrap;"})); + } table.append(Timers.createEntry(i, $("#timerTable").width())); } @@ -134,17 +144,41 @@ Timers.createMenu= function () { }; +Timers.getPrintDate = function (day) { + var day = new Date (day * 1000); + return day.getDate() + "." + (day.getMonth() +1) + "." + day.getFullYear() +}; + +Timers.getWeekdays = function (wd) { + var map = wd.toString(2); + var res = ""; + + res += ((map[0] == "1") ? "M" : "-"); + res += ((map[1] == "1") ? "D" : "-"); + res += ((map[2] == "1") ? "M" : "-"); + res += ((map[3] == "1") ? "D" : "-"); + res += ((map[4] == "1") ? "F" : "-"); + res += ((map[5] == "1") ? "S" : "-"); + res += ((map[6] == "1") ? "S" : "-"); + + return res; +}; + Timers.createEntry= function (i, w) { Main.log("width= " +w); + var row = $("
", {id: "tmr-"+i, class : "style_menuItem", style : "text-align:left;overflow-x: hidden;white-space : nowrap;"}); //, style : "text-overflow: ellipsis;white-space : nowrap;" // row.append($("
", {class : ((Timers.timerList[i].isrec ==true) ? "style_timerRec" : ""), style : "display: inline-block;"})); - row.append($("
", {class : ((Timers.timerList[i].isrec ==true) ? "style_timerRec" : "style_timerNone"), style : "display: inline-block;"})); // + row.append($("
", {class : ((Timers.timerList[i].isrec ==true) ? "style_timerRec" : "style_timerNone"), style : "display: inline-block;"})); + if ( Timers.timerList[i].isSingleEvent == true) { + } + else { + } row.append($("
", {text : Timers.timerList[i].channelname, style : "padding-left:5px;width:12%; display: inline-block;", class : "style_overflow"})); row.append($("
", {text : Timers.timerList[i].start, style : "padding-left:5px; width:9%; display: inline-block;", class : "style_overflow"})); row.append($("
", {text : Timers.timerList[i].stop, style : "padding-left:5px; width:9%; display: inline-block;", class : "style_overflow"})); row.append($("
", {text : Timers.timerList[i].title, style : "padding-left:5px; width:68%;display: inline-block;", class : "style_overflow"})); - return row; }; diff --git a/smarttv-client/index.html b/smarttv-client/index.html index 8575cd8..6760353 100755 --- a/smarttv-client/index.html +++ b/smarttv-client/index.html @@ -41,6 +41,7 @@ + @@ -212,9 +213,13 @@
+
+
-
-
- +
+ +
+
+
-- cgit v1.2.3