Angular2 Service and Components for Domoticz

[Tommertom]

Hi all,

I am playing around with Angular2 Beta (just released!!) and building some UI stuff in it.

As part of the playing-around, I made a small service which can be used to power Components with Domoticz-energy.

It's work in progress, but the basic idea is pretty clear for people even just starting with Angular2 and with some basic programming skills.

I recommend first setting up the Angular2 Heroes demo on angular.io. Extension to Domoticz must then be quite easy. Please make sure the paths in the import statements are properly set.

I copied the components/service out of an existing implementation, read them through thoroughly, nevertheless, there may be some minor mistakes?

It would be great to extend the repository with the various components that can be used in various other Angular2 apps. At least, I intend to continue working on them.

Edit: new link to repository (feb 2017): https://github.com/Tommertom/ng2domoticz

Regards

Tom

[gizmocuz]

Hi Tom,

Looking good !

Would be great if we could make domoticz fully angularjs (2)

I was thinking about ng-if/switch for all various sensor types in the gui, is this something you have experience with and or could help with ?

[Tommertom]

Hi

thx for that.

I have been playing with the issue of dynamically generating layout based on device-data quite a bit and I believe there are two directions you can take.Point is you cannot dynamically assign template or templateUrl in the Component declaration based on the input the Component receives, as they are not known yet until after constructor call (or sometimes only af ngOnInit).

Fully declarative
Use ngIf and NgSwitch in a large html template which defines the layout using the data received from the Domoticz API.Upside is one component for all devices, so less files. Major downside for me is the readability of the code as well as higher risk of making errors. Next, much of the layout items may not be needed at all times. So the html will look like

Code: Select all

@Component({selector: 'domoticz-device'})
@View({
  template: `
    <p>Type = {{Type}}</p>

    <div [ngSwitch]="Type">
 <p *ngSwitchWhen="'Thermostat">

.. html declaration of device ..

</p>


<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>

<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>



<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>




<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>




<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>




<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>




<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>



<p *ngSwitchWhen="Other Thing">

.. html declaration of device ..

</p>
  `,
  directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault, ....]
})
export class App {
  type = 'from API';

constructor() {}

switchers/getters/setters....
  }
}

Dynamic
I've taken that route. Each device will have its own component such as <basic-switch-component idx="1"></...> or <basic-thermostat idx="3"></...> etc. Nice part of this is that you can contain the relevant html together and use the inheritance a bit better. The implementation is a bit hacky as you need to use ElementRef and DynamicComponentLoader. And the Angular2 team does support, but recommends a bit against it (https://angular.io/docs/ts/latest/api/c ... class.html).I have come across quite some postings where would like this feature more supported. So I bet in a future Angular2 release they may provide for something better. Next, this route creates per device type and component a single file (as per recommendation in developer guide). People may not like this, but it is better I believe.

Code: Select all

    function toComponent(template, directives = []) {
      @Component({ selector: 'fake-component' })
      @View({ template, directives })
      class FakeComponent { }
      return FakeComponent;
    }

      var template = '<' + thisblock.directive + ' [idx]="' + blocks[i]['idx'] + '">' + '</' + thisblock.directive + '>';
      var directives = [this.getClassOfDirective(thisblock.directive)];

     this.loader.loadNextToLocation(toComponent(template, directives), this.elementRef);

I personally go for the Dynamic route because of maintainability. I have made a draft implementation taking a list of device components (blocks) and inserts the components dynamically. This way the UI is fully configurable using data, either out of the Domoticz API or any other JSON file.

Behold the power of Angular2!!!

Hope this helps?

btw, shouldn't this post be in the UI section of the forum?

Tom

[Tommertom]

Hi

after some playing with the dynamical option I believe the first option is better, but then slightly adjusted where once component indeed does the ngIf ngSwitch and in these parts includes the various separate components to show.

Regards

Tom

[chimit]

Hi Tommertom,

