Posts by Edoardo Odorico

tHere

tHere

Link to Project page (you’ll find the bookmarklet…there, mhehehe)

UPDATE:

  •  – April 16th, 2015 ~ [0.4] BugFix: fixed double ampersand escaping, causing & to go back on &.
  •  – April 15th, 2015 ~ [0.3] BugFix, Refactoring: Inconsitency in Places and Collections data caused undefined attributes in js. Splitted download file function from data elaboration. Escaped characters in KML file.

TO UPDATE YOUR MOD: please drag again the bookmarklet from the project page.

Some days ago I went to Berlin to meet with one of my old LILiK friends, @ieghermaister. Since he is developing some part of the Here maps engine and one of its best feature is the ability to download maps completely offline, he suggested me to download it on my phone and save the Berlin map.  Once in Berlin, he wanted to suggests me some places and we struggled a bit finding a way to import or share favorites between users, or export them. We managed it by manually passing lists of urls in a shared document. Not smart at all.

Apart from this things, I really enjoyed the application, reminding me of the good old Ovi Maps symbian application, which rescued me from practically everywhere. So I decided to have a look at the web app code and see what was under the sheets.

Good News: AngularJs

Opening the inspector revealed a nice surprise. The guys at Here used AngularJs to develop the web interface, which gave me a good space of  maneuver . First thing to do was to understand how to inject my code inside the app.
A simple overloading of the methods did not actually work, because angular after being loaded parse the DOM, including <script> tags, and store them in cache.

What about injecting other <script> tags and bootstrap again angular? That seemed a nice way to proceed, but will angular like the new tags?  Simple answer,no. Caching is still in the middle of our process and will interfere with new code loading.

Let’s try to inject it in another way. What about the good old iFrames(arsh…)?
It could be possible to remove the content from the DOM, insert the HTML code with here.com modified inside the iframe before angular bootstraps. That was a nice plan, except that iFrame .load()  method implementation is a little unpredictable and will not fire at the expected time. No luck for us.

So what’s the solution? Here it is. Remove everything form the DOM, request here.com page with ajax, modify the received content with our features,  load it inside the DOM and bootstrap angular on the entire document. Easy peasy.

To start all this sequence I’ve decided to use the naive web object known with name of bookmaklet. To whom of you who don’t remember what these things are, basically it’s a bookmark with javascript inside the href (avoiding XSS problems!).
Hitting the button will load the main script from another source, an httpS one.

Let’s Code

Here is the bookmarklet source code:

The script I wanted to inject is on github, but since they’ll not let you use it as a resource, I hat to use this awesome project rawgit.com (give it a try, really).
Here is the injected code that will make the whole magic, with escaped strings removed because of web publishing, fully available with strings on github:

 

The (long) strings I’ve removed are the modified modules, controller and templates which will be inserted at the end of the retrieved html.
If you are curious about what’s inside, the beautified and unescaped version is available on github repo.

Backup Feature on Collection Tab

Backup Feature on Collection Tab

Basically, it introduces two new features:

Custom Names

Custom Names

  • show places custom name (when available) instead of regular name and enable a

backup feature that will download a KML file with all your favs organised by collection (ohh yeah).

It would have been very nice to have an import feature, but as we all know, time is a bitch. Code is released under MIT license, so if you want to implement it just fork the project on github and make  a pull request.

What’s really good about it? That it’s not actually a hack. It uses the same data the app is using, modifying it, and doing this it respects its behaviour. Simply, amazing.

 

Have fun modifying your angular apps!

 

433MHz module attached to the Arduino

433MHz module attached to the Arduino

Recently it happened frequently that some of our friends needed to take their bikes inside our garden after a nerding night. It was a boring situation where we had to constantly find the remote, open the gate, wait for them to take their bikes and then open again. Well, it wasn’t so boring, but you know, we needed a reason.
So, we tought about our last project where we successfully made arduino talk with Raspy using NRF24L01+ and dumbly toggling lights. This time we decided to go a step further and open our gate using, guess what, our smartphones.

Learning

At first we tried to achieve our goal using the standard RCSwitch library (and sketches) to listen the original remote’s signal, but as you might imagined, we poorly failed.
The wiring was pretty simple:

The Receiver wiring

The Receiver wiring

Keeping in mind that we were working with a fixed combination remote, we initially guessed a number of different problematics, even that our receiver was not operating in the same frequency as the remote. After some attempts (where we’ve found the frequency was right by looking the quartz),  we decided to hack a bit the original receiver sketch, forcing the arduino to receive the signals even if they were not conformed to the standard it used to know:

