Project

General

Profile

AngularJS webinterface

Added by Poul Kalff over 4 years 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 (108)

RE: AngularJS webinterface - Added by Poul Kalff about 4 years 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...

@Dave Pickles
Well, luckily I could quickly make it work, and I broke nothing :-) Do you want the data to include on your documentation? It took a lot of trial and error, as you know, to figure out the format that tvheadend wants, since any erroneous format results simply in 'no, try again' from the server :-D However, once figured out it is quite simple, so perhaps a good idea to preserve the knowledge for those who come after me?

By the way, out of curiosity, what were you afraid to break? The server just discards anything it doesn't like, so what are the risks? The worst I have experiences is a 'Time Missed'-error, if I have written back valid, but pre-dated data to the idnode

RE: AngularJS webinterface - Added by Dave Pickles about 4 years ago

By the way, out of curiosity, what were you afraid to break?

The idnode system is a kind of database, and without the schema it's hard to tell if the data in one table is referenced somewhere else.

In my experiments I used api/idnode/load to get the recording details, then tried to write back the entire JSON structure using api/idnode/save. That didn't work, but just sending the 'uuid' and 'enabled' values did.

I'll try to add more explanation on how to use idnode/save.

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

@David Pickles:
So, here is an example of a data-node that can be written back to the inode:

node: "{
"enabled": true,
"disp_title": "SPARKMIG",
"disp_extratext": "SPARKMIG",
"channel": "86b21fd7a09526b72f923611171f2482",
"start": 1597825200,
"stop": 1597825800,
"comment": "SPARKMIG",
"episode_disp": "SPARKMIG",
"start_extra": "666",
"stop_extra": "666",
"pri": 0,
"config_name": "1d576f3623710fd83f2d68e114e3329b",
"owner":" klf",
"creator": "klf",
"removal": 183,
"retention": 0,
"uuid": "0bedeb595e08cc6543f827571b6d5eff"
}

Any or all of the key/value-pairs can be removed, except for the last, uuid, since we must know where to put our data. Also, which is not obvious (at least to me) from the documentation, it MUST be "x-www-form-urlencoded", not JSONed, even though all replies will be JSON-formatted:
I write the headers:
var headers = {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}};
and I use stringify to tranlate the data:
var rawDataEncoded = "node=" + encodeURIComponent(JSON.stringify(rawData));

so, the data in the example will take this form (rawData is the above shown node in an array):
node=%7B%22enabled%22%3Atrue%2C%22disp_title%22%3A%22SPARKMIG%22%2C%22disp_extratext%22%3A%22SPARKMIG%22%2C%22channel%22%3A%2286b21fd7a09526b72f923611171f2482%22%2C%22start%22%3A1597825200%2C%22stop%22%3A1597825800%2C%22comment%22%3A%22SPARKMIG%22%2C%22episode_disp%22%3A%22SPARKMIG%22%2C%22start_extra%22%3A%22666%22%2C%22stop_extra%22%3A%22666%22%2C%22pri%22%3A0%2C%22config_name%22%3A%221d576f3623710fd83f2d68e114e3329b%22%2C%22owner%22%3A%22klf%22%2C%22creator%22%3A%22klf%22%2C%22removal%22%3A183%2C%22retention%22%3A0%2C%22uuid%22%3A%220bedeb595e08cc6543f827571b6d5eff%22%7D

It is quite simple, actually, but it is a BITCH if you don't know it, so I thought perhaps a good thing to get into the Docs...?

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

