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 over 4 years ago
saen acro wrote:
Poul Kalff when we will se some example of AngularJS webinterface
I thought you hated the idea?
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Poul Kalff wrote:
saen acro wrote:
Poul Kalff when we will se some example of AngularJS webinterface
I thought you hated the idea?
https://github.com/inspace-io/INSElectronicProgramGuideLayout
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
I tried to attach a screencast, but it dosen't seem to be accepted... weird
Ohh, there we are, I have to write text, apparently
RE: AngularJS webinterface - Added by Mark Clarkstone over 4 years ago
Poul Kalff wrote:
I tried to attach a screencast, but it dosen't seem to be accepted... weird
Ohh, there we are, I have to write text, apparently
I quite like that, nice and simple. I would use a different font though.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Mark Clarkstone wrote:
Poul Kalff wrote:
I tried to attach a screencast, but it dosen't seem to be accepted... weird
Ohh, there we are, I have to write text, apparentlyI quite like that, nice and simple. I would use a different font though.
Thanks for the feedback, Mark.
Why would you use a different font? I haven't chosen the one used for any specific reason..... at least not that I can remember.
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Poul Kalff wrote:
I tried to attach a screencast, but it dosen't seem to be accepted... weird
Ohh, there we are, I have to write text, apparently
Isn't this more important then to see second screen with Kodi
test this UI on 1366x768 or even 540х960
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
saen acro wrote:
Poul Kalff wrote:
I tried to attach a screencast, but it dosen't seem to be accepted... weird
Ohh, there we are, I have to write text, apparentlyIsn't this more important then to see second screen with Kodi
test this UI on 1366x768 or even 540х960
No
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
@Dave Pickles: I cannot get this function to work; "/api/dvr/entry/stop" ( https://github.com/dave-p/TVH-API-docs/wiki/Dvr#dvrentrystop )
Do you know what I am doing wrong? The api returns code 200, so you'd thought everything is ok, but running recording is not stopped. I use 'dvr/entry/cancel' to stop running recording, works ok, but I'm just wondering....
RE: AngularJS webinterface - Added by Dave Pickles over 4 years ago
I cannot get this function to work; "/api/dvr/entry/stop" ( https://github.com/dave-p/TVH-API-docs/wiki/Dvr#dvrentrystop )
Do you know what I am doing wrong? The api returns code 200, so you'd thought everything is ok, but running recording is not stopped. I use 'dvr/entry/cancel' to stop running recording, works ok, but I'm just wondering....
Strange. I use that function to stop a running timer - see https://github.com/dave-p/TVHadmin/blob/master/timers.php#L10
Looking through the TVH code it seems the only way the function can return an error is if the uuid is not valid - none of the code for stopping the recording returns any status information so is assumed to have succeeded.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Dave Pickles wrote:
I cannot get this function to work; "/api/dvr/entry/stop" ( https://github.com/dave-p/TVH-API-docs/wiki/Dvr#dvrentrystop )
Do you know what I am doing wrong? The api returns code 200, so you'd thought everything is ok, but running recording is not stopped. I use 'dvr/entry/cancel' to stop running recording, works ok, but I'm just wondering....
Strange. I use that function to stop a running timer - see https://github.com/dave-p/TVHadmin/blob/master/timers.php#L10
Looking through the TVH code it seems the only way the function can return an error is if the uuid is not valid - none of the code for stopping the recording returns any status information so is assumed to have succeeded.
Well, thanks for checking it for me. I guess that explains why it returns 200... even though something is amiss. I cannot see what I do different than you, only thing is I check on dvrstatus to determine which command to use, whereas you check the time..... shouldn't matter, right? Here is my function, if you are interested (checking of the status is outside this function):
// NOT USED. Does not stop recording, even though returns 200
$scope.cancelScheduledRecording = function() {
var url = '/api/dvr/entry/stop';
var data = http_build_query({ "uuid": $scope.selectedEpgUnit['data']['dvrUuid'] });
var headers = {headers: {'Content-Type': 'application/x-www-form-urlencoded'}};
$http.post(url, data, headers)
.then(function (response)
{
if (response.data) {
$scope.updateAllChannelsEpg(); // TODO: should update just one, but must know rowIndex
var recordButton = document.getElementById('recordProgram');
var recordSeriesButton = document.getElementById('recordSeries');
recordButton.innerText = 'Record';
angular.element(recordSeriesButton).css("visibility", "visible");
$scope.showInfobox('Scheduled recording was canceled');
}
}, function (response)
{
alert('Sorry, an error occurred. API response was : "(' + response.status + ')"');
});
}
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Also, if I run the exact same function with
var url = '/api/dvr/entry/stop';
eveything works as expected
RE: AngularJS webinterface - Added by Dave Pickles over 4 years ago
I cannot see what I do different than you, only thing is I check on dvrstatus to determine which command to use, whereas you check the time..... shouldn't matter, right?
Provided you check 'sched_status' immediately before trying to stop the recording. I had a problem where the function of the 'stop' button was set when the timers screen was displayed; if the button was pressed some time later the recording might already have ended.
Also, if I run the exact same function with
var url = '/api/dvr/entry/stop';
eveything works as expected
You mean /api/dvr/entry/cancel?
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Dave Pickles wrote:
I cannot see what I do different than you, only thing is I check on dvrstatus to determine which command to use, whereas you check the time..... shouldn't matter, right?
Provided you check 'sched_status' immediately before trying to stop the recording. I had a problem where the function of the 'stop' button was set when the timers screen was displayed; if the button was pressed some time later the recording might already have ended.
Also, if I run the exact same function with
var url = '/api/dvr/entry/stop';
eveything works as expected
You mean /api/dvr/entry/cancel?
Yes, of course.... sorry :-/
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
If anyone cares, here's the status page completed. Any comments are welcome... I changed the font a bit, Mark, but since I don't know what you don't like, I'm not sure this is better ;-)
Also, I have 2 monitors, if you dont want to look on the topmost one, sean acro, please dont feel obliged to ;-)
screencast.mkv (6.17 MB) screencast.mkv |
RE: AngularJS webinterface - Added by Flole Systems over 4 years ago
Is there any way we could get this in as a second UI? Like for example at <tvheadend>/newui/? There would be more testers and more Feedback.
I think the left panel looks a little weird, I think it's not done yet?
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Flole Systems wrote:
Is there any way we could get this in as a second UI? Like for example at <tvheadend>/newui/? There would be more testers and more Feedback.
I think the left panel looks a little weird, I think it's not done yet?
Thanks for reply, Flole,
Yes, I think that would work out-of-the-box, by simply moving the files there... that's what I did, on guidance by Dave Pickles. It works extremely well, although I will stress again that this is highly experimental, still, and I am NOT a frontend coder or CSS expert... just someone why is trying to learn to be :-)
What is it with the left panel that you don't like? I...erhm... actually considered that part to be finished :-) But, I change this interface all the time, I really have no clear aim or design, I just make it up as I go, so I would certainly welcome any ideas you might have
RE: AngularJS webinterface - Added by Flole Systems over 4 years ago
I looked again at your video (this time on full screen) and saw that those are not raw links but actual buttons. A first look at the video made me think that those are links, maybe because of the color. The red icon to toggle seems a little bit too "mighty", a more decent color like grey or white would probably fit better. I am not a UI designer though, my UIs look horrible if I don't "steal" a framework from someone and I don't now why or what I should change to make them look good That's why I can't tell you what would make it look better in my opinion or what exactly I don't like, but I think the colors might be a good starting point (and maybe replace the dots by the symbols). I really like the EPG view though!
If it's at a dedicated path it doesn't matter if it works or not, it could be removed easily later on in case we notice that it's completely broken (which I highly doubt) and maybe there will be more feedback then or someone might jump on to help you with that.
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Some sand serif font needed.
Upload for testing.
Screencast-1.mp4 (2.56 MB) Screencast-1.mp4 | Cut re-upload |
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
saen acro wrote:
Some sand serif font needed.
Upload for testing.
Ok, what about Monserrat Sans-serif? I agree that the font is not good, just didn't know which one to choose.....
Which program do you use to cut the uppermost screen? I'll do that the next time then.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Flole Systems wrote:
I looked again at your video (this time on full screen) and saw that those are not raw links but actual buttons. A first look at the video made me think that those are links, maybe because of the color. The red icon to toggle seems a little bit too "mighty", a more decent color like grey or white would probably fit better. I am not a UI designer though, my UIs look horrible if I don't "steal" a framework from someone and I don't now why or what I should change to make them look good That's why I can't tell you what would make it look better in my opinion or what exactly I don't like, but I think the colors might be a good starting point (and maybe replace the dots by the symbols). I really like the EPG view though!
If it's at a dedicated path it doesn't matter if it works or not, it could be removed easily later on in case we notice that it's completely broken (which I highly doubt) and maybe there will be more feedback then or someone might jump on to help you with that.
Ok, yes, you are completely right, the red icon is horribly red. I'll tone down the color.
What do you mean, replace the dots by the symbols?
Yes, the URL should not be contain 'angularJS', obviously, that is only for testing... like you say. It would be awesome if some designer guy would take over the design, but the feedback from you guys is certainly better than nothing
RE: AngularJS webinterface - Added by saen acro over 4 years ago
Poul Kalff wrote:
saen acro wrote:
Some sand serif font needed.
Upload for testing.
Ok, what about Monserrat Sans-serif? I agree that the font is not good, just didn't know which one to choose.....
Which program do you use to cut the uppermost screen? I'll do that the next time then.
Use font with everyone have else browser will select first from family (Liberation on Ubuntu/ MS sans serif on Windows)
Setup correct capture setup, else handbrake with crop 1080 pixels on top
RE: AngularJS webinterface - Added by Flole Systems over 4 years ago
I mean that those dots in the navigation bar (those that are still visible when it's minimized) could be replaced by the symbols that tvheadend is showing at the tabs in the current UI (Status for example at /static/icons/eye.png).
If you submit a PR and only add new files and don't modify (or at least not heavily modify the old ones) I could instantly merge it.
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Flole Systems wrote:
I mean that those dots in the navigation bar (those that are still visible when it's minimized) could be replaced by the symbols that tvheadend is showing at the tabs in the current UI (Status for example at /static/icons/eye.png).
If you submit a PR and only add new files and don't modify (or at least not heavily modify the old ones) I could instantly merge it.
Ah yes, good idea with the icons. How weird I never thought of that, I'll do that.
I thought only Perex could merge, have you taken over the project? I am not sure that this interface is ready yet, it still behave pretty weird on my tablet, although running pretty smoothly. It is all on my github page, isn't it better if you get it there, then you can see how you like it.... I'm afraid the code is a bit messy, since it is a learning-project... bu have a look: https://github.com/PoulKalff/angularJS
There are some warnings on github about 'security vulnerabilities', that is just because of the temp-folder which I have used for example code and stuff I wanted to use, but is not really a part of the project as such. Also, let me fix the things we have discussed here and commit them first, I'll do it right away
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Just pushed fixes now.
The original icons are very small and made for white background, so not too good looking, but better than the dots.
Would be nice to use some more modern icon library like glyphicons, but that would be one more library to include....
RE: AngularJS webinterface - Added by Poul Kalff over 4 years ago
Hi guys,
I need a little help again..... the build information on my ABOUT-page is hardcoded, which obviously it shouldn't be. Version number is linked in the top of the page, and build information is available from the 'toggle details', on the original UI. Can someone tell me where this information is available, I can't seem to find it and cannot see how it is linked in the old interface.....?
details.png (138 KB) details.png |