diff --git a/omega-target-chromium-extension/background.coffee b/omega-target-chromium-extension/background.coffee index e877812..74961f7 100644 --- a/omega-target-chromium-extension/background.coffee +++ b/omega-target-chromium-extension/background.coffee @@ -28,21 +28,26 @@ Promise.onUnhandledRejectionHandled (promise) -> unhandledPromisesId.splice(index, 1) iconCache = {} +drawContext = null drawIcon = (resultColor, profileColor) -> cacheKey = "omega+#{resultColor ? ''}+#{profileColor}" icon = iconCache[cacheKey] return icon if icon - ctx = document.getElementById('canvas-icon').getContext('2d') - ctx2x = document.getElementById('canvas-icon-2x').getContext('2d') - if resultColor? - drawOmega ctx, resultColor, profileColor - drawOmega2x ctx2x, resultColor, profileColor - else - drawOmega ctx, profileColor - drawOmega2x ctx2x, profileColor - icon = - 19: ctx.getImageData(0, 0, 19, 19) - 38: ctx2x.getImageData(0, 0, 38, 38) + if not drawContext? + drawContext = + 19: document.getElementById('canvas-icon').getContext('2d') + 38: document.getElementById('canvas-icon-2x').getContext('2d') + for own size, ctx of drawContext + ctx.scale(size * 1, size * 1) + + icon = {} + for own size, ctx of drawContext + if resultColor? + drawOmega ctx, resultColor, profileColor + else + drawOmega ctx, profileColor + icon[size] = ctx.getImageData(0, 0, size * 1, size * 1) + return iconCache[cacheKey] = icon charCodeUnderscore = '_'.charCodeAt(0) diff --git a/omega-target-chromium-extension/overlay/background.html b/omega-target-chromium-extension/overlay/background.html index 7979008..a313e5c 100644 --- a/omega-target-chromium-extension/overlay/background.html +++ b/omega-target-chromium-extension/overlay/background.html @@ -13,8 +13,7 @@ - - + diff --git a/omega-web/img/icons/draw_omega.js b/omega-web/img/icons/draw_omega.js new file mode 100644 index 0000000..c41cf2a --- /dev/null +++ b/omega-web/img/icons/draw_omega.js @@ -0,0 +1,19 @@ +var drawOmega = function (ctx, outerCircleColor, innerCircleColor) { + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = outerCircleColor; + ctx.beginPath(); + ctx.arc(0.5, 0.5, 0.5, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fill(); + + if (innerCircleColor != null) { + ctx.fillStyle = innerCircleColor; + } else { + ctx.globalCompositeOperation = "destination-out"; + } + + ctx.beginPath(); + ctx.arc(0.5, 0.5, 0.25, 0, Math.PI * 2, true); + ctx.closePath(); + ctx.fill(); +}; diff --git a/omega-web/img/icons/omega-128.svg b/omega-web/img/icons/omega-128.svg new file mode 100644 index 0000000..dba99e6 --- /dev/null +++ b/omega-web/img/icons/omega-128.svg @@ -0,0 +1,12 @@ + + + + diff --git a/omega-web/img/icons/omega-2x.svg b/omega-web/img/icons/omega-2x.svg deleted file mode 100644 index 88ee9a2..0000000 --- a/omega-web/img/icons/omega-2x.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - diff --git a/omega-web/img/icons/omega-2x_svg.js b/omega-web/img/icons/omega-2x_svg.js deleted file mode 100644 index 865906a..0000000 --- a/omega-web/img/icons/omega-2x_svg.js +++ /dev/null @@ -1,34 +0,0 @@ -var drawOmega2x = function (ctx, outerCircleColor, innerCircleColor) { - ctx.clearRect(0,0,38,38); - - ctx.lineCap = 'butt'; - ctx.lineJoin = 'miter'; - ctx.miterLimit = 4; - - if (innerCircleColor != null) { - ctx.fillStyle = innerCircleColor; - ctx.moveTo(36.077892,19); - ctx.bezierCurveTo(36.077892,28.222652,28.431858,35.699084,19,35.699084); - ctx.bezierCurveTo(9.5681407,35.699084,1.922108,28.22265,1.922108,19); - ctx.bezierCurveTo(1.922108,9.77735,9.5681407,2.300916,19,2.300916); - ctx.bezierCurveTo(28.431858,2.300916,36.077892,9.77735,36.077892,19); - ctx.closePath(); - ctx.fill(); - } - - ctx.fillStyle = outerCircleColor; - ctx.beginPath(); - ctx.moveTo(28.091374,19.0002); - ctx.bezierCurveTo(28.091374,23.909854,24.021026,27.889916,19,27.889916); - ctx.bezierCurveTo(13.978973,27.889916,9.9086265,23.909854,9.9086265,19.0002); - ctx.bezierCurveTo(9.9086265,14.090546,13.978973,10.110484,19,10.110484); - ctx.bezierCurveTo(24.021026,10.110484,28.091374000000002,14.090546,28.091374000000002,19.0002); - ctx.closePath(); - ctx.moveTo(36.077892,19); - ctx.bezierCurveTo(36.077892,28.222652,28.431858,35.699084,19,35.699084); - ctx.bezierCurveTo(9.5681407,35.699084,1.922108,28.22265,1.922108,19); - ctx.bezierCurveTo(1.922108,9.77735,9.5681407,2.300916,19,2.300916); - ctx.bezierCurveTo(28.431858,2.300916,36.077892,9.77735,36.077892,19); - ctx.closePath(); - ctx.fill('evenodd'); -}; diff --git a/omega-web/img/icons/omega-action.svg b/omega-web/img/icons/omega-action.svg new file mode 100644 index 0000000..3fec7ab --- /dev/null +++ b/omega-web/img/icons/omega-action.svg @@ -0,0 +1,12 @@ + + + + diff --git a/omega-web/img/icons/omega.svg b/omega-web/img/icons/omega.svg deleted file mode 100644 index b0b3c1b..0000000 --- a/omega-web/img/icons/omega.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - diff --git a/omega-web/img/icons/omega_svg.js b/omega-web/img/icons/omega_svg.js deleted file mode 100644 index 3488566..0000000 --- a/omega-web/img/icons/omega_svg.js +++ /dev/null @@ -1,37 +0,0 @@ -var drawOmega = function (ctx, outerCircleColor, innerCircleColor) { - ctx.clearRect(0,0,19,19) - - if (innerCircleColor != null) { - ctx.save(); - ctx.fillStyle = innerCircleColor; - ctx.beginPath(); - ctx.moveTo(14.05,9.50); - ctx.bezierCurveTo(14.05,11.95,12.01,13.94,9.50,13.94); - ctx.bezierCurveTo(6.99,13.94,4.95,11.95,4.95,9.50); - ctx.bezierCurveTo(4.95,7.05,6.99,5.06,9.50,5.06); - ctx.bezierCurveTo(12.01,5.06,14.05,7.05,14.05,9.50); - ctx.closePath(); - ctx.fill('evenodd'); - ctx.restore(); - } - - ctx.save(); - ctx.fillStyle = outerCircleColor; - ctx.beginPath(); - ctx.moveTo(14.05,9.50); - ctx.bezierCurveTo(14.05,11.95,12.01,13.94,9.50,13.94); - ctx.bezierCurveTo(6.99,13.94,4.95,11.95,4.95,9.50); - ctx.bezierCurveTo(4.95,7.05,6.99,5.06,9.50,5.06); - ctx.bezierCurveTo(12.01,5.06,14.05,7.05,14.05,9.50); - ctx.closePath(); - ctx.moveTo(18.04,9.50); - ctx.bezierCurveTo(18.04,14.11,14.22,17.85,9.50,17.85); - ctx.bezierCurveTo(4.78,17.85,0.96,14.11,0.96,9.50); - ctx.bezierCurveTo(0.96,4.89,4.78,1.15,9.50,1.15); - ctx.bezierCurveTo(14.22,1.15,18.04,4.89,18.04,9.50); - ctx.closePath(); - ctx.fill('evenodd'); - ctx.restore(); - ctx.save(); - ctx.fillStyle = outerCircleColor; -};