When we’ve uploaded the sketch we were able to see some raw messages. Actually, they were not messages, but these numbers on the serial monitor represent the interval between the changes of state (from 0 to 1 and reverse).

I suppose these numbers being just a representation of the signal noise. So, while listening with the arduino,  we’ve pressed the button on the remote and BABOOM, here is what came out:

A lot of very nice numbers…   What helped a lot understand what was going on was the link in the arduino sketch which translate these numbers in a more understandable form (yes, it’s a squared wave):

Squared wave

Squared wave

As you may noticed, the values (in microsecond), except  for the first one being really long, are doubles of ~320 µs. I suggest to approximate the unit value (in our case 320 µs ) to the average of one interval, since the signal is surely disturbed by the uninsulated components of the arduino, and because of the usb cable, even by your bad boy computer.

Tuning and Speaking

Once we successfully received the message we had to send it back to the gate. We tried to use the message raughly received by the arduino, but we found out that we had to tune it a bit to make it work, maybe because of some latency or noise.

Try/Guess Environoment

Try/Guess Environoment

We setted up a try/guess environment (pic above) with two arduinos, one with the 433 Mhz receiver we’ve setted up earlier and the other one with the twin transmitter module. We kept editing and sending the message untill we obtained the same message on the receiver as we were getting by the original remote.

The Transmitter wiring

The Transmitter wiring

In this process we’ve found out two important fact:

1- The initial long length (11672 µs in our case) was received completely wrong, while the others were in the range of ±20
2- Our message was not completely transmitted (it was actually missing the last 3~4 intervals)

For the first problem we just tuned it easily with some tries, but the other  was  a little bit more complicated, which we roughly solved by sending multiple times the last intervals (if you have any better solution feel free to suggest!).   Remember that to avoid misinterpretation by the gate receiver, the message has to be sent by the arduino at least 4 times.

Please note that some part of this sketch are taken from another sketch which we don’t remember where we took. If you are the author, please send us a mail with the link to your website and we’ll be glad to write your name and a backlink.

After all the final sketch resulted as following:

Raspberry Integration

As I said at the beginning, the whole project was meant to give our friends access to their bike with their smartphones, so we decided to use the previous project we made about switching light using a node.js web app.

Sketching

The sketch is pretty easy and it’s a mix from the switching light post and the one we’ve used to open the gate:

Wiring

For the wirings, refer to the following picture:

NRF24l01, Arduino and 433

NRF24l01, Arduino and 433

Node application for Raspberry

Since we recently upgraded all the software, we could easily adapt our previous application to the new shiny remote. Here is the link to the Github repo.

To install it please follow the instruction on the switching light article, in particular the The Node.js Lamp Application section.

Circle Animation Concept

Circle Animation Concept

In the latest months I’ve been working on a great open source project called MySensors, which is basically a home automation center based on different hardware configurations. While working on the user interface, I’ve also designed a new logo which quickly evaluated in a nice animation concept.
Since I’m a huge fan and supporter of CSS3 animations, I’ve decided to implement it using the “smooth” and “fast” technologies brought by the third version of cascading style sheets.
So finally I had the opportunity to test on the field which was the fastest, most affordable and cross-compatible way of implementing an animation.
To simulate a job situation, I’ve dedicated no more than 2 hours for each method. After having a look at the static picture, let’s begin this experience in the bravest way.

I’ll do it all and only with css3!

Well, as you can see from the picture, “painting” this image using only css is not that hard. For example the inner circle is nothing more than a div .innerCircle with border-radius property set at 50% and overflow one set to hidden. The content of the .innerCircle is a pie with 8 coloured slices. Each slice is a triangular div rotated by a certain amount of degrees, so they will finally appear as a freak coloured circle.
We all know how to implement a triangular div.Mix our triangles with some trigonometry and they are correctly rotated.
Now we give the right dimension to the circle and… BABOOM. Depending on which browser you are using, you may see horrible white lines between the triangles (webkit and firefox sometimes) or 1px wrong triangle height(webkit too) or why not, everything looks ok, but the circle is, well, simply not so circle (webkit and firefox).

See the Pen Ffrce by Edoardo (@edoardoo) on CodePen.

