Pirates Electronics @pirateselectronics - Tumblr Blog

To-Do List Built with Meteor

I just discovered Meteor, a framework to build web apps with Javascript (front-end & back-end), and let me tell you: THIS IS THE NEXT BIG THING!

I won’t go over all the details (there are excellent Meteor reviews out there), but I will say this: Meteor has been the simplest framework that I have encountered so far, and it changes everything.

Previously working with Django, the framework is complicated, mildly intuitive, and slow to build (I hear there’s worse though!). And most importantly, deploying an app with Django has been a nightmare (I failed both on Heroku and pythonanywhere...)

However, with Meteor, everything is just easy. An example? Here’s how to initiate a user account:

meteor add accounts-ui accounts-password

Sure, there’s a bit more to it, but the login form is automatic, saving precious time!

Finally, pushing the whole app to Heroku has been a breeze (less than 10 min - make sure to have your billing details on the platform though!).

You can have a look at my To-Do List app here.

#meteor #javascript

A simple php contact form with Bootstrap

Who knew it was that difficult to find a simple and decent form with php code online? It took me several hours to eventually found a working solution. So if you are out there, frustrated and sad, here’s your solace.

The present form is a combination of a simple html + php code from the freecontactform.com website and a simple (yet beautiful) contact form designed with Bootstrap.

You can find the whole code here. But for those too lazy to open a link, here’s how it looks like:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <title>My form</title> </head> <body>

<div col-md-6 "img-thumbnail"> <div id="feedback"> <div class="container"> <div class="col-md-6 col-md-offset-3"> <div class="form-area"> <form name="contactform" method="post" action="thank_you.php"> <br style="clear:both"> <h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3> <div class="form-group"> <input type="text" class="form-control" name="first_name" placeholder="First Name" required> </div> <div class="form-group"> <input type="text" class="form-control" name="last_name" placeholder="Last Name" required> </div> <div class="form-group"> <input type="text" class="form-control" name="email" placeholder="Email" required> </div> <div class="form-group"> <input type="text" class="form-control" name="telephone" placeholder="Telephone" required> </div> <div class="form-group"> <textarea class="form-control" type="textarea" name="comments" placeholder="Message" maxlength="140" rows="7"></textarea> <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span> </div>

<button type="submit" value="submit" class="btn btn-primary pull-right">Submit Form</button> </form> </div> </div> </div> </div>  <body> </html>

PHP

<?php

if(isset($_POST['email'])) {

// EDIT THE 2 LINES BELOW AS REQUIRED

$email_to = "[email protected]";

$email_subject = "Your email subject line";

function died($error) {

// your error code can go here

echo "We are very sorry, but there were error(s) found with the form you submitted. ";

echo "These errors appear below.<br /><br />";

echo $error."<br /><br />";

echo "Please go back and fix these errors.<br /><br />";

die();

}

// validation expected data exists

if(!isset($_POST['first_name']) ||

!isset($_POST['last_name']) ||

!isset($_POST['email']) ||

!isset($_POST['telephone']) ||

!isset($_POST['comments'])) {

died('We are sorry, but there appears to be a problem with the form you submitted.');

}

$first_name = $_POST['first_name']; // required

$last_name = $_POST['last_name']; // required

$email_from = $_POST['email']; // required

$telephone = $_POST['telephone']; // not required

$comments = $_POST['comments']; // required

$error_message = "";

$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

if(!preg_match($email_exp,$email_from)) {

$error_message .= 'The Email Address you entered does not appear to be valid.<br />';

}

$string_exp = "/^[A-Za-z .'-]+$/";

if(!preg_match($string_exp,$first_name)) {

$error_message .= 'The First Name you entered does not appear to be valid.<br />';

}

if(!preg_match($string_exp,$last_name)) {

$error_message .= 'The Last Name you entered does not appear to be valid.<br />';

}

if(strlen($comments) < 2) {

$error_message .= 'The Comments you entered do not appear to be valid.<br />';

}

if(strlen($error_message) > 0) {

died($error_message);

}

$email_message = "Form details below.\n\n";

function clean_string($string) {

$bad = array("content-type","bcc:","to:","cc:","href");

return str_replace($bad,"",$string);

}

$email_message .= "First Name: ".clean_string($first_name)."\n";

$email_message .= "Last Name: ".clean_string($last_name)."\n";

$email_message .= "Email: ".clean_string($email_from)."\n";

$email_message .= "Telephone: ".clean_string($telephone)."\n";

$email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);

Thank you for contacting us. We will be in touch with you very soon.

<?php

}

A few things to note:

In your html file, the name of your “action” in the form must be the name of your php file (here: thank_you.php) which will also be the name of your confirmation page

Don’t forget to change your email address in the PHP file under “// EDIT THE 2 LINES BELOW AS REQUIRED”

You can insert custom html to appear on your thank you page at the bottom of your php file

#php #bootstrap #form

Project Barebone

The internet is slow, clunky and complicated.

There, I said it.

No but seriously, for those who don’t believe me, you can check out this great article here. In short, by pilling up ads, Javascript, tracking links, big images and big videos onto a same webpage, we make the experience SLOW and UGLY for the end user.

Check this webpage below.

Pretty horrendous, right? Can barely see the content we came for.

Anyway, so the idea was to build an absolute minimalist webpage, suitable for all kind of content, without all the clunky and unnecessary stuff, but that still looks great on all devices.

Here comes my contribution: Barebone (Github).

With reduced-size images (using tiny jpg), this website is guaranteed to load FAST.

This is still a work in progress, but in the meantime, feel free to re-use and adapt my work :)

#web design #internet

Remapping your keyboard for VNC use

For those who followed my previous tutorial “take control of your Raspberry Pi with VNC”, you may have noticed that your laptop keyboard does not react accordingly on your Raspberry Pi: everything seems out of whack.

The most likely reason is that your laptop is set with a US layout, while the Raspberry Pi is shipped with a GB layout by default. To fix this, simply enter the following command:

sudo nano /etc/default/keyboard

From here, simply replace “GB” by “US” under the XKBLAYOUT option (as shown on the photo), save (CONTROL + O, CONTROL + X) reboot your Pi, and you should be all set!

#raspberry pi #keyboard #vnc

Take control of your Raspberry Pi with VNC

Tired of plugging a monitor/mouse/keyboard into your Raspberry Pi to make it work? Let’s use it directly from the comfort of your own laptop.

First, download NoMachine on your computer.

Second, download NoMachine (again) on your Raspberry Pi. Here, use the NoMachine for Linux ARMv6 link. Install it with the following command:

$ sudo dpkg -i nomachine_4.6.12_1_armv6hf.deb

Make sure to use the right version that you’ve downloaded (so something else than 4.6.12_1 here).

Third, go back to your laptop, fire no machine and connect to the IP address of your Raspberry Pi. Use the following command to find it:

$ ifconfig

Use the credentials of your Raspberry Pi to connect (User/password), follow the easy instructions, and you’re all set in no time!

#raspberry pi #nomachine #vnc

An intro to Wireskark

So I came across this article from Motherboard “How to go from 0 to sniffing packets in 10 minutes”. Intriguing, right? On the internet, information flows in the form of “packets” of information: so bits of code going from one IP address to another. Once put together, these packets makes webpage like the one you are currently reading.

So why should you be interested? Well turns out, you can intercept these packets and read them. It’s not as straightforward as it seems of course, but some tools make it a much easier task.

Enters Wireshark. Wireshark is used by network admins to diagnose traffic issues or to collect network data, while security engineers use it to uncover sketchy network traffic. But this tool can also be used to spy on other users of the internet.

Let’s see how it works in details.

First, download Wireshark, install it on your computer and launch the application. Here’s what you should see:

To get started quickly, pick a network (WIFI here), and click on the blue fin on the top left. The application will start recording the traffic going through your WIFI.

Information should start appearing on your screen as shown below.

You can stop the recording at any moment, simply by clicking on the red square on the left hand side.

Now, what can you see? The top window show you the list of all the packets, with a time-stamp, the IP source and destination, the protocol used to passed the information, and some more information.

The middle window shows you extra information about this packet. Note that the left arrows are expandable.

Finally, the bottom window shows you the binary code of the packet.

Now, here’s where this is getting interesting. You can filter the packets via the bar at the top. Enter http. It will show you all the packets that used this protocol.

Click on “Hypertext Transfer Protocol” in the middle window to expand the information field. You can see (highlighted in blue here) the URL of the page visited.

Congratulation! You’ve just managed to find what page our user what visiting. :)

The HTTP protocol is usually insecure, so it’s pretty easy to find out information like this. However, for other protocols, information is encrypted, so it’s a bit trickier.

#wireshark #hacking

Recording videos

Similarly to raspistill to take photos, there is a raspivid to record videos. The process is pretty straightforward and similar to raspistill, the main difference being the -t.

With raspistill, -t decides of the delay before the picture gets taken. With raspivid, -t decides of how long the video should last. By default, the video will last 5 seconds, like in the following example:

raspivid -o test.h264

For a 10 seconds video, the command line should be as follow, -t being in milli-seconds:

raspivid -t 10000 -0 test.h264

Note that if -t is set to 0, the video will record forever.

