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 Dave H over 4 years ago
I know next to nothing about AngularJS but I see that Wikipedia says: "AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment. Version 1.7.x is on Long Term Support until July 1st 2021. After that date AngularJS will no longer be updated and Angular (2.0+) is suggested instead. "
So it seems like it may be more valuable both in terms of career value and the possible value of a new TVH web interface if it was written using Angular rather than AngularJS?
RE: AngularJS webinterface - Added by saen acro over 4 years ago
If app cannot work on
400mhz CPU with 64Mb ram and embedded DB
do not try all this fancy crap.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Dave H wrote:
I know next to nothing about AngularJS but I see that Wikipedia says: "AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment. Version 1.7.x is on Long Term Support until July 1st 2021. After that date AngularJS will no longer be updated and Angular (2.0+) is suggested instead. "
So it seems like it may be more valuable both in terms of career value and the possible value of a new TVH web interface if it was written using Angular rather than AngularJS?
Ok, didn't know that, guess I can learn Angular 2+ next, I guess..... Thanks, though
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
saen acro wrote:
If app cannot work on
400mhz CPU with 64Mb ram and embedded DB
do not try all this fancy crap.
"fancy crap"?
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Poul Kalff wrote:
saen acro wrote:
If app cannot work on
400mhz CPU with 64Mb ram and embedded DB
do not try all this fancy crap."fancy crap"?
TVH need to be independent APP not a framework with dependency's.
"embedded" is main keyword
Else better to make remote controlled interface via API
(Sorry if my comment seems harsh,
but I've come across coders who think the template is a site,
and totally don't understand how a web page works.)
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Ok, so in other words, you call my work 'fancy crapp', without knowing what it is, because you assume that I ' don't understand how a web page works.'?
If you don't want to help, feel free not to, but why do you even answer the question, then?
RE: AngularJS webinterface - Added by Martin Walter over 4 years ago
@Poul: First of all, many thanks for your interest in TVH and in improving it. I got used to the TVH interface over the years, but it certainly isn't very intuitive and there is clearly room for improvement. Many first-time and advanced users have had issues with it. I'm sure your attempt to improve things will be appreciated...
The point @Saen made about low-powered devices is important to know. There are a lot of people running TVH on all kind of SBCs and routers. Worthwhile knowing, not more, not less. I believe the rest of the discussion unfortunately got "lost in translation" somehow. Please don't feel discouraged.
Therefore, again, if you are interested in this project, by all means, PLEASE DO KEEP GOING. Your efforts will be much appreciated by many!
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Poul Kalff wrote:
Ok, so in other words, you call my work 'fancy crapp', without knowing what it is, because you assume that I ' don't understand how a web page works.'?
If you don't want to help, feel free not to, but why do you even answer the question, then?
Don't be disappointed with what I said, give us an example of your work.
Just keep in mind that this is not a website with LAMP behind.
Let me geve a example of realy compact and usefull web interface.
It run on 333mhz risc cpu 16 Mb ram and size less then 1 Megabyte
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Martin Walter wrote:
@Poul: First of all, many thanks for your interest in TVH and in improving it. I got used to the TVH interface over the years, but it certainly isn't very intuitive and there is clearly room for improvement. Many first-time and advanced users have had issues with it. I'm sure your attempt to improve things will be appreciated...
The point @Saen made about low-powered devices is important to know. There are a lot of people running TVH on all kind of SBCs and routers. Worthwhile knowing, not more, not less. I believe the rest of the discussion unfortunately got "lost in translation" somehow. Please don't feel discouraged.
Therefore, again, if you are interested in this project, by all means, PLEASE DO KEEP GOING. Your efforts will be much appreciated by many!
Thank you, Martin, for your encouragement. I do know that Saen's point is important, the problem is that he doesn't know what I'm trying to do, and still attacks me outright and for no reason at all. I never intended my work to be a new webinterface for the program, it would be insane to think that I can do that, since I CLEARLY state that I have no previous knowledge of Angular.... To me, this is only about learning something that I don't know.... and yes, I see now that I did in fact write that 'I've begun to build a new webinterface for tvheadend'.... I did mean, for myself.... not for the project... as a way of learning... I hate following tutorials. So, maybe you are right, that this is a case of 'lost in translation' :-) But still, it is outright idiotic to go about this as someone did. Even if what I make is crap, and it probably will be, someone else may see it and find ideas in it, or want to improve part of it, or want to make something better. That is how open source development is driven.
Someone named David-P made a PHP-webinterface for tvh, that I saw here somewhere, in the forums, and installed. It may not be very usable, but it is extremely impressive to me that he did it, and it prompted me to do the same, with AngularJS. He did a lot of work documenting the API, and I have used this excellent documentation, which I could find nowhere else, extensively. I would be happy if someone else could use something I made in this way. That is how open source development is driven.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
saen acro wrote:
Poul Kalff wrote:
Ok, so in other words, you call my work 'fancy crapp', without knowing what it is, because you assume that I ' don't understand how a web page works.'?
If you don't want to help, feel free not to, but why do you even answer the question, then?
Don't be disappointed with what I said, give us an example of your work.
Just keep in mind that this is not a website with LAMP behind.Let me geve a example of realy compact and usefull web interface.
It run on 333mhz risc cpu 16 Mb ram and size less then 1 Megabyte
Saen, you always seem to miss the plural 's' on verbs; It does not 'run' on 333mhz, it RUNS on 333 mhz, because in english, 3rd person is (mostly) conjugated with an s. But do not be sorry, because your english is (nor 'are') quite good otherwise, and this one conjugation is often the last thing that people get right! Keep up the good work, and your English will be perfect before you know it!
RE: AngularJS webinterface - Added by saen acro over 4 years ago
English is my third language (not tongue) of five. In comparison with other languages english is very poor on words for explanation.
Understand sentence not punctuations.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
May I ask (since we are way, WAY off topic anyway :-) what are your other languages? I can guess from your name that you are not english, but I have no idea where such a name has its origins.....?
I don't think that English is better or worse than any other language for explanations, it's just different.... All have bad and good qualities, that goes for spoken languages as well as for coding languages :-)
Also, my previous comment was not about your language...... ;-)
RE: AngularJS webinterface - Added by saen acro over 4 years ago
My name have 1:1 equivalent in Latin I use nickname in forum
So that we are not so far off topic,
still want to see some example of AngularJS interface of any app, with I can run on my PC
RE: AngularJS webinterface - Added by Dave Pickles over 4 years ago
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
Happy to help if I can, though all my knowledge is from reading the TVH source code and trial-and-error. My TVHadmin web front-end at https://github.com/dave-p/TVHadmin might also give you some clues...
RE: AngularJS webinterface - Added by Dave Pickles over 4 years ago
Re your difficulty in using the API, from a very quick look at AngularJS it seems that the $http service is just a wrapper around the javascript XMLHttpRequest object and so is subject to the same-origin policy. As mentioned in https://github.com/dave-p/TVH-API-docs/wiki/examples#javascript to work round this the script must be hosted on the TVH server.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Dave Pickles wrote:
Re your difficulty in using the API, from a very quick look at AngularJS it seems that the $http service is just a wrapper around the javascript XMLHttpRequest object and so is subject to the same-origin policy. As mentioned in https://github.com/dave-p/TVH-API-docs/wiki/examples#javascript to work round this the script must be hosted on the TVH server.
Hi David, thanks for writing back... Yes, I have already installed https://github.com/dave-p/TVHadmin, and it works quite easily. Like I said before, it was what inspired me to do the same, in order to try to learn AngularJS... I already know PHP well, have coded it professionally for many years, I also have quite good knowledge of JQuery, but that is quite different from Angular.... But it's fun to try to get stuff working, right? :-)
May I ask why you build https://github.com/dave-p/TVHadmin? Also for learning? It must have been a huge amount of work....
I have already read https://github.com/dave-p/TVH-API-docs/wiki/examples#javascript (many, many times, in fact ;-), but I cannot solve the problem, because tvheadend seems to completely ignore what is written in the CORS-field...... either that, or there is something I still don't understand, thus this request for help.... I agree with you that the $http service is a wrapper for an XMLHttpRequest, and this is what is blocked.
I agree that if the script were hosted on the TVH-server itself, the problem would be solved; this is how the existing webinterface works, by being reference in /extjs.html, in these two lines:
<link rel="stylesheet" type="text/css" href="redir/theme.css"/>
<script type="text/javascript" src="static/tvh.js.gz"></script>
It is exactly what I have done, one link for css and one for the javascript itself.... I have just run them from a remote server, for DEV. But I guess it should be possible to change this in the source code of tvh and then compile it in. Do you know the structure of the source well enough to know where exactly this is? I assume that the main file extjs.html could be overwritten, or a new one could be added, like angularjs_DEV.html......
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
saen acro wrote:
My name have 1:1 equivalent in Latin I use nickname in forum
So that we are not so far off topic,
still want to see some example of AngularJS interface of any app, with I can run on my PC
So, you are Bulgarian.... and then Russian will be your second language, of course, and English is the third. What does this sentence mean ---> "My name have 1:1 equivalent in Latin"
RE: AngularJS webinterface - Added by Dave Pickles over 4 years ago
May I ask why you build https://github.com/dave-p/TVHadmin? Also for learning? It must have been a huge amount of work....
For many years before discovering TVheadend I used vdr, which comes with a web front-end (a humongous Perl script) called VDRadmin. It wasn't too hard to take the HTML output from VDRadmin and reverse-engineer a set of PHP scripts to produce the same output from TVheadend.
Sorry I don't understand why you can't put your code into /usr/share/tvheadend/src/webui/static on the TVH server and then run it as http://user:[email protected]:9981/static/... - that's how I tested my little Javascript example in the docs.
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Dave Pickles wrote:
Sorry I don't understand why you can't put your code into /usr/share/tvheadend/src/webui/static on the TVH server and then run it as http://user:[email protected]:9981/static/... - that's how I tested my little Javascript example in the docs.
Becoue need PHP installed, JS work on user browser.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Dave Pickles wrote:
May I ask why you build https://github.com/dave-p/TVHadmin? Also for learning? It must have been a huge amount of work....
For many years before discovering TVheadend I used vdr, which comes with a web front-end (a humongous Perl script) called VDRadmin. It wasn't too hard to take the HTML output from VDRadmin and reverse-engineer a set of PHP scripts to produce the same output from TVheadend.
Sorry I don't understand why you can't put your code into /usr/share/tvheadend/src/webui/static on the TVH server and then run it as http://user:[email protected]:9981/static/... - that's how I tested my little Javascript example in the docs.
But how would that work? it is served up as static content, it wouldn't run...? What example did you test how? I'm not following....?
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
oh my God, you are right, it is not blocked if I move the whole DEV-environment to /usr/share/tvheadend/src/webui/static!? Sorry, I misunderstood before, but you are right that it can be done in the way you describe on wikipedia... So content in static/ is served up from the tvheadend server, then, and is thus considered the same 'origin'?
RE: AngularJS webinterface - Added by Dave H over 4 years ago
Perhaps you haven't explained your question very well?
You make it sound like you don't understand the difference between the machine where the code is stored (served from) and the machine where it runs. As Saen mentioned.
edit: cross-posted with your reply.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Ahh, yes, it is served up on port 9981 now, not by apache, which does the difference. GENIOUS, Dave, thanks a million ;-)
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Poul Kalff when we will se some example of AngularJS webinterface
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Dave H wrote:
Perhaps you haven't explained your question very well?
You make it sound like you don't understand the difference between the machine where the code is stored (served from) and the machine where it runs. As Saen mentioned.
edit: cross-posted with your reply.
"the machine where the code is stored (served from) and the machine where it runs" ... its the same machine, I can assure you of that! It is two different WEBSERVERS, so if that's what you mean, I agree. I just didn't know that tvh would serve static content from /static, had I know that, I would not have had this problem at all. I know you wrote it in your documentation, but that was for curl, AFAI can rememeber, which is an entirely different matter.
Didn't understand at all what Saen's comment had to do with anything...PHP? I don't use PHP, so what does that have to do with anything?