pixels met CSS

[Verwijderd]

Voor een projectje wil ik een browser een random plaatje laten tekenen van x bij x pixels. De simpelste manier hiervoor is het gewoon regels met letters te maken en deze vervolgens 1 bij 1 pixel groot te maken. Het probleem hierbij is dat de browser dan met letters aan de gang moet en volgens mij is dat niet de snelste oplossing.

Een andere mogelijkheid is een tabel met cellen van 1 bij 1 pixel en een backgroundcolor, maar dit werkt nog trager dan de letters.

Nu dacht ik: als ik nu met lege <span> en <div> tags ga werken en in mij stylesheet zeg dat deze 1 bij 1 pixel moeten zijn, zou het volgens mij een stuk sneller moeten worden. Nu is het probleem dat je tag's die inline zijn geen breedte en hoogte mee kan geven. De oplossing om inline-block te gebruiken is geen optie omdat mozilla hier niet mee overweg kan.
Iemand een suggestie waarmee het ook (en zo snel mogelijk) gaat werken onder mozilla?

[André]

HTML:

[img]"plaatjevan1bij1.gif"[/img][img]"plaatjevan1bij1.gif"[/img][img]"plaatjevan1bij1.gif"[/img]
[img]"plaatjevan1bij1.gif"[/img][img]"plaatjevan1bij1.gif"[/img][img]"plaatjevan1bij1.gif"[/img]
[img]"plaatjevan1bij1.gif"[/img][img]"plaatjevan1bij1.gif"[/img][img]"plaatjevan1bij1.gif"[/img]

Zo?

[Verwijderd]

het moet wel een kleurenplaatje worden, dus moet ik wel heel veel plaatjes hebben.

[Verwijderd]

Verwijderd schreef op 19 maart 2004 @ 11:53:
Iemand een suggestie waarmee het ook (en zo snel mogelijk) gaat werken onder mozilla?

Floats of absolute positioning?

[Battle Bunny]

Plus dat je een beetje een lomp groot HTML bestandje krijgt wanneer je 500x500 img'es neer wilt zetten

[Rey Nemaattori]

Verwijderd schreef op 19 maart 2004 @ 11:58:
het moet wel een kleurenplaatje worden, dus moet ik wel heel veel plaatjes hebben.

Dit is het putn waarbij je aan bewegende gifjes of Flash gaat denken. Met pixels gooien vreet systeembronnen, metname als jij ook nog eens 16-bits plaatjes wilt produceren. Ten eerste moet je ongeloofelijk veel plaatjes hebben, daarnaast moet je gigantisch veel van dit soort plaatjes naast en onder elkaar plaatsen.

Kun je beter ASCII-art gebruiken

[Bosmonster]

Lijkt me meer iets voor Flash of serverside scripting (GBLib bijvoorbeeld).

[T-MOB]

zie het probleem met de div's niet zo...

code:

 <div id="plaatje">
    <div></div><div></div>etc, etc, etc.
 </div>

code:

#plaatje { width: x; height: y; }

#plaatje div { float: left; width: 1px; height: 1px; }

Moet het aantal div's in #plaatje gelijk zijn aan x * y

edit:
De bovenste post op deze GOT-pagina is misschien wel interessant voor je... ASCI-art in textbox :-)

[ Voor 33% gewijzigd door T-MOB op 19-03-2004 12:11 ]

[Verwijderd]

T-MOB schreef op 19 maart 2004 @ 12:04:
zie het probleem met de div's niet zo...

code:

 <div id="plaatje">
    <div></div><div></div>etc, etc, etc.
 </div>

code:

#plaatje { width: x; height: y; }

#plaatje div { float: left; width: 1px; height: 1px; }

Moet het aantal div's in #plaatje gelijk zijn aan x * y

edit:
De bovenste post op deze GOT-pagina is misschien wel interessant voor je... ASCI-art in textbox :-)

dit werkt niet goed. IE maakt er iets anders van de mozilla en het is nog trager dan tekst

[T-MOB]

jep default margins zijn verschillend.... margin: 0; padding: 0;

Maargoed, dat het traag is is natuurlijk logisch. Je gebruikt per pixel 11 tekens tekst, da's minimaal 11bytes per pixel. Wordt een plaatje van 300x400 dus meer dan 1mb.

Misschien PHP met GD-library iets voor je...

[RolandWitvoet]

1 woord: JAVA

[André]

RolandWitvoet schreef op 19 maart 2004 @ 13:16:
1 woord: JAVA

Leg uit, ik persoonlijk vind JAVA een van de meest waardeloze dingen voor op een website.

[Bosmonster]

[edit]

Hmm.. ik denk da Flash hier eerlijk gezegd nogal van over z'n nek gaat met 500x500 pixels (250.000!!). Java is hier bijna de enige oplossing als je het clientside wilt laten genereren. Al moet je de data dan nog wel over zien te pompen naar de client. 250.000 RGB waardes is dan 2MB ofzo Als het niet veel meer is...

Veel moeilijk gedoe als je dit gewoon serverside kunt genereren en cachen in een afbeelding met bijvoorbeeld GDLib.

[ Voor 92% gewijzigd door Bosmonster op 19-03-2004 14:21 ]

[Verwijderd]

T-MOB schreef op 19 maart 2004 @ 12:38:
jep default margins zijn verschillend.... margin: 0; padding: 0;

Maargoed, dat het traag is is natuurlijk logisch. Je gebruikt per pixel 11 tekens tekst, da's minimaal 11bytes per pixel. Wordt een plaatje van 300x400 dus meer dan 1mb.

Misschien PHP met GD-library iets voor je...

met margin en padding op nul gaat mozilla al zowat op zijn bek met een plaatje van 100 bij 100 en IE maakt er alles behalve een vierkant van

Java is geen optie, ik ben op zou naar de snelste HTML manier.
Tekst staat op de eerste plaats in zowel Mozilla als IE.

[SchizoDuckie]

http://razorblade.kicks-ass.net/divtest.html

Creert een veld van 100x100 span's van 4x4 pixels in een containing div van 400x400px. De spans vullen de container, en zo krijg je een gekleurd vierkant

alleen:
IE Is er zo klaar mee (al zie je je processor usage wel evn tegen het plafond gaan)
Maar mozilla stopt het script gewoon zonder iets op beeld te zetten, en geeft een "Error: too much recursion" 't is alleen maar een simpele dubbele for loop...

is dat niet gewoon een hele ranzige bug?


[edit] als je dit wil hebben voor een pixel randje van 2 regels hoog zou het wel moeten kunnen in moz volgens mij.

[ Voor 94% gewijzigd door SchizoDuckie op 20-03-2004 00:17 ]

[RolandWitvoet]

André schreef op 19 maart 2004 @ 14:02:
[...]

Leg uit, ik persoonlijk vind JAVA een van de meest waardeloze dingen voor op een website.

Je hebt duidelijk geen idee van wat java is. Als je al niet weet dat java een canvas heeft waar je gewoon op kunt tekenen (daar zou windows nog wat van kunnen leren), maar je hebt al wel je mening klaar liggen over dat java waardeloos is...

[SvMp]

Papa Eend schreef op 19 maart 2004 @ 23:44:
http://razorblade.kicks-ass.net/divtest.html

Creert een veld van 100x100 span's van 4x4 pixels in een containing div van 400x400px. De spans vullen de container, en zo krijg je een gekleurd vierkant

alleen:
IE Is er zo klaar mee (al zie je je processor usage wel evn tegen het plafond gaan)
Maar mozilla stopt het script gewoon zonder iets op beeld te zetten, en geeft een "Error: too much recursion" 't is alleen maar een simpele dubbele for loop...

is dat niet gewoon een hele ranzige bug?


[edit] als je dit wil hebben voor een pixel randje van 2 regels hoog zou het wel moeten kunnen in moz volgens mij.

ding werkt alleen niet onder Epiphany (Mozilla) @ FreeBSD.
Not done dus.

[André]

RolandWitvoet schreef op 20 maart 2004 @ 00:29:
[...]


Je hebt duidelijk geen idee van wat java is. Als je al niet weet dat java een canvas heeft waar je gewoon op kunt tekenen (daar zou windows nog wat van kunnen leren), maar je hebt al wel je mening klaar liggen over dat java waardeloos is...

Hoe kom je bij die ongegronde mening? Waarom zou ik niet weten wat JAVA is? Waar heb ik gezegd dat ik niet weet dat JAVA een canvas heeft? Waar lees jij dat ik geen JAVA kan proggen?

Ik zit al een tijdje in het vak en heb mijn mening al aardig gevormd aan de hand van de praktijk. Maar feit blijft dat JAVA in een browser gewoon ZUIGT. JAVA zelf is niets op aan te merken en werkt prima, vooral in een J2EE omgeving.

[Clay]

alleen:
IE Is er zo klaar mee (al zie je je processor usage wel evn tegen het plafond gaan)
Maar mozilla stopt het script gewoon zonder iets op beeld te zetten, en geeft een "Error: too much recursion" 't is alleen maar een simpele dubbele for loop...

is dat niet gewoon een hele ranzige bug?

nee. dat ligt aan:

code:

...

function onload() {
   
}


</script>
</head>

<body onload="onload()">
...

Daar komt die recursion error uit. Het duurt ueberlang, maar als je het anders noemt doet moz het ook. Vind het trouwens wel raar dat een function onload() wel in de window.onload komt, maar niet onload uitgevoerd wordt...