So, again an update, after a long summer....
I have now finally completed the DVR/Timers-section. My design aim is to get as much into as few screens/tabs as possible, i find the old design hopelessly divided into sections that people (or at least I) never open. Furthermore, I find many of the options, for example when adding a new timer, as unnecessary, so for now I have added only the ones that are at least theoretically usable (What the hell is "Category 1 (selection):" or "Star rating:" usable for?)
Well, I thought maybe a very lowlevel, textedit of the whole idnode for that, if anyone really wants to fiddle with that... or just use the old interface, I guess.
Also, I have disabled stuff that seems dumb to me, for instance, it is possible in the old interface to edit a timer and change the channel.... who does that? Remove it an make a new recording if you want a different channel...?
Well, anyway, here is the rather short video (couldn't get kazam to work, it just records black, sorry...)

The demo shows just the interface and the ability to add and edit recordings and timers, disable/enable, sort, filter, etc... just the simple things. I don't have too many recordings, but if you have many, the filter works both on title and type of recording. I have added no filter on timers, since I guess people only have quite few of those, please correct me if I'm wrong.

So, as always, let me know if you have any comments

demo.mkv (3.78 MB) demo.mkv

RE: AngularJS webinterface - Added by Dave H about 4 years ago

Poul Kalff wrote:

So, as always, let me know if you have any comments

Sorry, but I have no idea what I'm looking at in that video, let alone expressing an opinion as to whether it's good or bad. It would need to be a lot larger to allow me to read it. But more fundamentally, a video is not a good way to demonstrate an interface IMHO. A mockup of the interface is much, much better; along with some documentation that explains it.

RE: AngularJS webinterface - Added by saen acro about 4 years ago

Dave H wrote:

Poul Kalff wrote:

So, as always, let me know if you have any comments

Sorry, but I have no idea what I'm looking at in that video, let alone expressing an opinion as to whether it's good or bad. It would need to be a lot larger to allow me to read it. But more fundamentally, a video is not a good way to demonstrate an interface IMHO. A mockup of the interface is much, much better; along with some documentation that explains it.

Poul Kalff not learn how to record one screen only ;)

I still not get idea to make Admin UI "Candy style", beter to make STB UI to remove need of external middleware.

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

Dave H wrote:

Poul Kalff wrote:

So, as always, let me know if you have any comments

Sorry, but I have no idea what I'm looking at in that video, let alone expressing an opinion as to whether it's good or bad. It would need to be a lot larger to allow me to read it. But more fundamentally, a video is not a good way to demonstrate an interface IMHO. A mockup of the interface is much, much better; along with some documentation that explains it.

Ok, duly noted. It IS irritating that the video records both screens. I'm not gonna do a mockup, though, so take it or leave it

RE: AngularJS webinterface - Added by Flole Systems about 4 years ago

Maybe I can tell you a case where it's helpful to change the channel: When the non-HD channel is selected and you want to record the HD one instead.

So you are not using the current way of defining the settings in the code? When a new setting is added it needs to be added to your code aswell?

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

saen acro wrote:

Dave H wrote:

Poul Kalff wrote:

So, as always, let me know if you have any comments

Sorry, but I have no idea what I'm looking at in that video, let alone expressing an opinion as to whether it's good or bad. It would need to be a lot larger to allow me to read it. But more fundamentally, a video is not a good way to demonstrate an interface IMHO. A mockup of the interface is much, much better; along with some documentation that explains it.

Poul Kalff not learn how to record one screen only ;)

I still not get idea to make Admin UI "Candy style", beter to make STB UI to remove need of external middleware.

I am not sure I understand what you are saying, you really need to learn english.... What does 'candy style' mean? What does 'stb ui' mean?

RE: AngularJS webinterface - Added by Dave Pickles about 4 years ago

What the hell is "Category 1 (selection):" or "Star rating:" usable for?

Some EPG providers use more fine-grained categories for programmes than the EIT Content Descriptor. These "Category selection" fields allow free-text filtering of programme type and content. Similarly some EPG providers include review ratings.

Is your GitHub repo up-to-date?

RE: AngularJS webinterface - Added by saen acro about 4 years ago

Poul Kalff wrote:

I am not sure I understand what you are saying, you really need to learn english.... What does 'candy style' mean? What does 'stb ui' mean?

Desigin you do is "Candy style"
Desigin without exact positions and strange colors.

What is "STB UI" google it, I give example few post up

saen acro wrote:

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 Dave H about 4 years ago

saen acro wrote:

Poul Kalff wrote:

I am not sure I understand what you are saying, you really need to learn english.... What does 'candy style' mean? What does 'stb ui' mean?

Desigin you do is "Candy style"
Desigin without exact positions and strange colors.

Sorry, but I for one still don't know what Candy style means, but I do understand what a STB UI is.

