Skip to content

Commit

Permalink
Add an option to remove seconds hands in Clock
Browse files Browse the repository at this point in the history
  • Loading branch information
Lionel Laské committed Nov 15, 2020
1 parent 9b30420 commit 0aa669e
Show file tree
Hide file tree
Showing 6 changed files with 212 additions and 8 deletions.
4 changes: 4 additions & 0 deletions activities/Clock.activity/css/activity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ canvas {
background-image: url(../icons/write-date.svg);
}

#main-toolbar #write-seconds-button {
background-image: url(../icons/write-seconds.svg);
}

#main-toolbar #set-time-button {
background-image: url(../icons/set-time.svg);
}
Expand Down
126 changes: 126 additions & 0 deletions activities/Clock.activity/icons/write-seconds.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions activities/Clock.activity/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
<hr/>
<button class="toolbutton" id="write-time-button" title="Write time"></button>
<button class="toolbutton" id="write-date-button" title="Write date"></button>
<button class="toolbutton active" id="write-seconds-button" title="Write seconds"></button>
<hr/>
<button class="toolbutton" id="set-time-button" title="Set Time"></button>
<button class="toolbutton" id="set-timeGame-button" title="Set Time to target"></button>
Expand Down
43 changes: 35 additions & 8 deletions activities/Clock.activity/js/activity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,13 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
}else{
document.getElementById("write-date-button").classList.remove("active");
}
if(data.writeSeconds){
document.getElementById("write-seconds-button").classList.add("active");
clock.changeWriteSeconds(true);
}else{
document.getElementById("write-seconds-button").classList.remove("active");
clock.changeWriteSeconds(false);
}
if(data.isSetTimeGame){
clock.setTimeGame = true;

Expand Down Expand Up @@ -115,6 +122,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob

this.writeTime = false;
this.writeDate = false;
this.writeSeconds = true;
this.setTime = false;
this.setTimeGame = false;
this.isDrag = false;
Expand Down Expand Up @@ -187,6 +195,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
document.getElementById("nice-clock-button").title = l10n_s.get("NiceClock");
document.getElementById("write-time-button").title = l10n_s.get("WriteTime");
document.getElementById("write-date-button").title = l10n_s.get("WriteDate");
document.getElementById("write-seconds-button").title = l10n_s.get("WriteSeconds");
document.getElementById("set-time-button").title = l10n_s.get("SetTime");
document.getElementById("set-timeGame-button").title = l10n_s.get("SetTimeGame");
document.getElementById("text-time").innerHTML = l10n_s.get("WhatTime");
Expand Down Expand Up @@ -278,6 +287,16 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
this.drawBackground();
}

Clock.prototype.changeWriteSeconds = function (writeSeconds) {
this.writeSeconds = writeSeconds;

this.changeWriteTime(this.writeTime);
this.updateSizes();
var date = new Date();
this.displayDate(date);
this.drawBackground();
}

Clock.prototype.updateSizes = function () {
var toolbarElem = document.getElementById("main-toolbar");
var textContainerElem = document.getElementById("text-container");
Expand Down Expand Up @@ -345,8 +364,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
'</span>' +
':<span style="color: {{ colors.minutes }}">{{ minutes }}' +
'</span>' +
':<span style="color: {{ colors.seconds }}">{{ seconds }}' +
'</span>' +
(this.writeSeconds ? ':<span style="color: {{ colors.seconds }}">{{ seconds }}</span>' : '') +
'<span style="color: {{ colors.yellow }}">' + txt +
'</span>'
;
Expand Down Expand Up @@ -485,7 +503,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
ctx.clearRect(this.margin, this.margin, this.radius * 2,
this.radius * 2);

var handNames = ['hours', 'minutes', 'seconds'];
var handNames = this.writeSeconds ? ['hours', 'minutes', 'seconds'] : ['hours', 'minutes'];
for (var i = 0; i < handNames.length; i++) {
var name = handNames[i];
ctx.lineCap = 'round';
Expand All @@ -512,7 +530,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
ctx.clearRect(this.margin, this.margin, this.radius * 2,
this.radius * 2);
this.drawSmiley();
var handNames = ['hours', 'minutes', 'seconds'];
var handNames = this.writeSeconds ? ['hours', 'minutes', 'seconds'] : ['hours', 'minutes'];
// tempPos is used to position circle on each hand in set time mode
var tempPos = [0.400,0.607,0.8125];

Expand Down Expand Up @@ -694,7 +712,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
if(this.timeToBeDisplayed['hours']==undefined){
this.timeToBeDisplayed['hours'] = Math.floor(Math.random() * 12) + 1;
this.timeToBeDisplayed['minutes'] = Math.floor(Math.random() * 60);
this.timeToBeDisplayed['seconds'] = Math.floor(Math.random() * 60);
this.timeToBeDisplayed['seconds'] = this.writeSeconds ? Math.floor(Math.random() * 60) : 0;
}
var txt = "??";
this.displayTime(this.timeToBeDisplayed['hours'], this.timeToBeDisplayed['minutes'], this.timeToBeDisplayed['seconds'], txt);
Expand Down Expand Up @@ -761,6 +779,14 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
clock.changeWriteDate(active);
};

var writeSecondsButton = document.getElementById("write-seconds-button");
var that = this;
writeSecondsButton.onclick = function () {
this.classList.toggle('active');
var active = this.classList.contains('active');
clock.changeWriteSeconds(active);
};

var setTimeButton = document.getElementById("set-time-button");
setTimeButton.onclick = function () {

Expand Down Expand Up @@ -880,7 +906,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
clock.canvasY = canvasY;

if(clock.setTimeGame){
var handNames = ['hours', 'minutes', 'seconds'];
var handNames = clock.writeSeconds ? ['hours', 'minutes', 'seconds'] : ['hours', 'minutes'];
var targetAngles = [];

targetAngles.push (Math.PI / 6 * (clock.timeToBeDisplayed['hours']%12) + Math.PI / 360 * clock.timeToBeDisplayed['minutes']);
Expand All @@ -889,7 +915,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob


var ctr = 0;
for(var i=0;i<3;i++){
for(var i=0;i<handNames.length;i++){
var name = handNames[i];
var angle = clock.handAngles[name] % (2 * Math.PI);
var target = targetAngles[i];
Expand All @@ -900,7 +926,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
ctr++;
}
}
if(ctr==3){
if(ctr==handNames.length){
clock.isSmiley = true;
}else{
clock.isSmiley = false;
Expand All @@ -918,6 +944,7 @@ define(["sugar-web/activity/activity","sugar-web/env","sugar-web/graphics/radiob
face : clock.face,
writeTime : clock.writeTime,
writeDate : clock.writeDate,
writeSeconds : clock.writeSeconds,
isSetTime : clock.setTime,
isSetTimeGame : clock.setTimeGame,
isSmiley : clock.isSmiley,
Expand Down
6 changes: 6 additions & 0 deletions activities/Clock.activity/lib/tutorial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ define(["webL10n"], function (l10n) {
title: l10n.get("TutoDateTitle"),
content: l10n.get("TutoDateContent")
},
{
element: "#write-seconds-button",
placement: "bottom",
title: l10n.get("TutoSecondsTitle"),
content: l10n.get("TutoSecondsContent")
},
{
element: "#set-time-button",
placement: "bottom",
Expand Down
Loading

0 comments on commit 0aa669e

Please sign in to comment.