Code viewer for World: Resit - Practical 2
// Eoin Mc Cormack - 15112128

let canvas; 
let doodleClassifier;
let divMessage;

var resultHtml = [];
var lastBestGuess = "";

// Setup the page
function setup() {
    canvas = createCanvas(400, 400);
    // Using a grey tone so you can identify the doodle area
    background(235);
    // Classify image
    doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
    divMessage = createDiv("Doodle in grey box and click 'Get Result' when finished");
}

// Checks if the model is ready
function modelReady() {
    console.log("The model is ready");
}

// Retrieves the results of image classifier, it returns the results or an error.
// The previous results will presist so you can check results mid doodle or click clearResults 
function getResults(error, results) {
    
    if (error) {
        console.error(error);
        return;
    } else {
        console.log(results);
        
        for (let i = 0; i < results.length; i ++) {
            resultHtml.push("Guess " + (i + 1) + " is [" + results[i].label + "], with confidence of [" + nf(100*results[i].confidence, 2, 2) + "%] <br/>");
        }
        
        AB.msg(resultHtml, 5);
        lastBestGuess = "The previous best guess was [" + results[0].label + "], with confidence of [" + nf(100*results[0].confidence, 2, 2) + "%] <br/>";
    }
}

// Clears the results list
function clearResults() {
    resultHtml = [];
    AB.msg(lastBestGuess + resultHtml, 5);
}

// Clears the doodle and results to let user try again, also reloads the doodle classifier
function clearDoodleAndResults() {
    background(235);
    clearResults();
    doodleClassifier = ml5.imageClassifier('DoodleNet', modelReady);
    resultHtml = [];
    AB.msg("", 5);
    divMessage.html("Doodle in grey box and click 'Get Result' when finished");
}

// Tracks the mouse while the button is clicked to draw image
function draw() {
    if (mouseIsPressed) {
        strokeWeight(20);
        line(mouseX, mouseY, pmouseX, pmouseY);
    }
}

// Waits for click from user confirming they are finished doodling
function finishedDrawing() {
    doodleClassifier.classify(canvas, getResults);
}

// Html for page
var theHtml;

// Imports ml5
theHtml = "<!DOCTYPE html>" +
            "<html>" +
            "<head>" +
            "<script src='https://unpkg.com/ml5@0.6.0/dist/ml5.min.js'></script>" +
            "<meta charset='utf-8' />" +
            "</head> </html>";
            
AB.msg ( theHtml, 1 );

// 1 Doodle header 
theHtml = "<h1>Doodle Controls</h1> <br/> " + 
"<button onclick='finishedDrawing();' class='normbutton' >Get Result</button> <br/> ";
AB.msg ( theHtml, 2 );

theHtml = "<button onclick='clearResults();' class='normbutton' >Clear Previous Results</button> <br> ";
AB.msg ( theHtml, 3 );

// Wait for user input to be finished before checking results
theHtml = "<button onclick='clearDoodleAndResults();' class='normbutton' >Start A new doodle</button> <br/> ";
AB.msg ( theHtml, 4 );