The format .h264 is the only one available with Raspberry Pi.

#raspberry pi #video

Installing the camera module

By now you certainly came across the camera module produced by Raspberry.org and wonder how to get it working. Here are the simple steps.

First, install the the camera as shown on the photo below. You will need to raise the lugs of the CSI connector before inserting the ribbon cable (blue tag facing the ethernet port). Once in, lower the lugs.

Next, let’s make sure you have the latest version of the Raspbian distribution.

sudo apt-get update && sudo apt-get upgrade

Once done, head down to the Raspbian configuration panel via the following command:

sudo rasps-config

In the menu, select option 5 “Enable camera”. Select the “Enable” option, press enter. You will be asked to reboot your Pi. Do so.

Now, let’s test our camera. To take a photo, enter in your Terminal:

raspistill -o test.jpg # “test” can be renamed however you like

By default, there is a 5 second delay before the photo is taken. To view your picture, simply click on it and choose accessories > image viewer.

If you wish to take the picture almost “immediately”, enter the following line:

raspistill -t 1 -o test.jpg

EDIT: for some unknown reason as for now, raspistill only works with sudo, so you might have to take pictures using that command.

#raspberry pi #camera module

From 4DPi to HDMI, and back!

If you've read with attention our previous post about setting up your 4DPi, you’ll notice that it’s not quite straightforward to get the image back to your monitor via the HDMI port.

Dry your tears and stop slamming your Pi out of frustration, as there is a quick solution, granted you know where to look for.

In your terminal window, enter either line of code, depending on what screen you would like to use:

startx -- -layout TFT # two single “-” between “starts” and “-layout TFT”

startx -- -layout HDMI # two single “-” between “starts” and “-layout TFT”

The screen change should automatically appear, throwing you an error message that you can ignore.

#raspberry pi #4dpi

“Hello, space!” with Piface

Want to write something quick and easy on your shiny new Piface? We found different tutorials on the matter, each with a different set of errors preventing the Piface from working properly. But we have the solution!

Here’s what you need to do:

Write in your terminal:

#!/usr/bin/env python3

This will declare the encoding used for the program. Next, import Piface:

import pifacecad

Create Piface Control and Display object:

cad = pifacecad.PiFaceCAD()

Turn on the backlight:

cad.lcd.backlight_on()

Finally, insert your text:

cad.lcd.write(”Hello, space!”)

Run your newly created program in the terminal window, and the magic should appear on your Piface.

#raspberry pi #piface

Setting up Piface Control & Display

Don’t get fooled: setting up Piface can’t be trickier than expected if you don’t know what code to use. After extensive research, the Piface Github page is where you ca find the most updated info on the matter.

First, ensure you are connected to the internet.

Next, ensure you have the latest version of Raspbian (don’t skip that step!) by entering the following command lines in your terminal:

sudo apt-get update sudo apt-get upgrade

Next, install Piface:

sudo apt-get install python{,3}-pifacecad

Finally, run a test program to ensure everything works perfectly:

python3 /usr/share/doc/python3-pifacecad/examples/sysinfo.py

You should see appear on your screen your IP address, temperature and humidity level.

Note: in our experience we did not need to reboot the Pi.

#raspberry pi #piface

Formatting your SD Card

So there you are: something f***ed up with your Raspberry Pi (more on this in another post), and the only solution you have left is to format your SD Card and re-upload Noobs (or Noobs Lite) to get back in the game. Surely enough, a simple (for Mac!) Disk Utility > Erase should do, right? WRONG!

After more than two hours spent trying to figure out why I kept getting a black screen on first boot, here’s how to properly format your SD Card so you can re-upload Noobs and not load any of the files of your previous version that might confuse your Raspberry Pi.

First, visit sdcard.org and download the formatting tool. Run the program, select your SD Card (hooked to your computer) and select Overwrite Format. Click Format.

In my experience, the program took over 25 minutes, so be VERY patient.

Once done, simply copy the Noobs Lite files (not the folder) back to the SD Card, connect your Raspberry Pi (don’t forget the ethernet cable and mouse!), and you should be good to go!

#raspberry pi

Set up your 4DPi-24-HAT

What is a 4DPi-24-HAT you ask? Well, “it is a 2.4” 320x240 Primary Display HAT for the Raspberry Pi, which plugs directly on top of a Raspberry Pi and displays the primary output which is normally sent to the HDMI or Composite output. It features an integrated Resistive Touch panel, enabling the 4DPi-24-HAT to function with the Raspberry Pi without the need for a mouse.” Pretty cool, right?

Setting it up for the first time can be frustrating, so here’s the quick way to do it.