Well, it looks like this is definetely not the way of implementing our animations, but why? After researching a bit (don’t forget that time is a key factor in our job) I’ve seen some bugs reporting on the webkit rendering engine and even, if I remember correctly, somewhere on firefox mdn. They concerned some weird renderization of rotation while using, and abusing, the border property. Having a little search on stackoverflow confirmed my sensation of instability. No matter which translate 3d option or GPU acceleration you are using, it doesn’t always render correctly.

Vector Power Activated!

Ok, doesn’t matter, I’ll go with the SVG way. It will be fun scaling it like a five storey building. Let’s prepare 3 vectorial pictures like the following:

Full composition of the three SVGs

Full composition of the three SVGs

Then we write down some code and using the css3 rotation animation we’ll make it dance, finally. Nice, very smooth and scalable like hell (if you didn’t yet, zoom in and out the original like I’ve done for the latest 20 minutes). What about the real usage of this animation? If we have a look at the code we see that width and height, even if are set as scss variables, are still fixed. This means that if we want to use it in a production environment we’ll need to prepare some dimension classes, let’s say for example, .small .medium and .large, and we’ll be forced to implement a new class every time we need different dimensions. In other words, it’s scalable by an infinite factor, but every time we use it we may need to introduce a new piece of code. Possible solution: use the pictures with the img tag instead of background could solve the width and height problem, but… time is fleeting!

See the Pen Loading Animation MySensors by Edoardo (@edoardoo) on CodePen.

Oh yes, sprite it!

There’s still one last approach that I would love to consider: the sprite animation.
Basically we prepare a sprite with all the frames, and then we change the position background at the right speed to have the animation effect. Yes, it’s the same as the old vintage super 8 ( and all the analogic ) films.

The sprite is created with After Effect and a little help from the good old friend ImageMagick.
First we import the pictures inside AE. Then we add animation keyframes concerning the rotation of the the three images. Finally we export the the video result as PNGs frames (with alpha channel).

To make a unique sprite we go to the folder where all the frames have been exported and we launch:

[/crayon]

The final result is the following:

See the Pen Bdyaj by Edoardo (@edoardoo) on CodePen.

It looks pretty nice, but we still need to change manually the dimension when needed and after all, it doesn’t look that smooth, if compared with the svg version.

My reaction on 1.71 megabyte

My reaction on 1.71 megabyte

So I was thinking Ok, but it’s still very stable and… WHOOOT?. That’s the moment when I’ve found that this sprite, since it’s 128px width with about 180 frames weights 1.71 Mega Byte.

Final Conclusions

I’ve tested three of the most interesting ways of implementing the animation’s concept, and what I’ve found is that there’s no one good way of implementing animations. Each animation has it’s own particular implementation and complication. I’ve spent almost two days testing them to have a point of reference where to start in the future.

Only Css3 way:

It’s nice, smooth and fast, but it could happen very quickly to become what I love to define CSS porn. A lot of weird workarounds to make work something which is not so ready, yet. If it starts to be too much time consuming because of bugs or strange renderization, it’s time to think about something else. Keep in mind that not all of yours visitors will have the latest Chrome or Firefox version.

Vectorial way:

Scalable like hell, extremely light (you could even make a little sprite vectorial image to limit server calls) but you’ll need to bang your head over a vectorial program for a bit. Anyway, it’s bloody sharp and smooth. This would be my main choice.

Kilometric sprite way:

It’s too damn heavy to use this kind of technique on desktop, don’t even think about it on a mobile. Surely it could be refined and weight even half the current size, but 0,8MB for one animation is way to much. Let’s give a positive point to this method. It’s strongly compatible, since it doesn’t rely on browser renderization (like SVG and CSS3 shapes).

Doesn’t matter which method you decide to use, it could be a good idea to have an equivalent fallback, like a gif, always in your pocket. Maybe it doesn’t look that smooth, but it works.

 

Well, did I talked about projecting the animation on a five storey building? Yes, I did…

Some months ago a friend of mine asked me to help him reaching a grid template to include in a wordpress project he was working on.  At the very first, we thought about using Twitter Bootstrap or some sort of templating css+js library. What was really annoying was the quantity of unnecessary code, for us,  we were including to make it work.

Then I decided to make it possibly using only css3, even without javascript. Actually it was not necessary to be that strict with myself at all, but I like this kind of challenges. Plus, the idea of not using javascript (at least for default browser configuration) was really intriguing me.

So, here is the final result (click on the picture for the DEMO):

Fluid Grid Layout

Fluid Grid Layout

 

Let’s have a look at the code (available on this GIT).

The HTML:

NOTE: pay attention to the absence of a space between the scatolo divs. It’s really important. Otherwise you’ll note a white space between the boxes (an hour of debugging…).

The CSS:

The layout is set to display 4 boxes on full width and then scaling down to 3, 2 and 1 column, depending on window width.
I’ve used the magintastic @media properties to achieve this behaviour.
The other key that makes everything works is the

display: inline-block

of scatolo divs, which will make the boxes to stay close to each other, displayed in line.
And yes, no float divs around (ooooh yeah!).

 

A little zooming effect to make it funny (and useful for my friend work) and it’s all done.

Again, the GIT and the DEMO.

Let me leave you with a question: what about make everything dirtier and achieve a super duper drag and drop?

Don’t forget to comment and share. All the code is under CC-BY-SA.

Have fun!

 

[Raspberry Pi - Arduino ]Lamp Switch[Raspberry Pi – Arduino ]Lamp Switch[/caption]
A month ago we planned to manage our Arduino irrigator (aka Irrigatorino) through the NRF24l01+ wireless  module. Our little project has been subjected to a little change, since we decided to make our life easier (buahahah…) and remote control a light over a browser (yes, mobile too). Surprisingly, a lot of people liked the little demo I’ve made with some raw code and asked for a tutorial, so here we are:

Ladies and (more probably) Gentleman, I’m glad to present  you the lamp driven by a browser switch!

Nothing new actually, but still exciting!

Arduino Nano 328 connected with NRF24l01+ module and Lamp

Arduino Nano 328 connected with NRF24l01+ module and Lamp (in the background)

Hardware:

To test the wiring we suggest you to use the ping/pong test you can find  in the RF24 libraries (both, of the raspberry and the arduino).

Raspberry Pi

The connection between the Raspberry Pi and the NRF24l01+ module was a little bit tricky, so you have to double ( or triple) check the wiring before giving up. Here is the wiring scheme, the Raspberry Pi is a revision 2, and the module is the + (plus) version.

Raspberry Pi (rev2) - NRF24l01+ Diagram

Raspberry Pi (rev2) – NRF24l01+ Diagram

Arduino

The setup is easy and similar to a mix of our tutorials about Irrigatorino and NRF24l01+ Tests.
Just keep in mind that you are playing with dangerous voltage, so if you get struck, it’s only your fault. I would suggest, anyway, to check if everything (especially the relay board) is working with a multimeter, before connecting to a real lamp.

Arduino Nano - NRF24l01+ - Lamp Diagram

Arduino Nano – NRF24l01+ – Lamp Diagram

NOTE ON PACKET LOSS:

If you are encountering problems while receiving or transmitting, like packet loss, consider adding a capacitor of 10 μF between the pin 1 and 2 of the NRF24l01+, with ground capacitor side on pin 1. You should do this on both the modules, on raspberry and arduino.

Capacitor on NRF24l01+

Capacitor on NRF24l01+

Software

Our plan to communicate between all this stuff is to use a Node.js application to run a binary ‘sudo ./remote  -m 81‘ and ‘sudo  ./remote -m 80‘  sending a message to the Arduino with the text 81 and 80 . The message is composed by pin identifier (8) and action to perform (0|1|2). After the action has been  read, all the other numbers identify the pin which the action refers to.

When the arduino receive it, it then sends back an acknowledgment packet to the raspberry with the same message (yeah, like a parrot), except for action 2, which will not perform any action, but will reply with actual state of the pin. In the meantime, if the message the arduino receive is 1  it will close a relay (turning on a light, like a good parrot), 0 will open it (I doubt a parrot could be so clever).

Sketching

The sketch for the Arduino Nano is nothing more than a Getting Started demo of the RF24 library. We just modified it to switch the relay on in case it receive a message with 1 as text, or open it otherwise. Of course you’ll need the RF24 library to make it work.

 

Enabling Raspberry Pi GPIO and Installing Node.js

First we enable the Raspy GPIO:

Method 2 (not tested, but should work):

Let’s install node.js.
If you don’t need the latest version you can install it from the repos:

Otherwise you can follow this instructions (under Ubuntu, Mint… section) to compile the latest version.

The Lamp Switch Application

For Raspberry Pi 2 users: some of our readers pointed out that this library is a bit outdated for the Raspberry 2 and it’s encountering some problems. Until we have time to update the article, please refer to this post on the Raspberry Official Forum to solve the “Preparing interface” stuck problem (kudos to Andrei).

What we need now is to write an application that will send a message to the arduino using the NRF24l01+ and the Raspi. So the first thing to do is download the RF24 library ported for Raspberry Pi.  I would suggest to use git.

Now let’s install the library:

At this point, with the RF24 library installed, you can use the compiled remote application or compile it yourself with make command:

If everything went well you should be able to turn on (and off) the relay at this point using the sudo ./remote -m 81   application, hearing the famous ‘click’ from the relay board.

 

The Node.js Lamp Application

At  this point the only thing left is to build a little node.js server and bind a click  on a client browser to an exec function on the raspberry server.

Since it’s more than just a file, we’ve placed  a link to the repository on github. All the code is commented, so I hope everything is clear.

We are using git submodule to add the base node application RemoteRaspberry.  So here is a list of commands to clone the repo:

Anyway, since we were a little bit confused on our first node application we’ve decided to write down a little note to help you understand:

lightSwitch.js   => is a link to the application  (remote.js) you need to run with “sudo node lightSwitch.js” (the sudo is NEEDED). This is the web server and will launch the client interface too.

  • views (folder) => contains the main layout and the basic template.

routes.js => contains the route to the template.

  • RemoteRaspberry (folder) => the basic node app, which contains:

  • package.json => required modules (with version) you need to run the application

  • node_modules (folder) => it’s an auto generated folder which contains the modules

  • public  (folder) => contains remoteClient.js, the javascript code loaded on the client and bootstrap folder for styling

  • remote.js => the actual node app

 

To run the application you need to:

 

Authors note (31/3/2014)

We love the way you support each other in the comments! It’s really a satisfaction for us.
We can’t be always here to answer your questions or doubts, and all your contributions are a really great value you add to this website.
Thank you all!

Update  (10/5/2014)

We’ve refined a bit the code, making it more clean and definitely more readable. All you have to do now to add new buttons, is to create a new button in the node app views giving it a data-command tag. The value of that tag will be automagically passed to the old switch -f  binary (now called remote -m). Of course you still need to tell arduino how to interpret the message.  No more c++ recompiling.  Plus, we’ve made the web interface give you a visual feedback when the raspberry receive the ack package from arduino.

 

Update  (27/8/2014)

Looks like the Rf24 library author has changed the folder’s name. I’ve tried to fix the article with the new names. Didn’t have time to check it yet. Let me know if everything is ok. Edo.

Update  (2/12/2014)

I’ve cleaned and updated the code to the latest RF24 libraries from TMRh20. I’ve managed to submit a bug (issue #46)of the RF24 lib to the TMRh20 github account, and apply the workaround he proposed.  Unfortunately it looks like the modules needs time between communications, it’s a known bug that right now we don’t have time to fix. If you would like to fork the RF24RaspberryCommunicator project, magically fix it and make a pull request, we would love it. Right now, since we do it for free, we don’t have time to fix it. Hope you like it.  Edo.

Update  (17/01/2016)

For the Raspberry Pi 2 users who got stucked at “Preparing interface” message, please refer tothis post on the Raspberry Official Forum .

 

Have Fun!

 

 

Arduino Gardening

Arduino Gardening

It’s a burning summer in Florence and I needed a solution to watering my little plants I have around the house.

Of course I had a look at some shops for a ready solution, but where is the joy of experimenting with an arduino?

First thing to do in this case is to know what you want, and where your project could drive you. It’s nice to fly high with ideas, but to make them affordable you have to take off first.

So here we are with our project/tutorial: a time programmed irrigator which will water my plants for 1 minute, once a day, on alternate days.

The whole thing costs around 25$ (we’ve bought almost everything from china).

What we’ve used

Wiring

Wiring Diagram

Wiring Diagram

Sketching

I wanted to make arduino water my plants on alternate days, so we had to add a little function ‘dayOfYear’ which will tell us (guess what?) the day of the year it is. Example: February 1st is the 32nd day of the year, and our function will return ’32’.

Maybe there was a better solution, or it was already implemented, but this way was faster for our purpose.

If the day number it’s even and the time correspond to what I’ve set, it will close the relay (and the valve will open).

We’ve used the RTClib (with the little edit I mentioned about ‘dayOfYear’) to control and read the RTC.

The Sketch

The Function We Added

We have modified the class DateTime in RTClib.h as follow:

 

and added  the following function to RTClib.cpp:

 

Possible Developments

As you’ve seen this is a really stupid implementation, but it was on our purpose to make it stupid and not including any sort of display.
In fact, the main project is a little bit bigger than just a programmable Garduino (as someone calls it).

What we have in mind is to make the Garduino just an interpreter for our garden architect “Mr Rasp Gardner”, a raspberry pi which will communicate with the arduino using the NRF24l01+ module we tested here. As you can imagine, this drive us to an intelligent gardener, a nice web interface, statistics and much (much) more.

 

One of the first thing to implement, apart wireless communication, could be a simple hygrometer which will tell us if the plants have actually been watered. Maybe next week.

 

Looking around for ideas on my site edoardoo.com (which is now restyled, have a look! ), I’ve decided to implement something that was pretty easy in my mind, just an animated falling lamp from the ceiling of the browser.

The completed animation

The completed animation (click for the demo)

 

DEMO – GIT

Doing some researches I’ve seen that actually it was not easy at all. So I’ve thought about slicing the problem in little isolated problems:

  1. The wire 
  2. The lamp body
  3. The light
  4. Details (eventually)

1) The Wire

