Scanning a multidimensional json_encoded array

Question

Excuse the formatting -- it kept giving me "you have code unformatted" errors in this question. I have a code which consists of a canvas that prints an image. I then track the user's mouse coordinates, and if they match coordinates found in a text file, I want to prompt the user. This is the web-app to supplement a C++ OpenCV program that detects blobs and the coordinates where they exist. The text file is in the following format: label x y.

001 101 305 

is the line for coordinate (101, 305) in blob 001. PHP is reading each line and exploding at spaces just fine.

The text file reads like so:

001 101 303
001 101 304
001 101 305
001 101 306
001 101 307
001 101 308
001 101 309
001 101 310
001 102 301
001 102 302

<script>  // functions to make canvas and place PNG overlay image

    <?php 
        $XYFile = fopen("cpp/textdump/coordinates/imagetesting.txt.txt","r") or die ("file reading error");
        $coordinates = array(); // create coordinates array

        while (!feof($XYFile)) { // while not at last line of file
            $uncatXY = fgets($XYFile); // read one line of file
            $splitXY = explode(" ", $uncatXY); // create new array element when a space is present
            $label = $splitXY[0]; // declare blob label
            $x = $splitXY[1]; // declare x
            $y = $splitXY[2]; // declare y
            array_push($coordinates, $label, $x, $y); 
        } // push into coordinates array

        fclose($XYFile); // close file 
    ?>

    var js_array = <?php echo(json_encode($coordinates)); ?>  // convert PHP array to javascript object notation format
    // requires PHP 5.2 or higher, which I believe to be on the server.  It's certainly on my localhost server.
    console.log(js_array); // dev


    $(document).ready(function() {
        window.onload = function() {
            var c = document.getElementById("solarCanvas");  
            var ctx = c.getContext("2d");
            ctx.fillStyle = "#00FFFF"; // cyan fill
            var img = document.getElementById("testimage");
            img.src = 'cpp/images/PNG/imagetesting.png';   //"cpp/images/" + date + ".png";
            ctx.drawImage(img, 0, 0); 

            c.addEventListener('click', function() { }, false);

            // functions for color & coordinates on mouse movement/clicl
            $('#solarCanvas').mousemove(function(e) {
                var c = document.getElementById("solarCanvas");
                var ctx = c.getContext("2d"); // temp declaration bug fix -- can't find root cause, so redec
                var pos = findPos(this);
                var x = e.pageX - pos.x;
                var y = e.pageY - pos.y;
                var coord = "x=" + x + ", y=" +y;
                var p = ctx.getImageData(x, y, 1, 1).data;
                var hex = ("#" + 000000 + rgbToHex(p[0], p[1], p[2]).slice(-6));
                $('#status').html(coord + "<br>" + hex);
                console.log(x + "," + y + "---" + coord + " at " + hex);
            });

            $('#solarCanvas').click(function(e) {
                var c = document.getElementById("solarCanvas");
                var ctx = c.getContext("2d");
                var pos = findPos(this);
                var xNum = e.pageX - pos.x;
                var yNum = e.pageY - pos.y;
                var xStr = xNum.toString();
                var yStr = yNum.toString();

                for(var i = 0; i < js_array.length; i++) {
                    if(js_array[i] === xStr) {
                        return i;
                        console.log(i);
                        if(i > -1) {
                            alert("yahoo!");
                        } 
                    }
                }

                console.log(js_array);                         
                console.log(xStr);                                 
                console.log(yStr);                                 
            });   
        }
    });

    // old architecutre
    // mixed array_search ( mixed $needle, array $haystack [, bool $strict = false ] );
    // searches haystack for needle
    // pseudocode
    //if ((e.pageX - pos.x) exists in col 2 && (e.pageY-pos.y) is in same row in col 3) {

</script>

I've been through many versions of this code and am posting what I have now. I am working strictly with the X coordinate at the moment. Once it works, I will add in Y. [...] I have considered the fact that the PHP explode & json_encode is saving strings, so I did a .toString() function but that did not seem to help at all. For example, my console log would be something like x/y/pos of x in array/pos of y in array

101
305
-1
-1

Answer 1

Here's a slight rewrite of your code.

What I did:

1. Changed your CSV parsing to split into rows of 3 columns, using an iterator model for simplicity
2. Changed your JS to match x-coords to row[1] and y-coords to row[2]
3. Not sure what the other code is intended to do on success... looks like you're still working on this.

The PHP code:

<?php 
    $file = file("cpp/textdump/coordinates/imagetesting.txt.txt"");
    $coordinates = array();
    for ($line in $file) {
        array_push($coordinates, explode(" ", $line);
    }
?>
var coords = <?= json_encode($coordinates) ?>;

The JS:

$('#solarCanvas').click(function(e) {
    var c = document.getElementById("solarCanvas");
    var ctx = c.getContext("2d");
    var pos = findPos(this);
    var xNum = e.pageX - pos.x;
    var yNum = e.pageY - pos.y;
    var xStr = xNum.toString();
    var yStr = yNum.toString();

    for(var i = 0; i < coords.length; i++) {
        if(coords[i][1] === xStr && coords[i][2] === yStr) {
            return i;
            console.log('coord found', coords[i]);
        }
    }
    console.log(coords);
    console.log(xStr);                                 
    console.log(yStr);                                 
});