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

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

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

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

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

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


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

10개의 좋아요

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

5개의 좋아요

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

5개의 좋아요

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

4개의 좋아요

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

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

3개의 좋아요

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

4개의 좋아요

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

뒤집어져 출력되므로 RenderTransformScaleTransform.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"/>

image

<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" />
6개의 좋아요

와…이런게 있었네요…

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

5개의 좋아요

폰트를 이용한 구현

Techno > LCD fonts | dafont.com

digit - Search - dafont.com

image

image

image

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

7개의 좋아요

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

3개의 좋아요

제 기준으로


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

4개의 좋아요

image
저는 3d프린터가 있으면 이런것 만들어보고싶네요 기대되네요

7개의 좋아요

이걸 보니 1,0의 flag의 조합으로 만드는 것도 괜찮아 보이네요!
실제로 IC7447 디코더 등은 BCD코드로 작동하니까, 그걸 응용하셔도 될것같아요.

2개의 좋아요

네 맞습니다! 여러 확장성있게 변화 될 수있어서

제가 먼저 쏘아올리면…누군가가.!

3개의 좋아요

일단 제 기준으로 1~0까지의 숫자를 만들어보았고. 이제 이것을 좀 더 꾸미는 작업을…!

6개의 좋아요

아스라다!! 부스트온!
료카이

2개의 좋아요

저는… 빛나고 예쁜 아날로그 시계를 만들고 싶어서 아두이노로 만들었었습니다.ㅎㅎ
LED 색상 설정 프로그램은 WiFi로 통신하도록 WPF로 만들었었지요~
아크릴LED싸인시계

8개의 좋아요

와…이거 제 결과물이 초라해질것만같네요…

3개의 좋아요

콜론까지 구성하였습니다 껄껄…
Screenshot 2024-02-28 at 13.13.37

6개의 좋아요

그렇지 않습니다. 저는 CNC 장비를 썼기 때문에 반칙입니다…ㅎㅎ

4개의 좋아요