DrawData.jl

@only_in_pluto @bind dataset DrawData(classes=Set([1,2,3]))

@only_in_pluto begin

    scatter(X1, Y1)

    scatter!(X2, Y2)

    scatter!(X3, Y3)

end

@only_in_pluto dataset

@only_in_pluto begin

    dataset1 = filter(x -> x[3] == 1, dataset)

    dataset2 = filter(x -> x[3] == 2, dataset)

    dataset3 = filter(x -> x[3] == 3, dataset)

    xyz(dataset) = map(x -> x[1], dataset), map(x -> x[2], dataset), map(x -> x[3], dataset)

​

    X1, Y1, Z1 = xyz(dataset1)

    X2, Y2, Z2 = xyz(dataset2)

    X3, Y3, Z3 = xyz(dataset3)

end;

@only_in_pluto using Plots

js_code = """

const div = currentScript.parentElement;

const canvas = div.querySelector("canvas");

const ctx = canvas.getContext("2d");

​

const GEN_THRESHOLD = .4;

​

const classSelectors = div.querySelectorAll(".draw_data_class_selector");

const canvasHeight = canvas.height;

​

function dispatchEvent() {

    div.value = points;

    div.dispatchEvent(new CustomEvent("input"))

}

​

const colors = [];

​

for (let i = 0; i < classSelectors.length; i++) {

    const sel = classSelectors[i];

    colors.push((sel.children[0].style.backgroundColor));

​

    sel.addEventListener("click", () => {

        classSelectors[currentClass - 1].classList.remove("selected");

        sel.classList.add("selected");

        currentClass = i+1;

    });

}

​

let paint = false;

​

let clickX = [];

let clickY = [];

let clickDrag = [];

let currentClass = 1;

​

let points = [];

​

function addClick(x, y, dragging=false) {

    clickX.push(x);

    clickY.push(y);

    clickDrag.push(dragging);

}

​

function redraw(){

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

​

    ctx.strokeStyle = "#cccccc44";

    ctx.lineJoin = "round";

    ctx.lineWidth = 5;

​

    for(let i = 0; i < clickX.length; i++) {        

        ctx.beginPath();

        if (clickDrag[i] && i) {

            ctx.moveTo(clickX[i-1], clickY[i-1]);

        } else {

            ctx.moveTo(clickX[i]-1, clickY[i]);

        }

        // TODO: Smoothing

        ctx.lineTo(clickX[i], clickY[i]);

        ctx.closePath();

        ctx.stroke();

    }

​

    for (let i = 0; i < points.length; i++) {

        const [x, y, cls] = points[i];

        ctx.fillStyle = colors[cls-1];

        ctx.beginPath(); //Start path

        ctx.arc(x, canvasHeight - y, 4, 0, Math.PI * 2, true);

        ctx.fill();

    }

}

​

canvas.addEventListener("mousedown", function(e) {

    var mouseX = e.pageX - canvas.offsetLeft;

    var mouseY = e.pageY - canvas.offsetTop;

​

    paint = true;

    const rect = canvas.getBoundingClientRect();

​

    addClick(e.clientX - rect.left, e.clientY - rect.top);

    redraw();

});

​

canvas.addEventListener("mousemove", function(e) {

    if (paint) {

        const rect = canvas.getBoundingClientRect();

        const newClickX = e.clientX - rect.left;

        const newClickY = e.clientY - rect.top;

​

        const previousClickX = clickX[clickX.length - 1];

        const previousClickY = clickY[clickY.length - 1];

​

        const shouldGenerate = Math.random() < GEN_THRESHOLD;

​

        if (shouldGenerate) {

            const ratio = Math.random();

            const newPointX = previousClickX + (newClickX - previousClickX) * ratio;

            const newPointY = previousClickY + (newClickY - previousClickY) * ratio;

​

            points.push([newPointX, canvasHeight - newPointY, currentClass]);

            dispatchEvent();

        }

​

        addClick(newClickX, newClickY, true);

        redraw();

    }

});

​

canvas.addEventListener("mouseup", function(e) {

    paint = false;

});

​

canvas.addEventListener("mouseleave", function(e) {

    paint = false;

});

""";

begin

    Base.@kwdef struct DrawData

        width::Int=300

        height::Int=150

​

        classes::Set{Int}=Set(1)    

    end

​

    Base.get(::DrawData) = []

    function Base.show(io::IO, m::MIME"text/html", dd::DrawData)

        classes_options = map(enumerate(sort(collect(dd.classes)))) do t

            i, class = t

            color = get_color(i)

            """<p class="$(i == 1 ? "selected" : "") draw_data_class_selector"><span style="background-color: $color"></span> Class $class</p>"""

        end |> join

​

​

        write(io, """

        <div class="draw_data">

            <style>$css_code</style>

            <canvas width="$(dd.width)px" height="$(dd.height)px"></canvas>

            <div class="draw_data_utils">

                <p>

                    Select classes

                    <hr>

                </p>

                $classes_options

            </div>

            <script>

                $js_code

            </script>

        </div>

        """)

    end

end

css_code = """

.draw_data {

    display: flex;

}

​

.draw_data canvas {

    border-radius: 4px;

    border: 1px solid #ccc;

}

​

.draw_data .draw_data_utils {

    padding: 5px;

    flex: 1;

}

​

.draw_data .draw_datas_utils p {

    width: 100%;

}

​

.draw_data_class_selector {

    cursor: pointer;

    padding: 5px;

    margin-bottom: 4px;

    border-radius: 4px;

}

​

.draw_data .selected.draw_data_class_selector {

    background-color: #eee;

}

​

.draw_data .draw_data_class_selector span {

    border-radius: 50%;

    width: 0.9em;

    height: 0.9em;

    display: inline-block;

    background-color: #fcc;

}

""";

"get_color maps an index to a color code using the viridis color palette"

function get_color(class_idx)

    Dict{Int,String}(enumerate([        

        "#440154", # dark purple

        "#472c7a", # purple

        "#3b518b", # blue

        "#2c718e", # blue

        "#21908d", # blue-green

        "#27ad81", # green

        "#5cc863", # green

        "#aadc32", # lime green

        "#fde725", # yellow

    ]))[class_idx]

end

macro only_in_pluto(ex)

    isdefined(Main, :PlutoRunner) ? esc(ex) : quote end

end