eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.programmingHTM5 - po co komu kanwa, jeżeli nie działa?
Ilość wypowiedzi w tym wątku: 40

  • 1. Data: 2014-08-03 19:17:12
    Temat: HTM5 - po co komu kanwa, jeżeli nie działa?
    Od: "slawek" <h...@s...pl>

    W przypływie dobrego humoru i nadmiaru czasu przyszło mi do głowy, aby
    Całkiem Poważny Problem spróbować rozwiązać za pomocą języka Java Script.

    Dlaczego? A dlaczego nie? Komputerki (i smartfony) są już dość szybkie, a
    przyjemność miała polegać na wstawieniu Rozwiązywacza Całkiem Poważnego
    Problemu wprost w stronę WWW: zero instalacji, zero zastanawiania się nad
    uprawnieniami i "co tam w środku" (jak ktoś będzie chciał to sobie looknie w
    źródła) - wpisuje się dane a program robi obliczenia i rysuje wykresy na
    kanwach HTML5 w kontekście 2D.

    To nawet działa. Ale... - coś nie chce działać (nieobsługiwane path w 2D) na
    smartfonie... a przecież druga połowa przyjemności miała na tym polegać.
    Jedyna, z tych które wypróbowałem, przeglądarka "mobilna" dająca radę
    ścieżkom na kanwie HTML5 to Opera. Reszta zacina się przy pierwszym
    lineTo-moveTo. Buuuu....

    1. Po co robią HTML5+bajery - jeżeli te bajery to tylko w Windows? (Ew. w
    X-Windows?) Czy HTML5 jest już "normą" - czy nadal tylko eksperymentem?!

    2. Czy jest jakieś proste obejście w rodzaju biblioteki automatycznie
    dodającej funkcje canvas'ów na potrzeby tych przeglądarek które mają jedną
    funkcję nie bardziej?!

    2a. Tak, obejrzałem Raphael'a i to - tzn. przykłady - nawet działa w
    smartfonie, ale (dziś) nie chce mi się zaczynać od nowa pisania całej
    grafiki. Nawet jeżeli nazwiemy to refaktoryzacją.

    TIA
    slawek


  • 2. Data: 2014-08-03 19:53:38
    Temat: Re: HTM5 - po co komu kanwa, jeżeli nie działa?
    Od: firr <p...@g...com>

    ja bym hetnie pogadal o kanwasie na przykladach konkretnego kodu ktory mozna by
    omowic, (poprawic wydajnosciowo albo stylistycznie itp) bo to jest najciekawsze - a
    moze jakis konkursik?


  • 3. Data: 2014-08-03 21:43:33
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: "Pszemol" <P...@P...com>

    "firr" <p...@g...com> wrote in message
    news:441981cc-b5e3-4925-bc2f-f9771cc8f843@googlegrou
    ps.com...
    > ja bym hetnie pogadal o kanwasie na przykladach
    > konkretnego kodu ktory mozna by omowic,
    > (poprawic wydajnosciowo albo stylistycznie itp)
    > bo to jest najciekawsze - a moze jakis konkursik?

    Podajcie link do witryny www - chetnie potestuje na Safari/iPhone4.


  • 4. Data: 2014-08-04 11:38:41
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: "slawek" <h...@s...pl>

    Użytkownik "Pszemol" napisał w wiadomości grup
    dyskusyjnych:lrm3c7$vkl$...@d...me...

    >Podajcie link do witryny www - chetnie potestuje na Safari/iPhone4.

    Na razie "NDA" odnośnie całości - za parę miesięcy będzie publikacja nt.
    "Bardzo Poważnego Problemu" (nie-informatycznego) w jakimś peer reviewed coś
    tam.

    Jak ktoś chce, to może spróbować z samą grafiką: powinno (i na PC nawet to
    robi) rysować wykresy XY nieco podobnie jak robi to Matlab. Jest tylko
    rysowanie kolorowych linii (ciągłe, przerwane, ...), ale akurat to mi
    wystarcza aż nadto. Kolejność ma znaczenie - wywołanie plot musi być po
    axes.

    vector1, vector2, ... to po prostu tablice liczb.

    /**
    * var plt = new Plot(canvas);
    * plt.range('x',vector1,'y',vector2,'y',vector3, ... );
    * plt.axes();
    * plt.plot(vector1,vector2,'r-', vector1,vector2,'g-.', ... );
    */
    function Plot(canvas) {
    this.canvas = canvas;
    this.xmin = null;
    this.xmax = null;
    this.xtic = null;
    this.xmtic = null;
    this.ymin = null;
    this.ymax = null;
    this.ytic = null;
    this.ymtic = null;
    this.fontSize = 12;
    this.insetSize = 12;
    this.font = this.fontSize + "px sans-serif";
    this.text_extend =
    this.canvas.getContext("2d").measureText("-1.23456")
    .width;
    this.margin_left = this.insetSize + this.text_extend;
    this.margin_right = this.insetSize;
    this.margin_top = this.insetSize;
    this.margin_bottom = this.insetSize + this.fontSize;
    this.ticSize = this.fontSize / 6;
    this.width = this.canvas.width - this.margin_left - this.margin_right;
    this.height = this.canvas.height - this.margin_top - this.margin_bottom;
    this.fx = function (x) {
    return ((x - this.xmin) / (this.xmax - this.xmin) * this.width);
    }
    this.fy = function (y) {
    return ( - (y - this.ymin) / (this.ymax - this.ymin) * this.height);
    }
    this.prepareContext = function () {
    var dc = this.canvas.getContext("2d");
    dc.save();
    dc.font = this.font;
    dc.translate(0.5, 0.5);
    dc.translate(this.margin_left, this.canvas.height - this.margin_bottom);
    return dc;
    }
    this.releaseContext = function (dc) {
    dc.restore();
    }
    }
    Plot.prototype.axisStroke = function (dc) {
    dc.strokeStyle = "#000";
    dc.setLineDash([1, 0]);
    dc.stroke();
    }
    Plot.prototype.gridStroke = function (dc, isNotMajorGrid) {
    if (isNotMajorGrid) {
    dc.strokeStyle = "#111";
    dc.setLineDash([1, 2]);
    } else {
    dc.strokeStyle = "#222";
    dc.setLineDash([2, 2]);
    }
    dc.stroke();
    }
    Plot.prototype.plotStroke = function (dc, lineStyle) {
    if (lineStyle.search("r") != (-1))
    dc.strokeStyle = "#f00";
    else if (lineStyle.search("g") != (-1))
    dc.strokeStyle = "#070";
    else if (lineStyle.search("b") != (-1))
    dc.strokeStyle = "#007";
    else
    dc.strokeStyle = "#000";
    if (lineStyle.search("--") != (-1))
    dc.setLineDash([12, 4]);
    else if (lineStyle.search("-.") != (-1))
    dc.setLineDash([12, 4, 4, 4]);
    else if (lineStyle.search("-") != (-1))
    dc.setLineDash([16, 0]);
    else if (lineStyle.search(":") != (-1))
    dc.setLineDash([4, 4]);
    dc.stroke();
    }
    Plot.prototype.binsize = function (min_value, max_value, sections) {
    var bin;
    var factors = [1.0, 2.0, 2.5, 4.0, 5.0, 10.0];
    var mtictab = [5, 4, 5, 4, 5, 5];
    var delta = (max_value - min_value) / sections;
    var magnitude = Math.floor(Math.log(delta) / Math.LN10);
    var base = Math.exp(magnitude * Math.LN10);
    var i = 0;
    do {
    bin = base * factors[i];
    mtic = mtictab[i];
    i++;
    } while (i < factors.length && bin < delta)
    var lo = Math.floor(min_value / bin) * bin;
    var hi = Math.ceil(max_value / bin) * bin;
    return {
    bin : bin,
    lo : lo,
    hi : hi,
    mtic : mtic
    };
    }
    Plot.prototype.range = function (name1, vector1) {
    var i = 0;
    while (i < arguments.length) {
    var name = arguments[i++];
    var vector = arguments[i++];
    var vector_min = Math.min.apply(Math, vector);
    var vector_max = Math.max.apply(Math, vector);
    switch (name) {
    case 'x':
    case 'X':
    this.xmin = (this.xmin !== null) ? Math.min(this.xmin, vector_min) :
    vector_min;
    this.xmax = (this.xmax !== null) ? Math.max(this.xmax, vector_max) :
    vector_max;
    break;
    case 'y':
    case 'Y':
    this.ymin = (this.ymin !== null) ? Math.min(this.ymin, vector_min) :
    vector_min;
    this.ymax = (this.ymax !== null) ? Math.max(this.ymax, vector_max) :
    vector_max;
    break;
    }
    }
    }
    Plot.prototype.axes = function (xBins, yBins) {
    xBins = xBins || 9;
    yBins = yBins || 7;
    var bx = this.binsize(this.xmin, this.xmax, xBins);
    this.xtic = bx.bin;
    this.xmin = bx.lo;
    this.xmax = bx.hi;
    this.xmtic = bx.mtic;
    var by = this.binsize(this.ymin, this.ymax, yBins);
    this.ytic = by.bin;
    this.ymin = by.lo;
    this.ymax = by.hi;
    this.ymtic = by.mtic;
    var dc = this.prepareContext();
    dc.textBaseline = "top";
    for (var k = 0, x = this.xmin; x <= this.xmax; k++, x += this.xtic /
    this.xmtic) {
    var i = this.fx(x);
    if ((k % this.xmtic) == 0) {
    if (x != this.xmin)
    dc.textAlign = "center";
    else
    dc.textAlign = "left";
    if (this.width - i < this.text_extend / 2)
    dc.textAlign = "right";
    if (Math.abs(x) < Number.EPSILON * Math.abs(this.xmax - this.xmin))
    dc.fillText(Number(0).toExponential(2), i, this.ticSize);
    else
    dc.fillText(x.toExponential(2), i, this.ticSize);
    }
    dc.beginPath();
    dc.moveTo(i, 0);
    dc.lineTo(i, -this.height);
    this.gridStroke(dc, k % this.xmtic);
    dc.beginPath();
    dc.moveTo(i, 0);
    dc.lineTo(i, this.ticSize);
    this.axisStroke(dc);
    }
    dc.textAlign = "right";
    dc.textBaseline = "middle";
    for (var k = 0, y = this.ymin; y <= this.ymax; k++, y += this.ytic /
    this.ymtic) {
    var j = this.fy(y);
    if (k % this.ymtic == 0) {
    if (Math.abs(y) < Number.EPSILON * Math.abs(this.ymax - this.ymin))
    dc.fillText(Number(0).toExponential(2), -2 * this.ticSize, j);
    else
    dc.fillText(y.toExponential(2), -2 * this.ticSize, j);
    }
    dc.beginPath();
    dc.moveTo(0, j);
    dc.lineTo(this.width, j);
    this.gridStroke(dc, k % this.ymtic);
    dc.beginPath();
    dc.moveTo(0, j);
    dc.lineTo(-this.ticSize, j);
    this.axisStroke(dc);
    }
    dc.beginPath();
    dc.moveTo(0, 0);
    dc.lineTo(0, -this.height);
    this.axisStroke(dc);
    dc.beginPath();
    dc.moveTo(0, 0);
    dc.lineTo(this.width, 0);
    this.axisStroke(dc);
    this.releaseContext(dc);
    }
    Plot.prototype.plot = function (xvector, yvector, lineStyle) {
    var iargin = 0;
    var nargin = arguments.length;
    while (iargin < nargin) {
    xvector = arguments[iargin++];
    yvector = arguments[iargin++];
    if (iargin < nargin && typeof(arguments[iargin]) == typeof(""))
    lineStyle = arguments[iargin++];
    else
    lineStyle = "r-";
    if (this.xmin === null || this.xmax === null)
    this.range('x', xvector);
    if (this.ymin === null || this.ymax === null)
    this.range('y', yvector);
    var dc = this.prepareContext();
    dc.beginPath();
    var i = this.fx(xvector[0]);
    var j = this.fy(yvector[0]);
    dc.moveTo(i, j);
    for (k = 0; k < xvector.length; k++) {
    i = this.fx(xvector[k]);
    j = this.fy(yvector[k]);
    dc.lineTo(i, j);
    }
    this.plotStroke(dc, lineStyle);
    this.releaseContext(dc);
    }
    }

    //EOF



  • 5. Data: 2014-08-04 12:15:24
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: firr <p...@g...com>

    >

    a co to dokladnie robi? bo wyglada troche nieprzyjemnie.. edytor wyżarł spacje czy ty
    tez tak piszesz trzeba tez w tym kodzie uzywac takich dlugich przypisan

    this.canvas = canvas;
    this.xmin = null;
    this.xmax = null;
    this.xtic = null;
    this.xmtic = null;
    this.ymin = null;
    this.ymax = null;
    this.ytic = null;
    this.ymtic = null;
    this.fontSize = 12;
    this.insetSize = 12;


    xBins = xBins || 9;
    yBins = yBins || 7;
    var bx = this.binsize(this.xmin, this.xmax, xBins);
    this.xtic = bx.bin;
    this.xmin = bx.lo;
    this.xmax = bx.hi;
    this.xmtic = bx.mtic;
    var by = this.binsize(this.ymin, this.ymax, yBins);
    this.ytic = by.bin;
    this.ymin = by.lo;
    this.ymax = by.hi;
    this.ymtic = by.mtic;

    wyglada to nieladnie, w kazdym razie tak konkretna romowa o kodzie to jest mw to o co
    by mi chodzilo


  • 6. Data: 2014-08-04 19:42:33
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: slawek <f...@f...com>

    On Mon, 4 Aug 2014 03:15:24 -0700 (PDT), firr
    <p...@g...com> wrote:
    > a co to dokladnie robi? bo wyglada troche nieprzyjemnie.. edytor
    wyżar=

    Rysuje wykres w HTML5. A ponieważ to Java Script to niektóre
    "przypisania" są definicjami metod. Dość trywialne. Parę miejsc jest
    nieco niezbyt, ale to bez większego znaczenia. Dodatkowo przeszło
    przez JS Tool i autoformatowanie.


  • 7. Data: 2014-08-04 19:48:18
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: slawek <f...@f...com>

    On Mon, 4 Aug 2014 03:15:24 -0700 (PDT), firr
    <p...@g...com> wrote:
    > ł spacje czy ty tez tak piszesz trzeba tez w tym kodzie uzywac
    takich =
    > dlugich przypisan


    > this.canvas = canvas;
    > this.xmin = null;
    > this.xmax = null;
    > this.xtic = null;

    Bez this byłyby to zmienne lokalne albo globalne. Z this są to pola
    obiektu. Taka mamy skladnię.


  • 8. Data: 2014-08-04 19:56:11
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: slawek <f...@f...com>

    On Mon, 4 Aug 2014 03:15:24 -0700 (PDT), firr
    <p...@g...com> wrote:
    > var by = this.binsize(this.ymin, this.ymax, yBins);
    > this.ytic = by.bin;
    > this.ymin = by.lo;

    To można zrobić lepiej, ale zwyczajnie nie chciało mi się. Zmienne
    ytic, ... powinny być obiektem/strukturą. Wtedy rozpakowywanie by nie
    byłoby zupełnie potrzebne.


  • 9. Data: 2014-08-05 06:19:34
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: firr <p...@g...com>

    W dniu poniedziałek, 4 sierpnia 2014 19:42:33 UTC+2 użytkownik slawek napisał:
    > On Mon, 4 Aug 2014 03:15:24 -0700 (PDT), firr
    >
    > <p...@g...com> wrote:
    >
    > > a co to dokladnie robi? bo wyglada troche nieprzyjemnie.. edytor
    >
    > wyżar=
    >
    >
    >
    > Rysuje wykres w HTML5. A ponieważ to Java Script to niektóre
    >
    > "przypisania" są definicjami metod. Dość trywialne. Parę miejsc jest
    >
    > nieco niezbyt, ale to bez większego znaczenia. Dodatkowo przeszło
    >
    > przez JS Tool i autoformatowanie.

    No spoko, ale mozesz moze omowic tak po dwa trzy zdania kazda funkcje? wtedy moglbym
    powiedziec pare słow ;/


  • 10. Data: 2014-08-05 07:42:08
    Temat: Re: HTM5 - po co komu kanwa, jezeli nie dziala?
    Od: slawek <f...@f...com>

    On Mon, 4 Aug 2014 21:19:34 -0700 (PDT), firr
    <p...@g...com> wrote:
    > y moglbym powiedziec pare słow ;/

    Ty jesteś humanista czy informatyk? Masz kod, nawet jeżeli Java
    Script to nie jest twój ulubiony język to ma skladnię prawie jak C,
    jakąś przeglądarkę internetową też chyba masz.

strony : [ 1 ] . 2 ... 4


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: