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

Bernhard Berger wrote:

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.

Alright, well, I'll have a look. I saw your project back then, I thought it had just been abandoned.... so, what is the state of it right now? Maybe we can work together, if you are interested.... David P and I work together on testing, although we should perhaps also talk about design..... David?
I know nothing about vue, but, I knew nothing about angular when I wrote the first post in this thread, so.... ;-)
The current project is well functional, only the whole configuration part is not made yet. Obviously, though, making this will be a lot of work..... I'm trying to come up with an idea for it, currently :-S

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

Poul Kalff wrote:

Bernhard Berger wrote:

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.

Alright, well, I'll have a look. I saw your project back then, I thought it had just been abandoned.... so, what is the state of it right now? Maybe we can work together, if you are interested.... David P and I work together on testing, although we should perhaps also talk about design..... David?
I know nothing about vue, but, I knew nothing about angular when I wrote the first post in this thread, so.... ;-)
The current project is well functional, only the whole configuration part is not made yet. Obviously, though, making this will be a lot of work..... I'm trying to come up with an idea for it, currently :-S

The state of my project is experimental at best and doesn't really have any useful functionality.

The only reason I linked it here was because it has a somewhat working nodes reference/visualization/viewer.

At the time I was just trying to understand the API and Websockets of tvheadend and it was more of a playground for learning the TVH API and the streaming stuff.

What ultimately got into the way was kind of the tvh-api itself as all the config stuff is rather tightly coupled to what was done with ExtJS (table view limits, pagination, configuration, etc.) and authentication was/is a bit out of the norm.

I'm a professional webdev specialized mostly in Vue for frontend and PHP in backend with special interest in UX design.

I've done my fair share of work in C/C++ on microcontrollers too, but I'm still not experienced enough in C/C++ to make the changes to the API/refactor it to be more versatile enough to build the frontend to my liking (imho some parts need a major revamp to get a UX that is more intuitive and also works on mobile).

To be fair I also have almost no clue about Angular and I also heavily favor Vue over React, so I'm afraid I wouldn't be of much help.

That all being said: if you have any questions I'll try to help out as good as I can. I desperately want a more usable mobile experience and I'm a big fan of Open Source contribution and extremely thankful that TVH exists.

TL;DR:
- you can try to use my "dev tool" (button on the top right) to view node class schemas and their content
- I have vectorized the TVH png logo and you can find a nice SVG in my repository
- ask me anything and I'll try to answer to the best of my abilities

Regards,
Bernhard

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

Bernhard Heyer Berger
Alright. Well, I've already completed the read/write-functions of the idnodes, and they work well. They are really not very complicated to work with, once you have them mapped out.... which I did through inspecting the httprequests of the old interface, the extjs-thing.... which, by the way, I do not use at all. I wanted to build from scratch, I would probably also have drowned in it, had I tried to build on/with extjs. It is its own system, and I had no desire to learn it.
I am also a professional (although currently unemployed ;-) ) webdev, but not specialized in anything, just using what's available. Working primarily in PHP and Python, though, but trying to learn new stuff, currently Angular, which, by the way, is awesome.

Perhaps you can help with the design... any comments / ideas on that? I too wanted to be able to use tvh on a tablet, so I am testing mostly on my Sony Xperia tablet... (which is currently broken, waiting for a new display from China...) My 'design', works extremely well for tablets, I think, but you always think that, obviously, when you have done it myself, so tell me if I am wrong. I manage everything day-to-day on my own interface, so it is tested that way... And, I actually find the API-approach of the base program very easy to work with, once you have gotten the hang of it.

I don't have any specific design other than trying to put a lot on each page, so as to not have 1 million tabs. I make it up as I go.... Also, I try only to include features that are usable... although that is obviously a matter of definition.... but if someone is lacking a feature, it can easily be added later. What else...? I like colors, so I try to color-code stuff. And I like simple before advanced. For instance, the old interface has the possibility to use BASIC, NORMAL or EXPERT settings. IMHO, this is just more complication on top of an extremely complicated layout. Keep it simple, stupid....

I am working slowly on the configuration-part, currently. Not the most interesting part, probably also that's why I left that for last. Everything else is (or should be) funtional

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

Yeah, I took the other approach - I tried to sort out the configuration part first as that was the thing that bugged me most (especially channel mapping, and channel tagging+sorting as well as account management). That's where it got a bit unintuitive without reinventing the wheel.

I'm however happy with the frontend solutions available (Kodi integration for my home theater and living room setup, dream player for android tv and live channels integration for my mom's apartment and the tvheadend android app / emby integration for mobile and tablet) so I kept that stuff for last.

The main reason for choosing Vuetify as a framework (was a tight race between Vuetify and quasar.dev - but Vuetify had the better components and followed the MD guidelines more closely) was to ability to put out an Electron app and an android apk from the same source with some cordova magic while keeping a consistent interface that's 'approved' by Google and keeps the Android look and feel). Oh, and I absolutely wanted a dark mode switch, haha.

I'll take a quick look when I have some spare time and try to leave some constructive feedback.

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

@Davidp:
Pushed fix for "Need ability to select source of EPG programme description #6"

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

So, I completed the design of the last part of my angularTest interface, Configuration.
I have divided it up into 8 tabs, a bit like in the old interface, and the Controller-part is completed, so that all configuration can be loaded (it has to be loaded form a lot of different APIs, it cannot be loaded from one place) and all the information is just filled into the layout/VIEW..... but nothing can be done with it yet.... meaning, configuration can be loaded and changed, but not saved.

Also, I have found a new tool for recording screens that actually works, so only one screen this time ;-)
In other news, I have finally found a new job (as a SysAdmin again....on Windows, but I guess beggars cant be choosers...), so development will probably slow down somewhat.
Also, my tablet is STILL broken, a new battery is apparently very difficult to get..... so I can't see how this all looks on a small screen.... I do have A LOT of data on screen with these configuration, but it is at least a first try.

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

Poul Kalff wrote:

Also, my tablet is STILL broken, a new battery is apparently very difficult to get..... so I can't see how this all looks on a small screen.... I do have A LOT of data on screen with these configuration, but it is at least a first try.

That's why in browser, there is emulator for other devices screen with different resolutions.

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

saen acro wrote:

Poul Kalff wrote:

Also, my tablet is STILL broken, a new battery is apparently very difficult to get..... so I can't see how this all looks on a small screen.... I do have A LOT of data on screen with these configuration, but it is at least a first try.

That's why in browser, there is emulator for other devices screen with different resolutions.

Well, I actually didn't know that, thanks! It looks horrible though, when scaled that much down, but now at least I know

(101-108/108)