Change Requirejs, Less compiler and CoffeScript versions in Play Framework

Hi there,
I've found myself struggling with Play 2.2.1 for one (really? just one???) reason: it comes with Less 1.4.2, that's a great CSS compiler but...

...according to the official Less' website, they've released the 1.7.x version!

And what's wrong with 1.4.2? Some bufixes and improvements, as usual, but what I really love is the possibility to pass rulesets to mixins as arguments: definitely great!

The biggest problem is that in our development stage we've frozen the project to Play 2.2.1 and there's no way to upgrade it. So, digging into Play's files I've discovered this wonderful folder:

your-play-path/framework/src/sbt-plugin/src/main/resources

there you can find less-x.x.x.js, coffeescript.js and r.js: just overwrite them and run

your-play-path/framework/build

then leave the console open and type
> compile
> publish-local

...enjoy!

Pietro

Converting HTML hex color to RGB value

Hi everyone,

I had to solve a little problem: converting hex color value (like CSS/HTML color code #FFFFFF) to a blender friendly color code (a triplet of float numbers, range(0,1) like (1,1,1)) and back again.

Ok: this is not THE problem, and maybe lots of you will be laughting reading this, but this has been MY BIG problem for 30 minutes. And I've got to thank a lot Alvaro Moe from OpenTechSchool workshops (Berlin), a very skilled Python and Javascript developer who is spending his days at Campus Party Europe with me. So... let's go!



1 - From HTML color to CG color:

Taking this light-blue color HTML hex code #1075f5 is built this way:

# - the identifier
10 - the value for Red channel
75 - the value for Green channel
f5 - the value for Blue channel

Each couple can handle 0-255 value. As standard, if we have one number only we've to add '0' in front of it to keep six element rule. In this example we won't take care of alpha value because it's not handled by 'color picker' element but you can add it easely.

First of all, let's convert a simple HEX couple (the first, RED channel) to a FLOAT number; Javascript gives us a nice instruction in order to do this:

• red = parseInt("10", 16);

Now we need to map the 0-255 value to a 0-1 scale. Let's divide it for 255:

•   red = parseInt("10", 16) / 255;

Let's do it for each channel:

• red = parseInt("10", 16) / 255;
• green = parseInt("75", 16) / 255;
• blue = parseInt("f5", 16) / 255;

Ok, but <color_picker>.value is a string. I've got to parse it to get the single couples, removing '#' symbol and slicing the couples:

• splitted = hex.substr(1);
• red = parseInt(splitted.slice(0, 2), 16) / 255;
• ...splitted.slice(2, 4)...
• ...splitted.slice(4, 6)...

Genau! Now we're ready to build our function:

2 - From CG color to HTML color:

And now, let's invert the process!
Our function will take as input an array on float numbers, ranged between 0 and 1, and will return a string.
The Javascript function to translate a number to a string value is this:

• red_hex = red.toString(16);

By the way, we'll have an array and we need to multiply the value for 255:

• r = (colors[0] * 255).toString(16);

Next step: checking if the value is less or more than 'F'. Why? Because we need to build a string.length = 6 plus the '#' character elsewhere we'll not perform a correct conversion.

• if (r.length == 1) { r = '0' + r };

As last step, let's compose the final string:

• hex = '#' + r + g + b;

We're ready to build our new function:

As I've written before, I'm not handling alpha channel because I don't need it but you can do that in few minutes if you want.

Greetings from Berlin and Campus Party Europe!
Pietro