Monthly Archives: June 2007

rcmovie.de

E’ da un paio di settimane che ho scoperto un bellissimo sito tedesco di filmati relativi al mondo r/c; é tedesco, e in Germania si sà, il modellismo è un’istituzione da decenni. Vi invito a vedere cosa c’è oggi sul mercato, a livello di elicotteri ed aerei a turbina (turbine per il mondo r/c, copie ‘ridotte’ delle vere turbine full-scale) o mega-progetti elettrici con assorbimenti di 2000-3000 Watts, o con motori 250cc a 4T su aerei riproduzione della seconda guerra mondiale… insomma rcmovie.de oltre a condividere con questo sito il player flv, è ricchissimo di filmati entusiasmanti e si sta rapidamente guadagnando la fama del portale n.1 per i video r/c.

Loading the player…


Un giro bello aggressivo a bordo di un Trex 600. © cbdane, YouTube

L’elicottero nel video, invece è un Align T-Rex 600; da come “suona” va almeno ad 8 celle; anche io avevo tentato di vedere cosa succede a mettere una telecamera a bordo del mio Quick EP10 5s, ma questo elicottero, ovviemente, è un tantino più “motorizzato”.

Visto che siamo già in questo post, aggiungo questo filmato da vedere: un volo in FPV (First Person View) a bordo di un T-Rex 450 – che non è come mettere una telecamera e volare, qui le immagini vengono trasmesse a terra ad un paio di video goggles e quindi con questo nuovo ‘punto di vista’ (prima persona) , si vola. Anche di questo argomento ci sarebbe da parlare ore… e a me piacerebbe acquistare un apparato wireless di trasmissione audio-video assieme a dei video goggles e ‘pilotare’ i miei modelli come se fossi a bordo… si ma… ($$$).

jquery.slideviewer.js

Dopo avere sperimentato un altro pò con la galleria di immagini realizzata nel precedente post, ho realizzato il mio primo plugin ufficiale per jquery: slideViewer.

Si usa molto banalmente; si parte da una lista non ordinata (UL) con dentro delle immagini. Gli si dà un ID (id=”myGalleryID”) ed una classe (class=”svw”) e in perfetto stile jQuery gli si ‘applica’ il plugin dopo avere atteso che sia il DOM sia le immagini si siano caricate:

1
2
3
$(window).bind("load", function() {
	$("div#myGalleryID").slideView();
});

27 giugno 2007: enhanced tooltips
Una cosa che mi ha portato a verificare se un altro plugin poteva essere integrato in slideViewer opzionalmente, e cioè che potesse funzionare con o senza altri plugin estendendo le sue features, è stato il numero di feedback ricevuti sulla discussion list di jQuery.

Commenti come questo, proprio dall’inventore dell’utilissimo toolTip plugin mi hanno fatto molto piacere:

Now, how cool is that? Great stuff. I love the backinout easing. I consider integration of plugins the toughest part of all plugin development, nice to see some great work getting done on that matter :-)

In un paio di giorni (non full-time eh, ho anche gli elicotteri da far volare…) ho integrato il toolTip plugin e ho reso parametrizzabili il tipo di animazione e la sua durata. Il tutorial con gli esempi sono sempre alla stessa pagina comunque posto in queste due righe:

1
2
3
4
5
$("div#mygalthree").slideView({
	easeFunc: "bounceinout",
	easeTime: 2400,
	toolTip: true
});

Si tratta del comando che diamo nell’head della nostra paginetta html se vogliamo creare un galleria di immagini che abbia 2 secondi e quasi-mezzo di durata della transizione tra un foto e l’altra, e che rimbalzi per esempio tramite la funzione bounceinout. Ah appunto, vogliamo anche un tooltip un pò gajardo…

et voilà, slideViewer plugin per jQuery.

Got it, thanks. Fantastic, most lightweight/best slide carousel out there. money. :-P
— E.

Una lista di siti che usano jquery.slideviewer aggiornata al 01/04/2008:
Zachary Zavislak Photography
Di Stefano landscaping
Rival Songs

jQ stripViewer

Come probabilmente si é capito da vari post su questo sito, tra i miei interessi al momento c’è jQuery, questo framework JS che sta rivoluzionando il mio modo (ma non solo il mio) di scrivere javascript (il behaviour di una pagina).
Inspirato dagli effetti in dynamic HTML di questo sito e dalle ormai ‘vecchie’ interfacce in Flash tutte sliding e rimbalzanti, mi sono detto: ma perchè non farne una con jQuery?

strip viewerDi componenti slideShow in js o scritte anche con jQuery già ce ne sono, quindi non mi sono inventato nulla di nuovo, ma ho creato una base su cui lavorare. L’obiettivo é arrivare alla realizzazione di un plugin jQuery per visualizzare delle immagini in una mini-gallery e tale gallery dovrebbe essere parametrica cioè funzionare a prescindere dal numero e dimensione delle foto. Un motore che vada bene per foto grandi e piccole e basato sull’ormai standardizzato concetto che il javascript nelle pagine deve essere “degradabile” e cioè che se l’utente non ha l’interprete JS abilitato nel browser, semplicemente non vede gli “effettini” ma ha accesso comunque ai contenuti.

E così ho creato uno stripViewer (no, non ci sono donnine nude; per strip intendo una ‘fascia’, e cioè un’immagine lunga di cui si vede solo una porzione), e cioè un componente che ‘muove’ con un effetto easing le immagini della gallery, rivelandone solo una alla volta. Il tutto a partire da un markup semplicissimo, come questo:

