Playing with Arduino LCD

Saturday evening and I finally found some time to play a bit more with my Arduino Starter Kit bought around Christmas. Actually I was playing with basic stuff when I bought it, but the connection wires shipped with starter kit are actually not so good for fast prototyping - they are very stiff, so I ordered some flexible ones - be sure to get yourself these as it will make your Arduino first steps much easier.

I wanted to go with some more complexity this time and went with LCD Hello World example. There was fairly lot of pins to connect to Arduino, breadboard and LCD, and that’s really fun. if you wear a glasses like me and are farsighted, prepare for some struggle. Good thing, nothing was broken or burnt even when I connected wrong pins. You will need to have Arduino IDE to run the examples, which I did - loaded the basic C++ LCD demo. I needed to resolve the issue being unable to upload the demo on Arduino - comm port option (USB really) was greyed out - quick fix was to run arduino with sudo.

Arduino LCD demo.

I wondered if it would be possible to write the Arduino programs with JavaScript. Happily, Google returned some nice results: there is Johnny Five Node.js library for that. Another one I checked was Cylon.js.

The board setup for it seemed different a little bit, so I rewired whole board just in case, trying hard to hit right pins under poor light. But hey, at least is not soldering :) . Eventually it worked, loading the LCD demo. Uploading to Arduino went smoothly, all you need to do is run node yourProgram.js and it will do it for you. Again some work was needed to obtain control over comm port though. There are numerous of methods provided by the library, and you can even define your own characters (5 x 8), something like:

1
2
3
lcd.createChar("duck2", [0, 12, 29, 15, 15, 6, 0]);
lcd.useChar("duck2");
lcd.clear().cursor(0, 0).print(":duck2:");

…where array of numbers is of course 8 rows of 5 bits.

So after all that was fun and inspiring, lots of ideas coming to mind, I’ll be sure playing with it more in the future; be aware that Internet of Things might be the next big thing!

Arduino LCD demo Node.js.

Angular Material framework quick overview

Angular Material, at the time of writing, is at 1.0.5, and in pretty stable shape. It’s official angular implementation of the Google Material design. Google’s own framework (not middle man JavaScript framework layer implementation, but pure library), is Polymer - I did a bit of a digging and here’s how they implement components. There are some other implementations - like Materialize - also standalone framework, or MaterialUI - tailored for React framework.

Good thing about Google Material in general is the huge Book of Standards that the Google design team wrote, specifying in detail how these components are to be used, and why it’s good for UX that way. That could help a lot, embracing, what I suspect is, enormous work done by Google team.

Google Material is taking over the Google products one by one, so it is likely that most of the internet users are used to its look and feel. That’s double edged sword - you might, or might not want to look like Google.

It’s look and feel is flat, tidy, colorful, with large sized components; buttons and other interactive elements have distinct “Ink” ripple effects - it is mobile first, yet gone desktop too. There are lots of “touchy” animations. In a certain way, it’s a bit “playful”, bright, optimistic. On the very edge to be too playful for certain kind of businesses.

Talking about Angular Materials itself, they have implemented most of the components defined in Google Material “Bible”. Be warned though: there is no table implementation, and it has been constantly postponed, and at the time of writing, it’s sitting in the Backlog. If you need tables, you will be forced to roll your own, or use something like this or that, which are not fully stable, yet usable implementations - risking, of course, that Angular Material team can roll proper implementation at some point.

You will need to install separately Roboto Webfont and Material Icons - they are not shipped wit the library. This can be somewhat painful. Also, if you need to use non-canonical icons, you might want to look at the mdi - extended library of Material icons - including community created ones.

I was hoping I will be given set of classes and hoping to write as less CSS possible. Don’t get me wrong, I love CSS, but I prefer to have set of predefined tools for adjusting the details. That’s not the case - you will need to introduce your own CSS tweaks if you want extra customisation. But here goes the magic - use of Flexbox instead of Grid system!

It’s the cutting edge technology, and you will need to forget about “older” IE support without painful fallbacks. It is a pain and joy to play with a flexbox, and it is in heart and soul of Angular Material.

Also, they rolled out really good support for responsive layout by implementing variety of responsive breakpoints.

You can easily define your overall colour scheme look and feel by setting it up at the Angular app config time:

1
2
3
4
5
6
7
8

angular.module('myApp', ['ngMaterial']).config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange')
.warnPalette('deep-orange')
.backgroundPalette('lime')
});

… and your components will automagically start to get the colours as per specs.
Of course, you will need to write some CSS if you want to introduce some “heresy” in the Google devised UI rules. But, you could define your own set of colours and hues too - in fact, I found a nice resource on the net - Palette Generator - you might find it very useful.

Directives are very well done, I did not encountered major issues working with them. They are made with flexibility in mind, they are “transcludable“ so it’s easy to mix your angular workings with them. Also, for complex components there are services which add a layer of extra control on components. They are very useful, configuration code is easy to use. Overall, I got impression of high JS code quality.

Documentation provided is for the most of the time good, with ability to jump between source and examples, and they use CodePen to provide them.

Team at the Github is working diligently, lot’s of development going on; they answer to the issues quickly and efficiently.

I recommend giving it a test drive - it is well worth looking into it if you want Materials in your Angular app. Check it out.

Jolly balls

While ago I wrote, just for fun, bunch of greenish blue (!) balls bouncing around in a “box” - nothing more than a div. Actually, not a canvas or svg animation, just plain JavaScript DOM manupulation. They bounce and also pulse, and it’s amazing how today’s DOM trickery is running quite smooth :)
See it in action here

You coan enter number of balls you wish to bounce around, and play with offset parameter. Click generate to start the show.

Code itself is not a rocket science, you can see it here

Revamped site

After a while it was time to give some love to this forlorn place in the cyberspace junkyard. Platform of choice is Hexo, nice nodejs module for generating static files in a micro-blogging environment.

Fairly easy to set up, build, deploy and maintain.

1
alert("Horray! Time to learn some Markdown!");

;)