Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali all'interno della piattaforma WebBioBank

Anno accademico 2016/2017
Università degli Studi di Trieste
Dipartimento di Ingegneria e Architettura
Corso di Studi in Ingegneria Elettronica e Informatica
Tesi di Laurea Triennale
Progettazione e sviluppo del modulo di
gestione e analisi dei biosegnali
all'interno della piattaforma WebBioBank
Relatore:
Prof. Francesco Brun
Candidato:
Anna Stramaglia
Correlatori:
Dottor Marco Prenassi
Prof. Sara Marceglia

INDICE
Sommario.....................................................................................................................................1
Abstract........................................................................................................................................1
1. INTRODUZIONE................................................................................................................3
1.1. Obiettivo della ricerca............................................................................................................. 3
1.2. Cenni su WebBioBank ............................................................................................................ 3
1.3. Obiettivi .................................................................................................................................... 4
2. CONCETTI E PRESUPPOSTI............................................................................................6
2.1.1. Malattia di Parkinson...................................................................................................... 6
2.1.2. Biosegnale......................................................................................................................... 8
2.1.2.1. Definizione e descrizione ....................................................................................... 8
2.1.2.2. Biosegnali di interesse per WebBioBank............................................................ 10
3. MATERIALI E METODI ..................................................................................................11
3.1. Strumenti e Programmi ........................................................................................................ 11
3.1.1. WebBioBank................................................................................................................... 11
3.1.2. Visual Studio.................................................................................................................. 14
3.1.3. SQL Server...................................................................................................................... 15
3.1.4. Silverlight........................................................................................................................ 16
3.1.5. ASP.NET......................................................................................................................... 16
3.1.6. C# ..................................................................................................................................... 18
3.1.7. HTML.............................................................................................................................. 19
3.1.8. Web server...................................................................................................................... 20
3.2. Metodi..................................................................................................................................... 20
3.2.1. “BiosignalViewer”......................................................................................................... 20
3.2.1.1. “BiosignalViewer.aspx.cs” ................................................................................... 25
3.2.1.1.1. Spazi dei nomi utilizzati.................................................................................... 27
3.2.1.1.2. Lettura da file e caricamento dati..................................................................... 34
3.2.1.1.3. Metodi e gestori eventi ...................................................................................... 37

3.2.1.2. “BiosignalViewer.aspx”........................................................................................ 48
3.2.1.2.1. Formattazione pagina........................................................................................ 49
4. RISULTATI.........................................................................................................................57
4.1. Scenario precedente al lavoro di tesi .................................................................................. 57
4.2. Scenario al termine del lavoro di tesi.................................................................................. 60
4.2.1. Funzionamento.............................................................................................................. 61
4.2.1.1. Visualizzazione...................................................................................................... 62
4.2.1.2. Zoom e Reset.......................................................................................................... 63
4.2.1.3. Spostamento........................................................................................................... 64
4.2.1.4. Line-Spline.............................................................................................................. 67
4.2.1.5. Cambio colore ........................................................................................................ 68
4.2.2. Sviluppo ulteriore, grafico multiserie......................................................................... 70
5. CONCLUSIONE................................................................................................................73
6. CODICE..............................................................................................................................75

ELENCO ACRONIMI
PD: Parkinson Disease, Malattia di Parkinson;
conversione A/D: conversione Analogico/Digitale
DBS: Deep Brain Stimulation, Stimolazione profonda del cervello;
OU: Operative Unit, Unità Operativa;
sOU: Super Operative Unit, Super Unità Operativa;
IDE: Integrated Developement Environment, Ambiente di sviluppo
integrato;
CIL: Common Intermediate Language, Linguaggio Intermedio Comune;
CLR: Common Language Runtime, Linguaggio di Runtime Comune;
DBMS: Database Management System, Sistema di gestione di basi di dati;
RDBMS: Relational Database Management System, Sistema Relazionale per
la gestioni di basi di dati;
DBA: Database Administrator, Amministratore della base di dati;
ECMA: European Computer Manufacturers Association
jit: just in time, appena in tempo;
CPU: Central Processing Unit, Unità Centrale di elaborazione;
HTML: Hypertext Markup Language, Linguaggio a Marcatori per ipertesti;
CSS: Cascading Style Sheets, Fogli di Stile a Cascata;
TCP: Transmission Control Protocol, Protocollo per il Controllo della
Trasmissione;
HTTP: Hypertext Transfer Protocol, Protocollo di Trasferimenti per
ipertesti;
HTTPS: Hypertext Transfer Protocol Secure, Protocollo di Trasferimento per
ipertesti sicuro;
WWW: World Wide Web;
LINQ: Language Integrated Query, linguaggio di Query integrato.

Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali
all’interno della piattaforma WebBioBank.
1
Sommario
Il presente lavoro di tesi si inserisce nel contesto della progettazione e sviluppo del
modulo software per la gestione e analisi dei biosegnali, denominato
SignalProcessing, all’interno della piattaforma WebBioBank. WebBioBank è una
piattaforma web progettata per gestire i dati clinici e i biosegnali di pazienti affetti da
malattia di Parkinson. L’obiettivo è quello di implementare uno strumento
denominato BiosignalViewer per la visualizzazione dei biosegnali in modo da rendere
il modulo SignalProcessing cross-browser. Le funzionalità di BiosignalViewer sono:
il caricamento di dati da file .txt e la visualizzazione grafica dei dati con la possibilità
di cambiare colore e forma alla curva con anche funzionalità di pan e zoom. A livello
sperimentale si è provveduto ad implementare la visualizzazione di più curve
all’interno del medesimo grafico.
Abstract
This thesis falls within the scope of the design and developement of the software
module for biosignals management and analysis, named SignalProcessing, within the
WebBioBank platform. WebBioBank is a web-based platform designed for the
management of biosignals and clinical data of patients affected by Parkinson’s
Disease. Aim of this thesis is the implementation of a software tool to display
biosignals called BiosignalViewer in order to make SignalProcessing cross-browser.
The BiosignalViewer functionalities are: data loading from .txt files and data display
with the possibility to change color and shape of the curve with also pan and zoom
functionalities. Experimentally, the original source code has been extended to display
more than one curve within the same graph.

2

3
1. INTRODUZIONE
1.1. Obiettivo della ricerca
Il presente lavoro di tesi si inserisce nel contesto della progettazione e
sviluppo del modulo software per la gestione e analisi dei biosegnali
all’interno della piattaforma WebBioBank [1]. Nello specifico, il presente
lavoro vuole potenziare le funzionalità in materia di gestione e analisi di dati
sanitari di WebBioBank e delle applicazioni basate su questa piattaforma, per
una maggiore compatibilità verso i web browser oggi più diffusi.
Il presente lavoro di tesi è dedicato prevalentemente all’implementazione di
uno strumento per la visualizzazione dei biosegnali, di seguito indicato anche
come BiosignalViewer.
1.2. Cenni su WebBioBank
WebBioBank [1] è una piattaforma web progettata per gestire i dati clinici e i
biosegnali di pazienti affetti da malattia di Parkinson (Parkinson’s Disease,
PD) trattati con Deep Brain Stimulation (DBS) in diversi centri di ricerca,
chiamati Unità Operative (Operative Units, OUs), e SignalProcessing è uno
dei moduli che compongono la WebBioBank.
L’anonimità dei dati in WebBioBank è preservata dall’uso di un identificatore
univoco chiamato ID BAC legato ad ogni paziente. Il collegamento tra i dati
personali dei pazienti ed i rispettivi ID BACs è archiviato nelle corrispondenti
OUs e, i primi, non vengono mai caricati sulla piattaforma. La condivisione
dei dati avviene utilizzando esclusivamente gli identificatori univoci.
Gli operatori addetti possono utilizzare una grande varietà di funzioni per la
gestione dei dati in modo anonimo e in accordo con i protocolli per la loro

4
condivisione attraverso le diverse unità operative, promuovendo e
facilitando in tempo reale le interazioni tra i ricercatori e gli operatori presenti
nei differenti centri di ricerca.
Nel modulo di elaborazione dei segnali (SignalProcessing) i ricercatori
possono caricare i segnali tramite un file di formato .txt e questi possono
essere visualizzati ed eseguiti. Possono inoltre essere create delle catene di
esecuzione definite combinando differenti funzioni matematiche e statistiche.
Per quanto riguarda il formato dei dati che possono essere caricati, questi
devono avere un formato ben definito: matrice (colonne*righe) 2 ∗ 𝑁 di valori
interi in file .txt.
1.3. Obiettivi
Il rinnovamento della piattaforma è un progetto di grande portata nel quale
si inserisce questo specifico lavoro di tesi dedicato all’ampliamento di
funzionalità del sistema. Il modulo di elaborazione dei segnali (Signal
Processing) principale oggetto di analisi in questa tesi, è stato modificato per
rendere il sistema WebBioBank cross-browser. Nello specifico, si è proceduto
a sostituire Silverlight con C# per garantire l’accesso tramite diversi browser.
Questo ha richiesto un intervento su alcune funzionalità della piattaforma.
Le funzionalità migliorate all’interno di questo lavoro di tesi sono:
• il caricamento di dati da file .txt,
• la visualizzazione grafica dei dati con la possibilità di cambiare colore
e forma alla curva, con anche funzionalità di pan e zoom all’interno
del grafico (vedi Figura 1).

5
Figura 1: Pagina web creata.

6
2. CONCETTI E PRESUPPOSTI
In questo capitolo vengono trattati dei concetti indispensabili per la
contestualizzazione del progetto, dello specifico argomento trattato e del
percorso procedurale teorico e di processo svolto.
2.1.1. Malattia di Parkinson
La malattia di Parkinson [2] è una malattia cronica, lentamente progressiva,
che coinvolge diverse funzioni motorie, vegetative, comportamentali e
cognitive, con importanti conseguenze sulla qualità di vita e fortemente
invalidante nei suoi momenti acuti. Con un trattamento appropriato e grazie
agli approfondimenti medici nel frattempo intervenuti, però, l'aspettativa di
vita è considerata simile, o solo lievemente ridotta, rispetto a quella della
popolazione generale: la diagnosi precoce e tutti gli studi che ne possono
consentire lo sviluppo e l'implementazione in termini terapeutici sono
pertanto strategici nella formulazione dei piani sanitari individuali e collettivi
e nell'impiego delle risorse, nonché naturalmente e soprattutto nel prioritario
interesse della tutela e della cura delle persone.
La malattia di Parkinson si manifesta quando la produzione di dopamina
(mediatore chimico indispensabile al metabolismo cerebrale) nel cervello cala
consistentemente. I livelli ridotti di dopamina sono dovuti alla degenerazione
di neuroni, in un'area chiamata Sostanza Nera (la perdita cellulare è di oltre
il 60% all'esordio dei sintomi). Dal midollo al cervello cominciano a
comparire anche accumuli di una proteina chiamata alfa-sinucleina. Alcuni
studi individuano proprio in questa proteina l’elemento che diffonde la
malattia in tutto il cervello.

7
Le strutture coinvolte nella malattia di Parkinson si trovano in aree profonde
del cervello, note come gangli della base (nucleo caudato, putamen e pallido),
che partecipano alla corretta esecuzione dei movimenti (ma non solo).
La durata della fase preclinica (periodo di tempo che intercorre tra l'inizio
della degenerazione neuronale e l'esordio dei sintomi motori) non è tuttora
nota, ma alcuni studi la datano intorno a cinque anni.
Le cause della malattia non sono ancora note. Sembra che vi siano due classi
di elementi che concorrono al suo sviluppo: genetici e tossici.
La malattia è caratterizzata da diversi sintomi, tutti connotati da gravità in
relazione al normale estrinsecarsi della vita quotidiana. I principali sono:
• rigidità in molta della muscolatura del corpo;
• involontario tremore;
• seria difficoltà ad iniziare un movimento, chiamata achinesia;
• instabilità posturale causata dal danneggiamento dei riflessi posturali,
che inevitabilmente porta ad una situazione di poco equilibrio e a
pericolose cadute;
• altri importanti disturbi motori tra cui disfagia (fatica ad ingoiare),
disturbi della parola, disturbi deambulatori e affaticamento.
La possibilità di una diagnosi precoce e di interventi terapeutici preventivi
potrebbe impedire o quanto meno ritardare l'insorgere dei sintomi, talchè la
disponibilità di strumenti informatici che facilitino lo studio e l'analisi dei dati
anamnesici disponibili e valutino con immediatezza i risultati dei percorsi
terapeutici attivati è un aspetto fondamentale per lo sviluppo degli specifici
percorsi sanitari.

8
2.1.2. Biosegnale
2.1.2.1. Definizione e descrizione
All’interno dell’ambito di segnali biomedici e sensori, un biosegnale può
essere definito come la descrizione di un fenomeno fisiologico,
indipendentemente dalla natura di questa descrizione. Dato che esiste quasi
un numero infinito di meccanismi fisiologici di interesse, il numero di
possibili biosegnali è molto consistente. [3]
La parola biosegnale è una parola composta:
• bio = generato da una struttura biologica,
• segnale = grandezza fisica che varia nel tempo.
Un biosegnale contiene al suo interno informazioni sul sistema, sulla
struttura, sull’organo o sul processo che lo ha generato. La misurazione di un
segnale di questo tipo può essere più o meno utile a livello clinico-diagnostico
a seconda della capacità dello stesso di descrivere le condizioni di salute del
paziente.
La varietà di biosegnali che possono essere misurati è davvero ampia.
Si differenziano per origine (chimica, elettrica, ...), perché descrivono
differenti sistemi/organi (cervello, cuore, flusso sanguigno, …) o perché
vengono rilevati in modo diverso (tramite sensori o trasduttori).
Ogni segnale biologico percorre una catena di misura per diventare un
segnale digitale visualizzabile da un pc e tale catena, anche se differisce a
seconda del tipo di segnale, si compone di questi elementi:
• la rilevazione del segnale,

9
• l’elaborazione analogica,
• la conversione A/D (analogico/digitale),
• l’elaborazione del segnale digitale.
La rilevazione del segnale è il passaggio del segnale biologico a segnale
elettrico (sistema paziente-sistema di misura).
A seconda del tipo di segnale che si misura la rilevazione viene fatta
utilizzando:
• un trasduttore se si tratta di un segnale di origine non elettrica,
• un sensore se l’origine è elettrica.
Per elaborazione analogica si intende che l’output prodotto, cioè il segnale in
uscita dall’elaborazione, diventa un segnale analogico corrispondente al
segnale di ingresso (un segnale si dice analogico quando è la
rappresentazione di un evento fisico descritto da un segnale continuo).
Per passare da un segnale analogico ad uno digitale, così che questo possa
essere elaborato e analizzato da un pc, si effettua la conversione A/D
caratterizzata dai passaggi di:
• Campionamento:
si tratta di prelevare il segnale a tempo continuo in corrispondenza di
punti che distano tra loro una quantità Tc chiamata periodo di
campionamento. Affinché l’operazione di campionamento abbia senso
compiuto, bisogna che la sequenza dei campioni consenta la
ricostruzione del segnale analogico originario.
• Quantizzazione:
ogni campione del segnale campionato è un numero reale che può
assumere con continuità qualsiasi valore compreso tra un minimo e un

10
massimo. Se si vuole rappresentare ogni campione in forma numerica
è necessario approssimare ciascun valore reale con il livello più vicino
scegliendo tra un numero finito di livelli compresi tra il minimo e il
massimo.
Il segnale in uscita dopo la conversione A/D (conversione Analogico/Digitale)
è di tipo digitale: una sequenza di numeri, una sequenza di bit, facilmente
interpretabile, analizzabile ed elaborabile da un computer.
2.1.2.2. Biosegnali di interesse per WebBioBank
La piattaforma WebBioBank è progettata per essere più generica possibile,
anche se il sistema pone delle limitazioni circa la visualizzazione e di
conseguenza l’analisi e la gestione di alcuni tipi di segnali.
I files che contengono i valori relativi ai biosegnali che possono essere caricati
all’interno della piattaforma sono dei files di un formato specifico: matrice di
due colonne e N righe in file .txt; la conseguenza è quella di poter visualizzare
esclusivamente segnali bidimensionali e generalmente rappresentati in un
grafico in cui l’asse x descrive la variabile tempo e l’asse y descrive l’ampiezza
del segnale. Gli assi possono comunque descrivere altre grandezze.
Da ciò ne deriva che è esclusa la visualizzazione di segnali medici la cui
misurazione produce in output un formato immagine e in generale i segnali
descritti da più di due dimensioni a meno di non rappresentarli come serie
separate, prendendo in considerazione solo due dimensioni alla volta.

11
3. MATERIALI E METODI
In questo capitolo vengono descritti:
• i programmi e gli strumenti indispensabili per il funzionamento e
l’implementazione della piattaforma e quindi necessari per costruire
l’ambiente operativo di sviluppo su cui agire;
• la metodologia con cui sono state applicate le conoscenze apprese, nel
corso del periodo di tirocinio, per l’implementazione del progetto ai
fini del raggiungimento dell’obiettivo prefissato.
3.1. Strumenti e Programmi
3.1.1. WebBioBank
WebBioBank [1] [4]è una piattaforma web progettata per gestire i dati clinici
e i biosegnali di pazienti affetti da PD trattati con DBS in diversi centri di
ricerca, chiamati OUs.
Una piattaforma web è uno spazio web, o meglio un sito, specificamente
pensato e strutturato per gestire attività on-line via Internet.
WebBioBank è stata progettata per soddisfare diverse caratteristiche:
• essere una collezione di dati e biosegnali condivisi tra i differenti centri
di ricerca che garantisce la possibilità, ad operatori addetti, ricercatori
e specialisti nell’analisi di biosegnali, di consultare i dati in ogni
momento;
• il sistema, accessibile attraverso un browser standard, consente ai
ricercatori di caricare differenti funzioni di elaborazione del segnale
all’interno della piattaforma e di combinare queste funzioni in modo

12
da formare algoritmi dedicati che consentono di studiare al meglio i
biosegnali misurati;
• gli operatori possono utilizzare una grande varietà di funzioni per la
gestione dei dati in modo anonimo e in accordo con i protocolli per la
loro condivisione attraverso le diverse unità operative, promuovendo
e facilitando in tempo reale le interazioni tra i ricercatori e gli operatori
addetti nei differenti centri di ricerca;
• l’anonimità dei dati è preservata dall’uso di un identificatore univoco
legato ad ogni paziente e chiamato ID BAC. Il collegamento tra i dati
personali dei pazienti ed i rispettivi ID BACs è archiviato nelle
corrispondenti OUs e, i primi, non vengono mai caricati sulla
piattaforma. La condivisione dei dati avviene utilizzando
esclusivamente gli identificatori univoci;
• gli utenti della piattaforma, le persone cioè con il permesso di ottenere
od acquisire informazioni di qualche genere riguardo il contenuto
della piattaforma, si configurano in diversi ruoli e, in dipendenza del
ruolo che ricoprono, possono vantare diversi permessi. Ogni utente
autorizzato è in possesso di uno username ed una password da
inserire nella pagina di login che permette di avere accesso alla
piattaforma;
• solo alcuni utenti della piattaforma, gli operatori addetti, sono
autorizzati a gestire le informazioni riguardanti la storia del paziente,
i segnali neurologici ed i sintomi, i test neuropsicologici, i trattamenti
ecc.;

13
• il database è personalizzato in modo che, sulla base dei protocolli di
ricerca utilizzati, sia molto veloce nella ricerca dei dati e di
conseguenza anche nel loro riutilizzo all’interno della piattaforma.
I centri operativi sono organizzati nella seguente maniera:
• al primo livello ci sono i singoli centri clinici, le OUs;
• al secondo livello è collocata la sOU (super Operative Unit), una rete
di OU.
La sOU è creata e gestita dall’amministratore di sistema.
Ogni utente è associato ad un ruolo che definisce i suoi specifici diritti nella
visualizzazione dei dati.
I ruoli predefiniti sono i seguenti:
• amministratore;
• operatori addetti;
• infermieri e farmacisti.
L’amministratore di sistema può aggiungere ulteriori ruoli al suo insieme di
unità operative.
WebBioBank è basata su un’architettura di sistema a tre strati:
• applicazione web;
• elaborazione;
• infrastruttura.
Il livello di applicazione web permette la configurazione di un unico modello
comune per la condivisione di dati nei centri di ricerca.
Il livello di elaborazione soddisfa i bisogni della ricerca e permette la
configurazione di catene di elaborazione che sono dedicate all’analisi dei
biosegnali.

14
Il livello dell’infrastruttura gestisce la privacy dei pazienti, l’autenticazione
degli utenti, la personalizzazione del database e le regole di funzionalità per
l’utilizzo di dati clinici.
Il primo livello è quello creato in ASP.NET ed è il livello che più interessa il
lavoro che viene trattato in questa tesi.
3.1.2. Visual Studio
Visual Studio [5] [6] è un ambiente di sviluppo integrato (Integrated
Developement Environment, IDE) sviluppato da Microsoft, che supporta
attualmente diversi tipi di linguaggio quali C, C++, C#, F#, Visual Basic.Net,
Html e JavaScript, e che permette la realizzazione di applicazioni, siti web,
applicazioni web e servizi web.
Visual Studio è inoltre multipiattaforma: con esso è possibile realizzare
programmi per server, workstation, pocket PC, smartphone e, naturalmente,
per i browser.
L'ambiente integra inoltre la tecnologia IntelliSense, che permette di
correggere eventuali errori sintattici, ed alcuni logici, senza compilare
l'applicazione, possiede un debugger interno per il rilevamento e la
correzione degli errori logici nel codice in runtime e fornisce diversi
strumenti per l'analisi prestazionale.
A differenza dei compilatori classici, in quello disponibile con il .NET
Framework il codice sorgente (Visual Basic .NET, C#, ecc.) viene convertito in
codice Common Intermediate Language (CIL) che rimane ancora
indipendente dall’hardware e il Common Language Runtime (CLR) compila
il codice CIL in linguaggio macchina al momento della prima esecuzione; per

15
questo motivo il .NET Framework va installato anche sulla postazione
dell’utente in quanto il codice che distribuisce lo sviluppatore non risulta
ancora “commestibile” all’hardware.
CIL è un linguaggio progettato per essere convertito in modo efficiente in
codice macchina nativo (codice sorgente scritto in un codice leggibile dal
processore) su differenti tipi di dispositivi.
Common Intermediate Language è un linguaggio di livello più basso rispetto
a Visual Basic.NET o C#, ma presenta un livello di astrazione più elevato
rispetto ai linguaggi assembly o linguaggi macchina.
La versione utilizzata è Visual Studio 2015 Community - Versione gratuita
utilizzabile per la creazione di software non aziendali.
3.1.3. SQL Server
Microsoft SQL Server [7] è un DBMS relazionale (Relational Database
Management System, RDBMS), prodotto da Microsoft. Nelle prime versioni
era utilizzato per basi dati medio-piccole, ma a partire dalla versione 2000 è
stato utilizzato anche per la gestione di basi dati di grandi dimensioni.
DBMS [8], è un sistema software progettato per consentire la creazione, la
manipolazione (da parte di un amministratore, Database Administrator,
DBA) e l'interrogazione efficiente (da parte di uno o più utenti client) di
database (ovvero di collezioni di dati strutturati).
Per questo è detto anche "gestore o motore del database".
È ospitato su architettura hardware dedicata (server) oppure su semplice
computer.

16
I DBMS svolgono un ruolo fondamentale in numerose applicazioni
informatiche, dalla contabilità alla gestione delle risorse umane e alla finanza
fino a contesti tecnici come la gestione di rete o la telefonia.
La versione utilizzata è: SQL Server 2016 64-bit.
3.1.4. Silverlight
Silverlight [9] è un ambiente di runtime sviluppato da Microsoft per
piattaforme Windows e Mac che consente di visualizzare, all'interno del
browser, Rich Internet application, ovvero applicazioni multimediali ad alta
interattività.
Silverlight non è disponibile su Chrome, Edge e Opera. Anche Firefox
nell'anno 2017 dovrebbe abbandonare il supporto a Silverlight.
Tale tecnologia è pertanto destinata a scomparire nel corso del 2017, visto che
non sarà più supportata dai browser più diffusi su Internet. Al suo posto i siti
Internet utilizzeranno HTML5.
La versione utilizzata è: Microsoft Silverlight (64-bit) Version: 5.1.50907.0 (c)
2016 Microsoft Corporation.
3.1.5. ASP.NET
ASP.NET [5] [6]è un insieme di tecnologie di sviluppo di software per il web,
commercializzate da Microsoft. Utilizzando queste tecnologie gli
sviluppatori possono realizzare applicazioni Web e servizi Web (Web
Service).
Gli sviluppatori possono scrivere codice utilizzando uno qualsiasi dei
linguaggi di alto livello supportati dal Framework (libreria di classi) .NET,

17
come, ad esempio, Visual Basic.Net (proprietario Microsoft), C# (linguaggio
soggetto a una specifica di standardizzazione), J# (derivato da Java), ma
anche molti altri linguaggi open source e non, come Perl e Python. Questo è
possibile poiché il CLR su cui ASP.NET si basa, come tutte le applicazioni
della famiglia Microsoft.NET, è stato standardizzato presso European
Computer Manufacturers Association (ECMA, associazione dedicata alla
standardizzazione nel settore informatico e dei sistemi di comunicazione).
Le applicazioni ASP.NET sono significativamente più veloci e performanti
rispetto a quelle realizzate utilizzando altre tecnologie di scripting, in quanto
l'intero codice del sito web è pre-compilato in pochi files dll (libreria a
collegamento dinamico: è una libreria software che viene caricata
dinamicamente in fase di esecuzione invece di essere collegata staticamente
a un eseguibile in fase di compilazione), spesso in un unico file, gestiti da un
server Web.
La libreria di classi .NET Framework, implementa la struttura del CLR, la cui
base è formata da un compilatore just in time (JIT, permette un tipo di
compilazione, conosciuta anche come traduzione dinamica, effettuata
durante l'esecuzione del programma piuttosto che precedentemente). Ciò
significa che il codice intermedio prodotto, chiamato CIL e identico per tutti
i linguaggi di alto livello impiegati, viene compilato in linguaggio macchina
al momento della prima esecuzione. Utilizzando diversi compilatori just in
time è possibile riutilizzare lo stesso CIL intermedio su processori diversi.
Questa tecnica viene definita Jitting. Questo tipo di compilazione è ben
diverso da linguaggi come ad esempio Java, nei quali invece tutto il codice
gira su una vera e propria macchina virtuale, mentre in .NET al momento

18
dell'esecuzione il programma è effettivamente in linguaggio macchina come
tutti gli altri linguaggi.
Al pari di tutti gli altri linguaggi della suite .NET, anche ASP.NET utilizza il
meccanismo di disallocazione automatica della memoria denominato
garbage collector.
Contestualmente all’installazione di Visual Studio è stata installata la
versione 4.5.2 del .NET Framework e la versione relativa di ASP.NET.
3.1.6. C#
Il C# [5] [6] è un linguaggio di programmazione orientato agli oggetti
sviluppato da Microsoft all'interno dell'iniziativa .NET e successivamente
approvato come standard dalla ECMA e ISO.
La sintassi e la struttura del C# prendono spunto da vari linguaggi nati
precedentemente, in particolare Delphi, C++, Java e Visual Basic. Il risultato è
un linguaggio orientato agli oggetti in modo nativo e adatto allo sviluppo di
una vasta gamma di software.
La trasformazione in codice macchina (ovvero eseguito direttamente dalla
Central Processing Unit, CPU) viene compiuta solo all'atto di caricamento ed
esecuzione del programma. In prima istanza il codice sorgente viene
convertito dal framework in un codice intermedio detto CIL e solo
all'esecuzione del programma il CLR specifico per il sistema operativo
utilizzato converte il CIL in linguaggio macchina specifico per l'hardware
ospite, a mano a mano che viene eseguito. Ciò comporta che l'esecuzione del
codice può risultare più lenta alla prima esecuzione, diventando poi più
veloce. Vengono inoltre tipicamente svolte durante la compilazione stessa

19
delle ottimizzazioni progressive del codice macchina, producendo così un
codice eseguito più velocemente e teoricamente "ottimale" solo dopo alcune
esecuzioni complete dello stesso.
C# è utilizzabile posta l’installazione di Visual Studio. La macchina target
invece per eseguire il codice CIL, sviluppato per esempio con C#, necessiterà
di un CLR locale. Per i sistemi Windows il CLR è tipicamente .NET
Framework.
3.1.7. HTML
L'HyperText Markup Language (HTML) [6] è un linguaggio di markup. Nato
per la formattazione e impaginazione di documenti ipertestuali, oggi è
utilizzato principalmente per il disaccoppiamento della struttura logica di
una pagina web (definita appunto dal markup) e la sua rappresentazione,
gestita tramite gli stili Cascading Style Sheets (CSS) per adattarsi alle nuove
esigenze di comunicazione e pubblicazione all'interno di internet.
L'HTML è un linguaggio di formattazione che descrive le modalità di
impaginazione o visualizzazione grafica (layout) del contenuto, testuale e
non, di una pagina web attraverso tag di formattazione. Sebbene l'HTML
supporti l'inserimento di script e oggetti esterni quali immagini o filmati, non
è un linguaggio di programmazione: non prevedendo alcuna definizione di
variabili, strutture dati, funzioni o strutture di controllo che possano
realizzare programmi, il suo codice è infatti in grado soltanto di strutturare e
decorare dati testuali.

20
3.1.8. Web server
Quando si sviluppano progetti Web in Visual Studio, è necessario un server
Web per l'esecuzione dei progetti stessi e del relativo test.
Un server Web [10] è un'applicazione software che, in esecuzione su un server,
è in grado di gestire le richieste di trasferimento di pagine web di un client,
tipicamente un web browser. La comunicazione tra server e client avviene
tramite l’Hypertext Transfer Protocol (HTTP), che utilizza la porta TCP 80 (o
8080), o eventualmente la versione sicura Hypertext Transfer Protocol Secure
(HTTPS), che utilizza invece la 443. L'insieme di tutti i web server
interconnessi a livello mondiale dà vita al World Wide Web (WWW).
Il termine “web server” può indicare comunemente sia il software (es.
Apache, IIS, …) sia l’hardware che ospita il software. Si può installare un
server web su un PC allo scopo di testare in locale un insieme di pagine web
oppure per consentire l'accesso ai propri documenti da altri client host, sia in
rete local, sia via Internet.
Visual Studio consente di eseguire il test dei progetti con server Web diversi,
IIS Express [5] è il server Web predefinito per i progetti di applicazioni Web
in Visual Studio ed è consigliato sia per i progetti di applicazioni Web sia per
i progetti di siti Web.
3.2. Metodi
3.2.1. “BiosignalViewer”
Il progetto specifico creato prende il nome di BiosignalViewer (visualizzatore
di biosegnali).

21
Il nome è stato così ideato in quanto esplicita, nell’immediatezza della sua
lettura, la principale funzionalità della progettualità realizzata, ovvero la
visualizzazione di biosegnali.
Si tratta di una pagina web realizzata in ambiente Visual Studio nella
tecnologia ASP.NET, utilizzando i linguaggi C# ed HTML sviluppata per
soddisfare la funzionalità di caricamento dei dati da file di testo (.txt),
l’inserimento di un grafico nel programma, l’inserimento dei dati nel grafico
in modo da visualizzarne l’andamento, l’implementazione di caratteristiche
grafiche quali il cambio di colore della curva, il cambio di forma della curva
(spline, line) e la possibilità di mostrare nel dettaglio una porzione di curva a
fronte delle varie esigenze di visualizzazione, quindi con maggiore o minore
zoom.
Una pagina Web ASP.NET è costituita da due parti: [6]
• Elementi visivi, che comprendono markup, controlli server e testo
statico (controlli HTML).
• Logica di programmazione della pagina, che comprende gestori eventi
e altro codice (C# in questo progetto).
ASP.NET fornisce due modelli per la gestione degli elementi visivi e del
codice: uno di pagina a file singolo e l’altro code-behind. Il funzionamento
dei due modelli è analogo; per entrambi è possibile utilizzare gli stessi
controlli e lo stesso codice.
Nel modello di pagina a file singolo, l’interfaccia della pagina e il relativo
codice di programmazione si trovano nello stesso file fisico .aspx. Il codice di
programmazione si trova in un blocco script che contiene l'attributo

22
runat="server" per contrassegnarlo come codice eseguito da ASP.NET. Il
blocco script può contenere qualsiasi quantità di codice richiesta dalla pagina.
Esempi [11] di modello di pagina a file singolo:
<%@ Page Language="C%>
<script runat="server">
void Button1_Click(object sender, EventArgs e){ Label1.Text =
"Clicked at " + DateTime.Now.ToString();}
</script>
<html>
<head>
<title>Single-File Page Model</title>
</head>
<body>
<form runat="server">
<div>
<asp:Label id="Label1"
runat="server" Text="Label">
</asp:Label>
<br />
<asp:Button id="Button1"
runat="server"
Onclick="Button1_Click"
Text="Button">
</asp:Button>
</div>
</form>
</body>
</html>
In primo luogo nel modello code-behind consente di mantenere il markup in
un file, ovvero nel file .aspx, e il codice di programmazione in un altro file. Il
nome del file di codice varia in base al linguaggio di programmazione che si
sta utilizzando. Se, ad esempio, viene utilizzata una pagina denominata
SamplePage, il markup si troverà nel file SamplePage.aspx mentre il codice si
troverà in un file denominato SamplePage.aspx.vb (per Visual Basic),
SamplePage.aspx.cs (per C#) e così via.

23
Nella pagina .aspx si riscontrano due differenze tra i modelli a file singolo e
code-behind. Nel modello code-behind, non è presente alcun blocco script
con l'attributo runat="server". La pagina può contenere blocchi script senza
l'attributo runat="server" se si desidera scrivere script lato client nella pagina.
La seconda differenza è che la direttiva @ Page nel modello code-behind
contiene attributi che fanno riferimento a un file esterno (SamplePage.aspx.vb
o SamplePage.aspx.cs) e a una classe. Tali attributi collegano la pagina .apsx
al relativo codice.
Esempio [11] di modello di pagine code-behind, “SamplePage.aspx”:
<%@ Page Language="C#" CodeFile="SamplePage.aspx.cs"
Inherits="SamplePage" AutoEventWireup="true" %>
<html>
<head runat="server" >
<title>Code-Behind Page Model</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label id="Label1"
runat="server" Text="Label" >
</asp:Label>
<br />
<asp:Button id="Button1"
runat="server"
onclick="Button1_Click"
Text="Button" >
</asp:Button>
</div>
</form>
</body>
</html>
Il codice si trova in un file separato.
Esempio [11] di modello di pagina code-behind, “SamplePage.aspx.cs”:
using System;

24
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class SamplePage : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Clicked at " + DateTime.Now.ToString();
}
}
I modelli di pagina a file singolo e code-behind hanno funzionalità analoghe.
In fase di esecuzione, i modelli vengono eseguiti nello stesso modo e non si
riscontrano differenze sostanziali nelle prestazioni; anche le attività di
compilazione e distribuzione sono analoghe.
Pertanto, la scelta di un modello di pagina dipende da altri fattori: ad
esempio, dalle modalità di organizzazione del codice nell'applicazione, dalla
necessità di separare la progettazione della pagina dalla codifica e così via.
In linea generale i vantaggi offerti dalle pagine code-behind le rendono adatte
per le applicazioni Web caratterizzate da una quantità notevole di codice e in
cui più sviluppatori creano un sito Web.
I vantaggi offerti dal modello code-behind sono i seguenti [11]:
• le pagine code-behind offrono una netta separazione tra markup e
codice, di conseguenza il progettista potrebbe creare il markup
mentre, contemporaneamente, il programmatore scrive il codice;
• il codice non viene esposto ai progettisti della pagina o ad altri che
lavorano solo sul markup della pagina;
• lo stesso codice può essere utilizzato per più pagine.

25
Al fine di ottenere una migliore integrazione e coerenza con la piattaforma
web WebBioBank ed il modello organizzativo individuato per lo sviluppo
della stessa, il modello utilizzato per il progetto “BiosignalViewer” è quello
code-behind.
Figura 2: screenshot della parte di codice specificatamente prodotto all’interno del presente
progetto che definisce l’utilizzo del modello di pagina code-behind.
3.2.1.1. “BiosignalViewer.aspx.cs”
BiosignalViewer.aspx.cs è il nome del file contenente il codice, scritto in
linguaggio C#, del progetto BiosignalViewer.
All’inizio del file .aspx.cs si trovano gli spazi dei nomi che vengono utilizzati
dal programmatore per creare il codice.
Gli spazi dei nomi sono utilizzati nella programmazione C# per facilitare la
scrittura del codice.
Esempio (sezione del progetto):
invece di scrivere all’interno del codice:
System.Diagnostics.Debug.WriteLine();
si può usare la parola chiave using in modo tale che il nome completo non debba
essere scritto; in questo caso all’inizio del codice va inserito:
using System.Diagnostics
e all’interno del codice:

26
Debug.WriteLine();
Usando la parola chiave namespace si può inoltre dichiarare il proprio spazio
dei nomi.
Esempio:
namespace Namespace
{
class **
{
public void ***
{
}
}
}
Nel file si ritrovano entrambi gli utilizzi degli spazi dei nomi:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI.DataVisualization.Charting;
using System.IO;
using System.Globalization;
using System.Diagnostics;
using System.Drawing
e
namespace BiosignalViewer
{/* classe, metodi e operazioni che compongono la totalità del codice
*/
}

27
All'interno di uno spazio dei nomi, è possibile dichiarare uno o più dei
seguenti tipi: un altro spazio dei nomi, class, interface, struct, enum, delegate.
Nel file è dichiarata la classe Chart:
public partial class Chart : System.Web.UI.Page
{/* metodi e operazioni che compongono la totalità del codice
*/
}
dove:
public indica che qualsiasi utente può creare oggetti di questa classe;
partial indica che è possibile suddividere la definizione, in questo caso della
classe, tra più files di origine (è utile per programmi di grandi dimensioni);
: System.Web.UI.Page indica un’estensione delle proprietà della classe
Chart.
All’interno della classe sono presenti diversi metodi che gestiscono:
• la lettura del file (metodo ReadFile);
• la risposta ad un evento che può essere il “click” su uno dei bottoni
presenti nella pagina web;
• il caricamento della pagina (metodo, gestore di evento, Page_Load);
• il caricamento del grafico (metodo, gestore di evento, ChartLoad).
Le specifiche di tali metodi verranno definite e spiegate in seguito.
3.2.1.1.1. Spazi dei nomi utilizzati
Gli spazi dei nomi che sono stati utilizzati nel codice sono i seguenti:
using System;
using System.Collections.Generic;
using System.Linq;

28
using System.Web.UI.DataVisualization.Charting;
using System.IO;
using System.Globalization;
using System.Diagnostics;
using System.Drawing.
Definizioni [12]:
• System:
lo spazio dei nomi System contiene le classi fondamentali e di base che
definiscono i tipi di dati di riferimento e di valori utilizzati
comunemente, gli eventi e i gestori di eventi, le interfacce, gli attributi
e le eccezioni di elaborazione.
Nel codice sorgente la direttiva using System è inserita per gestire
alcuni elementi delle seguenti righe di codice:
1. String line = sR.ReadLine(); elemento String;
2. foreach (String number in line.Split('t')) elemento
String;
3. coupleValues.X = Int32.Parse(number); elemento Int32;
4. coupleValues.Y = Int32.Parse(number); elemento Int32;
5. protected void Page_Load(object sender, EventArgs e)
elemento EventArgs;
6. protected void ChartLoad(object sender, EventArgs e)
elemento EventArgs;
7. public void SplineClick(object sender, EventArgs e)
elemento EventArgs;
8. public void LineClick(object sender, EventArgs e)
elemento EventArgs;

29
9. public void ColorListClick (object sender, EventArgs e)
elemento EventArgs;
10. public void ZoomInClick(object sender, EventArgs e)
elemento EventArgs;
11. public void ZoomOutClick(object sender, EventArgs e)
elemento EventArgs;
12. public void UpMoveClick(object sender, EventArgs e)
elemento EventArgs;
13. public void DownMoveClick(object sender, EventArgs e)
elemento EventArgs;
14. public void RightMoveClick(object sender, EventArgs e)
elemento EventArgs;
15. public void LeftMoveCLick(object sender, EventArgs e)
elemento EventArgs;
16. public void ResetClick(object sender, EventArgs e)
elemento EventArgs.
• System.Collections.Generic:
gli spazi dei nomi System.Collections contengono i tipi che
definiscono diversi oggetti Collection standard, specializzati e
generici.
Nello spazio dei nomi System.Collections.Generic sono
contenute interfacce e classi che definiscono raccolte generiche che
consentono agli utenti di creare raccolte fortemente tipizzate che
forniscono indipendenza dai tipi e prestazioni migliori rispetto alle
raccolte fortemente tipizzate non generiche.

30
Nel codice sorgente la direttiva using
System.Collections.Generic è per gestire un elemento della
seguente riga di codice:
List<Point> valueList = new List<Point>(); elemento List<>.
• System.Linq:
gli spazi dei nomi System.Linq contengono tipi che supportano le
query che usano LINQ che è un componente del .NET Framework di
Microsoft che aggiunge ai linguaggi .NET la possibilità di effettuare
interrogazioni su oggetti utilizzando una sintassi simile a SQL.
Consente l'interrogazione di ogni sorgente di dati che rappresenti i
dati sotto forma di oggetti.
Nel codice sorgente la direttiva using System.Linq è inserita per
gestire un elemento della seguente riga di codice:
valueList = valueList.OrderBy(p => p.X).ToList();
elemento OrderBy.
• System.Web.UI.DataVisualization.Charting:
gli spazi dei nomi System.Web contengono i tipi che consentono la
comunicazione browser/server. Gli spazi dei nomi figlio includono i
tipi che supportano l'autenticazione basata su form di ASP.NET, i
servizi di applicazione, la memorizzazione nella cache dei dati sul
server, la configurazione delle applicazioni ASP.NET, i dati dinamici,
i gestori HTTP, la sicurezza ASP.NET e i servizi Web.

31
Lo spazio dei nomi System.Web.UI fornisce classi e interfacce che
consentono di creare controlli server ASP.NET e pagine Web ASP.NET
per l'interfaccia utente delle applicazioni Web ASP.NET.
Lo spazio dei nomi System.Web.UI.DataVisualization.Charting
contiene metodi e proprietà per il controllo server Web del grafico.
Nel codice sorgente la direttiva using
System.Web.UI.DataVisualization.Charting è inserita per
gestire alcuni elementi delle seguenti righe di codice:
Series newseries = new Series("newseries"); elemento Series;
1. newseries.ChartType = SeriesChartType.Spline; elemento
SeriesChartType;
2. newseries.ChartType = SeriesChartType.Spline; elemento
SeriesChartType;
3. newseries.ChartType = SeriesChartType.Line; elemento
SeriesChartType.
• System.Web.UI.WebControls:
lo spazio dei nomi System.Web.UI.WebControls contiene classi che
permettono di creare controlli del server Web all’interno della pagina
Web. I controlli del server Web vengono eseguiti dal server e
includono controlli form come bottoni e spazi di scrittura. I controlli
sono eseguiti dal server e si possono gestire direttamente a livello di
codice.

32
• System.IO:
gli spazi dei nomi System.IO contengono tipi che supportano le
operazioni di input e output, inclusa la capacità di leggere e scrivere
dati nei flussi in modo sincrono o asincrono, comprimere dati nei
flussi, creare e usare archivi isolati, eseguire il mapping di file allo
spazio degli indirizzi logici di un'applicazione, archiviare più oggetti
dati in un singolo contenitore, comunicare usando unnamed o named
pipe, implementare la registrazione personalizzata e gestire il flusso di
dati da e verso le porte seriali.
Nel codice sorgente la direttiva using System.IO è inserita per gestire
alcuni elementi delle seguenti righe di codice:
1. FileStream fs =
File.Open(@"C:UsersAnnaDesktopdati.txt",
FileMode.Open, FileAccess.Read); elementi FileStream,
File, FileMode, FileAccess;
2. StreamReader sR = new StreamReader(fs); elemento
StreamReader.
• System.Globalization:
lo spazio dei nomi System.Globalization contiene classi che
definiscono le informazioni correlate alle impostazioni cultura, tra cui
la lingua, il paese o la regione, i calendari usati, i formati delle date,
della valuta e dei numeri, nonché il criterio di ordinamento delle
stringhe. Si tratta di classi utili per la creazione di applicazioni
globalizzate (internazionali). Le classi come StringInfo e TextInfo

33
forniscono funzionalità di globalizzazione avanzate, tra cui il supporto
di surrogati e l'elaborazione di elementi di testo.
Nel codice sorgente la direttiva using System.Globalization è
inserita per gestire un elemento della seguente riga di codice:
Debug.WriteLine(float.Parse(number,
CultureInfo.InvariantCulture));
elemento CultureInfo.
• System.Diagnostics:
gli spazi dei nomi System.Diagnostics contengono i tipi che
consentono di interagire con i processi di sistema, i log eventi e i
contatori delle prestazioni. Gli spazi dei nomi figlio contengono i tipi
per interagire con gli strumenti di analisi del codice, supportare
contratti, estendere il supporto in fase di progettazione per il
monitoraggio e la strumentazione delle applicazioni, registrare i dati
degli eventi, leggere e scrivere da log eventi e raccogliere dati delle
prestazioni, nonché leggere e scrivere informazioni sui simboli di
debug.
Nel codice sorgente la direttiva using System.Diagnostics è inserita
per gestire alcuni elementi delle seguenti righe di codice:
Debug.WriteLine(float.Parse(number,
CultureInfo.InvariantCulture));
elemento Debug.
• System.Drawing:
gli spazi dei nomi System.Drawing padre contengono i tipi che
supportano la funzionalità grafica di base. Gli spazi dei nomi figlio

34
supportano la funzionalità grafica bidimensionale e vettoriale, la
funzionalità di imaging avanzato e i servizi tipografici e correlati alla
stampa. Uno spazio dei nomi figlio contiene anche i tipi che estendono
la logica e la realizzazione grafica dell'interfaccia utente in fase di
progettazione.
Nel codice sorgente la direttiva using System.Drawing è inserita per
gestire alcuni elementi delle seguenti righe di codice:
1. List<Point> valueList = new List<Point>(); elemento
Point;
2. Point coupleValues = new Point(valuex, valuey);
3.2.1.1.2. Lettura da file e caricamento dati
Elemento essenziale nell’implementazione è la lettura dei dati da file. I dati
di interesse per la piattaforma, che quindi sono quelli presi in considerazione
in questo progetto, sono i biosegnali di pazienti affetti da PD.
I dati in questione sono organizzati in files di un formato preciso: matrice 2 ∗
𝑁 di valori interi in un file .txt. La prima colonna indica i valori in ascissa del
grafico che si andrà a formare mentre la seconda colonna indica i
corrispondenti valori in ordinata; il primo valore della riga (appartenente alla
prima colonna) e il secondo valore della riga (appartenente alla seconda
colonna) sono separati da un carattere di tabulazione, ‘/t’.

35
Figura 3: file “dati.txt”, il file utilizzato nel progetto.
Il metodo per la lettura del file prende il nome di ReadFile.
I valori vengono letti da file tramite la funzione ReadLine() la quale legge una
riga del file alla volta. Il codice è stato creato in modo che quando la funzione
di lettura incontra, nella riga, il carattere ‘/t’, separa il valore intero alla
destra di ‘/t’ da quello alla sinistra e in questo modo si riesce a dividere il
valore in ordinata da quello in ascissa per ogni riga che compone il file.
Una volta letti tali valori vengono salvati in una struttura di tipo “Lista”
List<tipo_di_oggetto>: un elenco fortemente tipizzato di oggetti accessibili
tramite indice che fornisce metodi per la ricerca, l'ordinamento e la modifica
degli elenchi.
Si è scelto di salvare i dati in una struttura di questo tipo in quanto è
necessario conservare in memoria i singoli valori letti da file in modo da poter
realizzare al meglio il grafico; è necessaria infatti, ad esempio, la conoscenza
del valore massimo in ascissa e di quello massimo in ordinata per la
realizzazione delle funzionalità di zoom e di spostamento.

36
La lista utilizzata è una lista di oggetti di tipo Point dove Point è, per
definizione data da Visual Studio, una struct (un gruppo di variabili, anche
di tipo diverso, aggregate insieme con un unico nome) che consente di
rappresentare una coppia ordinata di coordinate di valori interi x e y per
definire un punto in un piano a due dimensioni: in particolare, nel progetto,
ogni oggetto di tipo Point è una coppia del valore ascissa e del valore
ordinata che nel file risiedono nella stessa riga.
La scelta di utilizzare una List tra le diverse strutture dati disponibili è stata
pensata in quanto i valori del file possono essere, per diversi motivi, salvati
(come nel caso del file utilizzato nel progetto) oppure letti in maniera non
ordinata e l’oggetto “lista” presenta la funzione apposita OrderBy che ordina
in modo crescente i valori scelti. La colonna da ordinare nel caso specifico è
quella delle ascisse.
Figura 4: grafico con funzione ordinamento relativa al file “dati.txt”.

37
Figura 5: grafico senza funzione ordinamento relativa al file “dati.txt”.
3.2.1.1.3. Metodi e gestori eventi
Per ogni funzionalità presente nella pagina web realizzata e per il
caricamento della stessa è stato elaborato un metodo scritto in modo da
soddisfare gli obiettivi posti.
Il metodo ReadFile sopra descritto ed i metodi che prendono il nome di Zoom
e Displacement sono gli unici del programma a non essere dei gestori di
eventi.
Il metodo ReadFile viene chiamato al momento del caricamento della pagina
dal metodo Page_Load.
I metodi Zoom e Displacement sono chiamati da alcuni metodi gestori di eventi
al momento della pressione di uno dei bottoni rispettivamente di zoom (2
bottoni) e di spostamento (4 bottoni) da parte dell’utente.

38
I gestori di eventi sono dei metodi che, come dice il nome, gestiscono
l’avvenimento di un evento. Gli eventi ASP.NET basati sul server seguono un
modello .NET Framework standard per i metodi dei gestori eventi: tutti gli
eventi passano due argomenti: un oggetto che rappresenta l'oggetto che ha
generato l'evento, di tipo object, e un oggetto evento contenente le eventuali
informazioni relative agli eventi, di tipo EventArgs.
Il metodo public void Zoom(int step) gestisce le funzionalità di zoom
interno o esterno del grafico a seconda del valore che prende la variabile di
tipo intero step:
if (step == (1 / stepZoom)) // ZoomIn
{/* operazioni svolte nel caso in cui la condizione sia verificata
*/
}
else if (step == stepZoom) // ZoomOut
{/* operazioni svolte nel caso in cui la condizione dell’“if” non
è verificata ma lo è quella di “else if”*/
}
Il passo dello zoom è definito nel codice sorgente (stepZoom) e ad esso viene
associato un valore che comunque può essere facilmente modificabile a
seconda delle esigenze di visualizzazione.
Nello specifico lo zoom è gestito in modo che l’utente non possa procedere
né troppo all’interno della figura andando a perdersi nel grafico senza
ritrovare riferimenti, né troppo all’esterno. Lo zoom esterno, se il grafico non
è ancora stato zoomato verso l’interno, non può essere effettuato mentre lo
zoom interno ha un limite numerico definito nel codice sorgente.

39
Il metodo public void Displacement(string direction) gestisce le
funzionalità di spostamento in alto, in basso, a destra o a sinistra all’interno
del grafico a seconda del valore che prende la variabile di tipo string
direction:
if (direction == "up")
{/* operazioni svolte nel caso in cui la condizione sopra riportata
sia verificata */
}
else if (direction == "down")
sia verificata */
}
else if (direction == "right")
sia verificata */
}
else if (direction == "left")
sia verificata */
}
In base alla posizione in cui il grafico si trova, subito prima di premere uno
dei bottoni di spostamento, ci si muove all’interno del grafico di un passo che
viene definito nel codice sorgente.
Il passo dello spostamento è definito nel codice sorgente (stepPosition) e ad
esso viene associato un valore che anche in questo caso può essere facilmente
modificabile a seconda delle esigenze di visualizzazione.

40
Per ogni bottone e per la DropDownList che l’utente visualizza nella pagina
web esiste un metodo legato a tale elemento grafico. Il legame tra elemento e
metodo risiede, nel codice, nel file .aspx che verrà descritto in seguito.
: alla pressione del bottone di zoom verso l’interno da parte
dell’utente, viene chiamato, in risposta all’evento di “Click”, il metodo
ZoomInClick:
public void ZoomInClick(object sender, EventArgs e)
{
Zoom((1 / stepZoom));
}
che chiama il metodo di zoom Zoom.
Il grafico viene zoomato della quantità stepZoom verso l’interno, quindi se
prima del click si vede 100 dopo si vedrà 100/stepZoom che nel caso
particolare del programma è pari a 2 (100/stepZoom = 100/2 = 50).
: alla pressione del bottone di zoom verso l’esterno da parte
ZoomOutClick:
public void ZoomOutClick(object sender, EventArgs e)
{
Zoom((stepZoom));
}
che chiama il metodo di zoom Zoom.

41
Il grafico viene zoomato della quantità stepZoom verso l’esterno, quindi se
prima del click si vede 50 dopo si vedrà 50*stepZoom che nel caso particolare
del programma è pari a 2 (50*stepZoom = 50*2 = 100).
: alla pressione del bottone di spostamento verso l’alto da parte
UpMoveClick:
// displacement up
public void UpMoveClick(object sender, EventArgs e)
{
Displacement("up");
}
che chiama il metodo di spostamento Displacement.
Ci si muove all’interno del grafico di una quantità stepPosition verso l’alto,
di conseguenza la visualizzazione si sposta verso l’alto.
: alla pressione del bottone di spostamento verso il basso da parte
DownMoveClick:
// displacement down
public void DownMoveClick(object sender, EventArgs e)
{
Displacement("down");
}

