डिजिटल घड़ी डिज़ाइन कलेक्शन

• Clocks.dev एक ऐसी साइट है जहां मौजूदा समय और तारीख को अलग-अलग तरीकों से दिखाने वाले डिजिटल घड़ी डिज़ाइनों को एक जगह देखा जा सकता है
• ज्यामितीय आकृतियां, अंकों की व्यवस्था, शब्दों के संयोजन, घड़ी की सुइयां, circular dials, LCD आदि अलग-अलग visual representation तरीकों की तुलना की जा सकती है
• All time, This week, Newest के आधार पर डिज़ाइन देख सकते हैं, और नई घड़ी डिज़ाइन भी खुद बना सकते हैं
• number-field, word-field, binary-signal, swiss-railway, corner-date जैसी घड़ियां शामिल हैं, जिनके नाम से ही उनका representation तरीका या style समझ आता है
• रजिस्टर की गई सभी घड़ियां open source हैं, इसलिए इन्हें डिज़ाइन देखने के साथ-साथ implementation ideas के संदर्भ के रूप में भी इस्तेमाल किया जा सकता है

---

समय को अलग-अलग तरीकों से दिखाने की खोज

• Clocks.dev कई डिजिटल घड़ी डिज़ाइनों को एकत्र करके उपलब्ध कराता है
• All time, This week, Newest filters से सूची ब्राउज़ कर सकते हैं, और Create new clock पर नई घड़ी बना सकते हैं

• आकृतियां और घड़ी की सुइयां

  • geometric-proof: ज्यामितीय आकृतियों का उपयोग करता है
  • three-lines: तीन लाइनों से घड़ी बनाता है
  • precision-dial: precision dial रूप का उपयोग करता है
  • figure-hands, veiled-hands, floating-hands: घड़ी की सुइयों को अलग-अलग तरीकों से दिखाते हैं
  • minimal-disc, radial-field: circular form के आधार पर समय दिखाते हैं

• अंक और शब्द

  • binary-signal: binary signal का उपयोग करने वाला डिज़ाइन है
  • number-field: 1~12 और 1~60 के number field से समय को बनाता है
  • word-field: FIVE, TEN, QUARTER, HALF, PAST, TO जैसे शब्द संयोजनों से समय दिखाता है
  • mint-rounded, lock-screen, second-tilt: अंकों पर आधारित समय display को अलग-अलग styles में बनाते हैं

• तारीख और अतिरिक्त जानकारी

  • day-mood: It’s slow evening o’clock 22° की तरह समयावधि और तापमान को वाक्य के रूप में दिखाता है
  • corner-date, orbit-date: समय के साथ तारीख भी दिखाते हैं
  • रंग घड़ी: दिन के 86,400 seconds को 16,777,216 रंगों में से किसी एक से जोड़कर मौजूदा color code दिखाती है
  • Galactic Standard Time: zone और track जानकारी के साथ समय दिखाता है
  • Digital Quartz LCD: 1983, सप्ताह का दिन, 24H, alarm, signal, light और start indicators शामिल करने वाला digital LCD style है

• अलग-अलग concepts

  • temporal-exposure: समय के exposure को नाम में रखने वाला डिज़ाइन है
  • swiss-railway: Swiss Railway style लागू करता है

Open source और निर्माता

• रजिस्टर की गई सभी घड़ियां open source के रूप में उपलब्ध हैं
• साइट Lev Miseri ने बनाई है

[GN⁺]

Hacker News की राय

• मज़े के लिए एनालॉग घड़ियों से बनी डिजिटल घड़ी बनाई: https://mikespeed.com/clock

• AI बूम से पहले SVG और JavaScript के साथ सभी experimental watch faces खुद बनाए थे
  शायद कोई महान काम न हो, लेकिन एक designer के तौर पर basic coding खुद सीखकर इसे पूरा करने पर गर्व है: https://watchface.netlify.app/
  बनाने की प्रक्रिया भी लिखी है: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

  • इसे देखकर फिर से hardware और PCB fabrication में कूदकर दीवार पर लगाने लायक कोई चीज़ बनाने का मन हो रहा है
    अच्छा होगा अगर watch face चलने वाले page पर समय सीधे input करके उसका रूप देखा जा सके
  • Tokyoflash designs की बात करने आया था, यहाँ देखकर अच्छा लगा

