Archivi categoria: DOCUMENTAZIONE

La categoria contiene tutta la documentazione disponibile per la consultazione

TUTORIAL – CONFIGURARE CLIENT PER CANTALOUPE IMAGE SERVER

02/11/2018 admin

L’articolo illustra come configurare un client che si colleghi a Cantaloupe. Una volta configurato Cantaloupe occorre realizzare un client per poter usare i servizi esposti e mostrare le derivate richieste. Per poter usare i servizi andrebbe realizzato un rest client, ma il mercato già offre dei client in javascript che permettono di vedere l’immagine con comodo funzioni di zoom,

La prima scelta è leaflet che implementa la gestione di una mappa interattiva. Per poterla usare è sufficiente realizzare una pagina html che chiami la pagina la pagina info.json dell’immagine desiderata, come illustrato sotto

<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [0, 0],
crs: L.CRS.Simple,
zoom: 0, 
})
L.tileLayer.iiif('http://localhost:8182/iiif/2/0001_2.jpg/info.json').addTo(map);
</script>
</body>

<body>

var map = L.map('map', {

center: [0, 0],

crs: L.CRS.Simple,

zoom: 0,

})

L.tileLayer.iiif('http://localhost:8182/iiif/2/0001_2.jpg/info.json').addTo(map);

</script>

</body>

se avete operato bene chiamando la pagina html vedremo la nostra immagine con le funzioni di zoom attive.

Un altro client utilizzabile è Openseadragon , che aumenta il numero di funzioni a disposizione e presenta opzioni per gestire tutti i casi d’uso comuni. Se la banda non è un problema è possibile integrare l’immagine completa e demandare al client la gestione dello zoom

<body>
	<div id="openseadragon1"></div>
	<ul class="pgwSlideshow">
	</ul>
	<script src="openseadragon.min.js"></script>
<script type="text/javascript">
            OpenSeadragon({
                id:            "openseadragon1",
                prefixUrl:     "images/",
                immediateRender: true,
				        showNavigator: true,
                preserveViewport: true,    
                timeout: 60000,
                tileSources: {
                    type: 'image',
                    url:  'http://localhost:8182/iiif/2/0001_2.jpg/full/full/0/default.jpg'
                }
            });
        </script>
</body>

<body>

</ul>

OpenSeadragon({

id: "openseadragon1",

prefixUrl: "images/",

immediateRender: true,

showNavigator: true,

preserveViewport: true,

timeout: 60000,

tileSources: {

type: 'image',

url: 'http://localhost:8182/iiif/2/0001_2.jpg/full/full/0/default.jpg'

}

});

</script>

</body>

In questo modo scarichiamo il carico computazionale sul client e Cantaloupe non effettua elaborazioni, mentre se vogliamo sfruttare la potenza di Cantaloupe il codice da usare è il seguente

<body>
<div id="openseadragon1"></div>
	<ul class="pgwSlideshow">
	</ul>
	<script src="openseadragon.min.js"></script>
<script type="text/javascript">
            OpenSeadragon({
                id:            "openseadragon1",
                prefixUrl:     "images/",
                immediateRender: true,
				        showNavigator: true,
                preserveViewport: true,    
                timeout: 60000,
                tileSources: 'http://localhost:8182/iiif/2/0001_5.jpg/info.json'
            });
        </script>
</body>

<body>

</ul>

OpenSeadragon({

id: "openseadragon1",

prefixUrl: "images/",

immediateRender: true,

showNavigator: true,

preserveViewport: true,

timeout: 60000,

tileSources: 'http://localhost:8182/iiif/2/0001_5.jpg/info.json'

});

</script>

</body>

VARIE

TUTORIAL – CANTALOUPE IMAGE SERVER

21/10/2018 admin

Per esigenze lavorative ho dovuto utilizzare un image server, capace di effettuare trasformazione di immagini a runtime per adattare le immagini a qualsiasi dispositivo. La scelta è caduta su Cantaloupe, un image server scritto in java compliant con le API IIIF, che definiscono un interfaccia di servizi da invocare per effettuare le principali operazioni sulle immagini. Installare e avviare Cantaloupe è molto semplice, è sufficiente scaricare dalla homepage il file zip contenente i binari, scompattare e lanciare l’eseguibile non prima di aver creato il file di configurazione nella stessa cartella. Per la mia installazione ho usato Cantaloupe v. 3.3.5 e per avviare il server ho usato la direttiva

java -Dcantaloupe.config=cantaloupe.properties -Xmx2g -jar Cantaloupe-3.3.5.war

1	java -Dcantaloupe.config=cantaloupe.properties -Xmx2g -jar Cantaloupe-3.3.5.war

La configurazione di default prevede che il server stia in ascolto sulla porta 8182, pertanto se avete fatto tutto correttamente accedendo al link http://localhost:8182/ comparirà la nostra home page, ovvero una bella fetta di cantalupo indicante la versione corrente.

A questo punto attiviamo il pannello di amministrazione. Per farlo accediamo al file di configurazione e attiviamo tramite la sezione

# Enables the Control Panel, at /admin.
admin.enabled = true
# Password to access the Control Panel. (The username is "admin".)
admin.password = admin

# Enables the Control Panel, at /admin.

admin.enabled = true

# Password to access the Control Panel. (The username is "admin".)

admin.password = admin

Nel mio caso ho scelto admin come password, riavviamo e accediamo al link http://localhost:8182/admin, inseriamo i dati accesso ed ecco il nostro pannello

Per le informazioni sulle varie funzionalità a disposizione rimando al manuale, soffermiaci su 2 schede in particolare: resolvers e processors. I processors sono gli oggetti che effettuano le trasformazioni sulle immagini e sono legate ai formati che dobbiamo gestire e gli standard supportati sono rappresentati nella scheda in una comodo tabella. La configurazione di default prevede l’uso di java2dprocessor, ma siamo liberi di fare quello che vogliamo.

I resolvers sono gli oggetti che a partire da un identificativo alfanumerico sono in grado di recuperare l’immagini. Sono presenti vari tipi, ma quello di default è il FilesystemResolver che a partire da una directory recupera l’immagine grazie al nome

Se voglio ottenere i metadati di una immagine occorre invocare l’url

http://localhost:8182/iiif/2/0001_2.jpg/info.json

1	http://localhost:8182/iiif/2/0001_2.jpg/info.json

dove 0001_2.jpg è il nome del file. Con tale direttiva ottengo i metadati del file in formato json

{"@context":"http://iiif.io/api/image/2/context.json","@id":"http://localhost:8182/iiif/2/0001_2.jpg","protocol":"http://iiif.io/api/image","width":9638,"height":10783,"sizes":[{"width":75,"height":84},{"width":151,"height":168},{"width":301,"height":337},{"width":602,"height":674},{"width":1205,"height":1348},{"width":2410,"height":2696},{"width":4819,"height":5392}],"tiles":[{"width":1205,"height":1348,"scaleFactors":[1,2,4,8,16,32,64,128]}],"profile":["http://iiif.io/api/image/2/level2.json",{"formats":["jpg","tif","gif","png"],"maxArea":400000000,"qualities":["bitonal","default","gray","color"],"supports":["regionByPx","sizeByW","sizeByWhListed","cors","regionSquare","sizeByDistortedWh","sizeAboveFull","canonicalLinkHeader","sizeByConfinedWh","sizeByPct","jsonldMediaType","regionByPct","rotationArbitrary","sizeByH","baseUriRedirect","rotationBy90s","profileLinkHeader","sizeByForcedWh","sizeByWh","mirroring"]}]}

{"@context":"http://iiif.io/api/image/2/context.json","@id":"http://localhost:8182/iiif/2/0001_2.jpg","protocol":"http://iiif.io/api/image","width":9638,"height":10783,"sizes":[{"width":75,"height":84},{"width":151,"height":168},{"width":301,"height":337},{"width":602,"height":674},{"width":1205,"height":1348},{"width":2410,"height":2696},{"width":4819,"height":5392}],"tiles":[{"width":1205,"height":1348,"scaleFactors":[1,2,4,8,16,32,64,128]}],"profile":["http://iiif.io/api/image/2/level2.json",{"formats":["jpg","tif","gif","png"],"maxArea":400000000,"qualities":["bitonal","default","gray","color"],"supports":["regionByPx","sizeByW","sizeByWhListed","cors","regionSquare","sizeByDistortedWh","sizeAboveFull","canonicalLinkHeader","sizeByConfinedWh","sizeByPct","jsonldMediaType","regionByPct","rotationArbitrary","sizeByH","baseUriRedirect","rotationBy90s","profileLinkHeader","sizeByForcedWh","sizeByWh","mirroring"]}]}

Per ottenere l’immagine originale il link da invocare è il seguente

http://localhost:8182/iiif/2/0001_2.jpg/full/full/0/default.jpg

1	http://localhost:8182/iiif/2/0001_2.jpg/full/full/0/default.jpg

Per ottenere le varie derivate occorre variare i parametri che seguono l’identificativo del file nel rispetto delle api IIIF, per maggiori dettagli leggete le specifiche disponibili qui

VARIE

ECCEZIONI JAVA – org.springframework.jdbc.BadSqlGrammarException

07/10/2018 admin

Ultimamente mi sono imbattuto in un problema interessante legato ai driver Oracle: una funzione rilasciata non funzionava nel nuovo ambiente e dava l’eccezione BadSqlGrammarException e più precisamente .

org.springframework.jdbc.BadSqlGrammarException: CallableStatementCallback; bad SQL grammar [{? = call GETREPORTGENERALE(?, ?, ?, ?)}];

1	org.springframework.jdbc.BadSqlGrammarException: CallableStatementCallback; bad SQL grammar [{? = call GETREPORTGENERALE(?, ?, ?, ?)}];

Comincio l’analisi del problema e la segnalazione fa pensare che l’applicativo stia invocando in modo errato la function, che effettivamente in ingresso riceve 5 parametri e non 4 come fa vedere il log. Rigenero il war pensando che sia stata installata una versione diversa ma il problema persiste. A questo punto penso che il problema possa essere lato db, pertanto rigenero gli script sql e vengono reinstallati nell’ambiente di riferimento. Niente da fare. Mi accorgo che la versione Oracle tra i 2 ambienti è differente, ma questo non dovrebbe spiegare l’errore. Non mi resta che controllare i 2 ambienti, in questo caso un tomcat 7 e mi accordo che i 2 ambienti presentano versioni di driver oracle differenti. Il cliente aveva effettuato l’aggiornamento della versione Oracle alla 12 e di conseguenza aveva aggiornato la versione del driver Oracle, passando dalla 10 alla 12. Ecco individuato il problema, la chiamata falliva se fatta con il nuovo driver. La chiamata sfrutta la classe SimpleJdbcCall offerta da Spring

SimpleJdbcCall jdbcCall = new SimpleJdbcCall(getJdbcTemplate()).
withFunctionName("getReportGenerale").
returningResultSet("reportGenerali", new ReportMapper());

SimpleJdbcCall jdbcCall = new SimpleJdbcCall(getJdbcTemplate()).

withFunctionName("getReportGenerale").

returningResultSet("reportGenerali", new ReportMapper());

Per risolvere il problema ho dovuto modificare il sorgente, rinunciare alla SimpleJdbcCall e utilizzare la classica CallableStatement

CallableStatement prepareCall = getConnection().prepareCall(getReportGenerale);
prepareCall.registerOutParameter(1,OracleTypes.CURSOR);

1 2	CallableStatement prepareCall = getConnection().prepareCall(getReportGenerale); prepareCall.registerOutParameter(1,OracleTypes.CURSOR);

DOCUMENTAZIONE, GWT

