just another web log

01 Jun 2014:
improving the flog blogging system
It has been a while but I am always trying to improve the f-log experience.

I first setup iconv to remove rouge Unicode characters that sometimes get posted due to copy&paste errors.
iconv -f utf-8 -t ascii -c source.file > target.file

Then I installed tidy to try and pick up the stupid hand editing html errors that occasionally slip through.

Tidy picked up on things like, all my anchor tags should be ids and not names and that links should not have un-encoded spaces.
01 Jun 2014:
saying goodbye to the html5eyeball project
The html5eyeball project is finally complete.

Live demo with image cut-outs
Live demo with image cut-outs, eyeballs linked
Live demo twelve independent eyeballs
Live demo alter eyeball settings and see changes

Blog posts
birth of the html5eyeball project
eyeball scaling is number one
the importance of eyeball canvas layering
non linear circular scaling for a better eyeball
Lightning strikes a cord with veins in the html5 eyeball
tie up your pupil in an iris
html5eyeball highlights the highlights
Hating jQuery is overrated
auto offsets make eyeball life easy
html5eyeball settings and methods
spectrum jquery plugin saves the select your eyeball demo

On to the next thing ...
01 Jun 2014:
spectrum jquery plugin saves the select your eyeball demo
In the select your eyeball live demo the colours can be chosen thanks to the amazing http://bgrins.github.io/spectrum/ jQuery colour picker plugin.

It is very easy to use but I had a bit of an issue.

To set it up all you need to do is include the JavaScript and CSS files.

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://bgrins.github.com/spectrum/spectrum.css">
<script type='text/javascript' src="http://bgrins.github.com/spectrum/spectrum.js"></script>

Reading all about HTML5 input support I had set all the input tabs to "color" and "range".

<input type="color">
<input type="range">

"range" worked beautifully. Rendering a nice slider on compatible browsers and a simple text box on older setups.

Just the act of setting the colour pickers "input" tags to "color" and including the Spectrum files instantly made them all colour pickers, Hooray! The idea being that any new super shiny browsers that supported the 'type="color"' would show the browsers native colour picker. Then I could set the customisation settings in Spectrum and go happily on my way.

I set the "value" of of the colour pickers to the requisite default values including the highlights.

<input type="text" id="settings-h1-colour-colour1" class="colorpicker" value="rgba(200,200,200,0.4)">

Only to find the w3c spec requires the value to be a simple color type. No ALPHA! Shock horror. So now the colour pickers are of 'type="text"' which works fine for Spectrum.

Hopefully the w3c will fix this in the next version of html ;)
01 Jun 2014:
html5eyeball settings and methods
This final post in the series for the html5eyeball project we are going to run down the settings and methods available.

You can see most of the options in action in the select your eyeball live demo. The only setting you cannot change is the irisColours which defines the random set of colours used when you click the eyeball.
More examples of changing irisColours can be seen in the twelve eyeballs demo.

This is the string id of the element you want to contain the eyeball. It is set via the constructor and I can not think of a good reason why you would set it manually.

var eyeball = new Eyeball("eyeball");
<div id="eyeball" />

The size of the eyeball and its location are defined by the css for that html element.

Distance the iris is allowed to travel within the eyeball.

A value of "1.0" will permit the iris to travel from the centre all the way to the edge. "0.0" means the iris cannot travel at all.

In the html5eyeball cutout example travel is set to "0.5" to avoid the iris disappearing behind the eyelids. The twelve eyeballs demo has all the eyeballs travel set to "1.0" to allow full movement.

The default is to hide the layers that make up the eyeball. When set to true the canvas elements

are shown. "canvasMain" is the always shown and *is* the eyeball, the others have logical names.

FYI the names are not html element ids but css classes.

The markers define which way the eyeball is looking and how far the iris has travelled.
They were instrumental in the spikes(pun intended) that make up the history of the html5eyeball project.

marker triangles, looking at the mouse
marker triangles, looking at the mouse and exhibiting scaling.

As simple as "circle scaling" is, it is the one bit of the html5eyeball project I am most proud of. Without it, the iris and its movement looks flat, with it, the visual dynamic is transformed.
Read all about Circle Scaling elsewhere in the series.
plotting of a semi-circle on a 0.0-1.0 graph


Number of random lines that are projected from the centre of the iris.

Covered elsewhere in the series.

Initial iris colour.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

This is the colour that the iris lines fade to randomly, normally a highly transparent colour.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

Is the ambient iris colour where no eyeColour or irisOuterColour rendered pixels exist. Normally set to black.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

The central part of the background eyeball's colour, often white, takes up 75%.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

The next 10% of the eyeball background gradient.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

