$('body').append($('<div></div>').load('file_esterno.html', function() {
//Qui operazioni opzionali sull'html appena caricato
});
:-)
lunedì 7 aprile 2014
Includere un file html esterno con jQuery
Un semplice snippet per includere dinamicamente il contenuto html di un file esterno con jQuery:
giovedì 3 aprile 2014
jVectorMap - Mappe geografiche vettoriali in Javascript
jVectoMap è una utile libreria che permette di mostrare ed interagire con mappe geografiche vettoriali in Javascript. Il vantaggio di questo progetto, oltre a quello di essere open source, è che utilizza tecnologie native dei browser, quindi html, javascript, svg o vml, css, senza bisogno di plugin aggiuntivi. La sezione tutorial è molto ben fatta, ne consiglio una attenta lettura.
Qualche tempo fa ho avuto bisogno di sfruttare questa libreria per mostrare una mappa geografica della provenienza dei preventivi richiesti dagli utenti su un determinato sito web. Per ottimizzare tutto però ho voluto caricare i dati relativi al numero dei preventivi dei singoli stati in ajax con il formato JSON, vediamo come.
La mappa utilizzata è la world_mill_en, ossia rappresenta l'intero globo terrestre. Le sigle delle nazioni seguono il formato a due lettere (ad esempio IT per Italia, FR per Francia, DE per Germania, ecc.).
L'url richiamata è una API (nel mio progetto scritta in Php) che risponde in formato JSON con una particolare struttura, ad esempio:
Qualche tempo fa ho avuto bisogno di sfruttare questa libreria per mostrare una mappa geografica della provenienza dei preventivi richiesti dagli utenti su un determinato sito web. Per ottimizzare tutto però ho voluto caricare i dati relativi al numero dei preventivi dei singoli stati in ajax con il formato JSON, vediamo come.
<div id="mappamondo-richieste" style="height:350px;width:100%;"></div>
$.ajax({
type: "GET",
url: 'http://api.example.com/stats/world/',
dataType: "json",
}).done(function( json_response ) {
$('#mappamondo-richieste').vectorMap({
map: 'world_mill_en',
series: {
regions: [{
values: json_response.worldData,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function(e, el, code){
if(!json_response.worldData[code]) json_response.worldData[code] = 0;
el.html(el.html()+' ('+json_response.worldData[code]+')');
}
});
}).fail(function(jqXHR, textStatus) {
console.log( "Request failed: " + textStatus + " " + jqXHR.status );
});
La mappa utilizzata è la world_mill_en, ossia rappresenta l'intero globo terrestre. Le sigle delle nazioni seguono il formato a due lettere (ad esempio IT per Italia, FR per Francia, DE per Germania, ecc.).
L'url richiamata è una API (nel mio progetto scritta in Php) che risponde in formato JSON con una particolare struttura, ad esempio:
{
"worldData":
{
"IT":"97",
"US":"357"
}
}
Il risultato finale non delude le mie aspettative :-)
Etichette:
javascript,
jquery,
opensource
sabato 29 marzo 2014
C# - Stampante direttamente con comandi nativi
Poco tempo fa ho avuto la necessità di stampare, con comandi nativi, su una stampante termica Zebra.
In passato mi era capitato di dover stampare con comandi nativi, ma su stampantine con porta seriale, quindi i comandi altro non erano che stringhe inviate in seriale.
In questo caso, invece, la stampante era collegata via usb e accessibile solo tramite drivers. Come fare? Incredibilmente la Microsoft ci viene in aiuto, e ha pubblicato una classe fantastica chiamata RawPrinterHelper che permette proprio di interagire direttamente con la stampante, a qualsiasi porta essa sia collegata (parallela, usb, seriale).
E' una classe statica, e per usarla è sufficiente eseguire il metodo SendStringToPrinter; il primo parametro sarà il nome della stampante, così come è definita nell'elenco stampanti di Windows, mentre il secondo parametro sarà la stringa di comandi da inviare direttamente alla stampante.
Ad esempio, in caso di una stampante Zebra:
In passato mi era capitato di dover stampare con comandi nativi, ma su stampantine con porta seriale, quindi i comandi altro non erano che stringhe inviate in seriale.
In questo caso, invece, la stampante era collegata via usb e accessibile solo tramite drivers. Come fare? Incredibilmente la Microsoft ci viene in aiuto, e ha pubblicato una classe fantastica chiamata RawPrinterHelper che permette proprio di interagire direttamente con la stampante, a qualsiasi porta essa sia collegata (parallela, usb, seriale).
E' una classe statica, e per usarla è sufficiente eseguire il metodo SendStringToPrinter; il primo parametro sarà il nome della stampante, così come è definita nell'elenco stampanti di Windows, mentre il secondo parametro sarà la stringa di comandi da inviare direttamente alla stampante.
Ad esempio, in caso di una stampante Zebra:
RawPrinterHelper.SendStringToPrinter("Zebra GX420T", "^XA^FDESEMPIO^FS^XZ");
Di seguito posto anche il codice originale della classe, che si può trovare comunque a questo indirizzo: http://support.microsoft.com/kb/322091/it
using System;
using System.Drawing;
using System.Drawing.Printing;
using System.Windows.Forms;
using System.Runtime.InteropServices;
using System.IO;
namespace TintoLavaApp
{
public class RawPrinterHelper
{
// Structure and API declarions:
[StructLayout(LayoutKind.Sequential, CharSet = CharSet.Ansi)]
public class DOCINFOA
{
[MarshalAs(UnmanagedType.LPStr)]
public string pDocName;
[MarshalAs(UnmanagedType.LPStr)]
public string pOutputFile;
[MarshalAs(UnmanagedType.LPStr)]
public string pDataType;
}
[DllImport("winspool.Drv", EntryPoint = "OpenPrinterA", SetLastError = true, CharSet = CharSet.Ansi, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool OpenPrinter([MarshalAs(UnmanagedType.LPStr)] string szPrinter, out IntPtr hPrinter, IntPtr pd);
[DllImport("winspool.Drv", EntryPoint = "ClosePrinter", SetLastError = true, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool ClosePrinter(IntPtr hPrinter);
[DllImport("winspool.Drv", EntryPoint = "StartDocPrinterA", SetLastError = true, CharSet = CharSet.Ansi, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool StartDocPrinter(IntPtr hPrinter, Int32 level, [In, MarshalAs(UnmanagedType.LPStruct)] DOCINFOA di);
[DllImport("winspool.Drv", EntryPoint = "EndDocPrinter", SetLastError = true, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool EndDocPrinter(IntPtr hPrinter);
[DllImport("winspool.Drv", EntryPoint = "StartPagePrinter", SetLastError = true, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool StartPagePrinter(IntPtr hPrinter);
[DllImport("winspool.Drv", EntryPoint = "EndPagePrinter", SetLastError = true, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool EndPagePrinter(IntPtr hPrinter);
[DllImport("winspool.Drv", EntryPoint = "WritePrinter", SetLastError = true, ExactSpelling = true, CallingConvention = CallingConvention.StdCall)]
public static extern bool WritePrinter(IntPtr hPrinter, IntPtr pBytes, Int32 dwCount, out Int32 dwWritten);
// SendBytesToPrinter()
// When the function is given a printer name and an unmanaged array
// of bytes, the function sends those bytes to the print queue.
// Returns true on success, false on failure.
public static bool SendBytesToPrinter(string szPrinterName, IntPtr pBytes, Int32 dwCount)
{
Int32 dwError = 0, dwWritten = 0;
IntPtr hPrinter = new IntPtr(0);
DOCINFOA di = new DOCINFOA();
bool bSuccess = false; // Assume failure unless you specifically succeed.
di.pDocName = "My C#.NET RAW Document";
di.pDataType = "RAW";
// Open the printer.
if (OpenPrinter(szPrinterName.Normalize(), out hPrinter, IntPtr.Zero))
{
// Start a document.
if (StartDocPrinter(hPrinter, 1, di))
{
// Start a page.
if (StartPagePrinter(hPrinter))
{
// Write your bytes.
bSuccess = WritePrinter(hPrinter, pBytes, dwCount, out dwWritten);
EndPagePrinter(hPrinter);
}
EndDocPrinter(hPrinter);
}
ClosePrinter(hPrinter);
}
// If you did not succeed, GetLastError may give more information
// about why not.
if (bSuccess == false)
{
dwError = Marshal.GetLastWin32Error();
}
return bSuccess;
}
public static bool SendFileToPrinter(string szPrinterName, string szFileName)
{
// Open the file.
FileStream fs = new FileStream(szFileName, FileMode.Open);
// Create a BinaryReader on the file.
BinaryReader br = new BinaryReader(fs);
// Dim an array of bytes big enough to hold the file's contents.
Byte[] bytes = new Byte[fs.Length];
bool bSuccess = false;
// Your unmanaged pointer.
IntPtr pUnmanagedBytes = new IntPtr(0);
int nLength;
nLength = Convert.ToInt32(fs.Length);
// Read the contents of the file into the array.
bytes = br.ReadBytes(nLength);
// Allocate some unmanaged memory for those bytes.
pUnmanagedBytes = Marshal.AllocCoTaskMem(nLength);
// Copy the managed byte array into the unmanaged array.
Marshal.Copy(bytes, 0, pUnmanagedBytes, nLength);
// Send the unmanaged bytes to the printer.
bSuccess = SendBytesToPrinter(szPrinterName, pUnmanagedBytes, nLength);
// Free the unmanaged memory that you allocated earlier.
Marshal.FreeCoTaskMem(pUnmanagedBytes);
return bSuccess;
}
public static bool SendStringToPrinter(string szPrinterName, string szString)
{
IntPtr pBytes;
Int32 dwCount;
// How many characters are in the string?
dwCount = szString.Length;
// Assume that the printer is expecting ANSI text, and then convert
// the string to ANSI text.
pBytes = Marshal.StringToCoTaskMemAnsi(szString);
// Send the converted ANSI string to the printer.
SendBytesToPrinter(szPrinterName, pBytes, dwCount);
Marshal.FreeCoTaskMem(pBytes);
return true;
}
}
}
venerdì 28 marzo 2014
Chiamate cross thread su controlli winform - C#
Se si utilizzano thread durante lo sviluppo di applicazioni c#, si può avere la necessità di agire direttamente su controlli winform, ad esempio impostare il contenuto di una casella di testo in una finestra.
Se però si tenta di agire direttamente sul controllo, ad esempio da un oggetto backgroundWorker (che altro non è che un thread), a runtime viene generata una eccezione e il debugger si lamenta per una chiamata cross-thread non correttamente gestita.
Per fortuna la soluzione è alquanto semplice, racchiusa in poche righe di codice. Ad esempio, nel codice eseguito dal backgroundWorker, basterà inserire una chiamata invoke sul controllo con il quale intendiamo interagire.
Dato una textbox chiamata txt_esempio, il codice quindi sarà:
Se però si tenta di agire direttamente sul controllo, ad esempio da un oggetto backgroundWorker (che altro non è che un thread), a runtime viene generata una eccezione e il debugger si lamenta per una chiamata cross-thread non correttamente gestita.
Per fortuna la soluzione è alquanto semplice, racchiusa in poche righe di codice. Ad esempio, nel codice eseguito dal backgroundWorker, basterà inserire una chiamata invoke sul controllo con il quale intendiamo interagire.
Dato una textbox chiamata txt_esempio, il codice quindi sarà:
try
{
txt_esempio.Invoke((MethodInvoker)delegate() {
txt_esempio.Text = "Testo modificato da backgroundWorker";
});
}
catch (InvalidOperationException ioe) { }
lunedì 20 gennaio 2014
Crono, un Time Tracker open source in php codeigniter
Dopo qualche settimana di lavoro vi presento Crono, una web application per il time tracking open source (quindi è gratuito) scritta in Php.
Specifico che il software è formato da un sistema di APIs sviluppato in Codeigniter e un frontend che si basa su Twitter Bootstrap e jQuery. Il DBMS utilizzato è MySql.
Per utilizzarlo potete clonare il repository (sempre aggiornato) oppure scaricare la versione 1.0.
Dopo averlo copiato nella cartella wwwroot di un webserver che supporti il php è necessario visitare da un browser la cartella install per installarlo correttamente.
Crono ha le seguenti caratteristiche:
Qualche screenshot di Crono:
Specifico che il software è formato da un sistema di APIs sviluppato in Codeigniter e un frontend che si basa su Twitter Bootstrap e jQuery. Il DBMS utilizzato è MySql.
Per utilizzarlo potete clonare il repository (sempre aggiornato) oppure scaricare la versione 1.0.
Dopo averlo copiato nella cartella wwwroot di un webserver che supporti il php è necessario visitare da un browser la cartella install per installarlo correttamente.
Crono ha le seguenti caratteristiche:
- registrazione e gestione di attività (task) sia live che manuali, collegate a progetti
- gestione progetti
- gestione clienti
- gestione utenti
- sistema di installazione
Qualche screenshot di Crono:
Etichette:
bootstrap,
codeigniter,
crono,
jquery,
opensource,
php,
time tracking,
timetracker
venerdì 6 dicembre 2013
Manipolazione di immagini con CodeIgniter
CodeIgniter permette di manipolare le immagini con una apposita libreria, eseguendo le seguenti operazioni:
- ridimensionamento
- cropping
- rotazione
- aggiunta di watermark
Ridimensionamento
La image library viene caricata dal framework mediante l'apposita funzione del framework (load), con parametro un array di configurazione. A seconda della configurazione utilizzata può essere richiamata una funzione di manipolazione immagini. Ad esempio, per eseguire un ridimensionamento devono essere specificati i parametri width e height:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['maintain_ratio'] = TRUE;
$config['width'] = 75;
$config['height'] = 50;
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Ridimensiono l'immagine /percorso/mypic.jpg
$this->image_lib->resize();
Il listato precedente ridimensiona l'immagine sovrascrivendola. Se si preferisce mantenere l'immagine originale, creando una nuova immagine ridimensionata, è possibile utilizzare il parametro di configurazione new_image:
$config['new_image'] = '/percorso/nuovaimmaginediversa.jpg';
Rotazione
Una rotazione di una immagine può essere eseguita con 5 opzioni diverse:- 90 gradi
- 180 gradi
- 270 gradi
- "hor'' (inversione orizzontale)
- "vrt'' (inversione verticale)
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['rotation_angle'] = 'hor';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
$this->image_lib->rotate();
Cropping
Per ritagliare una immagine si può utilizzare la funzione crop specificando gli assi X e Y lungo i quali eseguire il cropping:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['x_axis'] = '100';
$config['y_axis'] = '60';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Eseguo il cropping
$this->image_lib->crop();
Watermark
L'aggiunta di un watermark (filigrana) può avvenire attraverso due modalità, text (aggiunta di un testo all'immagine) e overlay (aggiunta di una piccola immagine in overlay all'immagine originale). Vediamo un esempio dell'ultimo caso, con una piccola immagine da inserire in basso a destra, con un padding di 5 pixel dai vertici:
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'right';
$config['wm_padding'] = '5';
$config['wm_overlay_path'] = '/percorso/watermark.png';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Eseguo l'aggiunta del watermark
$this->image_lib->watermark();
Ora la risposta ad un problema che mi ha fatto sbattere un po' la testa prima di comprenderne la (ovvia) soluzione. Se voglio manipolare due immagini di fila, ma con una configurazione diversa? Notiamo nei listati precedenti come la libreria venga caricata dal metodo load con l'array di configurazione, ma questo deve avvenire solo una volta, dopodiché la libreria è già stata caricata all'interno dell'esecuzione di codeigniter. La risposta è l'utilizzo delle funzioni clear ed initialize, vediamone un esempio concreto:
//Impostazioni cropping
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['x_axis'] = '100';
$config['y_axis'] = '60';
//Carico la libreria con la configurazione
$this->load->library('image_lib', $config);
//Eseguo il cropping
$this->image_lib->crop();
//Cancello le impostazioni della libreria
$this->image_lib->clear();
//Impostazioni per rotazione orizzontale
$config['image_library'] = 'gd2';
$config['source_image'] = '/percorso/mypic.jpg';
$config['rotation_angle'] = 'hor';
//Carico la libreria con la configurazione
$this->image_lib->initialize($config);
//Eseguo la rotazione
$this->image_lib->rotate();
Etichette:
codeigniter,
php,
tips
giovedì 28 novembre 2013
API RESTful con Codeigniter usando codeigniter-restserver
Nel post precedente ho mostrato come creare un semplice sistema API con il solo metodo GET. Ma se volessimo un server API che risponda secondo lo standard RESTful, dovremmo gestire anche i metodi POST, PUT e DELETE.
In particolare, lo standard consiglia di utilizzare:
- GET per richieste di lettura di una risorsa
- POST per richieste di creazione di una risorsa
- PUT per richieste di modi ca di una risorsa
- DELETE per richieste di eliminazione di una risorsa
Installazione
Il primo passo è ovviamente scaricare il pacchetto dalla pagina github della libreria. Il pacchetto includerebbe anche CodeIgniter, ma è molto probabile che si voglia integrare restserver in un progetto codeigniter gi à esistente. In questo caso è su fficiente copiare i filesapplication/libraries/Format.php application/libraries/REST_Controller.php application/config/rest.phpnella propria directory application, e ricordarsi di caricare automaticamente la classe REST_Controller come libreria nel fi le di con gurazione
application/config/autoload.phpPer personalizzare le opzioni di restserver, basta modi care l'apposito fi le precedentemente copiato:
application/config/rest.php
Funzionamento di base
Per il buon funzionamento del sistema è necessario creare controller che estendono la classe base REST_Controller. La libreria elabora le richieste sulla base del metodo HTTP utilizzato e della risorsa (controller), eseguendo la funzione corrispondente all'insieme dei due elementi, sempre seguendo la logica CodeIgniter. Per spiegarmi meglio, ipotizziamo di avere il seguente controller:class News extends REST_Controller
{
public function index_get()
{
// Lettura delle news
}
public function index_post()
{
// Crea una news
}
public function index_put()
{
// Modifica una news
}
public function index_delete()
{
// Elimina una news
}
}
Una richiesta del tipo
GET http://www.example.com/newscomporterà l'esecuzione della funzione index_get, index perché l'url è senza una funzione specificata (news è direttamente il controller) e get perché il metodo HTTP utilizzato è, appunto, GET.
L'accesso ai parametri è garantito dalle funzioni get, post e put.
$this->get('id'); //mappatura di $this->input->get()
$this->post('id'); //mappatura di $this->input->post()
$this->put('id');
Per i parametri del metodo DELETE, poiché lo standard non li prevede, è sufficiente gestirli direttamente dalla funzione richiamata dal controllore:
public function index_delete($id)
{
$this->response(array(
'returned from delete:' => $id,
));
}
E' possibile inviare in output una struttura dati con la funzione response, gestendo anche la risposta HTTP direttamente (opzionale). In questo modo la libreria si preoccuperà di formattare la risposta a seconda dello standard impostato nella configurazione (io consiglio JSON). Inoltre, gestendo le risposte HTTP, è possibile utilizzare codici appropriati come il 201 per HTTP 201 Created e 404 per HTTP 404 Not Found (in quest'ultimo caso il primo parametro sarà una risorsa vuota, come ad esempio un array senza elementi).
public function index_post()
{
// ...crea una news
$this->response($news, 201); // Manda la risposta HTTP 201
}
Queste sono i tips principali per lo sviluppo di un sistema API con codeigniter-restserver. Non ho parlato per motivi di tempo delle altre caratteristiche della libreria, quali la gestione di API Keys, la gestione dell'autenticazione ecc. per le quali rimando direttamente al sito ufficiale.
Etichette:
api,
codeigniter,
guida,
php,
tips
Iscriviti a:
Post (Atom)

