Created
October 2, 2025 20:08
-
-
Save JimmyDansbo/c3102fa95a99bd6185c96e6f19f14235 to your computer and use it in GitHub Desktop.
HTML/Javascript page to create patterns for sewing Hama pearls
This file contains hidden or 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
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Perler på snor</title> | |
| <script> | |
| let chosencolor='white'; | |
| let colorid=1; | |
| function change_chosen_color(color) { | |
| chosencolor=color; | |
| document.getElementById('chosencolor').setAttribute('bgcolor', color); | |
| switch (color) { | |
| case 'black': colorid=0; break; | |
| case 'white': colorid=1; break; | |
| case 'red': colorid=2; break; | |
| case 'cyan': colorid=3; break; | |
| case 'purple': colorid=4; break; | |
| case 'green': colorid=5; break; | |
| case 'blue': colorid=6; break; | |
| case 'yellow': colorid=7; break; | |
| case 'orange': colorid=8; break; | |
| case 'brown': colorid=9; break; | |
| case 'pink': colorid=10; break; | |
| case 'lightgray': colorid=11; break; | |
| case 'gray': colorid=12; break; | |
| case 'lightgreen': colorid=13; break; | |
| case 'lightblue': colorid=14; break; | |
| case 'lightgray': colorid=15; break; | |
| } | |
| } | |
| function loadcsv() { | |
| let mycsv=document.getElementById('csv').value.trim(); | |
| let lines = mycsv.split('\n'); | |
| document.getElementById('rows').value=lines.length; | |
| let rows = lines[0].split(','); | |
| document.getElementById('cols').value=rows.length; | |
| genTable(); | |
| } | |
| function handle_cell_click(cellID) { | |
| let row = cellID.split('x') | |
| let col = parseInt(row[0]); | |
| row = parseInt(row[1]); | |
| let lines = document.getElementById('csv').value.trim().split('\n'); | |
| document.getElementById('csv').value=''; | |
| for (let r=0; r<lines.length; r++) { | |
| let fld=lines[r].split(','); | |
| for (let c=0; c<fld.length; c++) { | |
| if ((r===col) && (c===row)) { | |
| fld[c]=colorid.toString(); | |
| } | |
| } | |
| document.getElementById('csv').value += fld.join(',') + '\n'; | |
| } | |
| document.getElementById(cellID).setAttribute('bgcolor',chosencolor); | |
| } | |
| function genTable() { | |
| const table = document.getElementById('shifted-table'); | |
| let mycsv = document.getElementById('csv').value.trim(); | |
| let rows=mycsv.split('\n'); | |
| let rElem; | |
| let cElem; | |
| table.innerHTML=''; | |
| for (let r=0; r<rows.length; r++) { | |
| let cols=rows[r].split(','); | |
| rElem=document.createElement('tr'); | |
| rElem.style='height:20px;'; | |
| for (let c=0; c<cols.length; c++) { | |
| if ((r===0) && (c===0)) { | |
| let rE=document.createElement('tr'); | |
| rE.style='height:0px;'; | |
| for (let cnt=0;cnt<=cols.length*2;cnt++) { | |
| cElem = document.createElement('td'); | |
| cElem.style='border:none;'; | |
| cElem.setAttribute('width','15'); | |
| rE.appendChild(cElem); | |
| } | |
| table.appendChild(rE); | |
| } | |
| if ((r%2!=0) && (c===0)) { | |
| cElem=document.createElement('td'); | |
| cElem.style='border:1px solid white;'; | |
| rElem.appendChild(cElem); | |
| } | |
| cElem=document.createElement('td'); | |
| cElem.setAttribute('colspan','2'); | |
| let cellID=r+'x'+c; | |
| cElem.setAttribute('id',cellID); | |
| cElem.setAttribute('onClick','javascript:handle_cell_click("'+cellID+'");'); | |
| cElem.style='border:1px solid black;'; | |
| cElem.setAttribute('bgcolor',coltonam(parseInt(cols[c]))); | |
| rElem.appendChild(cElem); | |
| if ((r%2===0) && (c===cols-1)) { | |
| cElem = document.createElement('td'); | |
| cElem.style='border:1px solid white;'; | |
| rElem.appendChild(cellElement); | |
| } | |
| } | |
| table.appendChild(rElem); | |
| } | |
| } | |
| function gencsv(color) { | |
| const rows = parseInt(document.getElementById('rows').value); | |
| const cols = parseInt(document.getElementById('cols').value); | |
| const mycsv = document.getElementById('csv'); | |
| mycsv.value=''; | |
| for (let r=0; r<rows; r++) { | |
| for (let c=0; c<cols; c++) { | |
| mycsv.value+=color.toString(); | |
| if (c===cols-1) mycsv.value+='\n'; | |
| else mycsv.value+=','; | |
| } | |
| } | |
| } | |
| function coltonam(colorid) { | |
| switch (colorid) { | |
| case 0: return('black'); break; | |
| case 1: return('white'); break; | |
| case 2: return('red'); break; | |
| case 3: return('cyan'); break; | |
| case 4: return('purple'); break; | |
| case 5: return('green'); break; | |
| case 6: return('blue'); break; | |
| case 7: return('yellow'); break; | |
| case 8: return('orange'); break; | |
| case 9: return('brown'); break; | |
| case 10: return('pink'); break; | |
| case 11: return('lightgray'); break; | |
| case 12: return('gray'); break; | |
| case 13: return('lightgreen'); break; | |
| case 14: return('lightblue'); break; | |
| case 15: return('lightgray'); break; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="javascript:gencsv(colorid);genTable();"> | |
| <div>Number of rows: <input type="number" id="rows" value=21 min=1 style='width:50px;'></div> | |
| <div>Number of columns: <input type="number" id="cols" value=43 min=1 style='width:50px;'></div> | |
| <button onclick="javascript:gencsv(colorid);genTable();">Generate Table</button> | |
| <hr> | |
| <table id="shifted-table" border=0 cellspacing=0 cellpadding=0> | |
| </table> | |
| <hr> | |
| <center> | |
| <table border=1 cellspacing=0 cellpadding=0> | |
| <tr><td colspan=6>Chosen color:<td id='chosencolor' colspan=4 bgcolor=white><td colspan=6> | |
| <tr style='height:10px;'><td colspan=16> | |
| <tr style='height:25px;'> | |
| <td bgcolor=black onclick="javascript:change_chosen_color('black');" width=20> | |
| <td bgcolor=white onclick="javascript:change_chosen_color('white');" width=20> | |
| <td bgcolor=red onclick="javascript:change_chosen_color('red');" width=20> | |
| <td bgcolor=cyan onclick="javascript:change_chosen_color('cyan');" width=20> | |
| <td bgcolor=purple onclick="javascript:change_chosen_color('purple');" width=20> | |
| <td bgcolor=green onclick="javascript:change_chosen_color('green');" width=20> | |
| <td bgcolor=blue onclick="javascript:change_chosen_color('blue');" width=20> | |
| <td bgcolor=yellow onclick="javascript:change_chosen_color('yellow');" width=20> | |
| <td bgcolor=orange onclick="javascript:change_chosen_color('orange');" width=20> | |
| <td bgcolor=brown onclick="javascript:change_chosen_color('brown');" width=20> | |
| <td bgcolor=pink onclick="javascript:change_chosen_color('pink');" width=20> | |
| <td bgcolor=darkgray onclick="javascript:change_chosen_color('darkgray');" width=20> | |
| <td bgcolor=gray onclick="javascript:change_chosen_color('gray');" width=20> | |
| <td bgcolor=lightgreen onclick="javascript:change_chosen_color('lightgreen');" width=20> | |
| <td bgcolor=lightblue onclick="javascript:change_chosen_color('lightblue');" width=20> | |
| <td bgcolor=lightgray onclick="javascript:change_chosen_color('lightgray');" width=20> | |
| </table><br> | |
| <textarea id=csv rows=8 cols=90></textarea> | |
| <br><br><button onclick='javascript:loadcsv();'>Load</button> | |
| </center> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment