WebIf Tweaks: Changes to the EPG

Matthew · Dec 16, 2018

This thread it about potential alterations to the current EPG, though it works great as it is (thanks to af123 for all the work) there are areas where I feel it could be improved and I would be interested to hear how others feel on the matter.

I have already posted on a few changes, for example the current fixed width, it would be better if the display fitted to the available width, but that requires passing data from the browser to the server, looking at the code it seems it is already using AJAX so that should be feasible.

I also feel that the current limited hours display would be better changed so a 24Hr period was fetched (perhaps 5am to 5am) then that displayed as is except in a horizontally scrollable window, that would make the current hours jumps obsolete and mean day jumps would be all that is required.

I intend to attempt these changes myself but if anyone is able to detail all the files used and perhaps the process flow too that would be very helpful.

Wildebeest · Dec 17, 2018

The display is pretty good already TBH - no complaints at all!
The "visual" mode I find really useful for checking what I am going to record, what I have forgotten to schedule, and conflicts.

There are a couple of functionality inprovements I would really love to see though:

Firstly: a dropdown at the top of the EPG to select what channel group to display. Yes I know a default group can be set in "settings", but it's a pain to switch between groups.

Secondly, and related: with the remote scheduler "auto" function, it only seems to pick up a program if that program is being transmitted on a channel included in the currently displayed (i.e. default group, as the two are currently one and the same). Now confing the channels displayed to a particular group is really useful for checking what's on, but when the RS is searching for matches to "auto" entries I would really much prefer it to search *all* channels, or least have a choice. Otherwise, if - say - a film I want to see is on a channel I don't normally monitor, I will miss it.

A big thanks to all of you who create this software - an amazing effort, I will be lost if I ever have to change recorders!

Wildebeest · Dec 18, 2018

Oh, just remembered another *very* minor point: when clicking on a programme in the RS EPG screen, the resulting dialogue box can be closed by pressing "Esc" (windows) - on the web interface to the box it cannot - would be nice to add that to the WI. Thanks.

MymsMan · Dec 18, 2018

The major enhancements to the WI EPG I would like to see are to be able to Cancel/Reschedule/Skip a recording from the EPG in the same way that I can from the Visual display and for skipped recordings to be colour coded in the WI EPG the same as they are in the RS EPG.

Another enhancement would be if the current time bar auto updated so it showed where Now currently is

Matthew · Dec 19, 2018

Wildebeest said:
Firstly: a dropdown at the top of the EPG to select what channel group to display. Yes I know a default group can be set in "settings", but it's a pain to switch between groups.

Yes that's something I though would be handy too, especially when searching and you want to search set channel groups.

MymsMan said:
The major enhancements to the WI EPG I would like to see are to be able to Cancel/Reschedule/Skip a recording from the EPG in the same way that I can from the Visual display

I`ll definitely look into that.

MymsMan said:
Another enhancement would be if the current time bar auto updated so it showed where Now currently is

Should not be too difficult to achieve.

I don't use the remote scheduler as when I tried it on my FoxSat it messed things up, what are the colour codes?

MymsMan · Dec 19, 2018

Matthew said:
I don't use the remote scheduler as when I tried it on my FoxSat it messed things up, what are the colour codes?

Episodes that are to be skipped/already recorded are shown in red rather than blue.
Don't know about the FoxSat but RS doesn't cause any problems

Matthew · Dec 19, 2018

A few minor tweaks for the EPG (in grid mode), this change makes the EPG page scroll to the top of the EPG on page load and provides three new buttons, the 1st to repeat the onload function, the 2nd to scroll back to the search bar and the 3rd to scroll to top for the menu. Also included my css mod to stop the EPG jumping on load complete.

To ensure file permissions and ownership are maintained (as the OS is Linux) I advise only changing files with the editor in Diag->File Editor, particularly the .jim files may change to non-executable if you use ftp (you will get a 500 server error) that can be fixed with the Diag->File Editor.

When adding the lines below make sure you add the new lines on a new line, not on an existing line.

Adding to EXTRA.css or appending to style.css

Stop epg jumping when page load has finished:

Code:

div div#spinner {
    position: absolute;
  top: 120px;
  left: 82px;
}

Add the buttons:

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

look for (near the middle of the file)

Code:

puts "</div>&nbsp;"
but "Now" $now

Add on a new line just after:

Code:

puts "&nbsp;<small><button id=epgjump >Jump To EPG Top</button></small>&nbsp;<small><button id=searchjump >Jump To Search</button></small>&nbsp;<small><button id=menujump >Menu</button></small>"

Save your changes

Add the script

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

At the end of the file add:

Code:

$('#epgjump').button().click(function() {
    $('html,body').animate({scrollTop: $("#timeline").offset().top},'slow');
    return false;
});
$('#searchjump').button().click(function() {
      $('html, body').animate({ scrollTop: ($('form').first().offset().top)},500);
    return false;
});
$('#menujump').button().click(function() {
      $('html, body').animate({scrollTop:0}, 1000, 'linear');
    return false;
});
$(document).ready(function() {
  $('html,body').delay(800).animate({scrollTop: $("#timeline").offset().top},'slow');
});

Save your changes

@Black Hole yes I know this is not a differences output, I`m not sure all understand those but I will add when I have time.

