matt8707 / ha-fusion Goto Github PK
View Code? Open in Web Editor NEWA modern, easy-to-use and performant custom Home Assistant dashboard
License: MIT License
A modern, easy-to-use and performant custom Home Assistant dashboard
License: MIT License
Again I'm sure this is in progress, but opening to track progress
item: {
"type": "button",
"id": 2091000633887,
"entity_id": "input_select.tv_input"
}
entity: {
"entity_id": "input_select.tv_input",
"state": "shield",
"attributes": {
"options": [
"shield",
"ps5"
],
"editable": false,
"friendly_name": "TV Input"
},
"context": {
"id": "01HJF69SJC9RR5RJADBA32W73K",
"parent_id": "01HJF69SJA4SWDCJ7MXJDRTVYC",
"user_id": null
},
"last_changed": "2023-12-25T00:34:21.921Z",
"last_updated": "2023-12-25T00:34:21.921Z"
}
Any chance at adding support for RTC camera feeds?
Thanks so much for making this project, it's awesome!
I would like to request a feature that allows visibility logic for components.
Example usecase:
Is this something that you could see fitting into this project? I would be happy to take a stab at it. I imagine a checkbox on the component's configuration page named something like Visible when
. When checked the user can pick various binary_sensors. Possibly combining multiple into an expression, eg: binary_sensor.outdoor_motion and binary_sensor.is_dark
. I think section visibility should be controllable too
Thanks!
I've noticed while testing that it's quite easy to hit the right area of the icon instead of the actual icon when turning it off/on which opens the brightness options.
I would suggest that you introduce a long press on the button to open temperature/brightness rather than specifying regions of the button card. Especially since color/temperature/brightness is something that isn't as commonly used as on/off and is currently covering 80% of the button card.
Running 2024.1 as an addon
I have multiple "dumb" lights that do not have any brightness adjustment, they are just on/off switches. While these can be turned on/off using the Icon in the dashboard, they have no controls visible when you open the properties, making it impossible to control them individually when they are part of a group:
Even for lights that do have a brightness slider, a simple on/off toggle would make it easier to control them without having to drag the slider to 0% to switch them off:
Thanks!
Congrats on getting this out there for anyone to see, it's a really great step in providing a much better dashboard design for HA.
I'm a web developer and I'm wondering what's the best way to contribute right now to this project. Where do you need the most help right now?
Of course I have my own preferences and priorities but just wanted to reach out and see what would benefit you and the project the most in this early stage.
First of all thank you for your hard work once I have this set up and working as intended I'm sure it's going to be fantastic.
So the issues I'm facing:
Firstly, I can only get the display to show when using the home assistant application. If I try in the web browser I just get a black screen. (Unsure if web page hasn't been implemented yet if not my bad)
The other issue I have when I'm using the HA app and I get to the welcome screen and every time I click edit on side bar I just get a white spinning circle and nothing happens. Picture attached.
Thanks again!
First of all, thank you for sharing this repo. Ever since your beautiful dashboard setup in Home Assistant, will this be the solution for me to use with my frontend/development skills.
I'd like to suggest the following:
An option to slide from left to right for adjusting the light percentage when the light is on. (hold and slide on a light button?)
This saves an extra click when using a tablet :)
Also, I noticed that the loader icon isn't aligned in the center.
A quick fix for this is to add justify-content: center;
to the .icon
class.
Overall really awesome work!
Another idea - The ability to invoke scripts via a button on the dashboard.
Thanks again!
If I add my Unifi doorbell as camera it will not be accepted.
Not showing the camera
Saving is not possible
Page is crashing
I think it is something to do with picture length and with sizes.
My other Unifi camer is working fine. These having a different picture format size
Running 2023.12.3 as an addon, any changes I make disappear when I restart the addon, dashboard comes back empty with this error in the log:
s6-rc: info: service s6rc-oneshot-runner: starting
s6-rc: info: service s6rc-oneshot-runner successfully started
s6-rc: info: service fix-attrs: starting
s6-rc: info: service fix-attrs successfully started
s6-rc: info: service legacy-cont-init: starting
s6-rc: info: service legacy-cont-init successfully started
s6-rc: info: service legacy-services: starting
s6-rc: info: service legacy-services successfully started
Starting Fusion...
Listening on 0.0.0.0:5050
Error reading or parsing ./data/configuration.yaml: Error: ENOENT: no such file or directory, open './data/configuration.yaml'
at async open (node:internal/fs/promises:633:25)
at async readFile (node:internal/fs/promises:1242:14)
at async loadFile (file:///rootfs/build/server/chunks/3-85oe4GFn.js:8:18)
at async Promise.all (index 0)
at async load (file:///rootfs/build/server/chunks/3-85oe4GFn.js:16:38)
at async load_server_data (file:///rootfs/build/server/index.js:1891:18)
at async file:///rootfs/build/server/index.js:3301:18 {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: './data/configuration.yaml'
}
Hello! First of all - great work on this new approach! My Amazon Fire 10 tablet is now usable, while with the previous hass-config dashboard it struggled a lot with all the heavy client-side JS.
Perhaps you are already thinking on popups, but I would like to formally request that ability. For example to be able to click on the weather type item in the sidebar:
to have a popup open with more detailed weather view.
Perhaps something like this:
- type: weather
entity_id: weather.openweathermap
weather_sensor: sensor.openweathermap_weather
extra_sensor: sensor.openweathermap_forecast_precipitation_probability
extra_sensor_icon: mdi:drop
icon_pack: meteocons
popup: weather
The popup could use exactly the same mechanics as views and be defined in dashboard.yaml:
popups:
- name: Weather
id: 6467602449648
sections:
- type: horizontal-stack
id: 5078078976670
sections:
- name: Main
id: 2171067078835
items:
- type: button
entity_id: sensor.ventilation_info
id: 5008685947164
name: Rekuperacja
icon: mdi:fan
...
Potentially applicable to any button/item in the dashboard.
I'm sure it's in the works, but figured I'd open an issue to track the feature.
item: {
"type": "button",
"id": 5485409114026,
"entity_id": "alarm_control_panel.home_alarm"
}
entity: {
"entity_id": "alarm_control_panel.home_alarm",
"state": "disarmed",
"attributes": {
"code_format": "number",
"changed_by": null,
"code_arm_required": true,
"friendly_name": "Home Alarm",
"supported_features": 15
},
"context": {
"id": "01HJEGW86RG8SARB2GSWHNWSXT",
"parent_id": null,
"user_id": null
},
"last_changed": "2023-12-24T18:19:58.040Z",
"last_updated": "2023-12-24T18:19:58.040Z"
}
Hello,
I just saw your post on Reddit and i had to try this beautiful layout, so thank your for making this first of all!
(Send you a little PayPal to support the creation and further development)
I added the container based on your docker-compose file but it seems like i'm missing a repository:
Would you be able to give me the correct repository:
Thank you!
I'm trying to move your former hass-config dashboard to this new one. Previously we had the sidebar in one template sensor with attributes for greet, weather, vacuum, laundry, etc.
With the new one, using the same sensor & attributes, the elements that are empty and were not displayed in the former dashboard, are now shown as unknown:
This is using the following dashbaord items:
- type: template
template: '{{ states[''sensor.template_sidebar''].attributes.active }}'
id: 2790676343774
- type: template
template: '{{ states[''sensor.template_sidebar''].attributes.open }}'
id: 2790676343775
- type: template
template: '{{ states[''sensor.template_sidebar''].attributes.laundry }}'
id: 2790676343776
- type: template
template: '{{ states[''sensor.template_sidebar''].attributes.vacuum }}'
id: 2790676343773
with laundry' and
vacuum` attributes being shown as empty by HA:
and I would expect them to be empty (not shown) here as well.
The new climate button is automaticly changing to heating when opening, even if the state was automate.
I do expect that it keeps its originall state until after changing
It will also be nice showing the actuall temperature beside the setting temperature. Now I do need to create 2 devices
If the installation guide could be updated, perhaps there are more people like me, who are willing to help.
I never have worked with Fusion before, so setting up is the real struggle here…
Just spun up the docker and it looks marvelous. I think I've figured out everything but how to create a video feed in the main section. I see you have a way to do it on the sidebar but that's a bit small for our use case.
Love this dashboard!
I see in the readme there's a media control card, but I haven't been able to successfully get one on my instance.
I used this form:
type: media
entity: media_player.chromecastaudio0472
When doing so I see a box titled Unknown
Using the type media-control
results in nothing being shown.
I may just be doing something wrong or it may not be supported yet but wanted to report it.
Thanks again for the awesome project!
Hi, i cant see all hvac modes on fusion, this is what i have in my other dashboard
This is in Fusion
Also the color is not visible this needs to be orange or red? fan modes gives me blue
edit: it seems i don't get a preview of my image, i don't know why, i copy/paste it
i'm missing; auto heat/cool, heat and humidifier.
Fan modes and swingmode doesn't work
Hi,
unfortunately you can only change the temperature of the Shelly RGBW2 Relay and not the colour.
Current version: 2023.12.7
Sometimes Sensors can have a long entity name, being able to change the name shown would be great to have so were able to shorten it so whatever we want it to show :)
For example : my sensor is : "sensor.givtcp_xxxxxxx_grid_to_house" but want it to show just "Grid To House"
thanks again
First of all thank you so much for your work!
One of the greatest advantages of your previous config was the heavy use of customizable custom:Button-Cards.
Many variants of buttons were added by the community.
Also, I just love the design of the buttons / cards in your previous config.
In HA-Fusion the button design is very different and in my opinion the previous buttons looked more clean and more structured.
It would be great if there is a way to reuse the custom:button-cards and style from the previous config.
Would like to start off with saying I really love this UI!
I am running it on an dedicated Android tablet. It would be nice to be able to see the tablet's battery level in the UI. Something that could be achieved by creating a dedicated card that interacts with the https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API .
What do you think?
Need some simple minimal design card for thermostat.
Hi there, a lot of people have blinds (covers) at home and had the possibility to set the tilt (angle).
Is it possible to integrate that in your cover card?
That would be awesome.
Thank you for the amazing work thus far!
It would be really cool if we could run input_boolean's via a button press.
Not sure if this is part of your plan. I would really appreciate the option to use different sizes of cards, similar to what iOS does with widget sizes on the home screen (small, medium, large).
Right now you offer only one button size. Options could be:
First of all, awesome work on this add-on! Love the homekit-like style.
Question though, how do I find the url to open so that it doesn't show the home assistant ui (sidebar)? Would love to open this fusion dashboard on an iPad for instance, but without the home assistant 'wrapper'. Adding ?menu=false
and ?view=Bedroom
to the url (within HA) also doesn't work, so I'm guessing I'm missing some important knowledge :-)
Unrelated (FR); since a lot of entities are not supported yet, why not give users the option to simply open the Lovelace modals of HA? Like the default ones, instead of custom fusion modals? Or do so until Fusion supports that entity?
🤘🏻
I upgrade addon to 2023.12.4 bug it does't work.
my ha info:
Core
2023.12.3
Supervisor
2023.12.0
Operating System
11.2
Frontend
20231208.2
addon log:
s6-rc: info: service s6rc-oneshot-runner: starting
s6-rc: info: service s6rc-oneshot-runner successfully started
s6-rc: info: service fix-attrs: starting
s6-rc: info: service fix-attrs successfully started
s6-rc: info: service legacy-cont-init: starting
s6-rc: info: service legacy-cont-init successfully started
s6-rc: info: service legacy-services: starting
s6-rc: info: service legacy-services successfully started
Starting Fusion...
Listening on 0.0.0.0:5050
Error reading or parsing ./data/configuration.yaml: Error: ENOENT: no such file or directory, open './data/configuration.yaml'
at async open (node:internal/fs/promises:633:25)
at async readFile (node:internal/fs/promises:1242:14)
at async loadFile (file:///rootfs/build/server/chunks/3-zNUOnAaM.js:8:18)
at async Promise.all (index 0)
at async load (file:///rootfs/build/server/chunks/3-zNUOnAaM.js:16:38)
at async load_server_data (file:///rootfs/build/server/index.js:1891:18)
at async file:///rootfs/build/server/index.js:3301:18 {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: './data/configuration.yaml'
}
Error reading or parsing ./data/dashboard.yaml: Error: ENOENT: no such file or directory, open './data/dashboard.yaml'
at async open (node:internal/fs/promises:633:25)
at async readFile (node:internal/fs/promises:1242:14)
at async loadFile (file:///rootfs/build/server/chunks/3-zNUOnAaM.js:8:18)
at async Promise.all (index 1)
at async load (file:///rootfs/build/server/chunks/3-zNUOnAaM.js:16:38)
at async load_server_data (file:///rootfs/build/server/index.js:1891:18)
at async file:///rootfs/build/server/index.js:3301:18 {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: './data/dashboard.yaml'
}
Running Fusion as addon, currently on 2023.12.4.
When I add a camera view, I don't actually an image - when I inspect the DOM, I see the object URL points to an incorrect IP (192.168.1.241, while my instance is running at 192.168.1.10)
background-image: url("http://192.168.1.241:8123/api/camera_proxy/camera.garage_camera?token=xxx")
I noticed the same IP pop up when I opened the fusion web from mobile... possibly a forgotten hardcoded IP in the source code? I assume this is you DEV IP :)
https://github.com/search?q=repo%3Amatt8707%2Fha-fusion%20%20192.168.1.241&type=code
I am setting up the dashboard and am already very impressed with how it looks and how easy it is to use.
I only run into the following... If I create a "section" and add buttons there, I cannot drag them to a horizontal stack. If I drag the button to the horizontal-stack nothing happens, when I release the button it shoots back to the "section".
Another issue has been opened that is similar to this, but the temporary option given there does not work for me either.
I am using version: 2023.12.8
s6-rc: info: service s6rc-oneshot-runner: starting
s6-rc: info: service s6rc-oneshot-runner successfully started
s6-rc: info: service fix-attrs: starting
s6-rc: info: service fix-attrs successfully started
s6-rc: info: service legacy-cont-init: starting
s6-rc: info: service legacy-cont-init successfully started
s6-rc: info: service legacy-services: starting
s6-rc: info: service legacy-services successfully started
Starting Fusion...
listening on port 5050
env HASS_URL undefined
env ADDON true
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
No existing file found for ./data/configuration.yaml
Congratulation and thank you for this perfect addon.
Please consider implementing if it is possible picture-elements in near future.
When I add a media player to the dashboard via code, I get the saved message, then it freezes. I can still navigate the rest of HA, but not fusion. If I refresh or restart the addon I get an image of the dash, but none of the buttons work, including the edit buttons. The only way I was able to fix this both times is by uninstalling and reinstalling.
Logs:
s6-rc: info: service s6rc-oneshot-runner: starting s6-rc: info: service s6rc-oneshot-runner successfully started s6-rc: info: service fix-attrs: starting s6-rc: info: service fix-attrs successfully started s6-rc: info: service legacy-cont-init: starting s6-rc: info: service legacy-cont-init successfully started s6-rc: info: service legacy-services: starting s6-rc: info: service legacy-services successfully started Starting Fusion... listening on port 5050 env HASS_URL undefined env ADDON true No existing file found for ./data/configuration.yaml No existing file found for ./data/dashboard.yaml No existing file found for ./data/configuration.yaml
Hi, first off - great addon. I really like how easy it is to use and look forward to future updates!
I've created an addon to continuously cast HA dashboards to Google Hub devices and i'd love to get Fusion supported too. I can cast Fusion to my hubs which is great but eventually the casting is stopped.
Currently the addon has a pre-requisite for ha-catt-fix which stops the timeout issue on the Hubs by adding a hidden Cast media player component and plays an image every 9 minutes. This will then cast to the device for the defined time with no issues once the script is added to the lovelace dashboard.
I was wandering if it'd be possible to add this for ha-fusion? I'm not too familiar with ts/js else I would give this a go myself.
Thanks so much!
Would be great to have basic cover controls - up/down/stop.
Thanks!
Today I installed this big promising addon (2023.12.7) and then cleaned the cache(several times) and restarted Home Assistant. When I start the addon it keeps starting for a while and then stops. The log of the addon fetches the following information:
s6-rc: info: service s6rc-oneshot-runner: starting
s6-rc: info: service s6rc-oneshot-runner successfully started
s6-rc: info: service fix-attrs: starting
s6-rc: info: service fix-attrs successfully started
s6-rc: info: service legacy-cont-init: starting
s6-rc: info: service legacy-cont-init successfully started
s6-rc: info: service legacy-services: starting
s6-rc: info: service legacy-services successfully started
Starting Fusion...
listening on port 5050
env HASS_URL undefined
env ADDON true
The only thing HA's "log viewer" addon shows is the following TypeError: argument of type 'int' is not iterable.
Edit:
I have now installed the addon and reinstalled it twice. When I start the add-on, after a while I get the message "check supervisor log". Here is my supervisor log...
TypeError: Illegal constructor
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:10144)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new r (/hacsfiles/lovelace-card-mod/card-mod.js:1:15236)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:32733)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new o (/hacsfiles/lovelace-card-mod/card-mod.js:1:45566)
E (src/scoped-custom-element-registry.js:388:6)
J (src/scoped-custom-element-registry.js:236:10)
/hacsfiles/lovelace-card-mod/card-mod.js:1:39893
2023-12-28 11:37:00.245 ERROR (MainThread) [homeassistant.components.hassio] Failed to to call /store/repositories - Can't add https://github.com/matt8707/addon-ha-fusion, already in the store
2023-12-28 11:37:02.788 ERROR (MainThread) [homeassistant.components.hassio] Failed to to call /store/repositories - Can't add https://github.com/matt8707/addon-ha-fusion, already in the store
2023-12-28 11:37:20.199 ERROR (MainThread) [frontend.js.latest.202312270] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Illegal constructor
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:10144)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new r (/hacsfiles/lovelace-card-mod/card-mod.js:1:15236)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:32733)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new o (/hacsfiles/lovelace-card-mod/card-mod.js:1:45566)
E (src/scoped-custom-element-registry.js:388:6)
J (src/scoped-custom-element-registry.js:236:10)
/hacsfiles/lovelace-card-mod/card-mod.js:1:39893
2023-12-28 11:40:43.464 ERROR (MainThread) [frontend.js.latest.202312270] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Illegal constructor
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:10144)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new r (/hacsfiles/lovelace-card-mod/card-mod.js:1:15236)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:32733)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new o (/hacsfiles/lovelace-card-mod/card-mod.js:1:45566)
E (src/scoped-custom-element-registry.js:388:6)
J (src/scoped-custom-element-registry.js:236:10)
/hacsfiles/lovelace-card-mod/card-mod.js:1:39893
2023-12-28 11:40:48.423 ERROR (MainThread) [frontend.js.latest.202312270] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Illegal constructor
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:10144)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new r (/hacsfiles/lovelace-card-mod/card-mod.js:1:15236)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new n (/hacsfiles/lovelace-card-mod/card-mod.js:1:32733)
o. (/hacsfiles/lovelace-card-mod/card-mod.js:1:9380)
new o (/hacsfiles/lovelace-card-mod/card-mod.js:1:45566)
E (src/scoped-custom-element-registry.js:388:6)
J (src/scoped-custom-element-registry.js:236:10)
/hacsfiles/lovelace-card-mod/card-mod.js:1:39893
2023-12-28 11:40:48.424 ERROR (MainThread) [frontend.js.latest.202312270] Uncaught error from Chrome 120.0.0.0 on Windows 10
So something seems to be going wrong with "card-mod". Unfortunately I don't have enough knowledge to solve this myself.
Is there some configuration that needs to be done that I am not aware of?
Installed the addon and with the latest version it now loads the UI but in the bottom left I get the error above.
I do see in the AddOn logs these messages:
Starting Fusion...
listening on port 5050
env HASS_URL undefined
env ADDON true
No existing file found for ./data/configuration.yaml
No existing file found for ./data/dashboard.yaml
Hi, Thank for creating Fusion it is stunning and easy to use but do have a few things that aren't working and would love to get working.
I have Multiple Volume control Sliders that used an input number to a command.
when i added the input number entity the slider into fusion it doesn't recognize it and would be great to either have this work as a slider or a Knob Control. Fusion shows the volume level in the button but when i press it to make adjustments i get an error.
The slider Error Code Fusion Output below:
item: {
"type": "button",
"id": 9034818069311,
"entity_id": "input_number.volume_control_kitchen"
}
entity: {
"entity_id": "input_number.volume_control_kitchen",
"state": "67.0",
"attributes": {
"initial": null,
"editable": true,
"min": 0,
"max": 100,
"step": 1,
"mode": "slider",
"icon": "mdi:volume-low",
"friendly_name": "Volume Control_Kitchen"
},
"context": {
"id": "01HK5W7DQ357GJ29DPGMZ5X7KE",
"parent_id": null,
"user_id": null
Addionally, i also use an Input_select to select the sources and when bring this entity into fusion it shows the source selection but when pressed i am prompted with an error.
The input select Error Code Fusion Output below:
item: {
"type": "button",
"id": 5131273315130,
"entity_id": "input_select.kitchen_source_selection"
}
entity: {
"entity_id": "input_select.kitchen_source_selection",
"state": "Kitchen Alexa",
"attributes": {
"options": [
"Kitchen Alexa",
"Living Room Alexa",
"TV"
],
"editable": true,
"icon": "mdi:source-pull",
"friendly_name": "Kitchen Source Selection"
},
"context": {
"id": "01HK5W7DE436FE1FZSPZGKG6RZ",
"parent_id": null,
"user_id": null
},
"last_changed": "2024-01-02T20:00:50.116Z",
"last_updated": "2024-01-02T20:00:50.116Z"
}
if we could get these working it would be great.
Thanks again
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.