Structure

The wire problem is how to implement it. In fact, in canvas 2d technology there isn’t a way to draw  a “boned” object, like a rag doll, or a rope. Using 3d modelling, which can easily implements some sort of physic,  was absolutely out of time budget and maybe an over sized solution.

What is, in the end, a rope? Actually it’s nothing more than a bunch of points glued together. Drawing a rope point-by-point could be extremely heavy to compute for a browser, I don’t want to imagine making them react to some sort of physic.

Rope made by segments

Rope made by segments

So I’ve thought about simplify the problem for the browser interpreting the rope like a bunch of segments, which react together following some physic rule.

Physic

I wanted to give my rope/wire a realistic movement based on gravity and inertia. After googling a bit, I’ve found one of the video gamers master piece technique: verlet integration.

This is not the place to discuss about how verlet integration works, because  it could be really dispersive and, most of all, since this is a basic technique for game developers, you can find thousands of places around the web with beautiful tutorials (link to my favourite at the end of the section).
I’ll limit to say that verlet integration give us the physic rules we need, i.e. equipped with:

  • inertia
  • gravity
  • constraints between segments (of the rope)

I refer you to read this awesome and really clear tutorial on GameDev about verlet integration.

Here is the functions I’ve used:

 

 

2) The lamp body

Structure

To draw the lamp I’ve used an image of an industrial lamp.

Industrial lamp

Industrial lamp

I’ve preloaded it, letting the animation begin only when loading is complete.

Then drawn  it with a simple

 

Physic

The lamp has a physic related to the movement of the rope, of course. But how to extract the lamp movement from the rope it’s attached by? I’ve just used a little trick.
I’ve calculated the angular coefficient of the line passing by the last point of the rope and 18 points before the last. This is the angle the lamp should have, or at least it looks something good.

 

 

3) The light

The light coming out of the lamp can be implemented in a lot of ways. From an image drawn on a context, to a triangle drawn in javascript and filled with a gradient, ending, why not, going out of the canvas, using some css3.

I’ve used the one where I was more comfortable with, maybe not the most elegant solution: draw a triangle.
The reasons of this decision are intrinsics inside the initial draft of the project. In fact, at the beginning I thought about a lamp already turned on, falling down from the ceiling and oscillating in the meantime. For this reason, the light had been able to be rotated to accomplish the lamp angle.

The easier way to implement this was to take the same angle of the lamp and rotate the light, using javascript.

Another good reason to implement the light in a dynamic structure, was the possibility to grab the lamp and move it (awesome, I know), option that has been abandoned due to a lack of time.

 

4) Details

After the structure with a working physic was done, it was just a matter of polishing.

Rope

To make the rope looks better I’ve removed the dots used to identify the segments and applied an horizontal gradient.

 

Lamp

To give the lamp a more realistic effect I’ve created two version of the same object, one turned on and the other one turned off.

 

Lamp turned off and turned on

Lamp turned off and turned on

Going a little bit further, with the risk of being some kind of pathetic, I’ve added some metallic sound to the oscillating lamp.

Light

Using an alpha gradient instead of a full colour make the light look more familiar.

Again, with the risk of being pathetic, here is the sound of a blinking neon turning on, synced with the three flashes of the lamp.

Environment

As everyone knows, the devil is in the details. The first thing that come in my mind when I think about an industrial lamp, or a good light effect in general, is dust. What gives you the impression of light is the colour, of course, and the dust particles you can see through light beams.

