Vi presento il mio piccolo ed umile progetto: un player, molto spartano, che visualizza l’immagine presa da una webcam.

Ambiente di programmazione:

• C++ basato sul tool MINGW
• framework QT 4.5.3
• IDE QTcreator 1.2.1
• librerie OpenCV

Il framework QT permette di creare programmi multipiattaforma: modificando solo il percorso delle librerie e degli “include” posso compilare lo stesso pregramma e crearmi degli eseguibili per win32, linux32 o macosx. Le OpenCV sono delle librerie opensource per la computer vision e per maggiori ragguagli vi rimando a questo dettagliato articolo di Matteo Lucarelli.

Link:
QT 4.5.3 win32
QT 4.5.3 linux32
QT 4.5.3 macosx

OpenCV library
di tutto e di più sulle OpenCV

Il codice è molto semplice, l’unica difficoltà riscontrata è stata su come far visualizzare l’immagine della cam sul widget. Scorrazzando su internet ho trovato del codice che mi ha permesso di trasformare l’immagine rilasciata dalla libreria opencv in una label.
Di seguito il risultato su tre diversi S.O.

WIN7

Linux Ubuntu 9.10

Mac OS X 10.5.8

Ed ecco il codice:
Note: There is a file embedded within this post, please visit this post to download the file.
ovviamente dovete cambiare il percorso delle lib e degli include relative a OpenCV; visto che questo punto l’ho studiato per tutti e tre i S.O. se avete problemi chiedete pure.

Enjoy it!

Dopo avere giocherellato con l’OSX 10.5.8, il Leopardo dell’Apple, ho cominciato a navigare sul web googlando alla ricerca di informazioni riguardante la programmazione in ambiente OSX, finché non mi ha incuriosito questo articoletto del 2005, ma che ho scoperto essere ancora di grande attualità.
Registrato al sito dell’Apple riservato agli sviluppatori (Mac Dev Center), ho scaricato ed installato l’ambiente di sviluppo integrato Xcode^W 3.1.2.
Xcode lavora in congiunzione con Interface Builder^W (IB), un tool grafico per realizzare interfacce grafiche. Xcode include GCC, che è in grado di compilare codice C, C++, Objective C/C++ e Java. Supporta ovviamente i framework Cocoa e Carbon, oltre ad altri.
Mi sono dunque soffermato sull’Objective C^W , linguaggio di programmazione orientata agli oggetti^W e su Cocoa , il framework o ambiente di programmazione orientato agli oggetti sviluppato da Apple Inc. per il sistema operativo Mac OS X.
A questo punto, per iniziare, consiglio una lettura attenta, dei primi dieci capitoli (sono abbastanza brevi) del sito MACOCOA e di qualche tutorial (in rete se ne trovano diversi anche in italiano) come:
Programmare MacOSX
Diventare un Xcoder (e-book)
Presto, dopo essermi ben documentato, le prime impressioni e magari qualche prima piccola applicazione.
Enjoy it!

PHPGraphLib è una libreria “preconfezionata”, orientata agli oggetti e scritta in php che utilizza le librerie GD. Essa è destinata alla creazione di grafici per l’inserimento di questi ultimi in pagine web. I grafici permettono di mostrare a tutti i dati o risultati numerici in maniera più chiara tramite l’utilizzo di immagini e colori.
L’uso della libreria facilita il compito agli sviluppatori meno esperti anche perché include un sistema di gestione degli errori molto efficace. I risultati ottenibili con questa libreria sono veramente stupefacenti, la potenza del codice inserito nell’unica pagina di PHPGraphLib possono essere utilizzati al massimo, date le piccole dimensioni di quest’ultima.
Sul sito dell’autore (Elliott Brueggeman) possiamo trovare la pagina di download da dove scaricare la libreria, disporre della guida ufficiale e di alcuni esempi testuali e video.
Per potere utilizzare PHPGraphLib bisogna salvare i due file contenuti nella libreria, “phpgraphlib.php” e “phpgraphlib_pie.php”, in una cartella. Successivamente occorrerà modificare il file php.ini ed eliminare il commento ( ; ) alla riga “extension=php_gd2.dll” nel caso sia commentata.
Per ultimo occorrerà includere il file *.php della libreria nella nostra pagina php e scrivere il codice per creare il grafico.
Nota: bisogna creare in grafico in una pagina php a parte e richiamarla come imagine nella pagine dove vogliamo visualizzare il grafico.

