Coder Social home page Coder Social logo

mmm-oclock's Introduction

MMM-OClock

MagicMirror module - O-clock inspired by PolarClock Screensaver

Screenshot

screenshot

Install

cd ~/MagicMirror/modules
git clone https://github.com/eouia/MMM-OClock.git

config.js

{
  module: "MMM-OClock",
  position: "top_center",
  config: {}
},

detailed & defaults

{
  module: "MMM-OClock",
  position: "top_center",
  config: {
    locale: "", //default is system locale, or use like this. "de-DE"
    canvasWidth:1000,
    canvasHeight:1000,
    centerColor: "#FFFFFF",
    centerR: 50,
    centerTextFormat: "YYYY",
    centerFont: "bold 20px Roboto",
    centerTextColor:"#000000",
    hands: ["month", "date", "day", "hour", "minute", "second"],
    //available values; "year", "month", "date", "week", "day", "hour", "minute", "second"
    handType: "round", //"default", "round"
    handWidth: [40, 40, 40, 40, 40, 40],
    handTextFormat: ["MMM", "Do", "ddd", "h", "m", "s"],
    handFont: "bold 16px Roboto",
    useNail: true,
    nailSize: 40,
    nailBgColor: "#000000",
    nailTextColor: "#FFFFFF", //CSS color or "inherit"
    space: 3,
    colorType: "hsv", //availables: "static", "radiation", "transform", "hsv"
    colorTypeStatic: ["red", "orange", "yellow", "green", "blue", "purple"],
    colorTypeRadiation: ["#333333", "red"],
    colorTypeTransform: ["blue", "red"],
    colorTypeHSV: 0.25, //hsv circle start color : 0~1

    handConversionMap: { // I think you don't need to modify this.
      "year": "YYYY",
      "month": "M",
      "date": "D",
      "week": "w", // Local week of year. If you want to use ISO week of year, use "W" instead "w"
      "day": "e", // Local day of week. If you want to use ISO day of week, use "E" instead "e"
      "hour": "h", // 12H system. If you want to 24H system, use "H" instead "h"
      "minute": "m",
      "second": "s"
    },

    ////// Available as of v2.x:
    secondsUpdateInterval: 1,  // how often to redraw the seconds hand (integer >= 1 sec)

    // To show an age bar enter your birthYear AND enter "age" in the hands array.
    birthYear: false,  // e.g. 1901
    birthMonth: 0,    // e.g. 1-12 (optional, recommended)
    lifeExpectancy: 85, // default: 85
    linearLife: false,  // set to true to plot life linearly not logarithmically
                        // Inspiration: http://www.bertrandplanes.com/pages/LifeClock3.php
    ageBarColor: [],  // false for no gradient, empty array for default, or
                      // [start, stop] colors, e.g. ['#000', 'white']

    scale: 1, // convenience to scale bar dimensions (font size & nailSize should be
              // adjusted manually).  E.g. 0.5 is half-size, 2 is double sized.

    canvasStyle: "", // Any CSS styles, e.g. "opacity: .7; ..."

  }
},

Change log

  • v2.0 Update only seconds hand every second. Added age bar.
  • v1.x Initial version

mmm-oclock's People

Contributors

eouia avatar moos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mmm-oclock's Issues

different nail sizes

Hi there,

today I want to use your great module. I want to setup a clock (Hour, Minute and Second) but I only want Nails for Hours and Minutes not for the seconds. As far as I understand this can't be setup with you module.

Maybe something like this would be nice to have?
nailSize: [30,30,0],

Best Regards

Chris

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.