Best way call Objects in Canvas, jQuery

[motorhomer]

Hi Guys, I would like some advice on a project I am working on to create a simulation of an electrical schematic which I am creating in canvas.

First I have created objects for components like relays, contacts, user controls and wires. All object shave the relevant information to draw the object when the draw function is called and have a state which when changed will change the colour state on the drawing.

For this part it all works ok and I can then create a click function so when a user clicks on Aux ON/OFF button the relevant relays/contacts and wires will go red to show they are now live.

The problem I have is the size of the schematics will mean the if functions will get pretty complex. The objects are all held in arrays so calling an object to change the state means calling its relevant array number.

Is it possible to call the objects by there name which will then make the IF functions a lot easier to handle. Or is there a better way I should be doing this

I have also got this showing working on a codePen without the back ground image of the schematic as I do not have PRO version of codePen

https://codepen.io/brackstone/pen/OJbbyNv?editors=1010

You can also see it working at the link below. Clicking on the top left blue button will make the circuit change

Brel Scematics

My code example is below

var c_driver_controls;
var c_aux_on_off;
var c_aux;
var driver_controls;
var init_lines = [];
var aux_on_off;
var aux;
var aux_on_off_contact = [];
var aux_on_off_lines = [];
var aux_lines = [];
var aux_relays = [];
var aux_contact = [];
var brakes_wsp_relays = [];
var brakes_vig_relays = [];
var doors_4_relays = [];
var brakes_wsp_contact = [];
var brakes_vig_contact = [];
var doors_4_contact = [];
var brakes_wsp_lines = [];
var brakes_vig_lines = [];
var doors_4_lines = [];
var controls = [];
var textArray = [];
var userPanelControls = [];

$(document).ready(function () {
    c_driver_controls = document.getElementById("driver_controls");
    c_aux_on_off = document.getElementById("aux_on_off");
    c_aux = document.getElementById("aux");
    driver_controls = c_driver_controls.getContext("2d");
    aux_on_off = c_aux_on_off.getContext("2d");
    aux = c_aux.getContext("2d");

    create_elements();
    drawSchematic();

    // Driver Controls //

    c_driver_controls.addEventListener('click', function (event) {
        var x_event = event.pageX;
        var y_event = event.pageY;
        var x = x_event;
        var y = y_event;

        // Driver control loop //

        userPanelControls.forEach(function (element) {
            if (x > element.x && x < (element.x + 20)) {
                if (element.state == 0) {
                    element.fill = 'green';
                    element.state = 1;
                } else {
                    element.fill = 'blue';
                    element.state = 0;
                }
                clearCanvas();
                simulation();
            }
        })
    })

    // Aux on/off Diagram //

    c_aux_on_off.addEventListener('click', function (event) {
        var x = event.pageX;
        var y = event.pageY;
        var realX = x - 6;
        var realY = y - 190;
        console.log(realX, realY);
        clearCanvas();
        drawSchematic();
    })

    // Aux 110V distribution //

    c_aux.addEventListener('click', function (event) {
        var x = event.pageX;
        var y = event.pageY;
        var realX = x - 6;
        var realY = y - 1075;
        console.log(realX, realY);
        clearCanvas();
        drawSchematic();
    })
});

// This function will make parts move when a user has clicked on a control within the user control panel

function simulation() {
    if (userPanelControls[0].state == 1) { // Aux on
        aux_on_off_contact[0].state = 1; // SB-AS
        aux_on_off_lines[0].state = 1 //line 20
        aux_on_off_lines[1].state = 1
        aux_on_off_lines[2].state = 1
        aux_lines[0].state = 1
        aux_relays[0].state = 1
    } else {
        aux_on_off_contact[0].state = 0 // SB-AS
        aux_on_off_lines[0].state = 0 //line 20
        aux_on_off_lines[1].state = 0
        aux_on_off_lines[2].state = 0
        aux_lines[0].state = 0
        aux_relays[0].state = 0
    }
    if (aux_relays[0].state == 1) {
        aux_contact[0].state = 1
        aux_lines[1].state = 1
    } else {
        aux_contact[0].state = 0
        aux_lines[1].state = 0
    }
    drawSchematic();
}

// create object elements //

function create_elements() {
    init_lines[0] = new line('50-0', aux_on_off, 918, 427, 918, 492, 1)
    init_lines[1] = new line('50-1', aux_on_off, 918, 464, 954, 464, 1)
    init_lines[2] = new line('50-2', aux_on_off, 954, 464, 954, 492, 1)
    // aux drawing //
    init_lines[3] = new line('50-0', aux, 763, 461, 763, 565, 1)
    init_lines[4] = new line('50-1', aux, 763, 475, 902, 475, 1)
    init_lines[5] = new line('50-2', aux, 902, 475, 902, 493, 1)

    // ---------- User panel controls ---------- //

    userPanelControls[0] = new objUserPanel('Aux_on/off', 50, 50, driver_controls, 0, 'blue')
    userPanelControls[1] = new objUserPanel('forward', 80, 50, driver_controls, 0, 'blue')

    // ---------- Aux ON/OFF ---------- //

    // Control //

    aux_on_off_contact[0] = new contacts('SB-AS', 924, 493, 924, 515, 918, 493, 918, 515, aux_on_off, 0);

    // Lines //

    aux_on_off_lines[0] = new line('20', aux_on_off, 918, 516, 918, 566, 0)
    aux_on_off_lines[1] = new line('20-1', aux_on_off, 918, 566, 990, 566, 0)
    aux_on_off_lines[2] = new line('20-2', aux_on_off, 990, 566, 990, 427, 0)


    // ---------- Aux ---------- //

    // contact //

    aux_contact[0] = new contacts('R-AS1', 769, 563, 769, 585, 763, 563, 763, 585, aux, 0)

    // Lines //

    aux_lines[0] = new line('20-3', aux, 1128, 461, 1128, 705, 0)
    aux_lines[1] = new line('5011-1', aux, 763, 585, 763, 707, 0)
    // Relays //

    aux_relays[0] = new relay('as1', 1125, 716, aux, 0);
}

// contact object //

function contacts(name, openStartX, openStartY, openEndX, openEndY, closeStartX, closeStartY, closeEndX, closeEndY, drawing, state) {
    this.name = name;
    this.openStartX = openStartX;
    this.openStartY = openStartY;
    this.openEndX = openEndX;
    this.openEndY = openEndY;
    this.closeStartX = closeStartX;
    this.closeStartY = closeStartY;
    this.closeEndX = closeEndX;
    this.closeEndY = closeEndY;
    this.drawing = drawing;
    this.state = state;
    this.draw = function () {
        this.drawing.beginPath();
        if (this.state == 1) {
            fill = 'green'
            this.drawing.moveTo(this.closeStartX, this.closeStartY);
            this.drawing.lineTo(this.closeEndX, this.closeEndY);
        } else {
            fill = 'blue';
            this.drawing.moveTo(this.openStartX, this.openStartY);
            this.drawing.lineTo(this.openEndX, this.openEndY);
        }
        this.drawing.strokeStyle = fill;
        this.drawing.lineWidth = 5;
        this.drawing.stroke();
        this.drawing.closePath();
    }

}

// relay object //

function relay(name, x, y, drawing, state) {
    this.name = name;
    this.x = x;
    this.y = y;
    this.drawing = drawing;
    this.state = state
    this.draw = function () {
        if (this.state == 1) {
            color = 'red'
        } else {
            color = '#A0A0A0'
        }
        this.drawing.beginPath();
        this.drawing.arc(this.x, this.y, 10, 0, Math.PI * 2, true);
        this.drawing.fillStyle = color;
        this.drawing.fill();
        this.drawing.closePath();
    }
}

// User panel objects //

function objUserPanel(name, x, y, drawing, state, fill) {
    this.name = name;
    this.x = x;
    this.y = y
    this.drawing = drawing;
    this.state = state;
    this.fill = fill;
    this.draw = function () {
        this.drawing.beginPath();
        this.drawing.arc(this.x, this.y, 10, 0, Math.PI * 2, true);
        this.drawing.fillStyle = this.fill;
        this.drawing.fill();
        this.drawing.closePath();
    }
}

// Lines Object

function line(name, drawing, x, y, ax, ay, state) {
    this.name = name;
    this.drawing = drawing;
    this.x = x;
    this.y = y;
    this.ax = ax;
    this.ay = ay;
    this.state = state;
    this.draw = function () {
        if (this.state == 1) {
            fill = 'red'
        } else {
            fill = 'black'
        }
        this.drawing.beginPath();
        this.drawing.moveTo(this.x, this.y);
        this.drawing.lineTo(this.ax, this.ay);
        this.drawing.strokeStyle = fill;
        this.drawing.lineWidth = 4;
        this.drawing.stroke();
        this.drawing.closePath();
    }
}

// Clear all canvases before re-drawing //

function clearCanvas() {
    driver_controls.clearRect(0, 0, c_driver_controls.width, c_driver_controls.height);
    aux_on_off.clearRect(0, 0, c_aux_on_off.width, c_aux_on_off.height);
    aux.clearRect(0, 0, c_aux.width, c_aux.height);
}

// Draw the scematic //

function drawSchematic() {
    for (let i = 0; i < init_lines.length; i++) {
        init_lines[i].draw();
    }
    for (let i = 0; i < userPanelControls.length; i++) {
        userPanelControls[i].draw();
    }
    for (let i = 0; i < aux_on_off_contact.length; i++) {
        aux_on_off_contact[i].draw();
        console.log(aux_on_off_contact[i])
    }
    for (let i = 0; i < aux_on_off_lines.length; i++) {
        aux_on_off_lines[i].draw();
    }
    for (let i = 0; i < aux_lines.length; i++) {
        aux_lines[i].draw();
    }
    for (let i = 0; i < aux_relays.length; i++) {
        aux_relays[i].draw();
    }
    for (let i = 0; i < aux_contact.length; i++) {
        aux_contact[i].draw();
    }
}

 

[motorhomer]

worked out a solution. Instead making the objects straight into an array, I created them as a variable and then pushed them into an array.

var contactArray = [];
var relayArray = [];
var SB_AS = new contacts('SB-AS', 924, 493, 924, 515, 918, 493, 918, 515, aux_on_off, 0);
contactsArray.push(SB_AS);
var AS_1 = new relay('AS_1', 1125, 716, aux, 0);
relayArray.push(AS_1);

This allowed me to use names for object control and to assign contacts to relays etc like this

AS_1.state = SB_AS.state