Show off your Frontend!

Share your Projects!
21

Hi Mike,

  1. I wrote a blog post about the multi-room audio, check it out here: https://home-assistant.io/blog/2016/02/18/multi-room-audio-with-snapcast/

  2. !env_var reads an environmental variable from your system. So for example in bash, I’m doing export HOME_LATITUDE=11111, and then HASS reads this value when it starts up. I have a simple bash script that exports all my values and then starts HASS. In this way, I keep all private data in one place, and any values that have to be specified in multiple places.

1 Like
22

Ironic, I just got done explaining this in a DM to Mike to the best of my knowledge and I seem to have gotten it correct!

I don’t have any experience with bash scripts, but do you think you could post a simple example of how this would work with a single variable? Not your script, as that defeats the whole purpose, obviously, but just as simple example so we could both build off that.

I’ve been contributing here on a number of things as well as helping out and this would make it a lot easier for me to post configs to help other users without having to sanitize it each time. And I’m sure Mike would appreciate it as well.

1 Like
23

Cheers buddy, That was the post I was following actually. I will go back over it and have another look.

Is there an article or something I could read more into this process and I have just started my config file now and this is a great idea to start with or am I jumping in to deep to start with? In logic it all makes sense to me I just don’t know how to do it lol.

Perhaps I am trying to run before I can walk and need to learn more of the coding side before hand.

Thanks

24

Here’s the last few lines of my bash script (called start_hass.sh):

export SUNSET_ELEVATION="5"
export MOTION_TIMEOUT_MINS="30"
export PHONE_BATTERY_THRESHOLD="30"

hass -c my-home-automation/homeassistant
1 Like
25

Ok so If i get this right it is just a long list of export’s like this and at the bottom it calls to run hass after getting all the info?

Then your running start_hass.sh automatically after a restart or something?

26

Ah, I get it now - and then you just run start_hass.sh as a service on start up?

27

Yes, basically. If you have HASS set up as a service (varies by OS), you can often specify those environmental variables in the service configuration. I start and stop HASS manually because I’m frequently updating it, and doing development.

1 Like
28

I’m working on this with Mike in DM, thanks for your help. I’m reading up a bit more on setting variables and learning quite a bit so thanks for your guidance!

29

I noticed you have the MyQ garage door. Did you have to do anything special to get that working with HASS. I’ve been wanting to get mine added for a few months now.

30

I second Jtmoore81, I’ve copied the myq.py from the pull request and configured it. It loads, but no door openers show up in HASS. I would really like to get my garage door opener working. Any info you can share would be most helpful!

31

Not a moderator or anything but wondering if this wouldn’t warrant is own topic? That way any one else needing info on the MyQ (or more importantly, having info to share) could find it easier. Just a suggestion.

1 Like
32

I copy myq.py to home-assistant/homeassistant/components/garage_door/

Then edit line 108 to the name of my garage door in myq dashboard.

33

I am having the same issue as goyney. I copied the myq.py from the pull request and the HASS log states the myq component cannot be found.

34

I was able to figure it out. I had to create the myq.py file in /usr/local/lib/python3.4/dist-packages/homeassistant/components/garage_door/.

Thanks for putting this together!

35

Hi guys, I was looking for inspiration for my frontend and came across this thread. It seems that it has fallen asleep, but maybe there are more people looking for fresh ideas and want to show their work.

So i will make a start and show you my current layout. It’s my first steps with HA and as you can see I was very Homekit oriented.

42
422880×1800 882 KB

5 Likes
36

Dude that’s pretty cool. Care to share how you did it. I am very new to Lovelace so still trying to learn as much as I can.

37

Very cool UI! can u share your lovelace.yaml?

38

My lovelace.yaml is still a bit chaotic, I will try to clean up my setup a bit on the weekend, then I can make it available

1 Like
39

Noah, tell us how did you changed the icons. And also please share your config!

1 Like
41

Changing the icons is actually quite simple. I work a lot with button cards and there you can defince witch picture/icon you want to use . I saved the images locally in my /www folder.
Most of them i downloaded for free at https://www.flaticon.com/.

Here is an example of one card:

entity: input_boolean.notify_home
name: Szene
custom_fields:
  room: Wohnung
  counter:  >
    [[[
      return states['sensor.lights_on'].state;
    ]]]
  
entity_picture: /local/icon/general/water.svg
show_entity_picture: true
show_state: true
size: 55%
color: rgb(227, 209, 16)
aspect_ratio: 1/1
hold_action: 
  action: more-info 
styles:
  grid:
    - grid-template-areas: '"i counter" "room room" "n n" "s s"'
    - grid-template-columns: 1fr min-content   
    - grid-template-rows: 1fr min-content min-content min-content min-con
  icon:
    - margin-left: -10%        
  name:
    - justify-self: start
    - padding-left: 15px
    - font-weight: bold
    - font-size: 1.1rem
    - padding-bottom:
  state:
    - justify-self: start
    - padding-left: 15px
    - font-size: 1rem
    - padding-bottom: 5px       
  custom_fields:
    room:
      - justify-self: start
      - padding-left: 15px
      - font-weight: bold
      - font-size: 1.1rem
    counter:
      - margin-right: 0.7rem
      - height: 3.3rem
      - width: 3.3rem        
      - background-color: '#b8b0b0' 
      - color: '#ffffff'   
      - font-size: 1.2rem
      - font-weight: bold          
      - line-height: 47.5px        
      - border-radius: 100%   
    state_mod:
      - justify-self: start
      - padding-left: 15px
      - font-size: 1rem
      - padding-bottom: 5px   
state:
  - value: 'off'
    styles:
      card:
        - filter: opacity(70%)
      icon:
        - filter: grayscale(100%)

The rest of my lovelace-config can be found here: https://github.com/Noah-UI/home-assistant