Igor Kulikov
7 years ago
17 changed files with 227 additions and 66 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,18 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2019 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div id="canvas_container" [ngStyle]="{width: size + 'px', height: size + 'px'}"></div> |
|||
@ -0,0 +1,124 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; |
|||
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|||
import Raphael from 'raphael'; |
|||
import * as tinycolor_ from 'tinycolor2'; |
|||
|
|||
const tinycolor = tinycolor_; |
|||
|
|||
interface CircleElement extends RaphaelElement { |
|||
theGlow?: RaphaelSet; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-led-light', |
|||
templateUrl: './led-light.component.html', |
|||
styleUrls: [] |
|||
}) |
|||
export class LedLightComponent implements OnInit, AfterViewInit, OnChanges { |
|||
|
|||
@Input() size: number; |
|||
|
|||
@Input() colorOn: string; |
|||
|
|||
@Input() colorOff: string; |
|||
|
|||
@Input() offOpacity: string; |
|||
|
|||
private enabledValue: boolean; |
|||
get enabled(): boolean { |
|||
return this.enabledValue; |
|||
} |
|||
@Input() |
|||
set enabled(value: boolean) { |
|||
this.enabledValue = coerceBooleanProperty(value); |
|||
} |
|||
|
|||
private canvasSize: number; |
|||
private radius: number; |
|||
private glowSize: number; |
|||
private glowColor: string; |
|||
|
|||
private paper: RaphaelPaper; |
|||
private circleElement: CircleElement; |
|||
|
|||
constructor(private elementRef: ElementRef<HTMLElement>) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.offOpacity = this.offOpacity || '0.4'; |
|||
this.glowColor = tinycolor(this.colorOn).lighten().toHexString(); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
this.update(); |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
for (const propName of Object.keys(changes)) { |
|||
const change = changes[propName]; |
|||
if (!change.firstChange && change.currentValue !== change.previousValue) { |
|||
if (propName === 'enabled') { |
|||
this.draw(); |
|||
} else if (propName === 'size') { |
|||
this.update(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private update() { |
|||
this.size = this.size || 50; |
|||
this.canvasSize = this.size; |
|||
this.radius = this.canvasSize / 4; |
|||
this.glowSize = this.radius / 5; |
|||
if (this.paper) { |
|||
this.paper.remove(); |
|||
} |
|||
this.paper = Raphael($('#canvas_container', this.elementRef.nativeElement)[0], this.canvasSize, this.canvasSize); |
|||
const center = this.canvasSize / 2; |
|||
this.circleElement = this.paper.circle(center, center, this.radius); |
|||
this.draw(); |
|||
} |
|||
|
|||
private draw() { |
|||
if (this.enabled) { |
|||
this.circleElement.attr('fill', this.colorOn); |
|||
this.circleElement.attr('stroke', this.colorOn); |
|||
this.circleElement.attr('opacity', '1'); |
|||
if (this.circleElement.theGlow) { |
|||
this.circleElement.theGlow.remove(); |
|||
} |
|||
this.circleElement.theGlow = this.circleElement.glow( |
|||
{ |
|||
color: this.glowColor, |
|||
width: this.radius + this.glowSize, |
|||
opacity: 0.8, |
|||
fill: true |
|||
}); |
|||
} else { |
|||
if (this.circleElement.theGlow) { |
|||
this.circleElement.theGlow.remove(); |
|||
} |
|||
this.circleElement.attr('fill', this.colorOff); |
|||
this.circleElement.attr('stroke', this.colorOff); |
|||
this.circleElement.attr('opacity', this.offOpacity); |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue