MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. cmgp
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    C
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 4
    • Groups 0

    cmgp

    @cmgp

    0
    Reputation
    80
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined
    Last Online

    cmgp Unfollow Follow

    Latest posts made by cmgp

    • RE: Clock Clock 24

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

      posted in Requests
      C
      cmgp
    • RE: Clock Clock 24

      @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();

      posted in Requests
      C
      cmgp
    • 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.

      posted in Requests
      C
      cmgp