Simple Interactive Floorplan in Home Assistant - No fancy software or custom cards

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025

Комментарии • 56

  • @tomroberts8666
    @tomroberts8666 2 года назад +19

    This is great - you should be able to use 'font-size: 3vw' to scale the icons to be 3% of the screen width though. Then it'll work well on any screen size

  • @paulhibbert
    @paulhibbert 2 года назад +5

    Absolutely awesome work mate. Well done!

  • @RocketBoom1966
    @RocketBoom1966 3 года назад +6

    Thanks for that. Great job, well presented at the right pace. Your channel keeps getting better.

  • @jakeasmith
    @jakeasmith Год назад

    Exactly what I was looking for this evening. Thank you!

  • @IanTakats
    @IanTakats 3 года назад +2

    Great idea, a real eye-opener to a real beginner. thanks!

  • @jlant1588
    @jlant1588 3 года назад +1

    Didn't know I could do that. Thanks for this idea!

  • @BebeMischa
    @BebeMischa 3 года назад

    Thank you very much! I have a floorplan finally! Yeah!!!

  • @ksenyxths
    @ksenyxths 3 года назад

    So simple and amazing!
    Thanks for sharing!!

  • @TreyRuiz
    @TreyRuiz 3 года назад +6

    Really helpful! Sometimes forums and even video guides forget some of us trying to run home assistant are not full-time computer programs, so basics like this really really help! One question though, how did you "extract" the temperature sensor into a new sensor?

    • @andrewk2275
      @andrewk2275 3 года назад

      I was wondering that, it would be very useful to have the temperature show up.

    • @andrewk2275
      @andrewk2275 3 года назад

      If you put something like this, into your config file, that should give you the temperatures
      hall_temperature:
      friendly_name: 'hall temperature'
      value_template: "{{ state_attr('climate.hall','current_temperature') }}"
      Using what you have called your evo home room name in place of my climate.hall

  • @EA-ks2kr
    @EA-ks2kr 7 месяцев назад

    Hi Will,
    U´re videos are made for me ;)
    Which Type in HA / Picture elements card / Elements shuld i use for Cover/Blinds ?

  • @ShayneDcosta
    @ShayneDcosta Год назад

    This is a great tutorial, thank you so much. I'm using HA on windows 11VM. Where would the www folder be ? Appreciate your help.

  • @skeay2005
    @skeay2005 3 года назад

    thank you for the video!

  • @digitalgord5694
    @digitalgord5694 Год назад

    Great stuff bud, I hope you get back into creating videos ;-)

  • @alfadex50
    @alfadex50 3 года назад +1

    great! i like it is simple

  • @SmartLifeEnthusiast
    @SmartLifeEnthusiast 3 года назад +5

    Note that this will look different on the pc vs a smartphone/tablet.
    Mainly, the icons won't look as small as on the pc.
    You may want to make 2 versions of this, one for pc and one for tablet.
    There's some styling you can do to change the size of the icons or change the colours of the (in)active state.

  • @marcelvanloock3341
    @marcelvanloock3341 3 года назад

    How can i get the chaging coller bij switching the lights ???

  • @SA-oj3bo
    @SA-oj3bo 3 года назад +3

    Hi, how can I use the File manager addon to import the floorplan image and connect it to the picture element in the overview dashboard? I put the image in config map and also in a new www map in the config map, but could not couple it to the picture element card. What path to use in the yampl lease? I tried image: config/www/floorplan.png image: local/floorplan.png and many other options. Thanks!

    • @MGL83
      @MGL83 3 года назад

      Same problem here. It just won't display. I have no clue why. I even downloaded the demo png file the card uses, and tried pointing to that (I thought maybe some picture size limitations or encodings issues are the problem) but no, also won't display. Did you eventually figure it out?

    • @glen5923
      @glen5923 3 года назад +4

      I was having this same problem it turns out that you have to create a sub folder under the www folder that was the fix for me. /local/subfolder/file.png

    • @HerraMonoTooni
      @HerraMonoTooni 2 года назад +2

      @@glen5923 That didn't work for me.... at first. But then I rebooted Home Assistant and.... it magically works now.

  • @crc-error-7968
    @crc-error-7968 3 года назад

    Hello Will, do you know if is it possible to group different rooms (areas) - and so all devices and entities associated - of the house into a floor? and floors grouped into the house area?
    Cheers from Italy and happy new year

  • @zed915
    @zed915 3 года назад

    Which speakers do u prefer to integrate with HASSIO?

  • @Tobis_Tricks
    @Tobis_Tricks 3 года назад

    Hey Will, I have the problem that my whole picture is recognised as a switch... can I turn this off somehow?

  • @csocsika1700
    @csocsika1700 3 года назад

    well done! :) am its take 10 min for you XD for me forever :D Im new in HA just learning now.

  • @davecl35
    @davecl35 3 года назад

    Hi Will, I started off trying the more advanced floorplan tutorial but soon got over my head (i'll try again some time).
    This however has been great but I need a bit of help if you don't mind.
    I have added the media player as you show but what I would like is if I click on the icon then it pops up the mini media player card.
    Is this possible? Thanks

  • @ZoranVasicMiki
    @ZoranVasicMiki Год назад

    I know this is a 2 year old video, but instead of drawing this image you can literally map out everything with magicPlan app (I don't know if there is a android version) :)

  • @TheHellis
    @TheHellis 3 года назад

    I have state-icon on my camera and it displays a round shape of the camera feed.

    • @WillSurridgeTech
      @WillSurridgeTech  3 года назад

      you want icon not state-icon

    • @TheHellis
      @TheHellis 3 года назад

      ​@@WillSurridgeTech No... state-icon shows the camera feed in a small round shape. Try it and you will see.

    • @WillSurridgeTech
      @WillSurridgeTech  3 года назад

      ah okay I follow - for mine for some reason I was getting a warning triangle rather than the stream for one of my cameras. You are correct it can just just the feed in a small image; personally I prefer the icon as it's more obvious what it is to click, especially on a small screen

  • @photelegy
    @photelegy 2 года назад

    How to just make the size right for all displays?
    This shouldn't be hard at all. it should just scale up (The ration stays the same).

  • @steffenjob2100
    @steffenjob2100 3 года назад

    warum ist dein png Bild so schön groß, bei mir bleibt es total klein?

  • @jimlundborg
    @jimlundborg 3 года назад

    some of my icons seem to be white so I don't see them is there a way to change their color? I only noticed the white if I have another icon over the white one.
    Nevermind, I found you can you "--paper-item-icon-color": pink

  • @alifhijriah
    @alifhijriah 3 года назад +1

    hello I'm from Indonesia very good video bro. I'm having trouble with the image: 'local/subfolder/folder name.png

    • @alifhijriah
      @alifhijriah 3 года назад +1

      I've followed the tutorial you provided but my image doesn't appear

    • @MGL83
      @MGL83 3 года назад

      @@alifhijriah Same. Did you end up finding out what was the problem?

    • @alifhijriah
      @alifhijriah 3 года назад

      @@MGL83 thank you i have solved my problem

    • @alifhijriah
      @alifhijriah 3 года назад

      @@MGL83I wonder if I can add a weather card in lovelace? Thank you in advance

    • @petern.ibrahim9062
      @petern.ibrahim9062 Год назад

      @@alifhijriah How ?

  • @OnlineObsessionista
    @OnlineObsessionista Год назад

    But Adobe Illustrator is a fancy software. It costs a lot

  • @papasid
    @papasid Год назад

    best