Vediamo dei semplici esempi:

include("phpgraphlib.php"); 
$graph=new PHPGraphLib(500,350);
$data=array(12124,5535,43373,22223,90432,23332,15544,24523,32778,38878,28787,33243,34832,32302);
$graph->addData($data);
$graph->setTitle("Widgets Produced");
$graph->setGradient("red", "maroon");
$graph->createGraph();

salviamolo come “immagine.php” e richiamiamo il grafico nella pagina htlm con

<img src="immagine.php">

il risultato è il seguente:

Nella pagina Statistiche di questo blog ho utilizzato queste librerie.
Nel caso del diagramma a torte, per esempio, passo dinamicamente i valori da diagrammare in questo modo:

<img src="<?php echo "statistiche_torta.php?a=$a&r=$r&s=$s&m=$m" ?>" />

Nel file ” statistiche_torta.php”

    include ("phpgraphlib.php");
    include ("phpgraphlib_pie.php");
 
    $a=$_GET['a'];
    $r=$_GET['r'];
    $s=$_GET['s'];
    $m=$_GET['m'];
 
    $graph=new PHPGraphLibPie(450,250);
    $data=array("Aggregatori"=>$a, "Motori di ricerca"=>$r,"Social Network"=>$s, "E.mail"=>$m);
    $graph->addData($data); 
    $graph->setLabelTextColor("silver");
    $graph->setLegendColor("silver");
    $graph->setLegendOutlineColor("white");    
    $graph->setTitle("Parlano di me....");
    $graph->setLabelTextColor("50,50,50");
    $graph->setLegendTextColor("50,50,50");
    $graph->createGraph();

Ovviamente è possibile passare direttamente l’array da diagrammare oppure ricavare i valori eseguendo query in mysql, complicando il codice.

Enjoy it!

Per chi sviluppa siti web o anche per gli smanettoni dei temi di wordpress, cercando di migliorare il layout, il codice HTML o il CSS, uno strumento che senza dubbio non deve mancare è il programma Firebug.
Firebug è un’estensione di Mozilla Firefox che permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript. Firebug fornisce anche altri strumenti per lo sviluppo web come una console JavaScript e una funzione chiamata “Net” che permette di monitorare il tempo di caricamento in millisecondi di immagini e script. Oltre che per il debug, Firebug è uno strumento indispensabile per testare la sicurezza e la performance dei siti web.
Firebug è stato creato da Joe Hewitt, uno dei creatori di Firefox, ed è attualmente sviluppato e mantenuto dal Firebug Working Group.
Addirittura FireBug è estendibile con add-on che aggiungono nuove funzionalità o migliorano quelle esistenti. Una selezione la trovate in questo post di SixRevisions.
Una volta installato come estensione di firefox, l’uso è semplicissimo.
Il video seguente spiega chiaramente le potenzialità di Firebug (per una migliore visualizazione visualizzare il video a schermo interno).

Un effetto molto gradevole ed utile nell’economia di un sito web è senz’altro un’interfaccia a tab. JQuery permette di crearne di complesse ma la volontà di questo articolo è descriverne uno base, semplice, ma comunque funzionale e facilmente adattabile a molte esigenze.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file e la cartella:

• index.htm
• style.css
• scripts.js
• cartella images

Passo 1 – creazione delle immagini