The last 15% of the eyeball background gradient, the edge.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

Colour of the veins.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

The width of the veins. Where "1.0" sets a line to have a 1px width, non-anti aliased. Any non whole number creates an nice smooth anti aliased result.

The number of times the vein algorithm will create a new branch. A value of "1" creates no branches only the initial single starting line.

WARNING! Setting high values will slow your computer down exponentially and as each branch gets shorter you will not see them anyway.

There is a detailed blog post about the veins.

many recursively drawn veins in a circle


Set to "1.0" the pupil will be drawn with a diameter of 1/6th the diameter of the eyeball.

When "setPupil()" or "setIris()" is called the pupil will be drawn twice its current size and then a 30 frames per second it will shrink back to its normal diameter(see above). The scaling algorithm uses the non-linear circle scaling method.

Colour of the pupil, I suggest black.

Defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

These two parameters define the location, size and appearance of the two highlights.

The setting is a JSON string defining
x horizontal location as a decimal of total width. e.g. 0.5 is half way.
y vertical location as a decimal of total height. e.g. 0.0 is the top.
width width as a decimal of total width. e.g. 0.5 is half the total size.
height height as a decimal of total height. e.g. 1.0 is the same as the full height.
colour1 defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0
colour2 defined as a JSON object with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

An array of colours used a a random pool when the "setPupil()" or "setIris()" method are called.

Defined as a JSON objects with "red", "green" and "blue" with values from 0 to 255 and "alpha" which is a value between 0.0 and 1.0

Called after the settings are correct, it will recreate all the required layers.

With no parameters centres the eye. Often called with the mouse coordinates to set the eye to look at the mouse location.

$(window).mousemove(function (event) {
    eyeball.doDraw(event.pageX, event.pageY);

(Example uses jQuery.)
The Cutout - linked demo passes an offset value to each eye to keep them linked.

    // linking offsets
    var linkOffsetX = 55;
    var linkOffsetY = 4;

    // trap mouse movements and cause updates
    $(window).mousemove(function (event) {
        eb1.doDraw(event.pageX - linkOffsetX, event.pageY);
        eb2.doDraw(event.pageX + linkOffsetX, event.pageY + linkOffsetY);

(Example uses jQuery.)
The linkOffsetX/Y values are specific to the location of the eyeballs in the photo used.

setIris() / setPupil()
When called with no parameters sets the iris to a random colour from the "irisColours" array. As this is truly random, there is a possibility that the colour chosen will the colour already in use.
If "animatePupil" is true then the pupil is animated(see above).
WARNING If "animatePupil" is false then the iris colour is updated but NOT redrawn, call doDraw().

No other methods are expected to be called from outside the Eyeball object, but I am not hiding them if you want to play. No documentation or future compatibility is provided for these.

Trouble shooting
If nothing shows and there are no JavaScript errors it is most likely that your html element that holds the eyeball is either, not visible, off screen or has no width / height set in CSS.

And that concludes the html5eyeball project series of f-log posts.
01 Jun 2014:
auto offsets make eyeball life easy
While creating the cutout example for the html5eyeball project I found that manually setting the "offsetLocationX" and "offsetLocationY" was painful.

You can see in an early JSFiddle that the large eyeball requires the offset

and the smaller one

These values represent the pixel values of the divs that contain the "eyeballs". But wait I set those in css ("top", "left"), can I not just get those values from css?

Well not in straight forward way. Although the values in that example are directly linked to the 0,0 point on the page I could not expect users of the html5eyeball project to have such simplistic html layouts.

provided many possible answers, but all failed the border width test.
The correct code was found as a comment linked to "very interesting article on JS coordinates" that explained that the standards
is supported by most browsers and IE8 and up.

Now as part of the "init()" call "getOffset" function is called
    // Get the pixel offset of the DOM element taking into account the page being scrolled.
// from http://javascript.info/tutorial/coordinates
eyeball.getOffset = function(elem) {
    var box = elem.getBoundingClientRect()
    var body = document.body
    var docElem = document.documentElement
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    var top = box.top + scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    return { "Top": Math.round(top), "Left": Math.round(left) }

That is able to populate the now internal "offsetLocationX" and "offsetLocationY" values and the "gaze" of the eyeballs automatically works.

The last post in the series will be a run down of all the settings.
loading results, please wait loading animateloading animateloading animate
[More tags]
rss feed



flog archives

Disclaimer: This page is by me for me, if you are not me then please be aware of the following
I am not responsible for anything that works or does not work including files and pages made available at www.jumpstation.co.uk I am also not responsible for any information(or what you or others do with it) available at www.jumpstation.co.uk In fact I'm not responsible for anything ever, so there!

[Pay4Foss banner long]