button led group
This commit is contained in:
parent
c00af42ae5
commit
4bae0eeb61
GPG Key ID:
B586EAFCDF2F65F4
@ -1,3 +0,0 @@
|
||||
#maintable {
|
||||
border: 1px;
|
||||
}
|
||||
@ -1,8 +1,16 @@
|
||||
<table id="maintable">
|
||||
<tr>
|
||||
<td><app-ledindicator topic="led/test1" ledId="test1"></app-ledindicator></td>
|
||||
<td><app-ledindicator topic="led/test2" ledId="test2"></app-ledindicator></td>
|
||||
<td><app-ledindicator topic="led/test3" ledId="test3"></app-ledindicator></td>
|
||||
<td><app-ledindicator topic="led/test4" ledId="test4"></app-ledindicator></td>
|
||||
<td>
|
||||
<ledbutton topic="led/test1" label="Küche Deckenlampe"></ledbutton>
|
||||
</td>
|
||||
<td>
|
||||
<ledbutton topic="led/test2" label="Keller normal"></ledbutton>
|
||||
</td>
|
||||
<td>
|
||||
<ledbutton topic="led/test3" label="Keller hell"></ledbutton>
|
||||
</td>
|
||||
<td>
|
||||
<ledbutton topic="led/test4" label="test4"></ledbutton>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@ -4,12 +4,16 @@ import { MqttclientService } from './mqttclient.service'
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { LedindicatorComponent } from './ledindicator/ledindicator.component';
|
||||
import { OnOffButtonComponent } from './on-off-button/on-off-button.component';
|
||||
import { LedButtonGroupComponent } from './led-button-group/led-button-group.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
LedindicatorComponent
|
||||
LedindicatorComponent,
|
||||
OnOffButtonComponent,
|
||||
LedButtonGroupComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule
|
||||
|
||||
25
src/app/led-button-group/led-button-group.component.spec.ts
Normal file
25
src/app/led-button-group/led-button-group.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LedButtonGroupComponent } from './led-button-group.component';
|
||||
|
||||
describe('LedButtonGroupComponent', () => {
|
||||
let component: LedButtonGroupComponent;
|
||||
let fixture: ComponentFixture<LedButtonGroupComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ LedButtonGroupComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LedButtonGroupComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
28
src/app/led-button-group/led-button-group.component.ts
Normal file
28
src/app/led-button-group/led-button-group.component.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ledbutton',
|
||||
template: `
|
||||
<div [ngStyle]="{ 'text-align': 'center', 'border': '2px solid black',
|
||||
'padding': '5px', 'width': '150px', 'height': '150px',
|
||||
'margin': 'auto', 'font-family': 'sans-serif' }">
|
||||
{{label}}<br/>
|
||||
<led [topic]="feedbackTopic"></led><br/>
|
||||
<onoff [topic]="actionTopic"></onoff>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class LedButtonGroupComponent implements OnInit {
|
||||
|
||||
actionTopic : string
|
||||
feedbackTopic : string
|
||||
@Input('topic') topicPre : string
|
||||
@Input() label : string
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.actionTopic = this.topicPre + '/state'
|
||||
this.feedbackTopic = this.topicPre + '/feedback'
|
||||
}
|
||||
}
|
||||
@ -2,18 +2,14 @@ import { Component, Input, OnInit } from '@angular/core'
|
||||
import { MqttclientService } from '../mqttclient.service'
|
||||
|
||||
@Component({
|
||||
selector: 'app-ledindicator',
|
||||
selector: 'led',
|
||||
template: `
|
||||
<div [ngStyle]="{'text-align':'center'}">
|
||||
{{ledId}}<br/>
|
||||
<span [ngStyle]="{'color':color, 'font-size':'200%'}">●</span>
|
||||
</div>
|
||||
<span [ngStyle]="{'color':color, 'font-size':'500%'}">●</span>
|
||||
`
|
||||
})
|
||||
export class LedindicatorComponent implements OnInit {
|
||||
|
||||
@Input() topic : string = 'invalid'
|
||||
@Input() ledId : string = 'invalid'
|
||||
color : string = 'red'
|
||||
|
||||
|
||||
@ -23,7 +19,7 @@ export class LedindicatorComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
this.mqttclientService.register(this.topic, (message: string) => {
|
||||
if (message == 'ON') {
|
||||
this.color = 'green'
|
||||
this.color = '#40FF00'
|
||||
} else if (message == 'OFF') {
|
||||
this.color = 'red'
|
||||
} else {
|
||||
|
||||
@ -30,4 +30,9 @@ export class MqttclientService {
|
||||
this.callbacks.set(topic, cb)
|
||||
this.mqttClient.subscribe(topic)
|
||||
}
|
||||
|
||||
publish(topic: string, message: string) {
|
||||
console.log(`${message} published on ${topic}`)
|
||||
this.mqttClient.publish(topic, message)
|
||||
}
|
||||
}
|
||||
|
||||
25
src/app/on-off-button/on-off-button.component.spec.ts
Normal file
25
src/app/on-off-button/on-off-button.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OnOffButtonComponent } from './on-off-button.component';
|
||||
|
||||
describe('OnOffButtonComponent', () => {
|
||||
let component: OnOffButtonComponent;
|
||||
let fixture: ComponentFixture<OnOffButtonComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ OnOffButtonComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(OnOffButtonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
31
src/app/on-off-button/on-off-button.component.ts
Normal file
31
src/app/on-off-button/on-off-button.component.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
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>
|
||||
`
|
||||
})
|
||||
export class OnOffButtonComponent implements OnInit {
|
||||
@Input() topic : string = 'invalid'
|
||||
|
||||
constructor(private mqttclientService : MqttclientService) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
clickOn() {
|
||||
console.log(`click on for ${this.topic}`)
|
||||
this.mqttclientService.publish(this.topic, "ON")
|
||||
}
|
||||
|
||||
clickOff() {
|
||||
console.log(`click off for ${this.topic}`)
|
||||
this.mqttclientService.publish(this.topic, "OFF")
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="176" height="192" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="57.5" cy="202" r="78" gradientTransform="matrix(.688 0 0 .309 69.1 134)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#420" offset="0"/>
|
||||
<stop stop-color="#110" stop-opacity="0" offset="1"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<ellipse transform="matrix(.979 -.204 0 1 0 0)" cx="109" cy="197" rx="53.7" ry="24" fill="url(#a)" opacity=".2"/>
|
||||
<path d="m98 1.9c10.2-2.04 16.2 3.79 17.4 13 1.4 10.9-4.05 21.2-3.11 32.1 0.7 8.1 3.18 16.2 7.94 22.8 4.92 6.87 10.1 13.7 13.4 21.5 1.49 3.52 1.97 4.15 2.42 8.38 6.88 4.32 11.4 18 11.7 26.2 0.44 12.2-3.57 23.9-10.6 34.1-3.97 5.8-11.4 11.4-19.1 12.1-4.01 5.79-8.91 11.6-15.4 13.8-5.29 1.76-14.9 0.63-14.9 0.63-5.58 2.79-13.1 4.67-18.8 3.76-5.19-0.83-10.2-4.08-12.3-9.1-2.62-6.25-0.86-13.1 0.58-19.4-4.72-1.64-10.4-3.7-14.3-7.04-7.47-6.49-10.8-13.3-9.3-25 0.49-3.94 3.09-8.26 5.18-11.5-8.08-5.52-11.6-15.9-10.4-25.2 1.04-7.67 7.77-13.1 14.3-16.6 6.76-3.57 14.6-4.57 22.2-4.91 6.4-0.28 12 0.55 18.9 0.6 1.39-12.8-11.1-21.7-11.1-34.3 0-7.7 1.27-16.4 5.76-22.7 5.55-8.13 11.3-11.6 19.5-13.3z"/>
|
||||
<path d="m120 162c1.21-2.38 3.13-6.22 4.59-9.9 0 0-0.315 3.46-1.01 5.44 5.31 0.488 10.7-0.458 14.4-4.49 4.94-8.32 4.66-19.1 3.3-28.4-0.622-4.24-2.28-9.08-4.68-12.6-1.3 5.28-3.82 15.4-6.68 20 4.7-30.2-6.94-50.5-18.6-55-0.0825-2.18-1.61-6.35-0.742-10.4-1.36-3.66-2.79-10.7-2.51-18.4 0 0-0.398-5.83 0.435-10.4 1.16-6.44 4.49-14.2 3.39-23.6-0.435-3.66-2.08-8.25-5.82-9.37-7.65-2.36-13.4-0.255-20.4 6.7-8.78 8.78-11.6 24.8-4.74 35.4 5.08 8.1 10.3 14 8.92 25.8-0.428 3.18-2.12 4.55-6.86 4.36-11.7-0.9-23.6-2.11-35 1.38-6.05 1.85-11.4 6.59-14.7 11.9-2.9 4.63-1.81 10.4 0.128 15.2 2.3 5.6 8.02 8.92 13.4 10.9 31.1 11.2 55.9-24.3 24.8-33.4-2.6-0.63-5.31-0.66-7.95-0.922 8.02-3.22 17.9-2.03 24.3 3.87 5.44 5.05 6.24 15.5 3.62 22.4-0.915 23.6 8.1 32.2 18.1 34.8l-8.1 2.43 7.28 25.2s4.99 1.15 11.1-8.85zm-51.1-37.5c-9.15 1.9-17.1-0.09-25.1-2.94-3.03 3.2-5.76 6.98-6.11 11.6-1.3 8.02 4.12 15.8 11.1 19.3 6.03 2 12.6 3.55 18.9 2.42 20.9-9.75 27.8-35.4 1.21-30.3zm12.6 30.4c-7.65 4.93-14.7 8.18-21.6 7.01-1.18 4.31-2.26 9.98-1.48 14.5 3.34 11.2 15.4 10.5 22.8 6.49l16-19.1z" fill="#edc"/>
|
||||
<path d="m74.9 152c-9.92 5.91-19.4 4.26-28-0.41 7.35 1.53 16.1 1.41 22.2-0.71zm36.5-84.4c-2.27 3.22-1.69 6.14-0.56 8.88 6.52 12 11.7 14 15.8 24.7 3.81 9.83 4.05 20.6 3.05 31 2.67-6.54 2.65-19.1 1.85-25-1.01-7.34-1.98-14.5-6.21-20.7-4.98-7.24-9.35-10.1-14-18.9zm-64.8 48.9c12.2 4.44 20.5 2.8 30.7-1.62 0 0-8.77-0.07-10.7-0.85-6.68 2.49-13 2.99-20 2.47zm76.8 41.1c-1.27 3.99-2.21 6.98-3.57 9.98 7.88-1.9 13.8-5.56 18.4-15.4-3.65 4.02-9.53 5.92-14.8 5.43z" fill="#b86"/>
|
||||
<path d="m81.3 155c2.64-2.62 5.17-5.54 7.29-9.66 6.46 4.8 8.91 11.6 8.39 18.5-0.71 9.41-8.08 19.1-23.5 21.5 7.66-3.7 10.9-7.43 12.3-11.5 2.16-6.35 0.75-14.3-4.47-18.8zm8.79-13.4s0.85-4.64 1.39-6.54c7.97 9.99 10.9 8.72 18.1 8.32l-3.52 1.8c1.42 3.55 3.13 7.06 3.58 10.9 0.39 4.14-0.61 8.24-1.26 12.3 4.81-2.23 9.16-4.34 12.4-8.63-4.94 12.6-11.6 17.6-21.8 20.4 3.48-5.13 6.52-10.8 6.15-17.3-0.59-10.2-6.53-16.1-15-21.3zm-7.1-22.2c6.2 8.27 5.29 19.8-1.05 26.6-1.53 1.66-3.67 4.04-7.17 6.09l-5.75-1.1c6.55-4.03 12-12.4 8.94-20.1-1.4-3.49-5.93-5.25-13-5.69 4.46-0.17 12.4-2.86 18-5.8zm6-5.77c1.61-2.71 2.25-4.79 3.65-8.94-0.5 8.25 0.51 17.9 3.85 25.5 4.54 10.3 9.7 11.3 13.1 13.2-8.91 0.4-14.9-7.19-17.3-15.1-1.4-4.65-3.6-9.85-3.31-14.6zm-1.3-11.6c-1.09 6.73-4.59 10.7-10.4 12.9-3.77 0.67-11.2 0.88-13.2-0.04 13.2-3.53 17.5-10.3 16.5-19.3-0.58-5.15-9.89-12.2-17.2-13.4 19.2-2.16 26 8.69 24.2 19.8zm26.4-20.1c-8.6-10.3-8.86-29-6.34-37.8-0.27 7.73 2.11 19.2 3.64 23.4-0.2 5.78 1.48 11.1 2.7 14.3zm-11.5-75.6c4.1 1.41 5.97 6.71 5.56 10.8-0.09 6.5-2.26 13.3-7.27 17.7-4.24 3.53-11.5 3.02-14.8-1.6-2-3.07-1.91-6.92-1.48-10.4 1.38-11.2 9.74-19.4 18-16.5z" fill="#eba"/>
|
||||
<path d="m37.3 85.3c-4.31 4.84-4.94 6.37-5.61 9.3-0.692 5.09 0.77 10.5 3.84 14.6 3.83-8.69 2.07-14.4 1.77-23.9zm6.47 36.3c-4.74 4.47-7.47 11.3-5.85 17.7 0.716 2.93 2.22 5.64 4.18 7.92 3.3-7.69 5.82-24.3 5.82-24.3-1.39-0.428-2.78-0.88-4.16-1.37zm16.1 40.3c-1.31 4.9-2.64 11.7-1.05 15.8 0.858 2.17 2.75 4.92 5.13 6.16l0.0039-21.7c-1.44 0.0213-2.05 0.096-4.08-0.216z" fill="#eba"/>
|
||||
<g transform="translate(21 -7.99)" fill="#fff" opacity=".8">
|
||||
<ellipse transform="rotate(23.7)" cx="74.1" cy="3.93" rx="8.69" ry="12.4" opacity=".8"/>
|
||||
<ellipse transform="matrix(-.173 .985 -.989 -.151 0 0)" cx="93.7" cy="-45.7" rx="8.51" ry="13"/>
|
||||
<ellipse transform="matrix(-.269 .963 -.973 -.229 0 0)" cx="132" cy="-65.1" rx="6.71" ry="10.7"/>
|
||||
<ellipse transform="matrix(1 -.0122 .0329 .999 0 0)" cx="37.4" cy="179" rx="5.41" ry="4.72"/>
|
||||
<path d="m98.7 124c-0.151 4.05-5.74-1.2-7.07-2.52-4.1-4.07-7.02-7.69-9.41-13.1-3.36-7.68-6.06-14.8-6.55-23.2-0.134-2.32 2.81-3.53 4.38-1.51 2.81 3.59 4.14 5.55 7.25 12.4s11.8 16.6 11.4 28z" opacity=".8"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.8 KiB |
Loading…
x
Reference in New Issue
Block a user