wn/smartclient
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: wn:MaterialTest
Branches Tags
wn:master wn:configurationStuff wn:serverIntegration wn:NgForTest wn:MaterialTest
...
pull from: wn:NgForTest
Branches Tags
wn:master wn:configurationStuff wn:serverIntegration wn:NgForTest wn:MaterialTest

3 Commits
MaterialTe ... NgForTest

Author SHA1 Message Date
Wolfgang Hottgenroth
6e9cdd1a11 tune with dispatcher output 2018-06-25 13:14:31 +02:00
Wolfgang Hottgenroth
fdf0c55094 separate actionTopic and feedbackTopic 2018-06-25 11:28:02 +02:00
Wolfgang Hottgenroth
ac322e4154 ngFor approach works, non-local mqtt broker doesn't work so far 2018-06-25 09:37:43 +02:00
9 changed files with 130 additions and 68 deletions
Expand all files Collapse all files

64
sample-configuration.json Normal file
View File

@ -0,0 +1,64 @@
{
"switches": [
{
"room": "Wohnzimmer",
"switches": [
{
"label": "kleine Lampe",
"actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/SmallLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/SmallLight/state/feedback"
},
{
"label": "große Lampe",
"actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/LargeLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/LargeLight/state/feedback"
},
{
"label": "Sterne",
"actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/Stars/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/Stars/state/feedback"
},
{
"label": "Stehlampe",
"actionTopic": "dispatcher_ng/items/Gnd/LivingRoom/StandLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/LivingRoom/StandLight/state/feedback"
}
]
},
{
"room": "Esszimmer",
"switches": [
{
"label": "kleine Lampe",
"actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/SmallLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/SmallLight/state/feedback"
},
{
"label": "Stehlampe",
"actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/StandLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/StandLight/state/feedback"
},
{
"label": "Schranklicht",
"actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/CupboardLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/CupboardLight/state/feedback"
},
{
"label": "Naehkaestchenlicht",
"actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/NaehkaestchenLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/NaehkaestchenLight/state/feedback"
},
{
"label": "Regallicht",
"actionTopic": "dispatcher_ng/items/Gnd/DiningRoom/ShelfLight/state",
"feedbackTopic": "dispatcher_ng/items/Gnd/DiningRoom/ShelfLight/state/feedback"
}
]
}
],
"windows": [
{ "label": "Fenster 1", "topic": "test/fenster1" },
{ "label": "Fenster 2", "topic": "test/fenster2" },
{ "label": "Fenster 3", "topic": "test/fenster3" }
]
}

9
src/app/app.component.css
View File

@ -6,7 +6,16 @@ ledbox {
float: left;
display: block;
}
onoff {
float: left;
display: block;
}
p.clear {
clear: both;
}
div#scenes {
margin-top: 10px;
margin-bottom: 10px;
}

76
src/app/app.component.html
View File

@ -1,64 +1,30 @@
<mat-tab-group>
<mat-tab label="Licht">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Wohnzimmer
</mat-panel-title>
</mat-expansion-panel-header>
<ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
<ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
<ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
<ledbutton2 topic="led/test4" label="test4"></ledbutton2>
<ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
<ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
<ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
<ledbutton2 topic="led/test4" label="test4"></ledbutton2>
<ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
<ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
<ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
<ledbutton2 topic="led/test4" label="test4"></ledbutton2>
<p class="clear"></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
Esszimmer
</mat-panel-title>
</mat-expansion-panel-header>
<table id="maintable">
<tr>
<td>
<ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
</td>
<td>
<ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
</td>
<td>
<ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
</td>
<td>
<ledbutton2 topic="led/test4" label="test4"></ledbutton2>
</td>
</tr>
</table>
</mat-expansion-panel>
</mat-accordion>
<div id="scenes">
<onoff *ngFor="let scene of configuration.scenes"
[label]="scene.label" [topic]="scene.actionTopic"></onoff>
<p class="clear"></p>
</div>
<mat-divider></mat-divider>
<mat-accordion>
<mat-expansion-panel *ngFor="let room of configuration.switches">
<mat-expansion-panel-header>
<mat-panel-title>
{{room.room}}
</mat-panel-title>
</mat-expansion-panel-header >
<ledbutton2 *ngFor="let switch of room.switches"
[actionTopic]="switch.actionTopic" [feedbackTopic]="switch.feedbackTopic"
[label]="switch.label"></ledbutton2>
<p class="clear"></p>
</mat-expansion-panel>
</mat-accordion>
</mat-tab>
<mat-tab label="Fenster">
<ledbox topic="led/test4" label="test4"></ledbox>
<ledbox topic="led/test4" label="test4"></ledbox>
<p class="clear"></p>
<ledbox *ngFor="let window of configuration.windows" [topic]="window.topic" [label]="window.label"></ledbox>
<p class="clear"></p>
</mat-tab>
<mat-tab label="Heizung">

