UserPixel http://www.userpixel.com Sat, 12 May 2012 19:17:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Javascript Lorem Ipsum function http://www.userpixel.com/1123 http://www.userpixel.com/1123#comments Thu, 26 Apr 2012 13:02:17 +0000 Alex Hanif http://www.userpixel.com/?p=1123 I needed a quick and small function that generates random place holder text with a specified minimum and maximum length. Here is the result (shared for free):

/**
 * This function returns a text string that is between "from" to "to" characters long and can be used as a text place holder.
 */
function loremIpsum(from, to) {
	if ( typeof this.loremString == "undefined" ) {
		this.loremString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse turpis nulla, tempus \
		vitae cursus id, facilisis sit amet turpis. Pellentesque vestibulum condimentum orci at congue. Cras mole\
		stie urna ac erat vulputate nec ornare ipsum egestas. Nulla mauris urna, mattis at mattis in, vestibulum \
		sit amet massa. Quisque posuere dapibus arcu id malesuada. Phasellus in porta est. Fusce sit amet dui orc\
		i, sed viverra eros. Sed vulputate elementum odio vel gravida. Sed ut velit a dolor pellentesque cursus a\
		 vitae mauris. Nunc ipsum eros, ultrices nec lacinia ut, iaculis eget metus. Sed ac sem non turpis gravid\
		 a suscipit. Praesent interdum ante a libero pharetra eu volutpat lectus ornare. Sed vestibulum dapibus l\
		 igula sed rhoncus. Nam placerat faucibus scelerisque. Pellentesque habitant morbi tristique senectus et \
		 netus et malesuada fames ac turpis egestas.";
	}

	if ( typeof from == "undefined" ) {
		from = 0;
	} else {
		from = Math.min( from, loremString.length );
	}
	if ( typeof to == "undefined" ) {
		to = this.loremString.length;
	} else {
		to = Math.min( to, loremString.length );
	}

	if ( from > to ) {
		var tmp = from;
		from = to;
		to = tmp;
	}

	length = from + Math.floor( Math.random() * ( to - from ) );

	return this.loremString.substr( 0, length );
}

Here is a slightly improved version that is attached to JQuery as a function:

// This plugin fills the text with Lorem Ipsum
(function( $ ){
	$.loremIpsum = function ( length ) {
		if ( typeof this.loremString == "undefined" ) {
			this.loremString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id enim sed eros imperdiet rutrum molestie " +
			"quis ante. Proin lobortis bibendum mi vitae commodo. Aenean malesuada nisi at lorem malesuada ac posuere nulla molestie. Cura" +
			"bitur mi nibh, gravida id sollicitudin nec, faucibus vitae mi. In quis mauris in nunc interdum tincidunt. Nullam placerat vol" +
			"utpat lacus, sed blandit dui vulputate eu. Sed lectus lacus, luctus sed pellentesque eget, mollis vel nisi. Etiam ut convalli" +
			"s augue. Nunc viverra vestibulum auctor. Mauris id risus vitae mi egestas consequat. Cras in ante ac nisl volutpat faucibus. " +
			"Donec blandit suscipit enim. Fusce consectetur odio id orci laoreet sed pretium purus sodales. Vivamus a nisl lorem. Nulla la" +
			"oreet ornare risus, eget sodales sem vehicula varius. Etiam aliquet luctus eros eget rhoncus. Donec semper arcu non dui facil" +
			"isis sed pellentesque dolor posuere. Etiam sit amet congue erat. Vivamus porttitor feugiat diam quis commodo. Nullam congue, " +
			"tortor vitae nullam.";
		}

		if ( typeof length == "undefined" ) {
			length = this.loremString.length;
		}

		if ( length <= this.loremString.length ) {
			return this.loremString.substr( 0, length );
		} else {
			//it's longer than the string we have, repeat it to generate the result string
			var ret = "";
			for ( var i = 0; i < length / this.loremString.length; i++ ) {
				ret += this.loremString;
			}
			ret += this.loremString.substr( 0, ( length % this.loremString.length ) );
			return ret;
		}
	};
})( jQuery );
]]> http://www.userpixel.com/1123/feed 0 Creating a pure CSS side folding layout http://www.userpixel.com/1115 http://www.userpixel.com/1115#comments Mon, 16 Apr 2012 20:39:45 +0000 Alex Hanif http://www.userpixel.com/?p=1115 I was playing around with CSS animations to create a layout for one of my pet projects where the following code turned out to be interestingly simple and useful:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
 position:absolute;
 padding:0;
 margin:0;
 width:100%;
 height:100%;
}
table {
 width:100%;
 height:100%;
}
td:nth-child(1) {
 background-color:#FFC;
}
td:nth-child(2) {
 background-color:#3C9;
}
td:nth-child(3) {
 background-color:#F99;
}
td:nth-child(4) {
 background-color:#6FF;
}
@-webkit-keyframes mouseover {
 from { width:10%; }
 to { width:25%; }
}
td {
 height:100%;
 width:10%;
}
td:not(.selected):hover {
 -webkit-animation:mouseover 200ms;
 width:25%;
}
td.selected {
 width:55%;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>&nbsp;</td>
 <td class="selected">&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
</table>
</body>
</html>

Here you can try it live: http://jsfiddle.net/gU3xB/

Just  hover over the rectangles to see the smooth movement. See the HTML code for understanding how simple it is.

Update: a slightly more advanced version of it can be found here: http://jsfiddle.net/mhzSz/ this one uses a little javascript code (6 lines of jQuery) to let the user select a panel by mouse click.

Update2:  this version has vertical and horizontal cells: http://jsfiddle.net/xUd39/

PS. I know <table> should not be used for layout management. This example shows a simple and fun code, not a production quality manifesto of coding standards.

]]> http://www.userpixel.com/1115/feed 0 A powerful and simple function to create DOM from JSon http://www.userpixel.com/1089 http://www.userpixel.com/1089#comments Mon, 09 Apr 2012 15:10:00 +0000 Alex Hanif http://www.userpixel.com/?p=1089 I’ve been working on a pet project during the Easter vacation. One of the cool ideas that I implemented was to create a valid HTML DOM tree just by a Javascript object (AKA Json). Here is the code:

/**
 * A utility function that creates a HTML DOM based on the descriptor.
 * The descriptor is an object that has the following members:
 * tag: (mandatory) string, the name of the HTML tag to be created. Example: "li" for creating a <li> element
 * id: (optional) string, the id that will be assigned to the element's id attribute. Example: "searchButton"
 * className: (optional) string, the name(s) that will be assigned to the element's className. If there are multiple classes, they should be separated by space. Example: "artist popularity"
 * attr: (optional) object, all the key-value pairs of this object will be added as attributes to the created element. Example: {href:"#",name:"badLink"} in an <a> element will be <a href="#" name:"badLink"></a>
 * contents: (optional) string, object or an array of objects. If it's string, it will go directly to the element text. If it is an object, it will be treated as a descriptor itself and passed to this function recursively. If it is an array, it will be supposed to be an array of descriptors
 * @return a DOM structure that can be used with appendChild() function to insert
 */
function createTree(descriptor) {
	var ret=document.createElement(descriptor.tag);
	if ( descriptor.id ) {
		ret.id=descriptor.id;
	}
	if ( descriptor.className ) {
		ret.className=descriptor.className;
	}
	if ( descriptor.attr ) {
		for ( var a in descriptor.attr ) {
			ret.setAttribute( a, descriptor.attr[a] );
		}
	}
	if ( descriptor.contents ) {
		switch (typeof descriptor.contents ) {
			case "string":
				//it is simply a string
				ret.innerHTML = descriptor.contents;
				break;
			case "object":
				if ( Array.isArray( descriptor.contents ) ) {
					//it is an array of objects
					for( var i = 0; i < descriptor.contents.length; i++ ) {
						if ( typeof descriptor.contents[i] == "string" ) {
							//it is a string
							ret.appendChild( document.createTextNode( descriptor.contents[i] ) );
						} else {
							//it is a node descriptor object (can't be an array)
							ret.appendChild( createTree( descriptor.contents[i] ) );
						}
					}
				} else {
					//it is an object
					ret.appendChild( createTree( descriptor.contents ) );
				}
				break;
		}
	}
	return ret;
}

The data structure can be quite sophisticated, yet simple. See the documentation above the function for more information.

]]> http://www.userpixel.com/1089/feed 0 Scheduling an Ajax call with parameters after it is finished http://www.userpixel.com/1050 http://www.userpixel.com/1050#comments Thu, 01 Mar 2012 09:25:00 +0000 Alex Hanif http://www.userpixel.com/?p=1050 Keeping a page updated using repeated Ajax calls seems to be pretty common in the projects that I’m working with. The problem is: I don’t want the client to slavishly sent Ajax calls on an interval! I want each new call to be initiated after the previous Ajax call returns.

Let say there is an asynchronous Ajax function which runs a command string at the server side and returns the result to the client. It calls a callback function to process the results:

function ajaxCall(commandStr,callback){
   var url=......//make a url with the command string
   jquery.get(url,function(result){
       //process the result using callback
       callback(result);
   });
}

The asynchronous call (ajaxCall) may take a while to be finished (between 200ms to 30000ms!) but I want it to do the same command with an interval (1000ms) after the previous Ajax call finishes. I want to write a wrapper function around ajaxCall() with the following signature:

function ajaxCallRepeated(interval,commandStr,callback)

Closures can be a great solution for this problem. The solution is:

function ajaxCallRepeated(interval,commandStr,callback){
	//This feature uses closures in Javascript. Please read this to know why and how: http://jibbering.com/faq/notes/closures/#clSto
	function callLater(_interval,_commandString,_callback){
		var closure=(function(){
			ajaxCall(_commandString,function(out,err){
				if(_callback)_callback(out,err);
				setTimeout(closure,_interval);
			});
		});
		return closure;
	}
	//now make a closure for every call to this function
	var functRef = callLater(interval,commandString,callback);
	//the first call
	functRef();
}

Since it’s not possible to send parameters to the function call of setTimer(), closures are used to pass these parameters. Inside ajaxCallRepeat(), the callLater() function uses a closures to remember the parameters. The closure sets the timer on itself after the ajaxCall is returned. Then calls the callback function that might be passed to ajaxCallRepeated() and hence callLater().

It’s a little bit complicated but the idea is simple: the closure is used not only to pass the parameters, but also a reference to the closure itself! It works like a charm now! :)

]]> http://www.userpixel.com/1050/feed 0 Lightweight Metro-like UI in pure CSS http://www.userpixel.com/769 http://www.userpixel.com/769#comments Sat, 25 Feb 2012 00:17:40 +0000 Alex Hanif http://www.userpixel.com/?p=769 I was playing around to create a simple and light-weight UI similar to Microsoft Metro design language. Here is the code and some snapshots:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index2</title>
<style type="text/css">
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
html{
 font-family:Verdana, Geneva, sans-serif;
 font-size:14px;
}
div.tiles{
 background-color:black;
 padding:50px;
}
div.tiles > div{
 border-radius:2px;
 padding:10px;
 margin:5px;
 color:white;
 background-color:#666;
 display:marker;
 cursor:pointer;
 position:relative;
 float:left;
 width:25px;
 height:25px;
}
div.tiles div:hover{
 transition:background-color 1s;
 -moz-transition:background-color 1s;
 -webkit-transition:background-color 1s;
 background-color:#060;
 -moz-transform:rotate(6deg);
}
div.tiles div.icon{
 position:absolute;
 width:30px;
 height:30px;
 bottom:0px;
 left:0px;
 z-index:10;
 background-color:red;
}
<!--These classes define how wide a tile should be-->
div.tiles div.w1{width:25px;}
div.tiles div.w2{width:80px;}
div.tiles div.w3{width:160px;}
div.tiles div.w4{width:190px;}
<!--These classes define how tall a tile should be-->
div.tiles div.h1{height:25px;}
div.tiles div.h2{height:80px;}
div.tiles div.h3{height:160px;}
div.tiles div.h4{height:190px;}
</style>
</style>
</head>
<body>
<div class="tiles clearfix">
 <div class="w4 h2">mattberg@live.com <div class="icon">icon</div></div>
 <div class="w4 h2">RSS</div>
 <div class="w4 h2">13</div>
 <div class="w2 h2">IE</div>
 <div class="w2 h2">Photo</div>
 <div class="w4 h2">Now Playing</div>
 <div class="w4 h2">Photo <div class="icon">icon</div></div>
 <div class="w2 h2">Shop</div>
 <div class="w2 h2">SMS</div>
 <div class="w4 h2">Weather <div class="icon">icon</div></div>
 <div class="w4 h2">Investment</div>
 <div class="w1 h1">Lilly</div>
 <div class="w1 h1">Lilly</div>
 <div class="w1 h1">Lilly</div>
 <div class="w1 h1">Lilly</div>
 <div class="w1 h1">Lilly</div>
 <div class="w1 h1">Lilly</div>
<div class="w1 h1">Lilly</div>
</div>
</body>
</html>

]]> http://www.userpixel.com/769/feed 0 Lua function to traverse all files in a folder recursively http://www.userpixel.com/740 http://www.userpixel.com/740#comments Thu, 12 Jan 2012 12:37:17 +0000 Alex Hanif http://www.userpixel.com/?p=740 Here is a little function that uses Lua File System (lfs module) in order to traverse all the files in a folder and its sub folders (and their sub folders) recursively.

DIR_SEP="\\" --should be "/" for Unix platforms (Linux and Mac)
function browseFolder(root)
	for entity in lfs.dir(root) do
		if entity~="." and entity~=".." then
			local fullPath=root..DIR_SEP..entity
			--print("root: "..root..", entity: "..entity..", mode: "..(lfs.attributes(fullPath,"mode")or "-")..", full path: "..fullPath)
			local mode=lfs.attributes(fullPath,"mode")
			if mode=="file" then
				--this is where the processing happens. I print the name of the file and its path but it can be any code
				print(root.." > "..entity)
			elseif mode=="directory" then
				browseFolder(fullPath);
			end
		end
	end
end

--this is a sample call
browseFolder(".")
]]> http://www.userpixel.com/740/feed 0 Checking IP address format in Lua http://www.userpixel.com/736 http://www.userpixel.com/736#comments Mon, 09 Jan 2012 16:01:41 +0000 Alex Hanif http://www.userpixel.com/?p=736 Here is a little function that I developed to test if a string is a valid IPv4 address (that is 4 numbers between 0 to 255 separated with “.”)

---checks if a string represents an ip address
-- @return true or false
function isIpAddress(ip)
 if not ip then return false end
 local a,b,c,d=ip:match("^(%d%d?%d?)%.(%d%d?%d?)%.(%d%d?%d?)%.(%d%d?%d?)$")
 a=tonumber(a)
 b=tonumber(b)
 c=tonumber(c)
 d=tonumber(d)
 if not a or not b or not c or not d then return false end
 if a<0 or 255<a then return false end
 if b<0 or 255<b then return false end
 if c<0 or 255<c then return false end
 if d<0 or 255<d then return false end
 return true
end

And here are some tests:

assert(isIpAddress("1.1.1.1")==true)
assert(isIpAddress("255.1.1.1")==true)
assert(isIpAddress("255.255.0.0")==true)
assert(isIpAddress("0.0.0.0")==true)
assert(isIpAddress("255.255.255.255")==true)
assert(isIpAddress("0.0.0.1")==true)
assert(isIpAddress("0.0.1.1")==true)
assert(isIpAddress("0.1.1.1")==true)
assert(isIpAddress("1.2.3.4")==true)
assert(isIpAddress(nil)==false)
assert(isIpAddress("")==false)
assert(isIpAddress("1")==false)
assert(isIpAddress("1.2")==false)
assert(isIpAddress("1.2.3")==false)
assert(isIpAddress("1.2.3.4.")==false)
assert(isIpAddress(".1.2.3.4")==false)
assert(isIpAddress("0")==false)
assert(isIpAddress("-1")==false)
assert(isIpAddress("256")==false)
assert(isIpAddress("-1.2.3.4")==false)
assert(isIpAddress("1.-2.3.4")==false)
assert(isIpAddress("1.2.-3.4")==false)
assert(isIpAddress("1.2.3.-4")==false)
assert(isIpAddress("256.2.3.4")==false)
assert(isIpAddress("1.256.3.4")==false)
assert(isIpAddress("1.2.256.4")==false)
assert(isIpAddress("1.2.3.256")==false)
assert(isIpAddress("256.256.256.256")==false)
assert(isIpAddress("1000.0.0.0")==false)
assert(isIpAddress("a.b.c.d")==false)
assert(isIpAddress("a.2.c.d")==false)
assert(isIpAddress("a.b.3.d")==false)
assert(isIpAddress("a.b.c.4")==false)
]]> http://www.userpixel.com/736/feed 0 What are all the valid subnet masks http://www.userpixel.com/734 http://www.userpixel.com/734#comments Mon, 09 Jan 2012 14:32:50 +0000 Alex Hanif http://www.userpixel.com/?p=734 Here are all the valid subnet masks for IPv4:

  1. 128.0.0.0
  2. 192.0.0.0
  3. 224.0.0.0
  4. 240.0.0.0
  5. 248.0.0.0
  6. 252.0.0.0
  7. 254.0.0.0
  8. 255.0.0.0
  9. 255.128.0.0
  10. 255.192.0.0
  11. 255.224.0.0
  12. 255.240.0.0
  13. 255.248.0.0
  14. 255.252.0.0
  15. 255.254.0.0
  16. 255.255.0.0
  17. 255.255.128.0
  18. 255.255.192.0
  19. 255.255.224.0
  20. 255.255.240.0
  21. 255.255.248.0
  22. 255.255.252.0
  23. 255.255.254.0
  24. 255.255.255.0
  25. 255.255.255.128
  26. 255.255.255.192
  27. 255.255.255.224
  28. 255.255.255.240
  29. 255.255.255.248
  30. 255.255.255.252
  31. 255.255.255.254

The following Lua script was used to calculate those values:

map={
  ["00000000"]="0",
  ["10000000"]="128",
  ["11000000"]="192",
  ["11100000"]="224",
  ["11110000"]="240",
  ["11111000"]="248",
  ["11111100"]="252",
  ["11111110"]="254",
  ["11111111"]="255"
}
for i=1,31 do
  s=string.rep("1",i)..string.rep("0",32-i)
  print(map[s:sub( 1, 8)].."."..map[s:sub( 9,16)].."."..map[s:sub(17,24)].."."..map[s:sub(25,32)])
end
]]> http://www.userpixel.com/734/feed 0 Setting up Tele2 Huawei e367 3G modem on Linux (Ubuntu 11.04) http://www.userpixel.com/723 http://www.userpixel.com/723#comments Sat, 31 Dec 2011 10:21:45 +0000 Alex Hanif http://www.userpixel.com/?p=723 I needed to connect my Tele2 usb modem to Ubuntu and here is a good solution.

It’s basically these lines that made it work:

$ cd /etc/usb_modeswitch.d
$ sudo tar xzf /usr/share/usb_modeswitch/configPack.tar.gz 12d1:1446
$ sudo sed -i -e 's/14ac"/14ac,1506"/' 12d1\:1446

Also it seems that the following command is required for it to work:

$ sudo modprobe usbserial vendor=0x12d1 product=0x1506

After that, you need to configure Ubuntu Network Connections (the little network icon on the top right of the screen near the speaker icon). Go to “Mobile Broadband” tab, click “Add”. Select “Sweden” as your country, “Tele2″ as your operator and “Mobile Bredband” as your data plan.
Then use the following configurations:

  • PIN1: ***** (your pin code)
  • connection type: NDIS
  • access point: mobileinternet.tele2.se
  • Phone number: *99#
  • Username and password: Not used (leave empty)
  • Password Authentication Protocol: CHAP (to be safe you can select all of them)
  • IP address: Dynamic
  • DNS address : Dynamic
  • WINS address: Dynamic

PS. The Linux version of the driver is really stable! I share the Internet using an Asus Eee Box and an access point to 4 other wireless devices at home. In Windows, the device used to get disconnected and sometimes it had to be removed from the USB port and inserted again (even when using the latest driver from Huawei). In Linux this hasn’t happened during the last week.

]]> http://www.userpixel.com/723/feed 0 Comment remover script for JavaScript, HTML, XML, CSS and Lua http://www.userpixel.com/688 http://www.userpixel.com/688#comments Mon, 28 Nov 2011 15:52:14 +0000 Alex Hanif http://www.userpixel.com/?p=688 The following script removes all comments (single line or multi line) from 5 types of files that I use mostly: JavaScript, HTML, XML, CSS and Lua.

formats={
	["js"]={
		name="JavaScript",
		single="//.-\n",
		multi="/%*.-%*/"
	},
	["xml"]={
		name="XML",
		single=nil,
		multi="<!--.--->"
	},
	["html"]={
		name="HTML",
		single=nil,
		multi="<!--.--->"
	},
	["css"]={
		name="CSS",
		single=nil,
		multi="/%*.-%*/"
	},
	["lua"]={
		name="Lua",
		single="--.-\n",
		multi="/%[%[.-%]%]/"
	},

}
---Gets a valid compilable javascript code and removes its comments
-- @note the javascript code should be ready to compile that is: there are no syntax
-- errors whatsoever. Otherwise the behavior of this function is unpredictable.
-- @param txt the compilable javascript code
-- @param patt the pattern table from format table. See how it's called from removeCommentsFile()
-- @return a text string the semantically behaves the same as the txt that was passed
-- to the function but doesn't have comments
function removeComments(txt,patt)
	--remove all multi-line comments
	if patt.multi then
		txt=txt:gsub(patt.multi,"\n")
	end
	--remove all single-line comments
	if patt.single then
		txt=txt:gsub(patt.single,"\n")
	end

	txt=txt:gsub("\n[%s]*","\n")  --remove all soaces at the start of lines
	txt=txt:gsub("[%s\n]*\n","\n")--remove all empty lines and all spaces at the end of lines
	txt=txt:gsub("^\n","")        --remove first empty new line
	txt=txt:gsub("\n$","")        --remove last empty new line
	return txt
end

---Opens a file and detects its extension before passing the contents to removeComments()
function removeCommentsFile(fileName)
	local f=io.open(fileName,"r")
	local txt=f:read("*a")
	local extension=fileName:match("%.(.-)$")
	if not extension then
		return nil,"Could not find extension for file '"..fileName.."'"
	end
	extension=extension:lower()
	if formats[extension] then
		print("Removing comments from '"..fileName.."' (a "..formats[extension].name.." file)")
		return removeComments(txt,formats[extension])
	else
		return nil,"This file is not recognized: '"..fileName.."'"
	end
end

for k,v in ipairs(arg) do
	print(removeCommentsFile(v))
end
]]> http://www.userpixel.com/688/feed 0