Posts Tagged → Weekly

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

W04Y17 – Git, create a new repository from a current branch, disable HTTP logs in Express, Android mass storage and kill process on specific port

Create a new repo from an existing branch

As you know, it’s strongly recommended to create a new repository if a branch depends to another branch in your project… Basically, if you need to clone a repo twice and checkout each to a different branch to launch your project, it’es very bad!

So, the simplest method in three steps to create a new repo from a current branch is to:

> create your **new_repo** in GitHub
> cd to your local branch 
> git push git@github.com:youraccountname/new_repo +old_branch:master

Now, your new GitHub repository is up to date. The master branch corresponds to the branch in your old repo with all history preserved which is a very good point!

How to disable HTTP request logs in Node/Express.js

When you launch your application built on Node/Express, you’ll probably see a lot of logs for each resources (css, images, js, etc…)

GET /resources/styles.css 200 0ms
GET /js/lib/jmyawesomelib.js 200 0ms
etc...

The solution is to move the logging plugin below the resource plugin in the app init! or comment your morgan module (works on Express.js 4)

//app.use(morgan('dev'));

No more logs!

Mass storage troubleshooting

I figured some problems lorsque je branchais my Google Nexus 5X to my Macbook (also on a Windows machine too). It was impossible to do a mass storage to retrieve the phone content (photos, videos, downloaded files, etc…). I tried all the solutions found on forums and the only software that saved my life is Android File Transfer by Google for OSX.

Download Android File Transfer

Kill process running on a specific port

To kill a port that is running on a specific port, you need to execute the following commands. First, get the list of process running with corresponding ports and info:

netstat -a -o -n

Now, you get a list of process running on your machine, you only have to pick the PID corresponding the port you are looking to kill and replace 8080 below.

taskkill /F /PID 8080

Successfully killed, bye bye 🙂

W38Y16 – Setting up ADB on OSX, Android app icons generation, catch key press with Angular & DIY french webserie

Set up adb on Mac OSX

adb ADB is the command line tool to manage your Android phone and so install and run apps or different ROMs for example. Setting up ADB on Mac OSX is not quite easy and I lost time to configure it, so the line below will help you if you have to set it.

echo 'export PATH=$PATH:/Users/[yourusername]/android-sdks/platform-tools/' >> ~/.bash_profile

Generate icons Android app

Link launcher_icon_generator Launcher icons for Android apps are requested to be in several formats, and you’ll spent a lot of time if you want to build them in all the sizes. Here, you can find a tool from Roman Nurik where you just have to upload your image in a good format (512×512 minimum I think), and it will generate it for you in all those formats:

  • xxxhdpi
  • xxhdpi
  • xhdpi
  • hdpi
  • mdpi
  • web
  • hi-res

In addition, you can add some effects like square, circle, vertical/horizontal rectangle etc. Try it!

Bring life to TextView

demo3 Yes, it’s possible and it’s very nice! Thanks to HTextView, you can add some animation effects to your TextView fields. You only have to add the lib dependency to your project:

compile 'hanks.xyz:htextview-library:0.1.5'

and add the element to your xml layout:

<com.hanks.htextview.HTextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#000000"
    android:gravity="center"
    android:textColor="#FFFFFF"
    android:textSize="30sp"
    htext:animateType="anvil"
    htext:fontAsset="fonts/font-name.ttf" />

You can find HERE, the github repository to this project hosted by hanks-zyh. Star and share it to your network!

Catch key press with Angular

keypress_white If you want to provide some assistance using keyboard shortcuts in your web app (using Angular as front-end framework), I recommand to use a bower library called angular-keypress (you can find the Github repo HERE). Get it from bower:

bower install --save angular-keyboard-shortcuts

Use it simply like this:

<a ng-click="goToPreferences()" keyboard-shortcut="control+,">Preferences</a>
<a ng-click="openSettings()" keyboard-shortcut="s">Open Settings</a>

Very useful and enjoyable for users, really.

DIY French webserie

A short webserie (8 episodes) about DIY projects is proposed by Arte. It’s called “Fais-le toi-même” and it’s about creativity and inventions by makers. If you are passionate by Arduino and RaspberryPi stuffs or simply curious about it, go to check it!

fais-le-toi-meme-720x330

All episodes are available HERE

W31Y16 – Twitter REST API, Speech recognition for your web app, Angular DOM loaded and nice web switch animation

Twitter REST API

One of the REST API that I very like simply because it’s well explained, with samples, etc. The official Twitter REST API. If you would like to use it on a web project using NodeJS, there’s the plugin you need, twit.