24
src/app/app.component.ts
View File

@ -1,10 +1,30 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { MqttclientService } from './mqttclient.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
export class AppComponent implements OnInit {
title = 'app';
private topic : string = 'smartclient/configuration'
configuration : any = {
'switches': [],
'windows': []
}
constructor(private mqttclientService : MqttclientService) {
}
ngOnInit() {
this.mqttclientService.register(this.topic, (message: string) => {
try {
this.configuration = JSON.parse(message)
} catch (e) {
alert(`Error when parsing received configuration: ${e}`)
}
})
}
}

4
src/app/app.module.ts
View File

@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MqttclientService } from './mqttclient.service'
@ -32,7 +33,8 @@ import { LedBoxComponent } from './led-box/led-box.component';
BrowserAnimationsModule,
MatTabsModule,
MatExpansionModule,
MatButtonModule
MatButtonModule,
MatDividerModule
],
providers: [
MqttclientService

2
src/app/led-box/led-box.component.ts
View File

@ -5,7 +5,7 @@ import { MqttclientService } from '../mqttclient.service'
selector: 'ledbox',
template: `
<div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px',
'width': '100px', 'padding':'5px', 'margin': '5px',
'width': '100px', 'height':'80px', 'padding':'5px', 'margin': '5px',
'font-family': 'sans-serif' }">
{{label}}<br/>
<led [topic]="topic" greenToken="CLOSED" redToken="OPEN"></led>

7
src/app/led-button-group2/led-button-group2.component.ts
View File

@ -16,16 +16,13 @@ import { MqttclientService } from '../mqttclient.service'
})
export class LedButtonGroup2Component implements OnInit {
actionTopic : string
feedbackTopic : string
@Input('topic') topicPre : string
@Input() actionTopic : string
@Input() feedbackTopic : string
@Input() label : string
constructor(private mqttclientService : MqttclientService) { }
ngOnInit() {
this.actionTopic = this.topicPre + '/state'
this.feedbackTopic = this.topicPre + '/feedback'
}

2
src/app/mqttclient.service.ts
View File

@ -9,7 +9,7 @@ export class MqttclientService {
private callbacks : Map<string, callbackFunc> = new Map()
constructor() {
this.mqttClient = Mqtt.connect('ws://localhost:9001')
this.mqttClient = Mqtt.connect('ws://127.0.0.1:9001')
this.mqttClient.on('connect', () => {
console.log('MQTT connected')
this.callbacks.forEach((value: callbackFunc, key: string) => {

10
src/app/on-off-button/on-off-button.component.ts
View File

@ -4,14 +4,18 @@ import { MqttclientService } from '../mqttclient.service'
@Component({
selector: 'onoff',
template: `
<div class="button">
<button (click)="clickOn()" [ngStyle]="{'font-size':'150%'}">on</button>
<button (click)="clickOff()" [ngStyle]="{'font-size':'150%'}">off</button>
<div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px',
'width': '150px', 'padding':'5px', 'margin': '5px',
'font-family': 'sans-serif' }">
{{label}}<br/>
<button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
<button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
</div>
`
})
export class OnOffButtonComponent implements OnInit {
@Input() topic : string = 'invalid'
@Input() label : string = 'invalid'
constructor(private mqttclientService : MqttclientService) { }