Jan 29 2012
Jan 14 2012
Arduino OLED Library
Arduino is an open source hardware platform that allows designers, developers, and anyone to create amazing things with a little bit of electronic know-how.
4D-Systems make a line of small OLED Display screens that work great with the Arduino. I created my own Arduino 4D Systems OLED Library for this piece of hardware though. This Library would help me, and anyone else looking to harness the power of these small OLED screens. It covers all the primary screen drawing functions, placing text and doing SD memory card operations. Once added and compiled in your Arduino IED you can initialize
OLED myOLED = OLED(7,8,2500,57600);
myOLED.DrawLine(ax, ay, bx, by, color );
What’s been really cool now is seeing that other people are using it and developing from this base. The link below is to my github repository as well as someones cleaver use of my library to make a small Oscilloscope.
Jan 9 2012
CSS Animation with jQuery – jAnimate
This is a simple jQuery plugin that animates the Background property of a CSS Class. It’s set up to be pretty versatile, and with some understanding of jQuery configurable for any situation. Try it below, the UFO is using a four frame CSS sprite image with the jAnimate script applied.
a.ufo{
background:url(images/ufo.gif) 0px 0px no-repeat;
display:block;
height:125px;
margin:0px 10px 0px 0px;
overflow:hidden;
width:125px;
}
The CSS sets our initial properties of the animating object including sprite size, image URL and other presentation properties as we see fit. With a CSS Sprite based image the jQuery function now moves our background set at 0px top and 0px left by 125 pixels. Doing this fast enough creates an illusion known as persistence of vision or POV.
$('.ufo').jAnimate({
'frameSize':'125',
'frames':'4',
'speed':'90',
'style':'h',
'repeat':'loop'
});
Using jQuery we jump x pixels either vertically or horizontally to the next frame based on the initialization call. When calling the function the plugin will find all elements with the .ufo class and add the mouseover & mouseout events and attach the animation script to that element. You also have a few optional parameters to determine if your CSS Sprite is tiled vertically or horizontally (‘style’:'h’) and if it loops or bounces from start to finish (‘repeat’:'loop’).
Check out the full source code at http://github.com/pjkarlik/jAnimate.
Jan 2 2012
Welcome to byte-mechanic
Hi there, my name is Paul J Karlik and I am a Front-End Developer and Manager working in downtown Chicago. This site is both my personal and professional blog about my work, hobbies and everything else that I like to do.