From 0aef25ad1fa05e2fb190b157b06b3b0f1e9c75c4 Mon Sep 17 00:00:00 2001
From: "M. Voerman" <rekordc@gmail.com>
Date: Tue, 18 Dec 2012 02:59:42 +0100
Subject: More and more parts are now SVG. Still to do Set Timer, Schedule,
 MediaPlayer

---
 index.svg   |  89 ++++++++++++++++++++++++++++++++++++----------------
 main.js     | 101 +++++++++++++++++++++++++++++++++++++++++-------------------
 settings.js |   8 +++--
 3 files changed, 136 insertions(+), 62 deletions(-)

diff --git a/index.svg b/index.svg
index 07f60b9..8454ce5 100644
--- a/index.svg
+++ b/index.svg
@@ -31,7 +31,7 @@
 </foreignObject>
 
 <g id="video_window">
-  <video id='videoplane' x="0" y="0" width="1920" height="1080" preserveAspectRatio="xMidYMid">
+  <video id='videoplane' x="0" y="0" width="1920" height="1080" preserveAspectRatio="xMidYMid" >
   </video>
 </g>
 
@@ -62,38 +62,73 @@
 
 </g>
 
-<g id="EPGnow" visibility="invisible" >
-   <rect height="800" width="1300" y="100" x="300" fill="#0000ff" rx="50" />
-   <text id="epgchannel" y="275" x="350" style="fill:white;font-size:56px;" />
-   <text id="epgtime" y="350" x="350" style="fill:white;font-size:56px;" />
-   <text id="epgduration" y="350" x="550" style="fill:white;font-size:56px;" />
-   <text id="epginfo" y="425" x="350" style="fill:white;font-size:56px;" />
-   <textArea id="epgextinfo" text-align="justify" width="1200" y="500" x="350" style="fill:white;font-size:56px;" />
+<g id="MENU" visibility="invisible" >
+   <rect height="900" width="1300" y="75" x="300" fill="#0000ff" rx="50" opacity="0.6" />
+   <rect height="75" width="250" y="875" x="450" fill="red" rx="50" />
+   <rect height="75" width="250" y="875" x="700" fill="green" rx="50" />
+   <rect height="75" width="250" y="875" x="950" fill="yellow" rx="50" />
+   <rect height="75" width="250" y="875" x="1200" fill="blue" rx="50" />
+   <text id="menuheader" y="175" x="600" style="fill:white;font-size:88px;" />
+   <text id="menu0" y="275" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu1" y="350" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu2" y="425" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu3" y="500" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu4" y="575" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu5" y="650" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu6" y="725" x="350" style="fill:white;font-size:56px;" />
+   <text id="menu_red" y="930" x="500" style="fill:white;font-size:56px;"/>
+   <text id="menu_green" y="930" x="750" style="fill:black;font-size:56px;"/>
+   <text id="menu_yellow" y="930" x="1000" style="fill:black;font-size:56px;"/>
+   <text id="menu_blue" y="930" x="1250" style="fill:white;font-size:56px;"/>
 </g>
 
-<g id="EPGnext" visibility="invisible" >
-   <rect height="800" width="1300" y="100" x="300" fill="#0000ff" rx="50" />
-   <text id="epgchanneln" y="275" x="350" style="fill:white;font-size:56px;" />
-   <text id="epgtimen" y="350" x="350" style="fill:white;font-size:56px;" />
-   <text id="epgdurationn" y="350" x="550" style="fill:white;font-size:56px;" />
-   <text id="epginfon" y="425" x="350" style="fill:white;font-size:56px;" />
-   <textArea id="epgextinfon" text-align="justify" width="1200" y="500" x="350" style="fill:white;font-size:56px;" />
-
-
+<g id="GUIDE" visibility="invisible" >
+   <rect height="900" width="1500" y="75" x="200" fill="#0000ff" rx="50" opacity="0.6" />
+   <rect id="guidebar" height="50" width="1400" y="275" x="250" fill="#0066FF" rx="50" />
+   <rect height="75" width="300" y="875" x="275" fill="red" rx="50" />
+   <rect height="75" width="300" y="875" x="625" fill="green" rx="50" />
+   <rect height="75" width="300" y="875" x="975" fill="yellow" rx="50" />
+   <rect height="75" width="300" y="875" x="1325" fill="blue" rx="50" />
+   <text id="guidename" y="175" x="600" style="fill:white;font-size:88px;" />
+   <text id="guidetime" y="175" x="600" style="fill:white;font-size:88px;" />
+   <text id="guide0" y="150" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide1" y="200" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide2" y="250" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide3" y="300" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide4" y="350" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide5" y="400" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide6" y="450" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide7" y="500" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide8" y="550" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide9" y="600" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide10" y="650" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide11" y="700" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide12" y="750" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide13" y="800" x="300" style="fill:white;font-size:38px;" />
+   <text id="guide14" y="850" x="300" style="fill:white;font-size:38px;" />
+
+   <text id="guide_red" y="930" x="325" style="fill:white;font-size:48px;"/>
+   <text id="guide_green" y="930" x="675" style="fill:black;font-size:48px;"/>
+   <text id="guide_yellow" y="930" x="1025" style="fill:black;font-size:48px;"/>
+   <text id="guide_blue" y="930" x="1375" style="fill:white;font-size:48px;"/>
+</g>
 
+<g id="EPGnow" visibility="invisible" overlay="top">
+   <rect height="800" width="1300" y="100" x="300" fill="#0000ff" rx="50" />
+   <text id="epgchannel" y="175" x="350" style="fill:white;font-size:64px;" />
+   <text id="epgtime" y="250" x="350" style="fill:white;font-size:40px;" />
+   <text id="epgduration" y="250" x="550" style="fill:white;font-size:40px;" />
+   <text id="epginfo" y="310" x="350" style="fill:yellow;font-size:48px;" />
+   <textArea id="epgextinfo" text-align="justify" width="1200" y="375" x="350" style="fill:white;font-size:40px;" />
 </g>
 
-<g id="MENU" visibility="invisible" >
+<g id="EPGnext" visibility="invisible" overlay="top">
    <rect height="800" width="1300" y="100" x="300" fill="#0000ff" rx="50" />
-   <text id="menuheader" y="275" x="600" style="fill:white;font-size:88px;" />
-   <text id="menu0" y="375" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu1" y="450" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu2" y="525" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu3" y="600" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu4" y="675" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu5" y="750" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu6" y="825" x="350" style="fill:white;font-size:56px;" />
-   <text id="menu7" y="900" x="350" style="fill:white;font-size:56px;" />
+   <text id="epgchanneln" y="175" x="350" style="fill:white;font-size:64px;" />
+   <text id="epgtimen" y="250" x="350" style="fill:white;font-size:40px;" />
+   <text id="epgdurationn" y="250" x="550" style="fill:white;font-size:40px;" />
+   <text id="epginfon" y="310" x="350" style="fill:yellow;font-size:48px;" />
+   <textArea id="epgextinfon" text-align="justify" width="1200" y="375" x="350" style="fill:white;font-size:40px;" />
 </g>
 
 
diff --git a/main.js b/main.js
index 89c4742..3b229d4 100644
--- a/main.js
+++ b/main.js
@@ -25,6 +25,7 @@ var nrMedia = recording.length - 1;
 function onLoad() {
   document.addEventListener("keydown", onKeyDown, false);
   video = document.getElementById("videoplane");
+  guide = document.getElementById("GUIDE");
 	createPlayer();
         getBoxSize();
 	embedTeletextElement();
@@ -126,13 +127,12 @@ function preview(urip) {
 
 
 function FullScreen() {
-
-    video.setAttribute("overlay","500");
+//    video.setAttribute("overlay", "500");
     video.setAttribute("x", "0");
     video.setAttribute("y", "0");
     video.setAttribute("width", videoWidth);
     video.setAttribute("heigth", videoHeight);
-    alert ("Display :" + videoWidth + "x" + videoHeight);
+//    alert ("Display :" + videoWidth + "x" + videoHeight);
 }
 
 
@@ -251,17 +251,17 @@ function onKeyDown(event) {
 			if(audio == 1) {	
 				is.setObject("cfg.media.audio.languagepriority","dut,eng",is.STORAGE_VOLATILE);
 				document.getElementById("osdlang").setAttribute("visibility","visible");
-				document.getElementById("osdlangtxt").textContent = "Nederlands"
+				document.getElementById("osdlangtxt").textContent = "Nederlands";
 				setTimeout("document.getElementById('osdlang').setAttribute('visibility','invisible');", 3000);
 			} else if(audio == 2) {
 				is.setObject("cfg.media.audio.languagepriority","ger,deu,eng",is.STORAGE_VOLATILE);
 				document.getElementById("osdlang").setAttribute("visibility","visible");
-				document.getElementById("osdlangtxt").textContent = "Deutsch"
+				document.getElementById("osdlangtxt").textContent = "Deutsch";
 				setTimeout("document.getElementById('osdlang').setAttribute('visibility','invisible');", 3000);
 			} else if(audio == 3) {
 				is.setObject("cfg.media.audio.languagepriority","eng",is.STORAGE_VOLATILE);
 				document.getElementById("osdlang").setAttribute("visibility","visible");
-				document.getElementById("osdlangtxt").textContent = "English"
+				document.getElementById("osdlangtxt").textContent = "English";
 				setTimeout("document.getElementById('osdlang').setAttribute('visibility','invisible');", 3000);
 				audio = 0;
 			}
@@ -275,7 +275,6 @@ function onKeyDown(event) {
 			}
 		}
 	} else {
-		colorkeys.innerHTML = "<font color=red size=3>" +  NN[3 + NowNext] + "</font><font color=green size=3>" + NN[NowNext] + "</font><font color=yellow size=3> Schedule </font><font color=blue size=3> INFO </font>";
 		NowNext = 1 - NowNext;
 		showChannelList();
 	}
@@ -368,6 +367,7 @@ function onKeyDown(event) {
 				}
 		  } else {
 		isFullscreen = 1;
+		guide.setAttribute("visibility","invisible");
 		FullScreen();
 	        play(channels[currChan]);
 		}