RE: AngularJS webinterface - Added by saen acro about 4 years ago

The look you created is "Candy style"
I'm wondering how desiginer create some visual style but do not khow what style it is.
Maybe it's time to read more about "web design trends"

RE: AngularJS webinterface - Added by Dave H about 4 years ago

saen acro wrote:

The look you created is "Candy style"
I'm wondering how desiginer create some visual style but do not khow what style it is.
Maybe it's time to read more about "web design trends"

Thanks but I'd appreciate a link instead of vague hand-waving. I'm not a web designer and have no intention to become one, but I'd still like to understand what you're discussing.

RE: AngularJS webinterface - Added by Flole Systems about 4 years ago

saen acro wrote:

I'm wondering how desiginer create some visual style but do not khow what style it is.

Assuming that you have a garden and just put some plants in there in whatever way you like it or in a way that you think makes most sense, do you automatically know how that style is called that you created? For non-professionals/hobbyists that is usually fine since it's done for fun and there isn't a specification saying "do x in the style of y using z".

RE: AngularJS webinterface - Added by saen acro about 4 years ago

Flole Systems wrote:

saen acro wrote:

I'm wondering how desiginer create some visual style but do not khow what style it is.

Assuming that you have a garden and just put some plants in there in whatever way you like it or in a way that you think makes most sense, do you automatically know how that style is called that you created? For non-professionals/hobbyists that is usually fine since it's done for fun and there isn't a specification saying "do x in the style of y using z".

There is simple definitions
Practical Unpractical with some sub variations.
If you make cars with three tires in one side and only one on other,
or if each tire is with different size, is this mean that viracle will now move or this mean its not practical in a dayly usage?

/voting pools not enabled on platform, users feedback is important for developer's /

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

Dave Pickles wrote:

What the hell is "Category 1 (selection):" or "Star rating:" usable for?

Some EPG providers use more fine-grained categories for programmes than the EIT Content Descriptor. These "Category selection" fields allow free-text filtering of programme type and content. Similarly some EPG providers include review ratings.

Alright, well, the problem here is that I don't really understand what you are saying.... not beccause you are not clear, but because I simply don't understand the terms very well.... I don't know what an EIT Descriptor even is. It is problematic to anybody, I guess, to make a frontend for software that he or she doesn't know... I accept 100% that you are right in what you say, I just don't know what to do with it. I guess I have to just do it as I best can, and the stuff I miss can be fixed later on....?

Is your GitHub repo up-to-date?

Oh, sorry, no, I had not pushed latest commit, I have now.

RE: AngularJS webinterface - Added by saen acro about 4 years ago

Poul Kalff wrote:

Dave Pickles wrote:

What the hell is "Category 1 (selection):" or "Star rating:" usable for?

Some EPG providers use more fine-grained categories for programmes than the EIT Content Descriptor. These "Category selection" fields allow free-text filtering of programme type and content. Similarly some EPG providers include review ratings.

Alright, well, the problem here is that I don't really understand what you are saying.... not beccause you are not clear, but because I simply don't understand the terms very well.... I don't know what an EIT Descriptor even is. It is problematic to anybody, I guess, to make a frontend for software that he or she doesn't know... I accept 100% that you are right in what you say, I just don't know what to do with it. I guess I have to just do it as I best can, and the stuff I miss can be fixed later on....?

https://www.etsi.org/deliver/etsi_en/300400_300499/300468/01.04.01_60/en_300468v010401p.pdf
Table 26: Content_nibble level 1 and 2 assignments

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

Flole Systems wrote:

Maybe I can tell you a case where it's helpful to change the channel: When the non-HD channel is selected and you want to record the HD one instead.

But still, wouldn't it make sense, in that case, to just make a new timer? I mean, does it happen often enough that it makes sense? Well, anyway, it is very easy to add the ability to change a channel, so I'll do it, I just thought it to be an odd thing to have, since in my head, a timer is logically bound to a channel.....

So you are not using the current way of defining the settings in the code? When a new setting is added it needs to be added to your code as well?