42
Ci si muove all’interno del grafico di una quantità stepPosition verso il
basso, di conseguenza la visualizzazione si sposta verso il basso.
: alla pressione del bottone di spostamento verso destra da parte
RightMoveClick:
// displacement right
public void RightMoveClick(object sender, EventArgs e)
{
Displacement("right");
}
Ci si muove all’interno del grafico di una quantità stepPosition verso destra,
di conseguenza la visualizzazione si sposta verso destra.
: alla pressione del bottone di spostamento verso sinistra da parte
LeftMoveClick:
// displacement left
public void LeftMoveClick(object sender, EventArgs e)
{
Displacement("left");
}
Ci si muove all’interno del grafico di una quantità stepPosition verso
sinistra, di conseguenza la visualizzazione si sposta verso sinistra.

43
In tutti i casi di spostamento la variabile stepPosition utilizzata nel caso
particolare del programma è pari a 5, valore che può essere facilmente
modificato in ragione delle esigenze di visualizzazione.
: alla pressione del bottone “Reset” da parte dell’utente, viene
chiamato, in risposta all’evento di “Click”, il metodo ResetClick:
// to visualize the entire curve
public void ResetClick(object sender, EventArgs e)
{
positionX = positionY = 0;
percentageZoom = 100;
chart1.ChartAreas[0].AxisX.ScaleView.Size = (percentageZoom *
maxValueX) / 100;
chart1.ChartAreas[0].AxisY.ScaleView.Size = (percentageZoom *
(maxValueY*borderY)) / 100;
chart1.ChartAreas[0].AxisX.ScaleView.Position = positionX;
chart1.ChartAreas[0].AxisY.ScaleView.Position = positionY;
typeLine = 0;
newseries.ChartType = SeriesChartType.Spline;
}
Nella finestra di grafico viene visualizzata la curva per intero.
: alla pressione del bottone “Line” da parte dell’utente, viene
chiamato, in risposta all’evento di “Click”, il metodo LineClick:
// it makes the curves "line"
public void LineClick(object sender, EventArgs e)
{
newseries.ChartType = SeriesChartType.Line;

44
typeLine = 1;
maxValueX) / 100;
}
La curva visualizzata cambia forma e diventa “Line”, rispetto alla forma di
default che è invece “Spline”.
: alla pressione del bottone “Spline” da parte dell’utente, viene
chiamato, in risposta all’evento di “Click”, il metodo SplineClick:
// it makes the curves "spline"
public void SplineClick(object sender, EventArgs e)
{
typeLine = 0;
maxValueX) / 100;
}
La curva visualizzata prende la forma di default, appunto “Spline”.

45
: alla pressione della freccetta della DropDownList si apre
una finestra contenente una lista di colori di possibile scelta per la curva.
Alla pressione di uno dei colori da parte dell’utente, viene
chiamato, in risposta all’evento di “Click”, il metodo
ColorListClick:
// to change the colours of the series
public void ColorListClick (object sender, EventArgs e)
{
if (ColorList.SelectedValue == "Default Color")
{
chart1.Series["newseries"].Color=
System.Drawing.Color.LimeGreen;
}
else if (ColorList.SelectedValue == "Red")
{
chart1.Series["newseries"].Color=System.Drawing.Color.Red;
}
else if (ColorList.SelectedValue == "Blue")
{
chart1.Series["newseries"].Color=System.Drawing.Color.Blue;
}
else if (ColorList.SelectedValue == "Green")
{
chart1.Series["newseries"].Color=System.Drawing.Color.Green;
}
else if (ColorList.SelectedValue == "Yellow")
{
chart1.Series["newseries"].Color=System.Drawing.Color.Yellow;

46
}
else if (ColorList.SelectedValue == "Violet")
{
chart1.Series["newseries"].Color=System.Drawing.Color.Violet;
}
else if (ColorList.SelectedValue == "Black")
{
chart1.Series["newseries"].Color=System.Drawing.Color.Black;
}
maxValueX) / 100;
if (typeLine == 0)
else
newseries.ChartType = SeriesChartType.Line;
}
A questo punto la curva prende il colore selezionato dall’utente.
All’interno del codice C# sono presenti altri due metodi gestori di eventi:
• Page_Load;
• ChartLoad.
Il metodo Page_Load è il metodo che permette il caricamento della pagina
web.

