Last active
August 29, 2015 14:04
-
-
Save chrisg32/334b581e720b92fc7e3b to your computer and use it in GitHub Desktop.
Calendar Icon Creator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#colorpickers { | |
display: inline-table; | |
} | |
#colorpickers:before, #colorpickers:after { | |
content:""; | |
display: table; | |
} | |
#colorpickers:after { | |
clear:both; | |
} | |
.colorpicker { | |
display: block; | |
float: right; | |
clear: right; | |
} | |
#formsize { | |
width: 300px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div>Date: | |
<input type="date" id="formdate"></input> | |
<br/>TBD: | |
<input type="checkbox" id="formtbd"></input> | |
<br/> | |
<div id="colorpickers"> | |
<div class="colorpicker">Header Color: | |
<input type="color" id="headercolor" value="#c80000"></input> | |
</div> | |
<div class="colorpicker">Header Text Color: | |
<input type="color" id="headertextcolor" value="#ffffff"></input> | |
</div> | |
<div class="colorpicker">Body Color: | |
<input type="color" id="bodycolor" value="#ffffff"></input> | |
</div> | |
<div class="colorpicker">Body Text Color: | |
<input type="color" id="bodytextcolor" value="#000000"></input> | |
</div> | |
<div class="colorpicker">Border Color: | |
<input type="color" id="bordercolor" value="#969696"></input> | |
</div> | |
</div> | |
<br/>Image Size: | |
<input type="range" min="30" max="500" value="150" id="formsize"></input> <span id="imagesize">150</span> pixels | |
<br/> | |
<button type="button" onclick="draw();">Update Image</button> | |
<button type="button" onclick="save();">Save Image</button> | |
</div> | |
<p> | |
<canvas id="canvas" width="150" height="150"></canvas> | |
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function hexToRgb(hex) { | |
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | |
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | |
hex = hex.replace(shorthandRegex, function (m, r, g, b) { | |
return r + r + g + g + b + b; | |
}); | |
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | |
return result ? { | |
r: parseInt(result[1], 16), | |
g: parseInt(result[2], 16), | |
b: parseInt(result[3], 16) | |
} : null; | |
} | |
var months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]; | |
var canvas = document.getElementById('canvas'); | |
var ctx = canvas.getContext('2d'); | |
var draw = function () { | |
var size = $("#formsize").val(); | |
canvas.width = size; | |
canvas.height = size; | |
var headerColor = document.getElementById('headercolor').value; | |
var bodyColor = document.getElementById('bodycolor').value; | |
var borderColor = document.getElementById('bordercolor').value; | |
var date = document.getElementById('formdate').valueAsDate; | |
var width = canvas.width; | |
var height = canvas.height; | |
var headerHeight = height * .33; | |
var border = height * (2 / 150); | |
//draw shadow | |
var rbg = hexToRgb(borderColor); | |
ctx.fillStyle = "rgba(" + rbg.r + ", " + rbg.b + ", " + rbg.g + ", 0.5)"; | |
ctx.fillRect(border, border, width - border, height - border); | |
//draw border | |
ctx.fillStyle = borderColor; | |
ctx.fillRect(0, 0, width - border, height - border); | |
//draw header | |
ctx.fillStyle = headerColor; | |
ctx.fillRect(border, border, width - border * 3, headerHeight - border); | |
//draw body | |
ctx.fillStyle = bodyColor; | |
ctx.fillRect(border, headerHeight, width - border * 3, (height - headerHeight) - (border * 2)); | |
//draw month | |
ctx.fillStyle = "#ffffff"; | |
ctx.textAlign = "center"; | |
ctx.font = (headerHeight * .9) + "px Calibri"; | |
ctx.fillText(months[date.getMonth()], width / 2, headerHeight - (headerHeight * .25)); | |
//draw day | |
var dayText = document.getElementById('formtbd').checked ? "TBD" : date.getDate() + 1; | |
ctx.fillStyle = "#000000"; | |
ctx.textAlign = "center"; | |
ctx.font = ((height - headerHeight) * .85) + "px Calibri"; | |
ctx.fillText(dayText, width / 2, height / 2 + ((height - headerHeight) * .9) / 2); | |
}; | |
$("#formsize").on("input", function () { | |
$("#imagesize").text(this.value); | |
}); | |
var save = function () { | |
window.open(canvas.toDataURL()); | |
}; | |
document.getElementById('formdate').valueAsDate = new Date(); | |
draw(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: Calender Icon Creator | |
description: A simple HTML5 app for creating calendar icons. | |
authors: | |
- Chris Gonzales | |
wrap: b | |
resources: | |
normalize_css: no |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment