Igor Kulikov
3 years ago
committed by
GitHub
GitHub
24 changed files with 2155 additions and 10 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,197 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<ng-container [formGroup]="powerButtonWidgetConfigForm"> |
|||
<tb-target-device formControlName="targetDevice"></tb-target-device> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.power-button.behavior</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.initial-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
trueLabel="widgets.rpc-state.on" |
|||
falseLabel="widgets.rpc-state.off" |
|||
stateLabel="widgets.rpc-state.on" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="initialState"></tb-get-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.power-button.power-on " |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="onUpdateState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.power-button.power-off" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="offUpdateState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.disabled-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
stateLabel="widgets.rpc-state.disabled" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="disabledState"></tb-get-value-action-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
|||
<tb-image-cards-select rowHeight="1:1" |
|||
[cols]="{columns: 3, |
|||
breakpoints: { |
|||
'lt-sm': 1, |
|||
'lt-md': 2 |
|||
}}" |
|||
label="{{ 'widgets.power-button.layout' | translate }}" formControlName="layout"> |
|||
<tb-image-cards-select-option *ngFor="let layout of powerButtonLayouts" |
|||
[value]="layout" |
|||
[image]="powerButtonLayoutImageMap.get(layout)"> |
|||
{{ powerButtonLayoutTranslationMap.get(layout) | translate }} |
|||
</tb-image-cards-select-option> |
|||
</tb-image-cards-select> |
|||
<div class="tb-form-row column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
|||
{{ 'widget-config.title' | translate }} |
|||
</mat-slide-toggle> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-font-settings formControlName="titleFont" |
|||
clearButton |
|||
[previewText]="powerButtonWidgetConfigForm.get('title').value" |
|||
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
|||
</tb-font-settings> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="titleColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row column-xs"> |
|||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
|||
{{ 'widget-config.card-icon' | translate }} |
|||
</mat-slide-toggle> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
|||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
|||
<tb-material-icon-select asBoxInput |
|||
iconClearButton |
|||
[color]="powerButtonWidgetConfigForm.get('iconColor').value" |
|||
formControlName="icon"> |
|||
</tb-material-icon-select> |
|||
<tb-color-input asBoxInput |
|||
colorClearButton |
|||
formControlName="iconColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.power-button.power-on-colors' | translate }}</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.power-button.power-off-colors' | translate }}</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOff"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOff"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.power-button.disabled-colors' | translate }}</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.background.background' | translate }}</div> |
|||
<tb-background-settings formControlName="background"> |
|||
</tb-background-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between column-lt-md"> |
|||
<div translate>widget-config.show-card-buttons</div> |
|||
<mat-chip-listbox multiple formControlName="cardButtons"> |
|||
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
|||
</mat-chip-listbox> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
|||
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<tb-widget-actions-panel |
|||
formControlName="actions"> |
|||
</tb-widget-actions-panel> |
|||
</ng-container> |
|||
@ -0,0 +1,195 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { Component } from '@angular/core'; |
|||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
|||
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
|||
import { TargetDevice, WidgetConfig, } from '@shared/models/widget.models'; |
|||
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
|||
import { isUndefined } from '@core/utils'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { |
|||
powerButtonDefaultSettings, |
|||
powerButtonLayoutImages, |
|||
powerButtonLayouts, |
|||
powerButtonLayoutTranslations, |
|||
PowerButtonWidgetSettings |
|||
} from '@home/components/widget/lib/rpc/power-button-widget.models'; |
|||
import { cssSizeToStrSize, resolveCssSize } from '@shared/models/widget-settings.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-power-button-basic-config', |
|||
templateUrl: './power-button-basic-config.component.html', |
|||
styleUrls: ['../basic-config.scss'] |
|||
}) |
|||
export class PowerButtonBasicConfigComponent extends BasicWidgetConfigComponent { |
|||
|
|||
get targetDevice(): TargetDevice { |
|||
return this.powerButtonWidgetConfigForm.get('targetDevice').value; |
|||
} |
|||
|
|||
powerButtonLayouts = powerButtonLayouts; |
|||
|
|||
powerButtonLayoutTranslationMap = powerButtonLayoutTranslations; |
|||
powerButtonLayoutImageMap = powerButtonLayoutImages; |
|||
|
|||
valueType = ValueType; |
|||
|
|||
powerButtonWidgetConfigForm: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected widgetConfigComponent: WidgetConfigComponent, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store, widgetConfigComponent); |
|||
} |
|||
|
|||
protected configForm(): UntypedFormGroup { |
|||
return this.powerButtonWidgetConfigForm; |
|||
} |
|||
|
|||
protected onConfigSet(configData: WidgetConfigComponentData) { |
|||
const settings: PowerButtonWidgetSettings = {...powerButtonDefaultSettings, ...(configData.config.settings || {})}; |
|||
const iconSize = resolveCssSize(configData.config.iconSize); |
|||
this.powerButtonWidgetConfigForm = this.fb.group({ |
|||
targetDevice: [configData.config.targetDevice, []], |
|||
|
|||
initialState: [settings.initialState, []], |
|||
onUpdateState: [settings.onUpdateState, []], |
|||
offUpdateState: [settings.offUpdateState, []], |
|||
disabledState: [settings.disabledState, []], |
|||
|
|||
layout: [settings.layout, []], |
|||
|
|||
showTitle: [configData.config.showTitle, []], |
|||
title: [configData.config.title, []], |
|||
titleFont: [configData.config.titleFont, []], |
|||
titleColor: [configData.config.titleColor, []], |
|||
|
|||
showIcon: [configData.config.showTitleIcon, []], |
|||
iconSize: [iconSize[0], [Validators.min(0)]], |
|||
iconSizeUnit: [iconSize[1], []], |
|||
icon: [configData.config.titleIcon, []], |
|||
iconColor: [configData.config.iconColor, []], |
|||
|
|||
mainColorOn: [settings.mainColorOn, []], |
|||
backgroundColorOn: [settings.backgroundColorOn, []], |
|||
|
|||
mainColorOff: [settings.mainColorOff, []], |
|||
backgroundColorOff: [settings.backgroundColorOff, []], |
|||
|
|||
mainColorDisabled: [settings.mainColorDisabled, []], |
|||
backgroundColorDisabled: [settings.backgroundColorDisabled, []], |
|||
|
|||
background: [settings.background, []], |
|||
|
|||
cardButtons: [this.getCardButtons(configData.config), []], |
|||
borderRadius: [configData.config.borderRadius, []], |
|||
|
|||
actions: [configData.config.actions || {}, []] |
|||
}); |
|||
} |
|||
|
|||
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
|||
this.widgetConfig.config.targetDevice = config.targetDevice; |
|||
|
|||
this.widgetConfig.config.showTitle = config.showTitle; |
|||
this.widgetConfig.config.title = config.title; |
|||
this.widgetConfig.config.titleFont = config.titleFont; |
|||
this.widgetConfig.config.titleColor = config.titleColor; |
|||
|
|||
this.widgetConfig.config.showTitleIcon = config.showIcon; |
|||
this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); |
|||
this.widgetConfig.config.titleIcon = config.icon; |
|||
this.widgetConfig.config.iconColor = config.iconColor; |
|||
|
|||
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
|||
|
|||
this.widgetConfig.config.settings.initialState = config.initialState; |
|||
this.widgetConfig.config.settings.onUpdateState = config.onUpdateState; |
|||
this.widgetConfig.config.settings.offUpdateState = config.offUpdateState; |
|||
this.widgetConfig.config.settings.disabledState = config.disabledState; |
|||
|
|||
this.widgetConfig.config.settings.layout = config.layout; |
|||
|
|||
this.widgetConfig.config.settings.mainColorOn = config.mainColorOn; |
|||
this.widgetConfig.config.settings.backgroundColorOn = config.backgroundColorOn; |
|||
|
|||
this.widgetConfig.config.settings.mainColorOff = config.mainColorOff; |
|||
this.widgetConfig.config.settings.backgroundColorOff = config.backgroundColorOff; |
|||
|
|||
this.widgetConfig.config.settings.mainColorDisabled = config.mainColorDisabled; |
|||
this.widgetConfig.config.settings.backgroundColorDisabled = config.backgroundColorDisabled; |
|||
|
|||
this.widgetConfig.config.settings.background = config.background; |
|||
|
|||
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
|||
this.widgetConfig.config.borderRadius = config.borderRadius; |
|||
|
|||
this.widgetConfig.config.actions = config.actions; |
|||
return this.widgetConfig; |
|||
} |
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return ['showTitle', 'showIcon']; |
|||
} |
|||
|
|||
protected updateValidators(emitEvent: boolean, trigger?: string) { |
|||
const showTitle: boolean = this.powerButtonWidgetConfigForm.get('showTitle').value; |
|||
const showIcon: boolean = this.powerButtonWidgetConfigForm.get('showIcon').value; |
|||
if (showTitle) { |
|||
this.powerButtonWidgetConfigForm.get('title').enable(); |
|||
this.powerButtonWidgetConfigForm.get('titleFont').enable(); |
|||
this.powerButtonWidgetConfigForm.get('titleColor').enable(); |
|||
this.powerButtonWidgetConfigForm.get('showIcon').enable({emitEvent: false}); |
|||
if (showIcon) { |
|||
this.powerButtonWidgetConfigForm.get('iconSize').enable(); |
|||
this.powerButtonWidgetConfigForm.get('iconSizeUnit').enable(); |
|||
this.powerButtonWidgetConfigForm.get('icon').enable(); |
|||
this.powerButtonWidgetConfigForm.get('iconColor').enable(); |
|||
} else { |
|||
this.powerButtonWidgetConfigForm.get('iconSize').disable(); |
|||
this.powerButtonWidgetConfigForm.get('iconSizeUnit').disable(); |
|||
this.powerButtonWidgetConfigForm.get('icon').disable(); |
|||
this.powerButtonWidgetConfigForm.get('iconColor').disable(); |
|||
} |
|||
} else { |
|||
this.powerButtonWidgetConfigForm.get('title').disable(); |
|||
this.powerButtonWidgetConfigForm.get('titleFont').disable(); |
|||
this.powerButtonWidgetConfigForm.get('titleColor').disable(); |
|||
this.powerButtonWidgetConfigForm.get('showIcon').disable({emitEvent: false}); |
|||
this.powerButtonWidgetConfigForm.get('iconSize').disable(); |
|||
this.powerButtonWidgetConfigForm.get('iconSizeUnit').disable(); |
|||
this.powerButtonWidgetConfigForm.get('icon').disable(); |
|||
this.powerButtonWidgetConfigForm.get('iconColor').disable(); |
|||
} |
|||
} |
|||
|
|||
private getCardButtons(config: WidgetConfig): string[] { |
|||
const buttons: string[] = []; |
|||
if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { |
|||
buttons.push('fullscreen'); |
|||
} |
|||
return buttons; |
|||
} |
|||
|
|||
private setCardButtons(buttons: string[], config: WidgetConfig) { |
|||
config.enableFullscreen = buttons.includes('fullscreen'); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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 class="tb-power-button-panel" [style]="backgroundStyle$ | async"> |
|||
<div class="tb-power-button-overlay" [style]="overlayStyle"></div> |
|||
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
|||
<div class="tb-power-button-content"> |
|||
<div #powerButtonShape class="tb-power-button-shape" [class.tb-power-button-pointer]="!disabled && (loading$ | async) === false"> |
|||
</div> |
|||
</div> |
|||
<mat-progress-bar class="tb-action-widget-progress" style="height: 4px;" color="accent" mode="indeterminate" *ngIf="loading$ | async"></mat-progress-bar> |
|||
<div *ngIf="error" class="tb-action-widget-error-container"> |
|||
<div class="tb-action-widget-error-panel"> |
|||
<div class="tb-action-widget-error-text" [innerHTML]="error | safe: 'html'"></div> |
|||
<button class="tb-action-widget-error-clear tb-mat-20" mat-icon-button (click)="clearError()"><mat-icon>close</mat-icon></button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,64 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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. |
|||
*/ |
|||
.tb-power-button-panel { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 16px; |
|||
padding: 20px 24px 24px 24px; |
|||
> div:not(.tb-power-button-overlay) { |
|||
z-index: 1; |
|||
} |
|||
.tb-power-button-overlay { |
|||
position: absolute; |
|||
top: 12px; |
|||
left: 12px; |
|||
bottom: 12px; |
|||
right: 12px; |
|||
} |
|||
div.tb-widget-title { |
|||
padding: 0; |
|||
} |
|||
.tb-power-button-content { |
|||
flex: 1; |
|||
min-width: 0; |
|||
min-height: 0; |
|||
.tb-power-button-shape { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
svg { |
|||
.tb-small-shadow { |
|||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.2)); |
|||
} |
|||
.tb-shadow { |
|||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15)); |
|||
} |
|||
} |
|||
&.tb-power-button-pointer { |
|||
svg { |
|||
.tb-hover-circle { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,203 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, |
|||
ChangeDetectorRef, |
|||
Component, |
|||
ElementRef, |
|||
OnDestroy, |
|||
OnInit, |
|||
Renderer2, |
|||
ViewChild, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { BasicActionWidgetComponent, ValueSetter } from '@home/components/widget/lib/action/action-widget.models'; |
|||
import { backgroundStyle, ComponentStyle, overlayStyle } from '@shared/models/widget-settings.models'; |
|||
import { Observable } from 'rxjs'; |
|||
import { ResizeObserver } from '@juggle/resize-observer'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { |
|||
powerButtonDefaultSettings, |
|||
PowerButtonShape, |
|||
powerButtonShapeSize, |
|||
PowerButtonWidgetSettings |
|||
} from '@home/components/widget/lib/rpc/power-button-widget.models'; |
|||
import { SVG, Svg } from '@svgdotjs/svg.js'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-power-button-widget', |
|||
templateUrl: './power-button-widget.component.html', |
|||
styleUrls: ['../action/action-widget.scss', './power-button-widget.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class PowerButtonWidgetComponent extends |
|||
BasicActionWidgetComponent implements OnInit, AfterViewInit, OnDestroy { |
|||
|
|||
@ViewChild('powerButtonShape', {static: false}) |
|||
powerButtonShape: ElementRef<HTMLElement>; |
|||
|
|||
settings: PowerButtonWidgetSettings; |
|||
|
|||
backgroundStyle$: Observable<ComponentStyle>; |
|||
overlayStyle: ComponentStyle = {}; |
|||
|
|||
value = false; |
|||
disabled = false; |
|||
|
|||
private shapeResize$: ResizeObserver; |
|||
private drawSvgShapePending = false; |
|||
private svgShape: Svg; |
|||
private powerButtonSvgShape: PowerButtonShape; |
|||
private disabledState = false; |
|||
|
|||
private onValueSetter: ValueSetter<boolean>; |
|||
private offValueSetter: ValueSetter<boolean>; |
|||
|
|||
constructor(protected imagePipe: ImagePipe, |
|||
protected sanitizer: DomSanitizer, |
|||
private renderer: Renderer2, |
|||
protected cd: ChangeDetectorRef) { |
|||
super(cd); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
super.ngOnInit(); |
|||
this.settings = {...powerButtonDefaultSettings, ...this.ctx.settings}; |
|||
|
|||
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
|||
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
|||
|
|||
const getInitialStateSettings = |
|||
{...this.settings.initialState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.initial-state')}; |
|||
this.createValueGetter(getInitialStateSettings, ValueType.BOOLEAN, { |
|||
next: (value) => this.onValue(value) |
|||
}); |
|||
|
|||
const disabledStateSettings = |
|||
{...this.settings.disabledState, actionLabel: this.ctx.translate.instant('widgets.rpc-state.disabled-state')}; |
|||
this.createValueGetter(disabledStateSettings, ValueType.BOOLEAN, { |
|||
next: (value) => this.onDisabled(value) |
|||
}); |
|||
|
|||
const onUpdateStateSettings = {...this.settings.onUpdateState, |
|||
actionLabel: this.ctx.translate.instant('widgets.power-button.power-on')}; |
|||
this.onValueSetter = this.createValueSetter(onUpdateStateSettings); |
|||
|
|||
const offUpdateStateSettings = {...this.settings.offUpdateState, |
|||
actionLabel: this.ctx.translate.instant('widgets.power-button.power-off')}; |
|||
this.offValueSetter = this.createValueSetter(offUpdateStateSettings); |
|||
|
|||
this.loading$.subscribe((loading) => { |
|||
this.updateDisabledState(loading || this.disabled); |
|||
this.cd.markForCheck(); |
|||
}); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
if (this.drawSvgShapePending) { |
|||
this.drawSvg(); |
|||
} |
|||
super.ngAfterViewInit(); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
if (this.shapeResize$) { |
|||
this.shapeResize$.disconnect(); |
|||
} |
|||
super.ngOnDestroy(); |
|||
} |
|||
|
|||
public onInit() { |
|||
super.onInit(); |
|||
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
|||
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
|||
if (this.powerButtonShape) { |
|||
this.drawSvg(); |
|||
} else { |
|||
this.drawSvgShapePending = true; |
|||
} |
|||
this.cd.detectChanges(); |
|||
} |
|||
|
|||
private onValue(value: boolean): void { |
|||
const newValue = !!value; |
|||
if (this.value !== newValue) { |
|||
this.value = newValue; |
|||
this.powerButtonSvgShape?.setValue(this.value); |
|||
this.cd.markForCheck(); |
|||
} |
|||
} |
|||
|
|||
private onDisabled(value: boolean): void { |
|||
const newDisabled = !!value; |
|||
if (this.disabled !== newDisabled) { |
|||
this.disabled = newDisabled; |
|||
this.updateDisabledState(this.disabled); |
|||
this.cd.markForCheck(); |
|||
} |
|||
} |
|||
|
|||
private onClick() { |
|||
if (!this.ctx.isEdit && !this.ctx.isPreview && !this.disabledState) { |
|||
this.onValue(!this.value); |
|||
const targetValue = this.value; |
|||
const targetSetter = targetValue ? this.onValueSetter : this.offValueSetter; |
|||
this.powerButtonSvgShape?.setPressed(true); |
|||
this.updateValue(targetSetter, targetValue, { |
|||
next: () => { |
|||
this.powerButtonSvgShape?.setPressed(false); |
|||
this.onValue(targetValue); |
|||
}, |
|||
error: () => { |
|||
this.powerButtonSvgShape?.setPressed(false); |
|||
this.onValue(!targetValue); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
private drawSvg() { |
|||
this.svgShape = SVG().addTo(this.powerButtonShape.nativeElement).size(powerButtonShapeSize, powerButtonShapeSize); |
|||
this.renderer.setStyle(this.svgShape.node, 'overflow', 'visible'); |
|||
this.renderer.setStyle(this.svgShape.node, 'user-select', 'none'); |
|||
|
|||
this.powerButtonSvgShape = PowerButtonShape.fromSettings(this.ctx, this.svgShape, |
|||
this.settings, this.value, this.disabledState, () => this.onClick()); |
|||
|
|||
this.shapeResize$ = new ResizeObserver(() => { |
|||
this.onResize(); |
|||
}); |
|||
this.shapeResize$.observe(this.powerButtonShape.nativeElement); |
|||
this.onResize(); |
|||
} |
|||
|
|||
private updateDisabledState(disabled: boolean) { |
|||
this.disabledState = disabled; |
|||
this.powerButtonSvgShape?.setDisabled(this.disabledState); |
|||
} |
|||
|
|||
private onResize() { |
|||
const shapeWidth = this.powerButtonShape.nativeElement.getBoundingClientRect().width; |
|||
const shapeHeight = this.powerButtonShape.nativeElement.getBoundingClientRect().height; |
|||
const size = Math.min(shapeWidth, shapeHeight); |
|||
const scale = size / powerButtonShapeSize; |
|||
this.renderer.setStyle(this.svgShape.node, 'transform', `scale(${scale})`); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,953 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { BackgroundSettings, BackgroundType } from '@shared/models/widget-settings.models'; |
|||
import { AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
|||
import { |
|||
DataToValueType, |
|||
GetValueAction, |
|||
GetValueSettings, |
|||
SetValueAction, |
|||
SetValueSettings, |
|||
ValueToDataType |
|||
} from '@shared/models/action-widget-settings.models'; |
|||
import { Circle, Effect, Element, G, Gradient, Runner, Svg, Text, Timeline } from '@svgdotjs/svg.js'; |
|||
import '@svgdotjs/svg.filter.js'; |
|||
import tinycolor from 'tinycolor2'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
|
|||
export enum PowerButtonLayout { |
|||
default = 'default', |
|||
simplified = 'simplified', |
|||
outlined = 'outlined', |
|||
default_volume = 'default_volume', |
|||
simplified_volume = 'simplified_volume', |
|||
outlined_volume = 'outlined_volume' |
|||
} |
|||
|
|||
export const powerButtonLayouts = Object.keys(PowerButtonLayout) as PowerButtonLayout[]; |
|||
|
|||
export const powerButtonLayoutTranslations = new Map<PowerButtonLayout, string>( |
|||
[ |
|||
[PowerButtonLayout.default, 'widgets.power-button.layout-default'], |
|||
[PowerButtonLayout.simplified, 'widgets.power-button.layout-simplified'], |
|||
[PowerButtonLayout.outlined, 'widgets.power-button.layout-outlined'], |
|||
[PowerButtonLayout.default_volume, 'widgets.power-button.layout-default-volume'], |
|||
[PowerButtonLayout.simplified_volume, 'widgets.power-button.layout-simplified-volume'], |
|||
[PowerButtonLayout.outlined_volume, 'widgets.power-button.layout-outlined-volume'] |
|||
] |
|||
); |
|||
|
|||
export const powerButtonLayoutImages = new Map<PowerButtonLayout, string>( |
|||
[ |
|||
[PowerButtonLayout.default, 'assets/widget/power-button/default-layout.svg'], |
|||
[PowerButtonLayout.simplified, 'assets/widget/power-button/simplified-layout.svg'], |
|||
[PowerButtonLayout.outlined, 'assets/widget/power-button/outlined-layout.svg'], |
|||
[PowerButtonLayout.default_volume, 'assets/widget/power-button/default-volume-layout.svg'], |
|||
[PowerButtonLayout.simplified_volume, 'assets/widget/power-button/simplified-volume-layout.svg'], |
|||
[PowerButtonLayout.outlined_volume, 'assets/widget/power-button/outlined-volume-layout.svg'] |
|||
] |
|||
); |
|||
|
|||
export interface PowerButtonWidgetSettings { |
|||
initialState: GetValueSettings<boolean>; |
|||
disabledState: GetValueSettings<boolean>; |
|||
onUpdateState: SetValueSettings; |
|||
offUpdateState: SetValueSettings; |
|||
layout: PowerButtonLayout; |
|||
mainColorOn: string; |
|||
backgroundColorOn: string; |
|||
mainColorOff: string; |
|||
backgroundColorOff: string; |
|||
mainColorDisabled: string; |
|||
backgroundColorDisabled: string; |
|||
background: BackgroundSettings; |
|||
} |
|||
|
|||
export const powerButtonDefaultSettings: PowerButtonWidgetSettings = { |
|||
initialState: { |
|||
action: GetValueAction.EXECUTE_RPC, |
|||
defaultValue: false, |
|||
executeRpc: { |
|||
method: 'getState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}, |
|||
disabledState: { |
|||
action: GetValueAction.DO_NOTHING, |
|||
defaultValue: false, |
|||
getAttribute: { |
|||
key: 'state', |
|||
scope: null |
|||
}, |
|||
getTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
dataToValue: { |
|||
type: DataToValueType.NONE, |
|||
compareToValue: true, |
|||
dataToValueFunction: '/* Should return boolean value */\nreturn data;' |
|||
} |
|||
}, |
|||
onUpdateState: { |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SHARED_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: ValueToDataType.CONSTANT, |
|||
constantValue: true, |
|||
valueToDataFunction: '/* Convert input boolean value to RPC parameters or attribute/time-series value */\nreturn value;' |
|||
} |
|||
}, |
|||
offUpdateState: { |
|||
action: SetValueAction.EXECUTE_RPC, |
|||
executeRpc: { |
|||
method: 'setState', |
|||
requestTimeout: 5000, |
|||
requestPersistent: false, |
|||
persistentPollingInterval: 1000 |
|||
}, |
|||
setAttribute: { |
|||
key: 'state', |
|||
scope: AttributeScope.SHARED_SCOPE |
|||
}, |
|||
putTimeSeries: { |
|||
key: 'state' |
|||
}, |
|||
valueToData: { |
|||
type: ValueToDataType.CONSTANT, |
|||
constantValue: false, |
|||
valueToDataFunction: '/* Convert input boolean value to RPC parameters or attribute/time-series value */ \n return value;' |
|||
} |
|||
}, |
|||
layout: PowerButtonLayout.default, |
|||
mainColorOn: '#3F52DD', |
|||
backgroundColorOn: '#FFFFFF', |
|||
mainColorOff: '#A2A2A2', |
|||
backgroundColorOff: '#FFFFFF', |
|||
mainColorDisabled: 'rgba(0,0,0,0.12)', |
|||
backgroundColorDisabled: '#FFFFFF', |
|||
background: { |
|||
type: BackgroundType.color, |
|||
color: '#fff', |
|||
overlay: { |
|||
enabled: false, |
|||
color: 'rgba(255,255,255,0.72)', |
|||
blur: 3 |
|||
} |
|||
} |
|||
}; |
|||
|
|||
interface PowerButtonColor { |
|||
hex: string; |
|||
opacity: number; |
|||
} |
|||
|
|||
type PowerButtonState = 'on' | 'off' | 'disabled'; |
|||
|
|||
interface PowerButtonColorState { |
|||
mainColor: PowerButtonColor; |
|||
backgroundColor: PowerButtonColor; |
|||
} |
|||
|
|||
type PowerButtonShapeColors = Record<PowerButtonState, PowerButtonColorState>; |
|||
|
|||
const createPowerButtonShapeColors = (settings: PowerButtonWidgetSettings): PowerButtonShapeColors => { |
|||
const mainColorOn = tinycolor(settings.mainColorOn); |
|||
const backgroundColorOn = tinycolor(settings.backgroundColorOn); |
|||
const mainColorOff = tinycolor(settings.mainColorOff); |
|||
const backgroundColorOff = tinycolor(settings.backgroundColorOff); |
|||
const mainColorDisabled = tinycolor(settings.mainColorDisabled); |
|||
const backgroundColorDisabled = tinycolor(settings.backgroundColorDisabled); |
|||
return { |
|||
on: { |
|||
mainColor: {hex: mainColorOn.toHexString(), opacity: mainColorOn.getAlpha()}, |
|||
backgroundColor: {hex: backgroundColorOn.toHexString(), opacity: backgroundColorOn.getAlpha()}, |
|||
}, |
|||
off: { |
|||
mainColor: {hex: mainColorOff.toHexString(), opacity: mainColorOff.getAlpha()}, |
|||
backgroundColor: {hex: backgroundColorOff.toHexString(), opacity: backgroundColorOff.getAlpha()}, |
|||
}, |
|||
disabled: { |
|||
mainColor: {hex: mainColorDisabled.toHexString(), opacity: mainColorDisabled.getAlpha()}, |
|||
backgroundColor: {hex: backgroundColorDisabled.toHexString(), opacity: backgroundColorDisabled.getAlpha()}, |
|||
} |
|||
}; |
|||
}; |
|||
|
|||
export const powerButtonShapeSize = 110; |
|||
const cx = powerButtonShapeSize / 2; |
|||
const cy = powerButtonShapeSize / 2; |
|||
|
|||
const powerButtonAnimation = (element: Element): Runner => element.animate(200, 0, 'now'); |
|||
|
|||
export abstract class PowerButtonShape { |
|||
|
|||
static fromSettings(ctx: WidgetContext, |
|||
svgShape: Svg, |
|||
settings: PowerButtonWidgetSettings, |
|||
value: boolean, |
|||
disabled: boolean, |
|||
onClick: () => void): PowerButtonShape { |
|||
switch (settings.layout) { |
|||
case PowerButtonLayout.default: |
|||
return new DefaultPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); |
|||
case PowerButtonLayout.simplified: |
|||
return new SimplifiedPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); |
|||
case PowerButtonLayout.outlined: |
|||
return new OutlinedPowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); |
|||
case PowerButtonLayout.default_volume: |
|||
return new DefaultVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); |
|||
case PowerButtonLayout.simplified_volume: |
|||
return new SimplifiedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); |
|||
case PowerButtonLayout.outlined_volume: |
|||
return new OutlinedVolumePowerButtonShape(ctx, svgShape, settings, value, disabled, onClick); |
|||
} |
|||
} |
|||
|
|||
protected readonly colors: PowerButtonShapeColors; |
|||
protected readonly onLabel: string; |
|||
protected readonly offLabel: string; |
|||
|
|||
protected backgroundShape: Circle; |
|||
protected hoverShape: Circle; |
|||
protected hovered = false; |
|||
protected pressed = false; |
|||
protected forcePressed = false; |
|||
|
|||
protected constructor(protected widgetContext: WidgetContext, |
|||
protected svgShape: Svg, |
|||
protected settings: PowerButtonWidgetSettings, |
|||
protected value: boolean, |
|||
protected disabled: boolean, |
|||
protected onClick: () => void) { |
|||
this.colors = createPowerButtonShapeColors(this.settings); |
|||
this.onLabel = this.widgetContext.translate.instant('widgets.power-button.on-label').toUpperCase(); |
|||
this.offLabel = this.widgetContext.translate.instant('widgets.power-button.off-label').toUpperCase(); |
|||
this._drawShape(); |
|||
} |
|||
|
|||
public setValue(value: boolean) { |
|||
if (this.value !== value) { |
|||
this.value = value; |
|||
this._drawState(); |
|||
} |
|||
} |
|||
|
|||
public setDisabled(disabled: boolean) { |
|||
if (this.disabled !== disabled) { |
|||
this.disabled = disabled; |
|||
this._drawState(); |
|||
} |
|||
} |
|||
|
|||
public setPressed(pressed: boolean) { |
|||
if (this.forcePressed !== pressed) { |
|||
this.forcePressed = pressed; |
|||
if (this.forcePressed && !this.pressed) { |
|||
this.onPressStart(); |
|||
} else if (!this.forcePressed && !this.pressed) { |
|||
this.onPressEnd(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private _drawShape() { |
|||
|
|||
this.backgroundShape = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
|
|||
this.drawShape(); |
|||
|
|||
this.hoverShape = this.svgShape.circle(powerButtonShapeSize).center(cx, cy).addClass('tb-hover-circle') |
|||
.fill({color: '#000000', opacity: 0}); |
|||
this.hoverShape.on('mouseover', () => { |
|||
this.hovered = true; |
|||
if (!this.disabled) { |
|||
this.hoverShape.timeline().finish(); |
|||
this.hoverShape.animate(200).attr({'fill-opacity': 0.06}); |
|||
} |
|||
}); |
|||
this.hoverShape.on('mouseout', () => { |
|||
this.hovered = false; |
|||
this.hoverShape.timeline().finish(); |
|||
this.hoverShape.animate(200).attr({'fill-opacity': 0}); |
|||
this._cancelPressed(); |
|||
}); |
|||
this.hoverShape.on('touchmove', (event: TouchEvent) => { |
|||
const touch = event.touches[0]; |
|||
const element = document.elementFromPoint(touch.pageX,touch.pageY); |
|||
if (this.hoverShape.node !== element) { |
|||
this._cancelPressed(); |
|||
} |
|||
}); |
|||
this.hoverShape.on('touchcancel', () => { |
|||
this._cancelPressed(); |
|||
}); |
|||
this.hoverShape.on('mousedown touchstart', (event: Event) => { |
|||
if (event.type === 'mousedown') { |
|||
if ((event as MouseEvent).button !== 0) { |
|||
return; |
|||
} |
|||
} |
|||
if (!this.disabled && !this.pressed) { |
|||
this.pressed = true; |
|||
if (!this.forcePressed) { |
|||
this.onPressStart(); |
|||
} |
|||
} |
|||
}); |
|||
this.hoverShape.on('mouseup touchend touchcancel', () => { |
|||
if (this.pressed && !this.disabled) { |
|||
this.onClick(); |
|||
} |
|||
this._cancelPressed(); |
|||
}); |
|||
this._drawState(); |
|||
} |
|||
|
|||
private _cancelPressed() { |
|||
if (this.pressed) { |
|||
this.pressed = false; |
|||
if (!this.forcePressed) { |
|||
this.onPressEnd(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
private _drawState() { |
|||
let colorState: PowerButtonColorState; |
|||
if (this.disabled) { |
|||
colorState = this.colors.disabled; |
|||
} else { |
|||
colorState = this.value ? this.colors.on : this.colors.off; |
|||
} |
|||
this.drawBackgroundState(colorState.backgroundColor); |
|||
this.drawColorState(colorState.mainColor); |
|||
if (this.value) { |
|||
this.drawOn(); |
|||
} else { |
|||
this.drawOff(); |
|||
} |
|||
if (this.disabled) { |
|||
this.hoverShape.timeline().finish(); |
|||
this.hoverShape.attr({'fill-opacity': 0}); |
|||
} else if (this.hovered) { |
|||
this.hoverShape.timeline().finish(); |
|||
this.hoverShape.animate(200).attr({'fill-opacity': 0.06}); |
|||
} |
|||
} |
|||
|
|||
private drawBackgroundState(backgroundColor: PowerButtonColor) { |
|||
this.backgroundShape.attr({ fill: backgroundColor.hex, 'fill-opacity': backgroundColor.opacity}); |
|||
} |
|||
|
|||
protected drawShape() {} |
|||
|
|||
protected drawColorState(_mainColor: PowerButtonColor) {} |
|||
|
|||
protected drawOff() {} |
|||
|
|||
protected drawOn() {} |
|||
|
|||
protected onPressStart() {} |
|||
|
|||
protected onPressEnd() {} |
|||
|
|||
protected createMask(shape: Element, maskElements: Element[]) { |
|||
const mask = |
|||
this.svgShape.mask().add(this.svgShape.rect().width('100%').height('100%').fill('#fff')); |
|||
maskElements.forEach(e => { |
|||
mask.add(e.fill('#000').attr({'fill-opacity': 1})); |
|||
}); |
|||
shape.maskWith(mask); |
|||
} |
|||
|
|||
protected createOnLabel(fontWeight = '500'): Text { |
|||
return this.createLabel(this.onLabel, fontWeight); |
|||
} |
|||
|
|||
protected createOffLabel(fontWeight = '500'): Text { |
|||
return this.createLabel(this.offLabel, fontWeight); |
|||
} |
|||
|
|||
private createLabel(text: string, fontWeight = '500'): Text { |
|||
return this.svgShape.text(text).font({ |
|||
family: 'Roboto', |
|||
weight: fontWeight, |
|||
style: 'normal', |
|||
size: '22px' |
|||
}).attr({x: '50%', y: '50%', 'text-anchor': 'middle', 'dominant-baseline': 'middle'}); |
|||
} |
|||
|
|||
} |
|||
|
|||
class InnerShadowCircle { |
|||
|
|||
private shadowCircle: Circle; |
|||
private blurEffect: Effect; |
|||
private offsetEffect: Effect; |
|||
private floodEffect: Effect; |
|||
|
|||
constructor(private svgShape: Svg, |
|||
private diameter: number, |
|||
private centerX: number, |
|||
private centerY: number, |
|||
private blur = 6, |
|||
private shadowOpacity = 0.6, |
|||
private dx = 0, |
|||
private dy = 0, |
|||
private shadowColor = '#000') { |
|||
|
|||
this.shadowCircle = this.svgShape.circle(this.diameter).center(this.centerX, this.centerY) |
|||
.fill({color: '#fff', opacity: 1}).stroke({width: 0}); |
|||
|
|||
this.shadowCircle.filterWith(add => { |
|||
add.x('-50%').y('-50%').width('200%').height('200%'); |
|||
let effect: Effect = add.componentTransfer(components => { |
|||
components.funcA({ type: 'table', tableValues: '1 0' }); |
|||
}).in(add.$fill); |
|||
effect = effect.gaussianBlur(this.blur, this.blur).attr({stdDeviation: this.blur}); |
|||
this.blurEffect = effect; |
|||
effect = effect.offset(this.dx, this.dy); |
|||
this.offsetEffect = effect; |
|||
effect = effect.flood(this.shadowColor, this.shadowOpacity); |
|||
this.floodEffect = effect; |
|||
effect = effect.composite(this.offsetEffect, 'in'); |
|||
effect.composite(add.$sourceAlpha, 'in'); |
|||
add.merge(m => { |
|||
m.mergeNode(add.$fill); |
|||
m.mergeNode(); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
public timeline(tl: Timeline): void { |
|||
this.blurEffect.timeline(tl); |
|||
this.offsetEffect.timeline(tl); |
|||
this.floodEffect.timeline(tl); |
|||
} |
|||
|
|||
public animate(blur: number, opacity: number, dx = 0, dy = 0): Runner { |
|||
powerButtonAnimation(this.blurEffect).attr({stdDeviation: blur}); |
|||
powerButtonAnimation(this.offsetEffect).attr({dx, dy}); |
|||
return powerButtonAnimation(this.floodEffect).attr({'flood-opacity': opacity}); |
|||
} |
|||
|
|||
public animateRestore(): Runner { |
|||
return this.animate(this.blur, this.shadowOpacity, this.dx, this.dy); |
|||
} |
|||
|
|||
public show(): void { |
|||
this.shadowCircle.show(); |
|||
} |
|||
|
|||
public hide(): void { |
|||
this.shadowCircle.hide(); |
|||
} |
|||
|
|||
} |
|||
|
|||
class DefaultPowerButtonShape extends PowerButtonShape { |
|||
|
|||
private outerBorder: Circle; |
|||
private outerBorderMask: Circle; |
|||
private offLabelShape: Text; |
|||
private onCircleShape: Circle; |
|||
private onLabelShape: Text; |
|||
private pressedShadow: InnerShadowCircle; |
|||
private pressedTimeline: Timeline; |
|||
private centerGroup: G; |
|||
|
|||
protected drawShape() { |
|||
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 20).center(cx, cy); |
|||
this.createMask(this.outerBorder, [this.outerBorderMask]); |
|||
this.centerGroup = this.svgShape.group(); |
|||
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup); |
|||
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 20) |
|||
.center(cx, cy); |
|||
this.onLabelShape = this.createOnLabel(); |
|||
this.createMask(this.onCircleShape, [this.onLabelShape]); |
|||
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 20, cx, cy, 0, 0); |
|||
|
|||
this.pressedTimeline = new Timeline(); |
|||
this.centerGroup.timeline(this.pressedTimeline); |
|||
this.onLabelShape.timeline(this.pressedTimeline); |
|||
this.pressedShadow.timeline(this.pressedTimeline); |
|||
} |
|||
|
|||
protected drawColorState(mainColor: PowerButtonColor) { |
|||
this.outerBorder.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} |
|||
|
|||
protected drawOff() { |
|||
this.outerBorderMask.radius((powerButtonShapeSize - 20)/2); |
|||
this.onCircleShape.hide(); |
|||
this.centerGroup.show(); |
|||
} |
|||
|
|||
protected drawOn() { |
|||
this.outerBorderMask.radius((powerButtonShapeSize - 2)/2); |
|||
this.centerGroup.hide(); |
|||
this.onCircleShape.show(); |
|||
} |
|||
|
|||
protected onPressStart() { |
|||
this.pressedTimeline.finish(); |
|||
const pressedScale = 0.75; |
|||
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale}); |
|||
this.pressedShadow.animate(6, 0.6); |
|||
} |
|||
|
|||
protected onPressEnd() { |
|||
this.pressedTimeline.finish(); |
|||
powerButtonAnimation(this.centerGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: 1}); |
|||
this.pressedShadow.animateRestore(); |
|||
} |
|||
|
|||
} |
|||
|
|||
class SimplifiedPowerButtonShape extends PowerButtonShape { |
|||
|
|||
private outerBorder: Circle; |
|||
private outerBorderMask: Circle; |
|||
private onCircleShape: Circle; |
|||
private offLabelShape: Text; |
|||
private onLabelShape: Text; |
|||
private pressedShadow: InnerShadowCircle; |
|||
private pressedTimeline: Timeline; |
|||
private centerGroup: G; |
|||
|
|||
protected drawShape() { |
|||
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 4).center(cx, cy); |
|||
this.createMask(this.outerBorder, [this.outerBorderMask]); |
|||
this.centerGroup = this.svgShape.group(); |
|||
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup); |
|||
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize).center(cx, cy); |
|||
this.onLabelShape = this.createOnLabel(); |
|||
this.createMask(this.onCircleShape, [this.onLabelShape]); |
|||
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 0, 0); |
|||
|
|||
this.pressedTimeline = new Timeline(); |
|||
this.centerGroup.timeline(this.pressedTimeline); |
|||
this.onLabelShape.timeline(this.pressedTimeline); |
|||
this.pressedShadow.timeline(this.pressedTimeline); |
|||
} |
|||
|
|||
protected drawColorState(mainColor: PowerButtonColor) { |
|||
this.outerBorder.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} |
|||
|
|||
protected drawOff() { |
|||
this.onCircleShape.hide(); |
|||
this.outerBorder.show(); |
|||
this.centerGroup.show(); |
|||
} |
|||
|
|||
protected drawOn() { |
|||
this.centerGroup.hide(); |
|||
this.outerBorder.hide(); |
|||
this.onCircleShape.show(); |
|||
} |
|||
|
|||
protected onPressStart() { |
|||
this.pressedTimeline.finish(); |
|||
const pressedScale = 0.75; |
|||
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale}); |
|||
this.pressedShadow.animate(6, 0.6); |
|||
} |
|||
|
|||
protected onPressEnd() { |
|||
this.pressedTimeline.finish(); |
|||
powerButtonAnimation(this.centerGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: 1}); |
|||
this.pressedShadow.animateRestore(); |
|||
} |
|||
} |
|||
|
|||
class OutlinedPowerButtonShape extends PowerButtonShape { |
|||
private outerBorder: Circle; |
|||
private outerBorderMask: Circle; |
|||
private innerBorder: Circle; |
|||
private innerBorderMask: Circle; |
|||
private offLabelShape: Text; |
|||
private onCircleShape: Circle; |
|||
private onLabelShape: Text; |
|||
private pressedShadow: InnerShadowCircle; |
|||
private pressedTimeline: Timeline; |
|||
private centerGroup: G; |
|||
private onCenterGroup: G; |
|||
|
|||
protected drawShape() { |
|||
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 2).center(cx, cy); |
|||
this.createMask(this.outerBorder, [this.outerBorderMask]); |
|||
this.innerBorder = this.svgShape.circle(powerButtonShapeSize - 20).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy); |
|||
this.createMask(this.innerBorder, [this.innerBorderMask]); |
|||
this.centerGroup = this.svgShape.group(); |
|||
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup); |
|||
this.onCenterGroup = this.svgShape.group(); |
|||
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 28).center(cx, cy) |
|||
.addTo(this.onCenterGroup); |
|||
this.onLabelShape = this.createOnLabel(); |
|||
this.createMask(this.onCircleShape, [this.onLabelShape]); |
|||
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 0, 0); |
|||
|
|||
this.pressedTimeline = new Timeline(); |
|||
this.centerGroup.timeline(this.pressedTimeline); |
|||
this.onCenterGroup.timeline(this.pressedTimeline); |
|||
this.onLabelShape.timeline(this.pressedTimeline); |
|||
this.pressedShadow.timeline(this.pressedTimeline); |
|||
} |
|||
|
|||
protected drawColorState(mainColor: PowerButtonColor) { |
|||
this.outerBorder.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.innerBorder.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} |
|||
|
|||
protected drawOff() { |
|||
this.onCenterGroup.hide(); |
|||
this.centerGroup.show(); |
|||
} |
|||
|
|||
protected drawOn() { |
|||
this.centerGroup.hide(); |
|||
this.onCenterGroup.show(); |
|||
} |
|||
|
|||
protected onPressStart() { |
|||
this.pressedTimeline.finish(); |
|||
const pressedScale = 0.75; |
|||
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); |
|||
powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98}); |
|||
this.pressedShadow.animate(6, 0.6); |
|||
} |
|||
|
|||
protected onPressEnd() { |
|||
this.pressedTimeline.finish(); |
|||
powerButtonAnimation(this.centerGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onCenterGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: 1}); |
|||
this.pressedShadow.animateRestore(); |
|||
} |
|||
} |
|||
|
|||
class DefaultVolumePowerButtonShape extends PowerButtonShape { |
|||
private outerBorder: Circle; |
|||
private outerBorderMask: Circle; |
|||
private outerBorderGradient: Gradient; |
|||
private innerBorder: Circle; |
|||
private innerBorderMask: Circle; |
|||
private innerBorderGradient: Gradient; |
|||
private innerShadow: InnerShadowCircle; |
|||
//private innerShadowGradient: Gradient;
|
|||
//private innerShadowGradientStop: Stop;
|
|||
private offLabelShape: Text; |
|||
private onCircleShape: Circle; |
|||
private onLabelShape: Text; |
|||
private pressedTimeline: Timeline; |
|||
private centerGroup: G; |
|||
|
|||
protected drawShape() { |
|||
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 20).center(cx, cy); |
|||
this.createMask(this.outerBorder, [this.outerBorderMask]); |
|||
this.outerBorderGradient = this.svgShape.gradient('linear', (add) => { |
|||
add.stop(0, '#CCCCCC', 1); |
|||
add.stop(1, '#FFFFFF', 1); |
|||
}).from(0.268, 0.92).to(0.832, 0.1188); |
|||
this.innerBorder = this.svgShape.circle(powerButtonShapeSize - 20).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy); |
|||
this.createMask(this.innerBorder, [this.innerBorderMask]); |
|||
this.innerBorderGradient = this.svgShape.gradient('linear', (add) => { |
|||
add.stop(0, '#CCCCCC', 1); |
|||
add.stop(1, '#FFFFFF', 1); |
|||
}).from(0.832, 0.1188).to(0.268, 0.92); |
|||
this.centerGroup = this.svgShape.group(); |
|||
this.offLabelShape = this.createOffLabel('400').addTo(this.centerGroup); |
|||
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 24).center(cx, cy); |
|||
this.onLabelShape = this.createOnLabel('400'); |
|||
this.createMask(this.onCircleShape, [this.onLabelShape]); |
|||
this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 24, cx, cy, 3, 0.3); |
|||
|
|||
this.pressedTimeline = new Timeline(); |
|||
this.centerGroup.timeline(this.pressedTimeline); |
|||
this.onLabelShape.timeline(this.pressedTimeline); |
|||
this.innerShadow.timeline(this.pressedTimeline); |
|||
} |
|||
|
|||
protected drawColorState(mainColor: PowerButtonColor){ |
|||
if (this.disabled) { |
|||
this.backgroundShape.removeClass('tb-small-shadow'); |
|||
if (!this.forcePressed) { |
|||
this.innerShadow.hide(); |
|||
} |
|||
this.outerBorder.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} else { |
|||
this.backgroundShape.addClass('tb-small-shadow'); |
|||
this.innerShadow.show(); |
|||
this.outerBorder.fill(this.outerBorderGradient); |
|||
this.outerBorder.attr({ 'fill-opacity': 1 }); |
|||
this.innerBorder.fill(this.innerBorderGradient); |
|||
this.innerBorder.attr({ 'fill-opacity': 1 }); |
|||
} |
|||
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} |
|||
|
|||
protected drawOff() { |
|||
this.onCircleShape.hide(); |
|||
this.centerGroup.show(); |
|||
this.innerBorder.show(); |
|||
} |
|||
|
|||
protected drawOn() { |
|||
if (this.disabled) { |
|||
this.innerBorder.hide(); |
|||
} else { |
|||
this.innerBorder.show(); |
|||
} |
|||
this.centerGroup.hide(); |
|||
this.onCircleShape.show(); |
|||
} |
|||
|
|||
protected onPressStart() { |
|||
this.pressedTimeline.finish(); |
|||
this.innerShadow.show(); |
|||
const pressedScale = 0.75; |
|||
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale}); |
|||
this.innerShadow.animate(6, 0.6); |
|||
} |
|||
|
|||
protected onPressEnd() { |
|||
this.pressedTimeline.finish(); |
|||
powerButtonAnimation(this.centerGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: 1}); |
|||
this.innerShadow.animateRestore().after(() => { |
|||
if (this.disabled) { |
|||
this.innerShadow.hide(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
|
|||
class SimplifiedVolumePowerButtonShape extends PowerButtonShape { |
|||
|
|||
private outerBorder: Circle; |
|||
private outerBorderMask: Circle; |
|||
private offLabelShape: Text; |
|||
private onLabelShape: Text; |
|||
private innerShadow: InnerShadowCircle; |
|||
private pressedShadow: InnerShadowCircle; |
|||
private pressedTimeline: Timeline; |
|||
private centerGroup: G; |
|||
private onCenterGroup: G; |
|||
|
|||
|
|||
protected drawShape() { |
|||
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({color: '#FAFAFA', opacity: 1}).stroke({width: 0}); |
|||
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 4).center(cx, cy); |
|||
this.createMask(this.outerBorder, [this.outerBorderMask]); |
|||
this.centerGroup = this.svgShape.group(); |
|||
this.offLabelShape = this.createOffLabel().addTo(this.centerGroup); |
|||
this.onCenterGroup = this.svgShape.group(); |
|||
this.onLabelShape = this.createOnLabel().addTo(this.onCenterGroup); |
|||
this.innerShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 3, 0.3); |
|||
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 4, cx, cy, 0, 0); |
|||
this.pressedTimeline = new Timeline(); |
|||
this.centerGroup.timeline(this.pressedTimeline); |
|||
this.onCenterGroup.timeline(this.pressedTimeline); |
|||
this.pressedShadow.timeline(this.pressedTimeline); |
|||
} |
|||
|
|||
protected drawColorState(mainColor: PowerButtonColor){ |
|||
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.onLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} |
|||
|
|||
protected drawOff() { |
|||
if (!this.pressed) { |
|||
this.backgroundShape.addClass('tb-shadow'); |
|||
} |
|||
this.innerShadow.hide(); |
|||
this.onCenterGroup.hide(); |
|||
this.centerGroup.show(); |
|||
} |
|||
|
|||
protected drawOn() { |
|||
this.backgroundShape.removeClass('tb-shadow'); |
|||
this.centerGroup.hide(); |
|||
this.onCenterGroup.show(); |
|||
this.innerShadow.show(); |
|||
} |
|||
|
|||
protected onPressStart() { |
|||
this.pressedTimeline.finish(); |
|||
const pressedScale = 0.75; |
|||
if (!this.value) { |
|||
this.backgroundShape.removeClass('tb-shadow'); |
|||
} |
|||
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); |
|||
powerButtonAnimation(this.onCenterGroup).transform({scale: pressedScale}); |
|||
this.pressedShadow.animate(8, 0.4); |
|||
} |
|||
|
|||
protected onPressEnd() { |
|||
this.pressedTimeline.finish(); |
|||
powerButtonAnimation(this.centerGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onCenterGroup).transform({scale: 1}); |
|||
this.pressedShadow.animateRestore().after(() => { |
|||
if (!this.value) { |
|||
this.backgroundShape.addClass('tb-shadow'); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
class OutlinedVolumePowerButtonShape extends PowerButtonShape { |
|||
private outerBorder: Circle; |
|||
private outerBorderMask: Circle; |
|||
private outerBorderGradient: Gradient; |
|||
private innerBorder: Circle; |
|||
private innerBorderMask: Circle; |
|||
private offLabelShape: Text; |
|||
private onCircleShape: Circle; |
|||
private onLabelShape: Text; |
|||
private pressedShadow: InnerShadowCircle; |
|||
private pressedTimeline: Timeline; |
|||
private centerGroup: G; |
|||
private onCenterGroup: G; |
|||
|
|||
protected drawShape() { |
|||
this.outerBorder = this.svgShape.circle(powerButtonShapeSize).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.outerBorderMask = this.svgShape.circle(powerButtonShapeSize - 20).center(cx, cy); |
|||
this.createMask(this.outerBorder, [this.outerBorderMask]); |
|||
this.outerBorderGradient = this.svgShape.gradient('linear', (add) => { |
|||
add.stop(0, '#CCCCCC', 1); |
|||
add.stop(1, '#FFFFFF', 1); |
|||
}).from(0.268, 0.92).to(0.832, 0.1188); |
|||
this.innerBorder = this.svgShape.circle(powerButtonShapeSize - 20).center(cx, cy) |
|||
.fill({opacity: 0}).stroke({width: 0}); |
|||
this.innerBorderMask = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy); |
|||
this.createMask(this.innerBorder, [this.innerBorderMask]); |
|||
this.centerGroup = this.svgShape.group(); |
|||
this.offLabelShape = this.createOffLabel('800').addTo(this.centerGroup); |
|||
this.onCenterGroup = this.svgShape.group(); |
|||
this.onCircleShape = this.svgShape.circle(powerButtonShapeSize - 30).center(cx, cy) |
|||
.addTo(this.onCenterGroup); |
|||
this.onLabelShape = this.createOnLabel('800'); |
|||
this.createMask(this.onCircleShape, [this.onLabelShape]); |
|||
this.pressedShadow = new InnerShadowCircle(this.svgShape, powerButtonShapeSize - 30, cx, cy, 0, 0); |
|||
this.backgroundShape.addClass('tb-small-shadow'); |
|||
|
|||
this.pressedTimeline = new Timeline(); |
|||
this.centerGroup.timeline(this.pressedTimeline); |
|||
this.onCenterGroup.timeline(this.pressedTimeline); |
|||
this.onLabelShape.timeline(this.pressedTimeline); |
|||
this.pressedShadow.timeline(this.pressedTimeline); |
|||
} |
|||
|
|||
protected drawColorState(mainColor: PowerButtonColor){ |
|||
if (this.disabled) { |
|||
this.outerBorder.attr({ fill: '#000000', 'fill-opacity': 0.03}); |
|||
} else { |
|||
this.outerBorder.fill(this.outerBorderGradient); |
|||
this.outerBorder.attr({ 'fill-opacity': 1 }); |
|||
} |
|||
this.innerBorder.attr({fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.offLabelShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
this.onCircleShape.attr({ fill: mainColor.hex, 'fill-opacity': mainColor.opacity}); |
|||
} |
|||
|
|||
protected drawOff() { |
|||
this.onCenterGroup.hide(); |
|||
this.centerGroup.show(); |
|||
this.innerBorder.show(); |
|||
} |
|||
|
|||
protected drawOn() { |
|||
this.innerBorder.hide(); |
|||
this.centerGroup.hide(); |
|||
this.onCenterGroup.show(); |
|||
} |
|||
|
|||
protected onPressStart() { |
|||
this.pressedTimeline.finish(); |
|||
const pressedScale = 0.75; |
|||
powerButtonAnimation(this.centerGroup).transform({scale: pressedScale}); |
|||
powerButtonAnimation(this.onCenterGroup).transform({scale: 0.98}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: pressedScale / 0.98}); |
|||
this.pressedShadow.animate(6, 0.6); |
|||
} |
|||
|
|||
protected onPressEnd() { |
|||
this.pressedTimeline.finish(); |
|||
powerButtonAnimation(this.centerGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onCenterGroup).transform({scale: 1}); |
|||
powerButtonAnimation(this.onLabelShape).transform({scale: 1}); |
|||
this.pressedShadow.animateRestore(); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,142 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<ng-container [formGroup]="powerButtonWidgetSettingsForm"> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.power-button.behavior</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.initial-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
trueLabel="widgets.rpc-state.on" |
|||
falseLabel="widgets.rpc-state.off" |
|||
stateLabel="widgets.rpc-state.on" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="initialState"></tb-get-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-on-hint' | translate}}" translate>widgets.power-button.power-on</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.power-button.power-on " |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="onUpdateState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.power-button.power-off-hint' | translate}}" translate>widgets.power-button.power-off</div> |
|||
<tb-set-value-action-settings fxFlex |
|||
panelTitle="widgets.power-button.power-off" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="offUpdateState"></tb-set-value-action-settings> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div> |
|||
<tb-get-value-action-settings fxFlex |
|||
panelTitle="widgets.rpc-state.disabled-state" |
|||
[valueType]="valueType.BOOLEAN" |
|||
stateLabel="widgets.rpc-state.disabled" |
|||
[aliasController]="aliasController" |
|||
[targetDevice]="targetDevice" |
|||
[widgetType]="widgetType" |
|||
formControlName="disabledState"></tb-get-value-action-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widget-config.card-style</div> |
|||
<tb-image-cards-select rowHeight="1:1" |
|||
[cols]="{columns: 3, |
|||
breakpoints: { |
|||
'lt-sm': 1, |
|||
'lt-md': 2 |
|||
}}" |
|||
label="{{ 'widgets.power-button.layout' | translate }}" formControlName="layout"> |
|||
<tb-image-cards-select-option *ngFor="let layout of powerButtonLayouts" |
|||
[value]="layout" |
|||
[image]="powerButtonLayoutImageMap.get(layout)"> |
|||
{{ powerButtonLayoutTranslationMap.get(layout) | translate }} |
|||
</tb-image-cards-select-option> |
|||
</tb-image-cards-select> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.background.background' | translate }}</div> |
|||
<tb-background-settings formControlName="background"> |
|||
</tb-background-settings> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel"> |
|||
<div class="tb-form-panel-title" translate>widgets.power-button.button</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.power-button.power-on-colors' | translate }}</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOn"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.power-button.power-off-colors' | translate }}</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorOff"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorOff"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-row space-between"> |
|||
<div>{{ 'widgets.power-button.disabled-colors' | translate }}</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.main</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="mainColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
<mat-divider vertical></mat-divider> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<div translate>widgets.power-button.background</div> |
|||
<tb-color-input asBoxInput |
|||
formControlName="backgroundColorDisabled"> |
|||
</tb-color-input> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
@ -0,0 +1,88 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { Component } from '@angular/core'; |
|||
import { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models'; |
|||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ValueType } from '@shared/models/constants'; |
|||
import { |
|||
powerButtonDefaultSettings, |
|||
powerButtonLayoutImages, |
|||
powerButtonLayouts, |
|||
powerButtonLayoutTranslations |
|||
} from '@home/components/widget/lib/rpc/power-button-widget.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-power-button-widget-settings', |
|||
templateUrl: './power-button-widget-settings.component.html', |
|||
styleUrls: ['./../widget-settings.scss'] |
|||
}) |
|||
export class PowerButtonWidgetSettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
get targetDevice(): TargetDevice { |
|||
return this.widgetConfig?.config?.targetDevice; |
|||
} |
|||
|
|||
get widgetType(): widgetType { |
|||
return this.widgetConfig?.widgetType; |
|||
} |
|||
|
|||
powerButtonLayouts = powerButtonLayouts; |
|||
|
|||
powerButtonLayoutTranslationMap = powerButtonLayoutTranslations; |
|||
powerButtonLayoutImageMap = powerButtonLayoutImages; |
|||
|
|||
valueType = ValueType; |
|||
|
|||
powerButtonWidgetSettingsForm: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: UntypedFormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): UntypedFormGroup { |
|||
return this.powerButtonWidgetSettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return {...powerButtonDefaultSettings}; |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.powerButtonWidgetSettingsForm = this.fb.group({ |
|||
initialState: [settings.initialState, []], |
|||
onUpdateState: [settings.onUpdateState, []], |
|||
offUpdateState: [settings.offUpdateState, []], |
|||
disabledState: [settings.disabledState, []], |
|||
|
|||
layout: [settings.layout, []], |
|||
|
|||
mainColorOn: [settings.mainColorOn, []], |
|||
backgroundColorOn: [settings.backgroundColorOn, []], |
|||
|
|||
mainColorOff: [settings.mainColorOff, []], |
|||
backgroundColorOff: [settings.backgroundColorOff, []], |
|||
|
|||
mainColorDisabled: [settings.mainColorDisabled, []], |
|||
backgroundColorDisabled: [settings.backgroundColorDisabled, []], |
|||
|
|||
background: [settings.background, []] |
|||
}); |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
Loading…
Reference in new issue