Project

General

Profile

AngularJS webinterface

Added by Poul Kalff 5 months ago

Well, so I lost my job to the stupid virus (used to develop software for the Hotel industry....), and now I've thought that I'd use the abundance of free time to learn AngularJS. Thus, I've begun to build a new webinterface for tvheadend, since I prefer to learn from 'real' cases rather than tutorials. However, being that I am an absolute beginner at Angular, I have some difficulties... foremost of all, I communicate with tvheadend throuh its API, since it seems that this is how the current webfrontend works (correct?), and this causes problems, since all calls to the API are being blocked..... apparently by some safety mechanism in angularjs that does not accept calls to other domains. Actually, my development files are on the same server (run via apache2), but not on the same port and not on the same 'domain', I guess.... So, I download the data I need, for EPG, for instance, and save it to a file, which I can then load up through angularjs. Not practical, and not elegant.... but my only option.
Can anyone help me? I know that I can use CORS authorization to get around this issue, and I've tried to enable this through tvheadend webinterface CONFIGURATION -> GENERAL -> BASE -> HTTP settings, but I can't get it to work.... I've tried putting in *, my IP, my IP:PORT, etc....... keeps getting blocked, dunno why?

P.S. I am using, to a great extend, the API documentation made by Dave Pickles, so thanks for that..... if you see this, I'd like very much to talk to you.... couldn't find contact info anywhere


Replies (103)

RE: AngularJS webinterface - Added by Dave Pickles 3 months ago

You can get the version number using api/serverinfo. The build date is probably baked into the server binary.

$ curl http://user:p[email protected]:9981/api/serverinfo | jq {
"sw_version": "4.3-1875~g1c67c04c8-dirty",
"api_version": 19,
"name": "Tvheadend",
"webroot": "",
"capabilities": [
"tvadapters",
"trace"
]
}

RE: AngularJS webinterface - Added by Poul Kalff 3 months ago

Dave Pickles wrote:

You can get the version number using api/serverinfo. The build date is probably baked into the server binary.

$ curl http://user:[email protected]:9981/api/serverinfo | jq {
"sw_version": "4.3-1875~g1c67c04c8-dirty",
"api_version": 19,
"name": "Tvheadend",
"webroot": "",
"capabilities": [
"tvadapters",
"trace"
]
}

Thanks, Dave, I had a feeling that you would be the one to know this ;-)

RE: AngularJS webinterface - Added by saen acro 3 months ago

@ Poul Kalff
Challenge for you.
there is a ticket
https://tvheadend.org/issues/3992

Smart TV can act as test machine
720p 1080p 4K resolutions.

RE: AngularJS webinterface - Added by Poul Kalff 3 months ago

saen acro wrote:

@ Poul Kalff
Challenge for you.
there is a ticket
https://tvheadend.org/issues/3992

Smart TV can act as test machine
720p 1080p 4K resolutions.

I'm not sure that I completely understand the challenge? Obviously, any UI should work on any given screen size, and I am aware of that, if that is what you mean?

RE: AngularJS webinterface - Added by saen acro 3 months ago

Poul Kalff wrote:

saen acro wrote:

@ Poul Kalff
Challenge for you.
there is a ticket
https://tvheadend.org/issues/3992

Smart TV can act as test machine
720p 1080p 4K resolutions.

I'm not sure that I completely understand the challenge? Obviously, any UI should work on any given screen size, and I am aware of that, if that is what you mean?

Tvheadend STB UI (eliminating Kodi and derivatives)
end user portal controlled by remote control of TV
https://oceanbluesoftware.com/services/ui-design/

https://www.youtube.com/user/IPTVMiddleware/videos
user to enter url
UI to ask his user/pass
and user start to use ;)

RE: AngularJS webinterface - Added by Poul Kalff 3 months ago

I've been working on the sidebar and the icons, and most importantly, on the screen adapting to different sizes and in different browsers, so here is a short demo of that.

RE: AngularJS webinterface - Added by Martin Walter 3 months ago

This is looking good, Poul! :-)

RE: AngularJS webinterface - Added by Luka Karinja 3 months ago

Tvheadend STB UI (eliminating Kodi and derivatives)
end user portal controlled by remote control of TV

This would be really cool. 99.9% of NOT Android TVs ( like LG WebOs) supports html5 so it would be instantly supported on a lot of "Smart TVs"
Please Poul try to incorporate playback in it too ;)

RE: AngularJS webinterface - Added by saen acro 3 months ago

Luka Karinja wrote:

Tvheadend STB UI (eliminating Kodi and derivatives)
end user portal controlled by remote control of TV

This would be really cool. 99.9% of NOT Android TVs ( like LG WebOs) supports html5 so it would be instantly supported on a lot of "Smart TVs"
Please Poul try to incorporate playback in it too ;)

Yes agree, better to use user interface for end users and separate control panel for administrators.

to be more correct smart TV's use not exactly full HTML5 but more HBBTV specs
https://github.com/mitxp/HbbTV-Testsuite (use pc browser for test https://github.com/karl-rousseau/HybridTvViewer)
https://github.com/sunglim/HbbTV_Application_Template
https://github.com/HbbTV-Association/ReferenceApplication

RE: AngularJS webinterface - Added by Luka Karinja 3 months ago

for LG WebOS is enough to have a html5 <video> tag to be able to play live tv. it would need to use transcoding probably
http://webostv.developer.lge.com/api/web-api/mediaoption-parameter/
WebOS just uses a normal Chromium or Webkit browser, so everything that works in Chrome works on LG Smart TVs
http://webostv.developer.lge.com/discover/specifications/web-engine/

Amino IPTV players have also full HTML5 support

RE: AngularJS webinterface - Added by saen acro 3 months ago

Luka Karinja wrote:

for LG WebOS is enough to have a html5 <video> tag to be able to play live tv. it would need to use transcoding probably
http://webostv.developer.lge.com/api/web-api/mediaoption-parameter/
WebOS just uses a normal Chromium or Webkit browser, so everything that works in Chrome works on LG Smart TVs
http://webostv.developer.lge.com/discover/specifications/web-engine/

Amino IPTV players have also full HTML5 support

Limited embedded port but yes Mozilla inside ;)
Badly browser use 1280x720 resolution even on 4K TV
Need framework app.

Skeleton of STB project
https://sourceforge.net/p/simpleiptv/code/HEAD/tree/

Someone writing applications for smart TVs should be involved in the project ;)

RE: AngularJS webinterface - Added by Poul Kalff 3 months ago

Another screencast, this time for the DVR-section.
It has no functionality yet, other than displaying and sorting the records.

It really is incredible fun to learn how Angular does this, the page currently has 25 lines of code in the controller and not many more in the template-section, so quite effective.... once you figure it out ;-)

RE: AngularJS webinterface - Added by saen acro 3 months ago

https://material.angularjs.org/1.1.9/demo/sidenav
last example "Disable Close Events"


With program use for recording, second screen is not needed to be recorded.
https://launchpad.net/kazam

RE: AngularJS webinterface - Added by Poul Kalff 3 months ago

saen acro wrote:

https://material.angularjs.org/1.1.9/demo/sidenav
last example "Disable Close Events"

What about it?

With program use for recording, second screen is not needed to be recorded.
https://launchpad.net/kazam

I don't use Kazam, I use the build in recorder, it doesn't have an option to record just one screen.

RE: AngularJS webinterface - Added by saen acro 3 months ago

Poul Kalff wrote:

saen acro wrote:

https://material.angularjs.org/1.1.9/demo/sidenav
last example "Disable Close Events"

What about it?

Use this for side menu no need to see it all time.

With program use for recording, second screen is not needed to be recorded.
https://launchpad.net/kazam

I don't use Kazam, I use the build in recorder, it doesn't have an option to record just one screen.

it's time to install it ;)

RE: AngularJS webinterface - Added by Poul Kalff 3 months ago

saen acro wrote:

Poul Kalff wrote:

saen acro wrote:

https://material.angularjs.org/1.1.9/demo/sidenav
last example "Disable Close Events"

What about it?

Use this for side menu no need to see it all time.

Fair enough, but I disagree. The sidemenu collapsed is 60 pixels wide, so it takes up very little space, and with it being there, you can always change pages, as long as you remember the icons

With program use for recording, second screen is not needed to be recorded.
https://launchpad.net/kazam

I don't use Kazam, I use the build in recorder, it doesn't have an option to record just one screen.

it's time to install it ;)

Yeah, you are probably right.... ;-)

RE: AngularJS webinterface - Added by saen acro 3 months ago

Ok I have 4K screen on my laptop 2k on tablet and phone
but not all user use 100 DPI screens
1366x768 is still mass laptop screen

RE: AngularJS webinterface - Added by Poul Kalff 2 months ago

Perhaps you can help me again, David Pickles? I'm missing the abiltiy to enable/disable a schedueld recording. I use this feauture often myself, so I would like to include it, but I cannot find anything in your documentation about how to do this? I have tried POST'ing

var url = '/api/dvr/entry/disable';
var url = '/api/dvr/entry/enable';
var url = '/api/dvr/entry/toggle';

just guessing.... but they all recieve 404.
So, are there methods to do this, or do you know how it is done?
All dvr entries have the feature "enabled": true, and I can change it easily enough, but is it possible to save the data back through the API?

RE: AngularJS webinterface - Added by Dave H 2 months ago

dvr/entry/cancel ?

RE: AngularJS webinterface - Added by Dave Pickles 2 months ago

There's no explicit API method to modify a recording.

I suppose it might be possible to use api/idnode/load to get the details of a scheduled recording (given the uuid), then write back a modified version using api/idnode/save. However I couldn't quickly make it work, and I don't want to run the risk of breaking my daily-use TVH...

RE: AngularJS webinterface - Added by Poul Kalff 2 months ago

Dave H wrote:

dvr/entry/cancel ?

dvr/entry/cancel is cancel, meaning it is gone and not seen anymore, and it works fine. But disable means it is still there and can be enabled anytime again..... I personally use disable a lot for auto-recordings, when it matches several reruns of programs that you don't want to record... Danish TV usually show the same program two or three times, for whatever reason :-). I would think that if i CANCEL the rerun, it will be made again by the automatic timer, but I am not sure....

RE: AngularJS webinterface - Added by Poul Kalff 2 months ago

Dave Pickles wrote:

There's no explicit API method to modify a recording.

I suppose it might be possible to use api/idnode/load to get the details of a scheduled recording (given the uuid), then write back a modified version using api/idnode/save. However I couldn't quickly make it work, and I don't want to run the risk of breaking my daily-use TVH...

Yeah, I thought that too, that the idnode must be how it is done. It can be done through the KODI tvheadend addon too, so I'll see if I can find it there and replicate it

RE: AngularJS webinterface - Added by Dave H 2 months ago

dvr/entry/cancel is cancel, meaning it is gone and not seen anymore, and it works fine. But disable means it is still there and can be enabled anytime again..... I personally use disable a lot for auto-recordings, when it matches several reruns of programs that you don't want to record... Danish TV usually show the same program two or three times, for whatever reason :-). I would think that if i CANCEL the rerun, it will be made again by the automatic timer, but I am not sure....

Ah yes, sorry. Doesn't setting the autorec's Duplicate handling to something other than Record all solve your problem?

RE: AngularJS webinterface - Added by Poul Kalff 2 months ago

Dave H wrote:

dvr/entry/cancel is cancel, meaning it is gone and not seen anymore, and it works fine. But disable means it is still there and can be enabled anytime again..... I personally use disable a lot for auto-recordings, when it matches several reruns of programs that you don't want to record... Danish TV usually show the same program two or three times, for whatever reason :-). I would think that if i CANCEL the rerun, it will be made again by the automatic timer, but I am not sure....

Ah yes, sorry. Doesn't setting the autorec's Duplicate handling to something other than Record all solve your problem?

Well, to be honest, I've never know that 'Duplicate handling' existed.... but I've just found it now, after you mentioned it, and yes, I'm sure that it would do the trick!
So, thanks for that, Dave, I sure learn new things all the time :-)

However, I still think it is a good thing to be able to disable a recording without removing it, and I'm very close to getting inode read/write working, just have to go through a shitload of data when reading it that way, but it is quite easy otherwise. I'll need to write a function for it anyway if I want to enabled editing of entries

RE: AngularJS webinterface - Added by Dave H 2 months ago

Well, to be honest, I've never know that 'Duplicate handling' existed.... but I've just found it now, after you mentioned it, and yes, I'm sure that it would do the trick!
So, thanks for that, Dave, I sure learn new things all the time :-)

Glad I could eventually contribute something positive.

However, I still think it is a good thing to be able to disable a recording without removing it, and I'm very close to getting inode read/write working, just have to go through a shitload of data when reading it that way, but it is quite easy otherwise. I'll need to write a function for it anyway if I want to enabled editing of entries

I agree. I had had a quick look at the API code and it seems fairly well organized, so adding a function there to extend the API seems like a good solution to me.

(51-75/103)