Add-on request

[juan0x00]

Hello, here.

The work you've done is really good, thank you.

I've been trying to create something similar to HA, where I can create my own zone/area and place my cards there. However, I've seen that you've been working on an add-on for HA, which is great (You have saved my live). I would like to know if you could create a more detailed tutorial on how to install the beta, please, because I don't know much about development...

Also, I would like to know when a stable version of the add-on will be released. This is a college project to control greenhouses based on fuzzy logic. Unfortunately, I am not good at programming; I am just a beginner. I will be very thankful if you release it soon, please.🙏, I will buy you a coffee as soon as I get some money. ☕

This is what I have done:

Main page:

Here is where I supposted to create the labs (not working yet):

Lab page:

[shannonhochkins]

That's cool! thankyou! ( make sure you give me reference ;) )

The addon as so far, been extremely complicated for a solo engineer like myself, I see this taking a few weeks to even produce something workable if not months, it is my top priority aside from bugs / small improvements whilst I build something worth using, as you can imagine (which is why home assistant doesn't do it) it's very complicated to build a dashboard that supports drag, drop and responsive resizing layouts, but there's a long way to go unfortunately, basically for local development on that hakit project (not @core or @components), simply just run npm i && npm run dev, currently it's just the client side, and barely functional, but eventually the same command will also launch the server and you'll see it start to evolve over time, I will be moving quick on this, but as you can imagine, there's only so much of my life I'm going to give up, for free, so please be patient :)

[Baael]

I think it is not so difficult.
I am creating such things in job, and for personal projects.
And I have idea :D but lack of time... However I will try to make something as PoC.

Some example leftovers I can show:
https://baael.github.io/robo-node-2/
https://baael.github.io/smileys/

There is somewhere mobile app editor with drag&drop componets and flow editor that will fit perfectly, but I cannot find it

[juan0x00]

Thanks for answering!!
Sure, I will give you reference!!!

I understand, bro, do your best!! 💪

[shannonhochkins]

I think it is not so difficult.
I am creating such things in job, and for personal projects.
And I have idea :D but lack of time... However I will try to make something as PoC.

Some example leftovers I can show:
https://baael.github.io/robo-node-2/
https://baael.github.io/smileys/

There is somewhere mobile app editor with drag&drop componets and flow editor that will fit perfectly, but I cannot find it

Drag and drop is easy, including resize, fluid widgets that can be scaled to any size, different layouts per device, saving the ui in HA, delete / edit / add cards from hakit/components which includes nested components like group, room, row, column

There is a lot of work here to achieve something substantial guys

[shannonhochkins]

Just an update

• Grid layout working with resize, drag & drop & multiple layouts for responsiveness, meaning you can add cards and resize them completely different for mobile, tablet and desktop
• Card Picker built (only supports ButtonCard whilst im developing as this is one of the more complicate dones)
• Edit / Delete card buttons
• Cards can be added to multiple breakpints
• Configuration for page layouts, including breakpoints, margin, padding and more

There's still a boat load to do here, but it's underway

[shannonhochkins]

I've decided to abandon the hakit addon, it's becoming extremely difficult to get something working perfectly - there's a lot it already handles, but unfortunately, it's simply just far too much work for me to do on my own for free

[juan0x00]

I understand now, I was trying to do something that was already done in HA (create areas and entities relevant to them) hahaha I feel so dumb.
Might I implore you to accord it greater precedence, if you please? 🙏 because my deadline is approaching 😖

[shannonhochkins]

Sorry, but the addon is no longer my top priority, the time I've invested in this is already immense and I've e currently received very little in donations so I'll be making improvements to the library itself for now

[juan0x00]

No, bro, I mean getting all areas set up in HA and the relevant entities for them, for me that is important feature, right now 😢 I know the addon is hard to reach, and you have spent so much time in that, so don't worry about that. I will donate something as soon as I get money. For now, I am just a student. 😪 Thanks for you help

[shannonhochkins]

I'm not sure what you're asking, are you asking for a hook to retrieve entities in an area setup in home assistant? If so, that's on the roadmap after the calendar card

[juan0x00]

Yess, bro, I was asking for that.
I will wait for it... 🙏

[shannonhochkins]

What i will work on is an addon to add a link to the sidebar to load up the custom dashboard, but as for editing / customizing? it's just too difficult for now

[shannonhochkins]

@juan0x00 I've just released a new version of hakit core and components, there's a new hook provided called "useAreas" which should give you the exact same information shown in the "areas" section in home assistant.

Let me know how you go!

[juan0x00]

Amazing, it works perfectly! Thank you, bro.

I have two little issues. The first one is that the picture of the area doesn't load. I don't know if this happens because I'm using Nabucasa or maybe I did something wrong...

Haki Dashboard:

HA:

Code:

Secondly, I was trying to filter the entities by "switch" to create a ButtonCard for each match in every area... but I got an error. The error says: 'Type 'string' is not assignable to type 'undefined' on line 124.'

{area.entities
.filter((entity) => entity.entity_id.startsWith("switch."))
.map((switchEntity) => (
<ButtonCard
key={switchEntity.entity_id}
entity={switchEntity.entity_id as EntityName}
onClick={() => {}}
service="toggle"
/>
))}

Despite the issue, it is possible to turn the switch on and off... but I think it might be a problem when building the project.

May you help me, please?

[juan0x00]

Well, I just solved the second issue... I created a const called toggle = "toggle";
and just added it to service={toggle as any} 😅

[shannonhochkins]

Regarding the picture not showing up, this is most likely because it's returning a local path to the image, ironically i found this issue when buliding the new CameraCard im working on, and i created a helper to join paths with the home assistant url, for now you can simply just prefix area.picture with your nabucasa url and it should work fine,

import { useHass } from '@hakit/core';
import { useCallback } from 'react';
const { useStore } = useHass();
const connection = useStore(store => store.connection);
const getImagePath = useCallback((path: string | null) => {
   if (path === null) return PLACEHOLDER_IMAGE;
    return new URL(path, connection?.options.auth?.data.hassUrl).toString();
}, [connection]);
const image = getImagePath(area.picture);

I will fix this with the next release when i release the camera card so just make a note if you upgrade, you'll have to remove the concatenation you're doing to fix this currently

As for the type issue you've got, it's because you're using EntityName instead of the correct expected domain, there's a few solutions here, however the correct way to do this is to use type guards on the filter function:

  // import the types available from core
  import type { AllDomains, HassEntityHelper, FilterByDomain, EntityName } from '@hakit/core';
  // 1. create a type helper outside your component to filter the entities to retain intiellisense:
  type FilterType<T extends AllDomains> = HassEntityHelper<T> & {
      entity_id: FilterByDomain<EntityName, T>;
  }
  // now in your component
  {area.entities
    .filter((entity): entity is FilterType<'switch'> => entity.entity_id.startsWith("switch."))
    .map((switchEntity) => (
      <ButtonCard
          key={switchEntity.entity_id}
          entity={switchEntity.entity_id}
          onClick={() => {}}
          service="toggle" // types will now be correct
      />
    ))}
   

Hope this helps!

[shannonhochkins]

type casting (as any) isn't the right way to do it as it won't catch errors or mistyped service names, ie you could have typed random as any and typescript wouldn't have complained but it would have failed to do anything, the suggestion i provided will still provide intellisense and work as expected :)

[juan0x00]

I did what you suggested, and it's working perfectly, bro. Thanks so much!! 🙏

I was wondering if it's possible to create/read/update/delete zones and areas, and to associate entities or devices with these areas. If this is possible, could you please do it?

Also, could you create a blank page with the same style as the AreaCard, where I can add whatever I want? For example, I have this userCard (I know it looks horrible)

So I can open that page from any btn or fab

But the card will not be showed in the sidebar, nor with the other AreaCards

I hope I made myself understood 🙏my english is too bad hahahh

[shannonhochkins]

You can use the addRoute hook to add items to the sidebar. But if you're including it inside another AreaCard is a known bug, currently only rendered AreaCards will appear in the sidebar and it's something I've not solved yet without destroying performance, but I'm unclear what you're trying to achieve

As for updating / editing zones, this isn't something I'll be implementing seeing as it's already part of the api

I expose a callApi method from useHass, you'll have to read the documentation for the rest api to see what's possible!

[shannonhochkins]

You can also activate any AreaCard by using the useHash hook

const [hash, setHash] = useHash();

setHash('area-card-hash');

This will activate an AreaCard that has the same hash