[ASP.NET] wisselende afbeelding pushen naar browsers

[theMob]

Beste forumleden,

als ik sta te fotograferen met klanten om me heen dan heb ik de camera meestal op de computer aangesloten zodat iedereen meteen het (test)plaatje op het scherm kan zien. Er is dan overleg mogelijk zodat er wijzigingen aangebracht kunnen worden voor de definitieve foto.

Het probleem waar ik heel vaak tegenaan loop is dat mijn klanten dan 'massaal' voor mijn laptop gaan staan en ik niets meer zie. Zij staan er namelijk vaak dichterbij terwijl ik vaak op een trapje sta oid. Ik moet dan iedere keer naar de laptop lopen. Ik vraag dan wel of ze even ruimte maken maar dat vergeten ze weer na een paar foto's en ja, het zijn klanten dus je wilt niet teveel pushen.

Het idee is nu IIS op mijn laptop te activeren en een webpagina te maken in Visual Basic zodat de klanten op hun eigen computer/laptop/iPad/smartphone de foto te zien krijgen en ik mijn laptop vlak bij me kan houden. Kijken of dat beter werkt.

Op zich is het maken van zo'n applicatie niet zo moeilijk natuurlijk, maar ik wil het liefste dat als er een nieuwe foto gemaakt wordt deze automatisch naar de webbrowser gepushed wordt zonder dat men steeds de pagina moet verversen. En ik heb geen idee hoe ik dat het beste doe.

Ik werk al vrij lang met Visual Basic en PHP/javascript op hobbyniveau, wat wil zeggen dat ik in staat ben om code te kopieëren en dan aan te passen

Hebben jullie een idee hoe ik dit zou moeten aanpakken en niet onbelangrijk, een link naar voorbeeldcode? Alvast bedankt.

[TJHeuvel]

Via het web is dit vrij moeilijk op te lossen, het is eenmaal stateless en connecties worden direct gesloten.

Is het probleem niet op te lossen door simpelweg de map waar de foto's in staan te delen, zodat iedereen op het netwerk hier bij kan?

[LeVortex]

TJHeuvel schreef op donderdag 20 oktober 2011 @ 14:31:
Via het web is dit vrij moeilijk op te lossen, het is eenmaal stateless en connecties worden direct gesloten.

Is het probleem niet op te lossen door simpelweg de map waar de foto's in staan te delen, zodat iedereen op het netwerk hier bij kan?

mwah, op tweakers krijg je ook een soort push berichtje met (aantal) nieuwe berichten. Dus het moet in iedergeval mogelijk zijn om een linkje weer te geven naar de volgende foto.

kun je niet een mooi android tablet kopen en dan doormiddel van RDP je laptop overnemen. Enorme lag natuurlijk, maar je foto komt na 1 seconden wel op je tablet terecht. Dus zie jij hem daarop en de rest gewoon op je laptop. Nadeel is dat je dus een tablet bij je moet dragen wat misschien niet heel handig is. Maar als je een langere kabel koopt staan die kopers wel verder weg.

[Wijnbo]

LeVortex schreef op donderdag 20 oktober 2011 @ 14:37:
[...]

mwah, op tweakers krijg je ook een soort push berichtje met (aantal) nieuwe berichten. Dus het moet in iedergeval mogelijk zijn om een linkje weer te geven naar de volgende foto.

kun je niet een mooi android tablet kopen en dan doormiddel van RDP je laptop overnemen. Enorme lag natuurlijk, maar je foto komt na 1 seconden wel op je tablet terecht. Dus zie jij hem daarop en de rest gewoon op je laptop. Nadeel is dat je dus een tablet bij je moet dragen wat misschien niet heel handig is. Maar als je een langere kabel koopt staan die kopers wel verder weg.

Volgens mij is dat "push" berichten gewoon een pollertje..

[TJHeuvel]

LeVortex schreef op donderdag 20 oktober 2011 @ 14:37:
[...]

mwah, op tweakers krijg je ook een soort push berichtje met (aantal) nieuwe berichten. Dus het moet in iedergeval mogelijk zijn om een linkje weer te geven naar de volgende foto.

Facebook, google en andere partijen doen het ook. Ik zeg ook nergens dat het niet mogelijk is, maar makkelijk is anders. Je kan inderdaad via AJAX pollen, maar Websockets of Flash kunnen ook oplossingen bieden.