I am not quite sure, really..... since I don't know what the 'current way' is :-) I build everything from scratch, and communicate with tvheadend 100% through API's. I do not use anything from the current UI at all, if that is what you mean? If you delete the extJS-library from the project, my interface would still work.... not because I don't like extJs, but because I don't know how to interface with it, so in that way, yes, every single option that I add must be made up from scratch, at least if I haven't made som code before that I can reuse. I chose from the beginning not to use a template or anything, because I started this project as a learning project, in order to learn Angular.

Please remember, I have only two ways of knowing what to do; by using Davids' documentation, whithout which I would still be at square one, and to use Firebug to see how the old interface sends and receives requests from the program. Furthermore, I know how I use tvheadend, since I have been using it for years, and I am very much impressed with it, always has been, but I have no idea at all on how other people use it...... for instance, I have never had more than one or two timers at a time, so I have made no filter for timers....... but does other people have hundreds of timers? If so, they would probably need a filter for timers, but I have no idea if that is the case. I am just guessing that they dont.
I'm not whinning, I hope, I still find it fun to do this, and learn form doing it, but I'm just saying that I am really in the dark sometimes on how to design things. I use my own interface to manage recordings and everything in tvheadend, from my tablet, and it is very, very good at that... because that is what it is designed to do. Obviously, a UI should not be designed by 1 person, based on the needs of 1 person, but that is what I have to work with.

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

saen acro wrote:

Poul Kalff wrote:

Dave Pickles wrote:

What the hell is "Category 1 (selection):" or "Star rating:" usable for?

Some EPG providers use more fine-grained categories for programmes than the EIT Content Descriptor. These "Category selection" fields allow free-text filtering of programme type and content. Similarly some EPG providers include review ratings.

Alright, well, the problem here is that I don't really understand what you are saying.... not beccause you are not clear, but because I simply don't understand the terms very well.... I don't know what an EIT Descriptor even is. It is problematic to anybody, I guess, to make a frontend for software that he or she doesn't know... I accept 100% that you are right in what you say, I just don't know what to do with it. I guess I have to just do it as I best can, and the stuff I miss can be fixed later on....?

https://www.etsi.org/deliver/etsi_en/300400_300499/300468/01.04.01_60/en_300468v010401p.pdf
Table 26: Content_nibble level 1 and 2 assignments

concerning "Candy style":
You cannot just invent an expression and assume that people know what you mean. That is how a language works. I accept that you don't like my design, you have said that many, many times, but why don't you just ignore it, then?
No-one forces you to use it, like it or comment on it.

concerning STB UI":
Yes, I remember now that you talked about it before, but that's not what I am making, so I don't see the relevance of talking about it?

concerning "Table 26":
I could probably find out what an EIT Descriptor is, if I wanted to, by myself, since I am not an idiot (although, feel free to disagree, obviously ;-)), but you are missing my point, so let me put it more plainly: I don't know how everything works and how it is used by people, and therefore it is difficult to design a UI for it.

RE: AngularJS webinterface - Added by saen acro about 4 years ago

Poul Kalff wrote:

concerning "Table 26":
I could probably find out what an EIT Descriptor is, if I wanted to, by myself, since I am not an idiot (although, feel free to disagree, obviously ;-)), but you are missing my point, so let me put it more plainly: I don't know how everything works and how it is used by people, and therefore it is difficult to design a UI for it.

If you read topic from begining


https://github.com/inspace-io/INSElectronicProgramGuideLayout

Where do you thing colors come?

https://tvheadend.org/boards/5/topics/41607

RE: AngularJS webinterface - Added by Poul Kalff about 4 years ago

David P, I have made a fix for the thing with the missing Icons, could you please try it out for me?

RE: AngularJS webinterface - Added by Dave Pickles about 4 years ago

Yes that works.

RE: AngularJS webinterface - Added by Bernhard Berger about 4 years ago

Just seeing this.

I started my own version of a new TVH-UI last year based on Vue and Vuetify, but life forced me to take a timeout on developing this any further..

I have a working idnode "debugging" interface (readonly, no writing, but I'm displaying live schema data for every idnode available), working websocket communication and a way to log in.

It's in a bit of an abysmal state as I crashed my laptop last year which lost me a full weekend of refactoring, but I'll quickly publish what I have - maybe it helps someone.

(76-100/108)