7segment 탁상용 시계 만들어보기

이광석 · 2월 27, 2024, 2:30오전

요즘들어 시간의 중요성을 뼈저리게 느껴서…
핸드폰을 열지 않고 바로바로 볼 수 있는
탁상용시계가 눈에 들어왔습니다.

집에서 놀고 있는 라즈베리파이도 활용 해볼겸…해서 만들어보기로 결정하였습니다.

준비물 : 라즈베리파이 파이3, LCD (인치는 고민중…)

요런 느낌의 UI를 가진 탁상용 시계

우선, 7segment의 segment 자리의 path값으 따기 위해

이 사진을 가지고 path값 만들 예정입니다.

dimohy · 2월 27, 2024, 3:37오전

기대됩니다! UI 프레임워크는 어떤 것 쓸 예정이세요?

이광석 · 2월 27, 2024, 4:54오전

아발로니아로 할 예정입니다!

BOBx5 · 2월 27, 2024, 5:24오전

위키에 등록된 svg가 있습니다!

이광석 · 2월 27, 2024, 5:59오전

앗 감사합니다
하지만 사알짝 기울져있는 segment로 할예정이라 참고만하겠습니다

시간내주셔서 감사합니다!!

이광석 · 2월 27, 2024, 6:52오전

PATH(파란 부분) 한땀한땀 좌표찍어가면서 만들었습니다.

al6uiz · 2월 27, 2024, 7:05오전

래스터 이미지를 벡터 이미지로 변환해주는 사이트
Free SVG Converter (picsvg.com)

뒤집어져 출력되므로 RenderTransform에 ScaleTransform.ScaleY = -1.0등으로 뒤집어 사용하시면 됩니다.

<Path Data="M995 4754 c-136 -33 -188 -50 -235 -75 -65 -34 -195 -148 -183 -159
4 -5 144 -72 310 -150 l302 -142 431 8 431 7 160 234 c89 129 159 237 156 239
-3 3 -232 12 -509 19 -276 8 -579 16 -673 19 -93 2 -179 2 -190 0z"/>
<Path Data="M2333 4396 l-171 -254 -11 -223 c-6 -123 -18 -388 -26 -589 -8 -201
-17 -395 -20 -431 l-6 -65 236 -157 c129 -86 241 -157 248 -157 7 0 38 26 69
58 l55 57 12 245 c7 135 21 409 31 610 11 201 24 462 30 581 l11 216 -26 69
c-35 92 -76 154 -138 206 -52 44 -112 88 -119 88 -2 0 -81 -114 -175 -254z"/>
<Path Data="M456 4338 c-3 -24 -8 -97 -11 -163 -3 -66 -10 -178 -15 -250 -11
-148 -30 -430 -61 -916 -13 -184 -20 -342 -17 -351 4 -8 43 -37 88 -63 l81
-47 87 52 c48 29 149 91 224 137 l137 84 5 62 c6 73 23 330 31 472 3 55 13
197 21 315 8 118 18 266 22 329 l8 113 -51 23 c-27 12 -159 73 -292 134 -133
61 -244 111 -247 111 -3 0 -7 -19 -10 -42z"/>
<Path Data="M1042 2692 c-129 -77 -329 -198 -381 -231 l-55 -34 208 -104 208
-104 397 -19 c218 -11 428 -22 466 -25 69 -5 73 -4 334 90 145 53 271 100 279
104 11 6 -54 55 -249 185 l-264 176 -440 0 -440 0 -63 -38z"/>
<Path Data="M424 2237 l-72 -52 -6 -250 c-14 -578 -28 -1456 -24 -1460 5 -6 83
29 318 142 80 39 175 84 211 101 l66 31 6 78 c4 43 11 218 18 388 6 171 17
429 23 575 7 146 11 269 8 273 -5 11 -428 216 -457 222 -13 3 -44 -13 -91 -48z"/>
<Path Data="M2360 2167 l-285 -102 -7 -35 c-4 -19 -17 -322 -28 -673 l-21 -639
146 -236 c81 -130 152 -243 159 -250 10 -10 27 -2 87 39 209 143 228 201 254
769 8 195 20 447 25 560 6 113 13 289 16 391 l7 186 -32 46 c-18 26 -33 47
-34 47 -1 -1 -130 -47 -287 -103z"/>
<Path Data="M885 571 c-66 -32 -200 -97 -297 -144 -98 -47 -178 -90 -178 -94 0
-9 92 -79 151 -115 14 -9 62 -28 108 -42 l82 -26 725 0 c398 0 724 2 724 5 0
2 -37 62 -83 132 -46 70 -114 176 -151 236 l-68 107 -447 -1 -446 0 -120 -58z"/>

<Path
    Data="M808 2689 c-35 -27 -65 -54 -66 -60 -6 -16 112 -169 133 -173 11 -3 180 -7 377 -10 l356 -5 111 85 111 86 -18 30 c-9 16 -30 41 -45 56 l-28 27 -222 6 c-122 4 -317 7 -434 8 l-212 1 -63 -51z" />
<Path
    Data="M581 2510 c-33 -27 -62 -54 -65 -59 -11 -17 -156 -743 -156 -778 0 -24 12 -50 41 -88 23 -30 45 -55 49 -55 15 0 169 131 174 148 7 23 90 404 126 581 l30 143 -56 79 c-30 43 -62 79 -69 79 -8 0 -41 -22 -74 -50z" />
<Path
    Data="M1775 2459 c-49 -39 -93 -78 -97 -87 -11 -24 -148 -687 -148 -713 0 -22 88 -137 106 -138 18 -1 151 118 163 147 24 61 152 656 154 719 2 42 -3 59 -28 95 -17 23 -37 44 -45 45 -8 1 -55 -29 -105 -68z" />
<Path
    Data="M615 1534 c-109 -86 -105 -75 -55 -139 24 -31 52 -63 63 -70 16 -11 90 -14 384 -15 l364 0 84 70 c46 38 86 73 88 78 3 4 -17 35 -44 70 l-49 62 -383 0 -382 0 -70 -56z" />
<Path
    Data="M337 1335 c-42 -36 -80 -73 -86 -82 -12 -25 -142 -673 -144 -722 -1 -30 6 -51 28 -82 17 -24 35 -44 41 -46 11 -4 178 120 200 148 6 8 44 173 84 367 l72 353 -28 37 c-35 47 -76 92 -84 92 -4 0 -41 -29 -83 -65z" />
<Path
    Data="M1524 1318 l-89 -75 -79 -360 -79 -360 57 -77 c32 -42 63 -76 69 -76 23 0 129 92 142 123 13 33 148 638 160 717 6 46 -5 72 -73 159 l-19 23 -89 -74z" />
<Path
    Data="M345 399 c-49 -38 -93 -73 -98 -78 -12 -12 20 -65 63 -106 l31 -30 410 2 410 2 42 25 c23 14 60 41 81 60 l39 34 -53 73 c-29 41 -58 77 -64 81 -6 4 -182 8 -391 7 l-380 0 -90 -70z" />

이광석 · 2월 27, 2024, 7:06오전

와…이런게 있었네요…

살짝 돌아가있긴한데… 뒹굴러보겠습니다

al6uiz · 2월 27, 2024, 7:14오전

폰트를 이용한 구현

Techno > LCD fonts | dafont.com

digit - Search - dafont.com

마음에 드시는 폰트에 Italic 등 스타일을 적용해서 사용하시면 됩니다.

이광석 · 2월 28, 2024, 2:51오전

여러 스타일 변경 기능을 구현할때 참고해보도록 하겠습니다!

이광석 · 2월 28, 2024, 3:08오전

제 기준으로

1번부터 7번까지의 Path값을 위 사진처럼 정렬하였습니다.

그렇기 때문에 아래와 같은 규칙이 생깁니다.
숫자1 = Path 번호 2, 3
숫자2 = Path 번호 1,2,4,5,7
숫자3 = Path 번호 1,2,3,4,7
숫자4 = Path 번호 2,3,6,7
숫자5 = Path 번호 1,3,4,6,7,
숫자6 = Path 번호 1,3,4,5,6,7
숫자7 = Path 번호 1,2,3,6
숫자8 = path 번호 1,2,3,4,5,6,7
숫자9 = path 번호 1,2,3,6,7
숫자0 = path 번호 1,2,3,4,5,6