[ Voor 27% gewijzigd door TJHeuvel op 20-10-2011 16:05 ]

[Beatboxx]

Je kan ook via javascript steeds refreshen (natuurlijk wel de foto cachen)

[theMob]

Ik zit nu inderdaad te denken aan iets dat ik vroeger ook wel eens gedaan heb:

Een pagina met twee frames waarvan de onderste een hoogte heeft van één pixel en dus 'onzichtbaar' is. Deze bevat een timer die de pagina iedere seconde ververst en dan na het laden kijkt of de ingebouwde variabele 'fotonaam' (=naam van de laatst genomen foto) nog steeds overeenkomt met de naam van de afbeelding in het grote frame. Als dat niet zo is dan wordt het grote frame ververst. Is heel simpel te maken.

Het staat me alleen bij dat ze cross-scripting over frames verboden hebben sinds ik zoiets voor het laatst gedaan heb, of was dat alleen als de pagina's van verschillende domeinen afkwamen? Ook weet ik eigenlijk niet of tablets en smartphones frames ondersteunen in de browsers. Maar goed, daar kom ik dan vanzelf wel achter.

[theMob]

Edit: of ja, gewoon de foto cachen en dan de hele pagina verversen. Hoe simpel kan het zijn

[HeSitated]

theMob schreef op donderdag 20 oktober 2011 @ 14:18:
Het probleem waar ik heel vaak tegenaan loop is dat mijn klanten dan 'massaal' voor mijn laptop gaan staan en ik niets meer zie. Zij staan er namelijk vaak dichterbij terwijl ik vaak op een trapje sta oid. Ik moet dan iedere keer naar de laptop lopen. Ik vraag dan wel of ze even ruimte maken maar dat vergeten ze weer na een paar foto's en ja, het zijn klanten dus je wilt niet teveel pushen.

Call me simpel, maar wat dacht je van een tweede monitor of een beamer?

[Cornholio]

Ik zou het simpel houden. Met een JavaScriptje een variabele heel vaak refreshen, en als deze veranderd is sinds de laatste keer refresh je de hele pagina zodat de nieuwe foto er komt te staan.

Of de foto op het schermpje van je camera bekijken

[theMob]

Tja, monitor meenemen heb ik aan gedacht, maar die staan meestal overal in het rond. Plus het is weer sjouwen en ik neem al genoeg mee. Op de camera kijken is voor nauwkeurig werken niet goed genoeg; op de computer zie je de scherpte veel beter en kan je de kleuren meten. Bovendien kan ik op deze manier zelfs op een heel andere locatie werken en dan contact houden via skype

Het begint overigens al te werken, ik kom er wel uit zo. Bedankt allemaal.

[kluyze]

Wikipedia: Comet (programming)
Comet:

Comet is a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it.

Geen idee of er ook een .NET API voor bestaat. Maar basically komt het erop neer dat je een ajax call vanuit de browser doet, en de server eigenlijk pas een response geeft als er nieuwe data is. En als die naar de browser gestuurd wordt, maakt de browser onmiddellijk een nieuwe ajax call.

Verder is er ook ergens een methode waarmee je eigenlijk een serie van images stuurt en de stream niet afsluit.
http://www.surveyor.com/s...lp/guides/serverPush.html

Maar dus bij HTML5 worden Web sockets geïntroduceerd Misschien kan je daar eens naar kijken.
http://websocket.org/echo.html
Voorlopig lijkt enkel Chrome dit te ondersteunen.

[theMob]

Hé bedankt, een paar serieuze mogelijkheden om het wat professioneler aan te pakken. Ik heb ze bekeken maar blijf op dit moment toch even bij javascript, want dat is vertrouwd terrein en het lijkt te gaan werken. Het draait toch maar om één of twee clients en dan in principe nog over het LAN; je moet het niet gaan doen met duizenden klantjes over het WAN want dan creëer je je eigen DDOS attack

[Woy]

Dit gaat meer over de clientside afhandeling, en past dus beter in WEB.

PRG->WEB

[webinn]

HeSitated schreef op donderdag 20 oktober 2011 @ 16:48:
[...]


Call me simpel, maar wat dacht je van een tweede monitor of een beamer?

with ^^

[theMob]

Nou, 't werkt. Vanaf m'n netboekje

[Alex)]

Mosterd na de maaltijd wellicht, maar wellicht kun je iets bereiken met jQuery's $.ajax (lekker simpel te gebruiken) i.c.m. een timer die iedere 5 seconden checkt of er een nieuwe foto is en zo ja, die inlaadt?

