Add native PTZ element.
This commit is contained in:
Dermot Duffy
+132
-12
@@ -1,28 +1,39 @@
|
||||
import { HomeAssistant } from 'custom-card-helpers';
|
||||
import { HASSDomEvent, HomeAssistant } from 'custom-card-helpers';
|
||||
import {
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
unsafeCSS
|
||||
unsafeCSS,
|
||||
} from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
|
||||
import { localize } from '../localize/localize.js';
|
||||
import elementsStyle from '../scss/elements.scss';
|
||||
import ptzStyle from '../scss/elements-ptz.scss';
|
||||
import {
|
||||
Actions,
|
||||
ActionsConfig,
|
||||
FrigateCardError,
|
||||
FrigateCardPTZConfig,
|
||||
FrigateConditional,
|
||||
MenuButton,
|
||||
MenuIcon,
|
||||
MenuStateIcon,
|
||||
MenuSubmenu,
|
||||
MenuSubmenuSelect,
|
||||
PictureElements
|
||||
PictureElements,
|
||||
} from '../types.js';
|
||||
import { dispatchFrigateCardEvent } from '../utils/basic.js';
|
||||
import { dispatchFrigateCardErrorEvent } from './message.js';
|
||||
import { actionHandler } from '../action-handler-directive.js';
|
||||
import {
|
||||
frigateCardHandleActionConfig,
|
||||
frigateCardHasAction,
|
||||
getActionConfigGivenAction,
|
||||
} from '../utils/action.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
|
||||
/* A note on picture element rendering:
|
||||
*
|
||||
@@ -343,14 +354,123 @@ export class FrigateCardElementsMenuSubmenu extends FrigateCardElementsBaseMenuI
|
||||
@customElement('frigate-card-menu-submenu-select')
|
||||
export class FrigateCardElementsMenuSubmenuSelect extends FrigateCardElementsBaseMenuIcon<MenuSubmenuSelect> {}
|
||||
|
||||
@customElement('frigate-card-ptz')
|
||||
export class FrigateCardPTZ extends LitElement {
|
||||
@property({ attribute: false })
|
||||
public hass?: HomeAssistant;
|
||||
|
||||
@state()
|
||||
protected _config: FrigateCardPTZConfig | null = null;
|
||||
|
||||
/**
|
||||
* Set the card config.
|
||||
* @param config The configuration.
|
||||
*/
|
||||
public setConfig(config: FrigateCardPTZConfig): void {
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Called before each update.
|
||||
*/
|
||||
protected willUpdate(changedProps: PropertyValues): void {
|
||||
if (changedProps.has('_config')) {
|
||||
this.setAttribute('data-orientation', this._config?.orientation ?? 'vertical');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a PTZ action.
|
||||
* @param ev The actionHandler event.
|
||||
* @param config The action configuration.
|
||||
*/
|
||||
protected _actionHandler(
|
||||
ev: HASSDomEvent<{ action: string }>,
|
||||
config?: ActionsConfig,
|
||||
): void {
|
||||
// Nothing else has the configuration for this action, so don't let it
|
||||
// propagate further.
|
||||
ev.stopPropagation();
|
||||
|
||||
const interaction: string = ev.detail.action;
|
||||
const action = getActionConfigGivenAction(interaction, config);
|
||||
if (config && action && this.hass) {
|
||||
frigateCardHandleActionConfig(this, this.hass, config, interaction, action);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the elements.
|
||||
* @returns A rendered template or void.
|
||||
*/
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this._config) {
|
||||
return;
|
||||
}
|
||||
const renderIcon = (
|
||||
name: string,
|
||||
icon: string,
|
||||
actions?: Actions,
|
||||
): TemplateResult => {
|
||||
const hasHold = frigateCardHasAction(actions?.hold_action);
|
||||
const hasDoubleClick = frigateCardHasAction(actions?.double_tap_action);
|
||||
const classes = {
|
||||
[name]: true,
|
||||
disabled: !actions,
|
||||
};
|
||||
|
||||
return html`<ha-icon
|
||||
class=${classMap(classes)}
|
||||
icon=${icon}
|
||||
.actionHandler=${actionHandler({
|
||||
hasHold: hasHold,
|
||||
hasDoubleClick: hasDoubleClick,
|
||||
})}
|
||||
.title=${localize(`elements.ptz.${name}`)}
|
||||
@action=${(ev) => this._actionHandler(ev, actions)}
|
||||
></ha-icon>`;
|
||||
};
|
||||
|
||||
return html` <div class="ptz">
|
||||
<div class="ptz-move">
|
||||
${renderIcon('right', 'mdi:arrow-right', this._config.actions_right)}
|
||||
${renderIcon('left', 'mdi:arrow-left', this._config.actions_left)}
|
||||
${renderIcon('up', 'mdi:arrow-up', this._config.actions_up)}
|
||||
${renderIcon('down', 'mdi:arrow-down', this._config.actions_down)}
|
||||
</div>
|
||||
${this._config.actions_zoom_in || this._config.actions_zoom_out
|
||||
? html` <div class="ptz-zoom">
|
||||
${renderIcon('zoom_in', 'mdi:plus', this._config.actions_zoom_in)}
|
||||
${renderIcon('zoom_out', 'mdi:minus', this._config.actions_zoom_out)}
|
||||
</div>`
|
||||
: html``}
|
||||
${this._config.actions_home
|
||||
? html`
|
||||
<div class="ptz-home">
|
||||
${renderIcon('home', 'mdi:home', this._config.actions_home)}
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Return compiled CSS styles.
|
||||
*/
|
||||
static get styles(): CSSResultGroup {
|
||||
return unsafeCSS(ptzStyle);
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"frigate-card-conditional": FrigateCardElementsConditional
|
||||
"frigate-card-elements": FrigateCardElements
|
||||
"frigate-card-menu-submenu-select": FrigateCardElementsMenuSubmenuSelect
|
||||
"frigate-card-menu-submenu": FrigateCardElementsMenuSubmenu
|
||||
"frigate-card-menu-state-icon": FrigateCardElementsMenuStateIcon
|
||||
"frigate-card-menu-icon": FrigateCardElementsMenuIcon
|
||||
"frigate-card-elements-core": FrigateCardElementsCore
|
||||
}
|
||||
interface HTMLElementTagNameMap {
|
||||
'frigate-card-conditional': FrigateCardElementsConditional;
|
||||
'frigate-card-elements': FrigateCardElements;
|
||||
'frigate-card-menu-submenu-select': FrigateCardElementsMenuSubmenuSelect;
|
||||
'frigate-card-menu-submenu': FrigateCardElementsMenuSubmenu;
|
||||
'frigate-card-menu-state-icon': FrigateCardElementsMenuStateIcon;
|
||||
'frigate-card-menu-icon': FrigateCardElementsMenuIcon;
|
||||
'frigate-card-elements-core': FrigateCardElementsCore;
|
||||
'frigate-card-ptz': FrigateCardPTZ;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,5 +372,16 @@
|
||||
"no_thumbnail": "No thumbnail available",
|
||||
"retain_indefinitely": "Event will be indefinitely retained",
|
||||
"timeline": "See event in timeline"
|
||||
},
|
||||
"elements": {
|
||||
"ptz": {
|
||||
"up": "Up",
|
||||
"down": "Down",
|
||||
"left": "Left",
|
||||
"right": "Right",
|
||||
"zoom_in": "Zoom In",
|
||||
"zoom_out": "Zoom Out",
|
||||
"home": "Home"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
// Modified from / inspired by:
|
||||
// https://github.com/AlexxIT/WebRTC/blob/master/custom_components/webrtc/www/webrtc-camera.js
|
||||
:host {
|
||||
position: relative;
|
||||
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
|
||||
--frigate-card-ptz-icon-size: 24px;
|
||||
}
|
||||
|
||||
/*****************
|
||||
* Main Containers
|
||||
*****************/
|
||||
.ptz {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
color: var(--light-primary-color);
|
||||
opacity: 0.4;
|
||||
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
:host([data-orientation='vertical']) .ptz {
|
||||
flex-direction: column;
|
||||
}
|
||||
:host([data-orientation='horizontal']) .ptz {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.ptz:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:host([data-orientation='vertical']) .ptz div {
|
||||
width: calc(var(--frigate-card-ptz-icon-size) * 3);
|
||||
}
|
||||
:host([data-orientation='horizontal']) .ptz div {
|
||||
height: calc(var(--frigate-card-ptz-icon-size) * 3);
|
||||
}
|
||||
|
||||
.ptz-move,
|
||||
.ptz-zoom,
|
||||
.ptz-home {
|
||||
position: relative;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.ptz-move {
|
||||
height: calc(var(--frigate-card-ptz-icon-size) * 3);
|
||||
width: calc(var(--frigate-card-ptz-icon-size) * 3);
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
:host([data-orientation='horizontal']) .ptz .ptz-zoom,
|
||||
:host([data-orientation='horizontal']) .ptz .ptz-home {
|
||||
width: calc(var(--frigate-card-ptz-icon-size) * 1.5);
|
||||
}
|
||||
:host([data-orientation='vertical']) .ptz .ptz-zoom,
|
||||
:host([data-orientation='vertical']) .ptz .ptz-home {
|
||||
height: calc(var(--frigate-card-ptz-icon-size) * 1.5);
|
||||
}
|
||||
|
||||
.ptz-zoom,
|
||||
.ptz-home {
|
||||
border-radius: var(--ha-card-border-radius, 4px);
|
||||
}
|
||||
|
||||
/***********
|
||||
* PTZ Icons
|
||||
***********/
|
||||
ha-icon {
|
||||
position: absolute;
|
||||
--mdc-icon-size: var(--frigate-card-ptz-icon-size);
|
||||
}
|
||||
ha-icon:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.disabled {
|
||||
color: var(--disabled-text-color);
|
||||
}
|
||||
.up {
|
||||
top: 5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.down {
|
||||
bottom: 5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.left {
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.right {
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
:host([data-orientation='vertical']) .zoom_in {
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
}
|
||||
:host([data-orientation='vertical']) .zoom_out {
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
}
|
||||
:host([data-orientation='horizontal']) .zoom_in {
|
||||
left: 50%;
|
||||
top: 5px;
|
||||
}
|
||||
:host([data-orientation='horizontal']) .zoom_out {
|
||||
left: 50%;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
:host([data-orientation='vertical']) .zoom_in,
|
||||
:host([data-orientation='vertical']) .zoom_out {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
:host([data-orientation='horizontal']) .zoom_in,
|
||||
:host([data-orientation='horizontal']) .zoom_out {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.home {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
@@ -499,6 +499,47 @@ const frigateConditionalSchema = z.object({
|
||||
});
|
||||
export type FrigateConditional = z.infer<typeof frigateConditionalSchema>;
|
||||
|
||||
const frigateCardPTZSchema = z.preprocess(
|
||||
// To avoid lots of YAML duplication, provide an easy way to just specify the
|
||||
// service data as actions for each PTZ icon, and it will be preprocessed into
|
||||
// the full form. This also provides compatability with the AlexIT/WebRTC PTZ
|
||||
// configuration.
|
||||
(data) => {
|
||||
if (!data || typeof data !== 'object' || !data['service']) {
|
||||
return data;
|
||||
}
|
||||
const out = { ...data };
|
||||
['left', 'right', 'up', 'down', 'zoom_in', 'zoom_out', 'home'].forEach((name) => {
|
||||
if (`data_${name}` in data && !(`actions_${name}` in data)) {
|
||||
out[`actions_${name}`] = {
|
||||
tap_action: {
|
||||
action: 'call-service',
|
||||
service: data['service'],
|
||||
service_data: data[`data_${name}`],
|
||||
},
|
||||
};
|
||||
delete out[`data_${name}`];
|
||||
}
|
||||
});
|
||||
return out;
|
||||
},
|
||||
z.object({
|
||||
type: z.literal('custom:frigate-card-ptz'),
|
||||
style: z.object({}).passthrough().optional(),
|
||||
orientation: z.enum(['vertical', 'horizontal']).default('vertical').optional(),
|
||||
service: z.string().optional(),
|
||||
actions_left: actionsBaseSchema.optional(),
|
||||
actions_right: actionsBaseSchema.optional(),
|
||||
actions_up: actionsBaseSchema.optional(),
|
||||
actions_down: actionsBaseSchema.optional(),
|
||||
actions_zoom_in: actionsBaseSchema.optional(),
|
||||
actions_zoom_out: actionsBaseSchema.optional(),
|
||||
actions_home: actionsBaseSchema.optional(),
|
||||
}),
|
||||
);
|
||||
|
||||
export type FrigateCardPTZConfig = z.infer<typeof frigateCardPTZSchema>;
|
||||
|
||||
// Cannot use discriminatedUnion since customSchema uses a superRefine, which
|
||||
// causes false rejections.
|
||||
const pictureElementSchema = z.union([
|
||||
@@ -507,6 +548,7 @@ const pictureElementSchema = z.union([
|
||||
menuSubmenuSchema,
|
||||
menuSubmenuSelectSchema,
|
||||
frigateConditionalSchema,
|
||||
frigateCardPTZSchema,
|
||||
stateBadgeIconSchema,
|
||||
stateIconSchema,
|
||||
stateLabelSchema,
|
||||
|
||||
Reference in New Issue
Block a user