Creare il proprio browser

Oggi vedremo come creare il proprio personalissimo browser in pochi semplici passi.
Prima di tutto creiamo un nuovo stack e mettiamoci dentro un rettangolo che chiamiamo areabrowser, questo sarà lo spazio dove apparirà il contenuto delle pagine web. Ridimensionando a mano il rettangolo, si ridimensionerà automaticamente l'area dove appariranno le pagine; questo è un sistema molto semplice per gestire manualmente l'area del browser. Esempio:

Poi mettiamo il seguente codice:

On OpenCard
   put the windowid of this stack into tID
   put revBrowserOpen(tID,"http://www.google.com") into browserid
   set the curbrow of this card to browserid
   put the rect of graphic "areabrowser" into temp
   revBrowserSet browserid,"rect", temp
   revBrowserSet browserid,"showBorder","true"
end OpenCard

function browserid
   put the curbrow of this card into temp
   return temp
end browserid

on ChiudiBrowser   
   revBrowserClose BrowserId()
end ChiudiBrowser

on CloseStack
   chiudibrowser
end CloseStack



Notate la funzione browserid() che ho scritto, è solo una scorciatoia per non dover scrivere tutte le volte put the curbrow of this card into browserid . Questo esempio vi mostra come le funzioni dovrebbero essere utilizzate, solo come scorciatoie, e come invece bisognerebbe utilizzare i messaggi per tutto il resto.

Altra nota: chiudere il browser è importante, altrimenti mentre programmate in Livecode, Livecode salverebbe lo stato della finestra quando chiudete ed ad ogni nuova apertura avreste un browser in più. Questo non vale quando create l'eseguibile, perchè l'eseguibile non si automodifica e quindi riparte ogni volta da zero.

La possibilità di avere più browser nella stessa finestra o card permette di avere la navigazione a linguette, oppure il rendering contemporaneo di più pagine nella stessa finestra del programma.
Sorvolando su queste considerazione, ogni volta che riaprite il programma avrete una cosa simile a questa:

Adesso mettiamo i pulsanti per la navigazione e il campo di digitazione degli indirizzi web:

Per fortuna Livecode contiene le funzioni di navigazione già pronte. Quindi per i pulsanti i codici sono semplicissimi.
Per il pulsante indietro abbiamo:

on mouseUp   
   revBrowserBack browserId()   
end mouseUp

Per il pulsante avanti:

on mouseUp
   revBrowserForward browserId()
end mouseUp

Per il pulsante aggiorna:

on MouseUp
   revBrowserRefresh browserid()
end MouseUp



Per il pulsante stop:

on mouseUp
   revBrowserStop browserId()
end mouseUp

Per il pulsante vai:

on mouseUp
   revBrowserSet browserId(), "url", the text of field "indirizzo"
end mouseUp

e per il campo indirizzo:

on returninfield
   send MouseUp to button "Vai"
end returninfield

on enterinfield
   send MouseUp to button "Vai"
end enterinfield

Adesso possiamo aggiungere qualche tocco grafico in più, ad esempio mettere un'animazione quando carica una pagina. Il metodo migliore è usare una immagine GIF animata, che chiameremo animazione.gif:

Livecode ha già integrati i messaggi quando il browser comincia a caricare e quando finisce, riesce perfino a dirci quale browser sta caricando; i messaggi sono browserBeforeNavigate e browserDocumentComplete. Senza addentrarci troppo in essi, che potete leggere nel dizionario integrato in Livecode, sappiate che potete aggiungere il seguente codice alla card per avere l'animazione che comincia ad animarsi e che si ferma:

on browserBeforeNavigate
   set the repeatCount of image "animazione.gif" to -1
end browserBeforeNavigate

on browserDocumentComplete
   set the repeatCount of image "animazione.gif" to 0
   set the currentFrame of image "animazione.gif" to 1
end browserDocumentComplete

Finito! Potete divertirvi ad aggiungere qualche elemento grafico, migliorare i pulsanti, ma non serve altro.

Eccoun esempio di un altro browser fatto il Livecode:

Ora potete divertirvi ad aggiungere la navigazione a linguette o in parallelo, come accennato in questo post.  Oppure utilizzare revBrowserGet() e revBrowserSet per interagire con il testo e i form contenti nel browser.
Inoltre potete fantastiche anteprime dei siti con revBrowserSnapshot

Come fare due milioni di dollari in un anno con Livecode

Oggi presentiamo il caso TeachMac, un programma scritto da un professore universitario per insegnare. Questo professore ha deciso di utilizzare Livecode poichè non era pratico di programmazione e gli sembrava il sistema più semplice e veloce per ottenere quello che desiderava. La prima versione è del 2006 e dopo solo un anno è riuscito a vendere il sistema del programma per due milioni di dollari!
Ovviamente ora il programma è stato rimarchiato e modificato, ma potete ancora trovare in giro le prime versioni di questo software.

Una delle modifiche più pesanti richieste dall'acquirente sono state trasformarlo in un sistema quasi esclusivamente client/server.
Il risvolto più umano di questa storia è che il programmatore, Byron Turner, ha deciso di utilizzare metà della somma per fondare un'organizzazione per aiutare donne e bambini vittime di violenza.

Internet

Oggi presentiamo alcuni funzioni per lavorare con internet attraverso Livecode.
Cominciamo con il leggere una pagina, esempio:

put URL "http://www.livecode.com/" into field "sample text"

Adesso carichiamo un'immagine da internet:

create image "web"
put URL "http://www.runrev.com/images/logo.jpg" into image "web"

Se ci ricordiamo che i testi possono essere stilizzati utilizzando la sintassi HTML, utlizzando la proprietà htmlText, ecco che ci è chiaro come copiare lo stile di una pagina web:

put URL "http://www.livecode.com" into field "esempio"
set the htmltext of field "esempio" to the text of field "esempio"

Possiamo anche interrogare Google o giocare con gli URL:

put URLEncode("Livecode italia") into ricerca
put "http://www.google.com/search?&q=" & ricerca into tBaseURL
put URL tBaseURL into field "esempio"

Possiamo scaricare un file da un sito FTP:

put URL "ftp://user:password@ftp.runrev.com/pub/sample.txt" into URL "file:esempio.txt"

Oppure possiamo caricare un file su un sito FTP:

put URL "binfile:esempio.jpg" into URL "ftp://ftp.runrev.com/samplefile.jpg"
put the result into field "result"

Per eseguire un programma livecode presente su internet basta, ad esempio:

go to stack url "https://www.dropbox.com/esempio.livecode"

Per aprire il browser predefinito del sistema operativo è sufficiente revGoURL, esempio:

revGoURL "http://www.livecode.com/"

Il comando revMail serve per mandare le email, esempio:

revMail "pippo@bitbucket.com","pluto@trial.org","Titolo email","Testo del messaggio."

E' possibile anche inviare i dati col metodo POST dei form HTML, ad esempio:

put "name=" & URLEncode("Mario Rossi") into tData
put "&email=" & URLEncode("mario@esempio.it") after tData
put "&date=" & URLEncode(word 2 to -2 of the Internet date) after tData
post tData to URL "http://www.runrev.com/cgi-bin/samplepost.cgi"
if the result is not empty then put the result into field "result"

Ecco invece un esempio per inventarsi il proprio protocollo di comunicazione usando i socket:

on mouseUp
   accept connections on port "34534" with message "gotConnection"
   open socket to "127.0.0.1:34534"
   write "test message" & return to socket "127.0.0.1:34534"
end mouseUp

on gotConnection pData
   read from socket pData until return
   put "Got data:" && it into field "result"
   close socket "127.0.0.1:34534"
end gotConnection

Muovere lungo un percorso

Quando si deve muovere un oggetto lungo un percorso o fare un'animazione, molti programmatori perdono giorni o settimane a calcolare la formula che descriva matematicamente il percorso o l'animazione.
Livecode permette di evitare tutto ciò e farlo semplicemente a mano!
Come esempio mostrerò come fare l'animazione di una palla che rimbalza in meno di un minuto.
Per prima disegnamo la palla direttamente in Livecode, basta premere il comando oval, fare un cerchio e poi indicare i colori dei gradienti, per avere qualcosa come questo:

Chiamiamola "palla".
Poi creiamo un percorso, che chiameremo "percorso", premendo il pulsante freehand e disegnando a mano la traiettoria della palla, ottenendo una cosa simile a questa:

Rendiamo invisibile il percorso e creiamo un pulsante "Start" con il seguente codice:

on mouseUp
   move graphic "palla" to the points of graphic "percorso" in 10 sec
end mouseUp

Premendo il pulsante start, il risultato dovrebbe essere questo:

Come avete visto è bastato solo una riga di codice!

Dove mettere le immagini?

Uno dei problemi di chi inizia a programmare con Livecode è la questione di dove mettere le immagini che servono al programma.

Una soluzione potrebbe essere fare una cartella a parte con le immagini ed usare dei percorsi, relativi o assoluti, per riferirsi ad essa. Questa via ha però dei limiti riguardo alla portabilità del programma, non sempre l'utente ha accesso alle cartelle e sui dispositivi mobili è un disastro dover lavorare con file e cartelle esterne, visto che ogni dispositivo cambia i nomi alle proprie cartelle. Il vantaggio di questa soluzione è che la dimensione (in bit) del programma senza incorporare le immagini è molto piccola, quindi risulta più leggera e molto semplice da inviare o aggiornare.

Un'altra soluzione è di incorporare tutte le immagini in uno un sottostasck (substack), in questo modo potrete lavorare sulla finestra del programma e avere un'altra finestra aperta con tutte le immagini che vi servono già caricate, senza rischi di interferenze e potete controllare tutte proprietà delle immagini. In questo modo avrà già tutto quello che gli serve dentro di esso e si potrà esportare per ogni tipo di dispositivo (computer o mobile) senza rischi. Tutto ciò si paga con la dimensione del programma che sarà la somma della dimensione delle immagini e del codice Livecode tutto in un unico grosso file o eseguibile.

Esempio di come incorporare tutte le immagini in un substack.

HDrive awake

Il programma che presentiamo oggi è rivolto a chi fa uso di computer con moti harddisk collegati. Un tipico caso sono le workstation dedicate all'elaborazione video e grafica.
Il Sig. Mark Talluto si era reso conto di un problema intrinseco degli harddisk: in tutti gli harddisk è presente un controllo che rallenta gli harddisk fino a spegnerli quando non si usano per più qualche minuto (fase di sleep).
Per chi ha un solo harddisk è impercettibile, perchè l'harddisk rimane sempre attivo, ma sulle workstation questo sistema permette di risparmiare qualche watt di corrente e allunga la durata degli harddisk.
L'altra faccia della medaglia di questo sistema è un calo di prestazioni se si deve passare da un harddisk ad un altro di continuo.
Il Sig. Talluto, che lavora per la Canela Software, non poteva permettersi questi rallentamenti, e perciò ha scritto con Livecode un programma che ottiene la lista degli harddisk presenti sul nostro pc e permette di scegliere quali  tenere sempre attivi al massimo delle prestazioni.

Il codice è molto semplice, il programma scrive un file ogni 15-30 secondi sugli harddisk selezionati.
Il sorgente del codice potete scaricarlo da: http://newsletters.livecode.com/august/issue31/hdrive%20awake.rev.zip
Il programma è gratuito e potete scaricarlo da: http://www.canelasoftware.com/freeware/hdriveawake/HDriveAwake.html
A detta di del Sig. Talluto, l'impatto sul consumo elettrico della workstatio è stato minimo e gli harddisk hanno presentato la stessa durata di quelli dove entrava in azione la funzione sleep.

Finestre con forme irregolari e semitrasparenti

Oggi vediamo qualche proprietà per fare dei programmi dall'aspetto sorprendente: finestre dalla forma irregolare e semitrasparenti!
Prima di tutto creiamo un nuovo programma e importiamo delle immagini che potete scaricare da http://newsletters.livecode.com/july/issue29/window_shape_images.zip, come queste:

Create dei pulsanti e metteteli dentro la forma grigia dandogli le seguenti immagini:

Vi ricordo che personalizzare un pulsante basta disabilitare showname, opaque, three D, border, hilite border e impostare come icon l'immagine che preferiamo. Ecco il procedimento:

Come vedete ho impostato anche l'hover icon, così quando ci passa sopra il mouse si illumina il pulsante.
I piccoli pulsanti grigi metteteli in un nico gruppo e impostateli come radio button, in questo modo si accenderà solo uno alla volta che indicherà il livello di trasparenza della finestra. Impostiamo l'icona hilite icon con il pallino rosso, e raggruppateli in un gruppo chiamato livelli. Ecco i passaggi:

Ora finiamo con la grafica digitando:

set the windowshape of this stack to 1003

Il risultato dovrebbe essere questo:

Fantastico, con una sola riga di codice abbiamo già ottenuto un effetto spettacolare e siamo già a metà del nostro obbiettivo.
Ora creiamo il seguente messaggio nel pulsante più:

on mouseUp
   put the hilitedbutton of group "livelli" into temp
   put 1 + temp into temp
   if temp > 6 then
      put 6 into temp
   end if
   set the hilitedbutton of group "livelli" to temp   
   set the blendlevel of this stack to ((temp - 1) * 18)
end mouseUp

e l'analogo codice col -1 nel pulsante meno:

on mouseUp
   put the hilitedbutton of group "livelli" into temp
   put temp - 1 into temp
   if temp < 1 then
      put 1 into temp
   end if
   set the hilitedbutton of group "livelli" to temp   
   set the blendlevel of this stack to ((temp - 1) * 18) #se mettiamo 20, all'ultimo click diventa invisibile
end mouseUp

Ecco il risultato:
Come vedete abbiamo raggiunto il nostro obbiettivo in solo 19 righe di codice! Io vi sfido, riuscite a fare meno? E in che linguaggio di programmazione?

Insegnante di canto per canarini

Oggi vi mostro un esempio di creare un software molto particolare per le nostre esigenze con Livecode.
Prima di tutto una premessa, i canarini imparano a cantare bene solo sentendo altri maschi. Per questo motivo il canarino della signora Jacqueline Landman-Gay, solo in tutta la casa, aveva bisogno di creare un programma che facesse sentire al suo canarino i vari cinguettii di altri canarini maschi.
Per prima cosa la signora ha scaricato degli MP3 contenenti i versi dei canarini, poi ha creato il programma con un elenco selezionabile contenente la lista degli MP3, il player e un pulsante:

Il codice del pulsante è il seguente:

on mouseUp
   if the label of me = "start" then
      set the label of me to "Stop"
      playSong
   else
      set the label of me to "Start"
      stopSongs
   end if
end mouseUp



Il resto del codice è tutto qui:

on preOpenCard
   put "" into fld "next play"
   set the hilitedlines of fld "playlist" to 0
   get songPath()
   set the directory to it
   put the files into tSongs
   filter tSongs with "*.mp3"
   if tSongs = "" then put "No songs found." into tSongs
   put tSongs into fld "playlist"
end preOpenCard

on closeCard
   stopSongs
end closeCard

on playSong
   -- randomly choose an mp3, play it at a random time
   put any line of fld "playlist" into tSongName
   put songPath() & tSongName into tSong
   lock messages
   set the filename of player "canary" to tSong
   unlock messages
   set the hilitedlines of fld "playlist" to lineoffset(tSongName,fld "playlist")
   set the currentTime of player "canary" to 1
   start player "canary"
end playSong

on stopSongs -- stop playback
   lock messages -- prevent "playstopped" from being sent
   stop player "canary"
   put "" into fld "next play"
   set the hilitedlines of fld "playlist" to 0
   repeat for each line tLine in the pendingmessages
      if tLine contains "playSong" then cancel (item 1 of tLine)
   end repeat
   unlock messages
end stopSongs

on playStopped pPlayer
   set the hilitedlines of fld "playlist" to 0
   if the label of btn "start" = "start" then pass playStopped -- not in auto mode
   put random(word 1 of the label of btn "Lag") into tSecs
   displayTime tSecs
   if "playSong" is not in the pendingmessages
   then send "playSong" to me in tSecs seconds
end playStopped

function songPath
   put the filename of this stack into tPath
   set the itemdel to slash
   put "songs" into last item of tPath
   return tPath & slash
end songPath

on displayTime pSecs
   get the long time
   convert it to seconds
   add pSecs to it
   convert it to long time
   put "Next song at:" && it into fld "next play"
end displayTime



Il messaggio preOpenCard serve a caricare tutte le musiche all'avvio.
Il messaggio playSong  serve ad avviare la musica scelta e mandarne un'altra a caso ogni intervallo stabilito.
Il messaggio stopSongs ferma l'esecuzione della musica.
Migliorando la grafica, il programma finale è il seguente:

Il programma può essere scaricato da qui: http://newsletters.livecode.com/july/issue29/Canary_Stack.zip
Tempo per ottenere il programma completo: 20 minuti! Con quale altro linguaggio di programmazione potevate ottenere lo stesso risultato con così poco tempo?

Fare il backup delle musiche su iPod

Quella di oggi è la storia di un chitarrista che voleva fare un semplice backup delle musiche MP3 presenti sul proprio iPod, senza dover passare per iTunes. Essendo un professionista della musica, aveva più di 30'000 canzoni sul proprio dispositivo, quindi gli serviva un sistema veloce di backup; per questo motivo cercò di crearselo da solo con Livecode.
Il nostro protagonista, prima di tutto, ha scoperto che le musiche negli iPod sono dentro la cartella /iPod_Control/Music che non è accessibile dal normale sfoglia cartelle dell'iPod, ma dal selettore di cartelle di Livecode non ci sono problemi.
Poi, con suo orrore, ha scoperto che i nomi dei file vengono cambiati in sequenze del tipo F6TG, e che l'iPod memorizza il nome originale del file e altri dati su un suo database interno.
Dopo aver smanettato a lungo sul database si rese conto che il formato dei dati del database interno degli iPod cambiava a seconda della versione dell'iPod e che sarebbe stato sovrumano scrivere un codice che andasse bene per tutti. Senza neppure i nomi, non era possibile capire se una musica fosse di Mozart o dei Metallica. Non dandosi per vinto, ha aggirato l'ostacolo scrivendo una libreria che estraesse i tag dagli MP3 per riconoscerli. La libreria può essere scaricata qui: http://marksmith.on-rev.com/revstuff/files/id3Lib.zip
A questo punto la soluzione era pronta:

Il suo sofware non solo funziona a dovere, ma è anche disponibile gratuitamente su molti siti, come http://mac.brothersoft.com/podup.html e ha ricevuto ottime recensioni.

baKno games

Oggi vediamo il caso della baKno games, questa società che produce videogiochi ha come strumento pincipale Livecode. Tutti i suoi giochi, infatti sono scaricabili in versione Windows, Linux, Mac, Android e iOS.

I suoi giochi hanno generalmente un costo sui $ 4.95.
La particolarità di questa società è quella di affidare conto terzi lo sviluppo di alcune parti dei loro giochi. Ad esempio per disegnare la grafica di del gioco del domino è stata contattata una società di arti grafiche.
Le prime versioni del gioco erano così:

Ora hanno deciso di sfruttare le librerie native in 3D dei vari sistemi operativi e possiamo ammirare l'ultima versione del gioco sotto questa forma:

Sempre con la stessa filosofia sono stati prodotti ben 24 giochi.
La lezione che possiamo imparare da questa società è che certe volte può essere più proficuo affidare a terzi lo sviluppo di una parte dei nostri programmi, come la grafica o l'audio, e concentrarci solo su altre parti... e che con livecode potete raggiungere facilmente un numero molto elevato di clienti.

Lavorare con i testi

L'elaborazione dei testi e delle parole è uno dei punti forti di Livecode. Potete modificare i testi, estrarre e cambiare stringhe con comandi molto simili alla lingua parlate inglese. Oggi farò una panoramica di alcuni comandi per i testi.
Per esempio per sapere il numero di parole in un campo basta:

put the number of words in field "text"

Anche per estrarre del testo i comandi sono semplici, immaginate un tabella di testo in formato CSV (quello di esportazione più comune per rubriche ed excel). Potete estrarre, ad esempio, solo il secondo elemento della terza riga così:

item 2 of line 3 of myCSVList

O addirittura fare dei test, ad esempio verificare se un certo elemento è un numero:

if item 2 of line 3 of myCSVList is a number then
   answer "L'elemento in posizione 3B è un numero!"
end if

Unire o aggiungere parole all'inizio di un testo usando before o after è una procedura semplice da ricordare:


   put "Questo è un semplice esempio" into temp
   put word 1 to 3 of temp into temp2
   put " esempio" after temp2
   put "bellissimo " before word -1 of temp2
   answer temp2



Ricordate che quando uste il segno meno vuol dire che si comincia a contare dalla fine.
Quello che potete fare con le parole (word) funziona anche con le righe (lines) e con i caratteri (chars) e gli item :

put line 2 to 4 of vecchioTesto after line 6 of nuovoTesto

put char 3 of vecchioTesto after nuovoTesto

Gli item sono gli elementi  di un testo separati da il carattere definito nella proprietà itemdelimiter, che è impostato sulla virgola, ma potete cambiarlo a vostro piacere.
Per quanto riguarda le ricerche, si può cercare in maniera molto intuitiva con "is ... in":

if "Mario" is in line 3 of esempio then
   answer "Il testo contiene la parola Mario nella terza riga"
end if



Se poi si vuole cercare in un campo di testo visualizzato sullo schermo, potete usare la parola find, che vi evidenzierà sullo schermo la parola, e poi se lo lanciate nuovamente comincerà dall'ultimo risultato continuando nel testo, ad esempio il seguente codice:

on MouseUp
   find "Mario" in field esempio
end MouseUp

dà il seguente risultato la seconda volta che premete il pulsante:

Esistono anche altri sistemi per cercare che esamineremo in un post successivo, tipo matchText e offset.
Potete fare le sostituzioni con replace, esempio:

replace x with y in field esempio

Possiamo anche verificare il testo formattato con tutti gil stili che abbiamo applicato (font, grassetto, corsivo, ecc.) si veda effettivamente bene nel nostro programma:

if the formattedWidth of field "esempio" > the width of field "esempio" then
   #dobbiamo accorciare il testo
end if

Possiamo ordinare le righe di un testo secondo un nostro criterio, ad esempio le date della terza collona:

sort lines of mialista dateTime by word 3 of each

My Arabic Teacher

Oggi presento un software commerciale per imparare la lingua araba: My Arabic Teacher

Questo software sviluppato da un solo programmatore in Livecode è altamente professionale e lavora con i caratteri occidentali e arabi senza problemi.

Il costo di questo software professionale è di $ 495 e sono più di 14 anni che è in commercio.
Sta per uscire la versione 6 di questo software e rimane un ottimo esempio di come un programmatore possa guadagnare bene con Livecode.
Livecode solo dalla versione 7 avrà integrato il supporto nativo alla codifica unicode, nonostante questo è stato sempre possibile visualizzare i caratteri unicode, utilissimi soprattutto con l'arabo. Ad esempio la proprietà unicodeText è presente in Livecode dalla versione 2.

Photoroom

Oggi vi presento un programma di modifica delle immagini tutto in Livecode, fatto da un solo programmatore: PhotoRoom.

Questo programma ha centinaia di effetti da poter applicare alle immagini, è un ottimo esempio di come si possa lavorare direttamente sui dati delle immagini.
Qui potete scaricare il file Livecode, mentre le versione eseguibile senza bisogno Livecode (standalone) sono scaricabili dai seguenti link

• Windows
• Linux
• Mac