• अब शायद HN के clock enthusiasts को इकट्ठा करके पुराने अंदाज़ का webring बनाने का अच्छा समय है
  Lock Screen मेरे Filling Digit clock जैसा है, जिसमें खाली अंकों को नीचे से पानी भरकर seconds दिखाए जाते हैं
  काफी मज़ेदार Alphabetical Clock भी HN पर चर्चा में आया था, और webring का concept Wikipedia पर देखा जा सकता है

• पहली बार इस्तेमाल किए गए Svelte से Voutilainen Vingt-8 ISO को फिर से बनाया: https://clocks.dev/clock/3b254b2789ec

  • यह concept पहली बार देखा है, लेकिन लगता है जल्दी ही आदत हो जाएगी, और ऐसी wristwatch रखने का मन हो रहा है

• Chrome 150.0.7871.115 और Windows पर page के करीब दो-तिहाई हिस्से के बाद scrollbar गायब हो जाता है और आगे scroll नहीं किया जा सकता

  • अभी इसे ठीक कर दिया है, लेकिन अधिक बुनियादी performance issue की और जांच करनी पड़ेगी
  • browser के default scroll behavior से छेड़छाड़ करना web development में बड़ा taboo मानता हूँ
  • Windows 11 पर Firefox 152.0.5 में भी यही समस्या होती है

• Number Field numeric clock को spatially represent करने का सबसे अच्छा तरीका लगता है
  perfect होने के लिए इसे 24-hour format में बदलना होगा, लेकिन यह छोटा बदलाव है, और 12-column structure की वजह से एक नज़र में approximate time समझना आसान है

• जापानी abacus का इस्तेमाल करके Soroban clock बनाई, लेकिन CSS-based animation इस्तेमाल करने की वजह से collection में add नहीं कर पाया: https://soroban-clock.netlify.app

• John Maeda की 12 o’clocks भी देखने लायक है
  1996 की रचना के ज़रिए समय को graphical रूप में दिखाने के तरीके को नए ढंग से देखने लगा, और इसे MoMA collection में भी देखा जा सकता है
  खासकर smoothly moving works की वजह से हर second पर रुकने वाली second hand नापसंद होने लगी, इसलिए घर की सभी घड़ियों के movements को continuous sweep seconds hand वाले तरीके से बदल दिया

• Binary clock में 8 की जगह के बाईं ओर को सामान्य 16 की जगह के बजाय 10 की जगह माना गया लगता है
  इसलिए 10 बजे 1010 की जगह 00010000 दिखता है, और 23 बजे 00100011 दिखता है, जिसे binary number की तरह पढ़ें तो 35 बनता है और अजीब लगता है

  • समय को एक binary number में बदलने के बजाय decimal number के हर digit को 4 bits में convert करने का तरीका है
    यानी 23 → 2 3 → 0010 0011 → 00100011 हो जाता है

• कुछ clocks में हल्की-सी गड़बड़ दिखती है
  नारंगी Number Field में 12:10 और 10:12 को अलग पहचानना मुश्किल लगता है, और Word Field में इस्तेमाल न होने वाले characters को X से दिखाने से original Word Clock में words के उभरने वाली रहस्यमयता कम हो जाती है
  Temporal Exposure में धुंधले area की band center से हटकर है, और Figure Hands में text image area से बाहर निकल जाता है

  • Number Field में hour हमेशा सबसे ऊपर वाली row में ही होता है, इसलिए 12:10 और 10:12 अलग-अलग दिखाई देते हैं
  • अगर Figure Hands की बात है, तो overall style में सुधार की काफी गुंजाइश है
    दो रंग और अलग-अलग sizes, और ज़्यादा उपयुक्त font इस्तेमाल करने से बेहतर लगेगा