Great work and I am happy to see somebody working on this.
In the Developers forum, we have a thread about setting up Domoticz with Angular contollers.
Could you contact me via pm or at [email protected] with your email address? I have some documentation that I want to share with you (under construction).
At the same time, I have a working (but also still in progress) Angular test branch with a Domoticz service that supports websockets for push events instead of the http polling that it currently does.

I would be more than happy to join forces with you and come to the best solution in the end.

== Rene

[Tommertom]

Hi there,

has been a while since I was on the forum and worked on the earlier thing mentioned (Angular2 service). I ditched all the work done before and now created a new Angular2 service for Domoticz which uses the Reactive Extensions (RXjs).

So apps/webapps in Angular2 can use the power that framework to do async work and easy filtering/subscribing to events from the server (as I haven't found yet a way to have Domoticz push events to the client, the service actually does a regular and pull of data and broadcasts this to all subscribed. So a bit faking it).

The service is available on GitHub https://github.com/Tommertom/ng2domoticz, and an Ionic 2 demo app is wrapped around it to see it work.

The demo app is also available through Ionic View (like apple's Testflight - download Ionic View in your store) under appid 96ecbaf2

Regards,

Tom

[chimit]

I will be happy to be able to look at it. I will try your repository once I manage to get some time.
About Domoticz pushing data: There's provisions in the Websockets-refactored branch.
I will need even more time to merge those! *sigh*
Even though it shouldn't take that much time. Because it used to work before already.

Cheers,

== Rene

[Tommertom]

Hi

Would be great to have some sort of http based subscribe/unsubscribe feature, where the client can listen to events through a httpd. Or a custom custom thing (either combined with a subsequent pull).

And second nice thing to have, from a client developing perspective, is some sort of Domoticz server discovery, using udp or request to the my.domoticz.com cloud (like HUE or Sonos). This way, client developers can ease the configuration of a domoticz server in the network (even though most domoticz admins may agree with that issue).

Work in progress.

Tom

[chimit]

There is a http/websocket based subsciption possibility for devices with an idx of choice that allows push notifications via the websocket to an angular widget of choice.

The second thing that you ask is useful indeed. But I will conveniently leave that to others ;=).

== Rene

[Tommertom]

There is a http/websocket based subsciption possibility for devices with an idx of choice that allows push notifications via the websocket to an angular widget of choice.

Meaning, there already is and if yes, where to find? Or it will be part of your code?

Sorry to ask.

Tom

[chimit]

There already is at least a start of it. And it used to work as well back in the time I ported the Switches page to Angular.
During time, it became too much of a hassle to merge the changes with the master branch in the switches page. So I dropped it.
But it's part of my code already. And you can find it in the Websockets-refactored branch of the Domoticz official repository. It's there for you to check out.
Even though I don't have a lot of time to actually develop, I do try to keep it up-to-date with the master branch - for easy merging back once it is a working subject.

== Rene

[chimit]

Hello Tom!

More or less exciting news. I got around to fixing the old code again, together with the new Angular widgets.
So far, I only got around to update the Temperatures tab.
Look at the Websockets-refactored branch and switch to the Temperatures page.
The widgets get updated on-the-fly via live websocket events as soon as a device's status changes. No more polling!

I don't warrant that everything is bug-free. But it works for me. If you (or anybody else) is interested, please feel free to test and comment.

== Rene

[blauwebuis]

I was advised to point you guys to this usability design proposal I just created:
viewtopic.php?f=8&t=16255

I'm curious to hear what you think!

[chimit]

I was advised to point you guys to this usability design proposal I just created:
viewtopic.php?f=8&t=16255

I'm curious to hear what you think!

What I think? Good job!
As far as the widgets that we are talking about in this thread: The fact that Tommertom made such a good effort in converting them to Angular-2 directives should help a lot seeing this implemented faster in the end. Even though a few display (more difficult to port) tabs still need to be done.
All together with an event-driven Angular interface that I started as well, this is really Domoticz-Next-Level!

== Rene

[blauwebuis]

I was thinking it might be good to organize a hackathon, maybe on a sunday afternoon in april, to overhaul the Domoticz front-end. If you're interested in that, send me a private message.