-
Time Timer extension 만들기 - 1 (시계 형태 만들기)SW개발 2019. 7. 17. 14:02
Chrome browser extension 을 만들기 위한 기본 파일은 https://computer-choco.tistory.com/143에서와 같이 json, png, html, js 파일이 하나씩 있으면 된다.
manifest.json 파일은 다음과 같이 만들었다.
{ "manifest_version": 2, "name": "Time_timer_chromeExtension", "description": "Time timer", "version": "1.0.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "tabs", "<all_urls>" ] }같은 폴더 내에 popup.html 을 다음과 같이 만들었다.
<!DOCTYPE html> <head> <style> BODY {width: 520px; min-height: 500px;} </style> <script src="popup.js"></script> </head> <body> <canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas> <p id="current_time"> </p> </body> </html>위의 html 파일에서 사용한 canvas와 다음의 popup.js에서 사용된 함수들은 https://www.w3schools.com/graphics/canvas_clock.asp를 참고하였다. window가 load되기 전에 코드가 실행되면 아예 시계 형태가 그려지지 않아서 js 파일의 가장 아랫 부분에 window.onload를 사용하였다.
function drawClock(){ // background var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 // initialize drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); // repeat setInterval(function(){ drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); }, 1000) function drawFace(ctx, radius){ // clock ctx.beginPath(); ctx.arc(0, 0, radius, 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.15 + "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); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); } } // time function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); document.getElementById("current_time").innerHTML = hour + ":" + minute + ":" + second; //hour hour = hour%12; hour = (hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute = (minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second = (second*Math.PI/30); drawHand(ctx, second, radius*0.9, 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;현재 시간이 텍스트로 나오게 하는 부분은 https://offbyone.tistory.com/241를 참고하였다.
현재까지 만들어진 코드를 저장하면 다음과 같이 확인할 수 있다. 확장 프로그램을 크롬에서 실행해보는 방법 또한 https://computer-choco.tistory.com/143를 참고하면 된다.
icon.png는 이전 코드 작성시 사용한 이미지를 그대로 사용하였다.
'SW개발' 카테고리의 다른 글
MkDocs 를 이용하여 문서 사이트 만들기 (0) 2021.03.21 Time Timer extension 만들기 - 2 (Timer 형태로 변형하기) (0) 2019.07.17 크롬 확장 프로그램 만들기 (Hello, world 출력해보기) (2) 2019.07.17 PyQt를 활용한 Python 명령어 실행 프로그램 만들기 (0) 2019.03.06 Python tkinter를 활용한 tensorflow 자동 run 프로그램 만들기 (0) 2019.03.06 댓글