Categorie
Senza categoria

Microbit Volante

La Micro:bit è un piccolo micro controllore progettato per imparare a programmare e possiede molte funzionalità.

Componenti della micro:bit

Tra tutti i componenti che sono presenti sulla Micro:bit, quelli che utilizzeremo noi per questo esperimento sono due:

  • Accelerometro: che rileva i cambiamenti nella velocità della micro:bit. Converte poi le informazioni analogiche in digitali che possono poi essere utilizzare in vari programmi. L’output è in milli-g (1/1000 di un g. Un g è la stessa accelerazione della gravità terrestre.)
  • Antenna: la micro:bit possiede un ricetrasmettitore a che le permette di comunicare via radio ad altre micro:bit. Maggiori informazioni qui.

L’esperimento

L’esperimento è consisto nell’attaccare la micro:bit ad un drone per registrare i dati che l’accelerometro della scheda raccoglieva in volo, e trasmetterli in tempo reale, via radio, ad una micro:bit a terra collegata via USB ad un computer che riceveva i dati seriali e li visualizzava.

La micro:bit attaccata al drone

Il codice

Il codice utilizzato dalle due micro:bit in questo esperimento è molto semplice.

Ecco il codice utilizzato dalla micro:bit con funzione di trasmettitore (attaccata al drone):

from microbit import *
import radio
radio.config(group=38)
radio.on()

while True:
    sleep(30)
    radio.send(str(accelerometer.get_values()))

Ecco il codice utilizzato dalla micro:bit di terra connessa al PC che aveva il compito di ricevere e visualizzare i dati:

from microbit import *
import radio
radio.config(group=38)
radio.on()

while True:
    message = radio.receive()
    sleep(100)
    print(message)

Per flashare il codice il programma nelle rispettive micro:bit abbiamo utilizzato Mu Python Editor.

Interfaccia del software Mu

Il volo

Appena alzata in volo attaccata al drone, la micro:bit, ha subito registrato dei cambiamenti nel segnale inviato. Da tre linee pressoché piatte si è passati ad tre linee molto confuse, di poco aiuto.

A sinistra il terminale con tutti i dati ricevuto dalla micro:bit, a destra il grafico con la visualizzazione dei dati.

Superati i 150 metri di altezza (in linea d’aria) iniziarono ad arrivare i primi None nel terminale al posto dei dati e giunti a circa 200 metri i None erano ormai diventati più dei dati inviati, comunque continuavano ad arrivare dati e questo è stato sicuramente inaspettato!

Superati i 200 metri è iniziata la disceda del drone, probabilmente la micro:bit sarebbe arrivata a circa 250 metri prima di perdere completamente il segnale.

La grande distanza del segnale è sicuramente dovuta al fatto che le due micro:bit erano in linea d’aria senza ostacoli tra esse o nei paraggi.

Categorie
Senza categoria

Significato dei LED sulle porte Ethernet

Ogni porta Ethernet ha due luci LED che forniscono informazioni sulla connessione.

Led di link

StatoAttività
SpentoNessuna connessione
ArancioneConnesso ma senza trasferimento dati
Arancione (lampeggia)Trasferimento dati
Arancione (lampeggia e poi fermo)Pronto a risvegliarsi dalla modalità S5

Led di velocità

StatoDescrizione
SpentoConnessione 10 Mbps
ArancioneConnessione 100 Mbps
VerdeConnessione 1 Gbps

Utilità

I led delle porte Ethernet possono rivelarsi molto utili nel diagnosticare un problema.

Per esempio, una luce di link spenta, può subito indicarci l’assenza di connessione che potrebbe essere causata da un problema al Livello 1, come la porta o il cavo mal funzionante.

Una luce di link accesa, ma senza traffico potrebbe equivalere ad un problema al Livello 2 o superiore, causato per esempio da una VLAN.

Categorie
Senza categoria

Incorporare un video YouTube in modo responsive

Molto spesso capita di dover incorporare un video caricato su YouTube o Vimeo ma con molto traffico web proveniente da dispositivi mobili come spartphone e tablets è fondamentale che questi elementi incorporati siano responsive.

Analizziamo il problema

Se noi vogliamo incorporare il seguente video caricato su YouTube sul nostro sito web:

Questo è il codice che YouTube ci fornice:

<iframe width="1903" height="768" src="https://www.youtube.com/embed/62uKFlNVZ1w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Osservando questo frammento di codice notiamo subito che la larghezza e l’altezza sono dichiarate staticamente! Questa non è mai una buona idea in siti web con dei contenitori fluidi che si adattano allo schermo.

Per risolvere questo problema possiamo utilizzare due tecniche, la prima utilizzando solamente CSS, la seconda comprende un plugin jQuery.

Proviamo una soluzione

La prima cosa che potremmo provare a fare, è forzare la larghezza al 100% (width = 100%) e l’altezza ad auto (height = auto), ma in questo modo otterremmo un’altezza fissa di 150px, inutilizzabile nella maggior parte dei casi.

Piccola curiosità: l’altezza di 150px, è dovuta al fatto che quasi tutti i browser renderizzano gli iframe, le canvas e gli embed come rettangoli 300x150px se queste proprietà non vengono dichiarate.

Risolviamo con CSS

Il metodo più semplice di risolvere il nostro problema è utilizzando qualche riga di CSS.

Con questa tecnica andremo ad avvolgere il nostro iframe (privo di attributi width e height) in un elemento con che ha un rapporto intrinseco, poi daremo al nostro video una posizione absolute. Questo risulterà in una larghezza fluida e un’altezza corretta.

<div class="video-responsive">
     <iframe src="https://www.youtube.com/embed/62uKFlNVZ1w" allowfullscreen=""</iframe>
</div>
.video-responsive{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Funzionamento del metodo CSS

Questo è un metodo molto semplice, e funziona, ma ha un problema fondamentale: tutti i video devono avere lo stesso aspect ratio, in caso contrario otterrete delle barre nere.

Questo è dovuto al valore del padding-bottom del container, fissato a 56,25%, ma perché proprio a questo valore? Per scoprirlo guardiamo la formula con cui possiamo ricavarlo:

Quindi, se per esempio il nostro video è largo 560 e alto 349, il nostro padding dovrà essere 62,32%, ben diverso dal 56,25% che abbiamo impostato, numero valido per i video con un aspect ratio di 16:9 come per esempio un video 1920×1080.

La soluzione JavaScript

Il primo problema della soluzione precedente è che non tutti potrebbero essere in grado di utilizzarla: richiede di wrappare l’elemento iframe dentro un altro contenitore e rimuovere gli attributi predefiniti, togliendo la semplicità del Copia & Incolla dai video di YouTube. Inoltre, se non abbiamo controllo su quello che verrà inserito nell’embed, sarà necessario che sia compatibile con tutti i vari formati di video, non solo 16:9.

In questo caso ci viene in soccorso FitVids.js, una libreria jQuery che certa i video presenti nella pagina e aggiunge automaticamente il wrapper HTML e le regole CSS che abbiamo visto prima, solo che l’aspect ration viene calcolato automaticamente. Inoltre è molto semplice da utilizzare!

$('#elemento-con-video').fitVids();

Per maggiori informazioni visitate il sito di FitVids e la pagina GitHub.

Categorie
Senza categoria

Creare un terminale nel browser con jq-console

Recentemente, lavorando a PyBox, ho avuto la necessità di creare una UI dall’aspetto di un terminale nel browser.

Cercando in rete ho trovato jq-console, una plugin jQuery scritto in CoffeeScript, inizialmente creata da repl.it e poi utilizzata anche da Trinket che prova ad emulare un terminale di basso livello fornendo input e output.

La libreria è molto semplice da usare e con l’ultima versione di jQuery, (3.4.1 al tempo della scrittura).

Ecco una semplice prova di jq-console:

Per istanziare jq-console utilizzeremo il seguente codice e successivamente vediamo cosa rappresentano le variabili indicate:

$(div).jqconsole(benvenuto, prompt, continua, autofocus);
  • div rappresenta l’elemento o il selettore, che deve essere dimensionato esplicitamente e posizionato absolute o relative.
  • benvenuto è la stringa che viene mostrata quando il terminale è mostrato per la prima volta.
  • prompt è l’etichetta che viene mostrata prima dell’input quando viene utilizzato Prompt().
  • continua è l’etichetta mostrata prima delle linee continuate dell’input quando viene utilizzato Prompt().
  • autofocus è un valore booleano (true/false) che indica se l’auto focus debba essere disabilitato o no.
Categorie
Senza categoria

Torna a Windows 98 con 98.CSS

98.css è una libreria CSS creata da Jordan Scales per realizzare interfacce web moderne con lo stile di Windows 98, uno dei primi sistemi operativi desktop diffusi.

Questa libreria sfrutta l’utilizzo dei tag semantici di HTML, associando ad essi uno stile personalizzato. Per esempio, per creare un bottone dovrai utilizzare il tag <button>. Gli elementi di input richiedono delle etichette. I pulsanti icona si basano su aria-label.

Ovviamente è possibile personalizzare l’aspetto della libreria sovrascrivere lo stile predefinito, mantenendo comunque il suo aspetto. Se per esempio desideriamo aumentare il margine di un bottone, sarà sufficiente rimpiazzarlo. Se vogliamo dare un colore diverso al testo, possiamo farlo.

98.css non include nessun JavaScript, il suo scopo è solamente quello di dare un aspetto diverso ad HTML, quindi è compatibile con qualsiasi framework per lo sviluppo frontend, come React o jQuery.

Il modo più semplice e veloce di iniziare ad utilizzare 98.css è quello di importarla da unpkg.

<link rel="stylesheet" href="https://unpkg.com/98.css">

Inoltre puoi installare 98.css dalla pagina releases su GitHub o da npm.

npm install 98.css

Ecco un esempio di applicazione realizzata con 98.css

Qui puoi vedere un esempio di 98.css utilizzato React, e qui un esempio con JavaScript.

Per ulteriori informazioni visita il sito ufficiale del progetto.

Categorie
Java Swing

Java Swing: La prima finestra

Prima di iniziare a lavorare sulla nostra prima finestra in Java Swing, dovremo creare un nuovo progetto sulla nostra IDE. In questi tutorial verrà utilizzata IntelliJ IDEA ma è possibile eseguire le stesse operazioni su Eclipse o NetBeans.

Iniziamo subito creando un nuovo progetto.

Nel nostro nuovo progetto creiamo all’interno della cartella “src” un package, in questo caso lo chiamero “swing01” e all’interno di esso creiamo una classe “Main”. Aggiungiamo un metodo main e all’interno di esso possiamo iniziare a creare la nostra finestra.

Ora creiamo una variabile di tipo JFrame che chiameremo frame e nel costruttore passiamo una stringa che sarà il titolo della finestra.

JFrame frame = new JFrame("Titolo della finestra");

Per impostare la grandezza che la nostra finestra dovrà avere, per farlo utilizzeremo setSize. Passeremo due parametri: il primo sarà la larghezza (width) e il secondo sarà l’altezza (height).

frame.setSize(800, 500)

Per impostare la posizione in cui la nostra finestra apparirà sullo schermo, dobbiamo prima capire come vengono calcolati i pixel di uno schermo.

Sistema di riferimento di uno schermo con dimensioni 1280 x 720. Il punto A, al centro dello schermo, ha coordinate (640, 360)

Quindi, se per esempio desideriamo che l’angolo superiore della nostra finestra sia posizionato alle coordinate (300, 200), utilizzeremo il metodo setLocation, passando le coordinate come parametri.

frame.setLocation(200, 200);

Se invece vogliamo che la nostra finestra sia sempre al centro dello schermo, possiamo usare il metodo setLocationRelativeTo, passando null come parametro.

frame.setLocationRelativeTo(null);

Ora, senza aggiungere altro, se rendessimo visibile la nostra finestra, sarà automaticamente abilitata la possibilità di ridimensionarla, sia tramite il tasto di controllo per renderla a tutto schermo, sia tramite le frecce ai bordi della finestra. Per togliere all’utente la possibilità di fare ciò, ci basterà utilizzare il metodo setResizable

frame.setResizable(false);

Come ultima cosa, prima di rendere la nostra finestra visibile, dovremo assicurarci che, una volta chiusa la finestra, anche il processo della nostra applicazione si fermi effettivamente. Quindi dobbiamo dire al frame cosa fare quando si effettua l’operazione di chiusura, in questo modo:

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Infine, una volta fatto tutto ciò, rendiamo la nostra finestra visibile

frame.setVisible(true);

Ora hai creato la tua prima finestra in Java Swing!

Categorie
Java Swing

Java Swing: Introduzione

Java Swing è una libreria di Java che contiene il necessario per creare applicazioni con interfaccia grafica (GUI).

Swing è un’evoluzione di AWT e a differenza di AWT, Swing è indipendente dalla piattaforma e i componenti sono più leggeri.

Java AWTJava Swing
Componenti dipendenti dalla piattaformaComponenti indipendenti dalla piattaforma
Componenti pesantiComponenti leggeri
La personalizzare dell’aspetto è supportataLa personalizzazione dell’aspetto è supportata
Ha meno componenti rispetto a SwingSwing rende disponibili più componenti
Non segue il MVC (Model View Control)Segue il MVC

In Swing ci sono due elementi principali; i components (componenti) e i containers (contenitori).

I components sono oggetti grafici che offrono interazioni con l’utente, come i pulsanti o le caselle per inserire il testo.

I containers contengono i components e hanno il compito di posizionarli e dimensionarli in base al layout manager che a loro viene assegnato. Un container è per esempio la finestra, con un titolo, i pulsanti e al cui interno possiamo aggiungere vari componenti.

Tutti i componenti, insieme al contenitore, possono essere visti come un’unica entità, diventando così un componente e questo ci permette di inserirlo in altri contenitori.

Ecco la gerarchia dei componenti di Swing:

hierarchy of javax swing

In Swing ci sono molti componenti come bottoni, menu, pannelli, etichette. Per separarli da AWT in Swing i loro nomi sono preceduti da una J, come JButton per esempio.

In Swing tutti i componenti derivano dalla classe astratta Component e sono organizzati in una gerarchia.

Nella parte più alta abbiamo i contenitori principali, top-level che hanno il compito di contenere i componenti di livello più basso. In Swing ce ne sono quattro, I più usati JFrame, JDialog e JApplet, il quarto è JWindow.

Abbiamo poi i contenitori intermedi, che hanno il compito di facilitare il posizionamento dei componenti atomici che poi vedremo. In alcuni casi, come quello del JPanel, che è quello più diffuso, sono invisibili. Altri contenitori intermedi sono i JTabbedPane e JScrollPane.

Infine i componenti più basici sono i componenti atomici, che derivano tutti dalla classe JComponent, come per esempio i JButton, i JTextField e le JComboBox. Alcuni hanno il compito di presentare informazioni all’utente, come i JLabel, altri ricevono input dall’utente, come il JButton, alcuni fanno entrambi come le JTable. Questi componenti non possono contenere altri componenti.

Ecco l’organizzazione dei componenti in Swing, possiamo vedere il JFrame con all’interno un Content pane, infatti in Swing ogni contenitore principale contiene in senso figurato un contenitore intermedio dato che i componenti non possono essere inseriti direttamente nel contenitore principale.

Categorie
Sonoff Mini

Sonoff Mini Diy Mode

Categorie
Python

Problema di trigonometria in Python

In questo post vedremo come risolvere un problema di trigonometria in Python.

In un triangolo rettangolo ABC di ipotenusa BC = 5 cm, si ha ABC = 50° . Determina le misure dei cateti, arrotondandole a meno di un centesimo.

Risultati: AB = 3,21 cm e AC = 3,83

Ecco il programma in Python che risolve il problema:


import turtle
import math

# Dati iniziali del problema
gradiA = 50 # L'angolo è posizionato in B
ipotenusaBC = 5

# Converto gradi in radianti
radianti = gradiA / 180.0 * math.pi

# Trovo il cateto AB e arrotondo a 2
catetoAB = round(ipotenusaBC * math.cos(radianti), 2)

# Trovo il cateto BC e arrotondo a 2
catetoAC = round(ipotenusaBC * math.sin(radianti), 2)

# Stampo i lati
print ("AB: ", catetoAB)
print ("AC: ", catetoAC)
print ("BC: ", ipotenusaBC)

Una volta risolto il problema possiamo disegnare il triangolo risultante con la libreria Turtle


# Disegno il triangolo con Turtle
tartaruga = turtle.Turtle()

tartaruga.write("A", align="right", font=("Arial", 10))

# Disegno il cateto AC (misure amplificate per scala)
tartaruga.forward(catetoAC * 30)
tartaruga.write("B", align="left", font=("Arial", 10))

# Disegno il cateto AB (misure amplificate per scala)
tartaruga.left(90)
tartaruga.forward(catetoAB * 30)
tartaruga.write("C", align="center", font=("Arial", 10))

# Disegno l'ipotenusa (misure amplificate per scala)
tartaruga.left((180 - gradiA))
tartaruga.forward(ipotenusaBC * 30)

# Finisco la tartaruga
tartaruga.hideturtle()
turtle.done()

Prova il codice su Trinket

Link al codice su GitHub https://github.com/gb-factory/Esercizi-Python/blob/master/Trigonometria/triangolo.py

Categorie
Windows XP

Bypassare la password di Windows XP

In questo post vedremo come resettare la password di Windows XP.

Per prima cosa avviamo il computer e premiamo continuamente il tasto F8 della tastiera.

Ci dovrà apparire la schermata “Menu opzioni avanzate di Windows” dove potremmo selezionare la modalità con cui avviare Windows, in questo caso scegliamo “Modalità provvisoria”, premiamo Invio e nella schermata successiva selezioniamo il nostro sistema operativo.

Dopo un po’ di attesa Windows si avvierà con la schermata di Login.

Al posto del nome dell’utente inserire “Administrator” e lasciare la password in bianco, diamo OK, e ci farà accedere al pc normalmente.

Adesso per procedere al cambio della password andiamo su Start > Pannello di Controllo > Account Utente, a questo punto scegliamo l’account che vogliamo modificare, lo selezioniamo e andiamo su “Cambia password” a questo punto ci sarà possibile cambiare la password dell’utente. Conferiamo premendo sul tasto “Cambia password”.

Ora possiamo spegnere il computer e avviamo normalmente, alla schermata di login ci sarà possibile entrare nel nostro account con la password che abbiamo appena selezionato.