@@ -384,16 +384,14 @@ function onKeyDown(event) {
    case "Scroll":
 		if(isFullscreen) {
 			NowNext = 0;
-			video.width = "320px";
-			video.height = "240px";
-			video.left = "380px";
-			video.top = "300px";
+			guide.setAttribute("visibility","visible");
 			showChannelList();
 			isFullscreen = 0;
 			if(!SwitchGuide) {
 			preChan = currChan;
 			}
 		} else {
+			guide.setAttribute("visibility","invisible");
 			isFullscreen = 1;
 			FullScreen();
 			if(!SwitchGuide) {
@@ -609,7 +607,9 @@ document.getElementById("epgchanneln").textContent = Left(channelsnames[currChan
 	tijd = new Date(tijd);
 	dateCurrent = new Date();
 	var EPGminutes = Math.floor((dateCurrent.getTime() - date.getTime()) /1000/60);
-
+	if (EPGminutes > 999) {
+	EPGminutes = 0;
+	}
 	var tm = tijd.getMinutes();
 	var th = tijd.getHours();
 	if(th<10)
@@ -747,6 +747,7 @@ function GetEPG(epgchan)
 	EPGShortnext = "";
 	EPGExtnext = "";
 	cds = 0;
+	
   try {
 	// streaminfo
 	// SI[x] 0-sat,1-NID,2-TID,3-SID
@@ -900,17 +901,21 @@ function GetSchedule(schchan,tablelength){
 
 // Channelslist / EPG Guide
 //
-// show currchan - 5
+// show currchan - 7
 // highlite currchan
-// show currchan + 5
+// show currchan + 7
 // 
 // check if chan is OK
 // 
+
 function showChannelList() {
-	var liststyle = "";
-	var htmlstring = "<table border='0'><tr>";
-	listChan = currChan-5;
-	for(var i=currChan-5; i<=currChan+5; i++) {
+		document.getElementById("guide_green").textContent = NN[1 - NowNext];
+		document.getElementById("guide_red").textContent = NN[3 + NowNext];
+		document.getElementById("guide_yellow").textContent = "Schedule";
+		document.getElementById("guide_blue").textContent = "INFO";
+	var yy = 0;
+	listChan = currChan-7;
+	for(var i=currChan-7; i<=currChan+7; i++) {
 		if (listChan<1) {
 			listChan=nrChannels-2;
 			}
@@ -924,20 +929,48 @@ function showChannelList() {
 			while (!channels[listChan] && (listChan<nrChannels));
 		GetEPG(listChan);
 		if ( listChan == currChan) { 
-			liststyle = " style='background:#fc5;'";
-		}  else {
-			liststyle = "";
+			var y = 110 + (50 * yy);
+			document.getElementById("guidebar").setAttribute("y",y);
 		}
-		EpgInfo[0] = EPG[0][7][listChan];
-		EpgInfo[1] = EPG[1][7][listChan];
-		htmlstring = htmlstring + "<td" + liststyle + ">" + listChan + "</td><td" +liststyle + ">" + Left(channelsnames[listChan],15) + "</td><td" +liststyle + ">"  + Left(EpgInfo[NowNext],64) + "</td></tr>";
+	tijd = EPG[0][2][currChan];
+	date = new Date(tijd*1000); 
+	tijd = date.toUTCString();
+	tijd = new Date(tijd);
+	dateCurrent = new Date();
+	var EPGminutes = Math.floor((dateCurrent.getTime() - date.getTime()) /1000/60);
+	if (EPGminutes > 999) {
+	EPGminutes = 0;
 	}
-	htmlstring = htmlstring + "</table>";
-	channelList.innerHTML = htmlstring;
-        chanlistepg.innerHTML = "<center><font color=black size=4><p>" + EPG[NowNext][1][currChan] + "</p></font><font color=black size=3><p>" + Left(EPG[NowNext][4][currChan],250) + "</p></font></center>" ;
+	var tm = tijd.getMinutes();
+	var th = tijd.getHours();
+	if(th<10)
+        {
+                th = "0"+th;
+        }
+        if(tm<10)
+        {
+                tm = "0"+tm;
+        }
+
+	EpgInfo[0] = th + ":" + tm + "\uE003(" + EPGminutes + "\uE003/\uE003" + (EPG[0][3][listChan] - EPGminutes).toFixed(0) + ")" + "\uE003" + EPG[0][1][listChan] + "\uE003" + EPG[0][6][listChan];
+	EpgInfo[1] = th + ":" + tm + "\uE003(" + (EPG[1][3][listChan]) + ")" + "\uE003" + EPG[1][1][listChan] + "\uE003" + EPG[1][6][listChan];
+
+	try {
+	document.getElementById(("guide"+yy)).textContent = listChan + "\uE003" + Left(channelsnames[listChan],15) + "\uE003" + Left(EpgInfo[NowNext],64);
+	  } catch (e) {
+	    alert("Error file guide list: " + e);
+	  }
+	yy = yy + 1;
+	}
+
+
+//	htmlstring = htmlstring + "</table>";
+//	channelList.innerHTML = htmlstring;
+//        chanlistepg.innerHTML = "<center><font color=black size=4><p>" + EPG[NowNext][1][currChan] + "</p></font><font color=black size=3><p>" + Left(EPG[NowNext][4][currChan],250) + "</p></font></center>" ;
 
 }
 
+
 // END of Channelslist / EPG Guide
 
 
@@ -981,7 +1014,7 @@ function onKeyMenu(keyCode) {
 	clearTimeout(switchtimerID);
 	switchtimerID = 0;
 	InitMenu();
-	osdtimer.innerHTML = "";
+	switchtimericon = "\uE003"
 	SetLed(0,0,0);
     break;
     case "Blue":
@@ -1027,10 +1060,14 @@ function onKeyMenu(keyCode) {
 
 function InitMenu() {
 	document.getElementById("menuheader").textContent = "SETTINGS";
-	document.getElementById("menu0").textContent = "<RED>    Frontdisplay Clock : " + showClock;
-	document.getElementById("menu1").textContent = "<GREEN>  Prio audio track : " + (toi.informationService.getObject("cfg.media.audio.languagepriority"));
-	document.getElementById("menu2").textContent = "<YELLOW> Switch timer : " + Boolean(switchtimerID);
-	document.getElementById("menu3").textContent = "<BLUE>   Preview guide : " + SwitchGuide + " ";
+	document.getElementById("menu0").textContent = "Frontdisplay Clock : " + showClock;
+	document.getElementById("menu1").textContent = "Prio audio track : " + (toi.informationService.getObject("cfg.media.audio.languagepriority"));
+	document.getElementById("menu2").textContent = "Switch timer : " + Boolean(switchtimerID);
+	document.getElementById("menu3").textContent = "Preview guide : " + SwitchGuide + " ";
+	document.getElementById("menu_red").textContent = " Clock ";
+	document.getElementById("menu_green").textContent = " Lang. ";
+	document.getElementById("menu_yellow").textContent = " Timer ";
+	document.getElementById("menu_blue").textContent = " Prev. ";
 }
 
 // END Menu
diff --git a/settings.js b/settings.js
index 1f5afa8..be702a3 100644
--- a/settings.js
+++ b/settings.js
@@ -58,7 +58,10 @@ var videoWidth = "544"; // fallbacksize
 var videoHeight = "576";
 
 var switchtimericon = "\uE003";
+
+var guide = null;
 var video = null;
+
 var teletext = null;
 var eitCache = null;
 var events = null;
@@ -75,9 +78,8 @@ var NN = new Array();
 NN[0] = "Now";
 NN[1] = "Next";
 NN[2] = "Schedule";
-NN[3] = "TIMER";
-NN[4] = "-----";
-
+NN[3] = "-----";
+NN[4] = "TIMER";
 
 //
 //NowNext,	1 = programma naam	event.name			,currchan
-- 
cgit v1.2.3