MSV FM

dot.antimicrobial@66.96.161.157: ~ $
Path : /hermes/sb_web/b1536/advancedfunctions.co/
File Upload :
Current < : /hermes/sb_web/b1536/advancedfunctions.co/MakeQRCodeBadgeWithCircules_Logo_Name_Password.html

<html>
 <head>
        <title>QR</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

<div class="form-group" id="qrcodesblock">
<label class="form-control">QR Cards Generator</label>
<textarea class="form-control" rows=5 id="qrCodes" placeholder="Copy Last Name|First Name|Password columns from Google Sheets [max. 20 rows]"></textArea>
   <button class="btn btn-default form-control" onclick="javascript:beginProcessing()">Make Face and Body </button>
<a href="" id="face" style="display:none;">Download Face (svg)</a>
<a href="" id="body" style="display:none;">Download Body (svg)</a>
</div>

<div>
<svg id="svgCanvas" width="960" height="2000" ></svg>
<svg id="svgCanvas2" width="960" height="2000" ></svg>
<img src="band.png" width="0" height="0" id="band">
<img src="" width="0" height="0" id="qrImage">
        <canvas id="canvasId" width="960" height="2000"></canvas> 
</div>
<body><span id="status"></span>
<script>
var qrWidth=200;
var qrHeight=200;
var hiddenCanvas=document.createElement("canvas");
var hiddenCanvasContext=hiddenCanvas.getContext("2d");
hiddenCanvas.width=qrWidth;
hiddenCanvas.height=qrHeight;
var ns="http://www.w3.org/2000/svg";
var svgCanvas=document.getElementById("svgCanvas");
var svgCanvas2=document.getElementById("svgCanvas2");
var bodyWidth=240;
var bodyHeight=400;
var xUnit=bodyWidth/11;
var yUnit=bodyWidth/17;
var canvasContext=document.getElementById("canvasId").getContext('2d');
var bandImage=document.getElementById("band");
var qrImage=document.getElementById("qrImage");

var increment=0;
var string="";
var info="";
var qrCode="";
var firstName="";
var lastName="";
var credentials="";

var textToDraw="";
var textWidth=200;
var textFont=0;
var i=0;
var j=0;
var qrPositionX=0;
var qrPositionY=0;

function beginProcessing(){
info=document.getElementById("qrCodes").value+"\n";
run();
}
function run(){
//document.getElementById("qrcodesblock").style.display="none";
i=increment%4;
j=parseInt(increment/4);
credentials=info.substring(0,info.indexOf("\n"));


lastName=credentials.substring(0,credentials.indexOf("\x09"));
credentials=credentials.replace(lastName+"\x09","");
firstName=credentials.substring(0,credentials.indexOf("\x09"));
credentials=credentials.replace(firstName+"\x09","");
qrCode=credentials;



info=info.replace(info.substring(0,info.indexOf("\n"))+"\n","");


string="http://chart.apis.google.com/chart?cht=qr&chs="+qrWidth+"x"+qrHeight+"&chld=H|0&chl="+qrCode;
qrImage.src=string;
qrImage.crossOrigin="anonymous";

setTimeout(function(){getQrImage();},1000);

//document.getElementById("status").innerHTML=firstName+","+lastName+","+qrCode+info.length;
increment++;

}

