Question

I got a idea if I could make a text file and that would be rendered to pixels. First test succeed. I had one pixel for it. Now when I put more pixels, it will not work. Here is the code:

xhr=new XMLHttpRequest();
xhr.open("GET", "graphtest.prg", false);
xhr.send();
document.write(xhr.responseText);
var file=xhr.responseText;
var c=0;
var bad=false;
var val=0;
var rgbs="rgb(";
while(c<file.length && bad==false) {
    //alert(file.charAt(c));
    cc=file.charAt(c);
    if (cc=="P" || cc=="R" || cc=="G") {
        // magic
    }
    else {
        if (cc=="{") {
            if (val!=5) {
                var newelem=document.createElement("span");
                newelem.innerHTML="&nbsp;";
                /*newelem.style.width="1px";
                newelem.style.height="1px";
                newelem.position="absolute";*/
                newelem.className="graf";
            }
        }
        else if (cc=="'") {
            c++;
            cc=file.charAt(c);
            switch (val) {
                case 0:
                    //alert("RUN");
                    var num=""+cc.toString();
                    c++;
                    while(!isNaN(file.charAt(c))) {
                        num+=file.charAt(c).toString();
                        c++;
                    }
                    newelem.style.left=num+"px";
                    //alert(num);
                    val++;
                    c++;
                    continue;
                    break;
                case 1:
                    var num=""+cc.toString();
                    c++;
                    while(!isNaN(file.charAt(c))) {
                        num+=file.charAt(c).toString();
                        c++;
                    }
                    newelem.style.top=num+"px";
                    //alert(num);
                    val++;
                    c++;
                    continue;
                    break;
                case 2:
                    var num=""+cc.toString();
                    c++;
                    while(!isNaN(file.charAt(c))) {
                        num+=file.charAt(c).toString();
                        c++;
                    }
                    rgbs+=num+",";
                    //alert(num);
                    val++;
                    c++;
                    continue;
                    break;
                case 3:
                    var num=""+cc.toString();
                    c++;
                    while(!isNaN(file.charAt(c))) {
                        num+=file.charAt(c).toString();
                        c++;
                    }
                    rgbs+=num+",";
                    //alert(num);
                    val++;
                    c++;
                    continue;
                    break;
                case 4:
                    var num=""+cc.toString();
                    c++;
                    while(!isNaN(file.charAt(c))) {
                        num+=file.charAt(c).toString();
                        c++;
                    }
                    rgbs+=num+")";
                    //alert(num);
                    val++;
                    c++;
                    continue;
                    break;
                case 5:
                    newelem.style.backgroundColor=rgbs;
                    document.body.appendChild(newelem);
                    val=0;
                    rgbs="";
                    newelem=null;
                    cc="";
                    num="";
                    break;
            }
        }
        if (val==5) {
            newelem.style.backgroundColor=rgbs;
            document.body.appendChild(newelem);
            val=0;
            rgbs="";
            //newelem=null;
            //c;
            alert(file.charAt(c));
            cc="";
            num="";
        }
    }
    c++;
}

Here is the “graphic text” file:

PRG{'100','200','0','255','0'}{'200','100','0','0','255'}

The first pixel is rendered successfully, but the second pixel won’t have a background color. Is this a parsing problem or something else?

Answer 1

Right now the parser is confusing because of the big amount of repeated code. In every single of your switch case you repeat a lot of the same code, which isn’t necessary.

Other than that the one thing I notice is that your rgbs var is initialized with var rgbs="rgb("; at the beginning of your script, but then is reinitialized with rgbs=""; at the end of a pixel parse.