MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Clock Clock 24



  • Hello, has anyone ever tried to make a module for clock clock 24? The original Clock Clock 24 is kinetic art by Humans since 1982. Twenty-four analog clocks form a large digital clock. Clever arrangement of the clock hands transforms the analog clocks into seven-segment displays. At the time of writing you can buy the clock at $ 5,999.00 in the MoMA store. I found a guy who actualy created the code for this all this requires is just creating a module for this for MM which i can’t do. Check out the link https://codepen.io/Lorti/details/XpQewQ.


  • Module Developer

    @cmgp looks good. Have fun programming it 😃
    Seriously, the mirror has proven not to be very strong with animations. You could think about leaving the animations out.
    I think that would miss the fun part.



  • Do you mean it

    Unbenannt.jpg


  • Module Developer



  • @lavolp3 Actually the programmer posted the code too bad i can’t make a module:

    HTML
    .art

    • var d = 0;
      while d < 4
      .digit
      - var c = 0;
      while c < 6
      svg(class=clock clock--${d * 6 + c} width=“100” height=“100” viewBox=“0 0 100 100”)
      path(class=“clock-smallHand” d=“M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L95,53 L95,47 L50,47 Z” stroke=“none” fill="#4A4A4A" fill-rule=“evenodd”)
      path(class=“clock-largeHand” d=“M50,47 C48.3431458,47 47,48.3431458 47,50 C47,51.6568542 48.3431458,53 50,53 L100,53 L100,47 L50,47 Z” stroke=“none” fill="#4A4A4A" fill-rule=“evenodd”)
      - c++
      - d++
      .text
      h1 Clock Clock 24
      p
      small Code
      br
      a(href=“https://manu.ninja/”) Manuel Wieser
      p
      small Design
      br
      a(href=“http://www.humanssince1982.com/”) Humans since 1982
      .trigger.trigger–left
      .trigger.trigger–right

    CSS

    html {
    width: 100%;
    height: 100%;
    }

    body {
    min-height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-family: ‘Source Sans Pro’, sans-serif;
    color: #4a4a4a;

    cursor: default;
    }

    .art {
    cursor: zoom-in;
    margin: 5vw 0;
    }

    .art–full {
    cursor: zoom-out;
    }

    .text {
    margin-bottom: 5vw;
    text-align: center;
    }

    a {
    color: lighten(#4a4a4a, 25%);
    text-decoration: none;
    }

    .digit {
    float: left;
    }

    .clock {
    –small-hand: -135deg;
    –large-hand: -45deg;

    margin: .3vw; // 3px
    width: 10vw;
    height: 10vw;

    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);

    float: left;
    &:nth-of-type(2n+1) {
    clear: left;
    }
    }

    .clock-smallHand,
    .clock-largeHand {
    transform-origin: 50px center;
    transition: transform 10s;
    }

    .clock-smallHand {
    transform: rotateZ(var(–small-hand));
    }

    .clock-largeHand {
    transform: rotateZ(var(–large-hand));
    }

    .s-hidden {
    display: none;
    }

    .trigger {
    position: fixed;
    bottom: 0;
    width: 25%;
    height: 5vw;
    cursor: help;
    }

    .trigger–left {
    left: 0;
    }

    .trigger–right {
    right: 0;
    }

    JS

    const digits = [
    [ // 0
    { hour: 6, minute: 15 },
    { hour: 9, minute: 30 },
    { hour: 6, minute: 0 },
    { hour: 0, minute: 30 },
    { hour: 3, minute: 0 },
    { hour: 0, minute: 45 }
    ], [ // 1
    { hour: 7.5, minute: 37.5 },
    { hour: 6, minute: 30 },
    { hour: 7.5, minute: 37.5 },
    { hour: 6, minute: 0 },
    { hour: 7.5, minute: 37.5 },
    { hour: 0, minute: 0 }
    ], [ // 2
    { hour: 3, minute: 15 },
    { hour: 9, minute: 30 },
    { hour: 6, minute: 15 },
    { hour: 0, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 9, minute: 45 }
    ], [ // 3
    { hour: 3, minute: 15 },
    { hour: 9, minute: 30 },
    { hour: 3, minute: 15 },
    { hour: 9, minute: 0 },
    { hour: 3, minute: 15 },
    { hour: 9, minute: 0 }
    ], [ // 4
    { hour: 6, minute: 30 },
    { hour: 6, minute: 30 },
    { hour: 0, minute: 15 },
    { hour: 6, minute: 0 },
    { hour: 7.5, minute: 37.5 },
    { hour: 0, minute: 0 }
    ], [ // 5
    { hour: 6, minute: 15 },
    { hour: 9, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 3, minute: 15 },
    { hour: 0, minute: 45 }
    ], [ // 6
    { hour: 6, minute: 15 },
    { hour: 9, minute: 45 },
    { hour: 6, minute: 0 },
    { hour: 6, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 0, minute: 45 }
    ], [ // 7
    { hour: 3, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 7.5, minute: 37.5 },
    { hour: 6, minute: 0 },
    { hour: 7.5, minute: 37.5 },
    { hour: 0, minute: 0 }
    ], [ // 8
    { hour: 6, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 0, minute: 45 },
    { hour: 0, minute: 15 },
    { hour: 0, minute: 45 }
    ], [ // 9
    { hour: 6, minute: 15 },
    { hour: 6, minute: 45 },
    { hour: 3, minute: 0 },
    { hour: 6, minute: 0 },
    { hour: 3, minute: 15 },
    { hour: 0, minute: 45 }
    ]
    ];

    const happyDigit = Array(6).fill({ hour: 22.5, minute: 7.5 });
    const neutralDigit = Array(6).fill({ hour: 7.5, minute: 7.5 });

    function showSpecialState(digit) {
    stopClock();
    for (let x = 0; x < 4; x++) {
    setDigit(x, digit);
    }
    window.setTimeout(() => startClock(), 10000);
    }

    document.querySelector(’.trigger–left’).addEventListener(‘click’, e => {
    showSpecialState(happyDigit);
    });

    document.querySelector(’.trigger–right’).addEventListener(‘click’, e => {
    showSpecialState(neutralDigit);
    });

    window.addEventListener(‘keydown’, e => {
    const h = 72;
    const n = 78;
    if (h === e.keyCode) {
    showSpecialState(happyDigit);
    }
    if (n === e.keyCode) {
    showSpecialState(neutralDigit);
    }
    });

    document.querySelector(’.art’).addEventListener(‘click’, e => {
    document.querySelector(’.text’).classList.toggle(‘s-hidden’);
    document.querySelector(’.art’).classList.toggle(‘art–full’);
    })

    function hourToDegrees(hour) {
    return hour * (360 / 12) - 90;
    }

    function minuteToDegrees(minute) {
    return minute * (360 / 60) - 90;
    }

    function setHands(id, hour, minute) {
    const clock = document.querySelector(.clock--${id});
    clock.style.setProperty(--small-hand, ${hourToDegrees(hour) + 360}deg);
    clock.style.setProperty(--large-hand, ${minuteToDegrees(minute) - 360}deg);
    }

    function setDigit(id, values) {
    for (let x = 0; x < 6; x++) {
    setHands(id * 6 + x, values[x].hour, values[x].minute);
    }
    }

    function setTime(time) {
    setDigit(0, digits[time.charAt(0)]);
    setDigit(1, digits[time.charAt(1)]);
    setDigit(2, digits[time.charAt(3)]);
    setDigit(3, digits[time.charAt(4)]);
    }

    let state;
    let interval;

    function startClock() {
    state = ‘----’;
    interval = window.setInterval(() => {
    const time = new Date(Date.now() + 10000).toTimeString();
    if (time !== state) {
    setTime(time);
    state = time;
    }
    }, 1000);
    }

    function stopClock() {
    clearInterval(interval);
    }

    startClock();



  • Download the zip file from codepen and load everything with MMM-iFrame or with my MMM-Watchstore.



  • @Piranha1605 Thanks for the help works perfectly with watchstore couldn’t get it to work with iframe.


Log in to reply