function getQrImage(){
 for(var x=7;x>0;x--){
  qrCode=qrCode.substring(0, x)+" "+qrCode.substring(x,qrCode.length);}

//canvasContext.drawImage(bandImage, i*179, j*120+5);
//canvasContext.drawImage(qrImage, i*179+49, j*120+20+5,180,180);
//canvasContext.fillText(firstName+","+lastName+","+qrCode, i*179+49+8, j*120+16+5+80+10);


var shape=document.createElementNS(ns,"rect");
shape.setAttributeNS(null,"x",i*bodyWidth);
shape.setAttributeNS(null,"y",j*bodyHeight);
shape.setAttributeNS(null,"width",bodyWidth);
shape.setAttributeNS(null,"height",bodyHeight);
shape.setAttributeNS(null,"rx","20");
shape.setAttributeNS(null,"ry","20");
shape.setAttributeNS(null,"fill","rgb(255,255,255)");
shape.setAttributeNS(null,"stroke-width", "1");
shape.setAttributeNS(null,"stroke","rgb(0,0,0)");

var topHole=document.createElementNS(ns,"rect");
topHole.setAttributeNS(null,"x",i*bodyWidth+1*xUnit);
topHole.setAttributeNS(null,"y",j*bodyHeight+1.5*yUnit);
topHole.setAttributeNS(null,"width",1*xUnit);
topHole.setAttributeNS(null,"height",parseInt(0.5*yUnit));
topHole.setAttributeNS(null,"rx","2");
topHole.setAttributeNS(null,"ry","2");
topHole.setAttributeNS(null,"fill","rgb(255,255,255)");
topHole.setAttributeNS(null,"stroke-width", "1");
topHole.setAttributeNS(null,"stroke","rgb(0,0,0)");

var bottomHole=document.createElementNS(ns,"rect");
bottomHole.setAttributeNS(null,"x",i*bodyWidth+1*xUnit);
bottomHole.setAttributeNS(null,"y",j*bodyHeight+3*yUnit);
bottomHole.setAttributeNS(null,"width",1*xUnit);
bottomHole.setAttributeNS(null,"height",parseInt(0.5*yUnit));
bottomHole.setAttributeNS(null,"rx","2");
bottomHole.setAttributeNS(null,"ry","2");
bottomHole.setAttributeNS(null,"fill","rgb(255,255,255)");
bottomHole.setAttributeNS(null,"stroke-width", "1");
bottomHole.setAttributeNS(null,"stroke","rgb(0,0,0)");

var logo=document.createElementNS(ns,"image");
logo.setAttributeNS(null,"x",i*bodyWidth+(bodyWidth-100)/2);
logo.setAttributeNS(null,"y",j*bodyHeight);
logo.setAttributeNS(null,"width","100");
logo.setAttributeNS(null,"height","100");
logo.setAttributeNS("http://www.w3.org/1999/xlink","href","https://advancedfunctions.co/windsorLogoSvg.svg");

var school=document.createElementNS(ns,"text");
school.setAttributeNS(null,"x",i*bodyWidth+(bodyWidth-2*xUnit)/2);
school.setAttributeNS(null,"y",j*bodyHeight+100+parseInt(-.3*yUnit));
school.setAttributeNS(null,"textLength",2*xUnit);
school.setAttributeNS(null,"font-size","6px");
var schoolTextNode=document.createTextNode("SCHOOL");
school.appendChild(schoolTextNode);

var logoName=document.createElementNS(ns,"text");
logoName.setAttributeNS(null,"x",i*bodyWidth+(bodyWidth-2*xUnit)/2);
logoName.setAttributeNS(null,"y",j*bodyHeight+100+parseInt(0.7*yUnit));
logoName.setAttributeNS(null,"textLength",2*xUnit);
logoName.setAttributeNS(null,"font-size","8px");
var logoNameTextNode=document.createTextNode("ALBANY");
logoName.appendChild(logoNameTextNode);

textToDraw=firstName+" "+lastName;
textWidth=parseInt(qrWidth*.7);
textFont=0;
getFont();

var nameToDraw=document.createElementNS(ns,"text");
nameToDraw.setAttributeNS(null,"x",i*bodyWidth+(bodyWidth-qrWidth)/2);
nameToDraw.setAttributeNS(null,"y",j*bodyHeight+(bodyHeight-qrHeight-1*yUnit-2*yUnit));
nameToDraw.setAttributeNS(null,"textLength",qrWidth);
nameToDraw.setAttributeNS(null,"font-size",textFont+"px");
var nameToDrawTextNode=document.createTextNode(textToDraw);
nameToDraw.appendChild(nameToDrawTextNode);

var qrCodeText=document.createElementNS(ns,"text");
qrCodeText.setAttributeNS(null,"x",i*bodyWidth+(bodyWidth-5*xUnit)/2);
qrCodeText.setAttributeNS(null,"y",j*bodyHeight+bodyHeight-parseInt(0.5*yUnit));
qrCodeText.setAttributeNS(null,"textLength",5*xUnit);
var qrCodeTextTextNode=document.createTextNode(qrCode);
qrCodeText.appendChild(qrCodeTextTextNode);



svgCanvas2.appendChild(shape);
svgCanvas2.appendChild(topHole);
svgCanvas2.appendChild(bottomHole);
svgCanvas.appendChild(logo);
svgCanvas.appendChild(logoName);
svgCanvas.appendChild(school);
svgCanvas.appendChild(qrCodeText);
svgCanvas.appendChild(nameToDraw);

qrPositionX=i*bodyWidth+(bodyWidth-qrWidth)/2;
qrPositionY=j*bodyHeight+(bodyHeight-qrHeight-2*yUnit);
drawQrPicture();

if(info.length>0){
setTimeout(function(){run();},100);}else{createFile();
makeBody();}
}

function makeBody(){
//window.open("https://advancedfunctions.co/0qrscanner7Body.html?bodyCount="+increment);
}

function getFont(){
var fontCanvas=document.createElement("canvas");
var context=fontCanvas.getContext("2d");
context.font=1+"px Arial";
for(var i=0;i<400;i++){

if(context.measureText(textToDraw).width<textWidth){
context.font=i+"px Arial";
}else{textFont=i;
break;}
}

}

function drawQrPicture(){

hiddenCanvasContext.drawImage(qrImage,0,0);

var qrFrame="";
var numberOfPixels="";
qrFrame = hiddenCanvasContext.getImageData(0, 0, qrWidth, qrHeight);
                numberOfPixels = qrFrame.data.length / 4;
var pixelCount=0;

var placementMarkers=document.createElementNS(ns,"circle");

   for (var i = 0; i < numberOfPixels; i++) {
if(qrFrame.data[i*4]>128){break;}
pixelCount++;
}
pixelCount=pixelCount/7;
var count=0;
var x=0;
var y=0;
for (var i = 0; i < numberOfPixels; i++) {
if(qrFrame.data[i*(4*pixelCount)]<128){
if(!((x<7&&y<7)||(x>17&&y<7)||(x<7&&y>17))&&x<25){
var dots=document.createElementNS(ns,"circle");
dots.setAttributeNS(null,"cx",x*pixelCount+pixelCount/2+qrPositionX);
dots.setAttributeNS(null,"cy",y*pixelCount+pixelCount/2+qrPositionY);
dots.setAttributeNS(null,"r",pixelCount/2);
//document.getElementById("status").innerHTML=canvas.width+","+canvas.height;
svgCanvas.appendChild(dots);
}
}
count++;
x=(count%qrWidth);
y=parseInt(count/qrWidth);


}


var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+qrPositionX);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+qrPositionY);
qrLocation.setAttributeNS(null,"r",3*pixelCount);
qrLocation.setAttributeNS(null,"stroke-width",pixelCount);
qrLocation.setAttributeNS(null,"fill","white");
qrLocation.setAttributeNS(null,"stroke","black");
svgCanvas.appendChild(qrLocation);


var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+qrPositionX);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+qrPositionY);
qrLocation.setAttributeNS(null,"r",1*pixelCount+pixelCount/2);
svgCanvas.appendChild(qrLocation);

var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+18*pixelCount+qrPositionX);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+qrPositionY);
qrLocation.setAttributeNS(null,"r",3*pixelCount);
qrLocation.setAttributeNS(null,"stroke-width",pixelCount);
qrLocation.setAttributeNS(null,"fill","white");
qrLocation.setAttributeNS(null,"stroke","black");
svgCanvas.appendChild(qrLocation);

var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+18*pixelCount+qrPositionX);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+qrPositionY);
qrLocation.setAttributeNS(null,"r",1*pixelCount+pixelCount/2);
svgCanvas.appendChild(qrLocation);

var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+qrPositionX);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+18*pixelCount+qrPositionY);
qrLocation.setAttributeNS(null,"r",3*pixelCount);
qrLocation.setAttributeNS(null,"stroke-width",pixelCount);
qrLocation.setAttributeNS(null,"fill","white");
qrLocation.setAttributeNS(null,"stroke","black");
svgCanvas.appendChild(qrLocation);

var qrLocation=document.createElementNS(ns,"circle");
qrLocation.setAttributeNS(null,"cx",3*pixelCount+pixelCount/2+qrPositionX);
qrLocation.setAttributeNS(null,"cy",3*pixelCount+pixelCount/2+18*pixelCount+qrPositionY);
qrLocation.setAttributeNS(null,"r",1*pixelCount+pixelCount/2);
svgCanvas.appendChild(qrLocation);

var placementMarkers=document.createElementNS(ns,"circle");
placementMarkers.setAttributeNS(null,"cx",480);
placementMarkers.setAttributeNS(null,"cy",2);
placementMarkers.setAttributeNS(null,"r",2);
svgCanvas.appendChild(placementMarkers);
var placementMarkers=document.createElementNS(ns,"circle");
placementMarkers.setAttributeNS(null,"cx",480);
placementMarkers.setAttributeNS(null,"cy",2);
placementMarkers.setAttributeNS(null,"r",2)
svgCanvas2.appendChild(placementMarkers);

var placementMarkers=document.createElementNS(ns,"circle");
placementMarkers.setAttributeNS(null,"cx",480);
placementMarkers.setAttributeNS(null,"cy",1998);
placementMarkers.setAttributeNS(null,"r",2);
svgCanvas.appendChild(placementMarkers);
var placementMarkers=document.createElementNS(ns,"circle");
placementMarkers.setAttributeNS(null,"cx",480);
placementMarkers.setAttributeNS(null,"cy",1998);
placementMarkers.setAttributeNS(null,"r",2);
svgCanvas2.appendChild(placementMarkers);
}

function createFile(){

document.getElementById("face").style.display="block";
var blob=new Blob([(new XMLSerializer()).serializeToString(svgCanvas)],{type: "application/svg"});
var face=document.getElementById("face");
face.setAttribute("href",window.URL.createObjectURL(blob));
face.setAttribute("download", "face.svg");

document.getElementById("body").style.display="block";
var blob=new Blob([(new XMLSerializer()).serializeToString(svgCanvas2)],{type: "application/svg"});
var body=document.getElementById("body");
body.setAttribute("href",window.URL.createObjectURL(blob));
body.setAttribute("download", "body.svg");
}
</script>
</body>
</html>