[Raspi] Message Box

My first Raspberry Pi project!

After setting up a Raspi with Recalbox to have a first foot step in the Raspberry Pi world, I’m starting a IoT project of my own.

The idea is to make a little cardbord/wooden message box containing a screen printing messages when recieved (notifications, little reminders).

To make this project happen, I’ve found in Amazon:

71v5huhnvtl-_sl1500_
A little 320x480px TFT touchscreen (Quimat QD353728)
71shkt4-uml-_sl1500_
A 7 hour long autonomy battery pack
51ifpmhdgwl-_sl1000_
Raspberry Pi Camera Module v2

 

Key points:

  • The box should have a workday long autonomy
  • It should be able to read messages from the Internet : being portable, it will not be connected during the day, so it have to have some kind of sync mechanism
  • This will have a little camera in the lid to take pictures of the reaction when the person read the received message
  • It should be a interface to create messages with time-stamp so that people can send to the box messages that will be pop’d-up after the next sync
  • The box itself: it should be a pretty little box that doesn’t “smell techie”. It should be a friendly box, with maybe some kind of “personal assistant” in the screen saying a sweet Hello in the morning!

 

Being a web-developer, I will simply make a form in a web page to put the messages in it. Fields could be: “author”, “message”, “date”, so that anyone who care to the box owner should send messages to her. Sending pictures could be awesome too!

Data will then be sent to a private webpage, mounting a database for this might be a bit too much.

To sync, the box will frequently try to connect to the Internet. When connected, it will scrap data from the private webpage where JSON parsed data will wait. Once synchronized, it will send a message to the webpage saying “Hey, I’ve got what I need, you can now erase the staging messages”.

In the box:

Now that the box scraped the data, it will simply pop-up the messages when the message’s time arrives.

Notifications:

The lid may have a little hole in a corner. When a programmed notification arrives, the screen would turn on and show a little blinking icon (a red heart, a star, whatever) that could be seen from the lid’s hole.

The screen will arrives on Wednesday, I can’t wait for it to be there. When there, I’ll see if it would be feasible to use the Raspi GPIO inputs to plug a servo or DC motor, so that I’ll make a wooden heart rotating in the outside of the box when a notification comes. This would be sweet.

Camera:

The idea is for the owner to push a “take a picture” button to save her reaction to the messages. Maybe with the message printed in the picture too. There is a Python PiCamera library making the use of the camera really, really easy!

The interface shall be made in Python to make use of the most out of the Raspi functions. I don’t know how to make a GUI in Python, next step being learning how to do that!

I’m fairly new to the Rasberry Pi world, so those are my first notes about my project. I may be wrong in some points, maybe I turnaround with stuff when there are more straight-forward ways to do it, but it is all part of the learning process ūüôā

I’ll keep this project update until it’s done.

[Atom][Visual Studio Code] Font Awesome Shortcut/Snippet!

"Font Awesome": {
        "prefix": "fa",
        "body": [
            "<i class=\"fa fa-$2\" aria-hidden=\"true\"></i>"
        ],
        "description": "Font Awesome template - just add the icon name!"
    }

 

You then just have to type “fa” to have the Font Awesome default line to appear, and then fill the icon name.

 

fa
<i class=\"fa fa-[HERE!]" aria-hidden=\"true\"></i>
<i class=\"fa fa-chevron-down" aria-hidden=\"true\"></i>

[jQuery][Datatables] Sort DataTables with a Select field

Javascript :

 

$(document).ready(function () {
 var table = $('#datatable').DataTable({
 dom: 'lr<"table-filter-container">tip',
 initComplete: function (settings) {
 var api = new $.fn.dataTable.Api(settings);
 $('.table-filter-container', api.table().container()).append(
 $('#table-filter').detach().show()
 );

$('#table-filter select').on('change', function () {
 table.search(this.value).draw();
 });
 }
 });

});

HTML :

 

<p id="table-filter" style="display:none">

                                    Chercher:

                                    <select>

                                        <option value="">All</option>

                                        <option>Tag1</option>

                                        <option>Tag2</option>

                                        <option>Tag3</option>

                                        <option>Tag4</option>

                                    </select>

                                </p>

                                <table id="datatable" class="display table table-hover table-responsive" cellspacing="0" width="100%">

                                    <thead>

                                        <tr>

                                            <th>Titre</th>

                                            <th>Assigné à</th>

                                            <th>Commencé le</th>

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†<th>D√Ľ dans</th>

                                            <th></th>

                                        </tr>

                                    </thead>

[Bootstrap 3] Customize Popovers with HTML Content And Custom Width

Popovers on Bootstrap are a handy thing to display some extra informations without overload the screen. They can not only be placed in A tag or BUTTON tag, but virtually in every tag needed.