TUTORIAL GWT – COME DEBUGGARE USANDO IL SUPERDEV

22/04/2018 admin

Con l’introduzione del superdev mode non è più possibile usare il debug nel nostro IDE come siamo stati abituati. Per poter usare il debug occorre installare il plugin SDBG disponibile qui.

Una volta installato il plugin avviamo il nostro progetto tramite il superdev mode e una volta che il sistema è correttamente avviato, creiamo una configurazione Chrome che carichi la hosted page e su questa avviamo il debug.

Se abbiamo fatto tutto correttamente verranno attivati i breakpoint selezionati in Eclipse, e sarà anche possibile usare il debug all’interno di Chrome, usando il Chrome DevTools JavaScript debugger.

SPRING BOOT

TUTORIAL SPRING BOOT – CAMBIARE PORTA

22/03/2018 admin

Spring Boot di default usa la porta 8080, ma se hai necessità di cambiarla puoi agire in 2 modi:

lanci la jvm con parametro –server.port=8090

oppure modifichi il file di configurazione aggiungendo la porta tramite la variabile

server.port = 8090

JHIPSTER

TUTORIAL JHIPSTER – PRIMI PASSI

23/02/2018 admin

Durante la fase di scouting per valutare nuovi framework e nuove librerie mi sono imbattuto in JHIPSTER. Si tratta di una piattaforma di sviluppo che consente di generare una applicazione con quello che gli autori reputano il meglio che il panorama offre. Nel momento in cui scrivo la versione è la 4.14.0, che permette di realizzare una webapp basata su Spring Boot 1.5 e Angular 5, mentre la versione 5, già annunciata, promette il passaggio a Spring Boot 2 e l’introduzione di React per il client e la rimozione di Angular JS. JHIPSTER ha vinto il Duke’s Choice Award 2017 e si è classificato terzo al JAX Innovation award nella categoria maggior innovazione per l’ecosistema JAVA.

Avvicinarsi a JHIPSTER ci da il vantaggio di vedere concentrato il top delle tecnologie a disposizione del mondo JAVA e ci da l’opportunità di assemblarle riducendo al minimo i tempi di creazione della applicazione. Partiamo subito e tiriamo su il nostro primo progetto. Per usare JHIPSTER abbiamo sei approcci possibili:

JHipster Online è un tool online che ti guida nella creazione dell’app, va bene come prova ma allo stato attuale non consente di gestire modifiche successive
“Locale con YARN” è la modalità suggerita dagli autori. Si basa su YARN , che è il package manager sviluppato da facebook basato su NPM.
“Locale con NPM” è identica alla precedente, ma usa NPM il package manager di Node.js.
“Installazione tramite package manager” è ancora in beta
“Box Vagrant” è disponibile una macchina virtuale che contiene tutti gli strumenti necessari.
“Docker” è disponibile un container docker contenente gli strumenti necessari

Usiamo la modalità consigliata e seguiamo i seguenti passi:

Installiamo Java 8
Installiamo Node.js
Installiamo Yarn
installiamo Yeoman tramite il comando: yarn global add yo. Yeoman è un tool che consente di creare la struttura base di una app.
installiamo JHipster tramite il comando: yarn global add generator-jhipster

Seguendo questi step siamo in grado di creare la nostra app con front-end Angular, qualora volessimo usare AngularJS dobbiamo aggiungere altri due step:

Installare Bower: yarn global add bower. Bower è un package manager rimasto in maintenance, ormai sostituito da YARN e WEBPACK.
Installare Gulp: yarn global add gulp-cli. Gulp è un task manager.

A questo punto non resta che creare la nostra prima applicazione. Creiamo una directory e al suo interno lanciamo il comando: jhipster

E qui inizia il bello. Jhipster ci interroga sulle caratteristiche che vogliamo e il gioco è fatto, alla fine abbiamo una applicazione correttamente funzionante, da poter importare nel nostro editor preferito.

Per vederla funzionante lanciate il comando mvnw, che tirerà su il progetto su porta 8080.

GWT

TUTORIAL GWT – CREARE UNA WEBAPP CON GWT 2.8

05/02/2018 admin

Da tempo pensavo di aggiornare i componenti che uso in ufficio e ho deciso di partire da GWT. Nel momento in cui scrivo l’ultima versione è la 2.8.2. Mi piace GWT, mi piace l’idea di lavorare solo in java e xml e non dovermi preoccupare delle librerie javascript, durante la generazione del war sarà GWT a trasformare le classi java in unico file javascript che sarà incluso all’interno del mio progetto.

Andiamo sul sito http://www.gwtproject.org e partiamo dall’analisi dei requisiti di sistema. La nuova versione ha una dipendenza minima di JDK 1.8, Google ci avvisa che il sistema compila correttamente su JDK 1.7 ma che la modalità in devmode presenta malfunzioni. L’IDE di riferimento è Eclipse, nel momento in cui scrivo sto usando la versione Oxygen. Su questa installiamo il GWT Eclipse plugin e possiamo iniziare.

A questo punto avete 2 possibilità:

usare il wizard che vi tira su il progetto con la sua alberatura e lo rende già eseguibile .
Integrare maven, integrare il plugin disponibile e creare il nostro progetto a partire da un archetipo .

L’opzione 1 è quella più rapida, selezionando i dati di esempio, ci permette di avere subito il progetto operativo e poterlo lanciare tramite una delle seguenti opzioni :

