Cron's Web Tech Blog

Add Photoshop PSD & Illustrator AI folder thumbnails to all versions of Windows XP/2003/Vista/2008/7 32/64-bit

noreply@blogger.com (Ciarán O'Kelly) — Mon, 28 May 2012 11:11:00 +0000

This is great. Adobe have never bothered to provide thumbnail support for windows machines. I dont know if this is because they are technically incompetent, lazy or they are just trying to promote their bloated Adobe Bridge viewer application. Either way it bugs me, as users have been screaming for this no-brainer feature since photoshop first arrived on the windows platform in 1992. Yes that's 20 years ago. Anyway, I've been applying registry hacks and messing with dlls for years to get thumbnails going in windows explorer but I finally found this tool today which is a quick and simple solution that claims to work across all versions of both windows and Adobe CS.

The installer below makes windows automatically load thumbs for all versions of Photoshop and Illustrator in the normal windows folder view.

See note in the right hand frame if I helped you out! >>

First install one of these:

AFPL Ghostscript 8.54 32-bit (gs854w32.exe)

AFPL Ghostscript 8.54 64-bit (gs854w64.exe)

Then install this:

https://code.google.com/p/sagethumbs/downloads/list

...................
Thanks to Nikolay Raspopov for this!
https://code.google.com/p/sagethumbs/
SageThumbs Copyright (C) Nikolay Raspopov, 2004-2012. Web site: cherubicsoft.com/projects/sagethumbs

Simple Javascript Pie Chart using HTML5 Canvas tag

noreply@blogger.com (Ciarán O'Kelly) — Fri, 11 May 2012 11:57:00 +0000

I had a look around today for a handy pie chart that I could quickly drop into a new web app I'm working on and it seems there's a lot of bloated solutions out there. I like to keep things short and sweet so I found this one online and edited it to make it a bit more user friendly. Enjoy!

Please see right hand pane before copying my code >>


//ADD THIS BETWEEN YOUR HEAD TAGS OR TO AN EXTERNAL JS FILE:
var pieProps = new Object()

function pieChart(canvas, radius, percentages, n, colors) {
 var canvas = document.getElementById(canvas)
 var a = pieProps.a = canvas.getContext("2d");
 pieProps.colors = colors
 pieProps.i = 0
 canvas.width = 3.5*radius;
 canvas.height = 2.5*radius;
 x = y = canvas.height/2;
 a.font = "bold 12px Arial";
 var u = 0;
 var v = 0;
 for (i=0;i < percentages.length;i++) {
  v += percentages[i];
  W(i)(x,y,radius,u,v);
  u = v;
  a.fillText(n[i], x+radius+10, y-radius/2+i*18);
 }
}

function W(x,y,r,u,v) {
 var a = pieProps.a
 r ? a.beginPath() | a.fill(a.moveTo(x,y)|a.arc(x,y,r,(u||0)/50*Math.PI,(v||7)/50*Math.PI,0)|a.lineTo(x,y))
 : a.fillStyle = '#'+pieProps.colors[pieProps.i++];
 return W;
}
//ADD THIS TO YOUR PAGE SOMEWHERE:
<canvas id="c"> Your browser does not support the canvas element. </canvas>

//EXAMPLE USAGE:
<body onload="pieChart('c', 100, [70,25,15], ['Carbs','Protein','Fat'], ['CCCCCC','FFBF43','FF850D'])">

This code is adapted from http://reubencrane.com/canvas_pie.html

AS3 Load external flash SWFs into a queue to play in a consecutive sequence

noreply@blogger.com (Ciarán O'Kelly) — Fri, 23 Mar 2012 18:08:00 +0000

This script imports a text file from the local directory and imports all swfs listed in the text file to play on the stage sequentially, i.e. one after another. Its very useful for banner ads and other animations when you need to be able to slot new ads into the sequence.

You dont need to understand or edit the code at all to use this so I'm not going to post the actual code. Just a download link with some instructions:

Open the bannercontrol.fla and change the stage dimensions to the size you need.
Open swfsequence.swf and add any filenames you need to the sequence
Place any files you want to import into the same folder as the other files and let her rip!

Please see my note in the right hand pane before downloading the files >>>

Free Javascript for Rotating Website Banner or Fading Slideshow - standalone

noreply@blogger.com (Ciarán O'Kelly) — Thu, 26 Jan 2012 18:34:00 +0000

As flash becomes less widespread I've had more and more instances where I need to create website banners in Javascript rather than my old flash approach. Today I've decided to share my method with my adoring public (that's you).

This method is completely standalone and doesn not require jQuery or any other plugins or architecture. It has been tested and works in latest versions of all browsers.

View a demo here (right click to get the whole source at once) or view the step-by-step instructions below...

Please see my note before copying my code - thank you! >

Add this between your head tags. You can tweak the speeds etc in the BANNER SETUP section at the top.


//ROTATING BANNER BY CIARAN O'KELLY 2012 - BLOG.CRONDESIGN.COM
//BANNER SETUP:
var imageCount = 5;  //how many images in total?
var changeSpeed = 3;  //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25;   //animation frames per second
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id){
 return(document.getElementById(id));
}
function changeOpac(obj, opacity) {//change the opacity for different browsers:
 obj = obj.style; 
 obj.opacity = (opacity / 100);
 obj.MozOpacity = (opacity / 100);
 obj.KhtmlOpacity = (opacity / 100);
 obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage(){
 var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
 var nextImg = $('banner'+nextImgID);
 var lastImg = $('banner'+topImgID);
 var opac = 0;
 changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
 lastImg.style.zIndex = 2;
 nextImg.style.zIndex = 3;
 var fadeInterval = setInterval(function(){ //run fade on interval:
  if(opac < 100){//continue fade:
   opac += Math.ceil(100/(fadeSpeed*fps));
   changeOpac(nextImg, opac);
  }else{//end fade:
   lastImg.style.zIndex = 1;
   clearInterval(fadeInterval);
  }
 }, 1000/fps)
 topImgID = nextImgID; //prepare next fade
}
function startBanner(firstImageID){
 topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
 $('banner'+topImgID).style.zIndex = 2;
 changeInterval = setInterval(changeImage, changeSpeed*1000);
}

Add this to your stylesheet and tweak to your liking:


.banner{position:absolute; z-index:1; height:230px; width:720px; top:0px; background:#FFF; border:solid 1px #CCC}
.banner h1{position: absolute; bottom:20px; right:20px; font-style:italic; color:#444; float:right; width:50%; font-size:40px; text-align:right; line-height:100%;}
#banner1{background-image:url(banner1.jpg);}
#banner2{background-image:url(banner2.jpg);}
#banner3{background:#F90}
#banner4{background:#FFC}
#banner5{background:#99CCFF}

Add this to your html and tweak to your liking::


        <div id="banner1" class="banner">
            <h1>This banner fades between images</h1>
        </div>
        <div id="banner2" class="banner">
            <h1>It runs on a loop</h1>
        </div>
        <div id="banner3" class="banner">
            <h1>The images are actually div tags</h1>
        </div>
        <div id="banner4" class="banner">
            <h1>So they can contain text, colours or other content</h1>
        </div>
        <div id="banner5" class="banner">
            <h1>You can control the speed, the start image & number of images</h1>
        </div>

Finally, if you want the banner to automatically start, add this to your body tag. 1 is the id of the first image you want to show. Leave it blank to choose a random image.


<body onload="startBanner(1)">

Print CSS backgrounds in Google Chrome & Safari webkit

noreply@blogger.com (Ciarán O'Kelly) — Sun, 13 Nov 2011 22:26:00 +0000

Up until now it's been impossible, but a new fix published this week by the chrome team makes it simple for a site developer to trigger background printing using CSS...

Just add the following CSS rule to any element you want to print as it looks on screen (you need chrome 17 or higher for this to work):

If I helped you out, please see my note :) >>

-webkit-print-color-adjust:exact;

Javascript function for checking a variables type or empty/unset variables - similar to PHP's empty()

noreply@blogger.com (Ciarán O'Kelly) — Sat, 05 Nov 2011 21:11:00 +0000

I've been building on this one all week and I'm finding it more and more useful for quickly writing variable checks at the top of functions. You can use it to easily check if a var is defined or check if it is of a certain type. It's a work in progress but it's very handy. Check out the commented examples to get an idea of potential uses. Ideas for improvements/additions are welcome!

Please see note before copying my code>>


//CHECK TYPE OF PASSED OBJ:
function is(obj,type){
 switch(type){
  case 'array': case 'ar': //ARRAY:
   return(String(obj.constructor).indexOf('Array')>-1)
  break;
  case 'integer': case 'int': case 'number': //NUMBER:
   return((parseFloat(obj) == parseInt(obj)) && !isNaN(obj))
  break;
  default: //IS EMPTY:
   if(obj==null || obj==undefined || obj==' ' || obj==0 || obj==false || obj=="false" || obj=='' || obj=="\n") return(false);
   return(true)
 }
}
/*EXAMPLES:
returns true if myvar is a positive value (string, number, array, DOM element, etc):
if(is(myvar)){..continue with function...}

returns true if myvar is an array:
if(is(myvar,'array')){..continue with function...}

returns true if myvar is an integer or can be converted to an integer:
if(is(myvar,'int')){..continue with function...}
*/


//CHECKS IF ANY OF THE PASSED ARG(S) ARE BLANK OR FALSE OR 0 OR UNDEFINED:
function isempty(){
 for (var i = 0; i < arguments.length; i++) {
  if(!is(arguments[i])){return(true)}
 }  
 return(false)
}
/*EXAMPLE:
if(isempty(requiredVar1,requiredVar2,requiredVar3)){
       return(false);
}else{...continue with function...}
*/

How to repair Google Apps setup server errors

noreply@blogger.com (Ciarán O'Kelly) — Wed, 12 Oct 2011 16:21:00 +0000

I got a tip today from a friend of mine working in Google. A server error occurred during the registration of my new domain and I was left with no gApps and no tech support (anyone on gApps standard will notice there is absolutely no way to contact anyone remotely related to a google employee).

Anyway it seems the most common of these server errors is that the account you register with is not given admin rights. Here's the fix...

Please see note in right hand pane before or after trying this :)

Try this troubleshooter:

http://www.google.com/support/a/bin/answer.py?answer=143296 and select 'I never created an admin account'.

Follow the instructions to restore access!

Most simple/basic single level CSS dropdown menu without Javascript tutorial

noreply@blogger.com (Ciarán O'Kelly) — Tue, 19 Jul 2011 12:52:00 +0000

Sometimes when web demos focus on extended functionality, it's difficult to identify and extract exactly what you need for your own project from the examples. With beginners & newcomers to CSS in mind, I've put together this extremely simple dropdown menu & tutorial. You can take this skeleton and add styling and content for your own project. This menu auto sizes/auto expands to fit its content and could easily be adapted to add more levels, animation or fancy styling.

Check out the demo here

Step by Step:
1. Firstly you'll need to create some links. Here's some I made earlier. Copy the code below somewhere inside your body tags.
Please see the right hand pane before copying my code - Thank you! >>>


<ul id='menu'>
   <li><a href='#'>Colours</a>
     <ul>
         <li><a href='#'>Red</a></li>
         <li><a href='#'>Yellow</a></li>
         <li><a href='#'>Blue</a></li>
     </ul>
   </li>
   <li><a href='#'>Fruits</a>
     <ul>
         <li><a href='#'>Orange</a></li>
         <li><a href='#'>Apple</a></li>
         <li><a href='#'>Bananna</a></li>
     </ul>
   </li>
   <li><a href='#'>No Submenu</a></li>
</ul>

2. Next, you'll need to add styling. Copy the code below and paste inside your style tags or in your external stylesheet.


/*DROPDOWN FUNCTIONALITY*/
/*set up ul tags*/ 
#menu, #menu ul{ padding:0; margin:0}
/*set up a tags*/ 
#menu a{display:block;}
/*position level 1 links horizontally*/ 
#menu li{display:block; float:left;}
/*undo previous style for level 2 links*/
#menu li ul li{float:none;}
/*position level 2 links vertically and hide*/ 
#menu li ul{display:none; position:absolute; z-index:1}
/*unhide level 2 links on li:hover from level 1*/ 
#menu li:hover ul{display:block;}

/*DROPDOWN STYLING:*/
#menu{height:25px}
#menu a{color:#09F; padding:5px 10px 5px 10px;}
#menu a:hover{color:#0CF;}
#menu li{background-color:#FFF; border:solid 1px #CCC;  margin-left:-1px}
#menu li:hover{background-color:#F0F0F0}

3. Test it. Isn't that nice? Now change the links from step 1 and the /*DROPDOWN STYLING*/ section from step 2 until your menu looks as you'd like.

Tested in IE9, Chrome & Firefox but should work across all modern browsers.

AS3: Simple, Powerful String Find & Replace all instances function for Flash Actionscript. Similar to PHP's str_replace replacement.

noreply@blogger.com (Ciarán O'Kelly) — Sun, 17 Jul 2011 15:27:00 +0000

Exactly what it says on the tin!

AS2 version here

Please see right hand pane before copying my code - thanks! >>


//needle and/or replacement can be either a string or an array of strings:
function replace ( needle, replacement, haystack:String):String{
   var r=haystack;
   if(typeof(needle)=="string"){
    needle = [needle]
   }
   if(typeof(replacement)=="string"){
    replacement = [replacement]
   }
   while(replacement.length<needle.length){
    replacement.push(replacement[replacement.length-1])
   }
   for(var i in needle){
    r = r.split(needle[i]).join(replacement[i])
   }
   return(r)
  }
//SAMPLE USAGE:
trace( replace( "A", "X", "ABCDEFG" ) )  //outputs: XBCDEF
trace( replace(["A","B","C"] , ["X","Y","Z"], "ABCDEFG") )  //outputs: XYZDEF

AS3: Wave of values class function - produces incremental and decremental values

noreply@blogger.com (Ciarán O'Kelly) — Sun, 17 Jul 2011 14:39:00 +0000

Sometimes it's necessary to have a value increment until it gets to a certain point and then have it decrement again in a wave shape. A simple Math.sin() calculation will work in some cases but its not easy to control the increment using that method. This handy & simple class makes it quick and easy to do just this. There's lots of room for improvements & additions so feel free to post updates :)

Please see right hand pane before copying my code- thanks! >


package com.cron {
 
 public class valueWave {
  private var inc,startno,counter,max,min //counter is always>0
  public var num //latest value
  
  public function valueWave($min:Number=0, $max:Number=10, $increment:Number=1, $startno:Number=0 ) {
   if($max<$min){
    trace("valueWave ERROR: max must be greater than min")
    return
   }
   inc=$increment
   startno=$startno
   counter=$startno
   num=$startno
   max=$max
   min=$min
  }
  
  public function next(){
   if(max==0){return(num);} //disable if max and min are the same
   num = Math.abs((counter % (2*(max-min))) - (max-min)) + min;
   counter += inc;
   return(num)
  }
  
  public function reset(){
   counter=startno
  }
  
 }
 
}

//USAGE::
//the code above should be saved as [your root class path]/com/cron/valueWave.as
import com.cron.valueWave

var W=new valueWave(1,10,1,5);

addEventListener(Event.ENTER_FRAME,function(){
    trace(W.next());
})

//OUTPUTS:
5,4,3,2,1,2,3,4,5,6,7,8,9,10,9,8,7,6,5,etc

AS3 handy weighted random & rounding functions with decimal/floating point precision

noreply@blogger.com (Ciarán O'Kelly) — Sun, 05 Jun 2011 19:02:00 +0000

Like a lot of the "improvements" Adobe made to Actionscript with AS3, the Math.random() function is now a pain in the ass. It only generates a floating point number between 0 and 1 so 99% of the time, you need a few lines of code to get your random on.
With time saving in mind, I've written this weighted random function which makes beautiful randomness a lot handier to implement. For best results throw this in a class package and include it in every project.
Here it comes...

Please see right hand pane before copying my code >>


function round(num:Number, precision:int):Number{
   var decimal:Number = Math.pow(10, precision);
   return Math.round(decimal* num) / decimal;
}

function rand(to:Number, from=0, decimalPlaces=0, weightedRange=0, weightStrength=0):Number{
   var ret
   if(to == from){return(to);}
 
   if(weightedRange && Math.random()<=weightStrength){
      ret = round( Math.random()*(weightedRange[1]-weightedRange[0]) + weightedRange[0], decimalPlaces )
   }else{
      ret = round( Math.random()*(to-from)+from, decimalPlaces )
   }
   return(ret)
}

//USAGE:
rand(100)                   //return random number 0-100 INCLUSIVE
rand(10, -5)                //return random number between -5 and 10
rand(10, -5, 2)             //return random number between -5.00 and 10.00
rand(10, 6, 0, [0,5], 0.9)  //90% chance of returning number between 0-5, 10% chance of returning number between 6-10

SugarSync referral link - Better than dropbox

noreply@blogger.com (Ciarán O'Kelly) — Sat, 23 Apr 2011 18:51:00 +0000

If you dont backup your computer already, try this... It automatically keeps your documents synced to the web in case your computer dies someday. Its better than dropbox because you can choose any folders on your computer to backup and you get more space. You can also share any backed up file with friends/clients with a simple right click. You get 5.5GB free with this referral link (I get an extra bonus too so everyone's a winner). For the less tech savvy of you: just install it and it will ask you what folders on your computer are important. After that you can forget about it until your computer dies.

Heres the link: (for 5.5GB free cloud storage)
>> SugarSync referral

AS3 function to rotate a 2D or 3D MovieClip or Sprite around its center or change to any registration point

noreply@blogger.com (Ciarán O'Kelly) — Mon, 18 Apr 2011 11:39:00 +0000

OK here we go - I looked everywhere for this one but only found bits of code from various forums and blogs that were part of classes and packages and as such, full of dependent variables. Anyway, after a bit of advice from the very helpful community at StackOverflow and a bit of tinkering, she's up and running!

The function below will rotate a DisplayObject around any point on a 2D or 3D plane. This is particularly useful for rotating around an object's center point so this is the default behaviour. Enjoy!

Please see right hand pane before copying my code >>>



//ROTATE AN OBJECT AROUND A POINT OR ITS CENTER POINT:
function rotObj(mc, angle, axis="Z", regX='center', regY=0, regZ=0) {
 mc.z=mc.z //workaround for matrix3D bug
 if (axis=="X") {
  axis=Vector3D.X_AXIS;
 } else if (axis=="Y") {
  axis=Vector3D.Y_AXIS;
 } else if (axis=="Z") {
  axis=Vector3D.Z_AXIS;
 }
 if(regX=='center'){//get center point:
  regX=mc.x+mc.width*1.5
  regY=mc.y+mc.height*1.5
  regZ=mc.z
 }
 mc.transform.matrix3D.appendTranslation(-regX,-regY,-regZ);
 mc.transform.matrix3D.appendRotation(angle, axis);
 mc.transform.matrix3D.appendTranslation(regX,regY,regZ);
}
//SAMPLE USE:
rotObj(myMC, 45)  //rotates myMC 45 degrees around its center point
rotObj(myMC, 45, "Y") //rotates myMC 45 degrees on Y axis around its center point
rotObj(myMC, 45, "X", 200, 300) //rotates myMC 45 degrees on X axis around the point 200,300

Max/MSP Javascript "find object" - lazy dollar function

noreply@blogger.com (Ciarán O'Kelly) — Mon, 14 Mar 2011 15:17:00 +0000

The second function in my "Making Max JS less crap" series, this function scans all objects in the patch and all subpatches and returns a reference to the object with the specified scripting name: It's basically a lazy man's version of my dollar function which means you dont need to give every patcher a scripting name. The downside is it (probably) runs a bit slower. Enjoy!

Please see right hand pane before copying my code>>


function _$(id){ //search through all max objects:
    tempobj=0
    tempname=id
    this.patcher.applydeepif (_$act,_$scan);
    delete tempname
    return(tempobj)
}
function _$act(obj){
    tempobj=obj
}
function _$scan(obj){
    if(obj.varname==tempname){
        return(true)
    }else{
        return(false)
    }
}

//USAGE:
_$("myButton").message('set','new text!') //find the first object anywhere in the project that has scripting name myButton and send it a message.

Max/MSP Javascript: Dollar Function - Returns a reference to a Max Object in a patch/subpatch

noreply@blogger.com (Ciarán O'Kelly) — Mon, 14 Mar 2011 14:54:00 +0000

I started using Max this month and was simultaneously impressed with its power and simplicity and frustrated by it's cumbersome interface. I quickly checked out it's javascript capabilities and became much more comfortable. JS allows you do simple operations quite quickly that would take a tonne of parsing objects which use up space and lead to a messy patch.

That said, JS in Max is really a slightly ugly cousin of browser based javascript. Calls to objects are long winded and basically everything is a bit head wrecking!

So here we go: the first in my "Making Max JS less crap" series... The infamous dollar function! All you need to do to access a max object is give the object a scripting name in the inspector* and then use: $('scriptingname')

Please see right hand pane before copying my code>>


function $(stringref){
    stringref=stringref.replace(/parent/gi, "parentpatcher")
    var path=stringref.split('.')
    var obj=this.patcher
    for(i in path){
        if(path[i]=='parentpatcher'){ //up 1 level:
            obj=obj.parentpatcher
        }else{
            obj=obj.getnamed(path[i])
            if(i!=path.length-1){ //down 1 level:
                obj=obj.subpatcher()
            }
        }
    }
    return(obj)
}


//USAGE:
$("myButton").message('set','new text!') //access 'myButton' object in current patcher
$("parent.myButton").message('set','new text!') //access 'myButton' object in parent patcher
$("myPatcher.myButton").message('set','new text!') //access 'myButton' object in child patcher
$("parent.myPatcher.myButton").message('set','new text!') //access 'myButton' object in sibling patcher

* If you're not bothered giving every patcher a unique scripting name in the inspector, try my lazy dollar function instead.

UPDATE:
A good way to use this function is to use Luke Hall's include script. Save his script into your jsexternals folder, save my functions into your project folder as basefunctions.js (or something similar) and then you can simply use include(this,"basefunctions.js") at the top of every JS file you use. Thanks Luke - this is awesome!

Actionscript 3: Better Random Function & Better Rounding Function

noreply@blogger.com (Ciarán O'Kelly) — Sun, 13 Feb 2011 22:19:00 +0000

I was amazed at how lame the rounding and random functions are in AS3 so I've written 2 simple functions to add much needed functionality. Enjoy...


//Returns a random number between from and to inclusive
function randomNo(to:Number,from=0,decimalPlaces=0):Number{
 var ret=roundDecimal(Math.random()*(to-from)+from,decimalPlaces)
 return(ret)
}
function roundDecimal(num:Number, precision:int):Number{
 var decimal:Number = Math.pow(10, precision);
 return Math.round(decimal* num) / decimal;
}
randomNo(2) //returns 0, 1 or 2
randomNo(20,18,2) //returns anything from 18.00 to 20.00

Actionscript/Javascript Colour mode conversion functions - convert HSB/HSL/HSV to RGB to web HEX color or to flash matrix

noreply@blogger.com (Ciarán O'Kelly) — Fri, 11 Feb 2011 16:45:00 +0000

I wrote/found/tweaked these conversion functions today to convert between the most common colour modes. it was very difficult to find a solid source for converting colours online so I thought I'd post them here for the world. They should work in actionscript 2 & 3 and could easily be tweaked to work in php, python or any other language. Here goes...

Please see the right hand pane to say thanks!


function hex2rgb(hex:uint):Array{
 var rgb:Array = new Array();
 rgb[0] = hex >> 16;
 rgb[1]= hex >> 8 & 0xFF;
 rgb[2] = hex & 0xFF;
 return rgb;
}

function rgb2hex (rgb:Array):uint{
 var hex = rgb[0] << 16 ^ rgb[1] << 8 ^ rgb[2];
 return hex;
}

function hsb2rgb(hsb:Array):Array {
 var red, grn, blu, i, f, p, q, t;
 hsb[0]%=360;
 if(hsb[2]==0) {return(new Array(0,0,0));}
 hsb[1]/=100;
 hsb[2]/=100;
 hsb[0]/=60;
 i = Math.floor(hsb[0]);
 f = hsb[0]-i;
 p = hsb[2]*(1-hsb[1]);
 q = hsb[2]*(1-(hsb[1]*f));
 t = hsb[2]*(1-(hsb[1]*(1-f)));
 if (i==0) {red=hsb[2]; grn=t; blu=p;}
 else if (i==1) {red=q; grn=hsb[2]; blu=p;}
 else if (i==2) {red=p; grn=hsb[2]; blu=t;}
 else if (i==3) {red=p; grn=q; blu=hsb[2];}
 else if (i==4) {red=t; grn=p; blu=hsb[2];}
 else if (i==5) {red=hsb[2]; grn=p; blu=q;}
 red = Math.floor(red*255);
 grn = Math.floor(grn*255);
 blu = Math.floor(blu*255);
 return (new Array(red,grn,blu));
}

function rgb2hsb(rgb:Array):Array {
 var x, f, i, hue, sat, val;
 rgb[0]/=255;
 rgb[1]/=255;
 rgb[2]/=255;
 x = Math.min(Math.min(rgb[0], rgb[1]), rgb[2]);
 val = Math.max(Math.max(rgb[0], rgb[1]), rgb[2]);
 if (x==val){
  return(new Array(undefined,0,val*100));
 }
 f = (rgb[0] == x) ? rgb[1]-rgb[2] : ((rgb[1] == x) ? rgb[2]-rgb[0] : rgb[0]-rgb[1]);
 i = (rgb[0] == x) ? 3 : ((rgb[1] == x) ? 5 : 1);
 hue = Math.floor((i-f/(val-x))*60)%360;
 sat = Math.floor(((val-x)/val)*100);
 val = Math.floor(val*100);
 return(new Array(hue,sat,val));
}

function hsb2hex(hsb:Array):uint{
 var rgb=hsb2rgb(hsb);
 return(rgb2hex(rgb));
}

function hex2hsb(hex:uint):Array{
 var rgb=hex2rgb(hex);
 return(rgb2hsb(rgb));
}

//flash only function: I dont have an inverse for this. maybe someone could post one in the comments?
function hex2matrix ( hex:uint, alpha:Number ){
 var matrix:Array = [];
 matrix = matrix.concat([((hex & 0x00FF0000) >>> 16)/255, 0, 0, 0, 0]);// red
 matrix = matrix.concat([0, ((hex & 0x0000FF00) >>> 8)/255, 0, 0, 0]); //green
 matrix = matrix.concat([0, 0, (hex & 0x000000FF)/255, 0, 0]); // blue
 matrix = matrix.concat([0, 0, 0, alpha/100, 0]); // alpha
 return matrix;
}

//USAGE:
trace('YELLOW HSB: 60,100,100 in hex mode is:'+hsb2hex([60,100,100])) //see note below *
trace('YELLOW HEX: FFFF00 in HSB mode is:'+hex2hsb(0xFFFF00))

I should note for beginners that most functions return an array of values. To access the individual hue/sat/brightness or red/green/blue values, use array syntax like so:


hsb=hex2hsb(0xFFFF00);
hue=hsb[0];
sat=hsb[1];
val=hsb[2]

* I should also mention that flash converts hex values to numbers so hsb2hex([60,100,100]) will return 16776960 which is the same as 0xFFFF00 as far as flash is concerned.

Javascript: Simple, Drag & Drop element class - multiple draggable elements on one page.

noreply@blogger.com (Ciarán O'Kelly) — Mon, 23 Aug 2010 02:08:00 +0000

I found a tonne of these drag & drop functions online but they were all either too big & bloated or relied heavily on external libraries. The one I did find that was small and usable triggers chrome bug 7423 because it captures the mousedown event for the page. So I've written my own and posted here for your convenience.
See Demo (Internet Explorer ain't supported)
Tested in Firefox and Chrome. IE will take some tweaking

THE FILE: (Please see right hand pane before download!)
http://www.crondesign.com/projects/downloads/dragable.js

IN HEAD:
<script src="dragable.js" type="text/javascript"></script>

ON PAGE LOAD OR AT FOOT OF PAGE:

AS2: Simple, Powerful String Find & Replace all instances function for Flash Actionscript. Similar to PHP's str_replace replacement.

noreply@blogger.com (Ciarán O'Kelly) — Tue, 29 Jun 2010 16:30:00 +0000

Exactly what it says on the tin!

AS3 version here

Please see right hand panel before copying>


//needle and/or replacement can be either a string or an array of strings:
_global.str_replace=function(needle, replacement, haystack:String) {
 var r=haystack;
 if(typeof(needle)=="string"){
  needle=Array(needle)
 }
 if(typeof(replacement)=="string"){
  replacement=Array(replacement)
  
 }
 while(replacement.length<needle.length){
  replacement.push(replacement[replacement.length-1])
 }
 for(var i in needle){
  r=r.split(needle[i]).join(replacement[i])
 }
 return(r)
}
/*SAMPLE USAGE:
trace( strreplace("A","X","ABCDEFG") )  //outputs: XBCDEF
trace( strreplace(Array("A","B","C"),Array("X","Y","Z"),"ABCDEFG") )  //outputs: XYZDEF
*/

Resize a Movie Clip containing a mask by getting dimensions of visible bounds/area and compensating width/height

noreply@blogger.com (Ciarán O'Kelly) — Fri, 18 Jun 2010 03:02:00 +0000

This was a head wrecker and took me most of the day today. Actionscript does not see Movie Clips as we do and considers invisible content to be part of the MC. As such, when you try to resize an MC that contains masked content which extends beyond what we consider to be the edges of the MovieClip, flash makes a balls of it.

To counteract this I've written and rewritten a double function which resizes your clip based on the visible area rather than what flash considers the bounds. Here it comes...


//Returns width or height you need to use to resize an MC containing a mask.
//include visibleOrigSize if you know it to cut down on processing power
function maskCompensate(mc:MovieClip, prop:String, desiredSize:Number, visibleOrigSize:Number){
 var oX=mc._xscale;
 var oY=mc._yscale;
 mc._xscale=mc._yscale=100
 if(visibleOrigSize==undefined){
  var visibleOrigSize=(prop=="_width" ? getVisibleBounds(mc).width : getVisibleBounds(mc).height)
 }
 var diff = mc[prop]-visibleOrigSize
 var percentIncrease = desiredSize/visibleOrigSize
 mc._xscale=oX
 mc._yscale=oY
 return(desiredSize+diff*percentIncrease)
}
import flash.display.BitmapData;
function getVisibleBounds(mc){
 var myBitmapData:BitmapData = new BitmapData(mc._width,mc._height);
 myBitmapData.draw(mc);
 bounds = myBitmapData.getColorBoundsRect( 0xFFFFFFFF, 0xFFFFFFFF, false );
 bitmapData.dispose();
 return(bounds)
}

//sample usage:
this._width = maskCompensate(this,"_width",500) 
this._height = maskCompensate(this,"_height",300)

Universal ALL DOMAIN rewrite for non-www to canonical/www using htaccess or https.conf on apache server

noreply@blogger.com (Ciarán O'Kelly) — Thu, 13 May 2010 03:05:00 +0000

This took me a few days to get right. The lack of feedback from testing, along with browser caching and the general head wrecking-ness of Regex make htaccess rewrites like this a total pain in the ass. Anyway thanks to the guys over at the alt.apache.configuration newsgroup, I've managed this:

The code below will rewrite anything on your server that does not have a www. at the beginning to the same thing with a www. prefixed. Urls beginning with an IP address are left alone so that http://IPADDRESS/~username/ access still works.

Subdomains are also redirected to their www. equivalent however they should still resolve and work normally. (untested)

This is great if you run your own server and want to redirect everything at once or if you just want a template that you can use for all your websites without editing or altering.

My code works without too much Regex with makes it a lot less memory intensive than most "universal" mod_rewrites out there.

The code below works on APACHE servers.

The code can go in a file named .htaccess (yes that's an empty filename with a dot htaccess extension) in the root directory of your website like so:
Please see right hand pane before copying >>>

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.
RewriteCond %{HTTP_HOST} ![0-9]{1,3}\.[0-9]{1,3}\.
RewriteRule !"" http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L,NC]

Or if you have access to httpd.conf - the apache configuration file, the following will be much easier on the server.* Just add this at the bottom of /etc/httpd/conf/httpd.conf ** and restart.
Please see right hand pane before copying >>>

<Directory /home/*>
RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.
RewriteCond %{HTTP_HOST} ![0-9]{1,3}\.[0-9]{1,3}\.
RewriteRule !"" http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L,NC]
</directory>

* The htaccess version is parsed every time the server is accessed while the httpd.conf version is parsed once when the server is started up.
** These paths and instructions work on my VPS running Ubuntu. The paths might be different for other distributions.

PHP: Ultimate get/fetch RELATIVE PATH function between 2 folders/directories/files/pages or root dir

noreply@blogger.com (Ciarán O'Kelly) — Thu, 06 May 2010 02:54:00 +0000

I wrote these functions today when everything I found online that attempted the same job was either too bulky, or too restrictive. It took me flippin ages - far longer than it should have! But it has huge functionality and will be a great addition to the arsenal. The main function relpath basically calculates the relative path from anywhere to anywhere on the same domain. Possible uses are listed below:

Get relative path from the current page to the root directory of the local domain (rootpath)...
```
echo relpath(); //outputs ../../ or something similar
```
Get relative path from the current page to any other file/folder on the domain...
```
echo relpath("/scripts/javascripts/jsmin/min.js"); //outputs ../../jsmin/min.js
```

Get relative path from any file/folder on the domain to any other file/folder on the domain...

echo relpath("/scripts/connect.php","/scripts/javascripts/jsmin"); //outputs ../../scripts.connect.php

Full functions with details and comments below.

URL Input Formats:

To save as much coding time as possible, relpath is very sympathetic and will accept absolute or relative urls with or without query strings, trailing slashes, www subdomain or http protocall as in examples below:

http://www.website.com/scripts/javascripts/jsmin/min.js
http://website.com/scripts/javascripts/jsmin/
www.website.com/scripts/javascripts/jsmin
website.com/scripts/javascripts/jsmin
/scripts/javascripts/jsmin/min.js (relative path from root dir)
/scripts/javascripts/jsmin/min.js?p=compress
NOT: scripts/javascripts/jsmin/min.js (needs beginning / )

The Functions:
Please see right hand pane before copying! >>



//RETURN RELATIVE PATH $from FILE/DIRECTORY TO $to FILE/DIRECTORY:
//default returns relative path from current page to root directory
function relpath($to=0,$from=0){
 $from=pathFromRoot($from,1);
 if($to){
  $basename='/'.basename($to);
  $to=pathFromRoot($to,1);
 }else{//return path to root dir:
  return(str_repeat("../",count($from)));
 }
 
 //find point where paths branch by discarding mataching directories:
 for($i=0;$i< count($from);$i++){
  if($from[$i]==$to[$i]){
   unset($from[$i]);
   unset($to[$i]);
  }
 }
 //compile result:
 $result=str_repeat("../",count($from)); //write relative path to the branching point
 $result.=implode('/',$to); //write path to target direcory
 return($result.$basename);
}

//CONVERT A RELATIVE PATH TO AN ABSOLUTE PATH:
function abspath($relPathFromRoot=0,$domain=0){
 if(!$relPathFromRoot){$relPathFromRoot=$_SERVER['PHP_SELF'];}//defaults to current page (calling script)
 if(!$domain){$domain=$_SERVER['HTTP_HOST'];}//defaults to current domain
 return "http://".$domain.str_replace(array('http://','www.',$domain),'',$relPathFromRoot);
}
//RETURN STRING URL OR ARRAY OF DIRECTORIES FROM ROOT: dir1/dir2/etc OR array("dir1", "dir2", etc);
function pathFromRoot($tofile=0,$returnArray=0,$remote=0){
 $tofile=abspath($tofile);
 $path=trim(parseUrl($tofile,'path'),'/');
 return($returnArray ? explode('/',$path) : $path);
}

//RETURNS ARRAY OF COMPONANT PARTS OF AN ABSOLUTE URL:
function parseUrl($url,$returnKey=0) {
 $r  = "^(?:(?P\w+)://)?";
 $r .= "(?:(?P\w+):(?P\w+)@)?";
 $r .= "(?P(?:(?P[-\w\.]+)\.)?" . "(?P[-\w]+\.(?P\w+)))";
 $r .= "(?::(?P\d+))?";
 $r .= "(?P[\w/]*/(?P\w+(?:\.\w+)?)?)?";
 $r .= "(?:\?(?P[\w=&]+))?";
 $r .= "(?:#(?P\w+))?";
 $r = "!$r!";// Delimiters
 preg_match ( $r, $url, $out );
 $out['path']=str_replace($out['file'],'',$out['path']); //hack fix
    return ($returnKey ? $out[$returnKey] : $out);
}

NOTES:
This is for Unix servers but could be tweaked for Windows servers.
Functions could possibly could do with some performance improvements (I'm open to suggestions!)

PHP: Quick & handy browser sniffer/checker function/class

noreply@blogger.com (Ciarán O'Kelly) — Sun, 02 May 2010 16:46:00 +0000

Yes, you can check your visitor's browser using PHP! What's more, it never goes out of date! It automatically updates to recognise the lastest browsers. As much as I'd like to, I can't take credit for this one - it's the work of Jonathan Stoppani and makes browser sniffing with PHP an absolute breeze.

This class (named Browscap) is a great alternative to PHP's native get_broswer function which requires manual regular updating of a browser.ini definitions file. Instead, Browscap intermittently imports the latest browser definitions from browserproject.com so that your scripts are always up to speed with the latest browser information.
Instructions and download below...

I've made a few edits to Jonathan's great class to make it a bit easier to implement. All you need to do is download the files below and add these two lines to your PHP script:


require("path/to/checkbroswer.php");
$browserInfo=checkbrowser(); //returns array of info on the browser (print_r($browserInfo) to view)

//alternatively, if you dont need all that array data:
$browser=checkbrowser('Browser'); //returns Case sensitive browser name (Firefox,Chrome,IE,etc)
$version=checkbrowser('Version'); //returns browser's version number (3.6, etc)

For details on what is returned in the array check out the Browscap website

» Download the modified Browscap file

NOTE: This is quite slow for one visitor every 10 days (which I can live with!) as it has to import the definitions file. Otherwise all data is cached and it should be nice and fast.

Javascript: Auto-Expand a form's select box on hover/mouseover

noreply@blogger.com (Ciarán O'Kelly) — Sun, 02 May 2010 01:00:00 +0000

Productivity is all about cutting down mouse clicks. With this in mind, I've written this function to open/close a html dropdown menu on mouseover/out. It's currently more of an idea than a usable function, so it might need some testing & tweaking to work cross browser in a real web environment but the basic principal is here to get you started.
Try a demo »

The Function: Please see right hand pane>


function toggleSelectBox(selbox){ 
 if(selbox.size>1){//HIDE:
  selbox.size=1;
  selbox.style.position='static';
 }else{//SHOW:
  selbox.size = selbox.options.length;
  selbox.style.position='absolute';
  selbox.style.height='auto';
 }
}



<select id="type" name="type" onmouseout="toggleSelectBox(this)" onmouseover="toggleSelectBox(this)">
<option value="">opt1</option>
<option value="">opt2</option>
<option value="">opt3</option>
</select>

Javascript: Set or get URL/URI/src/href of an iframe or frame/frameset function

noreply@blogger.com (Ciarán O'Kelly) — Wed, 28 Apr 2010 14:16:00 +0000

This function simply targets an iframe or frameset and retrieves or changes it's src or href attribute.

Tested in FF 3.6 and Chrome (might need some tweaking for IE)

The Function: (Please see right hand pane before copying my code - thank you! >>>)


/*loads a url in the specified frame/iframe or returns the loaded url if url arg is blank
frame  //DOM reference to a frame/iframe or string ID of an iframe in this document
url  //url to href to. ignore or set=0 to return current url of page
*/
function framehref(frame,url){
 if(typeof(frame)=='string'){//find iframe (will not find a frame):
  frame=document.getElementById(frame);
 }
 if(frame.tagName=='IFRAME'){//iframe:
  if(url==undefined){ return( frame.contentWindow.document.location );}
  frame.contentWindow.document.location.href=url;
 }else{//frame:
  if(url==undefined){ return( frame.document.location );}
  frame.document.location.href=url;
 }
}

//sample usage:
alert(framehref('myIframe')); //alerts the current location of the iframe 
framehref('myIframe',"http://www.google.com/"); //sends the iframe to google homepage
framehref(top.right,"http://www.google.com/"); //sends the right hand frame (in a frameset) to google homepage