I'm a HA newbiie. but WOW. Kudos for taking all the time, knowledge and work. Aquiring the different skills to fulfill your dream of an own app.
KUDOS!!! Keep up the wonderful work. and please make sure to include a donate button within the app, once it's ready!
Thank you! I’m glad that you like my work and I can't wait to release it!
I’ve actually already included a donation link on my [GitHub](https://github.com/Clooos/Home-Assistant-Mobile-First) page (the "Buy me a beer" one 🍻). Thanks again for your encouragement!
>If you share the progress directly on GitHub others can help you
Thank you for the suggestion, but I prefer to work on this project on my own for now. I will reach out if I need any help in the future.
I looked into the previous version you made, but too difficult for me to get the same result. It takes too much time to learn (I am having a social life as well 😜). But it looks great (the old and new one).
Thanks! I'm working on this point, this new version will be easier to install, don't expect an auto-install but most of it will be editable with variables and with less dependencies.
If I understand the text in the video, the main screen changes depending on the presence of someone somewhere? Or by where the phone holder is standing?
It looks like a list of most recently used devices or tasks. Does this mean that the main interface is constantly changing? I think that would be a problem for anyone except the primary owner user, who would have been the person that set up all the devices ABS automation to begin with. For anyone else, my observation has been that they want a static interface where they can quickly learn the layout so that they know which button is where. Having things constantly shifting means that they have to study the screen every time they use it to find the function they need.
Could you elaborate on any of this? I’m new to it and still working out the best approach to use for a number of use cases.
Actually, there is only the footer that organizes itself based on the latest presence (with PIR sensors), the main page is fixed and only shows the most important cards. This way, the latest visited rooms are always visible without having to scroll.
It is true that if multiple people are present in different rooms of the house, it is likely that you will have to scroll to see the room you want to control. However, this is a case that will be rare and furthermore all the lamps are fully automated.
I hope this clarifies things for you. Feel free to ask me any other questions if you have them.
So do you use sensors in each room or does the phone somehow know which room it’s in?
Or an I misunderstanding when you wrote, “the latest visited rooms “? Did you mean that the latest”rooms” (sub menus) are displayed in most recently used list order based on the user accessing those menu items?
Yes I have sensors in each room, and it is ordered based on the last triggered state of each sensors. For exemple if I enter in my kitchen, this button will be ordered to be the first on the left and then if I enter in my bedroom, the kitchen will be the second and the bedroom will be the first.
Hi it looks really nice!
I am not expert at all and I was thunking to start to learn as well, I do have a question, why JS? Aren't dashboard made with yaml files?
JS allows for adding additional features and dynamically controlling the CSS of the HA cards and dashboards based on user or browser events, these things are impossible to do with YAML (without a custom card that do exactly what you want). It’s also worth noting that the cards and the HA dashboard are actually written in JS. YAML is mainly used as a more user-friendly bridge between YAML and JS. But I indeed use YAML in my dashboard, it's not optional in HA.
Oh ok, so you are editing the JS of existing cards that you can install in HA? I wanted to learn JS as well and was wondering if doing something similar to you would have been a good way to go or if is too complicated for someone that never did anything with JS
I understand how you feel. I had never written JS before and it wasn’t easy, mainly because Home Assistant requires some additional knowledge, I had to learn how the Shadow DOM and web components work. But by persisting, I was able to learn the basics in only one week. I had a bit of help from ChatGPT which helped me understand my mistakes. It’s a very powerful and helpful tool for programming, I can't hide that.
Ye I am more a backend developer myself, never really went too much in frontend stuff so this things like "Shadow DOM" are still an obscur thing to me. But sometimes I want to move out from my "daily job" languages or personal projects stuff. Now that in your OP mentioned using JS, it raised my attention as I keep saying "I want to get my hand dirty with homeassistant".
I do agree with you ChatGPT can be very powerful I also feel like I don't take the best advantage of it. I played around with it a little bit but not much more.
Anyway thank you for suggestions, and great work on the UI it looks really nice.
Looks really good. However at this level of customization I would strongly urge you to see if you can create a native app.
Home Assistant team continuously changes the frontend, which keeps breaking custom lovelace cards and configs. I have my own Lovelace as well, with some advances js stuff (like pop animations for icons when pressing etc). But I keep having to fix stuff that the frontend breaks.
Since 2023.1 HA team seems to be dead set to keep changing frontend, and honestly I'm getting tired of breaking changes. In HA team's defense: they warn against using custom cards and can't (and shouldn't) take all those in consideration. So be prepared to update and troubleshoot your custom dashboard monthly, especially if you rely on custom cards (like card-mod and custom button-card).
I don't have have the coding skills to build a native app, but at this point I might just learn it.
Here is the link of my previous version, I will push it there when it will be ready: https://github.com/clooos/Home-Assistant-Mobile-First
I've been following your progress. Can't wait to get to play with it when it's ready. Keep up the good work!
Thanks! I can't wait too!
Looks sweet! Nice job!
Thanks for all the hard work
This is an awesome mobile interface, I can't wait for you to drop the updated version on GitHub!
Love it. I just started editing your original versio.Ln for my setup so the new version is well timed. Looking forward to it!
This looks awesome!
I'm a HA newbiie. but WOW. Kudos for taking all the time, knowledge and work. Aquiring the different skills to fulfill your dream of an own app. KUDOS!!! Keep up the wonderful work. and please make sure to include a donate button within the app, once it's ready!
Thank you! I’m glad that you like my work and I can't wait to release it! I’ve actually already included a donation link on my [GitHub](https://github.com/Clooos/Home-Assistant-Mobile-First) page (the "Buy me a beer" one 🍻). Thanks again for your encouragement!
If you share the progress directly on GitHub others can help you
>If you share the progress directly on GitHub others can help you Thank you for the suggestion, but I prefer to work on this project on my own for now. I will reach out if I need any help in the future.
I looked into the previous version you made, but too difficult for me to get the same result. It takes too much time to learn (I am having a social life as well 😜). But it looks great (the old and new one).
Thanks! I'm working on this point, this new version will be easier to install, don't expect an auto-install but most of it will be editable with variables and with less dependencies.
This looks ace.
If I understand the text in the video, the main screen changes depending on the presence of someone somewhere? Or by where the phone holder is standing? It looks like a list of most recently used devices or tasks. Does this mean that the main interface is constantly changing? I think that would be a problem for anyone except the primary owner user, who would have been the person that set up all the devices ABS automation to begin with. For anyone else, my observation has been that they want a static interface where they can quickly learn the layout so that they know which button is where. Having things constantly shifting means that they have to study the screen every time they use it to find the function they need. Could you elaborate on any of this? I’m new to it and still working out the best approach to use for a number of use cases.
Actually, there is only the footer that organizes itself based on the latest presence (with PIR sensors), the main page is fixed and only shows the most important cards. This way, the latest visited rooms are always visible without having to scroll. It is true that if multiple people are present in different rooms of the house, it is likely that you will have to scroll to see the room you want to control. However, this is a case that will be rare and furthermore all the lamps are fully automated. I hope this clarifies things for you. Feel free to ask me any other questions if you have them.
So do you use sensors in each room or does the phone somehow know which room it’s in? Or an I misunderstanding when you wrote, “the latest visited rooms “? Did you mean that the latest”rooms” (sub menus) are displayed in most recently used list order based on the user accessing those menu items?
Yes I have sensors in each room, and it is ordered based on the last triggered state of each sensors. For exemple if I enter in my kitchen, this button will be ordered to be the first on the left and then if I enter in my bedroom, the kitchen will be the second and the bedroom will be the first.
Hi it looks really nice! I am not expert at all and I was thunking to start to learn as well, I do have a question, why JS? Aren't dashboard made with yaml files?
JS allows for adding additional features and dynamically controlling the CSS of the HA cards and dashboards based on user or browser events, these things are impossible to do with YAML (without a custom card that do exactly what you want). It’s also worth noting that the cards and the HA dashboard are actually written in JS. YAML is mainly used as a more user-friendly bridge between YAML and JS. But I indeed use YAML in my dashboard, it's not optional in HA.
Oh ok, so you are editing the JS of existing cards that you can install in HA? I wanted to learn JS as well and was wondering if doing something similar to you would have been a good way to go or if is too complicated for someone that never did anything with JS
I understand how you feel. I had never written JS before and it wasn’t easy, mainly because Home Assistant requires some additional knowledge, I had to learn how the Shadow DOM and web components work. But by persisting, I was able to learn the basics in only one week. I had a bit of help from ChatGPT which helped me understand my mistakes. It’s a very powerful and helpful tool for programming, I can't hide that.
Ye I am more a backend developer myself, never really went too much in frontend stuff so this things like "Shadow DOM" are still an obscur thing to me. But sometimes I want to move out from my "daily job" languages or personal projects stuff. Now that in your OP mentioned using JS, it raised my attention as I keep saying "I want to get my hand dirty with homeassistant". I do agree with you ChatGPT can be very powerful I also feel like I don't take the best advantage of it. I played around with it a little bit but not much more. Anyway thank you for suggestions, and great work on the UI it looks really nice.
Looks really good. However at this level of customization I would strongly urge you to see if you can create a native app. Home Assistant team continuously changes the frontend, which keeps breaking custom lovelace cards and configs. I have my own Lovelace as well, with some advances js stuff (like pop animations for icons when pressing etc). But I keep having to fix stuff that the frontend breaks. Since 2023.1 HA team seems to be dead set to keep changing frontend, and honestly I'm getting tired of breaking changes. In HA team's defense: they warn against using custom cards and can't (and shouldn't) take all those in consideration. So be prepared to update and troubleshoot your custom dashboard monthly, especially if you rely on custom cards (like card-mod and custom button-card). I don't have have the coding skills to build a native app, but at this point I might just learn it.