47
Le pagine ASP.NET supportano l'associazione automatica agli eventi:
ASP.NET ricerca metodi con determinati nomi e li esegue automaticamente
quando vengono generati determinati eventi.
Se l'attributo AutoEventWireup della direttiva @ Page, contenuto nel file
.aspx è impostato su true o non è definito (è true di default), gli eventi della
pagina vengono associati automaticamente ai metodi che utilizzano la
convenzione di denominazione Page_event, come Page_Load.
Nel file .aspx di questo progetto l’attributo AutoEventWireup è impostato su
true, ciò sta a significare che l’evento di caricamento della pagina web è
associato automaticamente al metodo:
protected void Page_Load (object sender, EventArgs e)
{
}
Figura 6: riga numero uno del file “BiosignalViewer.aspx” dove è indicato l’attributo
“AutoEventwireup” pari a “true”.
Il metodo ChartLoad è il metodo che permette il caricamento del grafico e che
contiene al suo interno le operazioni che devono essere eseguite a
caricamento del grafico avvenuto. Anch’esso è un metodo che viene chiamato
automaticamente; l’evento di caricamento del grafico è associato
automaticamente al metodo:

48
protected void ChartLoad(object sender, EventArgs e)
{
int k = 0;
ReadFile();
newseries.Color = Color.LimeGreen;
newseries.BorderWidth = 5;
newseries.ShadowOffset = 1;
// it populates the series
for (k = 0; k < counterLinesFile; k++)
{
newseries.Points.AddXY(valueList[k].X, valueList[k].Y);
Debug.WriteLine("x: " + valueList[k].X + "y: " +
valueList[k].Y);
}
maxValueX) / 100;
// it adds the series to the graph
chart1.Series.Add(newseries);
}
3.2.1.2. “BiosignalViewer.aspx”
BiosignalViewer.aspx è il nome del file contenente gli elementi visivi del
progetto BiosignalViewer.

49
Si tratta di un file scritto in linguaggio HTML ma contente degli “ingredienti
extra”: i controlli web di ASP.NET che permettono la creazione di oggetti con
cui si può interagire utilizzando il codice della pagina web (.aspx.cs) [5].
3.2.1.2.1. Formattazione pagina
Il file BiosignalViewer.aspx si compone inizialmente di una sezione, che si
riconosce facilmente perché è racchiusa tra <%@ e %>, contenente le direttive
della pagina:
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="BiosignalViewer.aspx.cs"
Inherits="BiosignalViewer.Chart" %>
• Language="C#": indica il linguaggio in cui viene scritto il codice, in
questo caso si tratta di C#;
• AutoEventWireup="true": indica che l’evento di caricamento della
pagina web è associato automaticamente al metodo Page_Load;
• CodeBehind="BiosignalViewer.aspx.cs": si sta utilizzando
l’approccio code-behind e BiosignalViewer.aspx.cs è il nome del file
in cui è contenuto il codice a cui si fa riferimento;
• Inherits="BiosignalViewer.Chart": specifica quale classe, del file
contenente il codice, ereditare.
Le direttive di pagina non devono essere né scritte né modificate dal
programmatore perché, in questo, provvede Visual Studio in automatico [5].
Un’altra sezione di direttive, sempre contenuta nei simboli <%@ e %>,
presente nel file BiosignalViewer.aspx è quella delle direttive di registro:

50
<%@ Register assembly="System.Web.DataVisualization,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
namespace="System.Web.UI.DataVisualization.Charting"
tagprefix="asp" %>
Le direttive di questo tipo vengono aggiunte all’inizio del codice, sotto la
sezione @Page, direttamente da Visual Studio nel momento in cui viene
aggiunto un controllo Chart (quando viene aggiunto un grafico alla pagina
web). Con queste direttive la Visual Studio è in grado di utilizzare il grafico
all’interno della pagina.
La seconda sezione del file è il DOCTYPE [5]: il DOCTYPE indica il tipo di markup
utilizzato per creare la pagina web. Tecnicamente il DOCTYPE è opzionale ma
Visual Studio lo inserisce automaticamente.
Il DOCTYPE più utilizzato che funziona su ogni browser ed è quello che è
inserito anche in questo progetto è l’HTML5 e appare in questo modo:
<!DOCTYPE html>
A questo punto inizia il vero e proprio codice relativo alla formattazione e
impaginazione degli elementi visivi che compongono la pagina web, scritto
in modo da integrare il linguaggio di markup ai controlli ASP.NET.
Ogni documento HTML ha la seguente struttura di base [5]:
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">

