Carte wargame en Flash, JS, HTML5 ?

[Plume]

Non non, c'est pas ça. T'as rien compris encore. Tu m'iniiiiirves!… On dit :

ET paf! Ca fait des chocapics!

[Chandler]

Ok merci _who

[Plume]

Bon, finalement, j'ai fait le script que je voulais pour faire ce que je voulais. J'vous partagerai un peu plus tard le bazar. Par contre, j'utiliserai pas la map que j'ai linké, parce que la manipulation avec Raphael est trop longue et le navigateur freezera.

C'était à prévoir, c'est d'ailleurs pour ça que ça ne m'étonne pas. Mais avec une telle carte, je pourrais montrer la puissance de Nokogiri et la rapidité de traitement.

@+

[Roworll]

C'est RaphaelJs qui mets vraiment trop de temps ou ne navigateur qui peine à faire le rendu ?
J'ai eu de belles surprises en manipulant le SVG par exemple.
En combinant SVG + Js
- Opera tient le haut du pavé en vitesse de rendu
- FireFox et Chrome sont dans un mouchoir de poche
- Safari a une vitesse de rendu identique mais un traitement des évènements JS bien plus lent
- IE... non, rien.

Entre Opera et Safari, c'est le jour et la nuit (sans compter que webkit merdouille certaines transformations de base)

[Edit]
Page de test pour se faire une idée

[Plume]

Nan, je ne pense pas que le problème viennent de RaphaelJS. J'ai pas testé les différents navigateurs mais j'peux les mettre à l'épreuve pour la curiosité. Je ne l'ai pas fait car mon intérêt reste quand même de trouver une solution relativement générale.

J'reviens avec des résultats.

---

Bon, le résultat est simple. J'ai planté tous les navigateurs. Après, on peut pas leur en vouloir.

Le SVG pèse 19,8Mo.
Le fichier de données JSON pèse 22Mo.

Comme c'est du local, il s'en sort. Mais derrière, Raphael doit créer un objet sur chaque territoire, ce qui représente pas moins de 6235 territoires, soit 6235 objets JSON. Ca fait un très gros chiffre. Ensuite, pour chaque territoire, Raphael doit générer une galette graphique en SVG. Etc.

On arrive donc avec 12470 objets à gérer par le client, sans compter les animations et tout le tremblement.

J'vais voir si j'peux pas alléger les données lors de la génération afin de diminuer le nombre de territoire mais d'avoir une carte cohérente tout de même. Je ferai un nouveau retour à ce moment.

@tchaOo°

[Harparine]

Excellent rendu. Ca donne des idées... Depuis que je lis les messages de Roworll sur SVG, je me dis que ça a l'air top mais piloté par js et jQuery, ça peut vraiment donner.

Au fait, en voyant les noms de tes provinces, ça m'évoque quelque chose : c'est bien généré sur Gunof, non ? (si c'est le cas, c'est cool que le site serve )

[Plume]

J'ai cité ton générateur en bas de la page Suis pas un voleur.

Sinon, j'ai laissé tomber mes tests. De toute façon, ils ne représentaient pas une utilisation réaliste, ni utile. J'ai fait une dernière mise à jour récemment. La carte est draggable dans le rectangle noir mais je n'ai pas le courage de faire quelque chose de plus grand donc il faut vous imaginer la situation

[Harparine]

J'ai cité ton générateur en bas de la page Suis pas un voleur.

Ce n'était pas pour ça que je faisais la remarque, au contraire : si je mets le truc en ligne, c'est pour qu'il soit utilisé, avec ou sans citation. J'étais simplement content de voir que des gens utilisaient l'outil :wowowow:

[Plume]

Je sais bien, je l'ai bien perçu. Mais quand on utilise un outil & pour qu'il soit utilisé, il faut bien en parler. Parce qu'il faut pas compter sur toi. T'en fais même pas la promotion

[Plume]

J'en ai fini de mes galettes pour ce soir. La mise à jour ? Elles sont enfin générées avec les couleurs qui vont bien. Il y a un bug dans gRaphael. Si votre graphe ne contient qu'une valeur, vous ne pouvez pas choisir la couleur. L'attribut n'est pas pris en compte.

Le fichier corrigé :

/*

 * g.Raphael 0.4.1 - Charting library, based on Raphaël

 *

 * Copyright © 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)

 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.

 */

Raphael.fn.g.piechart = function (cx, cy, r, values, opts) {

    opts = opts || {};

    var paper = this,

        sectors = [],

        covers = this.set(),

        chart = this.set(),

        series = this.set(),

        order = [],

        len = values.length,

        angle = 0,

        total = 0,

        others = 0,

        cut = 9,

        defcut = true;

    chart.covers = covers;

    if (len == 1) {

        series.push(this.circle(cx, cy, r).attr({fill: opts.colors && opts.colors[0] || this.g.colors[0] || "#666", stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth}));

        covers.push(this.circle(cx, cy, r).attr(this.g.shim));

        total = values[0];

        values[0] = {value: values[0], order: 0, valueOf: function () { return this.value; }};

        series[0].middle = {x: cx, y: cy};

        series[0].mangle = 180;

    } else {

        function sector(cx, cy, r, startAngle, endAngle, fill) {

            var rad = Math.PI / 180,

                x1 = cx + r * Math.cos(-startAngle * rad),

                x2 = cx + r * Math.cos(-endAngle * rad),

                xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad),

                y1 = cy + r * Math.sin(-startAngle * rad),

                y2 = cy + r * Math.sin(-endAngle * rad),

                ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad),

                res = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2, "z"];

            res.middle = {x: xm, y: ym};

            return res;

        }

        for (var i = 0; i < len; i++) {

            total += values[i];

            values[i] = {value: values[i], order: i, valueOf: function () { return this.value; }};

        }

        values.sort(function (a, b) {

            return b.value - a.value;

        });

        for (i = 0; i < len; i++) {

            if (defcut && values[i] * 360 / total <= 1.5) {

                cut = i;

                defcut = false;

            }

            if (i > cut) {

                defcut = false;

                values[cut].value += values[i];

                values[cut].others = true;

                others = values[cut].value;

            }

        }

        len = Math.min(cut + 1, values.length);

        others && values.splice(len) && (values[cut].others = true);

        for (i = 0; i < len; i++) {

            var mangle = angle - 360 * values[i] / total / 2;

            if (!i) {

                angle = 90 - mangle;

                mangle = angle - 360 * values[i] / total / 2;

            }

            if (opts.init) {

                var ipath = sector(cx, cy, 1, angle, angle - 360 * values[i] / total).join(",");

            }

            var path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total);

            var p = this.path(opts.init ? ipath : path).attr({fill: opts.colors && opts.colors[i] || this.g.colors[i] || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round"});

            p.value = values[i];

            p.middle = path.middle;

            p.mangle = mangle;

            sectors.push(p);

            series.push(p);

            opts.init && p.animate({path: path.join(",")}, (+opts.init - 1) || 1000, ">");

        }

        for (i = 0; i < len; i++) {

            p = paper.path(sectors[i].attr("path")).attr(this.g.shim);

            opts.href && opts.href[i] && p.attr({href: opts.href[i]});

            p.attr = function () {};

            covers.push(p);

            series.push(p);

        }

    }



    chart.hover = function (fin, fout) {

        fout = fout || function () {};

        var that = this;

        for (var i = 0; i < len; i++) {

            (function (sector, cover, j) {

                var o = {

                    sector: sector,

                    cover: cover,

                    cx: cx,

                    cy: cy,

                    mx: sector.middle.x,

                    my: sector.middle.y,

                    mangle: sector.mangle,

                    r: r,

                    value: values[j],

                    total: total,

                    label: that.labels && that.labels[j]

                };

                cover.mouseover(function () {

                    fin.call(o);

                }).mouseout(function () {

                    fout.call(o);

                });

            })(series[i], covers[i], i);

        }

        return this;

    };

    // x: where label could be put

    // y: where label could be put

    // value: value to show

    // total: total number to count %

    chart.each = function (f) {

        var that = this;

        for (var i = 0; i < len; i++) {

            (function (sector, cover, j) {

                var o = {

                    sector: sector,

                    cover: cover,

                    cx: cx,

                    cy: cy,

                    x: sector.middle.x,

                    y: sector.middle.y,

                    mangle: sector.mangle,

                    r: r,

                    value: values[j],

                    total: total,

                    label: that.labels && that.labels[j]

                };

                f.call(o);

            })(series[i], covers[i], i);

        }

        return this;

    };

    chart.click = function (f) {

        var that = this;

        for (var i = 0; i < len; i++) {

            (function (sector, cover, j) {

                var o = {

                    sector: sector,

                    cover: cover,

                    cx: cx,

                    cy: cy,

                    mx: sector.middle.x,

                    my: sector.middle.y,

                    mangle: sector.mangle,

                    r: r,

                    value: values[j],

                    total: total,

                    label: that.labels && that.labels[j]

                };

                cover.click(function () { f.call(o); });

            })(series[i], covers[i], i);

        }

        return this;

    };

    chart.inject = function (element) {

        element.insertBefore(covers[0]);

    };

    var legend = function (labels, otherslabel, mark, dir) {

        var x = cx + r + r / 5,

            y = cy,

            h = y + 10;

        labels = labels || [];

        dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "east";

        mark = paper.g.markers[mark && mark.toLowerCase()] || "disc";

        chart.labels = paper.set();

        for (var i = 0; i < len; i++) {

            var clr = series[i].attr("fill"),

                j = values[i].order,

                txt;

            values[i].others && (labels[j] = otherslabel || "Others");

            labels[j] = paper.g.labelise(labels[j], values[i], total);

            chart.labels.push(paper.set());

            chart.labels[i].push(paper.g[mark](x + 5, h, 5).attr({fill: clr, stroke: "none"}));

            chart.labels[i].push(txt = paper.text(x + 20, h, labels[j] || values[j]).attr(paper.g.txtattr).attr({fill: opts.legendcolor || "#000", "text-anchor": "start"}));

            covers[i].label = chart.labels[i];

            h += txt.getBBox().height * 1.2;

        }

        var bb = chart.labels.getBBox(),

            tr = {

                east: [0, -bb.height / 2],

                west: [-bb.width - 2 * r - 20, -bb.height / 2],

                north: [-r - bb.width / 2, -r - bb.height - 10],

                south: [-r - bb.width / 2, r + 10]

            }[dir];

        chart.labels.translate.apply(chart.labels, tr);

        chart.push(chart.labels);

    };

    if (opts.legend) {

        legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos);

    }

    chart.push(series, covers);

    chart.series = series;

    chart.covers = covers;

    return chart;

};