Build your own bus shelter for less than 10$

I want to show you how to build your own bus shelter using some basic electronic components and a 3D printer to pack all these stuffs.

The result in a short video

GitHub repo

GitHub | Arduinobribus | @joeybronner One you cloned the repo, you have to adapt some variables of the code: the missionId and the stationId where you take your bus. Please follow the few steps below…

Step 1: Mission ID

Find the id related to the mission, in the file located under https://github.com/joeybronner/arduinobribus/tree/master/json/bus_missions.json\ Mission object looks like:

{
  "id":"100100020",
  "name":"Gare de Lyon / Gare Saint-Lazare",
  "shortName":"B20",
  "image":"b20.gif"
}

Change the sMissionId value in https://github.com/joeybronner/arduinobribus/tree/master/arduino/arduino.ino with the id of your mission.\ Example: 100100099 in my case

Step 2: Station ID

Open the following URL with your own mission ID: http://restratpws.azurewebsites.net/api/stations/ and get the id of your station.\ Station object looks like:

{
    "id":"PC3_1039_1091",
    "name":"Camille Flammarion"
}

Change the sStationId value in https://github.com/joeybronner/arduinobribus/tree/master/arduino/arduino.ino with the id of your station.\ Example: PC3_1047_1074 in my case

Step 3: Way (A/R)

The last value is the way of the bus (“a” or “r”).\ To know the way, open the following URL with your own http://restratpws.azurewebsites.net/api/directions/.\ Direction object looks like:

[
    {
        "way":"A",
        "name":"Porte Maillot"
    },
    {
        "way":"R",
        "name":"Skanderbeg"
    }
]

Change the sWay value in https://github.com/joeybronner/arduinobribus/tree/master/arduino/arduino.ino with the way you want to display.\ Example: “a” in my case

Schematics

Wemos PIN OLED PIN
5V VDD
GND GND
D5 SCK
D1 DC
D3 RES
D7 SDA
D8 CS

Components

All you need is available on AliExpress for less than 10$ (printing price included):

The printing model is available in the GitHub repo here: 3D models. You can print it using any cheap printer you want, it will be printed in less than 2 hours.

Below, the preview of the 3D model (.stl files)

GitHub

You can contribute or simply clone the repo here: https://github.com/joeybronner/arduinobribus

[VIDEO] one day in life of SAP software engineer: why? how? difficulty? views?

The video

Why?

I wanted to do a snapshot of my life in a moment I really like what I’m doing and in a moment I think my potential is high. I plan to do the same in few years (5?!) to compare and see how it changed (evolution, progression, etc.).

How?

For the camera, it’s a basic (and a little bit old) Sony Alpha 5000. Not expensive, I bought it second-hand for 180€ (200$). For the software part, I only used Adobe After Effects for the video editing/cutting. The sound is from the YouTube sound library (free). You can find some great musics & sound effects but the risk is to find your music in another video. The font used is the font from Apple, used on iOS : San Fransisco Display (you can find the links link at the end of the article).

Difficulty?

Definitely hard. I think French (also in Paris) are afraid by videos and when they see the camera, the reflex is to go out camera’s view. So yes, it’s not easy to get good images on natural moments. That’s a very important element for a good final result of a video like this.

Views?

That’s fun. I never posted any video on YouTube and this is my first one. I posted it in public and sent it only to my colleagues and friends: 5 days later, I get more than 1200 views, 49 likes, 19 comments. It’s not HUGE but I’m a little bit surprised :).

Some links

W14Y18 – MQTT Client for OSX, Fingerprint & HTTPS, Consola and full width embedded Youtube video

MQTT Client for OSX

For those working with OSX, I suggest you to use the most powerful MQTT client I’ve found: MQTTfx. This soft is complete. You will find all the basic features (like unsecured connection, already available on most light tools) and some very useful:

  • User/password authentication
  • SSL/TLS
  • Proxy settings

You have a large choice of certificates, which covers a lot of scenarios and platforms (SAP IoT 4.0 Platform included)

View/download MQTTfx

Fingerprint Check to verify HTTPS certificates

Sometimes, it can be useful to check if you are sending data or connected to the right website (for security purposes). In my case, when I’m connecting Arduino boards or something like this with network I’m not the owner, I’m using the fingerprint check.

Let’s see how it works.

