Afbeelding met dynamische overlay

[lpb]

Ik ben bezig met een website voor een soort van interactief kunstwerk. Het interactieve van het kunstwerk is dat hij van kleur veranderd als er iemand in de buurt staat. In de voet van het kunstwerk zitten sensoren die detecteren waar en op welke afstand iemand zich bevindt.

Op de website is straks het kunstwerk te zien via een webcam en er moet ook een schema/plattegrond te zien zijn waarop je ('zo realtime mogelijk') kunt zien waar er zich personen bevinden om het kunstwerk heen.

Hieronder zie je het plattegrondje wat ik inmiddels gemaakt heb:

Verder zijn de volgende dingen nog van belang:

• De sensoren detecteren 5 x 5 segmenten en met overlappingen hoeft geen rekening gehouden te worden.
• Er hoeft maar 1 persoon per segment weergegeven te worden
• Onder het kunstwerk zit een pc en die kan de actuele variabelen in elk gewenst formaat doorsturen naar de webserver.

Mijn vraag is nu aan jullie: hoe en met welke techniek kan ik het beste gebruiken om dit voor elkaar te krijgen? Zoals op deze link te zien is heb ik een achtergrond afbeelding waar ik met DIV'jes transparante PNG's voor plaats. Maar hoe krijg ik dit dynamisch?

Mijn idee zelf is om op alle mogelijke posities (dit zijn er 25) een DIV'je te plaatsen die op visibility:hidden staat. Via de pc in het kunstwerk moeten er dan continu variabelen doorgestuurd worden welke de visibility van bepaalde DIVs veranderen. Het kaartje zal dan in een iframe komen welke steeds gerefreshed zal moeten worden. Volgens mij is dit niet de meest goede manier...

NB:Ik hoop dat jullie er chocola van kunnen maken en dat dit niet als script-request wordt gezien. Het is puur dat ik even wat tips en handvaten wil hoe ik dit het beste kan aanpakken. Alvast bedankt!

[Bosmonster]

Dat er een soort van polling plaats zal moeten vinden is logisch denk ik. Dit kun je echter ook met AJAX doen. Pak een library als jQuery bijvoorbeeld en je kunt eenvoudig een XML of JSON request doen. Kun je het met een simpele extra nog laten animeren ook.

De vraag is waar je de gegevens vandaan haalt. Zijn deze beschikbaar voor een webserver bijvoorbeeld?

minor detail trouwens in je code: Waarom die divs? Je kunt toch ook gewoon de afbeeldingen absoluut positioneren

[ Voor 39% gewijzigd door Bosmonster op 22-06-2009 12:24 ]

[lpb]

Bedankt voor je reactie!

Bosmonster schreef op maandag 22 juni 2009 @ 12:22:
Dat er een soort van polling plaats zal moeten vinden is logisch denk ik. Dit kun je echter ook met AJAX doen. Pak een library als jQuery bijvoorbeeld en je kunt eenvoudig een XML of JSON request doen. Kun je het met een simpele extra nog laten animeren ook.

Zit wat abracadabra voor mij tussen, maar ga ik 'even' uitzoeken

De vraag is waar je de gegevens vandaan haalt. Zijn deze beschikbaar voor een webserver bijvoorbeeld?

Ik dacht eraan om vanuit de pc in het kunstwerk via bijvoorbeeld wget continu een query uit te sturen naar de webserver..

minor detail trouwens in je code: Waarom die divs? Je kunt toch ook gewoon de afbeeldingen absoluut positioneren

Kan ook idd, maar ik dacht wellicht gebruik te maken van de visibility van de div'jes maar dit kan ongetwijfeld ook anders.

[Joolee]

lpb schreef op maandag 22 juni 2009 @ 14:41:
Bedankt voor je reactie!

[...]

Kan ook idd, maar ik dacht wellicht gebruik te maken van de visibility van de div'jes maar dit kan ongetwijfeld ook anders.

Je kunt ook gebruik maken van de visibility van de afbeeldingen =P

Het lijkt mij het makkelijkste om via een interval een ajax request te doen naar je webserver. Dan zou ik op de webserver een script laten antwoorden met een JSON string met de locaties van de poppetjes in px vanaf linksboven.

Enige dat je dan hoeft te doen is in JQuery per poppetje een animate aanroepen om deze naar zijn nieuwe positie te animeren.