SW개발
Time Timer extension 만들기 - 2 (Timer 형태로 변형하기)
초코쨔응
2019. 7. 17. 17:01
1에서 만든 파일을 수정하여 진행하였다. (https://computer-choco.tistory.com/144)
manifest.json은 변경하지 않았고, popup.html은 input을 받아야하기 때문에 다음과 같이 변경하였다. input과 button의 디자인은 https://www.w3schools.com/css/css_form.asp 를 참고하였다. 또한 input 태그와 button 태그의 수직 정렬이 잘 안 돼서 https://everyflower.tistory.com/182 의 글을 참고하였다.
<!DOCTYPE html>
<head>
<style>
BODY {width: 400px; min-height: 500px;}
input {background-color: #CCE8F4; border: none; width:50px; height: 30px;
font-size:25px; font-family:arial; text-align:center;
margin: 4px 4px; vertical-align:middle;}
input:focus {border-bottom: 2px solid #2f5a69;}
button {background-color: #2f5a69; border: none; color:white;
padding: 8px 8px; margin: 4px 4px; cursor: pointer; }
</style>
<script src="popup.js"></script>
</head>
<body style="background-color:#CCE8F4">
<canvas id="canvas" width="400" height="400" style="background-color:#CCE8F4"></canvas>
<div style="text-align: center;">
<input type="text" id="current_time1" value="60">
:
<input type="text" id="current_time2" value="00">
<button type="submit" id="button">Start</button>
</div>
</body>
</html>여기서 사용된 파란 색상은 https://encycolorpedia.kr/50bcdf를 참고하였다.
다음으로 popup.js 또한 시계를 타이머로 변경하기 위해 다음과 같이 코드를 수정하였다. 부채꼴 형태를 만들기 위해서는 ctx.moveTo() 가 필요했다. http://blog.naver.com/javaking75/140170132097를 참고하였다.
function drawClock(){
// background
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
var button = document.getElementById('button');
ctx.translate(radius, radius);
radius = radius * 0.90
// initialize
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
// onclick event
button.onclick = function(){
var setTimer = setInterval(function(){
// reset background
drawFace(ctx, radius);
// fill red area
var time1 = document.getElementById("current_time1");
var time2 = document.getElementById("current_time2");
var current_time = time1.value * 60 + Number(time2.value);
current_time -= 1
time1.value = parseInt(current_time/60);
time2.value = current_time % 60;
// stop setInterval()
if (current_time <= 0){
clearInterval(setTimer);
}
ctx.beginPath();
ctx.moveTo(0,0)
ctx.arc(0, 0, radius*0.7, (Math.PI/180)*270 - (Math.PI/180)*(current_time/10), (Math.PI/180)*270);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
// face
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
// hand
second = Math.PI*2 - (Math.PI/180)*(current_time/10);
drawHand(ctx, second, radius*0.6, radius*0.02);
}, 1000);
}
}
function drawFace(ctx, radius){
// clock
ctx.beginPath();
ctx.arc(0, 0, radius*0.7, 0 , 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
// draw face
ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius){
// numbers
var ang;
var num;
ctx.font = radius * 0.12 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
var minnum = 60 - 5 * num;
ctx.fillText(minnum.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
// time
function drawTime(ctx, radius){
drawHand(ctx, 0, radius*0.6, radius*0.02);
}
// hand
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
window.onload = drawClock;
이렇게 변경하면 다음과 같은 형태를 확인할 수 있다.
** 이 과정을 git으로 정리하였는데, .gitignore에 작성을 해도, .idea 폴더가 사라지지 않는 현상이 나타났다. 이는 .gitignore가 작성되기 이전 시점의 파일들은 무시할 수 없게 되어있기 때문이었다. 그래서 다음의 코드를 작성하여 .idea 폴더가 더 이상 track되지 않도록 했다. (https://stackoverflow.com/questions/32384473/gitignore-not-ignoring-idea-path)
git rm -rf .idea
git commit -m "delete .idea"
git push
반응형