Topic: Opera won't be nice to me Pages that link to <a href="https://ozoneasylum.com/backlink?for=31605" title="Pages that link to Topic: Opera won&amp;#039;t be nice to me" rel="nofollow" >Topic: Opera won&#039;t be nice to me\
 
Author Thread
racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

 IP logged posted posted 01-21-2010 19:44 Edit Quote

I had this script working a few months ago, but now it's broken in Opera.
http://www.hardwoodfloorspdx.com/misc/javascript/canvas/graph/climateHistogramWithSpline.html
It still works the same in Chrome, firefox, and even... wait for it... Internet explorer.

The problem I had with opera was that it rendered the spline graph at 90 degrees off where it should have been.
Now it doesn't even show the bar graph. I didn't try removing anything yet, like the text, which gets rotated, so that might be it, but I figured I'd ask some opera experts to spot an easy error or something... hopefully it's simple. Like I said, it worked less than three months ago and the spline still shows up.

here's the code

code:
<!DOCTYPE html>
<html lang="en">
    
    <head>
        <style>
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>
            canvas
        </title>
        <script src="excanvas.js">
        </script>
    </head>
    
    <body onload="init()">
        <script>
            /*spline globals*/
            var spline = false;
            var gridSize = 10;
            var baseline = 200;

            var D_Id = function(Id) {
                return document.getElementById(Id)
            }
            var tds = [-0.06, -0.085, 0.368, -1.036, -0.148, -1.163, -1.204, 2.062, -1.438, -2.013, -2.484, -1.506, 1.645, -3.311, 0.385, -1.046, -3.232, -0.576, -0.409, -2.967, -2.412, -0.163, 0.166, 1.232, 0.232, 1.595, 0.034, -3.767, -0.347, -2.233, -2.066, -0.116, -0.883, 1.359, 0.905, -2.806, -0.568, -1.148, 0.265, 3.106, 1.001, 0.723, 0.55, 3.495, -0.288, -0.154, -1.2, -0.457, -2.081, 0.11, 1.27, -0.959, 1.381, -0.472, -1.686, 0.356, -0.17, 2.034, 0.819, 0.8];





            function init() {
                var canvasX, canvasY, controlPointX, controlPointY;

                var canvas = D_Id("CanvasGraph");
                canvas.onmousedown = function(e) {
                    if (!e) e = window.event;
                    down(e)
                };

                writeCanvasTable(canvas);
                /*Draw the graph*/
            }


            function down(e) {

                var startX = parseInt(e.clientX);
                var startY = e.clientY;
                if (Math.round((Math.round(e.clientX / 10) / 10) * 100) % 10 == 0) {
                    var indexNum = e.clientX - gridSize;
                    indexNum = Math.round(indexNum / 10) * 10;


                    read = document.getElementById("readout");

                    with(read.style) {

                        color = "#fff";
                        zIndex = 100;
                        backgroundColor = "black";
                        opacity = .45
                        left = parseInt(e.clientX) + "px"
                        top = -gridSize * tds[indexNum / gridSize] + 210 + "px"
                        filter = "progid:DXImageTransform.Microsoft.Matrix alpha(opacity=40) ";
                        width = "120px";
                    }

                    read.innerHTML = "Year&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:" + parseInt((indexNum / gridSize) + 1950) + "<br>Anomaly&nbsp;&nbsp;:" + tds[indexNum / gridSize];
                }
                control = (startX >= canvasX + controlPointX - gridSize * .5 && startX <= canvasX + controlPointX + gridSize * .5 && startY >= canvasY + controlPointY - gridSize * .5 && startY <= canvasY + controlPointY + gridSize * .5)
                if (control) {
                    canvas.onmousemove = function(e) {
                        move(e)
                    };
                    canvas.onmouseup = function() {
                        move(e)
                    };
                    var originalcx = controlPointX;
                    var originalcy = controlPointY;
                    e.stopPropagation();
                    e.preventDefault();
                }



            }

            function up(e) {
                e.stopPropagation()
            }

            var lastX = -1,
                lastY;

            function move(e) {
                e.stopPropagation();

                var x = e.clientX - canvasX;
                var y = e.clientY - canvasY;

                lastX = x;
                lastY = y;
                var dx = e.clientX - startX;
                var dy = e.clientY - startY;


                if (control) {
                    controlPointX = originalcx + dx;
                    controlPointY = originalcy + dy;



                }


            }






            function writeCanvasTable(canvas) {
                var read = document.getElementById("readout");

                canvasX = canvas.offsetLeft;
                canvasY = canvas.offsetTop;
                var ctx = canvas.getContext("2d");
                canvas.width = tds.length * gridSize

                read.style.color = "blue";
                read.style.position = "absolute";

                var colors = ["#ff0", "#0ff", "#f0f", "#f90", "#0ff", "#f0f"];
                var colorsMid = ["#ffa", "#aff", "#faf", "#f9a", "#aff", "#faf"];
                var colorsEnd = ["#ee0", "#0ee", "#e0e", "#a80", "#0aa", "#a0a"];

                for (var y = 0; y < canvas.offsetHeight; y += 10) {
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.offsetWidth, y)
                };
                ctx.strokeStyle = "#ccc";
                ctx.stroke();


                var spacing, width, height, posx, posy;
                var basewidth = canvas.offsetWidth / tds.length;
                spacing = basewidth / tds.length;
                width = basewidth - spacing;

                for (i in tds) {
                    height = parseInt(tds[i] * gridSize);
                    posx = (i * basewidth) + spacing / 2;
                    posy = baseline - height;
                    controlPointX = posx;
                    controlPointY = posy;




                    var lingrad = ctx.createLinearGradient(posx, posy, posx + width, posy);
                    var Cvar = 1 //i%colors.length
                    lingrad.addColorStop(0, colors[Cvar]);
                    lingrad.addColorStop(.5, colorsMid[Cvar]);

                    lingrad.addColorStop(1, colorsEnd[Cvar]);



                    ctx.fillStyle = lingrad;

                    ctx.fillRect(posx, posy, width, height);
                    var txt = 1950 + parseInt(i)
                    ctx.save()
                    var font = 'bold helvetica'
                    var Font_size = 6;
                    ctx.fillStyle = "#0000ff"
                    ctx.translate(posx + 6, posy);

                    ctx.shadowBlur = 0;
                    ctx.shadowColor = "#00ffff";
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 1;
                    ctx.rotate(Math.PI * 2 * -90 / 360)
                    ctx.mozTextStyle = Font_size + "pt " + font;
                    //ctx.mozDrawText(parseInt(dates[i]));
                    ctx.fillText(txt, 0, 0);
                    ctx.restore();
                }

            }

            function Spline(x1, y1, x2, y2, ctx) {
                if (x1 == x2 && y1 == y2) {
                    return
                }
                var IncX = 0;
                var IncY = 0;
                if (Math.abs(x1 - x2) > Math.abs(y1 - y2)) {
                    if (x1 - x2 > 0) {
                        IncX = -1
                    } else {
                        IncX = 1
                    }
                } else {
                    if (y1 - y2 > 0) {
                        IncY = -1
                    } else {
                        IncY = 1
                    }
                }
                var x = x1;
                var y = y1;
                /*
ctx.beginPath()
ctx.moveTo(x,y)	;
ctx.strokeStyle="red"
ctx.arc(x+2,y+2,.5,0,Math.PI*2,true);
ctx.stroke();
*/
                /*fill in between the points*/
                do {
                    if (IncX == 0) {
                        y += IncY;
                        x = (x2 - x1) * ((y - y1) / (y2 - y1)) + x1
                    }

                    else {
                        x += IncX;
                        y = (y2 - y1) * ((x - x1) / (x2 - x1)) + y1
                    }
                    ctx.beginPath()
                    ctx.moveTo(x, y)

                    y >= baseline ? ctx.strokeStyle = "rgba(0,0,255,.3)" : ctx.strokeStyle = "rgba(255,0,0,.3)"
                    ctx.arc(x, y, 1, 0, Math.PI * 2, true);
                    ctx.stroke();
                } while (x != x2 || y != y2);
            }

            function SplineGraph(dataset) {
                var then = new Date();
                var element = document.getElementById("CanvasGraph");
                var ctx = element.getContext('2d');
                var xvals = [];
                var yvals = dataset
                var point_x = [];
                var point_y = [];
                var d_x = [];
                var d_y = [];
                var count = 0;
                for (i = 0; i < yvals.length; i++) {
                    var yval = yvals[i];
                    if (isNaN(yval)) {
                        continue
                    }
                    point_x[count] = i * gridSize;
                    point_y[count] = baseline - yval * gridSize;
                    count++;
                }

                /*ends of curve*/
                d_x[0] = point_x[1] - point_x[0];
                d_x[count - 1] = point_x[count - 1] - point_x[count - 2];
                d_y[0] = point_y[1] - point_y[0];
                d_y[count - 1] = point_y[count - 1] - point_y[count - 2];

                /*set delta x delta y values*/
                for (i = 1; i < count - 1; i++) {
                    d_x[i] = (point_x[i + 1] - point_x[i - 1]) / 2;
                    d_y[i] = (point_y[i + 1] - point_y[i - 1]) / 2
                }

                for (i = 0; i < count - 1; i++) {
                    a2x = 3 * (point_x[i + 1] - point_x[i]) - (2 * d_x[i] + d_x[i + 1]);
                    a3x = 2 * (point_x[i] - point_x[i + 1]) + (d_x[i] + d_x[i + 1]);
                    a2y = 3 * (point_y[i + 1] - point_y[i]) - (2 * d_y[i] + d_y[i + 1]);
                    a3y = 2 * (point_y[i] - point_y[i + 1]) + (d_y[i] + d_y[i + 1]);
                    var oldX = null;
                    var oldY = null;
                    var Iter = 10
                    for (j = 0; j <= Iter; j++) {
                        t = j / Iter;
                        x = Math.floor(a3x * t * t * t + a2x * t * t + d_x[i] * t + point_x[i]);
                        y = Math.floor(a3y * t * t * t + a2y * t * t + d_y[i] * t + point_y[i]);
                        if (oldX != null) {
                            if (spline = true) {
                                Spline(oldX, oldY, x, y, ctx)
                            }
                        };
                        oldX = x;
                        oldY = y
                    }

                }
                var now = new Date();
                document.getElementsByTagName('p')[0].textContent += " " + (now - then) + "ms";
            }
        </script>
        <canvas id="CanvasGraph" width="500" height="400">
        </canvas>
        <div id="readout" class="tool">
        </div>
        <input type="button" value="load spline" onclick="spline=true;SplineGraph(tds)">
        </input>
        <p>
        </p>
    </body>

</html>
HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

 IP logged posted posted 01-21-2010 22:30 Edit Quote

You have errors in there. In Opera, you can see these by opening the Error Console (Tools > Advanced > Error Console).

Anyway. since Opera doesn't support the text API in canvas (it comes in 10.5), it will stop on line 187. ctx.restore() will never be reached, and that's why stuff gets messed up.

The next problem is that negative values for height are sent to ctx.fillRect() on line 172 resulting in an exception. Just check for negative values and set height to 0 in those cases.

With those fixes, it looks like the other browsers (except no labels).

HTH.

(Edited by HZR on 01-21-2010 22:32)
racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

 IP logged posted posted 01-21-2010 22:31 Edit Quote

thanks very much
coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

 IP logged posted posted 05-31-2011 11:03 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu