Stacking transparent PNG images

[Verwijderd]

Ik ben bezig met een web applicatie om online grafieken te maken. Deze grafieken zijn opgebouwd uit layers (achtergrond, datapuntjes, lijntje, etc). Ik zou graag een interface maken waarbij de user op een photoshop-achtige manier, layers kan verbergen en showen, zonder dat hiervoor server-requests nodig zijn. Het liefste zou ik de plaatjes vector-based houden. Ik genereer de grafieken in R, dus output is vector based postscript, wat dan weer makkelijk te converten is naar PNG, JPG of PDF.

Er zijn verschillende manieren om dit aan te pakken.

- Iedere layer naar een apparte PNG weg te schrijven, en deze dan in de browser op elkaar te stacken. Daarvoor is het natuurlijk belangrijk dat iedere PNG transparant is, de browser dit goed goed laat zien. Nadeel is dat PNG geen vector based afbeeldingen ondersteunt.

- Een statisch stukje flash script, wat PNG plaatjes inlaadt en ze over elkaar displayed.

- Op de server site een swf (flash) genereren, met daarin de plaatjes, vector based, en ingebouwd al de hide en show opties. Nadeel is dat het misschien lastig is om van een aantal postscript files een swf te maken.

Iemand ervaring met iets dergelijks? Of voorbeelden?

[ Voor 43% gewijzigd door Verwijderd op 06-11-2009 07:21 ]

[Verwijderd]

Moet gaan werken. Voorbeelden en ervaring ermee niet, maar als je ze goed over elkaar heen legt en ze een eigen id geeft, moet je ze met JS kunnen hiden/showen.

Ik zou zeggen; probeer het uit en mocht het je niet lukken, kom dan terug.

Ah, zelfs om 7:21 een post editten terwijl ik aan het posten ben.

De non-flash versie vind ik toch echt zonder twijfel de beste oplossing.

[ Voor 23% gewijzigd door Verwijderd op 06-11-2009 07:22 ]

[Spinal]

Ik weet niet wat je browsereisen zijn, maar als je het vector-based wilt houden dan is werken met SVG misschien iets voor je?

[Bosmonster]

Afbeeldingen stapelen is niet zo moeilijk. Gewoon in een container zetten met position:relative en ze allemaal position: absolute geven en top:0 en left: 0. Dan liggen ze allemaal over elkaar heen.

Geef ze eventueel id's mee en je kunt per afbeelding deze natuurlijk aan- en uitzetten.

Wat heb je zelf al geprobeerd?

[Orion84]

Over het al dan niet als vector willen houden: Moet de gebruiker ook in kunnen zoomen en dergelijke? Anders is er volgens mij totaal geen reden om het als vector te presenteren en werken gestackte PNG's ook prima.

Dus afgezien van de vraag wat je zelf al geprobeerd hebt, de vraag waarom je het zo graag als vector wilt houden, welke functionaliteit wil je bieden die daar baat bij heeft?

[Verwijderd]

Er is al een boel gedaan op dit gebied...

Hieronder interessante CSS oplossingen voor bepaalde toepassingen...

http://cornae.org/article...amic-pie-graphs-using-css
http://cornae.org/article...c-column-graphs-using-css

ALA heeft ook al hier eens iets over gepubliceerd...
http://www.alistapart.com...essibledatavisualization/


Als ik verder naar je probleem kijk lijkt het er op dat je gewoon png's als achtergrondplaatjes voor gelaagde elementen kunt gebruikten die je idd absoluut positioneert binnen een ander gepositioneerd element en met js die lagen aan of uit zetten.

[pedorus]

Verwijderd schreef op vrijdag 06 november 2009 @ 06:46:
Ik genereer de grafieken in R, dus output is vector based postscript, wat dan weer makkelijk te converten is naar PNG, JPG of PDF.

R kan prima transparante PNG of PDF outputten, dus waarom zou je tussenstappen doen? Waarom zou je eigenlijk ooit nog postscript als output willen hebben?

Het lijkt me zelfs niet zo moeilijk om zowel de html als bijbehorende png'tjes door R te laten outputten. Het lastigste lijkt me nog de layers scheiden, om wat voor plotjes gaat het? Het mooiste zou een oplossing zijn dat R alleen 1 html-bestand output, zoals de link hierboven.

[geert1]

Misschien is deze reactie totaal onrelevant, maar voor het geval het van pas komt: Google Charts API.