<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/css/colorjoe.css">
<script src="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/dist/colorjoe.min.js"></script>
<style>
.ausblenden{
display:none;
}
#farbuswahl{
font-weight:900;
color:white;
}
#ausgabe{
display:none;
width:100%;
min-height:100px;
}
#menue{
display:none;
}
main{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
align-items: center;
}
#zeichenfeld{
display: flex;
flex-direction: column;
align-items: center;
}
.line{
display:flex;
}
.box{
border:1px solid black;
width:10px;
height:10px;
}
#toolbar{
display:flex;
width:165px;
}
#toolbar div {
display: flex;
flex: 1;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid black;
background: blue;
flex-direction: row;
align-content: center;
justify-content: space-around;
align-items: center;
}
</style>
</head>
<body>
<main>
<div>
<label>Horizontale lange in kästchen</label>
<input type="number" min="1" max="100" id="lange">
</div>
<div>
<label>Vertikale höhe in Kästchen</label>
<input type="number" min="1" max="100" id="hohe">
</div>
<div>
<label>Größe eines kästchen in Pixel</label>
<input type="number" min="1" max="30" id="gross">
</div>
<div id="menue">
<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="farbuswahl" title="farbauswahl"></div>
</div>
<div id="colormodal" class="container ausblenden">
<div class="colorjoe"></div>
</div>
<div>
<label>Alles zurücksetzen</label>
<button id="ree">resete der farben</button>
</div>
</div>
<div id="zeichenfeld"></div>
<div><label>Alle Daten in Array Speichern und als json Speichern</label>
<button id="save">Speichern</button></div>
<div><label>Strickmuster als html Datei speichern</label>
<button id="saves">Strickmuster Speichern</button></div>
<textarea id="ausgabe"></textarea>
</main>
<script>
var h_achse=1;
var v_achse=1;
var max_kasten_width=100;
var max_kasten_height=100;
var max_gross=50;
var gro=5;
var z_feld=document.getElementById('zeichenfeld');
var l_value=document.getElementById('lange');
var h_value=document.getElementById('hohe');
var g_value=document.getElementById('gross');
var far_ele=document.querySelector('#farbuswahl')
var g,h,l;
var y,x,z=0;
var inp_ele=document.querySelectorAll('#lange,#hohe,#gross');
inp_ele.forEach(function(s){
s.addEventListener('change',function(){
var a,b,c=0;
z_feld.innerHTML='';
if(l_value.value!=''){
l=l_value.value;
if(l>max_kasten_width){
l=max_kasten;
}
y=1;
}else{
l=h_achse;
}
if(h_value.value!=''){
h=h_value.value;
if(h>max_kasten_height){
l=max_kasten;
}
x=1;
}else{
h=v_achse;
}
if(g_value.value!=''){
g=g_value.value;
if(g>max_gross){
g=max_gross;
}
z=1;
}else{
g=gro;
}
for(a=0;a<h;a++){
var ele_l=document.createElement('div');
ele_l.id='line'+a;
ele_l.setAttribute('class','line');
z_feld.appendChild(ele_l);
for(b=0;b<l;b++){
var ele_h=document.createElement('div');
ele_h.id='box'+a+b;
ele_h.setAttribute('class','box');
ele_h.setAttribute('data-color','#ffffff');
ele_h.style.width=g+'px';
ele_h.style.height=g+'px';
document.getElementById('line'+a).appendChild(ele_h)
}
}
//console.log(l,h,g)
if(y==1 && x==1 && z==1){
document.getElementById('menue').style.display='block';
}
weiter()
})
})
function weiter(){
var ele_box=document.querySelectorAll('.box');
ele_box.forEach(function(g){
g.addEventListener('click',function(){
far=far_ele.getAttribute('data-nowcolor');
console.log(far)
g.setAttribute('data-color',far);
g.style.background=far;
})
})
}
var farbe=false;
document.getElementById('tool-pencil').addEventListener('click',function(){
farbe=true;
})
document.getElementById('tool-eraser').addEventListener('click',function(){
farbe=false;
var ele_box1=document.querySelectorAll('.box');
ele_box1.forEach(function(g1){
g1.addEventListener('click',function(){
if(farbe==false){
g1.setAttribute('data-color','#ffffff');
g1.style.background='none';
}
})
})
})
/*
document.getElementById('tool-colorpicker').addEventListener('click',function(){
})
*/
document.getElementById('ree').addEventListener('click',function(){
var ele_box1=document.querySelectorAll('.box');
ele_box1.forEach(function(g1){
g1.style.background='none';
g1.setAttribute('data-color','#ffffff');
})
})
class ColorPicker {
constructor(root){
this.root = root;
this.colorjoe = colorjoe.rgb(this.root.querySelector('.colorjoe'));
this.selectedColor = null;
this.colorjoe.show();
this.setSelectedColor('#009578');
this.colorjoe.on('change',color => {
this.setSelectedColor(color.hex(),true);
});
}
setSelectedColor(color,skipCjUpdate = false){
this.selectedColor = color;
//document.querySelector('#farbuswahl')
far_ele.setAttribute('class',color);
//document.querySelector('#farbuswahl').value = color;
//document.querySelector('#farbuswahl')
far_ele.style.backgroundColor = color;
//document.querySelector('#farbuswahl')
far_ele.setAttribute('data-nowcolor',color);
//let fa=document.getElementById('farbuswahl').value;
if(!skipCjUpdate){
this.colorjoe.set(color);
}
}
}
const colorPicker = new ColorPicker(document.querySelector('.container'));
far_ele.addEventListener('click',function(){
let mod=document.querySelector('#colormodal');
mod.classList.toggle('ausblenden');
});
var info=document.querySelector('#ausgabe');
document.querySelector('#save').addEventListener('click',function(){
var alles=[];
alles.push({'breite':l_value.value});
alles.push({'hohe':h_value.value});
alles.push({'gross':g_value.value});
var c=0;
var ele_box2=document.querySelectorAll('.box');
ele_box2.forEach(function(g2){
c++;
var id=g2.getAttribute('id');
var col=g2.getAttribute('data-color');
alles.push({'box':c,'id':id,'farbe':col});
})
info.style.display='block';
info.innerHTML=JSON.stringify(alles);
//console.log(alles);
})
document.getElementById('saves').addEventListener('click', function() {
var data1 = g_value.value;
var data2 = z_feld.outerHTML;
var data=`<!doctype html>
<html lang="de">
<head>
<style>
main{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
align-items: center;
}
#zeichenfeld{
display: flex;
flex-direction: column;
align-items: center;
}
.line{
display:flex;
}
.box{
border:1px solid black;
width:${data1}px;
height:${data1}px;
}
</style>
</head>
<body>
<main>
${data2}
</main>
</body>
</html>`;
var a = document.createElement('a');
a.href = 'data:application/csv;charset=utf-8,' + encodeURIComponent(data);
a.download = 'Testhtml.html';
document.getElementsByTagName('body')[0].appendChild(a);
a.click();
})
</script>
</body>
</html>