<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Favicon Generator</title>
<link href="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/canvaspaint_r.css?v=96" rel="stylesheet">
<link href="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/font-awesome.min.css" rel="stylesheet">
<style>
#canvaspaint_tab_container {
}
#upload_tab_container {
display: none !important;
}
#typo_tab_container
{
display: none !important;
}
</style>
</head>
<body class="noselect" data-lang="de">
<div id="canvaspaint_tab_container">
<div id="canvaspaint_editor" class="canvaspaint_tabcontent">
<div id="toolbar">
<div id="tool-pencil" class="tool tool-pencil active"><img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_paint.svg" width="30" height="30"></div>
<div id="tool-eraser" class="tool tool-eraser"><img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_eraser.svg" width="30" height="30"></div>
<div id="tool-colorpicker" class="tool tool-colorpicker"><img src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/tool_pipette.svg" width="30" height="30"></div>
<div id="tool-colorselection"><button id="colorselector" class="jscolor" data-jscolor="{valueElement:null,value:'000000',onFineChange:'update(this)'}"> </button></div>
</div>
<div id="maincanvas_editor"><svg id="oncanvassvg_editor"></svg></div>
</div>
</div>
<div id="typo_tab_container">
<div id="canvaspaint_editor_typo" class="canvaspaint_tabcontent">
<div id="maincanvas_editortypo"><svg id="oncanvassvg_editortypo"></svg></div>
</div>
</div>
<script src="https://favicon.1and1.org/js/jquery-3.1.0.min.js"></script>
<script src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/snap.svg-min.js"></script>
<script src="https://basti1012.bplaced.net/testodner_forums/javascriptforum/stickmuster/jscolor.min.js"></script>
<script>
var oncanvassnap = Snap("#oncanvassvg_editor");
var oncanvasid = '#oncanvassvg_editor';
var oncanvaspreview = Snap("#canvaspreview_editor");
var oncanvastyposnap = Snap("#oncanvassvg_editortypo");
//var oncanvastypoid = '#oncanvassvg_editortypo';
var oncanvaspreviewtypoid = '#canvaspreview_editortypo';
var oncanvaspreviewtypo = Snap("#canvaspreview_editortypo");
var maincanvasid = "#maincanvas_editor";
var startColor = "#ffffff";
var currentColor = "#000000";
var initialgridsize =256;
//$("#oncanvassvg_editor").css('width',initialgridsize+'px');
var initialpixelscale = 16;
var backgroundcolor = "#ffffff";
var fontcolor = "#000000";
var mouseX = 0;
var mouseY = 0;
//initialise();
//function initialise(){
fillgrid(initialgridsize,initialpixelscale,oncanvassnap, oncanvaspreview);
fillgrid(initialgridsize,initialpixelscale,oncanvastyposnap, oncanvaspreviewtypo);
drawcharsandbackground();
//}
function fillgrid(gridsize,pixelscale,selectedsnap, previewcanvas) {
var cellsinarow = gridsize / pixelscale;
var cellcount =cellsinarow * cellsinarow;
var currentX = 0;
var currentY = 0;
var cellnr = 0;
var rownr = 0;
for (i = 0; i < cellcount; i++) {
if (currentX === gridsize) {
currentX = 0;
currentY = currentY + pixelscale;
rownr = rownr + 1;
}
drawpixel(currentX,currentY,pixelscale,startColor,selectedsnap,cellnr,rownr);
currentX = currentX + pixelscale;
cellnr = cellnr + 1;
}
}
function drawpixel(posX, posY, pixelscale, pixelcolor,selectedsnap,cellnr,rownr) {
var pixelid = posX.toString() + '' + posY.toString();
var svgPixel = selectedsnap.rect(posX, posY, pixelscale, pixelscale).attr({ id: 'cp_pxl_' + pixelid, class: 'cp_pxl', 'data-cellnr': cellnr, 'data-rownr': rownr });
svgPixel.attr({
fill: pixelcolor,
strokeWidth: 0
});
$('cp_pxl_'+pixelid).attr('fill', pixelcolor);
}
function changepixelcolor(pixelid) {
if ($("#tool-colorpicker").hasClass('active')) {
var pixelselected = document.getElementById(pixelid);
var pickedcolor = pixelselected.style.fill;
if (pickedcolor == "") {
pickedcolor = startColor;
}
document.getElementById('colorselector').jscolor.fromString(pickedcolor);
currentColor = pickedcolor;
}else{
var drawincolor = currentColor;
if ($("#tool-eraser").hasClass('active')) {
drawincolor = startColor;
}
var pixelselected = document.getElementById(pixelid);
pixelselected.style.fill=drawincolor;
var pixelselected = document.getElementById('p1616_' + pixelid);
$('#' + pixelid).attr('fill', drawincolor);
$('#p1616_' + pixelid).attr('fill', drawincolor);
}
}
//function changepixelcolor_by_coords(cellnr,rownr, color) {
// $(oncanvastypoid + ' .cp_pxl[data-cellnr="' + cellnr + '"][data-rownr="'+rownr+'"]').css('fill', color);
// $(oncanvastypoid + ' .cp_pxl[data-cellnr="' + cellnr + '"][data-rownr="'+rownr+'"]').attr('fill', color);
//}
function fillbackground() {
var cellpos = 0;
var rowpos = 0;
var posc = 0;
var posr = 0;
for (index = 0; index < initialgridsize; ++index) {
posc = cellpos;
posr = rowpos;
// changepixelcolor_by_coords(posc,posr,backgroundcolor);
cellpos = cellpos + 1;
if (cellpos == 16) {
rowpos = rowpos + 1;
cellpos = 0;
}else{
}
}
}
function drawcharsandbackground() {
fillbackground();
}
var clicking = false;
$(oncanvasid).mousedown(function(){
clicking = true;
});
$(document).mouseup(function(){
clicking = false;
});
$(oncanvasid + " .cp_pxl" ).on( "mousemove", function(e) {
if(clicking == false) return;
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
$(oncanvasid + " .cp_pxl" ).css('cursor', 'crosshair');
$(oncanvaspreview).css('cursor', 'crosshair');
var selectedid = this.id;
if(e.which==1)
{
changepixelcolor(selectedid);
};
});
$(oncanvasid + " .cp_pxl" ).on( "click", function(e) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
var selectedid = this.id;
changepixelcolor(selectedid);
});
$( "#toolbar .tool" ).on( "click", function(e) {
$("#toolbar .tool").removeClass('active');
$(this).addClass('active');
});
function update(jscolor) {
currentColor = jscolor.toHEXString();
}
function update_font(jscolor) {
fontcolor = '#' + jscolor;
drawcharsandbackground();
}
</script>
</body>
</html>