#devs_frontend-archived

1 messages · Page 65 of 1

true mist
#

Specifically I want to develop a custom card so I don't need a full home assistant environment but just need to run home assistant

true mist
#

NVM found the boilerplate card repo

elder cypress
#

You can but shouldn't, its not support method and will get out of date quickly. You should just customise using dashboards, custom cards or contribute changes back to dev.

rugged basalt
#

The frontend is an integration like any other. It can be overridden by a custom one like any other. The frontend repo compiles down to a PyPI package which the integration installs and serves.

ashen lotus
#

has there been any change in the latest frontend 20220322.0 - so it doesnt update the entities rendering per state change? Asking because 'my' custom-ui uses templates like input_select.select_flash_color: templates: icon_color: > return state.toLowerCase(); or power sensors using: icon_color: > if (state > 500) return 'firebrick'; if (state > 0) return 'gold'; return 'steelblue'; which worked just fine ever since that was introduced (at least till 20220301.2), and now need a frontend refresh for the color to change. Same for many (all?) other entities ( have to check more to be precise)

#

if so, please give me a pointer so I can check the custom-ui resource and try to fix that. not sure if this is not a bug though., because: state_color: true seems to not work either?

umbral phoenix
#

This could be due to the new websocket Changes. Not sure right now though. I'll check it out

ashen lotus
#

thx. Ive just checked and it has nothing to do with themes, and 2 of my 3 instances work perfectly still, up to date to HA 2022.3.6. its the dev nightly with the new frontend having issues

coarse ruin
dusk citrus
ashen lotus
rancid mural
#

Hey, am i being thick, but i've got a custom component. Its loaded in but now im trying to edit it and just saving and hard reloading isn't doing anything. What am i missing :/

umbral phoenix
#

Are you using Rollup?

#

Make sure you are rebuilding the JS file

ashen lotus
amber vessel
#

What happend after update? My cards are random shapes now^^ looks realy funny!
//oh I see now.. had to update some stuff from HACKs. That was a new

honest cairn
marble iris
silent hedge
#

Found an issue with UI in 2022.4 :
Old inputs selection windows would have a return button, while now new "helpers" don't. Not exactly à bug, most likely an omission, that breaks the UX.

signal-2022-04-07-14-19-42-665.png signal-2022-04-07-14-19-42-665-1.png signal-2022-04-07-14-19-42-665-2.png
knotty tulipBOT
#

Want to see what issues are open (or were open and are now closed)?

Don't forget to check for any alerts

If you think an upgrade broke something then:

  1. Downgrade to the previous version to check if it works correctly there
  2. If it does then change the logger settings for that integration to debug
  3. Upgrade to the new version again
  4. Look in the logs for errors
  5. Open an issue, following the template provided and including the log information
Command '~issues' was invoked by: RobC
fluid bear
#

I'm having a bit of trouble with watched file counts getting too high (System limit for number of file watchers reached). I see general recommendation is to stop watching node module directory, but i can't seem to get it to work in the config. anyone else run into this?

severe basalt
#

We should add a env flag to change the watching behavior

azure crane
#

I have a card that I want to add a slider to in the gui config (0-100). The card is based on the boilerplate at https://github.com/custom-cards/boilerplate-card but that does not seem to have support for sliders. I opened an issue on that repo, but am wondering how hard (if possible) it would be to add support for a slider?

rugged basalt
#
  • find a slider element you like
  • add it just like any other element in /elements/
azure crane
#

I tried that, and following the pattern of the other elements that exist in the boilerplate I am struggling to get it to work. It appears there is some custom code in the boilerplate (under the elements directory) for each of the includes mwc modules, but I have no idea what should go into the one for a slider. I have tried some things with no success.

azure crane
#

So I have tried adding the mwc-slider to a fork of the boilerplate card (https://github.com/Makin-Things/boilerplate-card). I'll be honest and admit I really don't know what I am doing here, but it works except for a weird phenomenom. When opening the card editor the value is correct, but most of the time the 'thumb' is at 80% of the current value. Not sure how that is even possible! I think I might need some help from @umbral phoenix who I think did the most recent refactor and probably has the best chance of knowing what I screwed up.

unknown.png
ashen lotus
#

now we've settled down with the new web socket can I please ask for some guidance again, trying to update a custom card to use that? Ive tried to read the PR's that realized the new behavior, but can not understand what needs to be changed to get custom-ui to work again on state-change (now subscribe?). please check in on https://github.com/Mariusthvdb/custom-ui/issues/48. Any help would be much appreciated

tacit fulcrum
#

I already asked this in #devs_core-archived but I feel like it fits this channel too. My custom integration provides 12 values that I'd like to display on a bar graph, but by default sensor cards only show one value. Do I have to write my own lovelace card or is there a simpler solution?

rough ice
#

Can you put a link from the Events viewer page to the MQTT topics page so I don't have to spend an hour figuring out why it wasn't working again?

indigo estuary
#

Hi, not sure if this is a question I should be asking here, but here it goes. I'm looking to make the selectedTheme user based instead of device based. How big of a project is this?. Soo far I'm only able to save the theme along with the rest of the local frontend variables. Currently looking into a way to load this information back into the frontend

viscid yarrow
#

My hassfest.yaml is giving me the follow error: [TRANSLATIONS] Don't specify title in translation strings if it's a brand name or add exception to ALLOW_NAME_TRANSLATION It is a bit of a confusing error (no changes to the integration has been made - so this is regression based on an upcoming HA version). Why is this error now being triggered and where to specify ALLOW_NAME_TRANSLATION?

sleek bay
viscid yarrow
#

It seems the goal is to not have brand names in titles. However, it appears to be implemented in a way that it will give an error message when there is a title key used, without actually checking the content. Is that how it is intended to be?

sleek bay
#

it's comparing the title key to the integration name

#

if you add the integration to ALLOW_NAME_TRANSLATION then that won't trigger an error

ashen lotus
gritty ridge
#

Any chance home-assistant-frontend/src/panels/lovelace/common/generate-lovelace-config.ts could generate an EntityConfig instance with type: 'custom:{whatever-element-i-defined}' maybe via a registry of custom components or an attribute or something like that. I'm digging into the process to generate the card content and can't find any solution.

umbral phoenix
#

You can build your own Strategies that will determin the card content

gritty ridge
#

@umbral phoenix Thank you, heading to the URL and reading the documentation now

umbral phoenix
#

Here is an example from Paulus

gritty ridge
#

Nice example from Paulus. I've just adapted it to my needs as you can see in the screen capture. I already had one card for batteries I created manually and the content now is created dynamically! I also understand how one can use code to build up a custom view and how the custom view content can be defined in a specific strategy "resource". All looks very good and easy for a programmer. BTW, using the same screen capture to ask my previous question, the battery sensor is a well known component. Imagine you want to represent the status of a "dip switch" that contains a row of 48 switches (this is my real use case) also, consider to use the button click event to toggle the status of every single switch (https://github.com/IgnacioHR/hacs-timer-programmer) I already created all required components, the UI, the surrounding platform for the dip switches and I can create custom cards to represent the status. The user does not need to write yaml code for that (once everything is installed) but actually I can't find a proper way to let the existing code base to create an EntityConfig instance with a value on the type: 'custom:timer_programmer' every time a timer_programmer Entity needs to be represented in the UI. (I'm not sure I'm explaining what I want to achieve)

Window.png
bright crow
#

simple method of switching 48 dip switches, or representing their state? divide them into 6 sets of 8 and use integer representations of their binary states..... reminds me of configuring old school DMX lights

#

kinda makes me want an 8 bit binary indicator card XD

sudden kraken
rugged basalt
#

Try hass.localize("component.select.state.tuya__basic_nightvision.0")

#

Here tuya__basic_nightvision would be the device_class of the entity and 0 its state.

azure crane
rugged basalt
azure crane
rugged basalt
#

There is ongoing work towards that, but the current focus is performance for a base system.

#

I have a pinned message in this channel. At the bottom of the link in that there's a short text about how to use built-in elements even with the new scopedRegistry.

rugged basalt
dusty bloom
#

@umbral phoenix Is it planned to add descriptions to the new entries in /config/system? Currently with just the icon and main text, it feels a bit "naked".

umbral phoenix
#

Its not planned, no. System will be without

dusty bloom
umbral phoenix
#

@zinc pier

#

Currently its a decision to not include description

zinc pier
#

Description is only needed if the title isn’t clear enough. The new system pages doesn’t need it in my opinion

dusty bloom
zinc pier
#

Yeah, thanks! Noticed that yesterday too. Will pick a different color

rugged basalt
#

Hey @umbral phoenix. While you seem to be poking about in the config panel... the header is completely different than any other default panel...

umbral phoenix
#

Which one?

rugged basalt
#

This one

unknown.png
umbral phoenix
#

hmm that seems to be on purpose as the code actually sets the background color specifically to the sidebar. Ill ask Bram to see if he knows why

rugged basalt
#

What does the needs design preview tag mean? Is that a bot command or should I add a screenshot?

umbral phoenix
#

it will tell netlify to spin up the gallery for that PR

#

It works automatically if aren't using a fork

wheat raft
#

Hi @umbral phoenix. Lit-virtualizer completely broke media browser in RTL... FYI. I'll have a look but probably you know better.

wheat raft
#

Added a PR to bypass it for now

dusty bloom
#

On the initial page of the script editor, the documentation link to the script modes is not styled. I have now tried various things, but nothing works (other than brute-forcing).

Regular styles() only get applied to the shadow DOM, but the <a> is a real child of <ha-input-helper-teet> and not in the shadow.

=> What am I missing? Calling for the CSS wizards 🪄 ...

pliant belfry
#

hello guys, im having trouble using the websocket in a react frontend app. Im not sure as to where to place the websocket upon app initialization.

#

this is where i tried to place it, inside a use effect hook

IMG_1547.jpg
#

but it seems to be causing problems, whenever a state of a device changes, the websocket fires like 2-10 times

honest cairn
#

Mmmm...phone picture of a screen of text....

#

That's in Dante somewhere

pliant belfry
#

my bad, ill send a better pic

umbral phoenix
#

sending pics of code...

pliant belfry
#

based on this

unknown.png
umbral phoenix
#

I dont know anything about React unfortunately

pliant belfry
#

🥲

#

anybody else that can help?

cobalt anvil
#

You should not use the effect hook for that, as that is called everytime there is an update

#

Now you create a new connection on every update

#

you should create the connection only once

#

Oh, you pass an empty array, then you probably mount it multiple times?

#

you should unsubscribe if you unmount, or do your connection in a different place

sleek bay
#

hi all, per #devs_zwave-archived message we'd like to add HA alerts to the top of the device page for zwave_js devices. I have an idea of how to accomplish this in theory, but I could use some help working through setting this up correctly - I know nothing about CSS and I think that's going to be a blocker for me. Would an expert here be willing to jump into #dev_meet on sunday to talk about this and give me some advice? If sunday doesn't work, I am open to other days, I just can't meet before then. Thanks!

umbral phoenix
rugged basalt
#

Why does the "About" section of that page use a logo that's not in the "Logo" section?

umbral phoenix
#

Same Reason we still have Polymer in the Code base 😄

#

@zinc pier probably a good idea to go through update these cases haha

ashen lotus
#

supposedly nothing was changed (dixit in #beta) but yet is is way more difficult to get displayed, especially in a non yaml configured desktop

umbral phoenix
#

Yea nothing changed there its all loaded but its a slow load. It takes time and I guess we aren't updating the page when they load in

ashen lotus
#

a ok, and yes, it shows at somepoint most of the time. figured clearing cache and reloading that page would fix it but not always so. its a bit odd it has this problem on UI frontend only, while Yaml shows always. If my code to 'Push' that to the Frontend is still the advised technique, its fine, thanks

ancient nexus
#

hey everyone, i'm having trouble setting up the development environment for the frontend. i'm following the steps on https://developers.home-assistant.io/docs/frontend/development but i don't think my hass is using the development frontend. i'm trying to make a custom card for an integration i'm developing but nothing seems to change. i've disabled cache and firefox tells me no service workers were found. any help is appreciated!

dusty bloom
ancient nexus
#

i did, yes. i'm using a dev container for the core, so i have it set to /workspaces/frontend/. i also set the mount in the devcontainer.json and did docker-build

dusty bloom
ancient nexus
#

i'll give that a shot then, thanks

stuck island
#

Asking because mwc-tab-bar has much nicer horizontal scrolling behavior than paper-tabs and the latter is about to drive me nuts w/r/t scrolling the tabs on dashboards with lots of views

#

and I'm tempted to throw some effort toward converting the view tab bar as my first stab at getting involved with the HA codebase if the only reason it hasn't been done yet is because no-one's had the time/interest to put forth the effort yet

sleek bay
trim dune
stuck island
ancient nexus
#

hey all, a few days ago I asked for help with setting up a dev environment for the frontend, and since tried to use a venv instead of a dev container for the core. I couldn't get that working though, I got a ModuleNotFoundError: No module named 'apt_pkg' error when running hass, so I'm back on square one.

dusty bloom
umbral phoenix
#

If we had the option then we should do it for all. But if its only FF that doesnt support it then does it make sense to add an option?

#

Or use the current options from all browsers but FF and then wait on that

dusty bloom
#

How about a mixture (as we do for the other settings): Add a new profile setting where users can set it to whatever they want, but also have "Auto" in there where we use weekInfo if available otherwise fallback to the current "Sunday" behavior.

#

Then all is covered. "Auto" would solve it for most people (not FF for now, but hopefully soon), but even in Chrome, some users might want a different first day.

umbral phoenix
#

Idk I dont like adding an option if we have a way to do it via the browser. I know we have added for Currency and Language so maybe. But also we have 1 person asking for it so far 🤷‍♂️

dusty bloom
#

This issue has been raised multiple times and I also personally hate that it uses the wrong day in my instances 😜 !

umbral phoenix
#

Ill fallback to @cobalt anvil to see what he thinks. I dont have that strong of an opinion for not doing it. Just seems as a waste to have to do it for just FF

ancient nexus
sudden kraken
#

[Bit niche...] Anyone get the JS fullscreen API working on a card that is being Chromecast'd via the HA cast tool? The fullscreen API call is just entirely ignored as far as I can tell. Can't tell if I'm doing something wrong, or this is a limitation of the cast setup for dashboards.

ashen lotus
#

is there any reason the new menu item on mobile does not get an aria-label like the others of mwc-list-item ? Id Pr that if possible, but if it is on purpose, that would probably not meet agreement...

rugged basalt
#

Everything should have every type of accessibility helper.

#

It's probably a mistake

ashen lotus
#

ok let me file filed an issue then, thanks

frank tulip
#

Hello! I've been having some issues with my card where users notice their browser time time is out of sync with HA's server time. Is there any way to get the HA time from the frontend? I couldn't figure out any clever ways that don't involve creating a new sensor

#

Or it would be super cool if Home Assistant could warn about this on its own 🙂

sleek bay
#

hi, I have a WS subscriptions question - when I set up the subscription, the core sends an initial state using connection.send_result. Is it possible to access that? Right now when I subscribe, I don't get that initial state so I'm stuck at the wrong state until the next message comes through the subscription

#

I am trying to find other examples of subscriptions that may do this but haven't found one yet

#

hmm I think what I need to do is send a connection.message when I start the subscription

#

yup that did it

azure crane
#

@rugged basalt thanks for putting this together. I found the pinned info but that no longer seems to be valid when using the boilerplate card. It might be worth updating the pin or maybe include a link to this somewhere in the boilerplate repo. It would make it so much easier to find (I reckon I wasted a day trying to figure this out).

jagged summit
#

Hello, I've been reworking some frontend components and I encountered an issue regarding ResizeObserver. What I did was use ResizeObserver to select a component and style different cards based on their sizes, but then I encountered an issue. Whenever I'm editing a grid card and typing its name, the editor starts flickering because it is running ResizeObserver instantly and it appeared on the backend a "ResizeObserver loop time exceeded". I can solve the backend issue by using the debounce function utility but it doesn't solve the flickering. Using the immediate argument equals true, solves the flicker issue but appears the backend error again. How can I solve both problems at the same time? Thank you

sudden kraken
#

Anyone ever try using screen.orientation.lock to lock the screen orientation from a Lovelace card? Can get it to flick to the new orientation (e.g. landscape), but it immediately resets back. I think Lovelace is resetting on the resize/orientationchange, my element is being disconnected and the lock/fullscreen are being lost. Is there any way to influence that Lovelace resize/reset?

drowsy onyx
#

Is there a frontend components or style library to get the correct look and feel for ingress addons?

umbral phoenix
rugged basalt
#

But ingress is for third party services. They're not "meant" to have the same look and feel.

fringe pasture
#

Hi, I have a quite strange issue with the https://home-assistant.io/. It freezes my Chrome often when I move the cursor on the top menu.
Where can I report that? Here is a screen recording too.

ashen lotus
#

trying to modd some icons in a picture-glance card (make m spin) runs into an issue of alignment. Even though core code https://github.com/home-assistant/frontend/blob/5fb15042118684bdc76e4d98c2f0d6a2128feac0/src/panels/lovelace/cards/hui-picture-glance-card.ts#L351 mentions text-align: center , the icons are not centered with the text on the left side. The spinning is happening centered around the top of the icons. Is this an issue (bug)? If so, I would gladly try and fix that in a PR. replacing the now required: card_mod: style: .: | .box ha-state-icon { line-height: 0px; } on a core card

azure crane
#

I am trying to use the boilerplate card, but I want to change the mwc-select to use ha-entity-picker instead. I have it working for when you use the visual editor. But if you use the code editor as soon as you change the entity value to a non-existent entity it deletes the entire line from the config. It should show a waning instead and leave the line in tact like other cards do (ie. the built in button card). I can see it's a problem with the _valueChanged function, but I can't figure out how to fix it. It would be nice to contribute the entity picker stuff to the boilerplate card as it would be useful for many. Is anyone able to give me a hand?

azure crane
#

Ok, I think I figured it out, but not sure I have done it the best way. I submitted a PR to the boilerplate-card repo if anyone cares to take a look.

sudden kraken
#

Search for an entityid via a unique_id, over websocket? Since uniqueid is not returned with the entity registry listing call, is there an alternative to calling 'get' on each entity in turn?

brittle cliff
#

Hello, We are using a custom Home assistant frontend built and in config.yaml mentioned this new path to use as a home assistant frontend. Now when I initialize home assistant it is again downloading the home-assistant-frontend pip package.
Is there a way to not allow to again download it ?

fringe pecan
#

Hi there! I found this github that can add birthdays as a custom card (in very simple fashion). https://github.com/erlsta/homeassistant-lovelace-birthday-reminder-card
However, their solution causes the birthdays to be in a public place, the www folder. This seems a bit too exposed to me.
I saw that you can influence variables (like the numberofdays) in lovelace.
I'm having trouble adding a json/list as a variable to lovelace, are there any projects or guides on this?

loud junco
knotty tulipBOT
ancient nexus
#

Oops, sorry about the code wall!
To reiterate, I'm developing a custom card but I'm having some rendering trouble with Lit it seems. I have a property that I'm trying to map but nothing is rendered.
Here's the code:
https://pastebin.com/m3xhxeCQ
Any help is appreciated!

#

Nevermind, sorted it out! Dumb mistake

cobalt anvil
azure crane
#

I am working on a more advanced weather card that will have a complete gui config. Due to the number of options I would like to provide some hints while editing the card. Fore example take this sample image.
I am trying to show a border around the green bit for the onhover of the red bit using a css variable, but just can't get it to work. Is it possible, can anyone give me some hints or examples?

unknown.png
umbral phoenix
#

Not really possible. The two elements are completely independent and the only thing shared is the card config based on the options. We have a feature request for something like this but currently not possible

rugged basalt
#

It'd be pretty vital for a reasonable picture-elements editor, so I think it definitely will be introduced at some point.

azure crane
#

@umbral phoenix @rugged basalt thanks for the responses. I will shelve the idea for now, but it would be nice to be able to do in the future. Just some feedback,, giving some love to the boilerplate card I feel is essential if it is desired that card developers provide a graphical user interface.

rugged basalt
#

Something like this, I guess...

chrome_vtiB0b3KAl.gif
#

Do you see any problems with adding a bit of functionity to the editMode flag, Zack?
I could clean this up in a day or two... righ after I fix yet another potentially catastrophic failure-mode thing with card-mod that this uncovered...

umbral phoenix
#

I think having edit mode give a bit of context to the cards would be nice. I would want it to be subtle or even go away after some time though? Sean had a good proposal back in the day

rugged basalt
umbral phoenix
#

That is kind of nice 🤌

noble knoll
#

Hello all, I am looking for localise translations frontend project manager here. There are some issues with certain keys, that cannot be updated. I reached out to localise support first and they advised me to contact project manager. Basically, there are some keys in frontend on localise, that cannot be updated. Localise support advised me to contact PM and ask him to turn translation upvoting off, which should resolve the issue. Screenshot from localise support. Thanks.

Screenshot_20220530-195203_Gmail.png
azure crane
# rugged basalt Do you see any problems with adding a bit of functionity to the `editMode` flag,...

I love that this is getting considered. The use case I have is a fairly complex card with 2 levels of config. At the top level hovering over the config item on the left should be able to highlight a border on a section of the card on the right (not just targeting a single element). In the sub-config highlighting the individual element within the section of the card in a similar way would be nice. I think keeping it flexible would be best. I am not so concerned with it being not so subtle is a problem, it's only while you are editing the card config, so it's there to make things obvious.

rugged basalt
#

I'm thinking it could be an arbitrary object passed from the editor to the card, and then it's up to the dev to decide what information that should contain and how things will look etc.

#

It could potentially even be two way communication, but maybe that would be encouraging to overdo it.

#

It could be nice e.g. to click an element in the preview and show the editor for that part, but then the card itself would have to be very much built for the editor instead of the other way around...

loud junco
#

How can I submit a PR to change an English key? Do I need special permissions in lokalise?

azure crane
#

If in a cards setConfig function I change the config, it doesn't seem to get saved (ie. when you go into the editor the config option that was added isn't included in the yaml). It there a way to get the change to be saved?

rugged basalt
#

No, cards are explicitly hindered from permanently modifying their own configuration.

#

It can maybe be done by firing a config-changed event from the preview card when the editor is open, but I really cannot recommend that.

azure crane
#

I just can't make the changes stick. This is what I am trying

  if (!config) {
    throw new Error(localize('common.invalid_configuration'));
  }
  this._config = {
    config_option: 'value',
    ...config,
  };
}```
Note that this is in the cards setConfig, not the editors. I want to manipulate the config as the card loads and then have the changes saved.
rugged basalt
#

Is the problem that this._config.config_option is not value afterwards?

azure crane
#

It is set, but every time the card reloads it is no longer set, and I would expect to see config_option in the yaml editor, but it is not there. Every time that setConfig is called the config no longer contains the config_option.

rugged basalt
#

That's what is explicitly blocked. The configuration belongs to the user. Cards should not change it.

azure crane
#

Ok. So is there any way to 'upgrade' a configuration in a similar way to what you can do with integrations? Basically I would like to do is rename some config items, delete some that are no longer needed etc when a card is updated to a newer version. By sounds of things doing it in the setConfig of the editor would work but would require the user to trigger that and until they did the new version of the card may not work.

noble knoll
#

@cobalt anvil @severe basalt
Hello all, I am looking for localise translations frontend project manager here. There are some issues with certain keys, that cannot be updated. I reached out to localise support first and they advised me to contact project manager. Basically, there are some keys in frontend on localise, that cannot be updated. Localise support advised me to contact PM and ask to turn translation upvoting off, which should resolve the issue. Screenshot from localise support. Thanks.

Screenshot_20220530-195203_Gmail.png
cobalt anvil
#

I'll look into it! Thanks!

shrewd prism
#

Hi @rugged basalt sorry for reaching out here to you. Since updating to state-switch version 1.9.5 I am experiencing an issue with displaying custom:button-card directly with state-switch.

default: default
transition: slide-down
transition_time: 500
states:
  ## Lights
  light 1:
    type: "custom:button-card"
    template: card_title
    name: Dit is een test

But when I put the card in a grid-layout-card it does show up

#

The dev-console shows this error

unknown.png
dusty bloom
# rugged basalt

I like that idea 👍 Only point coming to mind: Could there be (realistic) scenarios, where the part being edited (and in your proposal would be the non-grayed out part) could also look it was disabled (so also grayed out) due to some conditions so it would actually not stand out from the rest (where as the red border / box approach would still highlight that).

But I guess that currently can only happen in combination with custom things, such as card-mod that toy with some CSS magic?

rugged basalt
#

Could there be? Yes, absolutely. That's the problem with all the custom stuff. Or someone could have a theme that makes the effect almost invisible.

#

But the whole design is all up to the card, so a custom card could choose to do a red border instead - or nothing at all.

azure crane
#

@rugged basalt I am using the technique you posted in here a while back to use a bunch of controls. I have got 5 working perfectly and today tried to get ha-entity-attribute picker to work. This is the function I am using to load it.

async loadEntityAttributePicker() {
    const registry = (this.shadowRoot as any)?.customElements;
    if (!registry) return;
    if (registry.get("ha-entity-attribute-picker")) return;
    const ch = await (window as any).loadCardHelpers();
    const c = await ch.createCardElement({ type: "entity", entity: "sensor.time" });
    await c.constructor.getConfigElement();
    const haEntityAttributePicker = window.customElements.get("ha-entity-attribute-picker");
    registry.define("ha-entity-attribute-picker", haEntityAttributePicker);
  }

It doesn't work the first time I open the card editor, but if I cancel and edit again it works perfectly. Do you have any idea what I am doing wrong, or is this a bug?

rugged basalt
#

You need to make sure this is run to completion before the first render of your editor.

#

I think.

azure crane
severe jolt
rugged basalt
knotty tulipBOT
indigo estuary
#

Hello everyone! I'm having some issue closing a Dialog box in a custom component I am building. Here is a simplified version of my code: https://www.toptal.com/developers/hastebin/umejalerim.http

I can see that the closeDialog() function runs, but the actual dialog does not close. This is a really weird behaviour because I used the same code elsewhere in my project for others dialogs and it worked there. I am kinda lost here, and where should I go from here. Any idea to help debug this?

wind spire
distant mauve
#

Hi guys! I've wanted to contribute to HA for quite a while, but wasn't sure where... So I've been working on a redesign of the homepage (home-assistant.io). Here's what I have so far: https://badia.me/homeassistant-redesign/
I just wanted to know what you guys think and if it's something that you think is worth it. Currently it's not a fork of the github repo, since it was easier to start fresh.

wind spire
#

Dont know if this is supposed to be so, but seems to have problems on mobile. Is it desigend mobile first or desktop first?

azure crane
# rugged basalt I took a more careful look at it. The entity editor does not load the ha-entity-...

So I did a bit of a refactor on my code today before trying to figure out how to wait for ha-form and my problem went away. I wasn't expecting that, but I am happy. It would be really nice though if loading different elements could somehow be added to the card helpers. I am being stubborn and insisting the cards I write have a gui config, but it is a lot more work, but it gets a lot easier if you have good examples to follow.

distant mauve
#

If this is something that can be of interest, I'll work on the mobile version and all other sections of the site

wind spire
#

It looks definetly better than the original site imo. Two personal points from my side: The HA logo at the top looks different (text is more bold). Think we logo should be copied and not altered. Second: Both on the original and your website I would place the Features/"what HA offers" section more at the top/easier to find so people that don't know HA get a faster impression what HA is if they land on our page. People who are already into HA know where they find the events/news etc. so imo it don't need to be the first thing displayed at the Home page. But this is my personal opionion and a design question (maybe for UX-Channel?)

distant mauve
#

You are definitely right! I'll update the logo right away and I'll post the site to the UX Channel

woven delta
#

Unsure if #developers message are the right channel to ask 🙂 I'm working on a custom card, and struggling to find a jinja filter to format numbers according to user locale

wheat raft
#

About the new (relatively) feature to search in settings by typing "c" - this works nicely when the focus is on the panel but when you just click Settings in the menu it doesn't work (oops) until you click the panel. Instead, when you click C you just go to the Calendar item in the side bar list box. So we should probably focus panel after panel loads.

noble knoll
noble knoll
cobalt anvil
#

I disabled the option, can you see if it helps?

wheat raft
loud junco
#

I'm looking for some guidance on how to submit a change request for an English key in lokalise. I've read through all the docs but it's still not clear how to do this as a contributor. Do I need extra permissions for the HA project in lokalise?

dusty bloom
#

@loud junco The English original keys are maintained in the frontend coding itself. Only the derived translations into other languages go through the Lokalise platform.

loud junco
dusty bloom
fleet hemlock
#

It's pretty popular, but relatively neglected by the dev.

#

PRs and issues stay open for a long time

#

No releases since November—which was a very minor fix

noble knoll
noble knoll
cobalt anvil
#

Great!

noble knoll
#

Hello guys. There is some complicated translations to be done, espacially with placeholders and I would like to test them before I submit them in lokalise.
Long story short, I have root access to my test environment and I can access translation files within /var/lib/docker/overlay2/... /hass_frontend/static/translations/ folder.
I have changed my language json file, I also updated "same" file inside .gz language file. I cleaned browser cache, changed UI language, restarted HA and even host, but translation will not update in frontend. What am I doing wrong?
HA supervised on Debian inside VBox. Anybody can help, please?

wheat raft
#

Translations need to be rebuilt. Are you running script/develop? Run it again...

noble knoll
#

Thanks. Got it sorted. No need for running scripts or anything. Just updating json files is enough.

torn wave
#

starting a custom card, is there a lit vscode plugin yall use? and pardon the ignorance, is lit the same as lit html?

torn wave
rugged basalt
#

litHTML is a part of lit nowadays, yes.

severe jolt
rugged basalt
#

Is there a question to go with that?

#

All strings must be enclosed in quotes in JSON, so lines 8 and 9 are bad.

sudden kraken
#

Is there a recommended (or at least commonly used) testing framework for custom cards?

ashen lotus
torn wave
#

in the custom card docs https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/#graphical-card-configuration, does the graphical card config js need to be in a separate js file from the parent custom card and registered as it own resource?
im basically just playing around with the example and when combined in the same custom card js file, i dont see it in the menu or the ability to edit it graphically: https://0bin.net/paste/-QWVJVGp#-K9ESkHaZj7mU0nZULwnAfT+Ns/w0Qlyq6EmF58sSJl

rugged basalt
#

No. It can (and should ideally) all be in one.

#

Line 68 getConfigElement should return an element of your editor, not the card itself.

torn wave
#

so im having it return the wired-toggle-card-editor instead of the parent card element itself but same thing.

  static getConfigElement() {
    return document.createElement("wired-toggle-card-editor");
  }

also, that wouldnt affect it showing up in the main card picker would it?

rugged basalt
#

Works for me 🤷

unknown.png
torn wave
rugged basalt
#

No. I use one I rolled myself.

rugged basalt
#

Today is the Day, right?

rugged basalt
#

This day

unknown.png
umbral phoenix
umbral phoenix
rugged basalt
#

To think I'd live to see this day.

formal haven
#

rip ie6

wheat raft
#

Hi Guys. Any Safari experts here? We have an issues with CSS variables in Safari we use for direction. It seems that their implementation is buggy.
Please look at the code pen.
https://codepen.io/yosilevy/pen/eYVxvXo
Any ideas would be appreciated. This is affecting some mwc (fab, textfield, ...) components that work great in all browsers except Safari.

cloud epoch
#

I'm curious how much HA can be customized visually if someone was so inclined. I'm a designer/UX guy and have ambitions of a beautiful dashboard for my phones -- If I were to design something completely custom, and hired a dev willing to code it, whether or not it would be possible. Is it worth going down the rabbit hole? lol

rugged basalt
wheat raft
#

Yes of course. But that’s the thing. MWC forces the ltr inside some of its code. For example in fab. And we override it with var which doesn’t stick in safari as you can see.

#

So the question is do we have what to do except write it explicitly because of this bug or any other suggestions.

rugged basalt
cloud epoch
rugged basalt
#

Probably. But it's been done to an extent.

cloud epoch
#

Any examples?

#

just a random example from Dribbble for context, but am curious about everything from custom typography, masonry grids for cards, bottom bar etc

torn wave
#

is it possible from a custom card to hook into the main card picker modal and also individual cards visual editors?

umbral phoenix
#

Yes

rugged basalt
#

Assuming you mean exactly what I think you mean, which I'm not as sure about now...

#

Lines 381-394 specifically

torn wave
#

im doing a custom card like swipe but tabbed and i want it to have a visual editor where you can select from the main card picker, and then manage the cards via their visual editors like you would if you were setting them up individually. with the swipe card you have to config itself and each card via yaml only. so being able to hook into the main card picker and each cards visual editors from within my custom card would be key.

rugged basalt
#

Then yes. My example.

torn wave
#

are the lovelace-card-tools a replacement for custom-card-helpers or are they not related?

#

also, i see swipe-card has custom-card-helpers as a dep but i dont see it used, though i see const HELPERS = window.loadCardHelpers ? window.loadCardHelpers() : undefined; 🤔

rugged basalt
#

window.loadCardHelpers is a builting function in Home Assistant. lovelace-card-tools and custom-card-helpers are two third-party collections of various helper functions

torn wave
#

ok so the 3rd party libraries might be abstracting something like loadCardHelpers or whatever others are builtin?

rugged basalt
#

Things like that.

#

custom-card-helpers also has copies of some very useful functions that are available to the core frontend code but can't be exposed to custom cards, like formating dates and stuff.

cloud epoch
#

Any devs want to make some $$ and help me build a custom mobile dashboard?

rugged basalt
torn wave
#

labor of ♥️

wheat raft
cloud epoch
#

Using card-mod and am curious if its possible to target elements within a nested card vs only applying styles to the ha-card element itself?

#

could :deep or something else be used here to targeted the element with class .header which is within the nested card in the newly injected ha-card ?

rugged basalt
cloud epoch
#

ah-ha! Thanks for the heads-up

nocturne flame
#

Hey everyone, first time looking to contribute. Trying to find where the code that controls pop ups on hover is. Help appreciated.

river dagger
#

Hello all, Im creating a one-screen sort of button-based lovelace based UI. Leveraging several great custom extensions out there i've been creating buttons and sliders and popups and such to build a more mobile friendly UI. Lots of custom button-card usage. The one thing that i want to be able to do is pull up pages like developer tools and configuration screens but still have the option at the top with a return button to get back to the main window. I have a grid display and i keep a set of quick access buttons at the top. However when i go to any of those pages that grid display is gone of course. Im not quite sure where to start with this. In a sense i almost want an iframe sort of thing so i can place configuration and developer tool pages within an iframe within a grid cell and still keep my buttons at the top. Here's a look at what I'm doing.

In the first image above that is my main button menu. A button per room and when i choose a room, the room cards come up but the menu is still there. However if i click the config wheel or the hammer (developer tools) then it jumps to that page and i lose the button menu.

Does anyone have any idea how i could incorporate some of the developer tools or config windows into this without losing the button menu? Either as cards or iframe or something? I hope this makes sense. For example, id love to click a button and see all my integrations in the integrations panel but have a way to click the 'home' icon to return back to the main button menu.

unknown.png unknown.png
trim dune
loud junco
sleek bay
#

I have a question about ha-form if it's optional and the box is unchecked, how do I detect that its unchecked?

slim vale
sleek bay
#

figured it out

pliant belfry
#

hey, im trying to use the websocket in a react app, but whenever i save the file, after that whenever a device state changes, the websocket fires multiple times

#

should i set the subscribeEntities property inside an event handler ?

#

this is what im trying to use

Screenshot_2022-06-22_at_9.09.50_PM.png
wheat raft
#

Does anyone have configuration code to fake the entities needed to setup energy management? I need this to validate the UI…

loud junco
#

I implemented type-checking and autocompletion for localization keys in https://github.com/home-assistant/frontend/pull/13004. The checks fail because hass.localize expects the full key, whereas supervisor.localize expects only the path relative to supervisor. Before I try to fix this, I'm wondering what the reasoning behind this behavior was? It seems pretty confusing to me and I'm also having trouble finding where those functions are actually defined.

torn wave
#

thomasloven would you accept a pr updating node version from 14 to 16 and using corepack so pnpm and yarn can be used in hass-custom-devcontainer?

torn wave
#

actually you've got yarn but if you didnt want to add pnpm as well i could just make nvm install lts and i can then use post create command to install pnpm with corepack.

nocturne flame
sinful torrent
#

whats the best way to get a custom card changed with VSC to get loaded on frontend without a HA restart ?

#

i changed the code (left) but on frontend its still the old (right) did a refresh and clear cache and reloaded all YAML Configs, but still the old code in frontend
https://ibb.co/W2tMDtp

rugged basalt
sinful torrent
rugged basalt
#

Well, the way to load in the changes to a yaml configuration is to click the three dots in the top right and select Reload or whatever it says.

loud junco
#

Is there a constant or type somewhere that holds a list of every possible domain?

sinful torrent
rugged basalt
#

In Home Assistant. In the lovelace dashboard you changed.

sinful torrent
#

nice, thank you i will try

#

the three dots are buggy for me , i cant see them, but i can click them

sinful torrent
ashen lotus
umbral phoenix
#

Jesus that is lot of warnings...

ashen lotus
#

yeah and they're fast too 😉

#

since the binary icon is only about device_classes, and not mention domain == threshold, Im not sure if that would do it

umbral phoenix
#

We should only do that warning in dev

ashen lotus
#

(I am on dev nightly, if thats what you mean....) still, a missing icon is a missing icon

umbral phoenix
#

No I mean we should probably only print to the console if you are running dev. Right now it does it production as well

ashen lotus
#

right. ofc thats another matter for your team to decide.

umbral phoenix
#

A missing icon is "fine". You can add one if you would like

ashen lotus
#

tbh this is a bit surprising since this icon is used in the docs

Schermafbeelding_2022-06-28_om_15.56.10.png
umbral phoenix
#

I am not sure if that is causing the script error in the logs

#

Yea we should just add it

#

I cant replicate the resizer error

ashen lotus
#

yeah thats another thingy. seems less intrusive though, and maybe first fix the icon to see what happens?

umbral phoenix
#

Yea. Would you like to PR or would you like me too

ashen lotus
#

fine if you do it ofc 😉 probably way quicker....

umbral phoenix
ashen lotus
#

thx! hope this helps. btw these 2 pages seem to load way slower than before, and cause some serious lag when inspector is open, both in Safari and Chrome.. they were so quick. will keep an eye open to that, thx again

slim vale
austere tapir
#

@umbral phoenix been plugging away at that https://github.com/home-assistant/frontend/pull/13045 - I added translations to en.json but they're not showing up for me, I see that my browser is pulling down en-dev.json which I'm guessing is built by webpack or the like, but my new values are not in that file, is there something else I need to do for that?

umbral phoenix
#

hmm try restarting script/develop

austere tapir
#

No dice, I restarted the dev container as well in hopes that may be it but it didn't work

#

The changes I made were based off what you had done (I hope)

umbral phoenix
#

Yea the code looks fine

austere tapir
#

I also noted an interesting behavior of the chips selector, when expanding a device, it only expands entities that are not diagnostic entities. Should I not be displaying diagnostic entities when you have just the device selected?

#

Expanding my Roku removes entities by default it seems - also if we're not supposed to post images here just let me know, not too sure of the rules in this channel

unknown.png unknown.png
umbral phoenix
#

hmm. I think if you choose an area or device I wouldnt want to see diagnostic or config entities. But I could add then per entity if I wanted. Thoughts?

#

Images are fine. You should not be able to post images without the right role but it is fine haha

austere tapir
#

I'll defer to you here, I would just wonder if that relationship would be obvious to users or not

umbral phoenix
#

eh most users shouldn't want config / diagnotics entities to show I would think. Let me ask around to see what others think

austere tapir
#

The code change is really simple if you want it - I'm assuming a entity_category of null means that it is a Sensor?

umbral phoenix
#

We need Sensor and Control entities

austere tapir
#

Yes, but 'entity_category: "config" | "diagnostic" | null;' - with this I'm assuming we want config or null?

umbral phoenix
#

I think we just want Null

astral tapir
fast wave
umbral phoenix
astral tapir
#

For area i'm with you. For device, at least I would 100% prefer to see the whole picture.

umbral phoenix
#

Devices can have a many entities for config and diagnostics. some which may not be very useful. At very min, Config should be filtered out but then we are even less consistent

astral tapir
#

Then I take the very min. 😉 For me, most of the time the diagnostic is very important. I would say, the most important.

rugged basalt
hearty rover
torn wave
#

i want my card to utilize tabs, is there a way to tap into the material components that are already used on the frontend?

rugged basalt
#

There’s a pinned message about that in this channel

lime smelt
#

Hey Devs, have you planned an element that seems obvious in home automation: the weekly calendar

unknown.png
honest cairn
#

This would be the right channel if you're planning to write it. Otherwise:

knotty tulipBOT
#

If you have a feature request for the frontend you can open one here, for Home Assistant itself please post on the forum. All other feature requests should be made to the developer of that custom card/component.

Command '~features' was invoked by: RobC
molten ice
#

Hey there,
i was looking for the fastest way to start contributing to the frontend repo but there aren't any good_first_issue tags
any recommendations?

umbral phoenix
#

I would recommend finding something that bothers you about the frontend and start there. It's always a better motivational issue if it's something you want to change

molten ice
rugged basalt
#

There are a few issues that were marked Hacktoberfest a few years ago. Those were considered good first ones.

torn wave
umbral phoenix
#

One is the design kit and one is the actual components

rancid crystal
#

Hello, I've cloned and modified the frontend repository and now I want to deploy it to my HA instance - currently running HA Supervised.

For now, I've tried building the frontend repo on my server, then copying the frontend folder to the docker container "homeassistant". After that I run the pip install command on the frontend repository, and I am getting the "successfully installed frontend" message. Now when going to the panel, I am getting a 500 error.

I tried doing the install after what makes sense for me as I cannot find an official guide for this, but I am not experienced in either Docker or HA so I might be completely off.

Any guide or help on how to install my modified frontend?

torn wave
# umbral phoenix One is the design kit and one is the actual components

i found this as well:

@jbingham Jon I am kind of confused between material-web-components and material-web. Which one to choose?
https://github.com/material-components/material-web/issues/3050#issuecomment-1011464627
You're not alone!

material-components-web is our Material 2 implementation, available today. It will not be updated for Material 3.
material-web will be the Material 3 implementation. It's in progress and will launch in late 2022.

Our goal is for material-web to be a long-term supported library that supports M3 and future design refreshes as well.

finite notch
#

just built a Dictionary component (input_dictionary) and committed it on my fork
https://github.com/dreamtheater39/core/tree/input_dictionary
(if you want to install as a custom component, use the link below)
https://github.com/dreamtheater39/input_dictionary

I'm looking for someone who's good on the frontend side of things who could build a helper for this component.
Here's what it does -

  1. Add a dictionary entity (configuration.yaml only - frontend helper not developed yet)
  2. Exposes 3 services - Append, Remove, Reset
  3. Append - adds new key/values, modifies values if any keys already present
  4. Remove - removes a key/value based on the key provided as input
  5. Reset - clears the entire dictionary
wheat raft
#

Hi Everyone. Does anyone have a working simple configuration of fake sensors to turn the energy panel on?

umbral phoenix
wheat raft
wheat raft
umbral phoenix
#

Oh right. Bram fixed that a while ago hmm

pliant belfry
#

hey, is it possible to create my own python websocket using instance bearer token and url?

pliant belfry
royal robin
#

I think I found one nasty bug but not 100% sure if the problem is only in this one instance or is it broader.
I have two sensors: sensor.boiler_power and sensor.boiler_energy. However, both sensors have the same UI name Boiler for dashboards. Now when I create Riemann sum integral sensor via UI in helper section and choose input sensor sensor.boiler_power it shows its name Boiler but when I save it it creates the new sensor where source is sensor.boiler_energy instead. Looks like it takes this displayed UI name and just finds the first matching sensor instead of using sensor that I selected. Should I create an issue for that?

limber acorn
#

Sorry if I'm asking this question in the wrong thread. Can I skip some placeholders in Localize when creating a translation? For example, in the string "The {type} is disabled by {cause}" can I skip placeholder {type} and use only {cause}?

rugged basalt
#

Should work, but is it a good idea?

limber acorn
#

I agree it's not the best idea. I am doing a translation in Russian, and making it correct is a real problem. In this example, placeholder {type} after the translation will be either "устройство" or "служба". According to the grammar rules, in the first case "is disabled by" should be translated as "деактивировано", and in the second case it will be "деактивирована".

torn wave
#

hey thomas, how are you doing HMR/live reloading(using vite/ts here) inside of HA when working on a card?

#

or can i only build every time i want to see a change and have the resource pointed at the dist/file.js?

limber acorn
#

If I remove placeholder {type}, I don't need to use declensions for "disabled by".

rugged basalt
torn wave
#

im using your image, what file are you pointing to for the resource?

#

i dont think i can point to a .ts can i?

rugged basalt
#

Lovelace can't parse .ts. You need to compile it to an ordinary js module.

torn wave
#

ya thats the container.

#

neither can the browser but vite does the magic. if i look in the debugger you can see the TS if im just looking at what vites dev server sends to the browser.

rugged basalt
#

Well, the devcontainer will take the filenames in the env variable LOVELACE_LOCAL_FILES, look for those in /config/www/workspace and register what it finds as a lovelace resource.

torn wave
#

so you pass your .ts source file to LOVELACE_LOCAL_FILES?

rugged basalt
#

.js, yes

torn wave
#

oh i thought your cards were in .ts

rugged basalt
#

Again, browsers don't understand .ts. It needs to be compiled to a .js module.

torn wave
#

i know. im asking how you go from writing ts to having HA work with js in a live dev setting.

rugged basalt
#

...though I guess if your .ts file contains only javascript it should be fine.

#

I compile it with rollup. But I can't really explain that part. I just tried things until they worked and then kept copying that for each project...

torn wave
#

me too 😭

torn wave
placid wyvern
#

how would i set Chart.defaults.global.defaultFontFamily to the theme's font so it matches with the theme?

rugged basalt
#

That compose is for if I ever want to run tests outside of a devcontainer.

#

It should match the devcontainer setup as close as possible.

torn wave
#

ok, i just didnt see it referenced anywhere so wasnt sure of its purpose.

marble kiln
#

hi. if i want to inquire about developing a custom panel for configuring an integration, is this the right forum? i obviously intend to code it, but i already did it once and could not get a review

#

anyway, wanted to understand who are the right people to convince of the concept of a custom panel (like the one mqtt has) for the dynalite platform. if they agree, i will easily code it as it is quite similar to other places in the code

#

would appreciate any guidance

placid wyvern
marble kiln
# placid wyvern what kind of configuring would you do in it?

the config for the dynalite component is quite complex and is currently in yaml. since it involves many variable sized lists (dynalite areas, presets, channels, etc.), doing it via the normal data entry flow will be a nightmare to the user. i started implementing it and it is unmanageable as you need to navigate via many menus to get to anywhere. this will be relatively simple in a panel, similar to the automation edit panel (multiple sections, ability to add / duplicate / delete a member of each section) so for the code, i would start there and edit.

#

would make it straightforward to configure and setup and would remove the need for the yaml config, which is the direction i understand HA is pushing for. you can see the dynalite yaml config at https://www.home-assistant.io/integrations/dynalite/ to see why it is complex in standard config flow

loud junco
#

When adding new translation keys, should the strategy be to always use existing keys (e.g. ui.common.close), or keep keys categorized with their page and reference the repeat (e.g. ui.panel.config.zwave_js.common.close = [%key:ui::common::close%])?

umbral phoenix
#

If they are in common then you dont need to add the key. Just use the common

#

Common Translations are loaded when the UI loads

#

But ZwaveJS translations are only loaded when that panel is loaded

loud junco
umbral phoenix
#

I don't believe its documented

loud junco