MPP terrium bot

WOPPPallete=[];
defCLR="#000000";
PObj=function(clr){return "<button style='background-color:"+clr+"' onclick='MPP.addons.draw.customColor=`"+clr+"`'><p style='opacity:0'>#</p> <button onclick='removePObject(`"+clr+"`)'>X</button>"; };
addPObj=function(clr){WOPPPallete[PObj(clr)]="clr"; }
removePObj=function(clr){delete WOPPPallete[PObj(clr)]; }
addPObject=function(clr){addPObj(clr); document.getElementById('WOPP-Pallete').innerHTML=Object.keys(WOPPPallete);};
removePObject=function(clr){removePObj(clr); document.getElementById('WOPP-Pallete').innerHTML=Object.keys(WOPPPallete);};
eraseEnable=false;
setInterval(function(){
if(eraseEnable==true){MPP.addons.draw.customColor=MPP.client.channel.settings.color; return true;}
if(eraseEnable==false){MPP.addons.draw.customColor= defCLR; return false;}
},100);



$("body #bottom .relative").append('<div id="WOPPPallete" class="ugly-button 2_btn" style="position: fixed;bottom: 8px;right: 220px;width: 180px;">Палитра/Pallete</div>');
$("body #bottom .relative").append('<div id="WOPPTools" class="ugly-button 2_btn" style="position: fixed;bottom: 8px;right: 450px;width: 180px;">Инструменты/Tools</div>');
$("#WOPPPallete").click(function(){
MPP.client.emit("notification", { title: "Палитра/Pallete", html:"Укажите цвет/Choose color: <input type='color' id='WOPPdrawclr'> <button id='theclrbtn' onclick='addPObject(document.getElementById(`WOPPdrawclr`).value), MPP.addons.draw.customColor=document.getElementById(`WOPPdrawclr`).value, defCLR=document.getElementById(`WOPPdrawclr`).value'>Добавить цвет/Add Color</button></br></input> <p id='WOPP-Pallete'></p>",duration:-1,target:"#WOPPPallete"});
document.getElementById('WOPP-Pallete').innerHTML=Object.keys(WOPPPallete);});
$("#WOPPTools").click(function(){
MPP.client.emit("notification", { title: "Инструменты/Tools", html:"<button onclick='brushSayz = prompt(`Укажите размер кисти/Set brush size`, ``), MPP.addons.draw.brushSize=brushSayz'>Размер кисти/Brush size</button> </br> </br><button onclick='eraseEnable=false'>△</button><br> <button onclick='eraseEnable=true'>⌫</button><br> <button onclick='WOPPUploadImgNotif()'>🏞</button>",duration:-1,target:"#WOPPTools"});});
WOPPUploadImgNotif=function(){MPP.client.emit("notification", { title: "Вставить фото/Paste Image", html:"<input id='imageFile' type='file' onchange='ResizeImage(), ResizeImage()'><input type='button' value='Вставить/Paste'  onclick='WOPPread1(document.getElementById(`WOPPTheImg`).src)'/> <img src='#' id='WOPPTheImg'>",duration:-1});};

makePX=function(x,y,color){MPP.addons.draw.mkline(x,y,x+1,y,5,color); MPP.addons.draw.mkline(x,y+1,x+1,y+1,5,color);};
function ResizeImage() {

var filesToUpload = document.getElementById('imageFile').files;
    var file = filesToUpload[0];

    // Create an image
    var img = document.createElement("img");
    // Create a file reader
    var reader = new FileReader();
    // Set the image once loaded into file reader
    reader.onload = function(e) {
            img.src = e.target.result;

            var canvas = document.createElement("canvas");
            //var canvas = $("<canvas>", {"id":"testing"})[0];
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);




         var height=img.height;
var width=img.width;

                var MAX_WIDTH = 64;
            var MAX_HEIGHT = 64;
            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }



            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL("image/png");

 document.getElementById('WOPPTheImg').src=dataurl;
        }
        // Load files into file reader
    reader.readAsDataURL(file);
}


function WOPPread1(input) {


function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}



function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}



var img = document.createElement("img");
img.src = input;
var width1=img.width
var height1=img.height

var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var c = canvas.getContext('2d');
c.drawImage(img, 0, 0, img.width, img.height);


var pos1 = [128-32,128-32], pos2 = [128+32,128+32];
//var pos1 = [0,0], pos2 = [64,64];

var ii=0;
for (let x = pos1[0], xo = 0; x < pos2[0]; x++, xo++)
for (let y = pos1[1], yo = 0; y < pos2[1]; y++, yo++) {
  setTimeout(()=>{
      var rgb = c.getImageData(xo,yo, 1, 1).data;
      makePX(x,y, rgbToHex(rgb[0], rgb[1], rgb[2]));
  } ,++ii * 4);
}

}