First, ensure your Raspberry Pi is connected to the internet via an ethernet cable or wifi. Don’t connect the hat to the Raspberry Pi just yet, and boot your Pi.

Next, access your terminal window and type:

sudo su wget http://www.4dsystems.com.au/downloads/4DPi/4DPi-24-HAT/4DPi-24-HAT_kernel_R_1_0.tar.gz

Next, type:

tar -xzvf 4DPi-24-HAT_kernel_R_1_0.tar.gz -C /

Finally, in order to display your OS on the 4DPi-24-HAT when booting your Raspberry Pi, you will need to type the following in your terminal window:

sudo nano /etc/rc.local

In the file, find the command line including “exit 0″. Just BEFORE this code line, enter:

sudo -u pi FRAMEBUFFER=/dev/fb1 startx &

Save the file with ctrl+X, then “Y”, then enter.

Turn off your Pi. Add the 24DPi-24-HAT onto it, and boot your Pi. Your OS will now display on your mini-screen. EDIT: if you are like me and simply can’t stand the large menu bar on top of your screen, simply go to Preferences > Appearance Settings. Then change Menu Bar to “Small”.

#raspberry pi #4dpi

Running a Python script at boot using cron

By simply plugging your Raspberry Pi, you can run a program that does not necessitate any input from the user. It can be quite useful if you simply wish to get an automatic task running without having to manually access your terminal window to launch it.

There are different ways to do it, but the simplest method by far is to use the “cron” method. Here’s how to do it:

First, create your Python script and save it in a location that you will remember. Make sure that the script does not need any input on your end to run.

Next, access “cron” in your terminal:

sudo crontab -e

At the bottom of the file, add the following code:

@reboot python /home/pi/MyScript.py &

In our example, our script is called “blink.py”

Save your file with ctrl+X, then confirm with “Y” and press Enter.

Reboot your Raspberry Pi using:

sudo reboot

Your script will now run at boot. To cancel this method, simply access “cron” again, delete the last line you created and save the file.

#raspberry pi

Taking a screenshot

There are different ways to take a screenshot with a Raspberry Pi, but nothing is as quick and easy than using Scrot.

First, make sure to get Scrot on your Raspberry Pi. Open your terminal and enter:

sudo apt-get install scrot

You can then take a screenshot by entering in your terminal window:

bash $ sudo scrot

You can of course add a delay with the following command:

bash $ sudo scrot -d10 #d10 meaning “delay of 10 seconds”

The image will be stored by default in your /home/pi/ folder.

#raspberry pi

Set up your wifi

Setting up your Raspberry Pi’s wifi can be very useful for any project using the internet. Here’s a quick way to do it.

Open your terminal and enter:

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

Got to the bottom of the file, then enter:

network={ ssid="Your_network" #enter here the name of your network (within “”) psk="Your_wifi_password" #enter here your wifi password (within “”) }

Save your changes with ctrl+X, confirm with “Y”, then press Enter.

Reboot your Raspberry Pi

sudo reboot

Open your favourite internet browser and test your connection.

#raspberry pi

Blink a LED

Based on the same schematic than our previous post, here’s how to make our LED blink.

First import the necessary libraries and set up our GPIO #7 as an output.

import RPi.GPIO as GPIO import time

GPIO.setmode(GPIO.BOARD) GPIO.setup(7, GPIO.OUT)

Now, let’s define a function Blink:

def Blink(numTimes, speed): for x in range(0, numTimes): GPIO.output(7,True) time.sleep(speed) GPIO.output(7,False) time.sleep(speed) print "Done" GPIO.cleanup()

Here, we are using a loop, going from 0 to a value we will determine later on (numTimes).

Then we set the GPIO to True to turn on the LED. We then wait (time.sleep()) for a period of time (speed) that we will also determine later on. We then do the same, but set the GPIO to False to turn the LED off.

Below, we ask the user to set the values for numTimes and speed:

numTimes = input("Enter total number of times to blink: ") speed = input("Enter length of each blink(seconds): ")

Finally, we tell the program to run the function Blink():

Blink(int(numTimes), float(speed))

the int() function ensure that the string we provide as an input will be read as integer (number), and the float() function will ensure that we input a number without decimal (a LED can’t blink 2.2 times for example...).

Run the program in your terminal. It will prompt with both questions, allowing you to decide how many times the LED will light up, and for how long.

Note that you can decide of a shorter/longer time for how long the LED should be off in between each blinks. Indeed, in this exercise we are using the variable speed for both when the LED turns on and off. But you can decide of a second variable speed2, so the LED can for example blink for 5 seconds, while being off for only 2 seconds.

#raspberry pi #led

Trending Blogs

Recently Viewed Blogs

Pirates Electronics