<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" version="2.0">

<channel>
	<title>Cloudwisp</title>
	
	<link>http://www.cloudwisp.net</link>
	<description>Tech Blog</description>
	<lastBuildDate>Sun, 07 Feb 2010 21:55:21 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/CloudwispDesign" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="cloudwispdesign" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">CloudwispDesign</feedburner:emailServiceId><feedburner:feedburnerHostname xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Human-Game Interface</title>
		<link>http://www.cloudwisp.net/gaming/human-game-interface/</link>
		<comments>http://www.cloudwisp.net/gaming/human-game-interface/#comments</comments>
		<pubDate>Sun, 07 Feb 2010 21:29:14 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Gaming]]></category>
		<category><![CDATA[arcade]]></category>
		<category><![CDATA[console]]></category>
		<category><![CDATA[feedback]]></category>
		<category><![CDATA[games.controllers]]></category>
		<category><![CDATA[mind control]]></category>
		<category><![CDATA[peripherals]]></category>
		<category><![CDATA[virtual reality]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=382</guid>
		<description><![CDATA[Until recently,the way we interact with our games has remained mostly unchanged. This article explores the future of the human-game interface <p>Continue reading <a href="http://www.cloudwisp.net/gaming/human-game-interface/">Human-Game Interface</a></p>]]></description>
			<content:encoded><![CDATA[<div id="attachment_385" class="wp-caption alignright" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/starwars-arcade.jpg"><br />
<img class="size-thumbnail wp-image-385" title=" starwars-arcade" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/starwars-arcade-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Starwars Arcade Machine</p></div>
<p>Until recently, the most innovative game controllers have mostly been the domain of Video Arcades. Motorbikes that pull from side to side, Car simulators, flight-sim capsules, and Point&#8217;n&#8217;shoot guns to name a few.</p>
<p>Some of these had filtered over into the home environment. Joysticks, Steering wheels and guns could be bought for most home consoles and PC&#8217;s.  In recent years however, the real driver in innovation has come from outside the Video Arcade, and has instead come from the home console developers.</p>
<div id="attachment_386" class="wp-caption alignleft" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/wiimote-e1265512982660.jpg" rel="lightbox"><img class="size-thumbnail wp-image-386 " title=" wiimote" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/wiimote-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">WiiMote Controller</p></div>
<p>One of the notable drivers of development has been Nintendo, which has in the last few years has offered the most innovative ways of interacting with games. The DS portable touch screen, and to the motion sensitive WiiMote for Nintendo Wii..</p>
<p>Sony has followed with a somewhat more subtle improvement to it&#8217;s Playstation controller, the  &#8221;Sixaxis&#8221; motion sensitive controller.</p>
<p>While Microsoft has not yet emulated this motion-sensitive functionality for it&#8217;s Xbox 360 controller, it will soon raise the bar for it&#8217;s competitors with the announcement of <a href="http://www.xbox.com/en-US/live/projectnatal/" target="_blank">project natal</a>, a new motion sensor technology that will allow gamers to control games through body movements, without the need to have any controller in hand.</p>
<div id="attachment_390" class="wp-caption alignright" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/guitar_hero_world_tour_3.jpg" rel="lightbox"><img class="size-thumbnail wp-image-390" title=" guitar_hero_world_tour_3" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/guitar_hero_world_tour_3-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Guitar Hero has Guitar and Drum controllers</p></div>
<p>Another sometimes overlooked innovation to the world of game controllers are the various rock band instruments that interact with gaming consoles. These includes guitars, drums and microphones.</p>
<p>So it is easy to see that this is an area of fierce competition, with companies trying to offer the most fun and interactive ways of entertaining their customers. But what will the future of gaming look like? What are some of the technologies either in development or available today that might find their way into the mainstream for gamers young and old?</p>
<p>One of the things holding back the realism of a virtual reality environment is that the player in the real world is still just standing still. There is still a feeling of not completely being there in the game world. The obvious solution to this has been the use of a treadmill to allow a players&#8217; walking and running movements to be mirrored in the virtual environment.</p>
<div id="attachment_395" class="wp-caption alignleft" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/ARL_ODT.jpg" rel="lightbox"><img class="size-thumbnail wp-image-395 " title=" ARL_ODT" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/ARL_ODT-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Omni-directional Treadmill</p></div>
<p>While the standard treadmill might add some extra realism to the game, it cannot represent the 3 dimensional aspect of a game world, because it moves only in one direction. So the future will most likely see more advances in the Omni-directional Treadmill (ODT), which is a type of treadmill that allows movement in all directions. When these are used to interface with a game, the player will get a much more realistic experience in the virtual world. It would be especially useful for FPS and Adventure/RPG games. For more information on the ODT, see this <a href="http://en.wikipedia.org/wiki/Omnidirectional_treadmill" target="_blank">Wikipedia Article</a>. Possible improvements would be force sensors to allow for jumping, and elevation control.</p>
<p>The obvious limitation to the treadmill&#8217;s widespread use might be it&#8217;s size and expense. While it might be something easily found in a Video Arcade, the home user would need to make a significant investment into this particular component.</p>
<p>Another advancement to enhance virtual realism that will surely become mainstream is advanced sensory feedback. Already popular is the use of vibration in controllers that provide simple feedback in all kinds of situations. An example of the next step is the use of force feedback gloves or suits, which allows not only direct control of body and hand movements, but more importantly provides a pressure or electrical feedback to the user, giving them the impression of actually touching and feeling virtual objects. Click <a href="http://www.technologyreview.com/infotech/19637/?a=f" target="_blank">here</a> to see an example of a feedback vest. Going beyond simple stimulation feedback, the use of intelligent full arm and body restraint could further advance the realism, by simulating weight and shock.</p>
<div id="attachment_393" class="wp-caption alignleft" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/robotsuit_4.png" rel="lightbox"><img class="size-thumbnail wp-image-393 " title=" robotsuit_4" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/robotsuit_4-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Feedback Suit</p></div>
<p>A suit alone may not have much of a place in the future, where the capture of general arm movements (which can be done with cameras without a suit) seems to have more relevance to the games people play than intricate movements of fingers and limbs. So the gaming suit will only become popular where people demand a greater sensory interface with the virtual worlds in which they play.</p>
<p>One more exciting upcoming development in the game peripherals scene are controllers that use a player&#8217;s thoughts to control a game. Emotiv Systems has released a <a href="http://www.emotiv.com/index.php" target="_blank">device</a> that can be worn on the player&#8217;s head which will convert brainwave patterns into computer signals that can be interpreted by games. With the advancement of this technology, the user will have a much more intimate interface with the game environment.</p>
<div id="attachment_394" class="wp-caption alignright" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/emotiv_epoc_01.jpg" rel="lightbox"><img class="size-thumbnail wp-image-394" title=" emotiv_epoc_01" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/emotiv_epoc_01-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Emotiv Epoch</p></div>
<p>To achieve a full immersion mind control like that found in a movie like the Matrix, the body would first have to be put in a state of paralysis similar to that experienced while we dream. Then the mind scanner would have to have a high enough resolution to read and interpret the separate signals that we use for movement.</p>
<p>Considering Emotiv&#8217;s device is already on the market for about US$200, it is only a matter of time for the economies of scale to reduce the price for the average user before this kind of game controller becomes a standard part of the gamer&#8217;s toolkit.</p>
<div id="attachment_391" class="wp-caption alignleft" style="width: 160px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/02/Surrogates-chair.jpg" rel="lightbox"><img class="size-thumbnail wp-image-391 " title=" Surrogates-chair" src="http://www.cloudwisp.net/wp-content/uploads/2010/02/Surrogates-chair-e1265513921945-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Interface Chair from the Movie Surrogates</p></div>
<p>The future of game controllers might seem to be an easy bet: Games controlled by our minds as we all plug into the Matrix, a virtual world where we feel the heat of the sun on our faces and smell the flowers in the meadows.</p>
<p>But what do we really want out of our games? We play games as a social form of entertainment, for the hands on enjoyment, for the adrenaline rush, for a challenging puzzle, for an escape from reality and much more. It is this plurality of preferences that will determine the controllers of the future. While some of us might be plugged into the Matrix, others might well be running on a smart treadmill, or swinging a virtual racket for some exercise. There may even be some who will never want to let go of the simple little control pad.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/zU9J65lJQZ27twSv-nZ0eVyDTFw/0/da"><img src="http://feedads.g.doubleclick.net/~a/zU9J65lJQZ27twSv-nZ0eVyDTFw/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/zU9J65lJQZ27twSv-nZ0eVyDTFw/1/da"><img src="http://feedads.g.doubleclick.net/~a/zU9J65lJQZ27twSv-nZ0eVyDTFw/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/gaming/human-game-interface/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>VB.net and Visual Studio 2008</title>
		<link>http://www.cloudwisp.net/programming/vb-net-and-visual-studio-2008/</link>
		<comments>http://www.cloudwisp.net/programming/vb-net-and-visual-studio-2008/#comments</comments>
		<pubDate>Sat, 30 Jan 2010 03:22:40 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[vb.net]]></category>
		<category><![CDATA[visual basic]]></category>
		<category><![CDATA[Visual Studio]]></category>
		<category><![CDATA[visual studio 2008]]></category>
		<category><![CDATA[windows applications]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=253</guid>
		<description><![CDATA[For my latest project, I got a chance to use Visual Studio 2008 to create a Windows application in the vb.net language. After learning my way around the interface, I was off and running at the speed of light. <p>Continue reading <a href="http://www.cloudwisp.net/programming/vb-net-and-visual-studio-2008/">VB.net and Visual Studio 2008</a></p>]]></description>
			<content:encoded><![CDATA[<p>For my latest project, I got a chance to use Visual Studio 2008 to create a Windows application in the vb.net language. After learning my way around the interface, I was off and running at the speed of light.</p>
<p>My previous encounters with Visual Basic were with Visual Basic 6.0  and the VB macro editor that comes with built into Microsoft Office 2002. So I have hardly come to this with no experience, however it is true to say that without much effort and a quick tutorial, even beginners can achieve quite interesting things.</p>
<p>For those that aren&#8217;t familiar with it, VB.net is an evolution of the Visual Basic language created by Microsoft. It includes a whole new set of .net framework class libraries, as well as the most of the traditional class libraries.  VB.net is used for both offline and online applications. For this article, I&#8217;m interested only in the traditional Windows &#8220;forms&#8221; application.</p>
<p><strong>The Visual Editor:</strong></p>
<div id="attachment_311" class="wp-caption alignnone" style="width: 510px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/vsVisual-e1265397658948.jpg" rel="lightbox"><img class="size-full wp-image-311" title="The Visual Editor" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/vsVisual-e1265397658948.jpg" alt="" width="500" height="313" /></a><p class="wp-caption-text">Screenshot of the visual editor</p></div>
<p>As the name suggests, Visual Basic involves a visual component, which is the graphical forms editor. This allows you to add components to the forms space, such as buttons, text boxes, scroll bars, labels etc, and then you code in the interactions between these components. At the side of the editing area is a properties box, which lists all the various properties that dictate the behavior of those components.</p>
<p>Visual Studio functions much the same as Visual Basic 6.0 in regards to the visual editor.</p>
<p>When I first learnt to use Visual Basic, I picked it up very fast because it was more or less intuitive. What made it very easy to achieve things that I had not even learnt, but only imagined, was one of the program&#8217;s great features:</p>
<p><strong>The Object Browser:</strong></p>
<p><strong> </strong></p>
<div id="attachment_315" class="wp-caption alignnone" style="width: 510px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/vsObjBrowser1-e1265397518521.jpg" rel="lightbox"><img class="size-full wp-image-315" title=" vsObjBrowser" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/vsObjBrowser1-e1265397518521.jpg" alt="" width="500" height="222" /></a><p class="wp-caption-text">Object Browser</p></div>
<p>The object browser contains a browse-able list of class libraries that you can use. Looking through the list, you can get an idea of what can be achieved with Visual Basic, and can browse the syntax and required objects/parameters for various functions. It is important to note that some sub-classes and operations are not shown in the browser.</p>
<p><strong>User Friendliness:</strong></p>
<p>One of my more favourite features in Visual Studio (and its&#8217; predecessors) is the drop down auto-complete list.</p>
<p>Visual Basic is an object oriented language, and the objects are elaborated through the . (dot). For example, to reference a parameter &#8220;height&#8221; of a text box named &#8220;txtBox&#8221;, we would refer to it as txtBox.height</p>
<p>The auto-complete list will pop up when I type the . (dot), and list all those properties that I may choose from. Height would be found within it, and have an icon that represents that it is a property.</p>
<div id="attachment_314" class="wp-caption alignnone" style="width: 510px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/vsAutoComplete1-e1265397414524.jpg" rel="lightbox"><img class="size-full wp-image-314" title="vsAutoComplete" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/vsAutoComplete1-e1265397414524.jpg" alt="" width="500" height="152" /></a><p class="wp-caption-text">Drop-down box</p></div>
<p>Also found within the auto-complete list, are functions. These have different icons. Examples of these would be show(), hide(), close()</p>
<p>This makes for very easy coding. I can be guided along by the auto-complete without having learnt the ins and outs of the object with which i&#8217;m interacting.</p>
<p>As for user-friendliness as a whole, there is more complexity in Visual Studio than there was in Visual Basic 6.0. This has great advantages, but one disadvantage is that it is definitely less user-friendly than it once was, especially at compile time.</p>
<p>Builds can be debug or release, and there are versions and references that must be accounted for. All of this can be learnt fairly easily.</p>
<p><strong>Releasing your software to the world:</strong></p>
<p>Visual Studio has a publish option, that lets you publish a software installer. For me this process was counter-intuitive to my expectations, as most applications I have downloaded have been in standalone single install files, either msi or exe.</p>
<p>When you publish your application it will be placed in a folder with subdirectories that contain your application and its&#8217; files.</p>
<p>The best way to publish with a standalone installer is to compile your application in the standard way, and then create a new project choosing the &#8220;installer package&#8221; template. This will create an msi installer into which you can add your executable and program files.</p>
<p>I didn&#8217;t find any good tutorials that go through this process from start to finish, so be prepared to spend some time searching the web for any answers you may have, and do plenty of testing if you wish to take this path.</p>
<p>Of course you can stick with the published installer.</p>
<p><strong>Conclusion:</strong></p>
<p>Overall, Visual Studio 2008 and vb.net (with net framework 3.5) has plenty of great features and lots of class libraries to help you achieve what you want.</p>
<p>I haven&#8217;t even touched on the possibilities that arise from the online projects that can be created and managed with VS2008, so I&#8217;m sure there&#8217;ll be plenty more adventures for me in the years to come in the world of VB.net</p>

<p><a href="http://feedads.g.doubleclick.net/~a/IsDB0Upih1IpBDcpPw_eO8ak9bg/0/da"><img src="http://feedads.g.doubleclick.net/~a/IsDB0Upih1IpBDcpPw_eO8ak9bg/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/IsDB0Upih1IpBDcpPw_eO8ak9bg/1/da"><img src="http://feedads.g.doubleclick.net/~a/IsDB0Upih1IpBDcpPw_eO8ak9bg/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/programming/vb-net-and-visual-studio-2008/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DAoC Settings Switcher</title>
		<link>http://www.cloudwisp.net/projects/daoc-settings-switcher/</link>
		<comments>http://www.cloudwisp.net/projects/daoc-settings-switcher/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 19:43:18 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Projects]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=241</guid>
		<description><![CDATA[<p>The DAoC Settings Switcher is a quickbar and settings backup/copy/restoration application for players of the game Dark Age of Camelot</p>
<p>Click <a href="http://www.cloudwisp.net/project/daoc-settings-switcher">here</a> to go to the application page.</p>
]]></description>
			<content:encoded><![CDATA[<p>The DAoC Settings Switcher is a quickbar and settings backup/copy/restoration application for players of the game Dark Age of Camelot</p>
<p>Click <a href="http://www.cloudwisp.net/project/daoc-settings-switcher">here</a> to go to the application page.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/X_I9zBETIwjsQaJxYJWEbTEvOdU/0/da"><img src="http://feedads.g.doubleclick.net/~a/X_I9zBETIwjsQaJxYJWEbTEvOdU/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/X_I9zBETIwjsQaJxYJWEbTEvOdU/1/da"><img src="http://feedads.g.doubleclick.net/~a/X_I9zBETIwjsQaJxYJWEbTEvOdU/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/projects/daoc-settings-switcher/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ubuntu Linux</title>
		<link>http://www.cloudwisp.net/tech-news/ubuntu-linux/</link>
		<comments>http://www.cloudwisp.net/tech-news/ubuntu-linux/#comments</comments>
		<pubDate>Tue, 12 Jan 2010 20:47:56 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Tech News]]></category>
		<category><![CDATA[9.10]]></category>
		<category><![CDATA[karmic]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[operating system]]></category>
		<category><![CDATA[OS]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[ubuntu]]></category>
		<category><![CDATA[windows alternative]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=210</guid>
		<description><![CDATA[The last time I tried a Linux OS was back in the late 90's with Red Hat and it took me about 20 minutes before I broke it. I didn't give it much of a chance after that.  Now I take another look at a Linux distribution by the name of Ubuntu. <p>Continue reading <a href="http://www.cloudwisp.net/tech-news/ubuntu-linux/">Ubuntu Linux</a></p>]]></description>
			<content:encoded><![CDATA[<p>The last time I tried a Linux OS was back in the late 90&#8217;s with Red Hat and it took me about 20 minutes before I broke it. I didn&#8217;t give it much of a chance after that.  Now I take another look at a Linux distribution by the name of Ubuntu.</p>
<p>Since my last excursion into the world of Linux, the open source distributions of this OS have been forging ahead at an astounding pace. One of the most popular, free and well supported distributions of Linux at the moment is Ubuntu. I&#8217;m going to take you through some of the highlights.</p>
<p>Introducing Ubuntu 9.10 &#8211; The Karmic Koala.</p>
<div id="attachment_224" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-win-popup.png" rel="lightbox"><img class="size-medium wp-image-224" title=" ubuntu-win-popup" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-win-popup-300x187.png" alt="" width="300" height="187" /></a><p class="wp-caption-text">Ubuntu Gnome Desktop</p></div>
<p><strong>Distributions:</strong></p>
<p>In linux distributions, there are two main flavors of desktop environment: KDE and GNOME. These are the graphical environments that display the software you wish to use. Some programs developed for one environment won&#8217;t work well under the other, or at the very least will use a lot more system resources to run.</p>
<p>Ubuntu uses the GNOME environment, however the underlying operating system comes in a KDE form called Kubuntu. Another variant is called Xubuntu, which uses the Xfce environment designed for slow computers or those that wish to have a resource light interface.</p>
<p>In addition to the Desktop Environment variants, there is also an Ubuntu distribution targeted at schools and parents called Edubuntu. It comes preloaded with learning programs for children.</p>
<p>For this review, I will basically be looking at the standard Ubuntu desktop release as well as a small look at the Netbook Remix release, which includes a new user-friendly application loader.</p>
<p><strong>Applications:</strong></p>
<div id="attachment_216" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2009/12/ubuntu-app-menu.png" rel="lightbox"><img class="size-medium wp-image-216" title=" ubuntu-app-menu" src="http://www.cloudwisp.net/wp-content/uploads/2009/12/ubuntu-app-menu-300x268.png" alt="" width="300" height="268" /></a><p class="wp-caption-text">The Applications Menu</p></div>
<p>The available applications are what might make and break an operating system. Ubuntu comes with several great applications built-in. I will go over some of the most useful:</p>
<p><strong>Firefox 3.5<br />
<span style="font-weight: normal;"> The popular and fully featured web browser comes standard with Ubuntu.</span></strong></p>
<p><strong><strong>CD/DVD Creator</strong>:<br />
<span style="font-weight: normal;"> Built into the explorer (nautilus) allowing you to burn DVD and CD discs.</span></strong></p>
<p><strong><strong>Brasero Disc burner</strong><br />
<span style="font-weight: normal;"> Burn music cd&#8217;s</span></strong></p>
<p><strong><strong>Evolution</strong>:<br />
<span style="font-weight: normal;"> An email client which includes calendar and organizer similar to Outlook.</span></strong></p>
<p><strong><strong>Empathy IM</strong>:<br />
<span style="font-weight: normal;"> An instant manager client supporting most popular IM services.</span></strong></p>
<p><strong> </strong></p>
<p><strong>UbuntuOne Online Storage:<br />
<span style="font-weight: normal;"> An online storage account providing 2gb of free storage. This can be mounted as a virtual drive on your system to be synchronized with the local disk</span></strong></p>
<p><strong><strong>Transmission BitTorrent</strong>:<br />
<span style="font-weight: normal;"> A client for downloading files with Torrents.</span></strong></p>
<p><strong><strong>OpenOffice</strong>:<br />
<span style="font-weight: normal;"> Ubuntu comes with Presentation, Drawing, Math Formula, Spreadsheet and Wordprocessing apps.</span></strong></p>
<p><strong><strong>RhythmBox Music Player</strong>:<br />
<span style="font-weight: normal;"> A fully featured Music player which includes support for mobile devices, internet radio, magnatune and jamendo music sources, podcast feeds and playlists. It also includes some plugins which include UPNP and DAAP servers to share your music to the network, cover art, song lyrics and visualization.</span></strong></p>
<p><strong><strong>F-spot Image Manager</strong>:<br />
<span style="font-weight: normal;"> A very good image manager which will download pictures from your camera and allow you to tag and sort them. It will also automatically upload images to online albums like flickr and picasa.</span></strong></p>
<p><strong><strong>Movie Player</strong>:<br />
<span style="font-weight: normal;"> A built-in movie player that works quite well.</span></strong></p>
<p><strong><strong>Games:<br />
<span style="font-weight: normal;"> Ubuntu comes with a nice list of puzzle type games to keep you occupied, and there are many more available for download.</span></strong></p>
<p><strong><strong>Gimp image editor</strong>:<br />
<span style="font-weight: normal;"> A rival to Adobe Photoshop for editing and creating images.</span></strong></p>
<p><strong><span style="font-weight: normal;">These pre-loaded apps are just the icing on the cake. You&#8217;ll find thousands of titles to download in the Ubuntu Software Center. The Software center allows you to search, browse by category, install and remove install software.</span></strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
<p><strong></p>
<div id="attachment_219" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-software-center2.png" rel="lightbox"><img class="size-medium wp-image-219" title=" ubuntu-software-center2" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-software-center2-300x254.png" alt="" width="300" height="254" /></a><p class="wp-caption-text">The Ubuntu Software Center</p></div>
<p><strong>Drivers:</strong></p>
<p><span style="font-weight: normal;">It is important to note that some hardware might not run with Linux. Lexmark printers are notorious for not working very well. These are however only exceptions to the otherwise extensive hardware support provided in the distribution. Without the need for a driver disk, all of my hardware functioned out of the box, including a usb wireless network card, external hard drives, USB web camera and digital still camera. Drivers can also be downloaded for Nvidia and ATI video cards by going to System =&gt; Administration =&gt; Hardware Drivers. This will enable you to get 3d acceleration.</span></p>
<p><strong>Security:</strong></p>
<p><span style="font-weight: normal;">Ubuntu is perhaps unique in that it does not allow root access to the machine by default. Instead it assigns the first user on the system the most privileges, but requires a password to do many things. Many system commands executed in the terminal require the use of &#8220;sudo&#8221; or &#8220;gksudo&#8221; (super-user do) which will run the specific command as root after the password is entered. This provides a much higher level of security as potentially dangerous things require a password. It lowers the risks of viruses as software will not be able to damage your system without knowing the password.</span></p>
<p><span style="font-weight: normal;">Ubuntu also comes with a system for filtering and routing packets called iptables. Several front-end firewall applications can be found in the Software Center to manipulate iptables and provide port blocking. </span></p>
<p><strong>Flash and Codec Support:</strong></p>
<p><span style="font-weight: normal;">All software included in Ubuntu is released under an open source license. Flash however is proprietary software, and must be installed manually. To do this is easy, as flash is included in a package called &#8220;Ubuntu Restricted Extras&#8221;. This package also includes a Java engine, Several audio and video codecs, Microsoft core fonts and some other proprietary things that users expect. The package can be found in the Software Center. If it is not showing up in a search, make sure to check the box next to proprietary software in the Software Center preferences.</span></p>
<p><strong>Networking Support:</strong></p>
<p><span style="font-weight: normal;">Ubuntu comes with a very good network manager, called&#8230; network manager. It allows you to manage wireless connections, fixed line, broadband, DSL and VPN connections, ans also allows you to adjust settings such as static IP (v4 and v6) and DNS.</span></p>
<div id="attachment_217" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-network-settings.png" rel="lightbox"><img class="size-medium wp-image-217" title=" ubuntu-network-settings" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-network-settings-300x176.png" alt="" width="300" height="176" /></a><p class="wp-caption-text">Ubuntu Network Manager</p></div>
<p><span style="font-weight: normal;">In the past, Ubuntu has had sketchy wireless support. In the current version, it works without any hassles, and with no driver installs on the few computers that I&#8217;ve installed it on so far.</span></p>
<div id="attachment_218" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-wifi-spots.png" rel="lightbox"><img class="size-medium wp-image-218" title=" ubuntu-wifi-spots" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-wifi-spots-300x187.png" alt="" width="300" height="187" /></a><p class="wp-caption-text">The Wifi Selector</p></div>
<p><span style="font-weight: normal;">File sharing is separate from this manager, but still provided. Ubuntu can communicate with windows networks through a program called Samba. When you enable sharing for the first time (right click on folder in Nautilus file manager and select sharing), Some packages will be downloaded and your share should be visible in the windows network. This can sometimes be tricky if things are unexpected such as the workgroup name not being &#8220;WORKGROUP&#8221;. But some web searches and helpful forums will no doubt get you going in no time.</span></p>
<p><strong>What about my favorite Windows Games and Programs?</strong></p>
<p><span style="font-weight: normal;">For those things that have no Linux alternative, or you just can&#8217;t bare to live without, There is a really useful program called Wine. It is a windows compatibility layer that will allow you to install and run windows programs on a virtual C:\ Drive. The software run through Wine is generally quite stable and fast. You should refer to the </span><a href="http://appdb.winehq.org/"><span style="font-weight: normal;">Wine App DB</span></a><span style="font-weight: normal;"> to see how well your favorite application runs. If it&#8217;s rated platinum, you should have no worries.</span></p>
<p><span style="font-weight: normal;">To install Wine, search for it in the Software Center. After it is installed, any .EXE files should be set to open with Wine.</span></p>
<p><strong>Usability and Accessibility:</strong></p>
<p><span style="font-weight: normal;">Canonical have produced a Linux distribution that is very user-friendly, with many things users might have once spent hours trying to set up such as wireless networking functioning straight out of the box. Menus are intuitive and well-sorted and categorized. Most importantly, since this software is supported and popular, you can get help when things go wrong.</span></p>
<p><span style="font-weight: normal;">Ubuntu also also includes accessibility features such as keyboard selection at login for multi-lingual systems, and also a screen reader and magnifier for those with poor eyesight. There are a few other accessibility options which I have not yet explored.</span></p>
<p><strong>Tweakability:</strong></p>
<p><span style="font-weight: normal;">As with most Linux distributions, Ubuntu can be tweaked by a skilled user to achieve very specific tasks. Almost everything can be customized. Through the synaptic package manager, new packages can be downloaded and current ones can be uninstalled, applications can be set to execute at system start, the bootloader can be modified, splash screens can be changed, and so on.</span></p>
<p><strong>Netbooks:</strong></p>
<p><span style="font-weight: normal;">Ubuntu can also be installed as a &#8220;Netbook Remix&#8221;, which is basically the standard Ubuntu with a few tweaks and a new application manager to make it easier to use on the small screen. Applications are forced to full screen to avoid mess and everything is bold and well-sorted into user-friendly menus. We have installed this on our netbook and the windows install never gets used anymore. The boot-up is much faster and in no time we&#8217;re browsing the web.</span></p>
<div id="attachment_220" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-netbook-remix-910.jpg" rel="lightbox"><img class="size-medium wp-image-220" title=" ubuntu-netbook-remix-910" src="http://www.cloudwisp.net/wp-content/uploads/2010/01/ubuntu-netbook-remix-910-300x175.jpg" alt="" width="300" height="175" /></a><p class="wp-caption-text">Netbook Remix main screen</p></div>
<p><strong>The Verdict:</strong></p>
<p><span style="font-weight: normal;">I would have to say I&#8217;m very impressed with the Karmic Koala. In about a month of using it, I have not had any serious problems, though I have learnt plenty of console commands along the way trying to personalize the system to my needs. I have found the free built-in and downloaded applications useful and enjoyable.</span></p>
<p><span style="font-weight: normal;">The most compelling fact, given that Ubuntu is stable, supported, user-friendly and has plenty of available software, is that it costs absolutely nothing. A copy of Windows 7 Home costs US$180 standalone, and for the professional version Windows 7 Ultimate, you would pay almost US$300. </span></p>
<p><span style="font-weight: normal;">And being free does not mean it is lacking. &#8220;What about the media center?&#8221; you might say. You might like to try xmbc, a free and open source application available for Linux. </span></p>
<p><span style="font-weight: normal;">Ubuntu also has a server release, with a special kernel, security and applications to easily run a server. This release is also free of charge.</span></p>
<p><span style="font-weight: normal;">The only thing that stops me from a complete move to Ubuntu, is that one of my favorite online games, Dark Age of Camelot, has some problems running under Wine. When those problems are resolved in later releases, I will see no good reason to keep Windows. But until then, it&#8217;s good to know that Ubuntu will happily run along side any other OS.</span></p>
<p><span style="font-weight: normal;">I recommend to anyone that they give it a try. </span></p>
<p></strong></strong></p>

<p><a href="http://feedads.g.doubleclick.net/~a/1BPDxXRdt7SaUaFVWNTjRj2hw4k/0/da"><img src="http://feedads.g.doubleclick.net/~a/1BPDxXRdt7SaUaFVWNTjRj2hw4k/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/1BPDxXRdt7SaUaFVWNTjRj2hw4k/1/da"><img src="http://feedads.g.doubleclick.net/~a/1BPDxXRdt7SaUaFVWNTjRj2hw4k/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/tech-news/ubuntu-linux/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Discussing the Cloud</title>
		<link>http://www.cloudwisp.net/editorials/discussing-the-cloud/</link>
		<comments>http://www.cloudwisp.net/editorials/discussing-the-cloud/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 02:43:45 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Editorials]]></category>
		<category><![CDATA[access anywhere]]></category>
		<category><![CDATA[chrome OS]]></category>
		<category><![CDATA[cloud]]></category>
		<category><![CDATA[cloud computing]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[google chrome]]></category>
		<category><![CDATA[privacy]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[quantum]]></category>
		<category><![CDATA[quibit]]></category>
		<category><![CDATA[server farm]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=204</guid>
		<description><![CDATA[The buzzword of the next generation of web programmers is the "cloud", or cloud computing. It is the centralization of processing power and storage into the web. I'm going to take a look into the risks and rewards of this new paradigm. <p>Continue reading <a href="http://www.cloudwisp.net/editorials/discussing-the-cloud/">Discussing the Cloud</a></p>]]></description>
			<content:encoded><![CDATA[<p>The buzzword of the next generation of web programmers is the &#8220;cloud&#8221;, or cloud computing. It is the centralization of processing power and storage into the web. I&#8217;m going to take a look into the risks and rewards of this new paradigm.</p>
<p>Google recently gave us a first look at their new Chrome operating system, designed for netbooks. The new operating system seeks to provide users with an OS solely for using the web.</p>
<div id="attachment_322" class="wp-caption alignnone" style="width: 446px"><a href="http://www.cloudwisp.net/wp-content/uploads/2009/12/google-chrome-os-screen.jpg" rel="lightbox"><img class="size-full wp-image-322" title="google-chrome-os-screen" src="http://www.cloudwisp.net/wp-content/uploads/2009/12/google-chrome-os-screen.jpg" alt="" width="436" height="316" /></a><p class="wp-caption-text">Screenshot of Chrome OS</p></div>
<p>In essence, the Chrome browser IS the operating system. Installing new binaries will be impossible and the system will repair and update itself automatically, meaning a far greater level of security than any OS before it. Of course this also means that everything you do is dependent on a connection to the internet and performed on a server out in the <em>cloud</em></p>
<p>By putting money and effort into this project, Google shows their commitment to cloud computing as the future of computing in life, work and entertainment.</p>
<p><strong>The Risks:</strong></p>
<p>The gamble inherent in centralized processing and storage is self-evident. What happens when the server goes down, or even just the connection between the client and the server?</p>
<p>Some of Google&#8217;s own cloud applications seek to address such risks with offline access to the applications through Gears. This however will not allow a user access to collaborative, dynamic and social information that requires online interaction.</p>
<p>Another risk inherent in the cloud, is one of privacy. To store personal and private data in the cloud means giving over control of that data to a third party, if only by physically containing it within their online storage. What measures are there, or will there be in place to protect that data from third parties.</p>
<p>An example of the tenuous nature of privacy can be found with the RIAA&#8217;s (recording industry association of america) interaction with ISP&#8217;s. A simple assurance of foul play by RIAA, without court/judiciary intervention compels many ISP&#8217;s to warn and ban their users.</p>
<p>This is an example of power held by an organization. But power to threaten and intimidate can come from government also. And where there is power there is almost always corruption.</p>
<p>So either by internal or external forces on the keepers of data in the cloud, that data may not always be secure.</p>
<p><strong>The Rewards:</strong></p>
<p>Access anywhere&#8230; this has to be one of the greatest advantages of cloud computing. The ability for our work and social lives to take place from anywhere, upon a common platform that spans all devices and computers&#8230; the web browser.</p>
<p>Currently I am writing this article on the web inside my browser through a javascript and php based content management portal called Wordpress.</p>
<p>HTML5 will bring with it web-based applications closer resembling those that are currently found offline on the PC. And even now, applications in javascript and flash go along way to achieving that goal.</p>
<p>One that has recently taken my attention is a web based Photoshop clone called <a href="http://www.pixlr.com/editor/">Pixlr</a> created with flash.</p>
<div id="attachment_323" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2009/12/pixlr-ss.jpg" rel="lightbox"><img class="size-medium wp-image-323" title=" pixlr ss" src="http://www.cloudwisp.net/wp-content/uploads/2009/12/pixlr-ss-300x189.jpg" alt="" width="300" height="189" /></a><p class="wp-caption-text">Pixlr - Flash Photoshop clone</p></div>
<p>Another example showcasing some of what browser native javascript can do is Google&#8217;s own document suite, with a Presentation Creator/viewer, Word Processor and Spreadsheet application with plenty of nice features built in. Flowcharts and diagrams can also be created within the presentation and word processing apps.</p>
<div id="attachment_325" class="wp-caption alignnone" style="width: 310px"><a href="http://www.cloudwisp.net/wp-content/uploads/2009/12/googlePresentation.jpg" rel="lightbox"><img class="size-medium wp-image-325" title=" googlePresentation" src="http://www.cloudwisp.net/wp-content/uploads/2009/12/googlePresentation-300x211.jpg" alt="" width="300" height="211" /></a><p class="wp-caption-text">Google&#39;s web-based presentation software</p></div>
<p>So you can see the access-anywhere advantages of the cloud are not only restricted to simple web applications, but an increasingly advanced range of software.</p>
<p><strong>The coming age</strong></p>
<p>Freedom is the name of the game. The future will find us much more detached from our home PC&#8217;s. Our important data and applications will be accessible from anywhere. At the beach, at the office, at home, and any old terminal with a connection to the internet.</p>
<p>Imagine being on holidays with a camera full of video. It won&#8217;t be long and you&#8217;ll be able to plug that camera into any computer and edit your movies straight from the browser. Things such as film editing, once confined only to a powerful PC, will use fast internet and powerful servers to achieve their goals.</p>
<p>And this will ultimately be the shining advantage of the cloud. Those whose processing requirements are varied will not have to commit to a single build machine. The computer the user is sitting at will be an afterthought for many users (besides perhaps the size of the monitor). The majority of their work can be done on a supercomputer in the cloud.</p>
<p>The server-centric model will perhaps also drive the development of quantum computing, allowing for infinitely more powerful processing on the server, and ultimately allowing more of the work of the local computer to be transferred to the server. Google recently announced that it has used quasi-quantum computing to speed up image recognition (see <a href="http://www.newscientist.com/article/dn18272-google-demonstrates-quantum-computer-image-search.html">here</a>). While it is questionable whether this can truly be considered quantum computing yet, it clearly shows their intent.</p>
<p>Heading into this new age of the cloud, we can perhaps look towards Google as the most prominent leader, championing the new paradigm, but we can already see companies across the I.T. spectrum picking up this ball and running with it, helping to carry it towards success.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/u5_HUFc40GX3JiB-iDcSmFcj3zg/0/da"><img src="http://feedads.g.doubleclick.net/~a/u5_HUFc40GX3JiB-iDcSmFcj3zg/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/u5_HUFc40GX3JiB-iDcSmFcj3zg/1/da"><img src="http://feedads.g.doubleclick.net/~a/u5_HUFc40GX3JiB-iDcSmFcj3zg/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/editorials/discussing-the-cloud/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AJAX for beginners</title>
		<link>http://www.cloudwisp.net/programming/ajax-for-beginners/</link>
		<comments>http://www.cloudwisp.net/programming/ajax-for-beginners/#comments</comments>
		<pubDate>Tue, 10 Nov 2009 18:18:50 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[beginners]]></category>
		<category><![CDATA[DHTML]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[shout]]></category>
		<category><![CDATA[shoutBox]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=181</guid>
		<description><![CDATA[The advent of AJAX (Asynchronous Javascript and XML) has opened up new doors to web developers, allowing for interaction with and display of database and other external data in a web document, without the need to load a new page.

This is my tutorial for beginners wanting to use AJAX on their websites. <p>Continue reading <a href="http://www.cloudwisp.net/programming/ajax-for-beginners/">AJAX for beginners</a></p>]]></description>
			<content:encoded><![CDATA[<p>The advent of AJAX (Asynchronous Javascript and XML) has opened up new doors to web developers, allowing for interaction with and display of database and other external data in a web document, without the need to load a new page.</p>
<p>This is my tutorial for beginners wanting to use AJAX on their websites.</p>
<p><strong>xmlHttpRequest</strong></p>
<p>AJAX is made possible by a DOM API by the name of xmlHttpRequest, which allows HTTP or HTTPS requests to be initiated and handled from within Javascript.</p>
<p>Below is the function to place in your .js file for the current document.</p>

<div class="wp_codebox"><table width="100%" ><tr id="p1811"><td class="code" id="p181code1"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> xmlRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> xmlHttp<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">XMLHttpRequest</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  	<span style="color: #006600; font-style: italic;">// code for IE7+, Firefox, Chrome, Opera, Safari</span>
  		xmlHttp<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">ActiveXObject</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #006600; font-style: italic;">// code for IE6, IE5</span>
		xmlHttp<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Your browser does not support XMLHTTP!&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> xmlHttp<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><strong>Grabbing and Displaying a Record-set</strong></p>
<p>Suppose you wanted to display data on your website that is updated every 10 seconds, showing a list of recent entries into a shout-out wall table, looking a bit like this:</p>
<p><em><strong>Louis</strong>: Love the site!</em></p>
<p>Disregarding the process beyond the scope of this tutorial (of entering the data into the database), we will need to take these steps to achieve this outcome:<br />
1. Write the query and output server-side script (php for this tutorial)<br />
2. Write some javascript to request the server-side script, and output the response to a designated area of the site.</p>
<p><strong>The Shout-out Table</strong></p>
<p>In the database, we will have a table called &#8220;shoutouts&#8221; with the following structure:<br />
<span style="text-decoration: underline;">soID</span>(int,auto_increment),userName(varchar 50),shoutOutMsg(varchar 255)</p>
<p><strong>The PHP script</strong></p>
<p>The script below will show you how to query the database and output the results. The query uses a limit to display only the most recent shout-outs.</p>
<p><strong>getShoutOuts.php</strong></p>

<div class="wp_codebox"><table width="100%" ><tr id="p1812"><td class="code" id="p181code2"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">include</span> <span style="color: #0000ff;">&quot;connect.php&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$sql</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;SELECT * FROM shoutouts ORDER BY soID DESC LIMIT 5&quot;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$result</span><span style="color: #339933;">=</span><span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$sql</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">mysql_errno</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;ERROR|&quot;</span><span style="color: #339933;">.</span><span style="color: #990000;">mysql_error</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;OK|&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$row</span><span style="color: #339933;">=</span><span style="color: #990000;">mysql_fetch_assoc</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$result</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;&lt;strong&gt;&quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$row</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'userName'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&lt;/strong&gt;: &quot;</span><span style="color: #339933;">.</span><span style="color: #000088;">$row</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'shoutOutMsg'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>We use &#8220;ORDER BY soID DESC&#8221; to make the latest posts show up first, and &#8220;LIMIT 5&#8243; to select the first 5 out of this reversed order set. The script then loops through each of the 5 records and outputs a row of html that displays the user name and message.</p>
<p><strong>The HTML</strong></p>
<p>We need a place within our document to put the shouts. You can create elements with javascript, but for beginners it may be easier to simply add a placeholder element in the source document. Either way, the element must have an ID that can be called upon later by the javascript function, looking like this:</p>
<p><strong>The Javascript</strong></p>
<p>Our Javascript will consist of a function that will request the data  and subsequently insert it into the document. You should take note that the function called upon by this script &#8220;xmlRequest&#8221; was shown at the beginning of the tutorial.</p>

<div class="wp_codebox"><table width="100%" ><tr id="p1813"><td class="code" id="p181code3"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> getShoutOuts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> xmlObject<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> xmlRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	xmlObject.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;getShoutOuts.php&quot;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	xmlObject.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	xmlObject.<span style="color: #660066;">onreadystatechange</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>xmlObject.<span style="color: #660066;">readyState</span><span style="color: #339933;">==</span>4<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> returnString<span style="color: #339933;">=</span>xmlObject.<span style="color: #660066;">responseText</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;|&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>returnString<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;OK&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">//query was successful</span>
				<span style="color: #003366; font-weight: bold;">var</span> returnedHTML<span style="color: #339933;">=</span>returnString<span style="color: #009900;">&#91;</span>1<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
				document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'shoutContainer'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span><span style="color: #339933;">=</span>returnedHTML<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>returnString<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">==</span><span style="color: #3366CC;">&quot;ERROR&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #006600; font-style: italic;">//query failed in php and reported an error</span>
				<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>returnString<span style="color: #009900;">&#91;</span>1<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #003366; font-weight: bold;">var</span> t<span style="color: #339933;">=</span>setTimeout<span style="color: #009900;">&#40;</span>getShoutOuts<span style="color: #339933;">,</span>10000<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Simply invoke the function getShoutOuts() on the loading of your document, and the 5 most recent shoutOut entries will be displayed on your page within the shoutContainer div element.</p>
<p><strong>General note about the Ajax Request</strong>:</p>
<p>There&#8217;s a lot I could say about dealing with these AJAX requests, but something that is often not noticed when starting to use them, is that the onreadystatechange function you construct, will not execute until data is returned. So even though it is above the script below it, it will not execute before it but after it at some point undetermined because of the delay in communications.</p>
<p>What this means&#8230; is if you set a variable using data returned from an AJAX request, don&#8217;t expect it to be available until xmlObject.readyState==4 and the code within that has been executed.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/oCt9KWGuZZq_9MPx2TeGRZrLNWg/0/da"><img src="http://feedads.g.doubleclick.net/~a/oCt9KWGuZZq_9MPx2TeGRZrLNWg/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/oCt9KWGuZZq_9MPx2TeGRZrLNWg/1/da"><img src="http://feedads.g.doubleclick.net/~a/oCt9KWGuZZq_9MPx2TeGRZrLNWg/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/programming/ajax-for-beginners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Point in a Polygon</title>
		<link>http://www.cloudwisp.net/programming/point-in-a-polygon/</link>
		<comments>http://www.cloudwisp.net/programming/point-in-a-polygon/#comments</comments>
		<pubDate>Mon, 09 Nov 2009 18:28:28 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[click]]></category>
		<category><![CDATA[event listener]]></category>
		<category><![CDATA[grid]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mouse events]]></category>
		<category><![CDATA[mouseover]]></category>
		<category><![CDATA[point in polygon]]></category>
		<category><![CDATA[polygon]]></category>
		<category><![CDATA[ray casting]]></category>
		<category><![CDATA[raycasting]]></category>
		<category><![CDATA[tiles]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=171</guid>
		<description><![CDATA[I just though I might share a function that I found in the course of trying to capture accurate mouse events in a grid Map editor for my isometric game. The function can be used to find out if a given coordinate falls within a polygon, defined by it's bounding points. <p>Continue reading <a href="http://www.cloudwisp.net/programming/point-in-a-polygon/">Point in a Polygon</a></p>]]></description>
			<content:encoded><![CDATA[<p>I just though I might share a function that I found in the course of trying to capture accurate mouse events in a grid Map editor for my isometric game. The function can be used to find out if a given coordinate falls within a polygon, defined by it&#8217;s bounding points.</p>
<p>This is a function by Jonas Raoni Soares Silva, taken from <a href="http://jsfromhell.com/math/is-point-in-poly">here</a>:</p>

<div class="wp_codebox"><table width="100%" ><tr id="p1714"><td class="code" id="p171code4"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> isPointInPoly<span style="color: #009900;">&#40;</span>poly<span style="color: #339933;">,</span> pt<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> c <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> i <span style="color: #339933;">=</span> <span style="color: #339933;">-</span>1<span style="color: #339933;">,</span> l <span style="color: #339933;">=</span> poly.<span style="color: #660066;">length</span><span style="color: #339933;">,</span> j <span style="color: #339933;">=</span> l <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> <span style="color: #339933;">++</span>i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> l<span style="color: #339933;">;</span> j <span style="color: #339933;">=</span> i<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>poly<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> pt.<span style="color: #660066;">y</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> pt.<span style="color: #660066;">y</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> poly<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>poly<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span> pt.<span style="color: #660066;">y</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> pt.<span style="color: #660066;">y</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> poly<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>pt.<span style="color: #660066;">x</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>poly<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">-</span> poly<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>pt.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poly<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #009900;">&#40;</span>poly<span style="color: #009900;">&#91;</span>j<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">-</span> poly<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> poly<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span>
        <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">=</span> <span style="color: #339933;">!</span>c<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">return</span> c<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>The function takes an object containing a property x, and property y, as well as an array, containing the bounding points of the polygon.</p>
<p>If you&#8217;re interested in how this applied to my isometric grid space, I&#8217;ll go over the basic concept below:</p>
<p>The grid space is made up of 400 (20&#215;20 grid) images, layered and spaced in the DOM at a ratio of 2:1 W:H, making it look like a squashed diamond.</p>
<p>If we know the top and left value of each image, these can be used to construct an array of polygon coordinates for each tile.</p>
<p>Imagine a diamond in a rectangle shaped image. The left value will correspond to the x value of the first point, going from left to right, clockwise around the diamond polygon, the top value will correspond to the y value of the second point.</p>
<p>So going around the diamond, it would look like this;</p>

<div class="wp_codebox"><table width="100%" ><tr id="p1715"><td class="code" id="p171code5"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> polyPoints<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">new</span> Array<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// put this in global</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// values known: topVal, leftVal, tileHeight and tileWidth (W/H of diamond in each tile image)</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//for each tile(tileX,tileY):</span>
polyPoints<span style="color: #009900;">&#91;</span>tileX<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;_&quot;</span><span style="color: #339933;">+</span>tileY<span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span><span style="color: #009900;">&#91;</span>
<span style="color: #009900;">&#123;</span>x<span style="color: #339933;">:</span>leftVal<span style="color: #339933;">,</span>y<span style="color: #339933;">:</span>topVal<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>tileHeight<span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#123;</span>x<span style="color: #339933;">:</span>leftVal<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>tileWidth<span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>y<span style="color: #339933;">:</span>topVal<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#123;</span>x<span style="color: #339933;">:</span>leftVal<span style="color: #339933;">+</span>tileWidth<span style="color: #339933;">,</span>y<span style="color: #339933;">:</span>topVal<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>tileHeight<span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
<span style="color: #009900;">&#123;</span>x<span style="color: #339933;">:</span>leftVal<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>tileWidth<span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>y<span style="color: #339933;">:</span>topVal<span style="color: #339933;">+</span>tileHeight<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
<span style="color: #006600; font-style: italic;">//don't forget to repeat the very first point to complete the polygon</span>
<span style="color: #009900;">&#123;</span>x<span style="color: #339933;">:</span>leftVal<span style="color: #339933;">,</span>y<span style="color: #339933;">:</span>topVal<span style="color: #339933;">+</span><span style="color: #009900;">&#40;</span>tileHeight<span style="color: #339933;">/</span>2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Now to determine if an event such as click or mousemove is within one of the polygons, an event listener must be added to the entire surrounding element, and on each event trigger, the entire array contained in polyPoints must be checked with the function isPointInPoly;</p>
<p>So when you have cursorX, cursorY, load them into an object and pass it to the following function:</p>

<div class="wp_codebox"><table width="100%" ><tr id="p1716"><td class="code" id="p171code6"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> gridSize<span style="color: #339933;">=</span><span style="color: #CC0000;">20</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//global declaration</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> isPosInTiles<span style="color: #009900;">&#40;</span>cursorPos<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> isFound<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> foundCoord<span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> x<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>x<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span>gridSize<span style="color: #339933;">;</span>x<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> y<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>y<span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;=</span>gridSize<span style="color: #339933;">;</span>y<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>isPointInPoly<span style="color: #009900;">&#40;</span>cursorPos<span style="color: #339933;">,</span>polyPoints<span style="color: #009900;">&#91;</span>x<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;_&quot;</span><span style="color: #339933;">+</span>y<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			isFound<span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			foundCoord<span style="color: #339933;">=</span><span style="color: #009900;">&#123;</span>x<span style="color: #339933;">:</span>x<span style="color: #339933;">,</span>y<span style="color: #339933;">:</span>y<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>isFound<span style="color: #339933;">==</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>
	<span style="color: #000066; font-weight: bold;">return</span> foundCoord<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>If the function returns anything other than false, then the event has taken place within one of the tiles, and the tile&#8217;s x and y values within the grid will be returned and can subsequently be used.</p>
<p>All in all, a very handy function, which I&#8217;m sure will be used many more times in the course of my work.</p>

<p><a href="http://feedads.g.doubleclick.net/~a/Ab4opVGZMUgMz_Afr6amSPtVIXc/0/da"><img src="http://feedads.g.doubleclick.net/~a/Ab4opVGZMUgMz_Afr6amSPtVIXc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/Ab4opVGZMUgMz_Afr6amSPtVIXc/1/da"><img src="http://feedads.g.doubleclick.net/~a/Ab4opVGZMUgMz_Afr6amSPtVIXc/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/programming/point-in-a-polygon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>z-index Organization strategy</title>
		<link>http://www.cloudwisp.net/programming/z-index-organization-strategy/</link>
		<comments>http://www.cloudwisp.net/programming/z-index-organization-strategy/#comments</comments>
		<pubDate>Thu, 05 Nov 2009 22:06:40 +0000</pubDate>
		<dc:creator>Rols</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[layers]]></category>
		<category><![CDATA[organization]]></category>
		<category><![CDATA[strategy]]></category>
		<category><![CDATA[z-index]]></category>
		<category><![CDATA[zIndex]]></category>

		<guid isPermaLink="false">http://www.cloudwisp.net/?p=165</guid>
		<description><![CDATA[<p>In my latest adventure in the land of Javascript I have streamlined my strategy for organizing my z-index structure for complex applications. Complex being where &#8220;windows&#8221; and various items may need to be laid over the top of other elements in the DOM. I thought I would share this strategy.</p>
<p></p>
<p>in the global section of my javascript document, I declare a lower and upper zIndex boundary for each &#8220;layer&#8221; within the document.</p>
<p>For example, I might have a space used for a <p>Continue reading <a href="http://www.cloudwisp.net/programming/z-index-organization-strategy/">z-index Organization strategy</a></p>]]></description>
			<content:encoded><![CDATA[<p>In my latest adventure in the land of Javascript I have streamlined my strategy for organizing my z-index structure for complex applications. Complex being where &#8220;windows&#8221; and various items may need to be laid over the top of other elements in the DOM. I thought I would share this strategy.</p>
<p><span id="more-165"></span></p>
<p>in the global section of my javascript document, I declare a lower and upper zIndex boundary for each &#8220;layer&#8221; within the document.</p>
<p>For example, I might have a space used for a chess game, laid out in an isometric fashion, meaning chess pieces will overlap to some degree. And all chess pieces will lay over the board (consisting of several layers giving the illusion of a single board). In addition, several menus will be laid over the entire game viewer when called.</p>
<p>So in this example, my global declarations might look like this.</p>

<div class="wp_codebox"><table width="100%" ><tr id="p1658"><td class="code" id="p165code8"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> numBoardLayers<span style="color: #339933;">=</span><span style="color: #CC0000;">3</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> numWindowLayers<span style="color: #339933;">=</span><span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> numPieces<span style="color: #339933;">=</span><span style="color: #CC0000;">32</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> boardLower<span style="color: #339933;">=</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> boardUpper<span style="color: #339933;">=</span>boardLower<span style="color: #339933;">+</span>numBoardLayers<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pieceLower<span style="color: #339933;">=</span>boardUpper<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> pieceUpper<span style="color: #339933;">=</span>pieceLower<span style="color: #339933;">+</span>numPieces<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> windowLower<span style="color: #339933;">=</span>pieceUpper<span style="color: #339933;">+</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> windowUpper<span style="color: #339933;">=</span>windowLower<span style="color: #339933;">+</span>numWindowLayers<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>As you can see, the number of layers in the board may be increased etc without the need to change scores of z-index values. Now that the global variables are set, they can be used within the functions that construct the board.</p>
<p>For example, a chess piece is rendered into the DOM at tile number (x), the z-index value can be set at pieceLower+(x)-1</p>

<p><a href="http://feedads.g.doubleclick.net/~a/8WgbYNN6XKmCk-pPJXnZHv-LHHI/0/da"><img src="http://feedads.g.doubleclick.net/~a/8WgbYNN6XKmCk-pPJXnZHv-LHHI/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/8WgbYNN6XKmCk-pPJXnZHv-LHHI/1/da"><img src="http://feedads.g.doubleclick.net/~a/8WgbYNN6XKmCk-pPJXnZHv-LHHI/1/di" border="0" ismap="true"></img></a></p>]]></content:encoded>
			<wfw:commentRss>http://www.cloudwisp.net/programming/z-index-organization-strategy/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