Matthew · Dec 20, 2018

Another minor tweak for the EPG (in grid mode), this change adds the date to the timeline bar and a auto updating current time bar as requested by @MymsMan

When adding the lines below make sure you add the new lines on a new line, not on an existing line.

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

look for (near the middle of the file)

Code:

puts "</div>"
puts "<span class=\"footnote\">&nbsp;
    (Right-Click to select end hour)</span>"

Add on a new line just after:

Code:

puts "&nbsp;&nbsp;&nbsp;Date:&nbsp;<span id=\"clock\"></span><span id=\"clocksecs\"></span>"

Look for (a bit further down)

Code:

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

Add on a new line just after:

Code:

var epgscroll = [$settings epgscroll];

Save your changes

Add the script:

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

At the start of the file add:

Code:

var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var days = ['Sun','Mon','Tue','Wed','Thur','Fri','Sat'];
var $kt = $('#xe0');
var ktpos = $kt.position();
var step = ($kt.outerWidth() / 1800);
var seconds = 0;
var sttstamp = stt*1000;
var endstamp = sttstamp+(hours * 3600000);

Look for the section:

Code:

if (nowoffset)
{
     var $kt = $('#xe0');
     var ktpos = $kt.position();
    var height = $('#keypos').position().top - 20;
    var top = ktpos.top - 35;
    var nowpos = ktpos.left + ($kt.width() * nowoffset);
    $('#xepgnow')
        .css('left', nowpos + 'px')
        .css('top', top)
        .height(height)
        .show('slow');
}

And delete it (its replaced by the code below)

At the end of the file add:

Code:

$(document).ready(function() {
  $('html,body').delay(800).animate({scrollTop: $("#timeline").offset().top},'slow');

   setInterval(function() {
    if(seconds % 30 == 0)
    {
       seconds = clock();
    }
    $('#clocksecs').html(":" +pad(seconds));
    seconds += 1;
}, 1000);

});

  function pad(vars) {
      return vars < 10 ? "0" + vars : vars;
   }
 
  function getOrdinal(n) {
      return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');
}

  function clock() {
    var clock = new Date();
    var showdatetime = days[clock.getDay()]+" "+getOrdinal(clock.getDate())+" "+months[clock.getMonth()]+" "+clock.getFullYear()+' '+clock.getHours() + ":" + pad(clock.getMinutes());
    var clockstamp = clock.getTime();
    var offset = (clockstamp - sttstamp)/1000;
    var newpos = parseInt((offset * step)+ktpos.left);
    var height = (epgscroll ? $('#xepg').height() : $('#keypos').position().top + 20);
    var top = ktpos.top - 35;
    $('#clock').html(showdatetime);
    if(offset >= 0 && clockstamp < endstamp)
    {
        $('#xepgnow')
        .css('left', newpos + 'px')
        .css('top', top)
        .height(height)
        .show('slow');
    }
    else
    {
       $('#xepgnow').hide('slow');
    }
    return clock.getSeconds();
  }

Code:
If you made the change in my previous post you are replacing the

Code:

$(document).ready(function() { $('html,body').delay(800).animate({scrollTop: $("#timeline").offset().top},'slow'); });

added last of all.

Save your changes

Matthew · Dec 22, 2018

If you wish a diff output for the changes detailed, sorry my diff program gets confused and wont do it!!

MymsMan · Dec 23, 2018

Matthew said:
If you wish a diff output for the changes detailed, sorry my diff program gets confused and wont do it!!

It would probably be best to add your changes to the GitHub repository for the webif then @af123 could easily incorporate your changes into the official version once tested

Trev · Dec 23, 2018

I thought something along those lines, as I can't keep up with what he is trying to do spread across two threads.

Black Hole · Dec 23, 2018

Could be made into a beta.

Matthew · Dec 28, 2018

A quick simple change, once a program is scheduled from the EPG it is immediately marked on the EPG so.

Code:

--- /mod/webif/html/js/epg_popup_orig.js
+++ /mod/webif/html/js/epg_popup.js
@@ -12,7 +12,10 @@
         }, function() {
         $.getJSON('/cgi-bin/pending.jim', function(data) {
             if (data.pending > 0)
                   $('#restart_block').slideDown('slow');
+            var xs = $('#epgpopup_dialogue').attr('xs');
+            var xe = $('#epgpopup_dialogue').attr('xe');
+            $('.event[xs=' + xs + '][xe=' + xe + ']').parent('div').addClass('blueshade');       
         });
         });
     $(":button:contains('Record')").fadeOut('slow');

Matthew · Jan 2, 2019

Another simple change, instantly identify program type on the EPG through background effect, in this case I`m just identifying films:

The change means all programs will have a identifying style class so this can be extended.

If you prefer other colours, just change the css, the last colour in the styles given is the marking one.

The change is for the grid style EPG only.

Code:

--- /mod/webif/html/xepg/index_orig.jim
+++ /mod/webif/html/xepg/index.jim

@@ -296,9 +308,11 @@
 
     set lbg $bg
     if {[$e scheduled]} { set lbg "blueshade" }
-
-    puts "<div class=\"xeprog $lbg\"
-        style=\"width: [expr $px - 4]px;\" title=\"$htxt\">
+    if {$px < 6} { set px 6 }
+    set ct [$e get content_type]
+    set cts [string tolower [lindex [split $ct "/"] 0]]
+    puts "<div class=\"xeprog $cts $lbg\"
+        style=\"width: [expr $px - 4]px;\" title=\"$ct | $htxt\">
         <a class=event href=# xs=[$e get service_id]
         xe=[$e get event_id] sch=[$e get sched_type]
         rec=$recopts>"

Code:

--- /mod/webif/html/xepg/style_orig.css
+++ /mod/webif/html/xepg/style.css
@@ -105,6 +105,15 @@
     border-radius: 10px;
     -moz-border-radius: 10px;
}
+div.xeprog.film.odd {
+  background: linear-gradient(180deg, #ccff99 80%, #D09ED8 90%);
+}
+div.xeprog.film.even {
+  background: linear-gradient(180deg, #ffffcc 80%, #D09ED8 90%);
+}
+div.xeprog.film.blueshade {
+  background: linear-gradient(180deg, #b9daff 80%, #D09ED8 90%) !important;
+}

div.xeprog span
{

Matthew · Jan 5, 2019

Wildebeest said:
Firstly: a dropdown at the top of the EPG to select what channel group to display. Yes I know a default group can be set in "settings", but it's a pain to switch between groups.

I have created that addition and the escape key option (any OS), I will create diffs for those and all the previously listed changes to simplify things in due course.

Black Hole · Jan 6, 2019

Matthew said:
escape key option (any OS)

Clever on a mobile OS!

Matthew · Jan 6, 2019

Black Hole said:
Clever on a mobile OS!

Don't you have a blackberry?

Yes I wasn't thinking mobile when I said that! Though if you can add a keyboard, it will work!

Black Hole · Jan 6, 2019

I'm an engineer. The key to engineering is looking for exceptions and boundary cases - thinking "out of the box".

Very early on in my (hardware) career, I wrote some code to take keyboard input and have it do something or other, and when I gave it to my seniors to try out the first thing they did was press all the keys they were not supposed to. This is why I rankle at ill-considered use of absolute words like "all", "every", or even "most"... are you sure? Who says?

EEPhil · Jan 6, 2019

Black Hole said:
Very early on in my (hardware) career, I wrote some code to take keyboard input and have it do something or other, and when I gave it to my seniors to try out the first thing they did was press all the keys they were not supposed to.

Substitute software for hardware and "my seniors" for "the client"and I have the same experience. People just love trying to break the code - and with my attempts they quite often did!

Black Hole · Jan 6, 2019

This is why I have often argued that the last person who should be given responsibility for proving tests is the designer. Give it to somebody with motive to prove it doesn't work rather than someone with a vested interest in showing it does! Had that been the case in Humax, we might have better products, and there wouldn't have been the VW debacle (but it's expensive).

WebIf Tweaks: Changes to the EPG

Active Member

Member

Member

Ad detector

Active Member

Ad detector

Active Member

Active Member

Active Member

Ad detector

The Dumb One

May contain traces of nut

Active Member

Active Member

Attachments

Active Member

May contain traces of nut

Active Member

May contain traces of nut

Number 28

May contain traces of nut