From 59f6c2b4ca831a80c3affa046a0407df7d2889e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arvid=20Bj=C3=B6rkstr=C3=B6m?= Date: Mon, 13 Sep 2010 11:03:27 +0200 Subject: [PATCH] Ability to change skin depending of time of day Added the ability to automatically change the skin depending on the time of day Also added: - New skin with a corresponding Night Skin (also enhanced with a png background) - New demo3.html to show the new capabilities --- coolclock.js | 11 +++++++++++ demos/clock_bg.png | Bin 0 -> 3013 bytes demos/demo3.html | 35 +++++++++++++++++++++++++++++++++++ moreskins.js | 20 ++++++++++++++++++++ 4 files changed, 66 insertions(+) create mode 100644 demos/clock_bg.png create mode 100644 demos/demo3.html diff --git a/coolclock.js b/coolclock.js index acdb9d3..55ab49a 100644 --- a/coolclock.js +++ b/coolclock.js @@ -76,6 +76,11 @@ CoolClock.prototype = { // Parse and store the options this.canvasId = options.canvasId; this.skinId = options.skinId || CoolClock.config.defaultSkin; + // If there is a corresponding nightskin, use that, otherwise just use the reagular skin. + if(CoolClock.config.skins[this.skinId+'Night'] != null) this.skinIdNight = this.skinId+'Night'; + else this.skinId_night = this.skinId; + // Variable to keep track of the dayskin when the skin switches to Nightskin + this.skinIdDay = this.skinId; this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius; this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true; this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null; @@ -212,6 +217,12 @@ CoolClock.prototype = { }, render: function(hour,min,sec) { + //Detect day/night and set appropriate skin. + if(hour >= 18 || hour < 6) { + this.skinId = this.skinIdNight; + } else { + this.skinId = this.skinIdDay; + } // Get the skin var skin = CoolClock.config.skins[this.skinId]; if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin]; diff --git a/demos/clock_bg.png b/demos/clock_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..216b1fda48e50b95c6425bc494c22dc50bbb5b6a GIT binary patch literal 3013 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 + + Day/Night Coolclock + + + + + + + + + + + + + + + + + + + + + + + + + +
         
New York   London   New Delhi   Tokyo
+
+ + + diff --git a/moreskins.js b/moreskins.js index e316181..7cb36b6 100644 --- a/moreskins.js +++ b/moreskins.js @@ -208,5 +208,25 @@ CoolClock.config.skins = { minuteHand: { lineWidth: 2, startAt: -20, endAt: 80, color: "#7c8c03", alpha: .9 }, secondHand: { lineWidth: 2, startAt: 70, endAt: 94, color: "#d93d04", alpha: .85 }, secondDecoration: { lineWidth: 1, startAt: 70, radius: 3, fillColor: "red", color: "black", alpha: .7 } + }, + + Knight: { + outerBorder: { lineWidth: 99, radius: 50, color: "white", alpha: 0.4 }, + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 0 }, + largeIndicator: { lineWidth: 8, startAt: 80, endAt: 92, color: "black", alpha: 1 }, + hourHand: { lineWidth: 12, startAt: -15, endAt: 50, color: "black", alpha: 1 }, + minuteHand: { lineWidth: 10, startAt: -15, endAt: 75, color: "black", alpha: 1 }, + secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, + secondDecoration: { lineWidth: 2, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 0 } + }, + + KnightNight: { + outerBorder: { lineWidth: 99, radius: 50, color: "black", alpha: 0.6 }, + smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "white", alpha: 0 }, + largeIndicator: { lineWidth: 8, startAt: 80, endAt: 92, color: "white", alpha: 1 }, + hourHand: { lineWidth: 12, startAt: -15, endAt: 50, color: "white", alpha: 1 }, + minuteHand: { lineWidth: 10, startAt: -15, endAt: 75, color: "white", alpha: 1 }, + secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 }, + secondDecoration: { lineWidth: 2, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 0 } } };