So I’ve created two layers of dust, one with bigger  and one with smaller particles, and I animated them  at different speed (with some CSS3), creating a parallax effect. You can  barely see it, like in real life.

Dust

Dust

Possible developments

All the code has been implemented in a very short period of time. It can be absolutely improved (using sprites for pictures, cleaning the code, add resizing, etc…).

One of the possible feature which has been partially implemented is the possibility of grabbing the lamp and release it, making it oscillating (I have no idea of what to do with the sound here). The biggest problem I’ve encountered was the lamp going over the screen top, or starting to react in a really weird way when the  release point was too far from the origin.
A special thanks goes to the author of this post which pointed me in the right way.

 

Playing with some css loading animations, I’ve noticed that they were absolutely awesome! They were smooth, vectorial and mobile friendly. So I thought about the classic loading animation we all know, the rotating arrows.

Loading Arrows

Loading Arrows

The whole animation is pretty easy and made in two different steps:

– draw the arrow
– rotate it with a line of CSS3

So the most annoying part:  drawing the arrow.

 

We (me and Lorenzo), divided it in these steps (assuming our arrowhead is an equilateral triangle by the length of X ):

The code is well commented, so if you want to skip this part just look at the code.

–  draw an arc (which is the body)
 POINT A:  at the end of the arc (point E ) find the point at X/2 distance on the perpendicular of the tangent of the point E, and draw a line between  E and A.
–  POINT B:  then  (the most horrific part) find the 2nd point of the arrowhead (look at the code) and draw the line between A and B.
–  POINT C:  do the same as the 2nd step, but in the other direction, and draw the line between B and C.
–  draw the line between C and E.

Arrow with letters

Arrow with letters



Time to make the whole thing rotate with a CSS3 animation:

obviously with some html :

and then the demo:

Just a little piece of code I’ve written to create a slide between pictures in css3 and a little bit of jquery. Use it wherever you want if you like it.

Click on the picture to see it slide.
NOTE: this has been implemented to slide in sync with scrolling. If you just need to slide between pictures, you could use a CSS3 animation!

 

With a group of friends we decided to explore the wireless side of arduino. Searching a bit on google we found a nice and really cheap 2.4GHZ module, the NRF24L01+ module for about 2.60 euros a couple (what the heck do you need just one for?).

NRF24L01+ module

NRF24L01+ module

 

To make it communicate with the other arduino the first thing to do is use the right pinout scheme, which must match the library pinout (of course).

pinouts taken from http://arduino-info.wikispaces.com/Nrf24L01-2.4GHz-HowTo    (dupon color coded)

NRF24L01+ pinouts

NRF24L01+ pinouts

24L01Pinout-800

24L01Pinout-800

 

We decided to use for our first test the RF24 library (click here for github page), but the devices were not working. Actually they were not communicating correctly. An arduino was transmitting but the other one was not receiving or sometimes it was not sending back the ACK packet.

We’ve spent a bunch of hours, checking dupons, changing arduinos (one of them was actually malfunctioning), changing the radio module and even changing pinouts (who knows… mystic events happening), changing cables.

Then, at 4AM, I decided to start from scratches. Following this (awesome) guide from [maniacbug] I downloaded again the RF24 library, uploaded the GetStarted sketch to the arduinos, connected the radios, and everything was working! 

The only reason I can imagine is something about a corrupted library (was from another source) , outdated files, or a divine intervention from Stallman

Will post again on evolving projects.

 

 

 

 

 

Arduino repaired

Arduino repaired

Last night, after spending hours experimenting how to make two arduinos communicate wirelessly with the nrf24l01+ module, I finally succeeded in my intention. I just toke a video of the (unbelievable ) event, and suddenly the serial monitor on one of the arduinos suddenly crashed.

Guess what happened? Yes. The arduino touched they keys on the table and 5v and GND pins have made love with sparkles.

Symptoms:

2v on 5v pin
– power led on half brightness (I like to call it ‘sad led’)
– arduino perfectly works with external power (VIN pins)

Diagnosis:

– Your D1 diode is dead (sorry!)

Good solution:

replace the diode with an equivalent  MBR0520LT1 0.5A 20V schottky diode
(but maybe they will ask you 5 cent for the component and 13 euros for shipping…)

Rude solution:

remove the diode and close the circuit

ATTENTION: your usb port will be not anymore protected, which means you could burn your computer usb port, if something bad happens!