51
</form>
</body>
</html>
I tag <html> e </html> contengono il contenuto completo della pagina e al
loro interno il contenuto è diviso in due parti:
• la prima porzione è l’elemento <head> che contiene alcune
informazioni riguardo la pagina web. Visual Studio
automaticamente genera nell’elemento l’attributo runat="server";
• la seconda porzione è quella dell’elemento <body> la quale contiene
la parte di codice che appare nella finestra web del browser;
all’interno della porzione <body> c’è un altro elemento importante
del codice, l’elemento <form> che definisce una porzione di pagina
che può ritornare informazioni al web server.
Come tutti, anche il file BiosignalViewer.aspx è strutturato in questa
maniera e ogni sezione del programma è popolata di diversi elementi e
attributi che permettono di strutturare la pagina web nella maniera più
opportuna.
In particolare, l’elemento <html> è definito, con un attributo, come segue:
<html xmlns="http://www.w3.org/1999/xhtml"> dove l’attributo xmlns
specifica lo spazio dei nomi utilizzato nel documento, in questo caso lo spazio
dei nomi è indicato dal link http://www.w3.org/1999/xhtml.
All’interno della porzione <head> è presente:
• un tag, elemento, chiamato meta-tag:
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/> si tratta di un tag che è composto di una serie di
parole chiave e descrizioni, che aiutano i motori di ricerca a

52
classificare il sito. In questo caso ad esempio l’attributo content ne
definisce il tipo di contenuto: testo e linguaggio HTML;
• un elemento di stile nel quale viene definito il tipo di foglio di stile
utilizzato nel documento e poi viene definita la dimensione del
#form1 cioè della sezione grafica:
<style type="text/css">
#form1 {
width: 963px;
}
</style>
All’interno della porzione <body> la porzione <form> è caratterizzata da
diversi attributi:
<form id="form1" runat="server" aria-multiline="False" aria-
multiselectable="True" aria-orientation="horizontal" aria-
required="False" enableviewstate="False"
submitdisabledcontrols="True">
Tra questi id è l’attributo che richiede come valore l’id del form a cui
vogliamo che faccia riferimento che in questo caso è quello che è stato definito
nella sezione style della porzione <head>.
A sua volta, all’interno della porzione <form> sono contenuti diversi elementi,
divisi perlopiù in elementi paragrafo <p></p>.
Nel primo paragrafo, di cui gli attributi ne definiscono le dimensioni e la
posizione, sono presenti i bottoni ASP.NET relativi, in ordine, alle operazioni
di zoom interno, di zoom esterno e di reset:
<p style="width: 102px; float: right; height: 66px;" >
<asp:Button ID="ZoomIn" runat="server" Text="+"
OnClick="ZoomInClick" BackColor="#FF5050"

53
BorderColor="#FFFFCC"
BorderStyle="Groove" Width="30px"/>
<asp:Button ID="ZoomOut" runat="server" Text="–"
OnClick="ZoomOutClick" BackColor="#FF5050"
<asp:Button ID="Reset" runat="server" Text="Reset"
OnClick="ResetClick" BackColor="#FF5050"
</p>
Utilizzando il tag <asp:Button /> si lavora con un codice lato server: facendo
click sul bottone relativo al tag automaticamente ASP.NET invierà una
richiesta alla pagina web, precisamente al file .aspx.cs, in modo da processare
l’evento legato al bottone. Il legame tra bottone ed evento è definito da uno
degli attributi di <asp:Button />, più precisamente l’attributo OnClick.
Per ogni bottone utilizzato sono definiti anche diversi attributi che ne
descrivono il nome, la forma, lo stile, il colore del bottone, il colore del suo
contorno e la grandezza.
Nel secondo paragrafo, di cui gli attributi ne definiscono le dimensioni e la
posizione, sono presenti i bottoni ASP.NET relativi, in ordine, alle operazioni
di spostamento a sinistra, spostamento in alto, spostamento a destra e
spostamento in basso:
<p style="width: 64px; float: right; height: 64px;" >
<asp:Button ID="LeftMove" runat="server" Text="<"
OnClick="LeftMoveCLick" BackColor="#FFFFCC"
BorderColor="#FF5050" BorderStyle="Groove"

54
Width="30px"/>
<asp:Button ID="UpMove" runat="server" Text="˄"
OnClick="UpMoveClick" BackColor="#FFFFCC"
Width="30px"/>
<asp:Button ID="RightMove" runat="server" Text=">"
OnClick="RightMoveClick" BackColor="#FFFFCC"
Width="30px"/>
<asp:Button ID="DownMove" runat="server" Text="˅"
OnClick="DownMoveClick" BackColor="#FFFFCC"
Width="30px"/>
</p>
Dopo il secondo paragrafo, c’è una porzione di codice, non contenuta in alcun
paragrafo ma facente sempre parte di body: è la sezione che riguarda il
controllo Chart, quindi il controllo dell’elemento grafico.
Il markup utilizzato per gestire il grafico nel progetto è il seguente:
<asp:Chart ID="chart1" runat="server" Palette="Pastel"
OnLoad="ChartLoad" Width="749px" style="margin-bottom:
1px" Height="442px">
<series>
<asp:Series Name="Newseries" ChartType="Spline">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="chartArea1">
</asp:ChartArea>
</chartareas>
</asp:Chart>

55
L’elemento <asp:Chart> è quello che contiene tutti gli elementi relativi al
controllo del grafico ed è caratterizzato da diversi attributi che ne
definiscono:
• il nome, l’attributo ID="chart1";
• la palette di colori scelta Palette="Pastel” ;
• il nome del metodo che viene richiamato al momento del caricamento
del grafico OnLoad="ChartLoad";
• l’altezza e la larghezza, rispettivamente Height="442px" e
Width="749px";
• lo stile della curva style="margin-bottom: 1px".
Anche in questo caso è definito l’attributo runat="server" che è necessario
per poter fare interazioni lato server.
Nel terzo paragrafo, di cui gli attributi ne definiscono le dimensioni e la
posizione, è presente la DropDownList per la gestione del colore della curva:
<p>
<asp:DropDownList ID="ColorList" runat="server"
OnSelectedIndexChanged="ColorListClick"
AutoPostBack="true" BackColor="#CCCCCC"
ForeColor="Black">
<asp:ListItem Text="colorList"
Enabled="false">ColorList</asp:ListItem>
<asp:ListItem Text="default">Default Color</asp:ListItem>
<asp:ListItem Text="red">Red</asp:ListItem>
<asp:ListItem Text="blue">Blue</asp:ListItem>
<asp:ListItem Text="green">Green</asp:ListItem>
<asp:ListItem Text="yellow">Yellow</asp:ListItem>
<asp:ListItem Text="violet">Violet</asp:ListItem>

56
<asp:ListItem Text="black">Black</asp:ListItem>
</asp:DropDownList>
</p>
Una DropDownList è un elemento di ASP.NET che si può tradurre con:
“menu a tendina”. Gli attributi di <asp:DropDownList> sono:
• ID="ColorList" che ne definisce il nome;
• BackColor="#CCCCCC" e ForeColor="Black" che ne definiscono i
colori;
• AutoPostBack="true" che se è impostato a true come in questo caso,
invierà una richiesta al server, in modo automatico, ogni volta che
avviene un evento che interessa l’elemento;
• OnSelectedIndexChanged="ColorListClick" è il metodo che viene
chiamato nel momento in cui si fa click su uno degli elementi della lista
della DropDownList.
Gli elementi <asp:ListItem> descrivono le possibili scelte di colore presenti
nella lista e quindi le possibili scelte di colore della curva contenuta nel
grafico.
Nel quarto paragrafo, di cui gli attributi ne definiscono le dimensioni e la
posizione, sono presenti i bottoni ASP.NET relativi alle operazioni di
modifica della forma della curva, in ordine, spline e line:
<p>
<asp:Button ID="Spline" runat="server" Text="Spline"
OnClick="SplineClick" BackColor="#CCCCCC"
ForeColor="#FF5050"/>
<asp:Button ID="Line" runat="server" Text="Line"
OnClick="LineClick" BackColor="#CCCCCC"
ForeColor="#FF5050" />
</p>

57
4. RISULTATI
In questo capitolo si intendono esporre ed illustrare le caratteristiche e le
funzionalità dello specifico progetto elaborato per raggiungere l’obiettivo di
migliorare gli elementi, all’interno del modulo SignalProcessing contenuto
nella piattaforma WebBioBank, del caricamento di dati da file .txt e della
visualizzazione degli stessi in un grafico che soddisfi diverse caratteristiche
tra cui la possibilità di cambiare colore alla curva, di cambiarne la forma, di
zoomarne la visione e di potersi spostare all’interno del grafico.
Il progetto è stato sviluppato con il dichiarato scopo di rendere il modulo
SignalProcessing del sistema WebBioBank un sistema cross-browser.
Prima del presente lavoro di tesi, SignalProcessing risultava eseguibile
esclusivamente in Internet Explorer. Questa è ovviamente una limitazione
che deve essere superata per rendere WebBioBank più accessibile, in
particolare agli operatori che utilizzano altri browser.
In primo luogo verrà esposta la versione, ancora in uso nella piattaforma, in
cui gli elementi considerati sono stati creati in ambiente Silverlight, poi verrà
esposta ed illustrata la versione creata nell’esecuzione del presente progetto.
4.1. Scenario precedente al lavoro di tesi
La pagina web che appare quando si esegue il progetto denominato
wH_WB_SignalProcessing è la pagina di login alla piattaforma WebBioBank.
L’esecuzione avviene utilizzando anche in questo caso l’IDE Visual Studio e
può essere realizzata esclusivamente definendo che la stessa venga eseguita
con il browser Internet Explorer, poiché attualmente nessun altro browser
supporta l’ambiente Silverlight.

58
Accedendo alla pagina di login gli utenti autorizzati si trovano nella home
page della piattaforma. La home page permette di selezionare, tra i tre moduli
disponibili, quello denominato “SignalProcessing” che contiene le sezioni di
interesse di questo documento (quelle del caricamento file e della
visualizzazione dei dati in forma di grafico) ma non solo. Ci sono altre sezioni
che definiscono proprietà della piattaforma come, ad esempio,
l’organizzazione di funzioni matematiche in catene le quali permettono di
analizzare al meglio i biosegnali.
La finestra di caricamento file, realizzata in ambiente Silverlight, appare,
facendo click su “File import”, in questa maniera:
Figura 7: finestra di caricamento file nella versione di Silverlight.
Facendo click sul pulsante “Browse” si sceglie il file da importare nel sistema.

59
Il file, anche in questo caso, è riconosciuto valido solamente se è composto da
due colonne e N righe di numeri interi e se è un file di estensione .txt.
La finestra di visualizzazione della curva relativa allo stesso file “dati.txt”
utilizzato nel presente progetto, realizzata in ambiente Silverlight, appare,
facendo click su “Signal viewer”, in questa maniera:
Figura 8: visualizzatore di segnali.
Spostando le barre di colore giallo (verticale-laterale e orizzontale) si
effettuano le operazioni di zoom e, utilizzando i tasti presenti al di sotto del
grafico, si possono anche modificare lo spessore ed il colore della curva; sulla
destra è presente la legenda che riporta il nome del file di riferimento della
curva ed il colore della stessa.

60
4.2. Scenario al termine del lavoro di tesi
Il progetto creato a seguito dello studio condotto per la realizzazione del
presente progetto ha prodotto come risultato la seguente pagina web:
Questa pagina web offre la possibilità di visualizzare un biosegnale
chiamando, direttamente nel codice all’interno del file
“BiosignalViewer.aspx.cs”, il nome del file contente i dati di tale biosegnale:
il nome del file utilizzato, che è “dati.txt”, è chiamato, nel file .aspx.cs , nella
sezione che gestisce la lettura dei dati.
L’integrazione di BiosignalViewer nel sistema WebBioBank non è stata
affrontata nello specifico progetto in quanto esula dalla presente ricerca e
verrà sviluppata in futuro.

61
4.2.1. Funzionamento
Il risultato ottenuto consiste in una pagina che propone diverse funzionalità
ai potenziali utilizzatori:
• visualizzare la curva che rappresenta il biosegnale scelto;
• zoomare verso l’interno la visualizzazione del grafico, bottone “+”;
• zoomare verso l’esterno la visualizzazione del grafico, bottone “-“;
• ritornare alla visualizzazione dell’intera curva, bottone “Reset”;
• spostare la visualizzazione del grafico verso l’alto, bottone “˄”;
• spostare la visualizzazione del grafico verso il basso, bottone “˅”;
• spostare la visualizzazione del grafico verso sinistra, bottone “<”;
• spostare la visualizzazione del grafico verso destra, bottone “>”;
• modificare la forma della curva, bottone “Line”;
• ritornare alla forma di default della curva, bottone “Spline”;
• modificare il colore della curva, menu a tendina “Default Color”.
Nei prossimi paragrafi verrà illustrato nel dettaglio il funzionamento di
ogni caratteristica del progetto.
Si consideri che le diverse funzionalità possono essere fruite utilizzando i
relativi comandi uno di seguito all’altro in base alle necessità dell’utente.
La sequenza utilizzata nelle raffigurazioni che seguono è stata scelta come
esempio semplificato.

62
4.2.1.1. Visualizzazione
La pagina visualizzata all’esecuzione del progetto è quella sopra riportata.
Si tratta di una pagina web contente:
• una sezione grafica, la cui dimensione definita in modo tale che sia
facilmente riconoscibile e analizzabile;
• tre bottoni di colore di fondo rosso, colore dei bordi giallo e testo nero,
raggruppati nella sezione più a destra della pagina, che gestiscono lo
zoom ed il reset;
• quattro bottoni di colore di fondo giallo, colore dei bordi rosso e testo
nero, posizione tra la sezione grafica e la sezione dei tre bottoni
precedentemente descritti, che gestiscono lo spostamento;
• la DropDownList di colore di fondo grigio e testo nero, posizionata
subito sotto la sezione grafica, che gestisce il colore della curva;
• due bottoni di colore di fondo grigio e scritta rossa, posizionati subito
sotto la DropDownList, che gestiscono la forma della curva.

63
4.2.1.2. Zoom e Reset
Si consideri che il passo utilizzato per definire di quanto debba essere
zoomata la visualizzazione è stato impostato nel codice sorgente al valore 2:
int stepZoom = 2 .
Zoom interno:
Supponendo di premere questo pulsante a pagina appena caricata,
quindi con visualizzazione della curva completa sullo schermo, la
visualizzazione diventa:
Premendo nuovamente il tasto di zoom interno la visualizzazione sullo
schermo diventa la seguente:

64
Zoom esterno:
Se si premesse questo pulsante a pagina appena caricata, quindi
con la visualizzazione della curva completa, non succederebbe
nulla in quanto c’è un limite per il quale si può eseguire uno zoom all’esterno
solo se prima si è effettuato uno zoom interno.
Si suppone quindi di premere questo pulsante trovandosi nella situazione
precedente (doppio zoom interno), per cui la visualizzazione diventa:
Reset:
Premendo questo tasto è possibile, trovandosi in una
visualizzazione zoomata o spostata rispetto a quella di default, ritornare alla
visualizzazione della curva completa; se ci si trova già nella visualizzazione
di default allora questa non cambia.
4.2.1.3. Spostamento
Si consideri che il passo utilizzato per definire di quanto debba essere
spostata la visualizzazione è stato impostato nel codice sorgente al valore 5:
int stepPosition = 5 .

65
Spostamento in alto:
Supponendo che la visualizzazione sia zoomata verso l’interno di
un passo, premendo questo pulsante, la visualizzazione diventa:
Sull’asse delle ordinate, si è passati dalla visualizzazione dei dati con valore
y appartenente alla fascia da 0 a 15 alla visualizzazione dei dati con valore y
appartenente alla fascia da 5 a 20. L’asse delle ascisse è rimasto tale.
Spostamento in basso:

66
Sull’asse delle ordinate, si è passati dalla visualizzazione dei dati con valore
y appartenente alla fascia da 0 a 15 alla visualizzazione dei dati con valore y
appartenente alla fascia da -5 a 10. L’asse delle ascisse è rimasto tale.
Spostamento a destra:
Sull’asse delle ascisse, si è passati dalla visualizzazione dei dati con valore x
appartenente alla fascia da 0 a 5 alla visualizzazione dei dati con valore x
appartenente alla fascia da 4 a 10. L’asse delle ordinate è rimasto tale.
Spostamento a sinistra:
un passo e spostata a destra di un passo, premendo questo
pulsante, la visualizzazione diventa:

67
Sull’asse delle ascisse, si è passati dalla visualizzazione dei dati con valore x
appartenente alla fascia da 4 a 10 alla visualizzazione dei dati con valore x
appartenente alla fascia da 0 a 5. L’asse delle ordinate è rimasto tale.
4.2.1.4. Line-Spline
Line:
Supponendo di premere questo pulsante a pagina appena caricata,
quindi con visualizzazione della curva di default, la visualizzazione diventa:

68
Spline:
Se si premesse questo pulsante nella pagina con visualizzazione di
default la forma della curva non cambierebbe in quanto è proprio “spline” la
forma di default; premendo questo pulsante nella pagina con curva di forma
“line”, la visualizzazione diventa:
4.2.1.5. Cambio colore
Il colore di default che viene dato alla curva, avendo scelto come palette di
colori la “Pastel” che offre Visual Studio, è il verde.
Supponendo, trovandosi nella visualizzazione di pagina di
default, di premere il menu a tendina e di scegliere all’interno
della lista di colori definita nel codice sorgente, il colore
“Yellow”, la visualizzazione diventa:

69
Supponendo poi di scegliere il colore “Black”, la visualizzazione diventa:
E così via per ogni colore presente nella lista dei colori.
È possibile usufruire delle funzionalità sopra descritte eseguendo il
programma su di un qualsiasi browser.
Il modulo BiosignalViewer è ora cross-browser.
Con lo sviluppo e la realizzazione della presente progettualità si è pertanto
raggiunto l’obiettivo prefissato di ampliare l’accesso alla piattaforma

70
WebBioBank tramite i vari browser, intervenendo su alcune funzionalità del
sistema.
4.2.2. Sviluppo ulteriore, grafico multiserie
Il progetto è stato creato per gestire le funzionalità esclusivamente di una
serie di valori e quindi di una curva sola.
A livello sperimentale si è provveduto ad implementare ulteriormente il
codice sorgente contenuto nel file .aspx.cs in modo da rendere possibile la
visualizzazione di più curve all’interno del medesimo grafico.
Il codice aggiunto permette di visualizzare una seconda serie per la quale
sono mantenute le funzionalità di zoom interno e esterno, di spostamento in
alto, in basso, a destra e a sinistra e di reset.
Eventuali ulteriori implementazioni potrebbero, nel caso, essere sviluppate
in futuro.
Codice:
protected void ChartLoad(object sender, EventArgs e)
{
int k = 0;
ReadFile();
newseries.Color = Color.LimeGreen;
newseries.BorderWidth = 5;
newseries.ShadowOffset = 1;
// it populates the series
for (k = 0; k < counterLinesFile; k++)
{

71
newseries.Points.AddXY(valueList[k].X, valueList[k].Y);
Debug.WriteLine("x: " + valueList[k].X + "y: " +
valueList[k].Y);
}
maxValueX) / 100;
chart1.Series.Add(newseries); // it adds the series to the
graph
// multiseries graph
Series series2 = new Series("Second series to test");
foreach (DataPoint point in newseries.Points)
series2.Points.AddXY(point.XValue, point.YValues[0]* 0.5);
series2.ChartType = SeriesChartType.Line;
series2.Color = Color.Violet;
series2.BorderWidth = 5;
series2.ShadowOffset = 1;
chart1.Series.Add(series2);
}
Nel metodo ChartLoad sono state inserite altre righe di codice a definire una
serie, series2, che per l’asse delle ordinate prenda i valori dal file “dati.txt”
mentre per quello delle ascisse prenda i valori del file “dati.txt” ma divisi per
2.

Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali all'interno della piattaforma WebBioBank

Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali all'interno della piattaforma WebBioBank

Recommended

Recommended

More Related Content

Similar to Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali all'interno della piattaforma WebBioBank

Similar to Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali all'interno della piattaforma WebBioBank (20)

Progettazione e sviluppo del modulo di gestione e analisi dei biosegnali all'interno della piattaforma WebBioBank