{% extends "support.html" %}

{% block head %}
<script>
    let run_data_cap = '';
    let legacy_pill_data = [];

    let isPaused = false;
    let decrementFrame = false;
    let incrementFrame = false;
    let jumpFrame = false;
    let reverse = false;
    let jumpFirst = false;
    let jumpLast = false;
    let jump1SecForward = false;
    let jump1SecBackward = false;
    let jumpFrameId = '';
    let easterEgg = '';
    let timeoutId;
    let jumpNextDrop = false;
    let jumpPrevDrop = false;
    let perpendicularLine = true;
    let graphPanel = false;
    let showImage = true;
    let reset = false;

    let pillDrops = [];
    let vibAmplitude = Array(300).fill(0);
    let rampAngle = Array(300).fill(0);
    let vibRate = Array(300).fill(0);
    let lineVisible = false;
    let imageVisible = false;

    let rampPoints = [];
    let back_bottom_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let back_top_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let bump_1_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let bump_2_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let bump_3_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let lip_bottom_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
    let lip_top_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};

    let startX = 0;
    let startY = 0;
    let mouseX = 0;
    let mouseY = 0;
    let drawLine = false;
    let clearLine = false;
    let drawing = false;

    let images = {};
    let filler_ramp_points = {};

    function reset_run_defaults(){
        // clear global variables
        pillDrops = [];
        rampAngle = Array(300).fill(0);
        vibRate = Array(300).fill(0);
        rampPoints = [];
        back_bottom_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        back_top_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        bump_1_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        bump_2_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        bump_3_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        lip_bottom_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        lip_top_left_time_series = {'x': Array(300).fill(1024), 'y': Array(300).fill(288)};
        images = {};
        run_data_cap = '';
    }

    function reset_run(){
        reset = true;
        isPaused = false;
        $("#get_images").show();
        $("#reset_run").hide();
        $("#workorder_task").prop("disabled", false);
        $("#workorder_task").val('');
        $('#ai_pill_length').parent().show();
        $('#ai_pill_width').parent().show();
    }

    // convert array to csv row
    function convertToCSV(arr) {
        return arr.map(row => row.join(',')).join('\n');
    }

    function downloadCSV(csvData){
        if (Math.max.apply(null, lip_bottom_left_time_series['x']) > 0){
            const blob = new Blob([csvData], { type: 'text/csv' });
            const url = URL.createObjectURL(blob);
            const file_name = $("#workorder_task").val() + '_ramp_point_data.csv';
            const a = $('<a>', {
                style: 'display: none',
                href: url,
                download: file_name
            }).appendTo('body');
            a[0].click();
            a.remove();
            URL.revokeObjectURL(url);
        } else {
            alert('No Ramp Points available for this run')
        }
    }

    function handleKeyDown(event) {
        // console.log(event.code)
        // console.log(event.key)
        if (($('#login-modal').css('display') === 'none' || $('#login-modal').length === 0) && !($('#workorder_task').is(':focus'))) {
            switch (event.code) {
                case 'Backspace':
                    drawLine = false;
                    clearLine = true;
                    $('#horizontal_px').text(0);
                    $('#vertical_px').text(0);
                    $('#diagonal_px').text(0);
                    break;
                case 'KeyP':
                    perpendicularLine = !perpendicularLine;
                    break;
                case 'KeyR':
                    isPaused = false;
                    reverse = !reverse;
                    if (reverse){
                        $('#in_reverse').show();
                    } else {
                        $('#in_reverse').hide();
                    }
                    break;
                case 'ArrowUp':
                case 'KeyW':
                    decrementFrame = true;
                    break;
                case 'ArrowDown':
                case 'KeyS':
                    incrementFrame = true;
                    break;
                case 'Home':
                    jumpFirst = true;
                    break;
                case 'End':
                    jumpLast = true;
                    break;
                case 'Space':
                    isPaused = !isPaused;
                    break;
                case 'ArrowLeft':
                case 'KeyA':
                    jumpPrevDrop = true;
                    break;
                case 'ArrowRight':
                case 'KeyD':
                case 'KeyN':
                    jumpNextDrop = true;
                    break;
                case 'NumpadEnter':
                    if (parseInt(jumpFrameId) > 0) {
                        jumpFrame = true;
                    }
                    break;
                case 'PageUp':
                    isPaused = false;
                    jump1SecForward = true;
                    break;
                case 'PageDown':
                    isPaused = false;
                    jump1SecBackward = true;
                    break;
                case 'KeyI':
                    showImage = !showImage;
                    if (showImage) {
                        $('#images_hidden').hide();
                        $('#images_visible').show();
                    } else {
                        $('#images_visible').hide();
                        $('#images_hidden').show();
                    }
                    break;
                case 'KeyU':
                    graphPanel = true;
                    if ($('#ramp_point_column').css('display') === 'none'){
                        $('#pill_info_column').hide();
                        $('#ramp_point_column').show();
                    } else {
                        $('#ramp_point_column').hide();
                        $('#pill_info_column').show();
                    }
                    break;
            }

            if (event.key === '!') {
                let csvdata = [['Frame Number'].concat(Array.from({ length: back_bottom_time_series['x'].slice(300).length }, (_, index) => index + 1)),
                               ['Back Left'].concat(back_bottom_time_series['x'].slice(300)),
                               ['Back Right'].concat(back_top_time_series['x'].slice(300)),
                               ['Back Right Bump'].concat(bump_1_time_series['x'].slice(300)),
                               ['Front Right Bump'].concat(bump_2_time_series['x'].slice(300)),
                               ['Left Bump'].concat(bump_3_time_series['x'].slice(300)),
                               ['Bottom Left'].concat(lip_bottom_left_time_series['x'].slice(300)),
                               ['Bottom Right'].concat(lip_top_left_time_series['x'].slice(300)),
                               ['Ramp Angle'].concat(rampAngle.slice(300)),
                               ['Vib Rate'].concat(vibRate.slice(300))]
                csvdata = convertToCSV(csvdata);
                downloadCSV(csvdata)
            }

            if (['Numpad0', 'Numpad1', 'Numpad2', 'Numpad3', 'Numpad4', 'Numpad5', 'Numpad6', 'Numpad7', 'Numpad8', 'Numpad9'].includes(event.code)) {
                jumpFrameId += event.key;
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {
                    jumpFrameId = '';
                }, 3000);
            }

            if(['KeyN', 'KeyE', 'KeyO'].includes(event.code)){
                easterEgg += event.key;
                if (easterEgg === 'neo'){
                    document.body.style.backgroundColor = '#0D0208';
                    document.body.style.color = '#00FF41';
                }
            }

            // Suppresses most normal action, but can't suppress all or else developer console is unavailable with F12...
            if (['Numpad0', 'Numpad1', 'Numpad2', 'Numpad3', 'Numpad4', 'Numpad5', 'Numpad6', 'Numpad7', 'Numpad8', 'Numpad9',
                'PageDown', 'PageUp', 'NumpadEnter', 'KeyD', 'ArrowRight', 'KeyA', 'ArrowLeft', 'Space', 'End', 'Home', 'KeyR',
                'KeyW', 'KeyS', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
                event.preventDefault();
            }
        }
    }

    document.addEventListener("keydown", handleKeyDown);

    // allow for using scroll wheel to adjust frame forwards or backwards
    window.addEventListener("wheel", function(event) {
        if (document.body.scrollHeight < window.innerHeight) {
            if (event.deltaY < 0) {
                decrementFrame = true;
            } else {
                incrementFrame = true;
            }
        }
    });

    $(document).ready(function() {
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "Black";
        ctx.beginPath();
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.closePath();
        ctx.fill();

        const shown_rows = parseInt(($(window).height() * 0.7) / (parseFloat($("body").css("font-size"))*2));
        for (let j = 0; j < shown_rows; j++) {
            $('#drop_table_frames').append($('<tr>'));
        }


        document.getElementById('canvas').addEventListener("mousedown", function(event) {
            const rect = document.getElementById('canvas').getBoundingClientRect();
            startX = event.clientX - rect.left;
            startY = event.clientY - rect.top;
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;
            drawLine = true;
            drawing = true;
        });

        document.getElementById('canvas').addEventListener("mouseup", function(event) {
            const rect = document.getElementById('canvas').getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;
            drawing = false;
            // check if mouseclick was near where mousedown occurred and if legacy run, show pill info
            if (Math.abs(startX-mouseX) < 5 && Math.abs(startY-mouseY) < 5){
                if (legacy_pill_data.length > 0) {
                    $.each(legacy_pill_data, function(index, pill_data) {
                        // probably a cleaner way to get this data, but don't want to rewrite 270(?) degree rotation of object again.
                        let minX = canvas.width - pill_data['min'][1] - (pill_data['max'][1] - pill_data['min'][1]);
                        let minY = parseInt(pill_data['min'][0]);
                        let maxX = canvas.width - pill_data['min'][1] - (pill_data['max'][1] - pill_data['min'][1]) + (pill_data['max'][1] - pill_data['min'][1]);
                        let maxY = parseInt(pill_data['min'][0]) + (pill_data['max'][0] - pill_data['min'][0]);
                        if (minX < mouseX && mouseX < maxX && minY < mouseY && mouseY < maxY){
                            //TODO: determine if putting pause here can cause a frame slip as one frame resolves, next begin render, while box is being generated due to being tied to a mouse event
                            isPaused = true;
                            const popupBox = $('#popupBox');
                            const states = ["TooSmall", "Single", "Double", "Triple", "Quadruple", "Quintuple", "Sextuple", "Blob", "Protrusion", "Unknown", "Invalid"]
                            popupBox.css('left', rect.left - 330 + 'px');
                            popupBox.css('top', rect.top/2 + ((minY+maxY)/2) + 'px');
                            popupBox.css('display', 'block');

                            const sig_length = $('#pill_length').text();
                            const sig_width = $('#pill_width').text();
                            const sig_area = $('#pill_area').text();

                            const legacy_length = maxY - minY
                            const legacy_width = maxX - minX
                            const legacy_area = legacy_length * legacy_width

                            $('#legacy_object_id').text(pill_data['state'][0]);
                            $('#legacy_pill_length').html(legacy_length + '&nbsp;&nbsp;&nbsp;' + Math.round(legacy_length/sig_length*10000)/100 + '% of sig');
                            $('#legacy_pill_width').html(legacy_width + '&nbsp;&nbsp;&nbsp;' + Math.round(legacy_width/sig_width*10000)/100 + '% of sig');
                            $('#legacy_pill_area').html(legacy_area + '&nbsp;&nbsp;&nbsp;' + Math.round(legacy_area/sig_area*10000)/100 + '% of sig');
                            $('#legacy_pixel_count').text(pill_data['pill_data'][1]);
                            $('#legacy_white_cover').text(Math.round((parseInt(pill_data['pill_data'][1]) / ((maxY - minY) * (maxX - minX)))*10000) / 100 + '%');
                            $('#legacy_pill_state').text(states[pill_data['state'][2]] + '(' + pill_data['state'][3] + ')');
                            $('#legacy_cg_delta').text('<' + pill_data['cg']['0'] + ',' + pill_data['cg'][1] + '>');
                        }
                    })
                }
            }
        });

        document.addEventListener("mousemove", function(event) {
            if (drawing) {
                const rect = document.getElementById('canvas').getBoundingClientRect();
                mouseX = event.clientX - rect.left;
                mouseY = event.clientY - rect.top;
            }
        });

        let wo_task_id = window.location.href.match(/wo_task_id=(\d+)/);
        if (wo_task_id) {
            $('#workorder_task').val(wo_task_id[1]);
            $('#get_images').click();
        }
    });


    function normalize_ramp_points(time_series){
        // min is used since the y origin has been made bottom left rather than top left
        const resting_value = Math.min.apply(null, time_series['x']);
        for (let i = 0; i < time_series['x'].length; i++) {
            if (time_series['x'][i] === 1024 && time_series['y'][i] === 288){
                time_series['x'][i] = 0;
            }
            const normalized_point_value = time_series['x'][i] - resting_value;
            time_series['x'][i] = Math.max(normalized_point_value, 0);
        }
        return time_series;
    }


    function get_ramp_points(run_data){
        // loop through run data and extract ramp points from
        for (let i = 1; i < run_data.length - 1; i++) {
            let lines = run_data[i].split('\n');
            let ramp_points = $(lines).filter(function(index, line) {
                return line.startsWith("ramp points:");
            }).get()[0];

            if (ramp_points){
                const regex = /<(\d+,\d+)>/g;
                let points = [];
                let match;
                while ((match = regex.exec(ramp_points)) !== null) {
                    const coordinates = match[1].split(",");
                    const x = parseInt(coordinates[0], 10);
                    const y = parseInt(coordinates[1], 10);
                    // rotate 90 degrees such that x and y are swapped
                    points.push({'x': y, 'y': x});
                }
                    // create time series of ramp points, but with 0 at the bottom of the canvas
                    // TODO: normalize x and y better since this is getting funky
                    back_bottom_time_series['x'].push(1024 - points[0]['y']);
                    back_bottom_time_series['y'].push(288 - points[0]['x']);

                    back_top_time_series['x'].push(1024 - points[1]['y']);
                    back_top_time_series['y'].push(288 - points[1]['x']);

                    bump_1_time_series['x'].push(1024 - points[2]['y']);
                    bump_1_time_series['y'].push(288 - points[2]['x']);

                    bump_2_time_series['x'].push(1024 - points[3]['y']);
                    bump_2_time_series['y'].push(288 - points[3]['x']);

                    bump_3_time_series['x'].push(1024 - points[4]['y']);
                    bump_3_time_series['y'].push(288 - points[4]['x']);

                    lip_bottom_left_time_series['x'].push(1024 - points[5]['y']);
                    lip_bottom_left_time_series['y'].push(288 - points[5]['x']);

                    lip_top_left_time_series['x'].push(1024 - points[6]['y']);
                    lip_top_left_time_series['y'].push(288 - points[6]['x']);
                rampPoints.push(points);
            }
        }
        back_bottom_time_series = normalize_ramp_points(back_bottom_time_series);
        back_top_time_series = normalize_ramp_points(back_top_time_series);
        bump_1_time_series = normalize_ramp_points(bump_1_time_series);
        bump_2_time_series = normalize_ramp_points(bump_2_time_series);
        bump_3_time_series = normalize_ramp_points(bump_3_time_series);
        lip_bottom_left_time_series = normalize_ramp_points(lip_bottom_left_time_series);
        lip_top_left_time_series = normalize_ramp_points(lip_top_left_time_series);
    }


    function calculate_vib_amplitude() {
        for (let i = 299; i < lip_bottom_left_time_series['x'].length; i++) {
            let subarray = lip_bottom_left_time_series['x'].slice(i-50, i);
            let max = 0;
            let min = 1280;

            $.each(subarray, function(index, value) {
                if (value > max) {
                    max = value;
                }
                if (value < min) {
                    min = value;
                }
            })

            vibAmplitude.push(max-min);
        }
    }


    // gets various time series and specific frame data to assist with other functions
    function get_meta_data(run_data){

        for (let i = 1; i < run_data.length - 1; i++) {
            // get a list of pill drops that occur during the run
            const frameId = run_data[i].split('\n')[0].match('(\\d+)')[0]
            // let pillDrop = Array.from(run_data[i].split('\n')[3].matchAll('(\\d+)'))[2]
            // if (parseInt(pillDrop[0]) > 0) {
            //     pillDrops.push(parseInt(frameId) - 5)
            // }

            // TODO: use unique pill ids rather than a 15 frame no-go limit.
            // can't use existence of image and armed due to save all images
            let lines = run_data[i].split('\n');
            let filteredLines = $(lines).filter(function(index, line) {
                return line.startsWith("+Pill Object");
            }).get();
            filteredLines.forEach(function(line) {
                let extractedData = {};
                $(line.match(/\b\w+=-?\d+(\.\d+)?/g)).each(function () {
                    let match = this.split('=');
                    let key = match[0];
                    extractedData[key] = parseFloat(match[1]);
                });
                if (extractedData['armed'] === 1 && (frameId - pillDrops.slice(-1) > 15)) {
                    pillDrops.push(parseInt(frameId));
                }
            });

            // get ramp angle over time and put it into list
            rampAngle.push(parseInt(run_data[i].split('\n')[2].match(/R(\d+)/)[1]))

            // get vib rate over time and put it into list
            vibRate.push(parseInt(run_data[i].split('\n')[2].match(/V(\d+)/)[1]))
        }
    }


    function generate_chart(canvas_id, label){
        const ctx = document.getElementById(canvas_id).getContext('2d');
        if (canvas_id.toLowerCase().includes('back')) {
            max = 125;
        } else if (canvas_id.toLowerCase().includes('bump')){
            max = 75;
        } else if (canvas_id.toLowerCase().includes('lip')){
            max = 50;
        } else if (canvas_id === 'vibRate' || canvas_id === 'vibRate2'){
            max = 7;
        } else {
            max = 16;
        }

        let devicePixelRatio = 1;
        let tension = 0.1;
        let fill = false;
        if (canvas_id === 'vibRate' || canvas_id === 'rampAngle') {
            devicePixelRatio = 3;
            fill = 'origin';
        }
        return new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: label,
                    data: Array(300).fill(0),
                    borderColor: 'rgba(135, 206, 250, 1)',
                    backgroundColor: 'rgba(135, 206, 250, 0.5)',
                    fill: fill
                }]
            },
            options: {
                responsive: false,
                maintainAspectRatio: true,
                devicePixelRatio: devicePixelRatio,
                plugins: {
                    legend: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: label
                    }
                },
                scales: {
                    x: {
                        max: 300,
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        min: 0,
                        max: max
                    }
                },
                elements: {
                    point: {
                        radius: 0
                    },
                    line: {
                        tension: tension
                    }
                }
            }
        });
    }

    function generateDropTable(frame_number){
        const shown_rows = parseInt(($(window).height() * 0.7) / (parseFloat($("body").css("font-size"))*2));

        $('#drop_table_frames').empty();
        let first_drop = true;
        let num_rows = 0;

        for (let j = 0; j < pillDrops.length; j++) {
            //handles all future drops
            if (pillDrops[j] > frame_number - 5){
                if (num_rows < shown_rows) {
                    if ($('#drop_table_frames .past_drop').length > shown_rows/2){
                        $('#drop_table_frames tr:first').remove();
                        num_rows--
                    }
                    if (num_rows < shown_rows) {
                        let newRow = $('<tr>');
                        let filler = ''
                        //draws triangle next to the immediately next drop
                        if (first_drop) {
                            first_drop = false;
                            filler = $('<td class="current_drop">');
                        } else {
                            filler = $('<td>');
                        }
                        let dropFrame = $('<td>').text(pillDrops[j] + 5);
                        let elapsedFrame = $('<td>').text('');
                        if (!isNaN(pillDrops[j + 1] - pillDrops[j])){
                            elapsedFrame = $('<td>').text(pillDrops[j + 1] - pillDrops[j]);
                        }
                        newRow.append(filler, dropFrame, elapsedFrame)
                        $('#drop_table_frames').append(newRow);
                        num_rows++
                    }
                }
            // handles drops in the past
            } else {
                if (num_rows < shown_rows){
                    let newRow = $('<tr class="past_drop">');
                    let filler = $('<td>');
                    let dropFrame = $('<td>').text(pillDrops[j] + 5);
                    let elapsedFrame = $('<td>').text('');
                    if (!isNaN(pillDrops[j + 1] - pillDrops[j])){
                        elapsedFrame = $('<td>').text(pillDrops[j + 1] - pillDrops[j]);
                    }
                    newRow.append(filler, dropFrame, elapsedFrame)
                    $('#drop_table_frames').append(newRow);
                    num_rows++
                }
                if ($('#drop_table_frames .past_drop').length === shown_rows){
                    $('#drop_table_frames tr:first').remove();
                    num_rows--
                }
            }
        }
    // TODO need to have filler for low quantity drop runs
    }


    function displayPillData(pill_data, frame_number){
        $('#pill_objects').empty();

        $.each(pill_data, function(index, item) {
            let newRow = $('<tr>');

            let ID = $('<td>').text(item['pill_id']);
            let CG = $('<td>').text(item['CG']);
            let CGD = $('<td>').text(item['Delta']);
            let Velocity = $('<td>').text(item['velocity']);
            let Acceleration = $('<td>').text(item['accel']);
            let ETA = $('<td>').text(item['eta']);

            let A = $('<td>').text();
            // TODO: check if the +/- 5 needs to be changed since pillDrops now uses armed data
            for (let j = 0; j < pillDrops.length; j++) {
                if (pillDrops[j] > frame_number - 5){
                    if (!isNaN(pillDrops[j + parseInt(item['pill_id'])] + 5 - frame_number)){
                        A = $('<td>').text(pillDrops[j + parseInt(item['pill_id'])] + 5 - frame_number);
                    }
                    break;
                }
            }
            let D = $('<td>').text();
            if ($(A).is('*')){
                if (!isNaN(parseInt(ETA.text()) - parseInt(A.text()))) {
                    D = $('<td>').text(parseInt(ETA.text()) - parseInt(A.text()));
                }
            }
            newRow.append(ID, CG, CGD, Velocity, Acceleration, ETA, A, D);
            $('#pill_objects').append(newRow);
        });
    }


    //TODO put boxes, annotations, lines etc here in a displayOverlay function to cut down on how much is in displayImage


    function displayImage(frame_number, filteredLines, reg_mark, zone_data, angle, vib, legacy_data) {
        return new Promise((resolve, reject) => {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');


            const desiredFile = frame_number.toString() in images && images[frame_number.toString()] !== '';

            //only display frames for which there exists an image
            if (desiredFile && showImage) {
                // if ctx isn't cleared then it generates a heat map
                const blob = new Blob([images[frame_number.toString()]], {'type': 'image/png'});
                const url = URL.createObjectURL(blob)
                const img = new Image();
                let pill_data = [];
                let pill_id = 0;
                // I don't think that the duplicate code can be removed here due to needing to be within the onload function
                img.onload = function () {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    let ramp_points = rampPoints[frame_number-1]
                    ctx.drawImage(img, 0, 0)

                    // Draw Ramp Points
                    if (Math.max.apply(null, lip_bottom_left_time_series['x']) > 0){
                        ctx.save()
                        // draw a line between ramp points to simulate a ramp
                        let order = [0, 1, 2, 3, 6, 5, 4, 0]
                        ctx.beginPath();
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        // back left ramp point missing
                        if (ramp_points[order[0]]['x'] > 0 && ramp_points[order[0]]['y'] > 0){
                            ctx.moveTo(canvas.width - ramp_points[order[0]]['x'], ramp_points[order[0]]['y']);
                        } else {
                            ctx.moveTo(canvas.width - filler_ramp_points[angle][order[0]]['x'], filler_ramp_points[angle][order[0]]['y']);
                        }
                        for (let i = 1; i < order.length; i++) {
                            if (ramp_points[order[i]]['x'] > 0 && ramp_points[order[i]]['y'] > 0){
                                ctx.lineTo(canvas.width - ramp_points[order[i]]['x'], ramp_points[order[i]]['y']);
                            } else {
                                ctx.lineTo(canvas.width - filler_ramp_points[angle][order[i]]['x'], filler_ramp_points[angle][order[i]]['y']);
                            }
                        }
                        ctx.closePath();
                        ctx.stroke();
                        ctx.clip()

                        // draw curve to simulate bumps on ramp
                        // bumps on right side
                        if (ramp_points[2]['x'] > 0 && ramp_points[2]['y'] > 0) {
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[2]['x'], ramp_points[2]['y']);
                            ctx.quadraticCurveTo(canvas.width - ramp_points[2]['x'] - 150, ramp_points[2]['y'] + 50, canvas.width - ramp_points[2]['x'], ramp_points[2]['y'] - 20);
                            ctx.strokeStyle = 'grey';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.closePath();
                        }
                        if (ramp_points[3]['x'] > 0 && ramp_points[3]['y'] > 0) {
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[3]['x'], ramp_points[3]['y']);
                            ctx.quadraticCurveTo(canvas.width - ramp_points[3]['x'] - 150, ramp_points[3]['y'] + 50, canvas.width - ramp_points[3]['x'], ramp_points[3]['y'] - 20);
                            ctx.strokeStyle = 'grey';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.closePath();
                        }
                        // bump on left side
                        if (ramp_points[4]['x'] > 0 && ramp_points[4]['y'] > 0) {
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[4]['x'], ramp_points[4]['y']);
                            ctx.quadraticCurveTo(canvas.width - ramp_points[4]['x'] + 150, ramp_points[4]['y'] + 50, canvas.width - ramp_points[4]['x'], ramp_points[4]['y'] - 20);
                            ctx.strokeStyle = 'grey';
                            ctx.lineWidth = 2;
                            ctx.stroke();
                            ctx.closePath();
                        }

                        // draw lines on canvas for zones C & D
                        zone_data[angle.toString()].slice(2).forEach(function(line_coords, index) {
                            ctx.beginPath();
                            ctx.moveTo(0, line_coords);
                            ctx.lineTo(288, line_coords);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = 2;
                            ctx.stroke();

                            ctx.fillStyle = 'white';
                            ctx.font = '10px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('Zone ' + String.fromCharCode(67 + index), canvas.width - ramp_points[4]['x'] + 25, line_coords - 8);
                        });

                        ctx.restore()
                        // TODO: include ramp drop off and other ramp boxes but cut these zone lines to only exist inside those boxes
                        // draw zone lines
                        zone_data[angle.toString()].slice(0,2).forEach(function(line_coords, index) {
                            // Draw Zone D and C line differently so that they only extend across the wireframe
                            ctx.beginPath();
                            ctx.moveTo(canvas.width - ramp_points[5]['x'], line_coords);
                            ctx.lineTo(canvas.width - ramp_points[6]['x'], line_coords);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = 2;
                            ctx.stroke();

                            ctx.fillStyle = 'white';
                            ctx.font = '10px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            // Ascii code 65 is 'A', which corresponds to index 0
                            if (index === 1){
                                ctx.fillText('EOC', 272, line_coords - 8);
                            }
                            ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                        })
                    } else {
                        // draw zone lines
                        zone_data[angle.toString()].forEach(function(line_coords, index) {
                            ctx.beginPath();
                            ctx.moveTo(0, line_coords);
                            ctx.lineTo(288, line_coords);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = 2;
                            ctx.stroke();

                            ctx.fillStyle = 'white';
                            ctx.font = '10px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            // Ascii code 65 is 'A', which corresponds to index 0
                            if (index === 1){
                                ctx.fillText('EOC', 272, line_coords - 8);
                            }
                            ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                        });
                    }

                    // draw regmark
                    ctx.beginPath();
                    ctx.moveTo(reg_mark[2], reg_mark[1]);
                    ctx.lineTo(reg_mark[0], reg_mark[3]);
                    ctx.strokeStyle = "grey";
                    ctx.lineWidth = 2;
                    ctx.stroke();

                    ctx.fillStyle = 'white';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('REG', 12, reg_mark[1] - 8);

                    // put ramp angle and vib directly on the canvas above and below the regmark
                    ctx.fillStyle = 'white';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('R' + angle.toString(), 278, reg_mark[3] - 8);

                    ctx.fillStyle = 'white';
                    ctx.font = '10px Arial';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('V' + vib.toString(), 278, reg_mark[3] + 8);

                    // draw legacy data, it is pre-thresholded, just need to draw lines across screen
                    if (legacy_data.length > 0){
                        $.each(legacy_data, function (index, pill){
                            $.each(pill['whiteLines'], function(index, line){
                                // draw white lines across screen
                                let matches = line.match(/<(\d+),(\d+)>-<(\d+),(\d+)>/);
                                if (matches){
                                    let numbers = matches.slice(1).map(Number);
                                    ctx.beginPath();
                                    ctx.moveTo(canvas.width - numbers[1], numbers[0]);
                                    ctx.lineTo(canvas.width - numbers[3], numbers[2]);
                                    ctx.strokeStyle = "white";
                                    ctx.lineWidth = 1;
                                    ctx.stroke();
                                }
                            })

                            // draw box on screen
                            // if (extractedData['armed'] === 0){
                            //     ctx.strokeStyle = '#66FF00';
                            // } else {
                            //     ctx.strokeStyle = '#E10600';
                            // }
                            ctx.strokeStyle = '#66FF00';
                            ctx.lineWidth = 4;
                            ctx.beginPath();
                            ctx.rect(canvas.width - pill['min'][1] - (pill['max'][1] - pill['min'][1]), pill['min'][0], pill['max'][1] - pill['min'][1], pill['max'][0] - pill['min'][0]);
                            ctx.stroke();

                            // draw center of gravity
                            ctx.fillStyle = '#EE4B2B';
                            ctx.font = 'lighter 30px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('X', canvas.width - pill['cg'][1], pill['cg'][0]);

                            // draw pill id
                            ctx.fillStyle = 'blue';
                            ctx.font = 'bold 14px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';

                            ctx.fillText(pill['id'], canvas.width - pill['cg'][1], pill['max'][0] - 14);
                        })
                    }

                    if (perpendicularLine){
                        // Calculate the middle point of the original line
                        const midX = (reg_mark[0] + reg_mark[2]) / 2;
                        const midY = (reg_mark[1] + reg_mark[3]) / 2;
                        const dx = (reg_mark[0] - reg_mark[2]);
                        const dy = (reg_mark[3] - reg_mark[1]);

                        const x_offset = 144 - midX;

                        ctx.beginPath();
                        ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                        ctx.lineTo(parseInt(midX + dy + x_offset), parseInt(midY - dx));
                        ctx.strokeStyle = 'pink';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();

                        ctx.beginPath();
                        ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                        ctx.lineTo(parseInt(midX + dy*-4 + x_offset), parseInt(midY - dx*-4));
                        ctx.strokeStyle = 'pink';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();

                        lineVisible = true;
                    } else {
                        lineVisible = false;
                    }

                    // handles ruler drawing
                    if (drawLine){
                        ctx.beginPath();
                        ctx.moveTo(startX, startY);
                        ctx.lineTo(mouseX, mouseY);
                        ctx.strokeStyle = 'white';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();

                        ctx.setLineDash([5, 15]);
                        ctx.beginPath();
                        ctx.moveTo(startX, startY);
                        ctx.lineTo(startX, mouseY);
                        ctx.lineTo(mouseX, mouseY);
                        ctx.strokeStyle = 'white';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.closePath();
                        ctx.setLineDash([]);

                        const dx = Math.abs(startX - mouseX);
                        const dy = Math.abs(startY - mouseY);
                        $('#horizontal_px').text(parseInt(dx));
                        $('#vertical_px').text(parseInt(dy));
                        $('#diagonal_px').text(parseInt(Math.sqrt(dx * dx + dy * dy)));

                        if (dx > 25) {
                            ctx.fillStyle = '#FF5F15';
                            ctx.font = 'bold 1.4vh Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(parseInt(dx).toString(), (startX + mouseX) / 2, mouseY - 12);
                        }
                        if (dy > 25) {
                            ctx.fillStyle = '#FF5F15';
                            ctx.font = 'bold 1.4vh Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(parseInt(dy).toString(), startX - 12, (startY + mouseY) / 2);
                        }
                        if (dx > 25 && dy > 25) {
                            ctx.fillStyle = '#FF5F15';
                            ctx.font = 'bold 1.4vh Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(parseInt(Math.sqrt(dx * dx + dy * dy)).toString(), (startX + mouseX) / 2 + 12, (startY + mouseY) / 2 + 12);
                        }
                    }

                    if (ramp_points){
                        ramp_points.forEach(function(point) {
                            if (point['x'] > 0 && point['y'] > 0){
                                // draw X at each point
                                ctx.fillStyle = '#EE4B2B';
                                ctx.font = 'bold 14px Arial';
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'middle';
                                ctx.fillText('X', canvas.width - point['x'], point['y']);
                            }
                        });
                    }

                    // Loop through every pill object in filtered lines
                    filteredLines.forEach(function(line, index) {
                        // Get the X and Y values for the top left and bottom right points of the drawn boxes
                        const matches = line.match(/min<(\d+),(\d+)>, max<(\d+),(\d+)>/);

                        // Get other pill data from pill object
                        let extractedData = {};
                        $(line.match(/\b\w+=-?\d+(\.\d+)?/g)).each(function() {
                            let match = this.split('=');
                            let key = match[0];
                            extractedData[key] = parseFloat(match[1]);
                        });
                        extractedData['pill_id'] = pill_id

                        // Draw bounding boxes around item
                        if (matches && matches.length > 0) {
                            const minX = parseInt(matches[1]);
                            const minY = parseInt(matches[2]);
                            const maxX = parseInt(matches[3]);
                            const maxY = parseInt(matches[4]);

                            if (legacy_data.length === 0){
                                if (extractedData['armed'] === 0){
                                    ctx.strokeStyle = '#66FF00';
                                } else {
                                    ctx.strokeStyle = '#E10600';
                                }
                                ctx.lineWidth = 4;
                                ctx.beginPath();
                                ctx.rect(canvas.width - minY - (maxY - minY), minX, maxY - minY, maxX - minX);
                                ctx.stroke();

                                if (index === 0) {
                                    $('#ai_pill_length').text(maxX - minX);
                                    $('#ai_pill_width').text(maxY - minY);
                                }
                            }

                            const centerX = (canvas.width - minY - (maxY - minY)) + (maxY - minY) / 2;
                            const centerY = minX + (maxX - minX) / 2;

                            extractedData['CG'] = maxX - (maxX-minX)/2;
                            pill_data.push(extractedData);

                            if (legacy_data.length === 0){
                                // draw pill id into the middle of the box
                                if (extractedData['armed'] === 0){
                                    ctx.fillStyle = '#66FF00';
                                } else {
                                    ctx.fillStyle = '#E10600';
                                }
                                ctx.font = '24px Arial';
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'middle';
                                ctx.fillText(pill_id.toString(), centerX, centerY)
                            }
                        }
                        pill_id++
                    })
                    if (filteredLines.length === 0) {
                        $('#ai_pill_length').text('0');
                        $('#ai_pill_width').text('0');
                    }
                    imageVisible = true;
                    displayPillData(pill_data, frame_number);
                    generateDropTable(frame_number);
                    resolve();
                }
                img.src = url;
            } else {
                // if ctx isn't cleared then it generates a heat map
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                let ramp_points = rampPoints[frame_number-1];

                ctx.fillStyle = "Black";
                ctx.beginPath();
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.closePath();
                ctx.fill();

                // draw gradient for ramp
                if (Math.max.apply(null, lip_bottom_left_time_series['x']) > 0){
                    ctx.save()
                    const midY = (ramp_points[0]['y'] + ramp_points[1]['y']) / 2;
                    const midY2 = (ramp_points[5]['y'] + ramp_points[6]['y']) / 2;
                    const grd = ctx.createLinearGradient(144, midY, 144, midY2);
                    grd.addColorStop(0, "#0F0C18");
                    grd.addColorStop(1, "#101015");

                    // draw a line between ramp points to simulate a ramp
                    let order = [0, 1, 2, 3, 6, 5, 4, 0]
                    ctx.beginPath();
                    ctx.strokeStyle = 'grey';
                    ctx.lineWidth = 2;
                    // back left ramp point missing
                    if (ramp_points[order[0]]['x'] > 0 && ramp_points[order[0]]['y'] > 0){
                        ctx.moveTo(canvas.width - ramp_points[order[0]]['x'], ramp_points[order[0]]['y']);
                    } else {
                        ctx.moveTo(canvas.width - filler_ramp_points[angle][order[0]]['x'], filler_ramp_points[angle][order[0]]['y']);
                    }
                    for (let i = 1; i < order.length; i++) {
                        if (ramp_points[order[i]]['x'] > 0 && ramp_points[order[i]]['y'] > 0){
                            ctx.lineTo(canvas.width - ramp_points[order[i]]['x'], ramp_points[order[i]]['y']);
                        } else {
                            ctx.lineTo(canvas.width - filler_ramp_points[angle][order[i]]['x'], filler_ramp_points[angle][order[i]]['y']);
                        }
                    }
                    ctx.closePath();
                    ctx.stroke();
                    ctx.fillStyle = grd;
                    ctx.fill();

                    // only draw the following items within the polygon defined above
                    ctx.clip()

                    // draw curve to simulate bumps on ramp
                    // bumps on right side
                    if (ramp_points[2]['x'] > 0 && ramp_points[2]['y'] > 0) {
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[2]['x'], ramp_points[2]['y']);
                        ctx.quadraticCurveTo(canvas.width - ramp_points[2]['x'] - 150, ramp_points[2]['y'] + 50, canvas.width - ramp_points[2]['x'], ramp_points[2]['y'] - 20);
                        ctx.lineTo(canvas.width - ramp_points[2]['x'], ramp_points[2]['y'])
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#383838';
                        ctx.fill();
                        ctx.closePath();
                    }
                    if (ramp_points[3]['x'] > 0 && ramp_points[3]['y'] > 0) {
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[3]['x'], ramp_points[3]['y']);
                        ctx.quadraticCurveTo(canvas.width - ramp_points[3]['x'] - 150, ramp_points[3]['y'] + 50, canvas.width - ramp_points[3]['x'], ramp_points[3]['y'] - 20);
                        ctx.lineTo(canvas.width - ramp_points[3]['x'], ramp_points[3]['y'])
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#383838';
                        ctx.fill();
                        ctx.closePath();
                    }
                    // bump on left side
                    if (ramp_points[4]['x'] > 0 && ramp_points[4]['y'] > 0) {
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[4]['x'], ramp_points[4]['y']);
                        ctx.quadraticCurveTo(canvas.width - ramp_points[4]['x'] + 150, ramp_points[4]['y'] + 50, canvas.width - ramp_points[4]['x'], ramp_points[4]['y'] - 20);
                        ctx.lineTo(canvas.width - ramp_points[4]['x'], ramp_points[4]['y'])
                        ctx.strokeStyle = 'grey';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        ctx.fillStyle = '#383838';
                        ctx.fill();
                        ctx.closePath();
                    }

                    // draw lines on canvas for zones C & D
                    zone_data[angle.toString()].slice(2).forEach(function(line_coords, index) {
                        ctx.beginPath();
                        ctx.moveTo(0, line_coords);
                        ctx.lineTo(288, line_coords);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'white';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('Zone ' + String.fromCharCode(67 + index), canvas.width - ramp_points[4]['x'] + 25, line_coords - 8);
                    });

                    ctx.restore();

                    // draw lower parts of ramp between ramp points and hoop
                    ctx.beginPath();
                    ctx.moveTo(canvas.width - ramp_points[5]['x'], ramp_points[5]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], ramp_points[6]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], zone_data[angle.toString()][0]);
                    ctx.lineTo(canvas.width - ramp_points[5]['x'], zone_data[angle.toString()][0]);
                    ctx.fillStyle = '#101015';
                    ctx.fill();

                    // draw lip of ramp that vibrates, but below ramp point location
                    ctx.beginPath();
                    ctx.moveTo(canvas.width - ramp_points[5]['x'], ramp_points[5]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], ramp_points[6]['y']);
                    ctx.lineTo(canvas.width - ramp_points[6]['x'], ramp_points[6]['y'] + 35);
                    ctx.lineTo((canvas.width - ramp_points[5]['x'] + canvas.width - ramp_points[6]['x']) / 2, ((ramp_points[5]['y'] + ramp_points[6]['y']) / 2) + 40);
                    // insert slight chevron shape
                    ctx.lineTo(canvas.width - ramp_points[5]['x'], ramp_points[5]['y'] + 35);
                    ctx.fillStyle = '#383838';
                    ctx.fill();

                    // draw zone lines
                    zone_data[angle.toString()].slice(0,2).forEach(function(line_coords, index) {
                        // Draw Zone D and C line differently so that they only extend across the wireframe
                        ctx.beginPath();
                        ctx.moveTo(canvas.width - ramp_points[5]['x'], line_coords);
                        ctx.lineTo(canvas.width - ramp_points[6]['x'], line_coords);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'white';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        // Ascii code 65 is 'A', which corresponds to index 0
                        if (index === 1){
                            ctx.fillText('EOC', 272, line_coords - 8);
                        }
                        ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                    })
                } else {
                    // draw zone lines
                    zone_data[angle.toString()].forEach(function(line_coords, index) {
                        ctx.beginPath();
                        ctx.moveTo(0, line_coords);
                        ctx.lineTo(288, line_coords);
                        ctx.strokeStyle = "white";
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        ctx.fillStyle = 'white';
                        ctx.font = '10px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        // Ascii code 65 is 'A', which corresponds to index 0
                        if (index === 1){
                            ctx.fillText('EOC', 272, line_coords - 8);
                        }
                        ctx.fillText('Zone ' + String.fromCharCode(65 + index), 20, line_coords - 8);
                    });
                }

                // draw regmark
                ctx.beginPath();
                ctx.moveTo(reg_mark[2], reg_mark[1]);
                ctx.lineTo(reg_mark[0], reg_mark[3]);
                ctx.strokeStyle = "grey";
                ctx.lineWidth = 2;
                ctx.stroke();
                ctx.closePath();

                // denotes which line is the regmark
                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('REG', 14, reg_mark[1] - 8);

                // put ramp angle and vib directly on the canvas above and below the regmark
                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('R' + angle.toString(), 278, reg_mark[3] - 8);

                ctx.fillStyle = 'white';
                ctx.font = '10px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('V' + vib.toString(), 278, reg_mark[3] + 8);

                // draw legacy data, it is pre-thresholded, just need to draw lines across screen
                if (legacy_data.length > 0){
                    $.each(legacy_data, function (index, pill){
                        $.each(pill['whiteLines'], function(index, line){
                            // draw white lines across screen
                            let matches = line.match(/<(\d+),(\d+)>-<(\d+),(\d+)>/);
                            if (matches){
                                let numbers = matches.slice(1).map(Number);
                                ctx.beginPath();
                                ctx.moveTo(canvas.width - numbers[1], numbers[0]);
                                ctx.lineTo(canvas.width - numbers[3], numbers[2]);
                                ctx.strokeStyle = "white";
                                ctx.lineWidth = 1;
                                ctx.stroke();
                            }
                        })

                        // draw box on screen
                        // if (extractedData['armed'] === 0){
                        //     ctx.strokeStyle = '#66FF00';
                        // } else {
                        //     ctx.strokeStyle = '#E10600';
                        // }
                        ctx.strokeStyle = '#66FF00';
                        ctx.lineWidth = 4;
                        ctx.beginPath();
                        ctx.rect(canvas.width - pill['min'][1] - (pill['max'][1] - pill['min'][1]), pill['min'][0], pill['max'][1] - pill['min'][1], pill['max'][0] - pill['min'][0]);
                        ctx.stroke();

                        // draw center of gravity
                        ctx.fillStyle = '#EE4B2B';
                        ctx.font = 'lighter 30px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('X', canvas.width - pill['cg'][1], pill['cg'][0]);

                        // draw pill id
                        ctx.fillStyle = 'blue';
                        ctx.font = 'bold 14px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';

                        ctx.fillText(pill['id'], canvas.width - pill['cg'][1], pill['max'][0] - 14);
                    })
                }

                if (perpendicularLine){
                    // Calculate the middle point of the original line
                    const midX = (reg_mark[0] + reg_mark[2]) / 2;
                    const midY = (reg_mark[1] + reg_mark[3]) / 2;
                    const dx = (reg_mark[0] - reg_mark[2]);
                    const dy = (reg_mark[3] - reg_mark[1]);

                    const x_offset = 144 - midX

                    ctx.beginPath();
                    ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                    ctx.lineTo(parseInt(midX + dy + x_offset), parseInt(midY - dx));
                    ctx.strokeStyle = 'pink';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();

                    ctx.beginPath();
                    ctx.moveTo(parseInt(midX + x_offset), parseInt(midY));
                    ctx.lineTo(parseInt(midX + dy*-4 + x_offset), parseInt(midY - dx*-4));
                    ctx.strokeStyle = 'pink';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();

                    lineVisible = true;
                } else {
                    lineVisible = false;
                }

                // handles ruler drawing
                if (drawLine){
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(mouseX, mouseY);
                    ctx.strokeStyle = 'white';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();

                    ctx.setLineDash([5, 15]);
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(startX, mouseY);
                    ctx.lineTo(mouseX, mouseY);
                    ctx.strokeStyle = 'white';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();
                    ctx.setLineDash([]);

                    const dx = Math.abs(startX - mouseX);
                    const dy = Math.abs(startY - mouseY);
                    $('#horizontal_px').text(parseInt(dx));
                    $('#vertical_px').text(parseInt(dy));
                    $('#diagonal_px').text(parseInt(Math.sqrt(dx * dx + dy * dy)));

                    if (dx > 25) {
                        ctx.fillStyle = '#FF5F15';
                        ctx.font = 'bold 1.4vh Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(parseInt(dx).toString(), (startX + mouseX) / 2, mouseY - 12);
                    }
                    if (dy > 25) {
                        ctx.fillStyle = '#FF5F15';
                        ctx.font = 'bold 1.4vh Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(parseInt(dy).toString(), startX - 12, (startY + mouseY) / 2);
                    }
                    if (dx > 25 && dy > 25) {
                        ctx.fillStyle = '#FF5F15';
                        ctx.font = 'bold 1.4vh Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(parseInt(Math.sqrt(dx * dx + dy * dy)).toString(), (startX + mouseX) / 2 + 12, (startY + mouseY) / 2 + 12);
                    }
                }

                // Draw Ramp Points
                if (ramp_points){
                    // The X should be layered on top of any wireframe drawings
                    ramp_points.forEach(function(point) {
                        if (point['x'] > 0 && point['y'] > 0){
                            // draw X at each point
                            ctx.fillStyle = '#EE4B2B';
                            ctx.font = 'bold 14px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('X', canvas.width - point['x'], point['y']);
                        }
                    });
                }

                let pill_data = []
                let pill_id = 0
                // Loop through every pill object in filtered lines
                filteredLines.forEach(function(line, index) {
                    // Get the X and Y values for the top left and bottom right points of the drawn boxes
                    const matches = line.match(/min<(\d+),(\d+)>, max<(\d+),(\d+)>/);

                    // Get other pill data from pill object
                    let extractedData = {};
                    $(line.match(/\b\w+=-?\d+(\.\d+)?/g)).each(function() {
                        let match = this.split('=');
                        let key = match[0];
                        extractedData[key] = parseFloat(match[1]);
                    });
                    extractedData['pill_id'] = pill_id;

                    if (matches && matches.length > 0) {
                        const minX = parseInt(matches[1]);
                        const minY = parseInt(matches[2]);
                        const maxX = parseInt(matches[3]);
                        const maxY = parseInt(matches[4]);

                        if (legacy_data.length === 0){
                            if (extractedData['armed'] === 0){
                                ctx.strokeStyle = '#66FF00';
                            } else {
                                ctx.strokeStyle = '#E10600';
                            }
                            ctx.lineWidth = 4;
                            ctx.beginPath();
                            ctx.rect(canvas.width - minY - (maxY - minY), minX, maxY - minY, maxX - minX);
                            ctx.stroke();

                            if (index === 0) {
                                $('#ai_pill_length').text(maxX - minX);
                                $('#ai_pill_width').text(maxY - minY);
                            }
                        }

                        const centerX = (canvas.width - minY - (maxY - minY)) + (maxY - minY) / 2;
                        const centerY = minX + (maxX - minX) / 2;

                        extractedData['CG'] = maxX - (maxX-minX)/2;
                        pill_data.push(extractedData);

                        if (legacy_data.length === 0){
                            // draw pill id into the middle of the box
                            if (extractedData['armed'] === 0){
                                ctx.fillStyle = '#66FF00';
                            } else {
                                ctx.fillStyle = '#E10600';
                            }
                            ctx.font = '24px Arial';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText(pill_id.toString(), centerX, centerY)
                        }
                    }
                    pill_id++
                })
                if (filteredLines.length === 0) {
                    $('#ai_pill_length').text('0');
                    $('#ai_pill_width').text('0');
                }

                imageVisible = false;
                displayPillData(pill_data, frame_number)
                generateDropTable(frame_number)
                resolve()
            }
        });
    }


    //TODO put check status stuff here to remove it from generate annotations


    // reset global variables to a known state after jumping to frame/location
    function reset_seek(seek_frame) {
        if (seek_frame) {
            seek_frame = false;
            decrementFrame = false;
            incrementFrame = false;
            if (jumpFrame) {
                jumpFrame = false;
                jumpFrameId = '';
            }
            isPaused = true;
            jumpFirst = false;
            jumpLast = false;
            jump1SecForward = false;
            jump1SecBackward = false;
            jumpNextDrop = false;
            jumpPrevDrop = false;
            clearLine = false;
            graphPanel = false;
        }
        return seek_frame;
    }

    function update_chart(chart, time_series, frame_number){
            chart.data.datasets[0].data = time_series.slice(frame_number-1, frame_number+299)
            chart.data.labels = Array(300).fill('');
            chart.update('none')
    }

    async function generate_annotations(run_data) {
        const files = '';
        let seekFrame = false;
        let reg_mark = [];
        let zone_data = {};
        const header = run_data[0];
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // when a chart is on the screen when creating its aspect could sometimes get messed up
        // hide them momentary while they are being created
        $('#ramp_point_column').hide();
        $('#pill_info_column').hide();

        let vibChart = generate_chart('vibRate', 'Vib Rate');
        let angleChart = generate_chart('rampAngle', 'Ramp Angle');

        let back_bottom = generate_chart('back_bottom', 'Back Left');
        let back_top = generate_chart('back_top', 'Back Right');
        let ramp_chart_2 = generate_chart('rampAngle2', 'Ramp Angle');

        let bump_1 = generate_chart('bump_1', 'Back Right Bump');
        let bump_2 = generate_chart('bump_2', 'Front Right Bump');
        let bump_3 = generate_chart('bump_3', 'Left Bump');

        let lip_bottom_left = generate_chart('lip_bottom_left', 'Bottom Left');
        let lip_top_left = generate_chart('lip_top_left', 'Bottom Right');
        let vib_chart_2 = generate_chart('vibRate2', 'Vib Rate');

        $('#pill_info_column').show();

        // parse information from the header to be rendered on every frame
        let regex = /\+RegMarks: R1: (\d+), C1: (\d+), R2: (\d+), C2: (\d+)/;
        let matches = header.match(regex);
        // it is possible for R1 and R2 to be swapped, if X coord is not left point, right point then swap them
        if (matches[1] > matches[3]){
            const place_holder = matches[1];
            const place_holder2 = matches[2];
            matches[1] = matches[3];
            matches[2] = matches[4];
            matches[3] = place_holder;
            matches[4] = place_holder2;
        }
        if (matches) {
            // 240 is the pixel offset on each side of the 768 pixel image,
            reg_mark = [-240+parseInt(matches[1]), parseInt(matches[2]), parseInt(matches[3])+(-240+parseInt(matches[1])), parseInt(matches[4])]
        }

        // parse information from the header to be rendered on every frame
        regex = /Angle: (\d+), Zone: (\d+), backCol: (\d+), frontCol: (\d+), length: (\d+)/gm;
        matches = header.match(regex);

        if (matches) {
            for (let match of matches){
                let angle = match.match(/Angle:\s*(\d+)/)[1];
                let zone = match.match(/Zone:\s*(\d+)/)[1];
                let frontCol = match.match(/frontCol:\s*(\d+)/)[1];
                if (angle.toString() in zone_data){
                    zone_data[angle.toString()][zone] = frontCol;
                } else {
                    zone_data[angle.toString()] = Array(4);
                    zone_data[angle.toString()][zone] = frontCol;
                }
            }
        }

        // check if ramp points exist, and if so create filler points for if they are missing for frame(s)
        for (let i = 0; i < 16; i++) {
            filler_ramp_points[i] = {0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: []};
        }
        for (let i = 0; i < rampPoints.length; i++) {
            const angle = rampAngle.slice(300)[i];
            for (let j = 0; j < 7; j++){
                if (rampPoints[i][j]['x'] > 0 && rampPoints[i][j]['y'] > 0){
                    filler_ramp_points[angle][j].push(rampPoints[i][j]);
                }
            }
        }
        for (let i = 0; i < 16; i++) {
            for (let j = 0; j < 7; j++){
                let sumX = 0;
                let sumY = 0;
                $.each(filler_ramp_points[i][j], function(index, point) {
                    sumX += point['x'];
                    sumY += point['y'];
                });
                filler_ramp_points[i][j] = {'x': Math.round(sumX/filler_ramp_points[i][j].length), 'y': Math.round(sumY/filler_ramp_points[i][j].length)};
            }
        }

        // handle info about dispense
        document.getElementById("canister_id").innerHTML = header.split('\n')[0].match(/CanisterBarcode:\s+'([^']+)'/)[1];
        document.getElementById("fill_time").innerHTML = header.split('\n')[0].match(/Time:\s+'([^']+)'/)[1];
        document.getElementById("cabinet_loc").innerHTML = header.split('\n')[0].match(/CabinetLocation:\s+'([^']+)'/)[1];
        document.getElementById("pill_req_qty").innerHTML = header.split('\n')[0].match(/Requested Quantity:\s+(\d+)/)[1];

        // gets pill sig infox
        let pill_sig = header.split('\n').filter(function(line) {
            return line.trim().startsWith('+Pill Signature:');
        })[0];

        document.getElementById("pill_width").innerHTML = pill_sig.match(/Width = (\d+)/)[1];
        document.getElementById("pill_length").innerHTML = pill_sig.match(/Length = (\d+)/)[1];
        document.getElementById("pill_area").innerHTML = pill_sig.match(/Area = (\d+)/)[1];

        let pill_sig2 = header.split('\n').filter(function(line) {
            return line.trim().startsWith('minBulk: ');
        })[0];

        if (pill_sig2.match(/bVibBlister: (\d+)/)[1] === '1'){
            document.getElementById("vib_blist").innerHTML = 'True';
        } else {
            document.getElementById("vib_blist").innerHTML = 'False';
        }

        let pill_sig3 = header.split('\n').filter(function(line) {
            return line.trim().startsWith('EOC Offset: ');
        })[0];

        if (pill_sig3.match(/EOC Offset: (\d+)/)[1] !== '0'){
            document.getElementById("eoc_offset").innerHTML = pill_sig3.match(/EOC Offset: (\d+)/)[1];
            $('#eoc_offset').parent().show();
        } else {
            document.getElementById("vib_blist").innerHTML = 'False';
            $('#eoc_offset').parent().hide();
        }

        // go through every frame and generate blank frames for it.
        for (let i = 1; i < run_data.length - 1; i++) {
            if (reset) {
                break;
            }
            //pause is halted to render a new frame, then re-enabled down below
            //seekframe denotes that once a new frame is rendered, it is to pause execution
            //the flag is needed due to the asynchronous nature of event handling occurring during the middle of frame execution
            //seekFrame ensures that no disruption will occur until the next frame occurs
            if (((!lineVisible && perpendicularLine) || (lineVisible && !perpendicularLine)) && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }

            if (graphPanel && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }

            // TODO replace with larger images global variable logic
            // if (((!imageVisible && showImage) || (imageVisible && !showImage)) && isPaused){
            //     const has_image = files.find(image => {
            //         const fileNameParts = image.fileName.split("_");
            //         const number = parseInt(fileNameParts[1].split(".")[0]);
            //         return number === i-1;
            //     });
            //     if (has_image || (imageVisible && !showImage)){
            //         seekFrame = true;
            //         isPaused = false;
            //         i -= 1;
            //     }
            // }

            if (drawing && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }
            if (clearLine && isPaused) {
                seekFrame = true;
                isPaused = false;
                i -= 1;
            }
            if (decrementFrame) {
                seekFrame = true;
                isPaused = false;
                i -= 2
            }
            if (incrementFrame) {
                seekFrame = true;
                isPaused = false;
            }
            if (jumpFrame) {
                seekFrame = true;
                isPaused = false;
                if (parseInt(jumpFrameId) > run_data.length) {
                    i = run_data.length - 3;
                } else {
                    i = parseInt(jumpFrameId);
                }
            }
            if (jumpFirst) {
                i = 1;
                isPaused = false;
                seekFrame = true;
            }
            if (jumpLast) {
                i = run_data.length - 3;
                isPaused = false;
                seekFrame = true;
            }
            if (reverse) {
                if (i > 1) {
                    i -= 2;
                }
            }
            if (jump1SecForward) {
                i += 29;
                seekFrame = true;
            }
            if (jump1SecBackward) {
                i -= 31;
                seekFrame = true;
            }

            if (jumpNextDrop) {
                let found_flag = false;
                // since pillDrops is implicitly ordered from smallest to largest, we can just iterate over list
                for (let j = 0; j < pillDrops.length; j++) {
                    if (pillDrops[j] > i) {
                        i = pillDrops[j]
                        found_flag = true;
                        break;
                    }
                }
                if (!found_flag) {
                    i--
                }
                isPaused = false;
                seekFrame = true;
            }
            if (jumpPrevDrop) {
                let found_flag = false;
                // since pillDrops is implicitly ordered from smallest to largest, we can just iterate over list in reverse
                for (let j = pillDrops.length; j >= 0; j--) {
                    if (pillDrops[j] < i - 1) {
                        i = pillDrops[j];
                        found_flag = true;
                        break;
                    }
                }
                if (!found_flag) {
                    i--
                }
                isPaused = false;
                seekFrame = true;
            }

            // check for end of run is done next to last since other options above could put i in a state to end the for loop
            if (i > run_data.length - 3) {
                i = run_data.length - 2
                isPaused = true;
            }
            // if for whatever reason i gets below 1, set it to one, seekframe of 1, seekframe will also pause
            if (i < 1) {
                i = 1
                seekFrame = true;
            }
            if (isPaused) {
                i--
            } else {
                $('#popupBox').css('display', 'none');
            }

            await new Promise(resolve => {
                if (!isPaused) {
                    setTimeout(() => {
                        document.getElementById("frame_counter").innerHTML = run_data[i].split('\n')[0].match('(\\d+)')[0]

                        let line_2_data = Array.from(run_data[i].split('\n')[1].matchAll('(\\d+)'));
                        document.getElementById("pill_counter").innerHTML = line_2_data[0][0];
                        document.getElementById("drop_counter").innerHTML = line_2_data[1][0];

                        let angle = run_data[i].split('\n')[2].match(/R(\d+)/)[1];
                        let vib = run_data[i].split('\n')[2].match(/V(\d+)/)[1];
                        document.getElementById("ramp_angle").innerHTML = run_data[i].split('\n')[2].match('(R\\d+)')[0];
                        document.getElementById("vib_rate").innerHTML = run_data[i].split('\n')[2].match('(V\\d+)')[0];

                        let line_3_data = Array.from(run_data[i].split('\n')[3].matchAll('(\\d+)'));
                        document.getElementById("blister_eta").innerHTML = line_3_data[8][0];
                        document.getElementById("pill_drop").innerHTML = line_3_data[2][0];
                        document.getElementById("fill_error").innerHTML = line_3_data[3][0];
                        document.getElementById("drop_from_bulk").innerHTML = line_3_data[4][0] + '-' + line_3_data[5][0];
                        document.getElementById("next_ramp_angle").innerHTML = 'R' + line_3_data[6][0];
                        document.getElementById("next_ramp_vib").innerHTML = 'V' + line_3_data[7][0];

                        document.getElementById("amplitude").innerHTML = vibAmplitude[i+299];

                        let lines = run_data[i].split('\n');
                        let filteredLines = $(lines).filter(function (index, line) {
                            return line.startsWith("+Pill Object");
                        }).get();

                        // legacy only data

                        let legacy_data = [];
                        let legacy_pill_objects = run_data[i].split(/(?=\+Object:\s+\d+(?!\s*,))/);
                        if (legacy_pill_objects.length > 1) {
                            $.each(legacy_pill_objects.slice(1), function(index, pill){
                                let regex = /\+LineCount: (\d+), PixelCount: (\d+)/;
                                let matches = pill.match(regex);
                                let pill_data = [];
                                if (matches){
                                    pill_data = [matches[1], matches[2]];
                                }

                                regex = /\+Max:  col = (\d+), row = (\d+)/;
                                matches = pill.match(regex);
                                let max = [];
                                if (matches){
                                    max = [matches[1], matches[2]];
                                }

                                regex = /\+Min:  col = (\d+), row = (\d+)/;
                                matches = pill.match(regex);
                                let min = [];
                                if (matches){
                                    min = [matches[1], matches[2]];
                                }

                                regex = /\+MinMaxCoG:  col = (\d+), row = (\d+)/;
                                matches = pill.match(regex);
                                let cg = [];
                                if (matches){
                                    cg = [matches[1], matches[2]];
                                }
                                let whiteLines = $(pill.split('\n')).filter(function (index, line){
                                    return /^\+\d+\./.test(line);
                                }).get();

                                regex = /\+Object: (\d+), Zone: (\d+), State: (\d+), NumPills: (\d+)/;
                                matches = pill.match(regex);
                                let id = '';
                                let state = [];
                                if (matches){
                                    id = 'i' + matches[1] + '-z' + matches[2]
                                    state = [matches[1], matches[2], matches[3], matches[4]]
                                }
                                legacy_data.push({'whiteLines': whiteLines, 'pill_data': pill_data, 'max': max, 'min': min, 'cg': cg, 'id': id, 'state': state})
                            })
                        }
                        legacy_pill_data = legacy_data

                        if (legacy_data.length > 0) {
                            $('#ai_pill_length').parent().hide();
                            $('#ai_pill_width').parent().hide();
                        }

                        displayImage(i, filteredLines, reg_mark, zone_data, angle, vib, legacy_data)
                        // reset seek state
                        seekFrame = reset_seek(seekFrame);
                        if ($('#ramp_point_column').css('display') === 'none') {
                            update_chart(vibChart, vibRate, i);
                            update_chart(angleChart, rampAngle, i);
                        } else {
                            update_chart(vib_chart_2, vibRate, i);
                            update_chart(ramp_chart_2, rampAngle, i);
                            update_chart(back_bottom, back_bottom_time_series['x'], i);
                            update_chart(back_top, back_top_time_series['x'], i);
                            update_chart(bump_1, bump_1_time_series['x'], i);
                            update_chart(bump_2, bump_2_time_series['x'], i);
                            update_chart(bump_3, bump_3_time_series['x'], i);
                            update_chart(lip_bottom_left, lip_bottom_left_time_series['x'], i);
                            update_chart(lip_top_left, lip_top_left_time_series['x'], i);
                        }
                        resolve();
                    }, 1000 / 30);
                } else {
                    const pausePromise = new Promise(resolve => {
                        if (!isPaused) {
                            resolve()
                        }
                    })
                    // TODO see if elapsed time should be used rather than flat 1000/30 to account for calculation time?
                    Promise.race([pausePromise, new Promise(resolve => setTimeout(resolve, Infinity))]).then(resolve);
                }
            })
        }
        // ctx.remove()
        vibChart.destroy();
        angleChart.destroy();
        back_bottom.destroy();
        back_top.destroy();
        ramp_chart_2.destroy();
        bump_1.destroy();
        bump_2.destroy();
        bump_3.destroy();
        lip_bottom_left.destroy();
        lip_top_left.destroy();
        vib_chart_2.destroy();
        reset_run_defaults();
    }

    function extractTar(tarData) {
        // Loop through the tar data until we've reached the end
        let currentPosition = 0;
        const files = [];
        const decoder = new TextDecoder()
        while (currentPosition < tarData.length) {
            // Get the header for the current file
            const header = tarData.slice(currentPosition, currentPosition + 512);

            // Get the file name from the header
            const fileName = decoder.decode(header.slice(0, 100)).trim()

            // If the file name is empty, we've reached the end of the tar file
            if (!fileName) {
                break;
            }

            // Get the file size from the header
            const fileSize = parseInt(decoder.decode(header.slice(124, 136)).trim(), 8);

            // Get the file data from the tar data
            const fileData = tarData.slice(
                currentPosition + 512,
                currentPosition + 512 + Math.ceil(fileSize / 512) * 512
            );


            // Add the file data to the files array
            files.push({ fileName, fileData });

            // Move the current position to the next file
            currentPosition += 512 + Math.ceil(fileSize / 512) * 512;
        }

        // for some reason extra item gets added to files?
        files.pop()
        // Return the extracted files
        return files;
    }

    //jquery ajax CANNOT be used here with our current version.  Jquery ajax return of binary data messes the data up
    function get_workorder_task_images(wo_task_id, image_list){
        return new Promise((resolve, reject) => {
            let files = ''
            const url = '/support/animator/tar_images?wo_task_id=' + wo_task_id
            const xhr = new XMLHttpRequest();
            xhr.open('POST', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    const blob = this.response;
                    const reader = new FileReader();
                    reader.onload = function () {
                        const arrayBuffer = new Uint8Array(reader.result);
                        files = extractTar(arrayBuffer);
                        for (const key in files) {
                            let image = files[key];
                            // prevent images from different run being loaded in the event of reset occurring
                            if (wo_task_id === $("#workorder_task").val()) {
                                images[image.fileName.match(/\d+/).toString()] = image.fileData;
                            }
                        }
                        resolve();
                    };
                    reader.readAsArrayBuffer(blob);
                }
            };
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.setRequestHeader('X-CSRFToken', '{{csrf_token}}');
            // prevent images from different run being loaded in the event of reset occurring
            if (wo_task_id === $("#workorder_task").val()) {
                xhr.send(JSON.stringify({'image_list': image_list}));
            } else {
                resolve();
            }
        })
    }

    // Async shenanigans to limit the number of connections to 4 at a time
    // first call will retrieve 5 images, every subsequent call 15 images.
    function download_images(wo_task_id){
        // splits the list of images into a list of sequences of 15 items
        const entries = Object.keys(images);
        const splitDictionaries = [entries.slice(0, 5)];
        const threads = 4;

        for (let i = 5; i < entries.length; i += 15) {
            const splitArray = entries.slice(i, i + 15);
            splitDictionaries.push(splitArray);
        }

        function processRequests() {
            let currentIndex = 0;

            // TODO determine if I can stop this process upon reset?
            function sendNextRequest(){
                if (currentIndex >= splitDictionaries.length) {
                    return Promise.resolve();
                }

                const currentData = splitDictionaries[currentIndex];
                currentIndex++;
                if (wo_task_id !== $("#workorder_task").val()) {
                    return;
                }

                return get_workorder_task_images(wo_task_id, currentData).then(sendNextRequest)
            }

            const promises = [];
            for (let i = 0; i < threads; i++){
                promises.push(sendNextRequest())
            }

            return Promise.all(promises);
        }
        processRequests();
    }

    // generate list of expected images into global variable
    function generate_image_list(image_list) {
        $.each(image_list.split('\n'), function(index, image) {
            image.split(".raw")[0].match(/\d+$/);
            let key = image.split(".raw")[0].match(/\d+$/).toString();
            images[key] = '';
        });
    }

    function get_image_list(wo_task_id) {
        return new Promise((resolve, reject) => {
            const url = '/support/animator/image_list?wo_task_id=' + wo_task_id
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'text';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    generate_image_list(xhr.response)


                    download_images(wo_task_id)
                }
            };
            xhr.setRequestHeader('Content-type', 'text/plain');
            xhr.send();
        });
    }

    //TODO: loading spinny disc when waiting?
    function get_run_data() {
        const wo_task_id = $("#workorder_task").val();
        const obj = $("#fill_list").find("option[value='" + wo_task_id + "']");
        if(obj != null && obj.length > 0) {
            $('#wo_task_id_alert').hide()
            $("#get_images").hide();
            const url = '/support/animator/run_data_cap?wo_task_id=' + wo_task_id
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'text';
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // TODO remove debug run_data_cap
                    reset = false;
                    run_data_cap = xhr.response;
                    $("#get_images").hide();
                    $("#reset_run").show();
                    $("#workorder_task").prop("disabled", true);
                    let run_data = xhr.response.split('+Frame: ');
                    get_meta_data(run_data);
                    get_ramp_points(run_data);
                    calculate_vib_amplitude();
                    generate_annotations(run_data);
                }
            };
            xhr.setRequestHeader('Content-type', 'text/plain');
            xhr.send();
            get_image_list(wo_task_id);
        } else {
            $("#get_images").show();
            $('#wo_task_id_alert').show()
            if (wo_task_id.length > 0){
                $('#wo_task_id_missing').text(wo_task_id + ' is not a valid workorder to be viewed')
            } else {
                $('#wo_task_id_missing').text('A workorder must be selected to view')
            }
        }
    }



</script>

<style>
    .current_drop {
        text-align: center;
        vertical-align: middle;
        position: relative;
        width: 2rem;
        height: 2rem;
    }

    .current_drop:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        border-top: 1rem solid transparent; /* Adjust the height of the triangle as needed */
        border-left: 2rem solid orange; /* Adjust the width of the triangle as needed */
        border-bottom: 1rem solid transparent; /* Adjust the width of the triangle as needed */
    }

    #drop_table_frames tr {
        height: 2rem;
    }

    #drop_table_frames td {
        text-align: center;
        font-size: 1.5rem;
    }

    .past_drop {
        background-color: darkgrey;
    }

    .frame_info{
        display: flex;
        font-size: 4vh;
        margin-bottom: 2vh;
        margin-top: 2vh;
    }

    .frame_info_small{
        display: flex;
        font-size: 2vh;
        margin-bottom: .5vh;
        margin-top: .5vh;
    }

    .keyboard_shortcuts{

        display: flex;
        /*display: none;*/
        font-size: 1.3vh;
        margin-bottom: .7vh;
        margin-top: .7vh;
    }

    .popup-box {
        display: none;
        position: absolute;
        width: 12.5vw;
        height: 24vh;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    #misc_info td {
        width: 25%;
    }
</style>
{% endblock %}

{% block content %}
<div class="alert alert-error" id="wo_task_id_alert" style="display: none;">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <p id="wo_task_id_missing"></p>
</div>

<table style="width: 100%; height: 100%">
    <tbody style="height: 100%;">
        <tr>
            <td id="left_column" style="width: 20%; height: 100%; vertical-align: top;">
                <table>
                    <label for="workorder_task" style="font-size: 2vh;">Workorder task id to view in animator: </label>
                    <input list="fill_list" name="workorder_task" id="workorder_task" autocomplete="off">
                    <button class="btn" type="button" id="get_images" name="get_images" onclick="get_run_data()">Submit</button>
                    <button style="display: None;" class="btn" type="button" id="reset_run" name="reset_run" onclick="reset_run()">Reset</button>

                    <span class="frame_info"><p>Frame:&nbsp;</p><p id="frame_counter">0</p></span>
                    <span class="frame_info_small"><p>Canister:&nbsp;</p><p id="canister_id"></p></span>
                    <span class="frame_info_small"><p>Time of Fill:&nbsp;</p><p id="fill_time"></p></span>
                    <span class="frame_info_small"><p>Requested Quantity:&nbsp;</p><p id="pill_req_qty"></p></span>
                    <span class="frame_info_small"><p>Cabinet Location:&nbsp;</p><p id="cabinet_loc"></p></span>
                    <span class="frame_info_small"><p>Pill Count:&nbsp;</p><p id="pill_counter">0</p></span>

                    <p id="images_hidden" style="display: none; font-weight: bold; font-size: 2vh;">Images not shown</p>
                    <p id="images_visible" style="font-weight: bold; font-size: 2vh;">Images shown</p>
                    <p id="in_reverse" style="display: none; font-weight: bold; font-size: 2vh;">Playback Reversed</p>

