DTH 아이콘을 커스텀 아이콘으로 변경하기

ST App를 사용하다보면 어느 순간 DTH를 보게되고 자신에게 맞게 조금씩 수정하고 싶은 욕심이 생긴다. 

가장 먼저 생기는 욕심이 아이콘이나 배경색 변경에 대한 것이다.... (사실 다른건 만질 엄두가 안나기 때문이다.ㅎㅎ)

그래서 아이콘 바꾸는법에 대해 간단히 설명하려고 한다. 

그런데 먼저 간단하게 DTH Tile 부분에 대해 간단하게 알아야 한다. 

1. DTH Tile 간단히 알아보기

1) scale  - 격자를 어떻게 배치할 것인가에 대한 것이다. 

(scale: 1)  - 가로 화면 전체를 3개의 격자크기로 사용가능하다. 설정하지 않으면 (1)이다.

(scale: 2)  - 가로 화면 전체를 6개의 격자크기로 사용가능하다. 아래 사진은 (scale: 2) 로 설정했을때 격자가 어떻게 설정되는 지를 보여 준다. 일반적으로 2로 설정한다.

4) width: 2, height: 2  - 정보를 나타내는 타일의 크기를 설정하는 옵션이다. 설정하는 수는 (scale: 1)일때는 최대 width: 가 3이고, (scale: 2)일때는 최대 width: 가 6이된다. 이 수보다 더 크게 설정하면 화면이 잘려서 표시된다.

(scale: 2)이고 width: 2 로 설정되면 위의 타일의 ACTIVE타일, 온도타일, 베터리 타일의 크기로 표시가 된다. 

5) 기타 옵션

canChangeIcon: true(or: false)  - ST App에서 메인타일의 아이콘을 변경할 수 있는 옵션을 제공할것 인지에 대한 옵션이다. true 이면 ST App에서 아이콘 라이버러리에 있는 아이콘 중에 선택하여 변경이 가능하다. 설정하지 않으면 기본이 true 이다.

can ChangeBackground: true(or: false)  - ST App에서 메인타일의 배경이미지를 변경할 수 있는 옵션을 제공할 것인지에 대한 옵션이다. true 이면 ST App에서 폰의 사진첩에 있는 이미지나 사진을 직접 찍어서 변경이 가능하다. 설정하지 않으면 기본이 false 이다. 

하지만 타일 전체에 이미지가 적용되지 않고 아래 처럼 원형으로 적용된다. 

decoration: flat   - 타일에 입체감 있는 동그란 테두리를 할것인지에 대한 설정으로 이 항목을 설정하지 않으면 기본적으로 테두리가 설정되고 싫다면 이 항목을 추가하면 테두리가 없는 타일이 만들어진다. 왼쪽은 설정하지 않았을때, 오른쪽은 설정했을때 이다. 

6) icon: " "  - 이부분은 타일에 사용되는 아이콘을 설정하는 부분이다. 일반적으로 ST 라이버러리의 아이콘이 등록되어 있으며 "  " 안의 항목을 원하는 아이콘으로 바꾸어 주면 된다. 타일의 state에 따라 icon을 변경하여 좀더 역동적이고 미려한 타일을 만들수 있다. 

7) backgroundColor: " "  - 이부분은 타일의 배경색을 설정하는 부분이다. 배경색은 Hex code로 입력하도록 되어있으면 색상별 코드는 아래 사이트를 참조하여 원하는 색상으로 설정하면 된다. 

http://www.color-hex.com/

2. SmartThings 라이버러리를 이용한 아이콘 변경

위 항목에서

icon:"st.switches.switch.off"

icon:"st.switches.switch.on"

이 부분이 'switch'타일을 대표하는 아이콘을 설정하는 부분이다. 아이콘 항목이 두개인 것은 장치의 상태에 따라 서로 다른 아이콘을 표시하기 위함이다. 장치의 상태가 OFF일때는 icon:"st.switches.switch.off" 에 설정된 아이콘이 장치의 상태가 ON일때는 icon:"st.switches.switch.on" 에 설정된 아이콘이 각각 타일에 나타나게 된다. 

아이콘이 마음에 들지 않을때 icon:"st.switches.switch.off" 부분의 icon:"  " 안의 항목을 바꾸어 주면 된다. 

ST 라이버러리 주소는 아래와 같다. 아래에서 마음에 드는 아이콘의 바로가기 경로를 복사해서 붙여넣기만 하면 된다. 

ST 아이콘 주소 - 클릭

아래 사진은 전등스위치와 보일러 스위치의 아이콘과 배경색 설정을 통해 현재 상태를 한 눈에 알아볼 수 있도록 한것이다.

  

또한 BackgroundColor의 경우 상태 값(value)에 따라 색상을 다르게 설정할 수도 있다. 

아래 영상은 커튼 DTH의 아이콘과 색상등을 변경한 후 작동 영상이다. 참고로 커튼이 닫힌(closed) 상태에서 메인 타일을 탭하면 열리는 동안은 상태가 'opening'이고 완전히 열려야 상태가 'open'으로 바뀌기 때문에 영상이 조금 길다. 처음은 메인 타일을 이용하여 커튼을 열고 닫을때 타일의 변화이고 두번째는 보조 버튼 타일을 이용하여 열고 닫을때 타일의 변화이다. 

3. 타일 아이콘 커스텀 아이콘으로 변경하기

아이콘을 수정하다 보면 라이버러리에서 제공하는 아이콘이 아니라 '나만의 아이콘을 이용할 수는 없을까?' 하는 생각이 든다. 다행히도 그런 생각을 실현 시킬 수 있다. 먼저 자신이 원하는 이미지를 구해야 한다. 물론 포토샵이나 일러스트를 이용하여 자신이 직접 디자인하거나 편집을 통해 생성해도 된다. 

3-1. 링크가 있는 이미지 아이콘으로 등록하기

먼저 인터넷 검색을 통해 아이콘을 구할때 무료 아이콘 사이트를 이용하면 좋다. 

아래의 예는 https://www.shareicon.net/ 사이트를 이용했다.

위의 사이트에서 원하는 이미지를 검색하고 원하는 사이즈를 선택한 후에 우클릭 후 이미지 주소를 복사한다. 

아래처럼 복사한 주소를 icon: "   "사이에  넣으면 된다. 

 icon:"https://www.shareicon.net/data/128x128/2016/10/05/839402_light-bulb_512x512.png" 

반영하면 아래와 같이 타일 아이콘이 변경된것을 확인할 수 있다. 

3-2. 링크가 없는 이미지 파일을 아이콘으로 변경하기

위와 같이 링크가 있다면 간단하게 아이콘 변경이 가능하지만 그렇지 않은 경우는 이미지 파일을 온라인상에 올린 후에 변경할 수 있다. 가장 쉬운 방법 중 하나가 네이버 블로그를 이용하는 방법이다.

우선 이미지 파일을 준비한다.

    

이미지 파일을 네이버 블로그에 글쓰기를 통해 사진을 업로드 한다. 이때 비밀글로 등록해도 상관없다. 

그리고 아래와 같이 이미지를 클릭하여 새창으로 띄운 후 우클릭하여 속성에서 링크를 복사하거나 이미지 주소를 복사해도 된다.

그리고 3-1.과 같은 방법으로 아이콘을 등록하면 된다. 

아래는 메인타일에 커스텀 아이콘을 등록한 화면이다.

마무리하며...

DTH를 수정하다 보면 예기치 않은 변수로 인해 장치 작동에 문제가 생기도 한다. 그렇기 때문에 반드시 수정 전에는 백업을 하고 하는 것이 좋다.