Auteur archieven: Vincent Lammens

Skyz update 2

Geplaatst op door

Het is alweer een paar weken geleden dat ik een update voor skyz heb gepost, maar nu heb ik ook kaarten voor de VS aangemaakt. Hiervoor is veel meer data beschikbaar als voor Europa. Waardoor er 16 IR beelden zijn, en erboven staat altijd waarvoor ze dienen.

Raspberrypi Nas tutorial

Geplaatst op door

In deze tutorial leg ik uit hoe je een nas maakt van je Raspberrypi.

1. De harde schijf koppelen.

Zoek een gepast opslagmedium, een usb kan voldoende zijn en sluit het aan op de pi.

Open de terminal op de raspberrypi (of gebruik ssh)
Eerst gaan we updaten:

sudo apt-get update
sudo apt-get upgrade

Dan gaan we NTFS ondersteuning moeten toevoegen. Dat kan je doen door ntfs-3g te installeren met het volgende commando:

sudo apt-get install ntfs-3g

Dan gaan we onze schijf moeten vinden in het systeem, dat kunnen we doen met het volgende commando:

sudo fdisk -l

Er zouden 2 schijven moeten komen, tenzij je er meer dan 1 hebt aangesloten.

de sd kaart van de pi (/dev/mcbblkop1), deze kan je negeren ,en /dev/sda1, de schijf die je er zelf hebt aan gekoppeld.

Voor we de schijven kunnen koppelen, zullen we een plek moeten maken. Ik ga hiervoor /media/nasdisk1 gebruiken.

sudo mkdir /dev/nasdisk1

Nu gaan we een gebruiker moeten toevoegen waarmee we gaan inloggen. je kan “jouwgebruiker” in de voorbeelden vervangen door je eigen gebruikersnaam!

sudo useradd jouwgebruiker -m -G users
sudo passwd jouwgebruiker

Je zult je passwoord 2 keer moeten ingeven, en je zult het niet zien terwijl je het ingeeft, dat is voor veiligheidsredenen.

Dan zul je het gid, en uid moeten zoeken van je gebruiker, dat kan met:

id -g jouwgebruiker
id -u jouwgebruiker

de eerste is voor het gid, de 2e voor uid.

Nu gaan we het fstab bestand van de pi aanpassen. dat kan met het volgende commando:

sudo nano /etc/fstab

voeg de volgende lijn toe aan het einde. verander /dev/sda1 door wat je schijf was in het begin. en verander het uid en gid ook.

/dev/sda1 /media/NASHDD1 auto nofail,uid=enter_uid_here,gid=enter_gid_here,noatime 0 0

Herstart de pi en de schijven zullen automatisch gemount worden met de juiste rechten.

Nu kunnen we verder gaan met het instellen van de samba server.

sudo mkdir /media/nasdisk1/share

De Samba server opstellen

Eerst zullen we de samba server moeten downloaden, dat kan met het volgende commando:

sudo apt-get install samba samba-common-bin

En voor het geval we een fout maken, maken we een back-up van het configuratiebestand van samba:

sudo cp /etc/samba/smb.conf /etc/samba/smb.conf.old

Laten we nu het config bestand aanpassen met

sudo nano /etc/samba/smb.conf

Daar gaan we een aantal dingen moeten aanpassen. Eerst zullen we de comment (#) moeten verwijderen van de sercuryity=user regel.

Dan zullen we onze schijf moeten toevoegen aan het configuratie bestand:

[NAS]
comment = NAS Folder
path = /media/nasdisk1
valid users = @users
force group = users
create mask = 0660
directory mask = 0771
read only = no</code></pre>

De [NAS] is hoe we willen dat hij word weergegeven, wil je hem een andere naam geven, dan kun je “NAS” binnen de [] vervangen door de naam die jij wilt.

De Comment is een commentaar die bij de share komt te staan

path is het pad naar de map die we willen delen.

de valid users is een lijst met alle gebruikers die kunnen inloggen

de force group zorgt ervoor dat enkel gebruikers van die groep kunnen verbinden.

directory mask zorgt voor de rechten op de schijf.

en readonly zorgt er dan voor dat de server enkel leesbaar is, dus in dit geval no om hem ook schrijfbaar te maken.

Nu zul je de server moeten herstarten met:

sudo /etc/init.d/samba restart

Uiteindelijk zul je de gebruiker moeten toevoegen aan samba:

sudo smbpasswd -a jouwgebruiker

Verbinden.

Om met je nas te verbinden kan je in Windows bij netwerk gaan, dan zal je het zien staan, en op Mac/Linux, verbinden met een server, en dan smb://123.456.789.123/NAS (hier moet je 123.456.789.123 vervangen door het ip adres van je pi, en /NAS als je het een andere naam hebt gegeven.)

Dat is het. Hopelijk kun je nu verbinden met je nas, als je problemen hebt met het kopiëren van bestanden naar de schijf, dan zijn de rechten fout.

Skyz update 1

Geplaatst op door

Ongeveer twee weken geleden heb ik de eerste Alpha versie van skyz gemaakt, en ik heb ondertussen al een hele boel verbeteringen gemaakt.

Meer kaarten

Voor Europa zijn er nu ook ook infra rood, regen en Sneeuwkaarten. In de toekomst gaan er ook nog kaarten voor de vs bijkomen.

Bewegende kaarten

Door deze kaarten kan je de evolutie zien van het weer.

In de toekomst ga ik nog kaarten voor Amerika toevoegen. En de zoekfunctie verbeteren.

Als er nog ideeën zijn, laat het me dan weten in de reacties.

Snelheid converter tutorial

Geplaatst op door

Een paar posts geleden had ik een temperatuur convertor gemaakt, en nu heb ik een snelheid convertor gemaakt. Het principe is eigenlijk voor beide hetzelfde. Het zijn enkel de formules die verschillend zijn.

De basis

Eerst zul je een nieuw .html bestand moeten maken. Je kan deze bewerken in visual studio code of atom 

Eerst zullen we de basisstructuur van een html bestand moeten aanmaken. Hieronder staat een basis html document

<html>
    <head>
        <title>Snelheid convertor</title>
    </head>
    <body>

    </body>
</html>

Het script

Dan zul je tussen de </head> en de <body> tag een <script> tag moeten aanmaken. sluit deze af met </script> Daar gebeurt het omvormingswerk. Binnen de script tags kunnen we javascript gebruiken om de functies te maken. Ik ga voor deze tutorial een eenvoudige functie maken om kilometer per uur om te zetten in knopen. Hiervoor maak je best een functie. in dit geval gaat dit zo:

function temperatuurConvertorKphToKts(valNum) {

}

Waar valNum de waarde is die we gaan gebruiken voor de functie. Eerst moeten we er een decimaal getal van maken of een float. Dat kunnen we doen met parseFloat(valNum)

Dan is het eigenlijk enkel nog de formule die we moeten kennen. In dit geval is dat de snelheid in kph gedeeld door 1.852. En om deze waarde weer te geven in het html document gaan we document.getElementById("outputKnots").innerHTML = valNum / 1.852; gebruiken

function temperatuurConvertorKphToKts(valNum) {
  valNum = ParseFloat(valNum);
  document.getElementById("outputKnots").innerHTML = valNum / 1.852"
}

Deze stappen kun je herhalen voor andere conversies, waar je dus gewoon de formule moet aanpassen.

De invoer

Hiervoor gaan we een <input> tag gebruiken. plaats dit binnen de <body> tags:

<input id="inputKPH" type="number" placeholder="KPH" oninput="ConvertKPHToKnots(this.value)" onchange="ConvertKPHToKnots(this.value)">

de oninput en onchange argumenten zorgen dat de functie die we hierboven hebben aangeduid worden uitgevoerd vanaf er iets in ingevoerd, en vanaf het veranderd. Maar nu moeten we het resultaat nog weergeven. Dat kunnen we doen door simpelweg een <span> element met het id dat we hiervoor hebben gebruikt in het script, namelijk “outputKnots” namelijk zo:

<span id="outputKnots"></span>

Hier vind je voor de duidelijkheid de volledige code.

Skyz Weerapp

Geplaatst op door

Hier ben ik al even aan bezig geweest, een weerapp genaamd Skyz. Er zijn nog veel dingen die moeten veranderd worden. Nu geeft het enkel een satalietkaart van de opgezochte plek. Maar ik ga er later nog functies aan toevoegen. Zoals weerkaarten, Voorspellingen en zo. Dus zie dit als een alpha versie.

Je kan het bekijken op https://skyz.vincentlammens.be/ https://skyz.be

Meme generator tutorial

Geplaatst op door

Wil je eenvoudig je eigen memes maken volg dan deze tutorial

1. Maak de webpagina

Open een nieuw tekstdocument en sla het op als .html . De html code hieronder geeft je document de basisstructuur.

<html>
<head>
  <title>Cat meme generator</title>
</head>
<body>
  <h1>Het werkt!</h1>
</body>
</html>

Als je dit opent in een webbrowser zoals google chrome dan zou je “het werkt!” in het groot moeten zien

2. De foto en de tekst verkrijgen

Een meme bestaat meestal uit 2 onderdelen, een foto en tekst. Om deze te verzamelen gebruiken we een form.

In het form kun je Het volgende zetten:

<form>
Kies een foto: <input type="file" id="user_picture"><p>
Meme tekst: <input type="text" id="user_text" maxlength="70"><p>
</form>

3. De meme maken

We moeten een gebied maken waar de meme komt te staan waneer een afbeelding en tekst is opgegeven. De eerste voor de tekst, en de 2e voor de afbeelding. Hiervoor gebruiken we een <div> tag, deze zijn voor niet tekst elementen.

<div id="meme_text">Voorbeeldtekst</div>

En voeg er nu nog een aan toe voor de afbeelding, met een <img> tag erin.

<div id="meme_picture"><img src="" height="500" width="600"></div>

Sla op en open het document in een browser, nu zou je een wit kader moeten zien, met daarboven de “kies bestand” en “meme tekst” velden en dan “voorbeeldtekst”, maar zoals je ziet is die tekst nog niet het lettertype voor een meme

Tussen de <head> tags vanboven in je document zet daar

<style type="text/css">
</style>

Dat is om bepaalde elementen een uiterlijk te geven. Zet volgende code tussen de <style> en </style> tags om aanteduiden dat de code binnen deze tags css is. Deze zorgt dat het element met id ( aangeduid met een #) meme_text. Volgende specificaties krijgen

#meme_text {
    background-color: transparent;
    font-size: 40px;
    font-family: "Impact";
    color: white;
    text-shadow: black 0px 0px 10px;
    width: 600px;
    position: absolute;
    left: 15px;
    top: 400px;
}

de left: 15px; en top: 400px; elementen bepalen hoever de tekst van links en de bovenkant van de pagina is.

Vernieuw de pagina en je zult zien dat de voorbeeld tekst er nu beter uitziet.

3. De tekst weergeven

Tot nu hebben we de html code geschreven die zorgt hoe de pagina eruit ziet, nu moeten we zorgen dat de ingevoegde tekst word weergegeven dat gaan we doen met Javascript. Maak onder de <div> tags volgende code aan. Dat is om weer te geven dat de code binnen deze tags Javascript is.

<script type="text/javascript">
</script>

Binnen deze tags moeten we een eerste functie maken die zorgt dat de tekst word geupdate.

function update_text(){

}

Deze code zorgt ervoor dat alles tussen de { } haakjes word uitevoerd wanneer update_text(); word uitevoerd. Nu moeten we nog zorgen dat er werkelijk iets word uitgevoerd.

var user_text = document.getElementById("user_text");

Dit zorgt dat de variable user_text gelijk komt met de ingevoegde tekst

var meme_text = document.getElementById("memetext");
meme_text.innerHTML = user_text.value;

Dit zorgt ervoor dat  de tekst word weergegeven. Nu moet je het tekst invoegveld aanpassen door er oninput="update_text()" aan toe te voegen. Dat zorgt dat de functie word uitgevoerd zodra je er iets intypt, waardoor het ook direct aangepast word.

<p>meme tekst: <input type="text" id="user_text" maxlength="70" oninput="update_text()"><p>

Sla op en ververs de pagina. Nu zou je de tekst moeten zien veranderen zodra je er iets in begint te typen.

4. de afbeelding weergeven

Maak nu een nieuwe functie aan tussen de script tags genaamd update_image Net zoals in het vorige voorbeeld. In de functies, maak opnieuw twee variables

function update_image(){
  var img = document.querySelector('img');
  var file = document.querySelector('input[type=file]').files[0];
}

De eerste variable selecteert de eerste (en eenige) <img> tag. De tweede verwijst naar die afbeelding. Om te zorgen dat de afbeelding word weergegeven voeg volgende code toe aan de functie.

img.src = window.URL.createObjectURL(file);

Het totale script:

// Update image onto the screen
function update_image(){
    var img = document.querySelector('img'); // Returns the first img element
    var file = document.querySelector('input[type=file]').files[0]; // Returns the first file element found
    img.src =  window.URL.createObjectURL(file);

}

// Write the text onto the meme
function update_text(){
  var user_text = document.getElementById("user_text");
    var meme_text = document.getElementById("meme_text");
    meme_text.innerHTML = user_text.value;
}

Sla het nu op en herlaad de pagina. Nu zou alles moeten werken. en kan je memes maken.