GWT Development Mode (Avvia un server in ascolto delle richieste del client. Se tutto è ok vai all’indirizzo http://127.0.0.1:9876/ per vedere il server attivo. A questo punto occorre configurare un qualsiasi server per caricare il contesto web )
GWT Development Mode with jetty (Avvia il code server ed un jetty server con il client attivo. A questo punto se tutto è ok accedete alla pagina http://127.0.0.1:8888/ e vedrete la home page dell’applicativo. Rispetto al punto precedente, abbiamo già il web server pronto.)
GWT Legacy Development Mode with jetty (Avvia l’applicativo usando un processo OOHPM. Tale processo non è più supportato dai moderni browser. Infatti è possibile vederlo attivo solo su una vecchia versione di firefox su cui va installato il google web toolkit developer plugin).

Il plugin ha creato la directory war e 3 package per i sorgenti: client, server e shared. Ad ogni package corrisponde una visibilità ed un comportamento diverso. Tutti i sorgenti saranno compilati in .class sotto la WEB-INF, i sorgenti del package server sono visibile solo alla parte server del progetto e non al frontend, i sorgenti della parte client verranno trasformati in javascript, pertanto alcune classi non saranno disponibili perchè non supportate da Javascript (es. Calendar o String.format), i sorgenti del package shared saranno visibili sia al frontend che al backend.

Nota dolente di questo approccio è che il wizard fallisce qualora si chiede la creazione del progetto con struttura maven. Appena generato il progetto indica errori di compilazione e questo non è bello, visto che ha fatto tutto da solo.

Aprendo la console è possibile far partire il progetto usando la direttiva mvn war:exploded gwt:devmode, mentre in eclipse occorre configurare il progetto per correggere gli errori. Per correggere l’errore in Eclipse lanciate la direttiva mvn eclipse:eclipse e fate il refresh in Eclipse del progetto, in questo modo dovrete soltanto da aggiungere la dipendenza da GWT tramite IDE e tutto dovrebbe riattivarsi.

Adesso veniamo al punto 2, con Maven posso partire da un archetipo che mi mette a disposizione tutte le librerie che mi servono con minimo sforzo. Devo realizzare una webapp che esponga un front-end gwt e dei servizi rest per l’accesso alla base dati. Parto quindi dall’archetipo minimo previsto per gwt e a questo aggiungo spring web per la gestione dei servizi rest e restyGWT per integrarli in modo più rapido. Voglio rendere al minimo l’uso delle chiamate RPC. In questo modo potrò disaccoppiare i sistemi e un domani eventualmente sostituire GWT con un altro frontend, senza dover toccare il backend. Impostato il progetto lo facciamo partire con la direttiva e il gioco è fatto

mvn war:exploded gwt:devmode

1	mvn war:exploded gwt:devmode

Per riassumere trovate il pom del progetto con le dipendenze già pronte.

Buon divertimento

VARIE

TERMINARE UN PROCESSO JAVA

05/02/2018 admin

Ultimamente mi capita di aver dei processi JAVA attivi e non vederli tra quelli indicati nel taskmanager. Mi capita con il plugin jetty che a seguito di errore risulta non attivo, ma in realtà mi ha lasciato un processo che blocca l’accesso alle risorse.

Per fortuna ci viene in soccorso il jps – Java Virtual Machine Process Status Tool che mi permette di sapere quanti processi java sono attivi e relativo PID per poterli chiudere con il comando taskkill.

Pertanto apriamo una shell e lanciamo il comando

jps -m

che mi restituirà l’elenco dei processi java attivi

984 DevMode -gen C:\Users\Valerio\eclipse-workspace-oxygen\gwtwebapp\target\.generated -war C:\Users\Valerio\eclipse-workspace-oxygen\gwtwebapp\target\gwtwebapp-1.0-SNAPSHOT -logLevel INFO -port 8888 -codeServerPort 9997 -startupUrl application.html -sourceLevel 1.8 it.valeriofinazzo.application
7876
2492 Launcher gwt:run
7308 Jps -m

A questo punto possiamo lanciare il comando taskkill /F /PID 984 e il sistema ci restituirà il messaggio

OPERAZIONE RIUSCITA: il processo con il PID 984 è stato terminato.

GWT

TUTORIAL GWT – DETERMINARE L’ANNO CORRENTE

12/01/2018 admin

In ambito GWT l’oggetto Calendar non è disponibile, pertanto non volendo usare il metodo deprecato getYear() dell’oggetto Date , è possibile ottenere l’anno corrente usando l’oggetto com.google.gwt.i18n.client.DateTimeFormat

Date today = new Date();
String format = DateTimeFormat.getFormat("yyyy").format(today);
int annoCorrente = Integer.parseInt(format);

Date today = new Date();

String format = DateTimeFormat.getFormat("yyyy").format(today);

int annoCorrente = Integer.parseInt(format);

WORDPRESS

TUTORIAL WORDPRESS – ATTIVARE/DISATTIVARE WIDGET

09/01/2018 admin

Nasce l’esigenza di attivare dei widget a seguito dell’autenticazione utente. Per questa esigenza ci viene in soccorso il plugin Widget Logic, disponibile al link https://wordpress.org/plugins/widget-logic/.

Attivando il plugin verrà attivata dentro ogni widget un campo per la logica aggiuntiva.

All’interno del campo testo sarà possibile tramite del codice stabilire la logica di visualizzazione

is_user_logged_in() –> il widget è visibile solo per utenti autenticati

!is_user_logged_in() –> il widget è visibile solo per utenti non autenticati

www.valeriofinazzo.it

Archivi categoria: DOCUMENTAZIONE

TUTORIAL – CONFIGURARE CLIENT PER CANTALOUPE IMAGE SERVER

TUTORIAL – CANTALOUPE IMAGE SERVER

ECCEZIONI JAVA – org.springframework.jdbc.BadSqlGrammarException

TUTORIAL GWT – COME DEBUGGARE USANDO IL SUPERDEV

TUTORIAL SPRING BOOT – CAMBIARE PORTA

TUTORIAL JHIPSTER – PRIMI PASSI

TUTORIAL GWT – CREARE UNA WEBAPP CON GWT 2.8

TERMINARE UN PROCESSO JAVA

TUTORIAL GWT – DETERMINARE L’ANNO CORRENTE

TUTORIAL WORDPRESS – ATTIVARE/DISATTIVARE WIDGET

Il sito dell'ingegnere Valerio Finazzo