SIMOTRONE WEB PAGE » html

Webcam in html

Simotrone — Sat, 01 May 2010 05:13:36 +0000

Continuando a giocare con la webcam e motion…

Bene, diciamo che abbiamo il nostro device che produce una sana serie di immagini nella amata directory preposta alla scopo, quindi abbiamo una serie di foto sequenziali, e ci interessa mostrare l’ultima su di una pagina html. Che fare?

Un metodo semplice sarebbe creare una pagina html statica con un meta che fa l’auto-refresh

 http-equiv="refresh" content="2"/>

ma ci sono metodi migliori lato server.

La soluzione che ho approntato è un po’ macchinosa, ma almeno mi ha permesso di vedere un paio di cose interessanti.

Il tutto ruota attorno al content-type: multipart/x-mixed-replace; (Ho trovato info qui e quo).
Essenzialmente si tratta di lasciare una connessione aperta fra client e server nella quale il secondo passa contenuti al primo dopo la chiamata (server push). Citando wikipedia:

Mixed-Replace (Experimental)

The content type multipart/x-mixed-replace was developed as part of a technology to emulate server push and streaming over HTTP.

All parts of a mixed-replace message have the same semantic meaning. However, each part invalidates – “replaces” – the previous parts as soon as it is received completely. Clients should process the individual parts as soon as they arrive and should not wait for the whole message to finish.

Originally developed by Netscape, it is still supported by Mozilla, Firefox, Safari (but not in Safari on the iPhone) and Opera, but traditionally ignored by Microsoft. It is commonly used in IP cameras as the MIME type for MJPEG streams.

Quindi a parte Explorer, siamo a posto con tutti gli altri browser (strano).

Seguendo il libro della O’Reilly ho creato uno script cgi in perl utile per creare lo stream video (sostanzialmente il ciclo di immagini jpeg utili):

#!/usr/bin/perl        
use strict;

use warnings;
sub display_img {

        my ($file) = @_;

        if ( open(FILE, ‘<’, $file) ) {

                my $content_length = (stat (FILE))[7];

                print "Content-type: image/jpeg\n";

                print "Content-length: ", $content_length, "\n\n";

                print ;

                close(FILE);

        } else {

                print "Content-type: text/plain\n\n";

                print "
500, File Access Error, Cannot open graphic file: $file
";
}
}
$| = 1;
my $boundary_string = "\n–xstring\n";

my $end_string = "\n–xstring–\n";

my $delay = 3;

my $img_path = ‘/var/www/webcam/’;

my $image = ‘webcam-snap.jpg’;
print "Content-type: multipart/x-mixed-replace; boundary=xstring","\n\n";
print $boundary_string;
while (1) {

        display_img ($img_path.$image);

        print $boundary_string;

        sleep($delay);

}

print $end_string;
exit(0);

Il $| serve per avere lo stdout flushato automaticamente (man perlvar).

Creata questa sequenza di content-type: image/jpeg l’ho cacciata dentro un html generato dal php, in modo da controllare dinamicamente 1) se motion è in uso (ovvero se la webcam è accesa) e 2) se il browser è Explorer (nel qual caso lo stream non è visualizzabile).

function top() {

        $top = <<

        Webcam on H

    "creator" content="Webcamd" />

EOF;                        

        return $top;                       
}
function foot() {

        $bot = <<
              
EOF;

        return $bot;

}                    
function body_cam($status, $ua) {

        $body = ”;

        $body .= "
\"$status\">Cam $status";
$body .= "\"margin: 1em 0 3em;\">";

        if ($status == ‘Online’) {

                $body .= ( preg_match(‘/MSIE/’,$ua) ) ? ‘Stream video non disponibile con Explorer.
’

                                                                   : ‘’;               

        } else {

                $body .= ‘Webcam Offline
’;

        }

        $body .= "
";
        return $body;

}
function body_extra($ua) {

        $body = <<
"margin: 1em 0 1em;">
User-agent: $ua

        Made by "http://www.simotrone.it">simotrone,

        with "http://www.lavrsen.dk/foswiki/bin/view/Motion/WebHome">Motion.

EOF;
return$body;
}
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];

$motion_pid = ‘/tmp/motion.pid’;
if (file_exists($motion_pid)) {

        $status = ‘Online’;

} else {

        $status = ‘Offline’;

}
echo top();

echo body_cam($status, $user_agent);

echo body_extra($user_agent);

echo foot();
?>

Buono così.

motion

Simotrone — Wed, 28 Apr 2010 05:06:22 +0000

Giochicchiando con la webcam mi sono ritrovato a volerla usare da riga di comando (cosa buona per diverse ragioni), e così ho scoperto motion.
Qui si trova di tutto: Motion.

Dopo aver fatto riconoscere la webcam al kernel (come indicato qua), si può ottenere qualche informazione con $ v4l-info (installato tramite il pacchetto v4l-conf).
Nel mio caso:

sim@idrogeno:~$ v4l-info 
### v4l2 device info [/dev/video0] ###

general info                          

    VIDIOC_QUERYCAP                   

        driver                  : "zc3xx"

        card                    : "USB Camera (046d:08d9)"

        bus_info                : "usb-0000:00:02.0-1"    

        version                 : 2.8.0                   

        capabilities            : 0×5000001 [VIDEO_CAPTURE,READWRITE,STREAMING]
standards

[…]

video capture

    VIDIOC_ENUM_FMT(0,VIDEO_CAPTURE)

        index                   : 0 

        type                    : VIDEO_CAPTURE

        flags                   : 1            

        description             : "JPEG"       

        pixelformat             : 0×4745504a [JPEG]

    VIDIOC_G_FMT(VIDEO_CAPTURE)                    

        type                    : VIDEO_CAPTURE    

        fmt.pix.width           : 320              

        fmt.pix.height          : 240              

        fmt.pix.pixelformat     : 0×4745504a [JPEG]

        fmt.pix.field           : NONE             

        fmt.pix.bytesperline    : 320              

        fmt.pix.sizeimage       : 29390            

        fmt.pix.colorspace      : JPEG             

        fmt.pix.priv            : 1                

[…]

Avendo le dimensioni “accattabili” dalla webcam, ho dovuto solo configurare motion per convogliare una serie di screenshot in un filepath e poi “montarci” una pagina html sopra.

Una semplice configurazione di motion potrebbe essere questa:

videodevice /dev/video0

input 8
daemon off

process_id_file /tmp/motion.pid
jpeg_filename webcam

target_dir /var/www/webcam
height 320

width 240

auto_brightness on
minimum_frame_time 2

Con questa configurazione, al lancio di motion (con daemon on va direttamente in background) verrà salvata in /var/www/webcam/webcam.jpg la foto fatta dalla webcam ogni 2 secondi.

Motion ha un miliardo di altre finezze, ma per ora è tutto.

CalendarMonth.pm

Simotrone — Tue, 17 Nov 2009 06:11:27 +0000

Guardicchiando per un progetto mi sono imbattuto in HTML::CalendarMonth, un modulo perl interessante per la generazione di calendarietti in html.

Il tutto si basa sui moduli HTML::Element che creano degli oggetti per la gestione dei singoli elementi della pagina html. Segue un esempio particolarmente brutto, ma utile ai fini di capire la logica.
Il punto della questione è definire gli elementi HTML con l’apposito costruttore new(‘tag’, eventuale_attributo => ‘come hash’); gli elementi possono poi essere gestiti con una struttura parent-child attraverso il metodo push_content che ordina in un array gli elementi che lo compongono.

use HTML::Element;
# HTML::Element crea oggetti con nomi/tag e attributi.

my $html  = HTML::Element->new(‘html’);

my $head  = HTML::Element->new(‘head’);

my $title = HTML::Element->new(‘title’);

   $title->push_content(‘Titolo della pagina’);

my $body  = HTML::Element->new(‘body’);

my $h1    = HTML::Element->new(‘h1′);

   $h1->push_content(‘Header nel body’);

my $hlink = HTML::Element->new(‘a’, href => ‘http://www.simotrone.it’);

   $hlink->push_content(‘il mio sito’);

my $p     = HTML::Element->new(‘p’);

   $p->push_content(‘Questo paragrafo ha un link: ‘, $hlink, ‘.’);
$head->push_content($title);

$body->push_content($h1, $p);
$html->push_content($head, $body);
print $html->as_HTML;

Per ottenere:

        
                </span></a></span>Titolo della pagina<span class="sc2"><span class="kw2">

                Header nel body

                Questo paragrafo ha un link:  href="http://www.simotrone.it">il mio sito.

Ok, fin qui sembra una pompa, 150 righe per ottenerne 5. Non molto economico.

Comunque il punto della questione era far vedere HTML::CalendarMonth, che sfruttando i moduli suddetti ritorna cose interessanti con poco codice.
Con queste poche righe…

use HTML::AsSubs;
use HTML::CalendarMonth;
my $cal = HTML::CalendarMonth->new( month => 10, year => 2009 );

$cal->item($cal->year, $cal->month)->attr(style => ‘background-color: wheat; font-size: 150%;’);

$cal->col(0)->attr(style => ‘font-weight: bold’);

print $cal->as_HTML;

possiamo ottenere questo:

E con la semplice aggiunta di un ciclo for che genera i mesi e di una sub possiamo ottenere un calendario molto flessibile.

sub mensile {
my($mm,$yyyy) = @_;
my$cal = HTML::CalendarMonth->new( month => $mm, year => $yyyy);
$cal->item($cal->year, $cal->month)->attr(style => ‘background-color: wheat; font-size: 150%;’);
$cal->col(0)->attr(style => ‘font-weight: bold’);
print$cal->as_HTML;
print"\n";
}
for (1,2,3) {

         mensile($_,1979);

}

Su Debian i pacchetti sono questi qua:

idrogeno:~# dpkg -l libhtml-calendarmonth-perl libhtml-element-extended-perl libhtml-tableextract-perl

Desired=Unknown/Install/Remove/Purge/Hold

| Status=Not/Inst/Cfg-files/Unpacked/Failed-cfg/Half-inst/trig-aWait/Trig-pend

|/ Err?=(none)/Reinst-required (Status,Err: uppercase=bad)

||/ Name              Version           Description

+++-=================-=================-=======================

ii  libhtml-calendarm 1.19-1            generate and manipulate 

                                        calandar months in HTML

ii  libhtml-element-e 1.17-3            extended HTML::Element

                                        classes

ii  libhtml-tableextr 2.10-3            module for extracting 

                                        the content contained 

                                        in tab

Layout html

Simotrone — Sat, 31 Oct 2009 06:47:48 +0000

Tempo addietro m’ero fatto uno script in bash per scrivermi rapidamente un layout html standard (coi tag html, head, body, il doctype, ecc.).

Aveva qualche opzione, ma era una cosa semplice e comunque utile.

Ora posso farlo semplicemente così:

$ perl -MCGI=:standard -e ‘print start_html("[% title %]"),end_html;’

        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

"http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">

</span><span class="br0">[</span>% title %<span class="br0">]</span>

"Content-Type" content="text/html; charset=iso-8859-1" />

Il [% title %] è per preparare il campo a TT, niente di che.

Selection con javascript

Simotrone — Sat, 22 Aug 2009 06:02:41 +0000

Come “prendere” una selezione col mouse su una pagina html grazie a javascript?
Semplice: si scrive una funzione js che accatta la selezione. Il problema, come al solito, è capire QUALI oggetti danno la possibilità di prendere l’evento che ci interessa e COME questi oggetti operano.
(Odio i browser e javascript che sta in mezzo a ste cose.)

Nei vari browser mozzillari getSelection restituisce il testo della selezione, mentre in Exploder l’oggetto raccattato con selection è un TextRange che va manipolato ancora un pochetto.

function print_selection() {

    var selected = ”;

    var area = document.getElementById(‘name_area_dove_stampare’);

    if (document.getSelection) {

        selected = document.getSelection();

    } else if (document.selection) {

        // Parte per IE

        selected = document.selection.createRange().text;

    }

    area.value = selected;

}

Per altro sui browser come FFox si puo’ fare anche un’altro numero:

{

    var area = document.getElementById(elemento);

    selected = area.value.substring(area.selectionStart, area.selectionEnd);

}

In questo caso stiamo ottenendo la substring che inizia nella posizione dove inizia la selezione, e finisce nella posizione dove finisce la selezione (in pratica estrapola la stessa porzione di testo, capendo la posizione degli estremi con selectionStart e selectionEnd).

Boh, che orticaria.

Ah, nota interessante: Opera (che è sempre un sacco avanti) supporta entrambi i metodi (document.getSelection e document.selection)

Molte info accattate su quirksmode.org.

Nota, se non si fosse capito: Il mio rapporto con javascript e coi CSS è decisamente conflittuale (più odi che amo, per intenderci).

Mastering CSS

Simotrone — Sat, 15 Aug 2009 06:22:54 +0000

Un indice di un resoconto di articoli sui css, da smashingmagazine.com.

Mastering CSS, Part 1: Styling Design Elements

Layout and User Interface Techniques
Navigation and Menu Techniques
Image Styles and Galleries
Typography Techniques
Icons, Buttons and Links

Mastering CSS, Part 2: Advanced Techniques and Tools

Calendars, Lists, Tables, and Timelines
iPhone CSS Techniques
Form and Search Techniques
Visualization Techniques
Other Handy Techniques and Tips
CSS3 Techniques
CSS Tools
More Articles and Resources

Per ora ho usato i form, e letti gli articoli riguardanti le date (O_O), il testo sulle immagini, e gli angoli da sfogliare (bellissimo, provate il demo!). Molto carini anche gli articoli sulle liste visualizzabili in maniera diversa e riguardanti la validazione dei form.

Image in text

Simotrone — Wed, 29 Jul 2009 05:52:55 +0000

Ho trovato un giochino bellissimo.
Inserite il testo. Date un’immagine a caso, e selezionate.
Hide an image in html
Genera anche il codice.
Bellissimo.

Stai sicuro!

Simotrone — Sun, 05 Apr 2009 14:19:15 +0000

Ok, weekend nel marasma delle webapplication.

Ricapitolo un po’…
* Passaggi dati non numerici (potenzialmente massicci) in POST, ritorno in GET (per forza).
* Controllo in entrata di pagina (isset, is_numeric, blablabla, check di esistenza sul db).
* Funzioni di escape sui dati da inserire nel db. (pg_escape_string, mysql_real_escape)
* Funzioni di escape in output sul codice html (giusto per evitare scriptini e tag interpretabili): htmlentities.
* Funzioni stripslashes per togliere gli escape nel db in output.
* Check con regexp (preg_match) sulle stringhe inserite, ocio ai filename con rischio per gli header serviti.

Un po’ di storie dal php security consortium.

Colori per siti

Simotrone — Tue, 31 Mar 2009 06:38:21 +0000

Scegliere i colori per fare un qualunque disegno o progetto grafico, è spesso un’impresa. Se non lo è per tutti, di sicuro lo è per me.

Credo che sia particolarmente difficile scegliere dei bei colori per le proprie pagine web, non banali ma coerenti (lasciate perdere qua, il sito di Ghost Rider senza catene, per ora).
Of course, ci si rifugia in templete già fatti… ma a me non concede una gran soddisfazione.

Tempo addietro ho sviluppato un progettino personale sfruttando alcune colorazioni tratte da un libro che mi piace molto.

Un titolo rosso

Una frase a caso, scritta verde su panna!
Posto su l’arco ed incoccato il dardo, traeva seduto, siccom’era, al petto con la man destra il nervo: indi la mira tra i ferrei cerchi prese, e spinse il telo, che, senza quinci devïare o quindi, passò tutti gli anelli alto ronzando.

Fatto sta che mi sono poi ritrovato a dover inventare altri schemi, e non sempre le scelte sono state facili.

Di recente ho scoperto 3 strumenti davvero notevoli, online e gratuiti.

Color Blender Color Scheme Tool – permette di esplorare un range (1-10) di sfumature fra due colori (ie: l’ho trovato utile per i pulsani).
Colormatch Remix Color Scheme Tool – dato un colore, estrae un pattern di 9 colori più o meno bilanciati.
Colour Scheme Chooser – dato un colore ed una regola (complementari, monocromo, ecc.) estrae una gamma di colori utili.

A me questi strumenti son sembrati molto carini e utili, e il sito è ricco di guide sugli aspetti più vari del web design..

Non risolvoneranno tutti i problemi, ma aiutano.

awk e table html

Simotrone — Fri, 31 Oct 2008 05:24:38 +0000

Ok, questo post è una vaccata, pero’ io sono esaltato e quindi lo scrivo. ^_^

In primis: creare tabelle per pagine *HTML è una cosa frequente, utile, ma anche estremamente pallosa. A me capita spesso, e cerco sempre di farlo nella maniera piu’ dinamica possibile (php e scriptini vari con cicli for/while/altro).

Secondariamente, io adoro platonicamente awk. Dal momento in cui l’ho incontrato, l’ho sempre trovato estremamente potente e versatile, come la maggioranza degli strumentini da terminale (tr, sed, ecc.) che pochi sanno usare, ma che sarebbero utili al 100% delle persone che lavorano col pc, almeno una volta nella vita.
Ovviamente l’utilizzo di questi strumenti passa un po’ in secondo piano se si sa manipolare bene i dati con perl… ma questa e’ un’altra storia.

Questa storia invece parla di una tabella di dati come tante in formato:

1,campo1a,campo1b,campo1c,campo1d;
2,campo2a,campo2b,campo2c,campo2d;
3,campo3a,campo3b,campo3c,campo3d;
[...]

e di una mitica riga di awk (+sed) che la trasforma in una perfetta tabellozza html:

awk ‘BEGIN {FS = “,” ; TAG = 5 ; print “\n\n\tTitolo pagina html\n\n\n
Titolozzo visibile
\n\n”}
{print “
header_a header_b header_c header_d

”$1″ ”$2″ ”$3″ ”$4″ ”$5 }

END { print “
\n\n”}’ dati.txt | sed -e ’s/;/<\/td> <\/tr>/’ > pagina_table.html

	header_a	header_b	header_c	header_d
”$1″	”$2″	”$3″	”$4″	”$5 } END { print “

Insomma, a me sta riga piace tantissimo: legge i dati, li mette nel codice html, ha una piccola condizione per rendere la tabella piu’ leggibile ogni 5 righe (cambiare TAG per cambiare l’intervallo di evidenziazione)…
Fantastico.

PS: Sì, lo so che l’uso dell’attributo bgcolor è deprecato e andrebbero usati i CSS… Beh, non ci vuole poi tanto a mettere una classe al posto della mia stringa.

October					2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31