index.html

<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=0.1">
    <link rel="stylesheet" href="main.css">
</head>

<body style="margin: 0px; background: #0e0e0e; background: white;">
    <canvas id="status-indicator"></canvas>
    <button id="close-button">x</button>
    <div class="c-camera">
        <canvas id="camera-canvas"></canvas>
    </div>
</body>

<!-- JavaScript scripts -->
<script>
    /* Electron setups */
    const isReachable = require('is-reachable');
    let ipc = require("electron").ipcRenderer;

    function init() {
        // Quit with the x button
        document.getElementById("close-button").addEventListener("click", function (e) {
            console.log("close");
            ipc.send("win.close");
        }); 
    };

    // document.onreadystatechange = function () {
    //     if (document.readyState == "complete") {
    //         init(); 
    //     }
    // };
    init();
</script>

<script>
    /* Camera drawing setups */

    /* Change this number to your team number! */
    const TEAM_NUMBER = "1720";

    // Pad the team number for the IP address
    let team_num = "0".repeat(4-TEAM_NUMBER.length) + TEAM_NUMBER;
    let team_ip = team_num[0] + team_num[1] + "." + team_num[2] + team_num[3];

    // The drawing plane
    const cameraCanvas = document.getElementById("camera-canvas");
    let camCtx = cameraCanvas.getContext('2d');
    camCtx.canvas.width = window.innerWidth;
    camCtx.canvas.height = window.innerHeight;

    // Connection status. Red if not connected, green if connected.
    const statusIndicator = document.getElementById("status-indicator");
    let stCtx = statusIndicator.getContext('2d');
    stCtx.canvas.width = 25;
    stCtx.canvas.height = 400;

    stCtx.fillStyle = "rgb(255, 0, 0)";
    stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);

    let { width, height } = cameraCanvas;
    const lineThickness = 4.0;
    const lineThicknessHalf =  lineThickness / 2.0;

    let midPoint = {
        width: width / 2.0,
        height: height / 2.0,
    };

    let img = new Image(); // This is where the camera feed goes

    // Used for resizing and centering the image
    let scale = 1;
    let imageX = 0;
    let imageY = 0;

    let source = "";

    let disconnected = false;

    // Connect to the camera
    (async () => {
        let sourceMain = "http://10." + team_ip + ".2:1181"; // IP is team number dependent
        let sourceUSB = "http://172.22.11.2:1181";           // Always the same
        
        // Wait until first contact
        while (true) {
            if (await isReachable(sourceMain)) {
                source = sourceMain + "/?action=stream";
                break;
            } else if (await isReachable(sourceUSB)) {
                source = sourceUSB + "/?action=stream";
                break;
            }
            console.log("No camera sources available!");
        }
        setup(source);

        // Green for go!
        stCtx.fillStyle = "rgb(0, 255, 0)";
        stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);
    })();

    function setup (source) {
        console.log("source: ", source);

        img.src = source;
        img.decode().then(() => { updateScale(); })

        window.addEventListener('resize', updateScale);
        window.setInterval("refreshCanvas()", 4);
    }

    function refreshCanvas () {
        camCtx.globalCompositeOperation = "source-over";
        camCtx.scale(scale, scale);

        camCtx.fillStyle = "rgba(255, 255, 255, 1)";
        camCtx.fillRect(0, 0, camCtx.canvas.width, camCtx.canvas.height);

        try {
            camCtx.drawImage(img, imageX, imageY);

            if (disconnected) {
                stCtx.fillStyle = "rgb(255, 255, 0)";
                stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);

                disconnected = false;
            }
        } catch {
            img.src = source;
            console.log(source);
            console.log("stream unavailable");

            disconnected = true;            

            stCtx.fillStyle = "rgb(255, 0, 255)";
            stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);
        }

        camCtx.globalCompositeOperation = "difference";
        camCtx.scale(1/scale, 1/scale);

        camCtx.fillStyle = "rgba(127, 127, 127, 1)";
        camCtx.fillRect(midPoint.width - lineThicknessHalf, 0.0, lineThickness, height);
        camCtx.fillRect(0.0, midPoint.height - lineThicknessHalf, width, lineThickness);
        camCtx.fillRect(midPoint.width - lineThicknessHalf, midPoint.height - lineThicknessHalf, lineThickness, lineThickness);
    };

    // function imageLoad () {

    // }

    function updateScale () {
        camCtx.canvas.width = window.innerWidth;
        camCtx.canvas.height = window.innerHeight;

        width = cameraCanvas.width;
        height = cameraCanvas.height;

        midPoint = {
            width: width / 2.0,
            height: height / 2.0,
        };

        widthScale = camCtx.canvas.width / img.width;
        heightScale = camCtx.canvas.height / img.height;

        scale = widthScale > heightScale ? heightScale : widthScale;

        imageX = 0;
        imageY = 0;

        if (widthScale > heightScale) {
            imageX = camCtx.canvas.width - (img.width * scale);

            imageX /= scale * 2;
        } else {
            imageY = camCtx.canvas.height - (img.height * scale);
            imageY /= scale * 2;
        }
    };
</script>
</html>