<!--                        <span class="keyboard_shortcuts"><p>Keyboard Shortcuts</p></span>-->
                    <span class="keyboard_shortcuts"><p>Play/Pause: Spacebar</p></span>
                    <span class="keyboard_shortcuts"><p>Advance One Frame: S/down arrow</p></span>
                    <span class="keyboard_shortcuts"><p>Rewind One Frame: W/Up arrow</p></span>
                    <span class="keyboard_shortcuts"><p>Next Pill Drop: D/right arrow</p></span>
                    <span class="keyboard_shortcuts"><p>Previous Pill Drop: A/left arrow</p></span>
                    <span class="keyboard_shortcuts"><p>Reverse: R</p></span>
                    <span class="keyboard_shortcuts"><p>Jump to Specific Frame: Keypad + Enter</p></span>
                    <span class="keyboard_shortcuts"><p>Go to first Frame: Home</p></span>
                    <span class="keyboard_shortcuts"><p>Go to Last frame: End</p></span>
                    <span class="keyboard_shortcuts"><p>Jump forward 1 second: PageUp</p></span>
                    <span class="keyboard_shortcuts"><p>Jump back 1 second: PageDown</p></span>
                    <span class="keyboard_shortcuts"><p>Show Perpendicular line: P</p></span>
                    <span class="keyboard_shortcuts"><p>Ruler: click and drag on image</p></span>
                    <span class="keyboard_shortcuts"><p>clear ruler from screen: BackSpace</p></span>
                    <span class="keyboard_shortcuts"><p>Toggle Images: I</p></span>
                </table>
            </td>


            <td id="canvas_column" style="width: 15%; height: 100%;">
                <canvas id="canvas" width="288" height="1024" style="border: 3px solid blue;"></canvas>
            </td>


            <td id="pill_info_column" style="height: 100%;">
                <table style="width: 100%; height: 100%;">
                    <tr id="pill_info" style="height: 40%; width: 100%;">
                        <td style="width: 100%; vertical-align: top;" colspan="4">
                            <table style="width: 100%; font-size: 1.8vh">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Center of Gravity (CG)</th>
                                        <th>CG Delta</th>
                                        <th>Velocity</th>
                                        <th>Acceleration</th>
                                        <th>ETA</th>
                                        <th>Frames until Drop</th>
                                        <th>Difference from Actual and Estimated</th>
                                    </tr>
                                </thead>
                                <tbody id="pill_objects" style="text-align: center;">

                                </tbody>
                            </table>
                        </td>
                    </tr>

                    <tr id="misc_info" style="height: 30%; width: 100%;">
                        <td>
                            <table class="frame_info_small">
                                <tr>
                                    <td>
                                        Length:&nbsp;
                                    </td>
                                    <td style="width: 15%">
                                        <p id="pill_length"></p>
                                    </td>
                                    <td>
                                        <p>Width:&nbsp;
                                    </td>
                                    <td style="width: 15%">
                                        <p id="pill_width"></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        AI&nbsp;Length:&nbsp;
                                    </td>
                                    <td style="width: 15%">
                                        <p id="ai_pill_length"></p>
                                    </td>
                                    <td>
                                        AI&nbsp;Width:&nbsp;
                                    </td>
                                    <td style="width: 15%">
                                        <p id="ai_pill_width"></p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Area:&nbsp;
                                    </td>
                                    <td>
                                        <p id="pill_area"></p>
                                    </td>
                                </tr>
                            </table>
<!--                            <span class="frame_info_small"><p></p></span>-->
                        </td>
                        <td>
                            <span class="frame_info_small"><p>Ramp Angle:&nbsp;</p><p id="ramp_angle">0</p></span>
                            <span class="frame_info_small"><p>Vib Rate:&nbsp;</p><p id="vib_rate">0</p></span>
                            <span class="frame_info_small"><p>Next Ramp Angle:&nbsp;</p><p id="next_ramp_angle">0</p></span>
                            <span class="frame_info_small"><p>Next Ramp Vib:&nbsp;</p><p id="next_ramp_vib">0</p></span>
                        </td>
                        <td>
                            <span class="frame_info_small"><p>Pill Drop:&nbsp;</p><p id="pill_drop">0</p></span>
                            <span class="frame_info_small"><p>Blister ETA:&nbsp;</p><p id="blister_eta">0</p></span>
                            <span class="frame_info_small" style="display: none;"><p>EOC Offset:&nbsp;</p><p id="eoc_offset">0</p></span>
                            <span class="frame_info_small"><p>Vib Blist:&nbsp;</p><p id="vib_blist">0</p></span>
                        </td>
                        <td>
                            <span class="frame_info_small"><p>Pills Dropped:&nbsp;</p><p id="drop_counter">0</p></span>
                            <span class="frame_info_small"><p>Fill Error:&nbsp;</p><p id="fill_error">0</p></span>
                            <span class="frame_info_small"><p>Bulk Req:&nbsp;</p><p id="drop_from_bulk">0</p></span>
                            <span class="frame_info_small"><p>Amplitude:&nbsp;</p><p id="amplitude">0</p></span>
                        </td>
                    </tr>

                    <tr id="graph_info" style="height: 30%;">
                        <td style="width: 50%; height: 100%;" colspan="2">
                            <canvas id="rampAngle" style="height: 100%; width: 100%; border: 3px solid green;"></canvas>
                        </td>
                        <td style="width: 50%; height: 100%;" colspan="2">
                            <canvas id="vibRate" style="height: 100%; width: 100%; border: 3px solid red;"></canvas>
                        </td>
                    </tr>
                </table>
            </td>

            <td id="ramp_point_column" style="height: 100%; display: none;">
                <table style="width: 100%; height: 100%;">
                    <tr>
                        <td><canvas id="back_bottom" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                        <td><canvas id="back_top" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                        <td><canvas id="rampAngle2" style="height: 100%; width: 100%; border: 3px solid green;"></canvas></td>
                    </tr>
                    <tr>
                        <td><canvas id="bump_1" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                        <td><canvas id="bump_3" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                        <td><canvas id="bump_2" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                    </tr>
                    <tr>
                        <td><canvas id="lip_bottom_left" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                        <td><canvas id="lip_top_left" style="height: 100%; width: 100%; border: 3px solid yellow;"></canvas></td>
                        <td><canvas id="vibRate2" style="height: 100%; width: 100%; border: 3px solid red;"></canvas></td>
                    </tr>
                </table>
            </td>

            <td id="pill_drop_column" style="width: 10%; vertical-align: top;">
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Frame of Drop</th>
                            <th>Frames between drops</th>
                        </tr>
                    </thead>
                    <!--make sure not to send this ID to an SQL server https://xkcd.com/327/-->
                    <!--This is used for calculations of when frame is dropped-->
                    <tbody id="drop_table_frames">
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<datalist id="fill_list">
{% for fill in fill_list %}
    <option value="{{fill}}">
{% endfor %}
</datalist>

