vuoi
o PayPal
tutte le volte che vuoi
Introduzione Internet of things, tesina
Lo scopo della presente tesina di maturità è quello di raccontare i tratti più importanti del mio percorso scolastico del quinto anno, iniziando dal raccontare l’esperienza effettuata grazie allo stage estivo in Danieli Automation, per poi passare al lavoro svolto nel progetto scolastico in collaborazione con Danieli, reso possibile grazie agli argomenti affrontati nelle materie quali Sistemi e Reti, TPSIT e Telecomunicazioni.
Nella seconda parte di questa tesina, ho voluto approfondire un argomento non svolto durante l’anno scolastico: Internet Of Things. L’IoT è l’estensione di Internet agli oggetti tecnologici e non, ed è per questo motivo che ho voluto pensare a come essa possa venire applicata concretamente all’interno della Danieli, per dimostrare la sua importanza ai fini di migliorare i processi produttivi aziendali.
Collegamenti
Internet of things, tesina
Sistemi e reti - Javascript e HTML.
TPSIT - CSS.
Approfondimenti personali.
HMI.
Per la configurazione dei PLC mi sono munito di
documenti di proprietà della Danieli che
raffigurava questi PLC, e ad ogni uscita
elettrica bisognava assegnare delle stringhe di
testo chiamate simbolici, che sono dei codici a
cui corrispondono specifiche azioni.
I simbolici erano contenuti all’interno di
documenti della Danieli. 1
Questi simbolici andavano configurati all’interno di
un software di proprietà di ABB.
La motivazione di questo lavoro è stata la decisione
di Danieli di migrare da un sistema interamente Siemens a quello ABB, ritenuto
migliore e più performante.
Fra le diverse configurazioni effettuate, viene riportato di seguito lo schema di una
fonderia.
Quelli raffigurati sono dei PLC, collegati tra di loro tramite cavi Ethernet.
Ogni PLC può essere collegato ad altri dispositivi di input/output tramite Profibus,
che altro non è che una rete di comunicazione. 2
Viene posta l’attenzione sul seguente macchinario: un dispositivo connesso in
remoto al PLC tramite Profibus che si occupa del raffreddamento dell’acqua.
CI541-DP (Decentralized Peripherals) rappresenta la periferica connessa in remoto,
mentre BK-3110 rappresenta la tastiera di input per impartire i comandi.
A questo punto, il mio compito è stato quello di spostarmi su un’altra pagina del
documento, a cui corrisponde l’interfaccia del dispositivo remoto.
Nella prima colonna a sinistra, vengono mostrati i pin di ciascuna entrata e uscita
(in questo caso entrambe analogiche); nella seconda colonna gli indirizzi; e nella
terza i riferimenti alle pagine del documento Excel contenente i simbolici. 3
La stessa cosa vale per gli ingressi e le uscite digitali.
Una volta prelevati tutti i simbolici, è il momento di inserirli nel software adibito alla
progettazione dell’impianto.
A questo punto la progettazione dell’impianto è terminato e pronto per essere
utilizzato.
3.0) Progetto scolastico:
Il progetto in questione è un progetto in collaborazione con la Danieli, iniziato
l’anno scorso dalle classi quinte del Malignani di Cervignano e riguarda lo sviluppo
di un sistema automatizzato di collaudo di schede elettroniche che, grazie ad una
fotocellula integrata, misurano la temperatura delle varie lastre d’acciaio in
transito.
Questo per controllare che le lastre d’acciaio siano effettivamente presenti e che la
loro temperatura rientri all’interno di un range prefissato, al fine di verificare che le
lastre siano idonee per avanzare verso la prossima lavorazione.
Quest’anno il progetto è stato portato avanti dalle attuali quinte ed il compito della
mia classe è stato quello di realizzare un software che aiutasse, tramite interfaccia
grafica, l’operatore nel collaudo di queste schede.
Questo software invia tutti i dati ad un database centrale, accessibile tramite un
sito web ai soli operatori dell’intranet della Danieli. 4
3.1) Il web design del sito per la Danieli:
Il mio compito in questo progetto è stato quello di curare il design di questo sito.
Per il design ho utilizzato il linguaggio HTML ed il linguaggio CSS.
Il sito web è stato interamente scritto da zero con l’utilizzo di un software
chiamato PHPStorm, ma scrivere manualmente il codice delle varie pagine che
compongono il sito web non è sempre il modo più efficace per la sua creazione:
esistono altri metodi.
Un’alternativa più semplice è quella di utilizzare i CMS (Content Management
System) che sono dei software ad interfaccia grafica che ci aiutano a costruire
molto più semplicemente il nostro sito web.
Ne esistono molti, ma quello più diffuso è Wordpress.
Di seguito vengono mostrati degli screenshot del sito web.
Nella prima pagina del sito web, l’utente inserisce le sue credenziali per entrare
all’interno del servizio; questi dati sono situati all’interno di un database MySQL. 5
Di seguito viene mostrato il codice HTML relativo alla prima pagina del sito web:
<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript">
if(history.length>0)history.forward()
</script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="loginprova.css">
<title>Danieli Beta</title>
</head>
<body>
<div>
<br>
<div align="center"><img src="LOGO_DANIELI_AUTOMATION.png"></div>
<div class="container">
<div class="login">
<h1>Login</h1>
<form action="loginprovabeta.php" method="get">
<p><input type="text" name="userdi" value="" placeholder="ID ACCESS"></p>
<p><input type="password" name="passwd" value=""
placeholder="PASSWORD"></p>
<p class="submit"><input type="submit" name="commit" value="LOGIN"></p>
</form>
</div>
</div>
</div>
</body>
</html>
Segue il codice CSS:
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background: #005f99;
}
input[type=checkbox],
input[type=radio] {
border: 1px solid #c0c0c0;
margin: 0 0.1em 0 0;
padding: 0;
font-size: 16px;
line-height: 1em;
width: 1.25em;
height: 1.25em;
background: #005f99;
-webkit-appearance: none;
-webkit-box-shadow: 1px 1px 1px #fff;
-webkit-border-radius: 0.25em; 6
vertical-align: text-top;
display: inline-block;
}
input[type=radio] {
-webkit-border-radius: 2em;
}
input[type=checkbox]:checked::after {
content:"✔";
display:block;
text-align: center;
font-size: 16px;
height: 16px;
line-height: 18px;
color:white;
}
input[type=radio]:checked::after {
content:"●";
display:block;
height: 16px;
line-height: 15px;
font-size: 20px;
text-align: center;
}
select {
border: 1px solid #D0D0D0;
background: -moz-linear-gradient(19% 75% 90deg,#ededed, #fbfbfb);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
color: #444;
}
.container {
margin: 50px auto;
width: 640px;
}
.login {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 310px;
background: white;
border-radius: 3px;
-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
z-index: -1;
background: #005f99
border-radius: 4px;
} 7
.login h1 {
margin: -20px -20px 21px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 1px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;
border-radius: 3px 3px 0 0;
background-image: -webkit-linear-gradient(top, whiteffd, #eef2f5);
background-image: -moz-linear-gradient(top, whiteffd, #eef2f5);
background-image: -o-linear-gradient(top, whiteffd, #eef2f5);
background-image: linear-gradient(to bottom, whiteffd, #eef2f5);
-webkit-box-shadow: 0 1px whitesmoke;
box-shadow: 0 1px whitesmoke;
}
.login p {
margin: 20px 0 0;
}
.login p:first-child {
margin-top: 0;
}
.login input[type=text], .login input[type=password] {
width: 278px;
}
.login p.submit {
text-align: center;
}
:-moz-placeholder {
color: #c9c9c9 !important;
font-size: 13px;
}
::-webkit-input-placeholder {
color: #ccc;
font-size: 13px;
}
input {
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 14px;
} 8
input[type=text], input[type=password] {
margin: 5px;
padding: 0 10px;
width: 200px;
height: 34px;
color: #404040;
background: white;
border: 1px solid;
border-color: #c4c4c4 #d1d1d1 #d4d4d4;
border-radius: 2px;
outline: 5px solid #eff4f7;
-moz-outline-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
input[type=text]:focus, input[type=password]:focus {
border-color: #7dc9e2;
outline-color: #dceefc;
outline-offset: 0;
}
input[type=submit] {
padding: 0 18px;
height: 29px;
font-size: 12px;
font-weight: bold;
color: white;
border: 1px solid;
border-radius: 16px;
outline: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #005f99;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
input[type=submit]:active {
background: #005f99;
border-color: #9eb9c2 #b3c0c8 #b4ccce;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
Il codice HTML assegna il contenuto da mostrare nella pagina web, mentre il
codice CSS ha il compito di descrivere tutte le proprietà grafiche della pagina
web.
In questa pagina web il codice CSS risulta essere più complesso rispetto a quello
HTML.
Queste proprietà grafiche (colore, dimensione, font del testo, altezza, larghezza,
ecc.) sono dinamiche.
Esse reagiscono quindi agli eventi a cui è sottoposta la pagina web in relazione ad
un’azione effettuata dall’utente, come il click di un pulsante piuttosto che
l’inserimento di testo. 9
Nelle successive pagine, si è mantenuto il precedente codice CSS come codice
principale, modificandolo a seconda degli elementi che comparivano nel codice
HTML.
Una volta effettuato il login, l’utente accede all’interno del sito e può decidere se
effettuare una ricerca delle varie schede da collaudare (o collaudate) in base al
codice cliccando su “ricerca”, oppure effettuare in base ad un range di codici.
Il codice delle schede di collaudo è formato dal nome, dall’ID (codice univoco) e
dalla data di collaudo.
Dopo aver cliccato su “conferma”, si possono inserire le stringhe di testo della
scheda, e quindi si può premere “invia” per inviare la query di ricerca al database.
A
questo
punto,
si
potrà
visualizzare il codice della scheda 10
elettronica cercata, quindi è possibile anche stampare un documento i