Skip to content

Instantly share code, notes, and snippets.

@SnowyYANG
Last active October 21, 2023 11:52
Show Gist options
  • Save SnowyYANG/b99cf505dce4b217877f5d04d1acf3e9 to your computer and use it in GitHub Desktop.
Save SnowyYANG/b99cf505dce4b217877f5d04d1acf3e9 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Pattern Conversion for Inkjet Printing Electronics</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<h1>Pattern Conversion for Inkjet Printing Electronics</h1>
<p>This application may not work in IE. FireFox or Chrome is suggested.<br>
Choose pattern file first. After see the pattern, click MMD, Time Fill, or Extra Points to get the zip of raw printing files.</p>
<form>
<input id="f" type="file"><input id="s" value="40" type="text" placeholder="Spacing" style="width:2em"><span id="dpi">635 DPI</span>
</form>
<canvas id="c"></canvas><br>
<div id="m" style="color: blue"></div>
<button id="mmd">MMD</button><br>
<span>Cooling down dots: </span><input id="cd" value="500" type="text" placeholder="Spacing" style="width:4em">
<button id="tf">Time Fill</button>
<button id="extra">Extra Points</button>
<script>
document.getElementById("s").onchange = function () {
var s = parseInt(document.getElementById("s").value);
document.getElementById("dpi").innerHTML = (635*40/s) +" DPI";
}
function push1(line, count) {
switch(count) {
case 0: break;
case 1: line.push('1');break;
case 2: line.push('11');break;
case 3: line.push('111');break;
case 4: line.push('1111');break;
default: line.push('[' + count + ']1');break;
}
return line;
}
function tofile(r,s,w,h) {
var k = s/40/25.0;
return '<?xml version="1.0"?><PatternFile><GeneralConfig><Left>0</Left><Top>0</Top><Width>'+
w*k+'</Width><Height>'+
h*k+'</Height><UseReferenceCoordinates>True</UseReferenceCoordinates><XReference>0</XReference><YReference>0</YReference><XReferenceTile>0</XReferenceTile><YReferenceTile>0</YReferenceTile><UseLeaderBar>False</UseLeaderBar><LeaderBarWidth>0</LeaderBarWidth><LeaderBarGap>0</LeaderBarGap> <JetSpacing>'+
s+'</JetSpacing><LayerCount>1</LayerCount><LayerDelayInSeconds>0</LayerDelayInSeconds></GeneralConfig><PatternBlock><Left>0</Left><Top>0</Top><Width>'+
w*k+'</Width><Height>'+
h*k+'</Height><XSpacing>-'+
w*k/2+'</XSpacing><YSpacing>-'+
h*k/2+'</YSpacing><MaxXCount>1</MaxXCount><MaxYCount>1</MaxYCount><ImageLineWidth>'+
w+'</ImageLineWidth><ImageLineHeight>'+
h+'</ImageLineHeight><ImageFilename>C:\\test.bmp</ImageFilename><ImageData>'+
r.join('</ImageData>\n<ImageData>')+'</ImageData></PatternBlock></PatternFile>';
}
function download(zip, fileName) {
if (window.Blob) {
zip.generateAsync({type:"blob"})
.then(function (blob) {
saveAs(blob, fileName);
});
}
else {
zip.generateAsync({type:"base64"}).then(function (base64) {
location.href="data:application/zip;base64," + base64;
});
}
}
document.getElementById("f").onchange = function () {
var file = this.files[0];
var fr = new FileReader();
fr.onload = function () {
var img = new Image();
img.onload = function () {
var canvas = document.getElementById("c");
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var all = 0;
var w = canvas.width;
var h = canvas.height;
var pixelData = canvas.getContext('2d').getImageData(0, 0, w, h).data;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
if (!pixelData[(y*w + x)*4]) all++;
}
}
var m = '';
if (h>w) m = 'Image would be rotated<br>';
if (all < 10000) document.getElementById("m").innerHTML += "Manual time delay: 3.0 min"
};
img.src = fr.result;
}; // onload fires after reading is complete
fr.readAsDataURL(file); // begin reading
};
document.getElementById("mmd").onclick = function() {
var canvas = document.getElementById("c");
var w = canvas.width;
var h = canvas.height;
var s = parseInt(document.getElementById("s").value);
if (isNaN(s)) s = 40;
var pixelData = canvas.getContext('2d').getImageData(0, 0, w, h).data;
var r = [[[],[],[]], [[],[],[]], [[],[],[]]];
for (var y = 0; y < h; y++) {
var line = [[],[],[]];
var count = [0,0,0];
for (var x = 0; x < w; x++) {
if (pixelData[(y*w + x)*4]) {
count[0]++;
count[1]++;
count[2]++;
}
else {
for(var i = 0; i < 3; ++i) {
if (i === x % 3) {
push1(line[i],count[i]);
line[i].push('0');
count[i] = 0;
}
else count[i]++;
}
}
}
if (count[0]) push1(line[0],count[0]);
if (count[1]) push1(line[1],count[1]);
if (count[2]) push1(line[2],count[2]);
for(var i=0;i<3;++i)
if (y%3 === i) {
r[i][0].push(line[0].join(''));
r[i][1].push(line[1].join(''));
r[i][2].push(line[2].join(''));
}
else {
r[i][0].push(push1([],w)[0]);
r[i][1].push(push1([],w)[0]);
r[i][2].push(push1([],w)[0]);
}
}
var zip = new JSZip();
zip.file("1.ptf", tofile(r[0][0],s,w,h));
zip.file("2.ptf", tofile(r[1][1],s,w,h));
zip.file("3.ptf", tofile(r[2][2],s,w,h));
zip.file("4.ptf", tofile(r[0][1],s,w,h));
zip.file("5.ptf", tofile(r[1][2],s,w,h));
zip.file("6.ptf", tofile(r[2][0],s,w,h));
zip.file("7.ptf", tofile(r[0][2],s,w,h));
zip.file("8.ptf", tofile(r[1][0],s,w,h));
zip.file("9.ptf", tofile(r[2][1],s,w,h));
download(zip, "mmd.zip");
}
document.getElementById("tf").onclick = function() {
var cd = parseInt(document.getElementById("cd").value);
if (isNaN(cd)) cd = 500;
var canvas = document.getElementById("c");
var w = canvas.width;
var h = canvas.height;
var s = parseInt(document.getElementById("s").value);
if (isNaN(s)) s = 40;
var pixelData = canvas.getContext('2d').getImageData(0, 0, w, h).data;
var rt = 0; //reach time
var rts = [];
var pass = [];
var maxPass = 0;
var results = [0];
for (var y = 0; y < h; ++y) {
var rtrs = []; //reach time of each pixel in this row
var passr = []; //pass of each pixel in this row
var count = [0,0,0,0,0,0,0,0,0,0];
var line = [0,[],[],[],[],[],[],[],[],[]]
var lastPixel = -1;
for (var x = w - 1; x >= 0; --x) {
if (!pixelData[(y * w + x) * 4]) {
lastPixel = x;
break;
}
}
if (lastPixel === -1) {
for (var x = 0; x < w; ++x) {
rtrs.push(0);
passr.push(0);
}
}
else {
for (var x = 0; x <= lastPixel; ++x) {
rtrs.push(rt + x);
if (pixelData[(y * w + x) * 4]) {
for (var p = 1; p <= maxPass; ++p) count[p]++;
passr.push(0);
}
else {
var availablePass = [false, true, true, true, true, true, true, true, true, true];
for (var yy = Math.max(y - 2, 0); yy < y; ++yy)
for (var xx = Math.max(x - 2, 0); xx <= x; ++xx)
if (pass[yy][xx] && rt + x < rts[yy][xx] + cd) availablePass[pass[yy][xx]] = false;
if (x - 2 >= 0 && passr[x - 2] && rt + x < rtrs[x - 2] + cd) availablePass[passr[x - 2]] = false;
if (x - 1 >= 0 && passr[x - 1] && rt + x < rtrs[x - 1] + cd) availablePass[passr[x - 1]] = false;
for (var p = 1; p <= 9; ++p)
if (availablePass[p]) {
passr.push(p);
if (p > maxPass) {
var newPass = [];
for (var yy = 0; yy < y; ++yy) newPass.push(push1([],w)[0]);
results.push(newPass);
push1(line[p], x);
line[p].push('0');
maxPass = p;
p++;
}
else {
push1(line[p], count[p]);
line[p].push('0');
count[p] = 0;
}
break;
}
else
count[p]++;
while (p <= maxPass) {
count[p]++;
++p;
}
}
}
rt += lastPixel * 2 + 10;
}
rts.push(rtrs);
pass.push(passr);
for (var p = 1; p <= maxPass; ++p) {
count[p] += w - lastPixel - 1;
push1(line[p], count[p]);
results[p].push(line[p].join(''));
}
}
var zip = new JSZip();
for (var p = 1; p <= maxPass; ++p)
zip.file(p + ".ptf", tofile(results[p], s, w, h));
download(zip, "tf.zip");
}
document.getElementById("extra").onclick = function() {
var cd = parseInt(document.getElementById("cd").value);
if (isNaN(cd)) cd = 500;
var canvas = document.getElementById("c");
var w = canvas.width;
var h = canvas.height;
var s = parseInt(document.getElementById("s").value);
if (isNaN(s)) s = 40;
var ep = 125*40/s;
var pixelData = canvas.getContext('2d').getImageData(0, 0, w, h).data;
var rt = 0; //reach time
var rts = [];
var pass = [];
var maxPass = 0;
var results = [0];
for (var y = 0; y < h; ++y) {
var rtrs = []; //reach time of each pixel in this row
var passr = []; //pass of each pixel in this row
var count = [0,0,0,0,0,0,0,0,0,0];
var line = [0,[],[],[],[],[],[],[],[],[]]
var lastPixel = -1;
for (var x = w - 1; x >= 0; --x) {
if (!pixelData[(y * w + x) * 4]) {
lastPixel = x;
break;
}
}
if (lastPixel === -1) {
for (var x = 0; x < w; ++x) {
rtrs.push(0);
passr.push(0);
}
var extra = false;
}
else {
for (var x = 0; x <= lastPixel; ++x) {
rtrs.push(rt + x);
if (pixelData[(y * w + x) * 4]) {
for (var p = 1; p <= maxPass; ++p) count[p]++;
passr.push(0);
}
else {
var availablePass = [false, true, true, true, true, true, true, true, true, true];
for (var yy = Math.max(y - 2, 0); yy < y; ++yy)
for (var xx = Math.max(x - 2, 0); xx <= x; ++xx)
if (pass[yy][xx] && rt + x < rts[yy][xx] + cd) availablePass[pass[yy][xx]] = false;
if (x - 2 >= 0 && passr[x - 2] && rt + x < rtrs[x - 2] + cd) availablePass[passr[x - 2]] = false;
if (x - 1 >= 0 && passr[x - 1] && rt + x < rtrs[x - 1] + cd) availablePass[passr[x - 1]] = false;
for (var p = 1; p <= 9; ++p)
if (availablePass[p]) {
passr.push(p);
if (p > maxPass) {
var newPass = [];
for (var yy = 0; yy < y; ++yy) newPass.push(push1([],w + ep)[0]);
results.push(newPass);
push1(line[p], x);
line[p].push('0');
maxPass = p;
p++;
}
else {
push1(line[p], count[p]);
line[p].push('0');
count[p] = 0;
}
break;
}
else
count[p]++;
while (p <= maxPass) {
count[p]++;
++p;
}
}
}
var extra = lastPixel * 2 + 10 < cd;
rt += (extra ? w + ep : lastPixel) * 2 + 10;
}
rts.push(rtrs);
pass.push(passr);
for (var p = 1; p <= maxPass; ++p) {
count[p] += w - lastPixel - 1;
push1(line[p], count[p] + (extra ? ep - 1 : ep));
if (extra) line[p].push('0');
results[p].push(line[p].join(''));
}
}
var zip = new JSZip();
for (var p = 1; p <= maxPass; ++p)
zip.file(p + ".ptf", tofile(results[p], s, w, h));
download(zip, "extra.zip");
}</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment