Feature #1133

New EPG/DVR UI

Added by neil mac about 5 years ago. Updated about 1 year ago.

Status:NewStart date:2012-08-18
Priority:LowDue date:
Assignee:-% Done:

0%

Category:User Interface
Target version:-

Description

Hi there,

The epg is hard to use and navigate, it should be more like the xbmc EPG timeline or websites such as http://tvguide.co.uk

I know this is not top priority as its used as a tv streaming server but would be really useful.

Thanks,
Neil

timeline.png (164 KB) polini -, 2013-02-18 16:24

History

#1 Updated by Adam Sutton about 5 years ago

  • Tracker changed from Bug to Feature
  • Subject changed from UI for EPG in webconsole to New EPG/DVR UI
  • Assignee deleted (Hein Rigolo)
  • Priority changed from Normal to Low

This has been discussed quite a bit recently in #hts and I would like to see something similar too . However wyou are correct that its fairly low priority. We also need to find someone with the appropriate skills, I have chatted to a few people but nothing firm yet.

Adam

#2 Updated by Adam Sutton about 5 years ago

  • Category changed from 10 to 11

#3 Updated by Meinaart - almost 5 years ago

Adam Sutton wrote:

This has been discussed quite a bit recently in #hts and I would like to see something similar too . However wyou are correct that its fairly low priority. We also need to find someone with the appropriate skills, I have chatted to a few people but nothing firm yet.

Adam

What kind of skills are needed? In other words: what language/framework is used for the backend? Django with Ext-jS?

#4 Updated by Hein Rigolo almost 5 years ago

C + ExtJS (2.2.1)

I have always looked at the EPG as something that could work just like google maps. So each program is it's own tile and you can move around (up/down/left/right) with you mouse just like google maps. And you can even "zoom" in which only makes the tiles bigger (higher/wider) so that more information can contained in it.Then you also do not have scrollbars at the left and bottom part but one continuous flow of EPG data.

Now the only question is: Can something like that can be constructed using ExtJS or does that require it's own javascript.

It requires that tvheadend can serve the "EPG Tiles" in the required size and some relation between the tiles to correctly move them around. And then a client side script that can request new "EPG Tiles" from tvheadend (or it could generate them locally using the standard EPG calls to get the data)

#5 Updated by Adam Sutton almost 5 years ago

Damn you beat me too it ;) I'd only just loaded the page!

Yeah as Hein said the backend is all C, we have small embedded custom server written by Andreas. That isn't going to change, so ideally it needs to be be someone who is ok with writing/modifying C. Though maybe a team of 2?

Also its worth nothing that "most" of what you need already exists and is provided by the JSON interface used by the existing UI, however it might require some extensions. There have been plans to extend the JSON APIs to be more complete to allow other integration with TVH without the need to use HTSP.

Hein's idea is an interesting one, but I'm not sure. If it can be done it might be worth looking at. But I think a standard grid view with scroll bars would be fine for most.

However whether this uses ExtJS or some custom javascript I'm not sure. Personally I see ExtJS as good for building "functional" sites, i.e. some basic menu's, dialogs and LOTS of very boring spreadsheet like grids. I don't think I've ever seen an extjs UI that didn't involve LOTS of basic grids/tables of data. But I'm not a webdev, so I'm very ignorant about such things.

Personally I quite like the way the sky TV guide site looks, although performance isn't always great. tv.sky.com/tv-guide

Adam

#6 Updated by Adam Sutton almost 5 years ago

Should also have pointed out, that yes we use a very out of date ExtJS lib (as noted be Hein). There are some thoughts on getting this upgraded as it's getting harder to support, and the newer libs do offer greater functionality. But it's not a trivial job to update.

However this UI does not necessarily have to use the same ExtJS library.

Also it would be good if whatever we do is compatible (or at least has a variant) that works well with mobile devices. I know we have native TVH apps for Android and iPhone, but it would still be nice if this was able to be used as well as an alternative.

#7 Updated by Meinaart - almost 5 years ago

I agree with Adam. I think ExtJS is not suitable for something like this. ExtJS is really good in creating online applications. Not in creating more interactive things like a cool EPG.

I made a small start with a simple EPG that talks to tvheadend via JSON calls. For now it shows the programs currently running and 5 hours ahead (just some arbritary number I choose). If I click on the program I see the description and I can choose to record the program if I want too (also via a JSON call).

For this quick test I used PHP to quickly filter the data serverside. But I think a pure javascript solution would be better. I am not sure how much time I am able to spend on this but would it be okay to use jQuery for creating an EPG that could be integrated in tvheadend later on?

Some ideas that pop in my head;
  • Make use of tags to filter favorite channels
  • Mark the current time with a line (and move this automatically)
  • Scroll horizontally for more hours
  • Scaleable timeframe (zoom in/out)
  • Colorcoding indicating how long a program is running already (now colors are random)
  • Use icons for genre information (if available)
  • Optional cronjob (PHP/Python/whatever) that collects metadata for shows in EPG/recorded programs with a crawler like YAMJ (and show RottenTomato/IMDB scores and possible even create automatic NFO files for tvheadend recordings), could also work on demand
  • Would be cool if this metadata also contained images so that you can show a more rich EPG interface
  • If available through metadata the option to mark certain actors as a favorite and automatically highlight shows/movies that one of your favorite actors has a role in
  • Integration with Sickbeard and CouchPotato so that you can grab all previous episodes of a certain tv show
  • Skinable via CSS
  • Mobile friendly
  • Option to access the EPG directly without going through the tvheadend backend. You need login/password for JSON access anyway.

I like the idea of zooming in to show more information about a show. But I think this would be a lot of work to get right. Making the stuff I mentioned above would be a nice start ;).

I am not that great in C but I am a professional webdeveloper that focus more on frontend interactive stuff. Like games, calculators, online product selectors, microsites and stuff like that. So creating an EPG fits right in my ally. Unfortunately I don't have a lot of time available for projects like this.

If I would like to contribute to tvheadend by creating an EPG would it be possible to work with the tvheadend developers to extend the JSON API?

#8 Updated by polini - over 4 years ago

Have a look at my mobile interface for Tvheadend:
https://github.com/polini/TvheadendMobileUI

It now includes an EPG timeline view.

#9 Updated by polini - over 4 years ago

#10 Updated by Adam Sutton over 4 years ago

This is exactly what I've been looking for. What is that written in? Looks like you've written the JS from scratch, you're not using a framework (jQuery etc..)?

Adam

#11 Updated by Adam Sutton over 4 years ago

Ah, just read the page, iUI, not heard of that one (but then I don't do UI dev so no surprise there).

Adam

#12 Updated by Gaƫtan Hardy over 4 years ago

very nice work. well done.

Just for me, I've install from repository ppa:adamsutton/tvheadend-beta and I've make a symbolic links to /usr/share/tvheadend/src/webui/static/mobile

so in order :

cd ~
mkdir src_tvheadend
cd srcvheadend
git clone git://github.com/polini/TvheadendMobileUI.git
sudo mkdir /usr/share/tvheadend/src/webui/static/mobile
sudo ln -s `pwd`/TvheadendMobileUI/mobile/ /usr/share/tvheadend/src/webui/static/

and on my iphone : I've had to add index.html to the url : http://ip:9981/static/mobile/index.html

It just missing a favicon.ico

Thanks.

#13 Updated by Joe Cool about 2 years ago

Is there any update on this?
any plans to include a nice new website in TVH?

the propose of poling is good, but no one seems to work on it anymore.

I would love to use TVH with such nice EPG.

#14 Updated by Jaroslav Kysela about 2 years ago

Nobody is working on this. But appearently, there are open source libraries around which can be used for this purpose like visjs.org - demo - http://visjs.org/examples/timeline/other/groupsPerformance.html .

#15 Updated by Poul Kalff about 2 years ago

Joe Cool wrote:

Is there any update on this?
any plans to include a nice new website in TVH?

the propose of poling is good, but no one seems to work on it anymore.

I would love to use TVH with such nice EPG.

But why not just use an external program? Kodi, for instance, has an excellent EPG-timeline. TVHeadend was always thought of as a backend, running on a server, right? And even if you run it on a Desktop computer, why not just install KODI on the same computer... Opening KODI is just as easy as, if not easier than, opening a web-page for tvheadend.....
It just makes more sense (at least to me) to have a TVHeadend be the server-part in a Client-Server-model, and rely on others to develop client-tools, such as EPG timeline.

#16 Updated by Joe Cool about 2 years ago

Poul Kalff wrote:

Joe Cool wrote:

Is there any update on this?
any plans to include a nice new website in TVH?

the propose of poling is good, but no one seems to work on it anymore.

I would love to use TVH with such nice EPG.

But why not just use an external program? Kodi, for instance, has an excellent EPG-timeline. TVHeadend was always thought of as a backend, running on a server, right? And even if you run it on a Desktop computer, why not just install KODI on the same computer... Opening KODI is just as easy as, if not easier than, opening a web-page for tvheadend.....
It just makes more sense (at least to me) to have a TVHeadend be the server-part in a Client-Server-model, and rely on others to develop client-tools, such as EPG timeline.

Why should one install a HTPC client software like KODI, if you only want to access the EPG webui from a PC, a tablet, a notebook or whatever?
I like KODI but for this purpose only it is much to heavy weight!

#17 Updated by Joe Cool about 2 years ago

Jaroslav Kysela wrote:

Nobody is working on this. But appearently, there are open source libraries around which can be used for this purpose like visjs.org - demo - http://visjs.org/examples/timeline/other/groupsPerformance.html .

Just a timeline is only a part of an EPG, but no a full solution.

I was thinking of something like the EPG functions of VDR-Live (which also include a timeline)

#18 Updated by Jaroslav Kysela about 2 years ago

Joe Cool wrote:

Jaroslav Kysela wrote:

Nobody is working on this. But appearently, there are open source libraries around which can be used for this purpose like visjs.org - demo - http://visjs.org/examples/timeline/other/groupsPerformance.html .

Just a timeline is only a part of an EPG, but no a full solution.

Sure, but it's one possible component.

I was thinking of something like the EPG functions of VDR-Live (which also include a timeline)

It would be really good to have a javascript programmer which can do it. The webui was mostly designed for the configuration.

#19 Updated by Ton VH about 1 year ago

Has there been any progress on a good EPG GUI?

#20 Updated by Jonathan Thomson about 1 year ago

I would love to see a more useful EPG view, I don't like being negative (especially about an excellent free product like TVH) but the current one is pretty bad :)

#21 Updated by Ton VH about 1 year ago

Me2

#22 Updated by saen acro about 1 year ago

Neutrino yWeb EPG Plus is open source.

 Y_EPG.js
 Y_EPG_Plus.yhtm

https://wiki.neutrino-hd.de/wiki/Neutrino:yWeb

#23 Updated by Ton VH about 1 year ago

But how can that be used?

#24 Updated by saen acro about 1 year ago

Ton VH wrote:

But how can that be used?

Need to be edited with adoption of TVH API

Also available in: Atom PDF