LoveLace Light Card by zsarnett · Pull Request #1874 · home-assistant/frontend

zsarnett · 2018-10-27T08:24:49Z

I put this together while not knowing what to do with a websocket call

Configuration Variables

Name	Type	Default	Description
type	string	Required	`light`
entity	string	optional	Required `light.my_light`
name	string	friendly_name	Name of card

Example

- type: light
  entity: light.living_room

- type: entity-button
  entity: light.bedroom
  name: Living Room

src/panels/lovelace/cards/hui-light-card.ts

balloob · 2018-10-27T09:04:30Z

What happens if light supports no brightness?

zsarnett · 2018-10-27T09:36:02Z

What happens if light supports no brightness?

If it has no brightness its set to 0% or off. The only time it should have no brightness. If the entity they are using has no brightness use the button card :)

zsarnett · 2018-10-27T14:05:01Z

Made the Brightness Percentage above Name so that a longer name can be added.

src/panels/lovelace/cards/hui-light-card.ts

balloob · 2018-10-28T18:58:28Z

Can you add a demo

balloob · 2018-10-28T20:43:17Z

https://deploy-preview-1874--home-assistant-lovelace-gallery.netlify.com/#demo-hui-light-card

When I click on the slider rail (not the slider knob), it toggles the light. That's not what I would expect. The toggle area of the icon should be limited to the icon only.

The slider knob is not centered on the rail:

I don't think that we should always show percentage. Maybe we can only show it when dragging as an overlay on the icon?

gallery/src/demos/demo-hui-light-card.js

src/panels/lovelace/cards/hui-light-card.ts

zsarnett · 2018-10-28T21:16:35Z

~~I can not replicate the clicking on the rail toggling the light effect~~

I see the effect in the gallery

balloob · 2018-10-29T07:20:39Z

The middle of the icon is not clickable because the brightness label still exists when not in use:

balloob · 2018-10-29T07:21:44Z

In demos, clicking on the rail works: http://roundsliderui.com/demos.html

In this implementation, it doesn't.

balloob · 2018-10-29T07:24:57Z

src/panels/lovelace/cards/hui-light-card.ts

+  }
+
+  private _hideBrightness() {
+    brightnessTimout = setTimeout(() => {


You think that it's a good idea to share a timeout between all instances of this element?

Nope. Meant to make a comment on the best way to do this. This is how it's done for the notification drawer but there is one of those.

what about an instance variable? this._brightnessTimeout

I'm always so conflicted when creating properties in LitElement. I would need to set that as private _brightneesTimeout?: Any;

Never use any. Hover with your mouse over setTimeout, what is the defined returned value?

With TS you have to define the type like you said, then just assign it wherever you want yes.

src/panels/lovelace/cards/hui-light-card.ts

balloob · 2018-10-29T07:27:00Z

src/panels/lovelace/cards/hui-light-card.ts

+    return `brightness(${(brightness + 245) / 5}%)`;
+  }
+
+  private _computeColor(stateObj) {


Can you add a type for light state objects like we have for climate?

marked as resolved but this state object does not have a type yet. Add types to all functions you define in your class.

balloob · 2018-10-29T07:28:28Z

src/panels/lovelace/cards/hui-light-card.ts

+        padding-top: 40px;
+        font-size: 1.2rem;
+      }
+      .brightness {


The text is not always very visible as the icon color, which is the background of brightness, changes.

Added a stroke to it but not sure how material design esque this is

it's a good start, we can iterate on it.

zsarnett · 2018-10-29T13:10:30Z

@balloob clicking the slider rail works in the demo of round slider because they aren't using a custom overlay for the tool tip. Because we are the overlay is above the rail and can't make it a higher z index with out overlaying a white background on our tool tip. At least when I try to change the zindex of the rail that's what I get

frenck · 2018-10-29T13:59:05Z

Just a small note: Could not find a related PR on the documentation repository.

balloob · 2018-10-29T18:02:24Z

script/version_bump.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node


Nice script.

balloob · 2018-10-29T18:03:07Z

src/panels/lovelace/cards/hui-light-card.ts

+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private brightnessTimout?: any;


let's prefix names of private vars with _. I know it's "double", but we're also interacting with JS and they don't know the concept of private.

If you don't know the type, you can hover with your mouse on the function (if it's a built-in), otherwise use unknown. With unknown, you are not allowed to do any operation besides passing it on or comparing it, until you know the type. With any, anything goes and we're back to caveman untyped world.

Gotcha. I started to do that that but it was a NodeJS Type so I left it off. I added it in because it was accepted with no errors

balloob · 2018-10-29T18:07:40Z

src/panels/lovelace/cards/hui-light-card.ts

+  private _setBrightness(e) {
+    this.hass!.callService("light", "turn_on", {
+      entity_id: this._config!.entity,
+      brightness_pct: e.value,


Now I know why the gallery is flaky. We don't have support for brightness_pct in our demo hass for the gallery.

How can I add that?

Where did you look?

You need to update the logic here https://github.com/home-assistant/home-assistant-polymer/blob/dev/gallery/src/data/entity.js#L56-L65

src/panels/lovelace/cards/hui-light-card.ts

balloob · 2018-10-29T20:40:38Z

src/panels/lovelace/cards/hui-light-card.ts

+  implements LovelaceCard {
+  public hass?: HomeAssistant;
+  private _config?: Config;
+  private _brightnessTimout?: NodeJS.Timer;


We're running in a browser, not under NodeJS. Also:

number

When changing to number I am getting Type Time is not assignable to Type Number here: this._brightnessTimout = setTimeout(() => {

I think Node is messing with things or something.. Because researching setTimeout shows it returns a "unique" number that is used when clearing the timeout

Fix this by using window.setTimeout so node doesnt overload

balloob

ok to merge when fixing type of setTimeout.

homeassistant added the cla-signed label Oct 27, 2018

ghost assigned zsarnett Oct 27, 2018

ghost added the in progress label Oct 27, 2018

balloob changed the base branch from master to dev October 27, 2018 08:54

balloob reviewed Oct 27, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

balloob reviewed Oct 27, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

zsarnett commented Oct 27, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

gallery/src/demos/demo-hui-light-card.js Outdated Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

gallery/src/demos/demo-hui-light-card.js Outdated Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

balloob reviewed Oct 28, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

cgarwood added the hacktoberfest label Oct 28, 2018

balloob reviewed Oct 29, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

balloob reviewed Oct 29, 2018

View reviewed changes

zsarnett force-pushed the light-card branch from 1b2bd0e to 6441216 Compare October 29, 2018 14:07

zsarnett added the Documentation Needed label Oct 29, 2018

balloob reviewed Oct 29, 2018

View reviewed changes

src/panels/lovelace/cards/hui-light-card.ts Outdated Show resolved Hide resolved

Light Card addition

7178d20

zsarnett force-pushed the light-card branch from d88bbba to 7178d20 Compare October 29, 2018 18:36

balloob reviewed Oct 29, 2018

View reviewed changes

balloob approved these changes Oct 29, 2018

View reviewed changes

zsarnett added 5 commits October 29, 2018 18:07

Fixing Gallery and updating timeout type

bb4ce27

Adding Type to Returns

1fcf510

Adding more types

410b66d

Add Hs_color to types

f7458b8

UPdate Type for color

a530411

zsarnett force-pushed the light-card branch from db06637 to a530411 Compare October 30, 2018 03:14

zsarnett merged commit 2262031 into home-assistant:dev Oct 30, 2018

ghost removed the in progress label Oct 30, 2018

zsarnett deleted the light-card branch October 30, 2018 03:39

zsarnett mentioned this pull request Oct 30, 2018

Adding Light Card Docs home-assistant/home-assistant.io#7264

Merged

2 tasks

balloob mentioned this pull request Nov 3, 2018

Beta release: 20181030.0 + 20181103.0 #1974

Merged

bramkragten mentioned this pull request Oct 20, 2020

Light hui & more-info card fixes #7397

Merged

9 tasks

github-actions bot locked and limited conversation to collaborators Jul 7, 2022

Conversation

zsarnett commented Oct 27, 2018

Configuration Variables

Example

Uh oh!

Uh oh!

Uh oh!

balloob commented Oct 27, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zsarnett commented Oct 27, 2018

Uh oh!

zsarnett commented Oct 27, 2018

Uh oh!

Uh oh!

balloob commented Oct 28, 2018

Uh oh!

balloob commented Oct 28, 2018

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

zsarnett commented Oct 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

balloob commented Oct 29, 2018

Uh oh!

balloob commented Oct 29, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zsarnett commented Oct 29, 2018

Uh oh!

frenck commented Oct 29, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

balloob commented Oct 27, 2018 •

edited

Loading

zsarnett commented Oct 28, 2018 •

edited

Loading