[theMob]

Goeie suggestie. Heb ernaar gekeken en al een paar mooie voorbeelden gezien. Ik denk dat ik daar eens mee ga proberen.

Wat ik nu heb is een basic proof-of-concept dat wel bruikbaar is in Chrome maar het mag van mij nog wel wat beter, met name aan de client kant.

Op dit moment herlaadt de hele pagina zichmet een simpel javascript timertje. Het gevolg hiervan is dat nadat een foto geladen is de volgende herlaadpoging (zelfde foto is nog aanwezig) resulteert in een 'knipper' in Chrome, dus het scherm wordt een keer wit voordat de foto definitief verschijnt.

In IE9 en op mijn Android telefoon moet ik handmatig de pagina verversen, daar werkt de Javascript timer wel in die zin dat de browser opnieuw contact zoekt maar de nieuwe pagina wordt niet geladen. Met frames kom ik problemen tegen omdat de techniekjes die ik vroeger gebruikte niet meer lekker werken.

Al met al lijkt jQuery een betere oplossing, tenminste als ik het ga begrijpen

[noes]

Makkelijkste optie is dmv een window.setInterval iedere 100ms (10x per sec) een poll te doen naar je server. De server geeft de URL van de laatste foto terug, je scriptje vergelijkt dat met je huidige afbeelding en, indien nodig, vervangt deze.

Hier is het stuk front-end, doe je zelf de backend?

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p class="watermerk">jouw naam, dit is automatisch een watermerk</p>
</body>
<style type="text/css">
    html{
        background: #ccc url('jouwlogo.png') no-repeat scroll 50% 50%;
        min-height: 100%;
        min-width: 100%;
        margin: 0;
    }
    
    .watermerk{
        opacity: .8;
        position: fixed;
        bottom: .5em;
        right: .5em;
        color: rgba(255,255,255,.8);
        background-color: rgba(0,0,0,.5);
    }
</style>
<script type="text/javascript">
    window.setInterval('getLatestImage', (1000/10)); // 10x per sec getLatestImage aanroepen
    function getLatestImage(){
        $.get("/latestimage.php", function(data){
            if(data != $(html).css('background-image')){
                $(html).css('background-image', data);
            }
        });
    }
</script>
</html>

edit: nog even ter verduidelijking, ik gebruik background-image om ervoor te zorgen dat je verhoudingen altijd kloppen. Je kan een imagehandler (bijv: http://webimageresizer.codeplex.com/) gebruiken om de plaatjes in het juiste formaat terug te geven, dan pas je de actie ín de if-statement aan (tip: jquery $(window).height(); ).

Eventueel zou je nog een div met een transparent gif als background over de HTML heen kunnen leggen en de rechtermuisklik kunnen disablen, puur om het downloaden van de achtergrond afbeelding iets moeilijker te maken. Het blijft mogelijk, dat is het risico als je je probleem op deze manier wil oplossen.

Succes!

PS: bovenstaande code is volledig ongetest. Waarschijnlijk correct, maar ik ben wel eens slordig op zaterdagavond je komt er waarschijnlijk wel uit!

[ Voor 23% gewijzigd door noes op 22-10-2011 23:07 ]

[theMob]

Hé, heel erg bedankt voor de code, ziet er prima uit zelfs voor zaterdagavond. Alleen werkt het nog niet helemaal

Als ik de code bekijk dan lijkt me 'jouwlogo.png' het initiële plaatje dat te voorschijn komt als de pagina geladen wordt en dat werkt.

Het watermerk is een leuke toevoeging, werkt ook.

Dan kom ik bij "/latestimage.php", dat is neem ik aan een .php pagina die een plaatje uitstuurt. Dat kende ik nog niet en heb daar mee zitten spelen. Het lukt nu om deze pagina te maken, die inderdaad een plaatje uitstuurt, en die ook op te roepen is via "latestimage.html" die als enige inhoud heeft <img src="latestimage.php">. Ik krijg dan het plaatje te zien, dus dat werkt en zou dan ook moeten werken binnen jouw script maar dat doet het nog even niet en ik heb geen idee waarom niet.

Kopieerbeveiliging is niet zo'n punt omdat ik in het gebouw van de opdrachtgever werk als ik dit ga gebruiken; die betaalt dus al voor de plaatjes.