Here are some custom options for :

  • How to display HTML in a popover ?
  • How to dismiss popover on click ?
  • How to add popover on a tag other than <a> or <button> ?

 

<tr
tabindex="0"             // Increase compatibility
role="button"            // Increase compatibility
data-trigger="focus"     // Dismiss on click wherever in the page
data-container="body"    // Display stuff
data-html="true"         // Display HTML content
data-toggle="popover"    // Our stuff!
data-placement="top"     // Popover placement (top, bottom, left, right)

data-content='
    <strong>Dernier évènement</strong><br><small>Répondu par <a href="#">Thomas</a></small>
    <hr/>
    <p>
        Ut occaecat exercitation incididunt tempor 
        sit nostrud anim esse. Consectetur sunt in officia 
        cillum fugiat duis deserunt est eiusmod sint 
        voluptate pariatur quis.
    </p>
'>
popover-html
Popover with HTML in it.

 

  • Popover with custom width :

Simply add :

.popover { max-width: 100%; }

in your CSS !

popover-maxwidth
such width!

[Laravel5] Custom Error Pages (and Every 503 Errors)

Laravel 5 is wonderful for handling errors. Creating custom error pages is easy too. You can find one default 500 error page (the one you’ll see when turning your app in maintenance with php artisan down (put it back up with¬†php artisan up) in¬†/ressources/views/errors/500.blade.php. Here is how to create some other ones :

Custom 404 page

  1. Create a new file under :
    /ressources/views/errors/404.blade.php
  2. Customize it. Don’t forget to make it fun ! Here are some cool examples.

Custom 503 page

This one is a bit trickier. By default, Laravel 5 will only load your custom page for HttpException errors.

  1. Open app/Exceptions/Handler.php
  2. Modify the render() function like that :
    public function render($request, Exception $e)
    {
        if (!$this->isHttpException($e)) $e = new \Symfony\Component\HttpKernel\Exception\HttpException(500);
        return parent::render($request, $e);
    }
  3. Then create your new file under /ressources/views/errors/503.blade.php and customize it. Laravel will now redirect all 500 errors to your custom 503 error page.

[git] Using SSH On An Existing Repository Already In HTTP

There are plenty of times when I’ve setup or cloned a project in HTTP originally, and then later, needed to connect¬†via SSH. Here are the ways to modify it :

1/ When creating a project

  • Using HTTP:
    git remote add origin https://github.com/nickname/repository.git
    
  • Using SSH:
    git remote add origin git@github.com:nickname/repository.git
    

2/ Updating an existing project

  • Open .git/config file, find¬†the¬†[remote “origin”] line;
  • Change the url from :
    https://github.com/nickname/repository.git

    to :

    git@github.com:nickname/repository.git

Of course, you must have your SSH keys registered in your Github/Bitbucket account.

Switching My Development Environment from OSX to Windows 10, part.1

TL;DR : I’ve switched from a MBP Retina 13″ to a Lenovo Yoga 900. Same price, better perfs.

Leaving the Macbook Pro for the iMac

My Macbook Pro Retina 13″ being somehow unusable for weeks now (coffee might be involved), I’ve had to buy a new machine for my development setup.

I tried the iMac 21″. This is a wonderful machine : OSX is awesome for development thanks to its Unix-like, POSIX compliant. For the cons, I might have been struggling with the exotic repositories you have to use (Homebrew, and MacPorts or Fink before it…), being used to apt-get in Debian based machines and servers I manage. But whatever troll I’m raising here, in the other side, Linux distros doesn’t have the feeling nor the perfect third-party devices integration that you’d find in commercial OSes, for obvious and completely dumb -commercial – reasons from the manufacturers.

But unfortunately, it fails on one point : no SSD built-in it. I thought this wasn’t really an issue, that I wasn’t dealing a lot with files, but I was wrong. I use Atom as my main IDE, which is usually full of 15+ files. I love working with Laravel, which also gives its share of files. To make this short: using Atom quick searches are a pain without SSD (at least, when you’re used to use them). Add to this that OSX relies a lot on swap files stored in drives for being so fluid and easy to use, switching under OSX from a SSD to a HDD is a though experience.

One could say that it is a matter of few seconds, but those are making a huge difference and makes you really think about why you’re buying your computer. Especially when you rely a lot more on software performance and cohesion before hardware capabilities.

Looking for a Device as Great as the MBP

So I was again looking for another workstation.

At first, I was passive-aggressively looking at PC laptops : why would I buy something that last, say, 2 years tops (cheers HP, Acer and so) before hardware starts being absolute mess ? I was out there looking for a Macbook Pro, of course.

It is a strange reaction since I’m not one of those Apple fanboys : I proudly use a Huawei P9 as a smartphone, a Samsung Galaxy tablet, I do love Android based products, and I really can’t deal with iOS stuff. I love good concurrency, and when it comes to computers, Apple simply offered to the market some of the best products.

I’m just one of the numerous people who’ve switched for a Mac the first time during this last decade : tired of weak machines and a weaker OS when dealing with Windows, or a not-really user friendly OS when using any Linux distribution.

Don’t get me wrong : I’m a CLI lover, I donate to Wikipedia, but Office and Gimp just doesn’t have what it takes against their commercial pairs, and once a again, I know, they simply don’t have big companies behind them. But some are buying and using a computer to feel good with it, not to use software by pity simply because those ones are free.

When Apple Mess Things Up

But I had a feeling when looking at the shelves in the store. The feeling that Apple just released one of the crappiest product it ever shown : a Macbook Pro which is less powerful than the previous, with a small touchbar for the price of a great full size tablet. Even the touchbar-less version is more expensive.

mbp13vsnewmbp13
$1299 vs $1499

 

That was at this moment where I’ve thrown a glance at the concurrency.

When Windows Becomes Cool Again

The PCs. These stuffs not all shaped the same way, with a clicky touchpad, some ugly stickers in it, a body made of plastic, with colors and wierd Windows stuff inside.

And it felt good. I was looking at a whole new world of personal computing : a lot of different machines, of course a lot of them crappy in many ways, but all of them made for different peoples, different usages.

And I was back to the PC world as I have been younger. Finally looking at the hardware, the choice being way more deep than choosing between 13″ and 15″. Looking for my own personal computer that fits my needs.

Of course, the Windows part was still a problem. Until I started testing it. Windows 10 finally feels elegant, complete, responsive. In the same range of years, Windows has learned on its mistakes, unlike OSX which various releases feels like “man, go buy a iPad and an iPhone so you can use your OS at its best”. Even Edge felt right. I know, Windows catches every of my strokes but Google almost did the same with my Android devices and years of using Chrome, and so did Apple.

And anyway, for the price of a Macbook Pro that I was coming for in the beginning, I could have a i7 inside (good ol’ days), 8 Go of RAM and… 512 Go of SSD ! Which makes me completely free to run a VM with Linux in it at full speed (I can’t deal with the dual boot for now, being way too used, with the MBP, never to reboot my laptop).

This is why I felt for the Lenovo Yoga 900 !

When Windows Becomes DEFINITELY Cool

Remains the problem of having a development workstation that simply works. The VM running Ubuntu is great, but still having to switch between two environments (Windows 10 and Ubuntu) once in a while feels a bit uncomfortable.

And, surprise, after digging into a few years of updates about Microsoft and Windows, I’ve discovered that Microsoft released with the Windows 10 Anniversary Update… A Bash ! Sounds like an April’s fool, but there it is : Bash On Ubuntu On Windows, in a partnership with Canonical.

I just can’t say how great it feels. Everything works fine – at least, all of my main usages : git, ssh, vim, Ubuntu apt repositories, the AMP stack, zsh… Even the famous Agnoster OhMyZsh theme.

It is really unexpected : you can finally have the great Windows 10 UX/UI with the comfort of a fully working Unix environment. There are some issues, Vagrant for example which can’t run under the Ubuntu bash because of a Virtualbox issue, but it is a least problem, Vagrant works great under Windows. You just have to have a second terminal tab opened.

iTerm2 will be missing a lot, but I’ve found a good candidate, ConEmu which does the job.

In part 2, I’ll tell you about how to setup your desktop environment under Windows 10 so that you feel just like home.

[OS X] How To Enable Ctrl+Maj+Up And Ctrl+Maj+Down in Atom and Sublime Text 2 To Select Multiple Lines

One frustrating issue that I encounter every time I setup an OSX machine for development is that the very useful Ctrl+Maj+Down (and Ctrl+Maj+Up) keybinding to select multiple lines in Atom or Sublime Text doesn’t work out of the box.

Selecting multiple lines
Selecting multiple lines to edit them all in the same time.

This is because OSX already uses this shortcut for its Mission Control app.

  1. Go to Settings > Keyboard > Shortcuts > Mission Control ;
  2. Unselect the shortcuts (or bind another keystroke if you need the functions). Ctrl is the little ^ icon.
    clavier
  3. And there you go, open up Atom or Sublime Text and it should be working.

 

 

How To Enable Alt+Left/Right Arrow In iTerm2 To Jump Words

This is a known issue in iTerm2 that when pressing Alt+left/right arrow, you can’t jump words as you do in your text editor.

Here is the key binding you need to setup :

Go to iTerm2 > Preferences > Profiles > Keys

Add a new key binding with the little + icon.

Type your keyboard sequence in the first field, then fill the others like this :

 

This will simply bind Esc+b(ackward) and Esc+f(orward) to your usual shortcut. It should work immediately, if not, reload iTerm2.