Questo progetto l’ho sviluppato per una azienda che mi ha chiesto di fare un interfaccia per visualizzare i parametri ed essere allertati in caso uno di questi raggiunga e superi il limite. Tutto questo e’ possibile mettendo dei bottoni sopra ad un’immagine in 2d rappresentativa della linea. I bottoni sono posizionati circa sopra al componente di cui sta facendo riferimento nell’immagine.
Per prima cosa mi sono preoccupato di come potere “ancorare” dei tasti sopra l’immagine, in modo tale da fare capire a tutti in pochi secondi a quale componente della linea si sta facendo riferimento.
Poi ho programmato le cose essenziali:
- Quando si sposta il puntatore sopra a questi tasti compare una picola finestrella con le informazioni piu’ importanti.
- Se si clicca su uno di questi tasti si aprira’ una finestra con le informazioni riguardante al componente e tutti i suoi relativi parametri
- Ho aggiunto anche il form per mettere tasti nell’immagine specificando le due cordinate “X” e “Y”.
- Inoltre quando si inserisce dei parametri validi sulla posizione automaticamente il sito fara’ visualizzare un’anteprima all’utente
Come ultimo particolare, ho voluto mettere l’icona della tab del browser dinamica: in base alla situazione l’icona puo’ essere un cerco di tre colori, cioe’ blu, giallo o rosso. Se uno dei parametri raggiunge il valore limite, e in base a quanto lo supera, il colore dell’icona cambia. Questo l’ho voluto fare cosi’ se un operatore sta navigando in giro per il browser, potra’ sempre vedere sulla tab in cima se c’e’ qualche problema.
Sono stato contento di fare parte di questo progetto, poiche’ l’ho ritenuto ambizioso. Prima di cominciarlo ho passato del tempo su come affrontarlo, per poi trovare una soluzione. E’ stato anche ottimo per rinforzare le mie conoscenze di Angular.
Ringrazio l’azienda che mi ha incaricato di questa sfida facendomi affrontare un problema che loro avevano bisogno di risolvere.
E ringrazio anche Pablososs per avere contribuito sviluppando la parte backend per realizzare questo bellissimo progetto
Link alla sua rep:
https://github.com/Pablososs/api-for-components-management
Questo lavoro e’ stato fatto insieme ad un altro sito caricato sull’altra mia repository. L’altro progetto serve ad aggiungere tutti i componenti presenti sulla macchina e i relativi parametri.
Per maggiori informazioni ecco il link alla repo:
https://github.com/LucaGiovannini02/components-details