As you can see from the first photograph in the post, I didn’t have the time to find an equivalent diode…

Here some pictures to clarify.

Diode MBR0520LT1

Diode MBR0520LT1

 

Diode in position (inside circle)

Diode in position (inside circle)

Diode in position (inside circle)

Diode in position (inside circle)

I was at LILiK today, helping a friend of mine preparing a project for promoting the LILiK Day.
The project, really interesting, is about a browser version of the famous game “Fruit Ninja” working on real fruit. Crazy, right?

Actually, to make the fruit explode you have to touch real fresh natural fruit connected with a wire to the pc where this game run.

It’s just a prototype, but this is the first preview:

Fruit Ninja Clone

Fruit Ninja Clone

I thought it could be awesome to build an explosion effect using some tricky HTML5  with CANVAS.

 

Shooted particles

Shooted particles

Searching here and there on the web, I’ve found something good and put everything together here (DEMO after the code):

Let’s try the effect here:

DEMO

 

 

So I was at LILiK , our nerds lab at University, and we were preparing some slides for the LILiK day, an event we made to promote our lab. My slides title are “to Css3 or to jQuery? that is the question…” and I decided to make a little demo to show how they cooperate together.

What a better example than a cult…

batman preview red phone

batman preview red phone

 

 

…like BATMAN!

 

Batman Logo

Batman Logo

I’ve tried to include some css3 feature, like animations and some new properties.
I’ve added even a good old fashioned sound taken from an episode of the old Batman tv show with html5 <audio> tag.

Everything glued together with some strong javascript.

 

First the code and after the demo.

 

 

The DEMO

 

Have fun, and don’t forget to use when you need some help.

 

c5b72_facebook-comments

 

While developing a website for a client, he asked me to include facebook comments instead of standard wordpress form. After searching around for a bit I’ve found a great plugin: SEO Facebook Comments .
What really makes it good for me is that is easy, fast hold a copy of  all the comments in the wordpress database (wow!).

The main point, after finding a good plugin was to be sure it was correctly displayed in my theme. It was not, of course, but the hard point, as all web designers know, is that the comment form is generated inside an iframe. Which means you can’t modify, for security reason, the style or the content of the iframe. What is called a cross-site protection.

After all what I needed was just to make it fit my article div and stopping it to eat 1280 pixels in height (what?!) on mobile devices.

Here are the css rules to make it works (as today 22/04/2013 ):

Write me if they don’t work anymore, because thanks to facebook, classes changes frequently.

Happy styling!

 

Few days ago a friend of mine, a good photographer, asked me to help her building her website. I told her the fast and dirty way to do that was to buy a theme on theme-forest.com and mount it on a wordpress on my hosting. We looked together for a good looking theme and we ended up with Keres .

After buying it, we discovered it was missing one of the most natural feature you would like to find on a galleries website:
the galleries index
or a page where there are all your galleries with a skin picture and the gallery name.

 

Keres Theme

Keres Theme

I decided to help her and after a lot of headaches understanding the theme structure  and 4 hours I ended up writing some code.

This code is nothing more than a template, which will display your galleries in a simple grid of 4 columns. It will only works for galleries with masonry template, because I didn’t have the time to make it universal.
If you use a different theme for galleries edit line 207 with your template name. It will not work if you use different themes for each gallery (cpt. Obvious).

Create Categories for Galleries:

Use a plugin to enable categories on pages. Like “Ninja Pages, Categories, and Tags“.

Set categories as children of the main category ‘Gallery’, like in this picture:

 

Nested Categories

Nested Categories

List all the galleries (display just one pic each):

Create a file called “template-archive-gallery-4.php” (just a name) in the folder of your theme.

Copy inside the following code:

 

Create a page called Galleries (check the permalink, make it nice), and assign the template we’ve just created.

 

List galleries of one category

To list galleries of one category we have to add a shortcode:

[lenotta_catlist lenotta_cat_name=”fashion”]

Then we create a page with this shortcode for each gallery. Be sure the name check the slug.

Add this code to functions.php to create the shortcode:

 

 

It’s far away to be super efficient, but it works.

And here is the result:

 

Galleries Index

Galleries Index

I also edited a line of css because (don’t ask me why) it was not showing correctly:

On file  css/screen.css line 1256 the orginal is  : “margin-right: 15px;”  and the modified is “margin-right: 10px;”.

Hope the author don’t mind if I publish this, and feel free to use my lines of code however you want.

Happy coding!