코딩정보




● HA작업) HAOS에 커스텀 날씨 카드 lovelace weather 을 대시보드에 추가하자

♨ 카랜더 일정 : 2023년05월04일
  • 링크

  • 첨부

  • 컨텐츠 정보

    본문

    ● HA작업) HAOS에   커스텀 날씨 카드  lovelace 대시보드에 weather-card 을  추가하자

    네이버날씨로 설정 하세요

    https://11q.kr/www/bbs/board.php?bo_table=co3&wr_id=839

    ------ 이하 자료 참조만 하세요 ---

    아래방법은 api 키가 필요하며 사용에 제한이 있습니다

    간단한 방법으로 초보자도 쉽게 추가방법입니다

    3232235521_1683226918.9641.png

    상기와 같이 등록을 위하여 아래의 openweathermap을 등록 해야 합니다.

    https://www.home-assistant.io/integrations/openweathermap/#weather

    3232235521_1683224102.5646.png


    3232235521_1683224232.0292.png


    3232235521_1683224217.487.png

    상단 링크를 변경 합니다

    http://homeassistant.local:8123/_my_redirect/config_flow_start?domain=openweathermap

    자신의 DNS로 변경 합니다

    http://ha.11q.duckdns.org/_my_redirect/config_flow_start?domain=openweathermap


    3232235521_1683224380.6522.png

    ctrl + link 로 사이트로 이동합니다


    3232235521_1683224467.3812.png

    계정로그인 생성 api 생성 >>> 이메일 확인 하고  >>> api 확인 합니다

    저는 내 API 키 ,>>>> 확인 합니다.

    3232235521_1683224587.0026.png

    내 API를 복사합니다

    3232235521_1683224712.9838.png

    지도 의 위도 경도 찾기 

    http://map.esran.com/index.php

    3232235521_1683463531.4386.png

    저의집 입니다

    37.278107

    127.071129

    3232235521_1683225272.4349.png


    3232235521_1683193638.103.png


    3232235521_1683225264.1499.png


    3232235521_1683225255.3018.png

    통합구성요소에서 확인

    3232235521_1683227299.4727.png

    3232235521_1683225244.3129.png


    온도 를 다른 pc의 위젯으로 온도를 확인 비교  합니다

    3232235521_1683225339.422.png

    weather-card 추가해야 대시보드에 카드추가시 

    카드가 나옴니다

    bramkragten/weather-cardPublic

    https://github.com/bramkragten/weather-card

    설치:

    호스팅 또는 자체 호스팅(수동)의 두 가지 옵션이 있습니다. 첫 번째 옵션은 인터넷이 필요하며 자동으로 업데이트됩니다.

    대시보드에 리소스 추가하기 >> lovelace 구성의 리소스에 다음을 추가합니다.


    - url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js

      type: module

    ==================

    url을 복사후 리소스 추가는 > 설정 > 대시보드 > 리소스추가  >>> url에 추가후  자바로 선택 합니다.

    3232235521_1683209587.2767.png

    리소스 추가후

    3232235521_1683209601.7266.png
    추가한 리소스 을   대시보드에서  사용자 카드를 추가 합니다.

    들러보기 > 우측 점3개  편집 하기

    3232235521_1683225687.0697.png

    하단에 카드 추가하기 > 날씨 예보를 추가 합니다

    3232235521_1683225495.5588.png


     날씨 예보 추가 구성시 >  이름 없이 >저장하기

    3232235521_1683225483.7667.png


    이제 대시보드/둘러보기에 날씨 정보가 등록 되었습니다

    3232235521_1683225473.0371.png


    온도 를 다른 pc의 위젯으로 온도를 확인 비교  합니다

    3232235521_1683225339.422.png

    다른형태를 대시보드(둘러보기)에 다른카드 추가해 봅니다

    3232235521_1683227510.906.png 



    수동 방법으로 설치>  폴더를 생성하고  파일을 업로드 합니다

    1. weather-card.js를 에 다운로드합니다 /config/www/custom-lovelace/weather-card/(또는 의 다른 폴더 /config/www/)
    2. amCharts 아이콘 ("animated" 폴더의 내용)을 아래 /config/www/custom-lovelace/weather-card/icons/(또는 의 다른 폴더 /config/www/) 에 저장합니다.
    3. 저장 모드에서 Lovelace를 사용하고 편집기를 사용하려면 weather-card-editor.js를 에 다운로드하십시오 /config/www/custom-lovelace/weather-card/(또는 위에서 사용한 폴더)
    4. 3232235521_1683208997.4038.png

    lovelace 구성의 리소스에 다음을 추가합니다. >>> 리소스을 추가를 폴더위치로 추가 합니다  >> 

    resources:

      - url: /local/custom-lovelace/weather-card/weather-card.js

        type: module

     /local/custom-lovelace/weather-card/weather-card.js 복사 합니다

    1.대시보드에서 편집

    3232235521_1683209672.3273.png

    2. 하단 카드추가하기

    3232235521_1683209717.2534.png


    구성> 사용자카드 를 선택  대시보드에 추가 하기 입니다

    대시보드에 카드 추가하기 방법 대시보드에 카드 추가하기 방법 

    지동에서 home위치를 지정 합니다.>> 주어진 이름으로 날씨 위치 지정

    3232235521_1683206652.8664.png

    날씨를 추가할 대시보드에서 >>>점3개에서 편집

    3232235521_1683208152.69.png

    하단에서 카드추가하기 >>>

    3232235521_1683207895.6629.png

    이름과 지역에  지도에서 주어진 이름을 입력 합니다

    3232235521_1683208060.8138.png

    3232235521_1683208275.1354.png

    추가 되었습니다 (주) 아이콘이 안나오네요 ???

    3232235521_1683208303.1233.png

    ==> name없이  >>> 저장만 하면 

    3232235521_1683211197.1266.png

    아이콘이 나옴

    3232235521_1683211236.2198.png

    ==================

    개초보의 HA 설정기 - 4탄 < custom component 설치하기 >

    https://blog.naver.com/ohminy11/221451586355

    을 참조하여 lovelace weather를 Homeassistant의 메인 대시보드에 추가해 보자

    3232235521_1683191345.6238.png

    https://www.youtube.com/watch?v=5DMb8cYs8pw

    동영상도 참조


    구글에서 lovelace weather 검색

    https://github.com/bramkragten/weather-card


    홈어시스턴트 날씨 카드 상위 10개

    https://smarthomescene.com/blog/top-10-home-assistant-weather-cards/


    나중에 HACS) 커스텀 날씨 카드

    https://cafe.naver.com/koreassistant/10684

    도 추가해 보자

    ===========

    api키가 무엇인가 ?

    https://www.home-assistant.io/integrations/openweathermap/#weather

    에서 하단에 보면

    API에 대한 자세한 내용은 OpenWeatherMap 문서 에서 확인할 수 있습니다 .


    https://openweathermap.org/api

    는 가입 자동  접속 상태 입니

    3232235521_1683192544.8213.png


    https://openweathermap.org/price#weather

    3232235521_1683193371.1067.png

    3232235521_1683193694.881.png

    3232235521_1683193648.894.png

    ============= end =====


    [ 추가 정보 ... 더보기) ]
    뷰PDF 1,2



    office view

    관련자료

    댓글목록

    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    저의집  위도경도 입니다
    http://map.esran.com/
    저의집
    37.278107
    127.071129
    ===============

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일
    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    클릭 위치의 위도는
    37.27811780732625,
    경도는
    127.07244625505047
     입니다

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    0a415b4138eac5c394ab72af72e40899
    저의집  위도경도 입니다
    http://map.esran.com/
    저의집
    37.278107
    127.071129

    답변
    profile_image

    11qkr님의 댓글

    11qkr 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 아이피 (192.♡.0.1) 작성일

    사용제한으로
    ● HA작성) 네이버 날씨 대시보드 추가하기
    로 재설치합니다

    답변



    ♥간단_메모글♥


    최근글


    새댓글



    PHP 안에 HTML ☞ 홈페이지 화면갱신 시간은 ♨
    ▶ 2024-04-25 16:35:47

    오늘의 홈 현황


    • 현재 접속자♨ 106 명
    • 오늘 가입자※ 2 명
    • 어제 가입자※ 5 명
    • 주간 가입자※ 23 명
    • 오늘 방문자 1,378 명
    • 어제 방문자 1,452 명
    • 최대 방문자 13,042 명
    • 전체 방문자 4,288,209 명
    • 전체 게시물※ 8,532 개
    • 전체 댓글수※ 24,512 개
    • 전체 회원수 10,930 명

    QR코드


    ☞ QR코드 스캔은 kakao앱 자체 QR코드

    알림 0








    최신글↑