<table style="position: absolute; top: 10%; right: 10%;" hidden="true">
    <tr>
        <td>Horizontal Distance pixels: </td>
        <td id="horizontal_px">0</td>
    </tr>
    <tr>
        <td>Vertical Distance pixels: </td>
        <td id="vertical_px">0</td>
    </tr>
    <tr>
        <td>Diagonal Distance pixels: </td>
        <td id="diagonal_px">0</td>
    </tr>
</table>

<div class="popup-box" id="popupBox">
        <span class="frame_info_small"><p>Object ID:&nbsp;</p><p id="legacy_object_id">0</p></span>
        <span class="frame_info_small"><p>Length:&nbsp;</p><p id="legacy_pill_length">0</p></span>
        <span class="frame_info_small"><p>Width:&nbsp;</p><p id="legacy_pill_width">0</p></span>
        <span class="frame_info_small"><p>Area:&nbsp;</p><p id="legacy_pill_area">0</p></span>
        <span class="frame_info_small"><p>Pixel Count:&nbsp;</p><p id="legacy_pixel_count">0</p></span>
        <span class="frame_info_small"><p>White Coverage:&nbsp;</p><p id="legacy_white_cover">0</p></span>
        <span class="frame_info_small"><p>State:&nbsp;</p><p id="legacy_pill_state">0</p></span>
        <span class="frame_info_small"><p>CG-Delta:&nbsp;</p><p id="legacy_cg_delta">0</p></span>
</div>



{% endblock %}