static/index.js

let cvsIn = document.getElementById("inputimg");
let ctxIn = cvsIn.getContext('2d');
let style = document.getElementById("style");
let svgGraph = null;
let mouselbtn = false;
var current_time = (new Date()).getTime();
var user_id = Math.floor(Math.random() * 1000000000);


// initilize
window.onload = function () {
    ctxIn.fillStyle = "#87ceeb";
    ctxIn.fillRect(0, 0, cvsIn.width, 300);
    ctxIn.fillStyle = "#567d46";
    ctxIn.fillRect(0, 300, cvsIn.width, 512);

    ctxIn.color = "#b0d49b";
    ctxIn.lineWidth = 30;
    ctxIn.lineJoin = ctxIn.lineCap = 'round';
}


// add cavas events
cvsIn.addEventListener("mousedown", function (e) {
    if (e.button == 0) {
        let rect = e.target.getBoundingClientRect();
        let x = e.clientX - rect.left;
        let y = e.clientY - rect.top;
        mouselbtn = true;
        ctxIn.beginPath();
        ctxIn.moveTo(x, y);
    }
    else if (e.button == 2) {
        onClear();  // right click for clear input
    }
});

cvsIn.addEventListener("mouseup", function (e) {
    if (e.button == 0) {
        mouselbtn = false;
        move_range = domainSlider.value;
        onRecognition(move_range);
    }
});
cvsIn.addEventListener("mousemove", function (e) {
    let rect = e.target.getBoundingClientRect();
    let x = e.clientX - rect.left;
    let y = e.clientY - rect.top;
    if (mouselbtn) {
        ctxIn.lineTo(x, y);
        ctxIn.strokeStyle = ctxIn.color;
        ctxIn.stroke();
        if (((new Date).getTime() - current_time) >= 300) {
            move_range = domainSlider.value;
            onRecognition(move_range);
            current_time = (new Date).getTime();
        }

    }
});

cvsIn.addEventListener("touchstart", function (e) {
    // for touch device
    if (e.targetTouches.length == 1) {
        let rect = e.target.getBoundingClientRect();
        let touch = e.targetTouches[0];
        let x = touch.clientX - rect.left;
        let y = touch.clientY - rect.top;
        ctxIn.beginPath();
        ctxIn.moveTo(x, y);
    }
});

cvsIn.addEventListener("touchmove", function (e) {
    // for touch device
    if (e.targetTouches.length == 1) {
        let rect = e.target.getBoundingClientRect();
        let touch = e.targetTouches[0];
        let x = touch.clientX - rect.left;
        let y = touch.clientY - rect.top;
        ctxIn.lineTo(x, y);
        ctxIn.strokeStyle = ctxIn.color;
        ctxIn.stroke();
        e.preventDefault();
    }
});

cvsIn.addEventListener("touchend", function (e) {
    // for touch device
    move_range = domainSlider.value;
    onRecognition(move_range);
});

// prevent display the contextmenu
cvsIn.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

document.getElementById("clearbtn").onclick = onClear;
function onClear() {
    mouselbtn = false;
    ctxIn.clearRect(0, 0, 512, 512);
    ctxIn.fillStyle = "#87ceeb";
    ctxIn.fillRect(0, 0, cvsIn.width, 300);
    ctxIn.fillStyle = "#567d46";
    ctxIn.fillRect(0, 300, cvsIn.width, 512);
}


document.getElementById("random_pick").addEventListener("click", function () {
    //ctxIn.color = "#F5F5F5";
    onRecognition_random();
});


document.getElementById("color1").addEventListener("click", function () {
    //ctxIn.color = "#D5D5D5";
    ctxIn.color = "#87ceeb";
});
document.getElementById("color2").addEventListener("click", function () {
    //ctxIn.color = "#696969";
    ctxIn.color = "#9b7653"
});
document.getElementById("color3").addEventListener("click", function () {
    //ctxIn.color = "#676767";
    ctxIn.color = "#b0d49b"
});
document.getElementById("color4").addEventListener("click", function () {
    //ctxIn.color = "#F5F5F5";
    ctxIn.color = "#5abcd8"
});
document.getElementById("color5").addEventListener("click", function () {
    //ctxIn.color = "#F5F5F5";
    ctxIn.color = "#C1BEBA"
});
document.getElementById("color6").addEventListener("click", function () {
    ctxIn.color = "#5A4D41"
});
document.getElementById("color7").addEventListener("click", function () {
    ctxIn.color = "#567d46"
});
document.getElementById("color8").addEventListener("click", function () {
    ctxIn.color = "#42692f"
});

document.getElementById("color9").addEventListener("click", function () {
    ctxIn.color = "#1577be"
});
//document.getElementById("color10").addEventListener("click", function(){
//ctxIn.color = "#676767";
//    ctxIn.color = "#808080"
//});
document.getElementById("color11").addEventListener("click", function () {
    //ctxIn.color = "#F5F5F5";
    ctxIn.color = "#3a2e27"
});
document.getElementById("color12").addEventListener("click", function () {
    //ctxIn.color = "#F5F5F5";
    ctxIn.color = "#4D415A"
});
//document.getElementById("color13").addEventListener("click", function(){
//    ctxIn.color = "#74cc8c"
//});
document.getElementById("color14").addEventListener("click", function () {
    ctxIn.color = "#FDDA16"
});
document.getElementById("color15").addEventListener("click", function () {
    ctxIn.color = "#d0cccc"
});

var brushSlider = document.getElementById("brushSlider");
ctxIn.lineWidth = brushSlider.value;

brushSlider.addEventListener("change", function () {
    ctxIn.lineWidth = brushSlider.value;
});




var move_range = 3;//domainSlider_1.value;


document.getElementById('style').addEventListener('change', function (event) {
    domainSlider.value = 3;
    onRecognition(domainSlider.value);
})


domainSlider.addEventListener("change", function () {
    // style.value = "ink";
    move_range = domainSlider.value;
    onRecognition(move_range);
});


// post data to server for recognition
function onRecognition(range) {
    console.time("predict");

    $.ajax({
        url: './predict',
        type: 'POST',
        data: JSON.stringify({
            img: cvsIn.toDataURL("image/png").replace('data:image/png;base64,', ''),
            model: style.value,
            move_range: range,
            user_id: user_id
        }),
        contentType: 'application/json',
    }).done(function (data) {
        drawImgToCanvas("outputimg", data)

    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest);
        alert("error");
    })

    console.timeEnd("time");
}

function onRecognition_random(range) {
    console.time("predict");

    $.ajax({
        url: './predict_random',
        type: 'POST',
        data: JSON.stringify({
            img: cvsIn.toDataURL("image/png").replace('data:image/png;base64,', ''),
            model: style.value,
            move_range: range,
            user_id: user_id
        }),
        contentType: 'application/json',
    }).done(function (data) {
        drawImgToCanvas("outputimg", data)

    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest);
        alert("error");
    })

    console.timeEnd("time");
}

function drawImgToCanvas(canvasId, b64Img) {
    let canvas = document.getElementById(canvasId);
    let ctx = canvas.getContext('2d');
    let img = new Image();
    img.src = "data:image/png;base64," + b64Img;
    img.onload = function () {
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    }
}