Before using the Twitter API, you need to follow some instructions for the app creation but it’s pretty simple… Here, I found a good tutorial or on the official documentation.

An example of use if you want to make a search about the word “android”

var Twit = require('twit');

var T = new Twit({
  consumer_key:         '...',
  consumer_secret:      '...',
  access_token:         '...',
  access_token_secret:  '...',
  timeout_ms:           60*1000,  // optional HTTP request timeout to apply to all requests.
});

T.get('search/tweets', { q: 'android', count: 100 }, function(err, data, response) {
  console.log(data);
});

Speech recognition

If you want to make your web app more interactive, just add the annyang library to your project! It allows you to call your actions with the voice instead of clicking buttons. For exmaple, if you have to control. Just test to the online demo. Import the lib and add your own commands is pretty simple… just take a look.

Import the lib

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>

Implement your own commands

var commands = {
  'go to google': function() {
    redirect('http://google.com');
  }
};
annyang.addCommands(commands);
annyang.start();

You have some additional options like debug or language settings who could be very useful to see what is really captured and be more precise.

annyang.debug();
annyang.setLanguage('en');

Angular, DOM loaded ?

For some reasons, you need to know when your DOM is loaded to start actions, right? The easiest solution to do this with Angular is to add the code below in the controller of your view. As you can see, the controller will print in the console and the loader will be hidden.

// Execute after DOM loaded
angular.element(document).ready(function () {
    console.log('loading finished');
    $('#loading').hide();
});

Design of the week

I love this animation designed by Oleg Frolov. It would be nice to implement this to switch a night/light mode for an interface for example… The source code is available here, let me some minutes to add it in my own project! 🙂

enable

And now, holidays:

  • Translate My Sheet update
  • DIY projects.

W30Y16 – Script to auto forward emails, custom loading GIFs, Google Add-On free ebook, set up / remove proxy settings from your command prompt

Autoforward emails

For those who wants to auto forward emails received in Outlook (work) to their personnal Gmail account, there is a common solution using “Rules” in Outlook but this feature may be disabled by your IT center.

The solution is to add a rule based on a script coded in VBA in your Outlook macros.

First, press Alt+F11 to access to the VBA tool and in the left panel, click on Project1 > Microsoft Outlook Object > This Outlook Session and paste the code below:

Sub SendNew(Item As Outlook.MailItem)

Dim objMsg As MailItem
Set objMsg = Application.CreateItem(olMailItem)

objMsg.Body = Item.Body
objMsg.Subject = "FW: " & Item.Subject
objMsg.Recipients.Add "joeybronner@gmail.com"

objMsg.Send

End Sub

Save and close the VBA tool.
Now, you’ll have to apply this script to a rule, so, just follow this few steps…

  1. Select in top ruban Home > Rules > Manage Rules & Alerts
  2. Click New Rule
  3. Click on Apply rule on message I receive, Next
  4. Next (Yes on prompt)
  5. Check Run a script and select the script that you have created above, Next
  6. Finish

Now, you emails will be automatic forwarded.

Custom loading GIFs

If you have to add a loading GIF on your own app, you probably would like to have a custom one. If you type on google for a loading GIF you have the choice between the old style loading or some famous like Google+ loading… Loading.IO is a website where you can choose a loading style and customize for your app colors. And you can export your work in different format:

  • SVG
  • CSS
  • GIF

The Ultimate Guide to Google Sheets

The Zapier team has pulled all of their Google Sheets content together—including the very complete post from earlier this month that included my Translate My Sheet add-on—and turned it into a new free ebook: The Ultimate Guide to Google Sheets. It takes readers first through a detailed intro Google Sheets tutorial, then dives into deeper features that help readers build their own custom tools and apps using Google Sheets’ most powerful features.

You can download this free ebook on these platforms:

ultimate_google_sheets_book

Proxy settings

Because it’s something that we have to do some times (in my case it’s especially when I’m working on Raspberry boards), it’s useful to keep these few commands in mind:

set http_proxy=http://your_proxy:your_port
set http_proxy=http://username:password@your_proxy:your_port
set https_proxy=https://your_proxy:your_port
set https_proxy=https://username:password@your_proxy:your_port

And to remove the proxy settings, you only have to launch the same commands, without values:

set http_proxy=
set http_proxy=
set https_proxy=
set https_proxy=

Ladies and Gentlemans, Jack Ma

His career vision is very nice. I like his way of thinking. For young people who are 25 years old (and others!), you must make enough mistakes –you fall, you stand up–

Design of the week: Google search

That’s a very nice Google search redesign. Good user experience with a modern user interface; This is only a concept created by Juan C. Fresno.

google_search