1
2
3
4
5
6
<ul>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer01.jpg" /></li>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer02.jpg" /></li>
	<li><img width="200"  height="100"  alt="307 r/c airliner"  src="stripViewer03.jpg" /></li>
	<!-- eccetera -->
</ul>

Ok vediamo nello specifico che ci facciamo con questa lista. La lista è una banalissima lista flottata (così tutti i LI sono orizzontali) e all’interno di ogni LI abbiamo messo un’immagine.
Ok una lista di immagini. Bene, ci mettiamo intorno una DIV col seguente stile:

1
2
3
4
5
6
7
8
#stripViewer {
	position: relative;
	width: 200px;
	height: 100px;
	overflow: hidden;
	border: 5px solid red;
	margin: 2em 0;
}

Bene, si vede che questa DIV funge da maschera per il suo child (la lista UL) e ne rivela solo 200px; quindi tutte le immagini le dobbiamo fare 200px? Si, fino a che non avrò reso parametrico il valore width del container della lista…
Ok e ora?
Ora creiamo l’interfaccia. Una serie di ‘bottoni’ che comandino la gallery.
Partiamo sempre da una lista. Le liste, ricordate, sono la chiave per scrivere la struttura di un sito: tutto può essere una lista.

1
2
3
4
5
6
7
<ul>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<li><a href="#">&nbsp;</a></li>
	<!-- tanti Li quanti sono quelli della lista immagini -->
</ul>

Ok, a questo punto aggiungiamo un pochino di javascript (jQuery).

1
2
3
4
5
6
7
8
var steps = $("#stripViewer>ul > li > img").attr("width");
	$("#stripTransmitter ul").find("a").each(function(i) {
		$(this).append( (i+1) );
		var cnt=-(steps*i);
		$(this).click( function() {
			$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
		});
	});

Vediamo come funziona:

1
var steps = $("#stripViewer>ul > li > img").attr("width");

Qui cerchiamo la dimensione delle immagini nella lista. Si, devono essere tutte della stessa larghezza (ma lavorerò anche su questo per svincolarla dalle dimensioni fisse e renderlo così parametrico).
L’attributo width delle immagini mi torna 200px.
Ok quindi gli step da fare sono tuti da 200. Ad ogni click ’scorro’ sull’asse x di 200px o multipli di esso (a seconda del tasto premuto).

1
2
3
$("#stripTransmitter ul").find("a").each(function(i) {
		$(this).append( (i+1) )
});

Qui per ogni tag A nella mia lista in “div#stripTransmitter” stampo (.append()) il numero. Otteniamo così una lista con bottoni numerati da 1 a n.

E ora la parte divertente:

1
2
3
4
var cnt=-(steps*i);
$(this).click( function() {
	$("#stripViewer ul").animate({ left: cnt}, 750, 'expoinout');
});

Qui la variabile cnt vale 200(steps) moltiplicato l’iteratore (i) quindi varrà 200, 400, 600 ecc.
Sul click di questi tag A nella nostra lista in “div#stripTransmitter” usiamo il metodo .animate() per dire che ci spostiamo a sinistra, quindi negativamente (-) per i pixel passati da steps , in 750 millesimi di secondo con animazione easing di tipo “expoinout”. per funzionare necessita ovviamente di jQuery Easing Plugin v1.1 ma se usassimo i metodi built-in di jQuery ci basterebbe scrivere “slow” al posto di “expoinout” e funzionerebbe lo stesso, ma senza easing effect.

Et voilà, uno stripViewer con jQuery.
Demo1: stripViewer di un’ unica immagine lunga
Demo2: stripViewer di una serie di immagini in una lista

Enjoy!

Google Maps Street View

gmaps street viewStreet View é una nuova feature di Google Maps che permette di navigare panorami (Adobe Flash) a 360 gradi, ad alta risoluzione, ad altezza della strada di varie (per ora, poche) città degli Stati Uniti. Google ha investito $25 (milioni) per l’operazione ed evidentemente per scattare tutte queste foto ha sguinzagliato i suoi “geeks” in giro per le città. Ecco il tipo di macchina fotografica impiegata.

La cosa simpatica che sta avvenendo, mentre questa nuova feature viene sempre più usata, é che ci sono siti che raccolgono le stranezze di Street View e cioè foto di persone e cose, che a causa dell’adattamento e della post-produzione necessaria a ricreare tutti questi panorami in Flash, appaiono stravolte nelle sembianze, addirittura senza faccia, o immortalati quando meno se lo aspettavano…. guardate un pò voi. Ma chissà cosa dicono le persone fotografate. Avranno dato l’autorizzazione a Google per diffondere le loro foto? Non credo proprio, si vede chiaramente che queste foto sono state scattate in maniera pseudo-automatizzata (ogni tot. metri).

With Street View, you can virtually explore city neighborhoods by viewing and navigating within 360-degree scenes of street-level imagery. It feels as if you’re walking down the street!

Io già ho visitato ‘a piedi’ tutta l’area vicino al bay bridge a San Francisco e vi assicuro che questa nuova feature é davvero fantastica e certamente diverrà popolare molto presto. Provate voi stessi.

Queste le città visibili ad oggi: San Francisco Bay Area, New York City, Las Vegas, Denver and Miami.