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

do góry

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?

do góry

"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.

do góry

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

do góry

>

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

do góry

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.

do góry

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ę.

do góry

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.

do góry

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 ;/

do góry

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.

do góry