Changing EPG Grid style width

Matthew

Matthew

Active Member
Hi, it bugs me that the EPG in grid style is a fixed width and in my case is squashed onto 2/3 of the screen, would be much better filling the screen.

I've searched the css files and can find nothing that relates, I`ve also looked for the script that creates the EPG but can't find that either!

Is anyone able to say where the EPG width is defined and which is the main script file used.
 
prpr said:
/mod/webif/html/xepg/index.jim

set chanpx and eventpx at line 69 or so.
Click to expand...

Thanks that works great, found needed to leave chanpx alone and set eventpx to 85% to my screen width.

Is their anyway to pass the actual screen width to the script so this would work automatically?

I'm not familiar with this jim code, its like JavaScript but different, anyone know where a reference can be found on it?
 
Thanks for the info, I suspected it was server based, so it would need a AJAX type solution, I`ve done that with JavaScript/PHP but wether that be be done with jim is another matter.
 
Matthew said:
I'm not familiar with this jim code, its like JavaScript but different, anyone know where a reference can be found on it?
Click to expand...
The Jim language reference is here
The base language is extended by a set of classes by @af123 to handle the various component of the webif, these are not formally documented so you learn by reading code and asking questions.
The epg display would largely use the epg.class /mod/webif/lib/epg.class

I haven't looked at he code but I presume the webif EPG display is using AJAX to retrieve the EPG data Loading EPG Information. so if it isn't a;ready it could pass the screen dimensions to the server.

The best way to learn is to find something small you would like changed and have a go yourself!
 
I`ve come up with the rough & ready solution to auto sizing avoiding messing with AJAX, simply passing the width with a query string param and parsing that.

The following change adds a width param to all epg links (grid mode) and adds the param to the epg url and reloads page if the setting is not at current page size.

Edit file /mod/webif/html/xepg/index.jim

look for (line 69)

Code: 
set chanpx 160
set eventpx 1000

Replace with:

Code: 
set pagewth [cgi_get pagewth -]
if {$pagewth < 1024}  { set pagewth 1024 }
set chanpx $(int($pagewth * 0.1)) 
set eventpx $(int($pagewth * 0.8))

Look for (line 202)

Code: 
<script type=text/javascript>
var hours = $hours;
var stt = [expr $stt + 0];
var nowoffset = $offset;

Add immediately after:

Code: 
var pagewth = $pagewth;

Save your changes


Edit file /mod/webif/html/xepg/script.js

At the start of the file add:

Code: 
var pagewidth = $(window).width();

if (pagewidth != pagewth)
{
  var url;
  var sep;
  if(window.location.search.indexOf('?') != -1) sep = '&';
  else sep = '?';

  if(window.location.search.indexOf('pagewth=') != -1)
  url = window.location.search.replace( /pagewth=\w*\d*/, "pagewth=" + pagewidth);
  else url = window.location.search + sep + "pagewth=" + pagewidth;

   window.location.href = url;
}

Look for all instances of:

Code: 
.scrollTop();

And replace with:

Code: 
.scrollTop() + '&pagewth=' + pagewidth;

Save your changes


I would appreciate any comments, suggestions anyone has.
 
The diff outputs the the changes in the previous post:


Code: 
--- Backup/mod/webif/html/xepg/index.jim
+++ mod/webif/html/xepg/index.jim
@@ -65,9 +65,10 @@
 if {$current} {
     set offset $(($ostt - $stt) / 1800.0)
 }
-
-set chanpx 160
-set eventpx 1000
+set pagewth [cgi_get pagewth -]
+if {$pagewth < 1024}  { set pagewth 1024 }
+set chanpx $(int($pagewth * 0.1)) 
+set eventpx $(int($pagewth * 0.8))
 set totalpx $($chanpx + $eventpx)
 set contwidth $($totalpx + 50)
 
@@ -202,7 +206,10 @@
 <script type=text/javascript>
 var hours = $hours;
 var stt = [expr $stt + 0];
 var nowoffset = $offset;
+var pagewth = $pagewth;
 </script>
 "
 jscss script.js


Code: 
--- Backup/mod/webif/html/xepg/script.js
+++ mod/webif/html/xepg/script.js
@@ -1,3 +1,27 @@
+var pagewidth = $(window).width();
+
+if (pagewidth != pagewth)
+{
+  var url;
+  var sep;
+  if(window.location.search.indexOf('?') != -1) sep = '&';
+  else sep = '?';
+
+  if(window.location.search.indexOf('pagewth=') != -1)
+  url = window.location.search.replace( /pagewth=\w*\d*/, "pagewth=" + pagewidth);
+  else url = window.location.search + sep + "pagewth=" + pagewidth;
+
+    window.location.href = url;
+}
+

@@ -19,7 +43,7 @@
 
     window.location = '/xepg/?stt=' + tt +
         '&hours=' + hours +
-        '&pos=' + $('#xegrid').scrollTop();
+        '&pos=' + $('#xegrid').scrollTop() + '&pagewth=' + pagewidth;
 }).on('contextmenu', function(e) {
     e.preventDefault();
 
@@ -31,7 +55,7 @@
         hours = nhours;
     window.location = '/xepg/?stt=' + stt +
         '&hours=' + hours +
-        '&pos=' + $('#xegrid').scrollTop();
+        '&pos=' + $('#xegrid').scrollTop() + '&pagewth=' + pagewidth;
 });
 
 $('.dayjump').hover(
@@ -48,12 +72,12 @@
 
     window.location = '/xepg/?stt=' + $(this).attr('tt') +
         '&hours=' + hours +
-        '&pos=' + $('#xegrid').scrollTop();
+        '&pos=' + $('#xegrid').scrollTop() + '&pagewth=' + pagewidth;
 });
 
 $('button.nav').button().click(function() {
     window.location = '/xepg/?stt=' + $(this).attr('tt') +
-        '&pos=' + $('#xegrid').scrollTop();
+        '&pos=' + $('#xegrid').scrollTop() + '&pagewth=' + pagewidth;
 });
 
 $(function() {
 
This mod has shown up a bug, if the width is smallish (say 1024) the program width calculation can result in a negative value if the program is very short, the resulting -x px is ignored by the browser causing display issues,

My fix:

Code: 
--- /Backup/mod/webif/html/xepg/index.jim
+++ /mod/webif/html/xepg/index.jim

@@ -296,7 +308,7 @@
 
     set lbg $bg
     if {[$e scheduled]} { set lbg "blueshade" }
-
+    if {$px < 6} { set px 6 }
     puts "<div class=\"xeprog $lbg\"
         style=\"width: [expr $px - 4]px;\" title=\"$htxt\">
         <a class=event href=# xs=[$e get service_id]
 
You must log in or register to reply here.
Back
Top