Decidete quanti tab sono necessari al vostro progetto (nel mio caso 3). Se non siete bravi in grafica e design cercate su internet le immagini che concettualmente si avvicinano al contenuto di ogni tab.
Modificate le dimensioni tenendo conto dello spazio che volete utilizzare.
A questo punto duplicate la vostra immagine e modificatela con effetti a piacere. Una volta terminato, create una nuova immagine ed incollate sopra la figura modificata e sotto la figura originale. (vedi immagine)

Passo 2 – file HTML e CSS

Se aprite il file index.html troverete:

<ul id="tabMenu">  
     <li class="tabrss selected"></li> <!-- bottone di default-->  
     <li class="tabpost"></li>  
    <li class="tabcom"></li>  
</ul>

Nel file style.css, il div “tabMenu” è associato a:

li.tabcom  {background:url(images/tabcom.png) no-repeat 0 -77px;}
li.tabrss  {background:url(images/tabrss.png) no-repeat 0 -77px;}
li.tabpost {background:url(images/tabpost.png) no-repeat 0 -77px;}  
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -77px;}
li.selected {background-position:0 0;}

Come potete notare di default l’immagine (di dimensioni 77px / 77px) parte da -77 px (quindi viene vusualizzata la sezione a colori), se si passa il cursore del mouse sopra (voce “li.mouseover” nel file style.css) parte da 0 px (quindi viene visualizzata la sezione in b/n), così come quando viene selezionata (voce “li.mouseover” nel file style.css). Quindi avremo, a secondo i casi, una situazione del genere:

Il contenuto delle tre tab (ma se ne possono aggiungere altre a piacere) andrà inserito nella seguente struttura contenuta nel file index.html:

<div class="boxBody">
<div id="posts" class="show">    <!-- pagina di default-->  
 
......................</div>
<div id="famous">
 
...............</div>
<div id="comments">
 
.................</div>
</div>

Ovviamente bisogna lavorare di CSS per rendere il tutto più gradevole.

Passo 3 – file JS

Nel file script.js è contenuta la funzione per la gestione dei tab con l’effetto a finestra nel cambio tra un tab e l’altro.

//nasconde il tab precedente
$('.boxBody div').slideUp("slow");
 
//visualizza il tab selezionato
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

In questo modo utilizziamo solo la libreria jQuery. Se voglamo altri effetti, come il fade alle immagini (invece della tecnica sopra illustrata) o altri effetti sul contenuto dei tab, ovviamente il file script.js sarà più complicato ed inoltre sarà necessario caricare i plugin di jQuery.

Enjoy it!

Segue da….questo articolo

Dopo aver capito come gestire dinamicamente la struttura di una tabella utilizzando il “div” ho voluto un pò complicare il tutto aggiungendo la possibilità di effettuare il drag and drop di una riga.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file:

• index.htm
• scripts.js
• jquery.tablednd_0_5.js … approfondimento

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<table id="campi"></table>

infatti è all’interno di questo “table” che verranno creati i vari campi di input, contenuti nelle righe create dinamicamente. Come potete notare non uso più il “div” (vedi articolo precedente).

Passo 2 – file JS

Vi sono quattro funzioni:

La funzione addFormField() inserice una riga nella tabella contenente il campo di input.
La funzione removeFormField() rimuove la riga selezionata dalla tabella e richiamando la funzione aggiorna(), riodina le etichette dei campi in ordine numerico crescente.
La funzione inizializza_tabella() usa la libreria “jquery.tablednd_0_5.js” e rinizializza la tabella per il drag & drop delle righe. Usa volta effettuato lo spostamento della riga, le etichette dei campi verranno riaggiornate.

Di seguito il codice:

function inizializza_tabella() {
   $('#campi').tableDnD({
        onDrop: function(table, row) {
            aggiorna();
        }
    });
}
 
function addFormField() {
	var id = $('#campi tr[id^="row"]').length + 1;
	$("#campi").append('
 
Campo '+id+'
<input id="txt'+id+'" name="txt[]" size="25" type="text" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
');
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+id+" &gt;";
	inizializza_tabella();
}
 
function aggiorna() {
var index = 0 ;
   $("#campi tr").each(function(i){
          i++; index=i;
	      $(this).attr('id','row'+i);
		  var currentVal = $(this).find('input').val();
		  $(this).html('
Campo '+i+'
<input id="txt'+i+'" name="txt[]" size="25" type="text" value="'+currentVal+'" />
<a onclick="removeFormField($(this).parent());return false;" href="#"><img src="img/edit_remove.png" border="0" alt="" /></a>
 
')
	});
	document.getElementById("valore_c").innerHTML = "Campi inseriti: &lt; "+index+" &gt;";
}; 
 
function removeFormField(el) {
    $(el.parent()).remove();
    aggiorna();
   	inizializza_tabella();
};

Per un progetto che sto sviluppando ho avuto la necessità di crare una tabella non conoscendo a priori i campi che la componevano. Cioè la tabella doveva essere creata in maniera dinamica, con la possibilità di aggiungere o rimuovere i campi a piacere durante la creazione. Dopo un attenta analisi e un approfondito studio sull’argomento ho risolto utilizzando le librerie jQuery.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file:

• index.htm
• scripts.js

Passo 1 – file HTML

Riga di codice importantissima da non modificare:

<div id="campi"></div>

infatti è all’interno di questo “div” che verranno costruiti i vari campi.

Passo 2 – file JS

Vi sono due funzioni:

La funzione addFormField() crea un campo di input e lo inserisce nel form. Supponendo, per esempio, di inserire due campi, all’interno del “div” di cui sopra compariranno le linee di codice:

<p id='row1'>
   <label for='txt1'>Campo 1&nbsp;
       <input type='text' size='20' name='txt[]' id='txt1'/>&nbsp;&nbsp;
       <a href='#' onClick='removeFormField("#row1"); return false;'>Rimuovi</a>
    </label>
</p>
<p id='row2'>
   <label for='txt2'>Campo 2&nbsp;
     <input type='text' size='20' name='txt[]' id='txt2'/>&nbsp;&nbsp;
     <a href='#' onClick='removeFormField("#row2"); return false;'>Rimuovi</a>
   </label>
</p>

Ho inserito “Rimuovi” invece dell’immagine dell’esempio.
Come potete notare, il “form” restituirà un array “txt[]” contenente i valori dei campi; tale array sarà possibile processarlo, per esempio, richiamando da “form” un file php.

La funzione removeFormField() oltre a rimuovere il campo desiderato riordina i rimanenti campi.

Continua con…questo articolo

Avendo la necessità di inserire molti link a video pubblici, ho cercato un modo di raggruppare questi video in un unico box, selezionandoli quindi in qualche maniera, in parole povere come se avessi di fronte un televisore con la possibilità di cambiare canale.
Navigando su internet ho trovato la risposta al mio problema, utilizzano le librerie jQuery.

Il risultato è questo:

Per creare questo effetto quindi bisogna scaricare jQuery. e jQuery UI con gli elementi ‘Core’ and ‘Tabs’.
Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre agli script jQuery, trovere anche i file:

• index.htm
• videoteca.css
• scripts.js

Passo 1 – file HTML

Per aggiungere altri video basta aggiungere altri

<div id="vid-x" class="fvid">yyyyyyyyyyy</div>

e quindi altri link

	<li><a href="#vid-x">kkkkkkkkkkkk</a></li>

Passo 2 – file CSS

Modificare a piacere lo stile per cambiare l’aspetto grafico.

Passo 3 – file JS

Può essere incluso all’interno del file html con

<script type="text/javascript">
jQuery(function($) {
  $(document).ready(function() {
	$('#featuredvid').tabs();
  });
});
</script>