Room summary card #55
Comments
bemble
added
enhancement
|
The room card is a big challenge. Moreover, it's hard to make such a card readable. We have to find a good solution for that, a UX designer help is need. We actually juste use an entity card with template and on tap action navigate to dedicated view/dashboard. |
|
I think it's a good idea !! |
|
Perhaps it is possible to restyle the HA "Area card"? |
|
|
|
My idea / issue is not for a card like this, but to keep in mushroom style with simple design card |
I tried to do so, but definitely it's not good:
A the glance card will be done later, but that's not the best answer to this card I think.
That's the idea, we will ask to a UX designer we know, see if he has some idea for this card. I think using room/camera image will be configuration options. But once again, we have to find a way to display it in a beautiful and usable way. |
|
What about Room card similar to the one thats currently in dev Minimalist UI ? |
|
I'd love to help out on this project some time being a UX/UI designer and front-end dev. I'm still getting up to speed with HA though using it for only about a week or so and have immediately magnetized to the UI Minimalist look and Mushrooms plugin given the nicely thought-out design elements. I've got my first mobile version of the home dashboard almost done with the expectation I'm going to extend it to a wall tablet:
Thanks for releasing this! But back to this room card problem I think it might be helpful to have some designed assets stashed in a Figma file we can collaborate on more easily to toss ideas around for stuff like this faster that mimic Yuhang's original work so we aren't getting away from the original design language set forth but in the mean time I could likely get into code and prototype after I learn the ins and outs of HA templating and components a bit more first. I think the UI Minimalist concept you share @klawecki is on the right path and they are matching it more closely to Yuhang's original work with devices as shown:
Alternatively, If only 3 or 4 action/entities are added you could have it align like you had in your original screenshot. The issue with that screenshot though is the smaller icons above are a bit crowded and not likely going to work. |
|
What about something like this? |
I've been playing with Minimalist UI to try some cards such as the Room ones: I love how it uses the space and wraps the room in one, but it has some cons:
I think those have even more potential (more space for additional info, can be made more compact on both directions, but I have been completely unable to make them show up. This, of course, doesn't add anything to Mushroom. Just sharing my experience and opinions on the designs by testing some existing ones. I'd love some Mushroom version of these. |
|
@antonio1475 Yeah I feel going with the background image approach with the black overlay is more flexible and isn't too big of a deviation from HA's defaults or what the standard is for home automation software at representing a room. I find the other style in UI Minimalist too busy with icons and more limiting. I'm also against YAML only template themes as well and think that greatly limits the adoption of UI Minimalist. I get their reasoning for making templates easier to manage, but it's a pain to have to open up a code editor any time you want to make a small change to your dashboard. I use UI minimalist but only so the styles get applied to match across dashboards. |
|
First attempt at a working Mushroom Room Card, for my need (so very minimal). Using card-mod!
Video: mushroom.room.card.0.1.mp4Left is Minimalist, for reference. Although the other design we discussed just above was actually more of inspiration. Current code. Click to expand |
|
I am coming here from #304 I really wish that I could do some basic features on the main "button". Having a bedroom "button" that navigates to the bedroom has a bed icon. that does not contextually let me know functionality if I also want to turn that navigable button into an entity controller. Does this button even do anything? what does it control? i have to remember what each button to different rooms control with no contextual clues as to what that is. sure, i could put icons that match functionality, but that is mostly light bulbs, but at least 3 of area "buttons" do other things. I really think this could go a long way. I could almost control my whole house from one screen because I have only one floor. I would never need room-based pages if I could do this. while maybe harder to implement, if done, it would truly be "minimalist" lol. /~https://github.com/junalmeida/homeassistant-minimalistic-area-card This guy has an interesting implementation where you specify entities in a list. if they are sensors they go into the top row. The only thing I would say is custom icon color (and maybe custom icon) for any specified entity. it sucks when everything is the same color. And i like the one referenced in Antonio's post where icons are on a bottom row to keep the card horizontally slim. |
|
More inspiration for a Room card by benm7:
|
|
Out of curiosity, would you mind saying what kind of things you would put in a room/area card? Personally I would want controllable lights, temperature/humidity, templatable text, and custom entities. |
|
Is there any work going on on this? |
Second attempt / different approach just to test (left). Minimalist UI on the right, as it's what I'm currently using, although I miss some Mushroom options (eg. templating each entity). Using vertical-stack-in-card and card-mod. And it has limitations / issues depending on the number of icons and screen size... ezgif.com-gif-maker.webmCard 1: 4 icons. Click to expandCard 2: 5 icons. Click to expandCard 3: 6 icons aligned to right (grid:7) and double row. Click to expand |
|
I would love to have a room card in mushroom. Would this be possible? If I could get some help, I could try to implement a card like this. |
|
I tried to build a card with the help of stack-in-card and mushroom cards and here is my result: |
|
@antonio1475 can you share please how you managed to add a second column in ui minimalist (like the one in Comedor & Habitacion card), this is something i tried for a while and never managed to do it ps: a bit off topic here, i know, sry. |
Response (off-topic). Click to expandI use a custom card based on the card_room template to:✅ add 2 more entities If you don't know, read on how to use custom_cards here
My template. Notice i5 & i6, haptics, etc. Click to expandI also made a "mini" version with 6 entities too, so that more rooms fit into the screen.
My template. Click to expand@thiagobucca edited to replace custom card template to the latest version (with my mods). I identified and solved my errors. |
Code refactoring to fit framework structure. Simplified and cleaned up code logic. New features: - Now support from 0 to 4 "subicons". - If less than 4 "subicons", the "subicons" divide the vertical space into 3 squares instead of 4. - No need to have an entity for the "Room entity". Only the and icon is needed and a default icon (mdi:sofa-single) is now defined. - "more-info" is now the default behavior for "subicons" "hold_action".
|
@antonio1475 your 6 button mini card is exactly what I was looking for - amazing work! |
Great work with this, I have copy your code and adjust a bit and here is my result. |
|
Should be really great to have a 'room-card' available in mushroom. I really like the look of the UI Minimalist, but unfortunately it's only without the UI. |
|
Just chiming in that this is also my top feature request from the Mushroom suite of UX modifications :) |
|
I managed to keep UI active for 90% of the card playing with some inspiration found here: I built this one: Basicaly based on one mushroom template card and one chips card adjusted with card mod. following code: For whatever reason, still many yaml involved (especially for the pop up part) but the basic card are UI compatible. |
|
I like this approach for a future room card. It takes existing mushroom cards and combine them in one. https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/2931 This one looks good too. |
|
I did something similar, but tried to use as little vertical space as possible.
|
|
I personally love this template + chip approach! The idea of @mirkolenz above is very lean also ! Both ways are very coherent with other mushroom card depending the display mode (default/horizontal/vertical) you use ! I personaly come to a solution very close to yours: compared to my post above, I simplified it to a version without cardmod: It is more coherent with the other mushroom cards I use, and easier to maintain. I shared the code on the french Forum there: https://forum.hacf.fr/t/mise-en-forme-de-cartes/20429/9 I would love to see something like this integrated in mushroom, with a built in positionning of the chip row (linked with the default/horizontal/vertical display mode)... |
|
I recently came across /~https://github.com/jcwillox/lovelace-paper-buttons-row which has a mushroom style preset and some examples like: which could help in making a Mushroom styled card (eg the additional buttons below/within a Mushroom light/entity card) |
|
I think the Minimalist one is very good; and the original proposal at the very top of this topic (that looks very mushroom card) becomes toocluttered. The main advantage with the minimalist room card IMHO is that it clearly visualizes what room type it is with the very large icon in a reasonably clean area around it giving peace and clarity to the eye in otherwise usually cluttered dashboards: I don't so much like the idea of a photo of the room as a background image, as some rooms do not look "clean and nice enough". One thing for a hotel, but not a home with sometimes cluttered furniture etc. |
Definitely. I haven't been able to switch to anything else since I tried it. Note that the card and all the buttons have tap, double tap and hold actions, so you can go from very basic to many things. |
|
@antonio1475 this is fantastic, and exactly what I need - 8 entities instead of just 4. I vote for this becoming standard in Mushroom cards!!! |
|
You can already "mushroomize" it with stack in and card mod like I described above and here : If you need 8 buttons, you just add another chip card in the stack in... UI is available (when using custom:vertical-stack-in-card) in this case if this was the need, but still cardmod is needed to mimic the minimalist card layout with big icon and column on the right. If card mod is an issue (it was for me, not predictible enough when switching from phone to tablet...) just remove all cardmod stuff and you are back to small icons for room but same behaviour and still UI working: |
|
+1 for Room card, would be great. |
|
For those interrested in such a room card: I have presented my own version of a mushroom room card on the french Forum here:
do not hesitate to use the code... And a french tuto step by step to install a simplified version here: Those version are 100% mushroom compatible, they even preserve the configuration through Graphical User Interface... |
Thanks for sharing. Would you be able to make it so the Edit: Thanks |
|
@ncodee I played with grid and horizontal stack, the issue is not the grid itself, it is the number of column that you display. I also played with sections and it is working well with sections this way:
In the basic simplified design, the layout is shared 50%/50% between the template card and the chips, whatever the number of chips or the siez of the text like in the illustration below (border artificially kept for illustration): Thus only half the room card is available for text and if the columns are too small, text can be truncated like in your example, or chips can be displayed in two lines.
Hereafter is an example where you could try to play with card_mod for both cards, the example below allow some overlaps between both cards:
This gives a little more freedom, but be careful, with 4 chips and long text you may have chips above text: The modified code with card_mod in both embedded card (refer to comments in the code for where to modify): |
|
There's a high demand for a Room card, please consider adding @piitaya. Thanks |
|
@ncodee I updated the post above with some proposed modification that might be useful for your issue. Initial link in French has been updated as well to document your issue. |
|
I came across 2 room card that are very Mushroom-y:
I've also been playing with something very similar to 1, with custom:vertical-stack-in-card and card-mod (inspired from here) Expand for yamlI'm also going to explore /~https://github.com/Nerwyn/service-call-tile-feature and its ability to add buttons to a Tile card, which seems to be the future. @piitaya I've also seen the discussion in #1422 (comment) and you comment regarding templating and custom buttons. That might "solve" the room card. Please take a look at the screenshots here - I think that the first one could be a very nice Mushroom Room Card (although I like option 2 more, but it's less mushroomy than 1). Thanks |
I agree no 2 looks more nice and mushroom-y. Although the link to the page does not share the exact code unfortunately. |
Unfortunately, that is only a design (not a reality nor code) made that the user made. The end result they were able to achieve looks far from that I've been playing with u/maomana's code from here and to me this is what the Mushroom Room Card should be. There are 4 styles in the screenshot (square, rounded, rounded header or bottom-squared):
What I also love about this design is that you can put as many buttons and rows as you want, and it works both full-width as in a grid 👌 PS: Using Rounded theme as also suggested by u/maomana, although Mushrooom themes look quite nice & similar. All (or most) credits go to u/maomana (linked above)! Simple, yet amazing, work. Sharing this thread with them. Looking forward to feedback, and I'll share my final code when done. |
@antonio1475 Have you completed the final code? Really looking forward to it |
This is basically the solution I proposed a few messages above with the stack-in of a mushroom card and a line of chips...(except I prefer the chips at the end rather to centered) hereafter one of the messages proposing it:
|
|
I just rebuilt my Hass instance and didn't feel like using a yaml approach and wanted to stick purely to GUI editing to allow others in my family to alter dashboards. I'm still new to hass development but i started an attempt at building an area/room component. It's still very early and rudimentary. This approach doesn't use card-mod, yaml editing, or any other custom card. This should be functional as pure mushroom card addition. Not shown in the video is the ability to add/remove the buttons. They've also been limited to 4 since the video due to screen sizes. Features
Recording.2025-01-07.213127.mp4 |
Great work! Hopefully this gets implemented soon. |
and others
What do you think about a card like this one
The bottom button turn on / off all light of room, same for plug and cover
The icon are hide if no windows open, door open, water sensor off....
The text was updated successfully, but these errors were encountered: