Collection de designs d’horloges numériques

 (clocks.dev)
1 points par GN⁺ 23 시간 전 | 1 commentaires | Partager sur WhatsApp
  • Clocks.dev est un site qui permet d’explorer en un seul endroit des designs d’horloges numériques exprimant l’heure et la date de différentes façons
  • Il permet de comparer différents modes de représentation du temps : formes géométriques, disposition des chiffres, combinaisons de mots, aiguilles, cadrans circulaires, LCD, etc.
  • On peut parcourir les designs selon All time, This week et Newest, et créer soi-même de nouveaux designs d’horloges
  • Il inclut des horloges comme number-field, word-field, binary-signal, swiss-railway et corner-date, dont le nom reflète le mode d’expression ou le style
  • Toutes les horloges répertoriées sont open source, ce qui permet non seulement d’apprécier leur design mais aussi d’y puiser des idées d’implémentation

Explorer différentes représentations du temps

  • Clocks.dev rassemble et propose plusieurs designs d’horloges numériques
  • La liste peut être explorée avec les filtres All time, This week et Newest, et il est possible de créer une nouvelle horloge via Create new clock

  • Formes et aiguilles

  • Chiffres et mots

    • binary-signal : design utilisant un signal binaire
    • number-field : compose l’heure avec un champ numérique de 1 à 12 et de 1 à 60
    • word-field : affiche l’heure à l’aide de combinaisons de mots comme FIVE, TEN, QUARTER, HALF, PAST et TO
    • mint-rounded, lock-screen, second-tilt : proposent des affichages numériques dans des styles différents

  • Date et informations complémentaires

    • day-mood : affiche l’heure, la période de la journée et la température sous forme de phrase, comme It’s slow evening o’clock 22°
    • corner-date, orbit-date : affichent la date avec l’heure
    • horloge couleur : associe les 86 400 secondes d’une journée à l’une des 16 777 216 couleurs et affiche le code couleur actuel
    • Galactic Standard Time : affiche l’heure avec des informations de zone et de piste
    • Digital Quartz LCD : style LCD numérique comprenant 1983, le jour de la semaine, 24H et des indicateurs d’alarme, de signal, d’éclairage et de démarrage

  • Concepts individuels

Open source et créateur

  • Toutes les horloges répertoriées sont proposées en open source
  • Le site a été créé par Lev Miseri

À lire aussi

1 commentaires

 
GN⁺ 23 시간 전
Avis sur Hacker News

  • J’ai créé pour le plaisir une horloge numérique composée d’horloges analogiques : https://mikespeed.com/clock

  • Avant le boom de l’IA, j’ai entièrement réalisé moi-même ces watch faces expérimentales en SVG et JavaScript
    Ce n’est peut-être pas une œuvre extraordinaire, mais en tant que designer, je suis fier de l’avoir menée à bien après avoir appris les bases du code en autodidacte : https://watchface.netlify.app/
    J’ai aussi rédigé un article sur le processus de création : https://72mena.medium.com/designing-watch-faces-using-svgs-a...

    • En voyant ce travail, j’ai envie de me remettre au hardware et à la fabrication de PCB pour créer quelque chose à accrocher au mur
      Ce serait encore mieux si l’on pouvait saisir directement l’heure sur la page où la watch face fonctionne pour voir son apparence
    • J’étais venu pour parler des designs Tokyoflash, donc ça fait plaisir de les voir mentionnés ici

  • Il est peut-être temps de rassembler les passionnés d’horloges de HN et de créer un webring à l’ancienne
    Lock Screen ressemble à ma horloge Filling Digit, où des chiffres creux se remplissent d’eau par le bas pour représenter les secondes
    L’assez amusante Alphabetical Clock avait aussi fait parler d’elle sur HN, et le concept de webring est présenté sur Wikipedia

  • J’ai recréé la Voutilainen Vingt-8 ISO avec Svelte, que j’utilisais pour la première fois : https://clocks.dev/clock/3b254b2789ec

    • C’est un concept que je découvre, mais j’ai l’impression de m’y habituer vite, et cette montre-bracelet me fait envie

  • Sur Chrome 150.0.7871.115 et Windows, la barre de défilement disparaît et il devient impossible de faire défiler à partir d’environ deux tiers de la page

    • C’est corrigé pour l’instant, mais le problème de performances plus fondamental demande une enquête supplémentaire
    • À mon avis, toucher au comportement de défilement par défaut du navigateur est un gros tabou en développement web
    • Le même problème se produit aussi sur Firefox 152.0.5 sous Windows 11

  • Number Field me semble être la meilleure manière de représenter spatialement une horloge numérique
    Pour être parfait, il faudrait passer en format 24 heures, mais ce n’est qu’un petit ajustement, et la structure en 12 colonnes permet de saisir facilement l’heure approximative d’un coup d’œil

  • J’ai créé une horloge Soroban à partir d’un boulier japonais, mais je n’ai pas pu l’ajouter à la collection parce qu’elle utilise des animations basées sur CSS : https://soroban-clock.netlify.app

  • Les 12 o’clocks de John Maeda valent aussi le détour
    Son œuvre de 1996 m’a fait voir d’un œil neuf la façon dont le temps peut être représenté graphiquement, et on peut aussi la retrouver dans la collection du MoMA
    À cause notamment des pièces aux mouvements fluides, j’en suis venu à détester les trotteuses qui s’arrêtent chaque seconde, au point de remplacer les mouvements de toutes les horloges de la maison par des secondes glissantes

  • L’horloge binaire semble traiter la position à gauche du 8 non pas comme le 16 habituel, mais comme la dizaine
    Du coup, 10 heures s’affiche 00010000 au lieu de 1010, et 23 heures devient 00100011, ce qui donne 35 si on l’interprète en binaire, donc ça paraît étrange

    • Ce n’est pas l’heure entière qui est convertie en un seul nombre binaire, mais chaque chiffre décimal converti en 4 bits
      Autrement dit, 23 → 2 3 → 0010 0011 → 00100011

  • Certaines horloges présentent des détails légèrement décalés
    Le Number Field orange semble rendre difficile la distinction entre 12:10 et 10:12, et Word Field affiche les lettres inutilisées avec des X, ce qui atténue le mystère de l’apparition des mots dans l’horloge textuelle d’origine
    Temporal Exposure a une bande de zone floue décentrée, et dans Figure Hands, le texte déborde de la zone de l’illustration

    • Dans Number Field, l’heure est toujours placée sur la ligne du haut, donc 12:10 et 10:12 s’affichent différemment
    • Si tu parles de Figure Hands, il y a clairement de la marge pour améliorer le style général
      Deux couleurs et des tailles différentes, ainsi qu’une police plus appropriée, devraient améliorer le résultat