Div liikkuu

Lisäsin tuohon samaan sivuun hieman liikettä. Kun hiiri viedään vasemmalla olevan vihreän divin päälle, niin se levenee. Kun hiiri siirtyy pois, leveys palautuu normaaliksi.

Alkuperäistä css:ää joutui muuttamaan, jotta divillä on tilaa liikkua. 

Divillä keski1 on tilaa liikkua, kun selain huolehtii divin keski2 leveydestä. En taida tykätä tästä. Selvitetään lisää.

Rajapinta

Tänään tutkailtiin micro:bitin ja Raspberryn rajapintaa.

Micro:bit lähettää sarjaporttiin pari tavua tekstiä, kun jotain nappia painetaan.

Ravistaminen saa näköjään 2 tapahtumaa aikaiseksi. 

Sitten tarkastellaan Raspberryllä, mitä sinne sen sarjaporttiin tulee.

Hyvin näyttää tulevan. 

Seuraavaksi luetaan Pythonilla sarjaporttia.

Uusi blogi

Keväältä tuoksuva lounatuuli kävi aamulla.
Tuossa ne sitten on, työpöydällä.

Loin uuden blogin, teema Hennolla otteella. Kyseessä on micro:bit ja Rapberry Pi. Opiskelijat ovat jo viisi viikkoa harjoitelleet, itse tulen vähän jälkijunassa tässä aiheessa. Hieman koodaamista harjoittelin tuolla http://microbit.org/fi/. Mahtavaa! Nyt pitäisi iskeä kourat rautaan kiinni.

Micro:bitissä on kaksi painonappia, A ja B. Tavoitteena on saada aikaan ohjelma, joka näyttää ledeissä kirjaimen A, kun A-nappia painetaan ja kirjaimen B, kun B-nappia painetaan. Kun laitetta ravistetaan, niin näyttö tyhjenee. Koodaamaan, koodaamaan! Selaimessa, Chromessa.

Sitten micro:bit koneeseen kiinni ja ladataan ohjelma micro:bittiin. Kokeillaan.

Toimii.

No tämä oli se helppo osuus. Tavoitteena olisi tehdä sydeemi, jossa micro:bitillä ohjataan nettisivua. Eli kun micro:bitissä tehdään jotain, vaikkapa painetaan nappia A, niin nettisivulla tapahtuu jotain.

Otetaan Raspberry Pi käyttöön. Asennetaan siihen Apashe2-palvelin.

Terminaaliin: sudo apt-get install apashe2 

Sitten haetaan ip-osoite: ifconfig

Ja selaimella tuohon ip-osoitteeseen. 

Juuresta var-kansio ja siellä www, johon tallennetaan nettisivut.

Sivun rakenne näyttäisi tältä:

Sivulla tapahtuisi vaikka sellaista, että kun A-nappia painetaan, niin tummempi oranssi osa ylhäällä muuttuisi vaaleammaksi. Sivu on rakennettu div:eillä ja muotoiltu css:llä.

Javascriptillä voidaan muokata html-sivua. Kokeilen ensin hiirellä klikkaamista tuohon oranssiin nauhaan.

Näyttää toimivan.

Nyt koodia pitäis saada muutettua siten, että useammalle diville tapahtuisi jotain, vaikka samoja juttuja.

jQueryllä voi kirjoittaa tehokkaammin. Siispä siihen tutustumaan. Tässä tämän aamun tulos.