First, you need to retrieve the fingerprint for the target website/API. For this, go to the website and click on the little “lock” icon in the address bar and click on the Certificate section.

Now, scroll down while you find the Fingerprints section and copy these two values (see below the example with Github).

The last step is to check when you establish the connection, if the fingerprint is the same or not. Below, an example in Arduino

// Check HTTPS
WiFiClientSecure client;
Serial.print("Connecting to ");
Serial.println(host);
if (!client.connect(host, httpsPort)) {
  Serial.println("Connection failed");
  return;
}

if (client.verify(fingerprint, host)) {
  Serial.println("Certificate matches");
} else {
  Serial.println("Certificate doesn't match");
}
// The rest of your code...

Consola

Logs are important when you code – If you pass your day, switching between terminal windows, it’s time to get them sexy! For this, I found Consola and I fall in love with this elegant consoler logger.

npm install consola --save

And now in your code, you can log info like this:

const consola = require('consola')

// See types section for all available types
consola.start('Starting build');
consola.success('Built!');
consola.info('Reporter: Some info');
consola.error(new Error('Foo'));

Give a try here: https://github.com/nuxt/consola

Full width embedded Youtube video

If you want to embed your Youtube video on your blog (WordPress or other), it’s possible with some custom CSS.

First go to the video link you want to embed and click on Share > Embed and get the whole iframe tag.

For example: <iframe width="560" height="349" src="http://www.youtube.com/embed/<YOUR_VIDEO_ID>" frameborder="0"></iframe>

Now, wrap the iframe tag inside a div and add the css.

<div class="youtubeVideoContainer">
    // the iframe tag here
</div>

.youtubeVideoContainer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.youtubeVideoContainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

That’s it. Your video will use the full width of your post.

W09Y18 – Merge images, SAPUI5 Image component, Raspberry Pi SSH over USB

Merge images

If you need to merge mutiples images in one, I’ll warmly recommend you to use this JavaScript library: https://github.com/lukechilds/merge-images.

Yes, I know what you are going to tell me: it’s possible to do it without any library but it’s more complicated, and not easy to maintain. For example, to do the same in pure JavaScript, you have to play with canvas… below a little example:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
   ctx.drawImage(imageObj1, 0, 0, 328, 526);
   imageObj2.src = "2.png";
   imageObj2.onload = function() {
      ctx.drawImage(imageObj2, 15, 85, 300, 300);
      var img = c.toDataURL("image/png");
      document.write('<img src="' + img + '" width="328" height="526"/>');
   }
};

It’s not as sexy as…

mergeImages(['/body.png', '/eyes.png', '/mouth.png']).then(b64 => document.querySelector('img').src = b64);

Agree? And you have some interesting features:

– positioning (x, y) – opacity – size (width, height)

And it’s under MIT licence.

SAPUI5, fix error 404 on sap.m.Image component

I developed some apps using the SAP UI5 frontend framework and on each app, I have the same errors in the console on each page I use the SAPUI5 Image component (sap.m.Image).

It’s not a blocking point or something really embarrassing but… if someone opens the console, it’s weird.

It’s due to retina support (good intention…) but if you haven’t your images with different densities, it will generate errors (see this article). The solution to avoid this error is to set the densityAware to false.

setDensityAware function.

By default it’s true, but I think that’s bad and should be set to false…

Raspberry Pi Zero & SSH over USB

I realized something very bad: the Raspberry Pi Zero is using a mini HDMI port (see below the HDMI vs mini HDMI)

I was very surprised and little bit blocked because it’s not a adaptor I have in my pocket. Then, I ordered one on AliExpress for less than 2$ (Mini HDMI adaptor).

If you are in the same situation then me, I have a good news, you will not be struggled because you can use your USB to ssh in few easy steps!

Step 1:

On the root of your SD card you have to add the following property at the end of the config.txt file:

dtoverlay=dwc2

Step 2:

On the root of your SD card you have to add the following property just after the rootwait parameter in the cmdline.txt file:

modules-load=dwc2,g_ether

Step 3:

Last step, you have to create a new file named “ssh” without any extension on the root of your SD card. Now connect the Raspberry Pi to your laptop and let it boot. Wait 30 seconds for the RPi to finish the boot, open your terminal and launch the command:

ssh pi@raspberrypi.local

Tadaaaaa