-
Time Timer extension 만들기 - 2 (Timer 형태로 변형하기)SW개발 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'SW개발' 카테고리의 다른 글
Python으로 비트코인 구현하기 (2) 2021.05.17 MkDocs 를 이용하여 문서 사이트 만들기 (0) 2021.03.21 Time Timer extension 만들기 - 1 (시계 형태 만들기) (0) 2019.07.17 크롬 확장 프로그램 만들기 (Hello, world 출력해보기) (2) 2019.07.17 PyQt를 활용한 Python 명령어 실행 프로그램 만들기 (0) 2019.03.06 댓글