<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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/"
	>

<channel>
	<title>jole.ca &#187; design</title>
	<atom:link href="http://jole.ca/posts/tag/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://jole.ca</link>
	<description>Joel Adria Technical Services</description>
	<lastBuildDate>Mon, 07 May 2012 06:53:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>How Wave Works</title>
		<link>http://jole.ca/posts/how-wave-works/</link>
		<comments>http://jole.ca/posts/how-wave-works/#comments</comments>
		<pubDate>Mon, 12 Sep 2011 20:27:19 +0000</pubDate>
		<dc:creator>Joel Adria</dc:creator>
				<category><![CDATA[Edmonton]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[Interactve]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[edmonton]]></category>
		<category><![CDATA[photo]]></category>
		<category><![CDATA[ualberta]]></category>
		<category><![CDATA[wave]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://jole.ca/?p=4127</guid>
		<description><![CDATA[Wave consists of many different hardware and software technologies all working together to create a final product. Many different students and faculty members contributed &#8230; <a href="http://jole.ca/posts/how-wave-works/">Read More <span class="meta-nav">&#62;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Wave consists of many different hardware and software technologies all working together to create a final product. Many different students and faculty members contributed to the final project. Below is a summary of the components I worked on.</p>
<p>First is a very brief video showing highlights from a portion of Wave&#8217;s development. View the <a href="http://www.youtube.com/watch?v=V4TcW_aVITo" target="_blank">full clips on YouTube</a>.</p>
<p><object width="540" height="330" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/P2Vv8YSWy1Q?version=3&amp;hl=en_US" /><param name="allowfullscreen" value="true" /><embed width="540" height="330" type="application/x-shockwave-flash" src="http://www.youtube.com/v/P2Vv8YSWy1Q?version=3&amp;hl=en_US" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object></p>
<p><span class="Apple-style-span" style="color: #000000; font-size: 29px; line-height: 43px;">Web App</span></p>
<p>The WaveArt.ca web app is the gateway to interaction.</p>
<div id="attachment_4133" class="wp-caption alignright" style="width: 328px"><a href="http://jole.ca/wp-content/uploads/DSC_5814-2.jpg"><img class="size-large wp-image-4133" title="Wave, the day before launch" src="http://jole.ca/wp-content/uploads/DSC_5814-2-1024x680.jpg" alt="" width="318" height="211" /></a><p class="wp-caption-text">Wave, the day before launch</p></div>
<p>When tapping on the &#8220;Interact&#8221; action item after scanning the QR code on-screen, they are taken to a grid of thumbnails representing the grid of cameras waveboard display. These thumbnails resize to fit the user&#8217;s device, and add labels if screen real estate permits. When tapping on the thumbnails, a request is sent to the server to &#8220;play back&#8221; the webcam on the waveboard. Should the webcams change, as they do every few minutes, the thumbnails automatically reload on the device to remain consistant with the waveboard.</p>
<p>When the user scans the QR code on-screen, a waveling ID and color, which is always visible at the top of the device, is assigned. Their session times out after a period of time to reduce conflicts. It is based off WebApp.net, a framework for developing mobile web applications.</p>
<h1>Quartz Compositions</h1>
<div id="attachment_4137" class="wp-caption alignleft" style="width: 264px"><img class="size-large wp-image-4137  " title="A Mac Mini running Quartz Visualizer" src="http://jole.ca/wp-content/uploads/untitled-shoot-5583-680x1024.jpg" alt="" width="254" height="383" /><p class="wp-caption-text">A Mac Mini running Quartz Visualizer</p></div>
<p>On the Wave Mac Pro (Wave-1), the webcams and poetry are rendered using the 8-core processor coupled with two high performance graphics cards. Quartz Composer is a visual development environment that allows complex graphical operations to be created without the need for traditional code. Despite the visual programming environment, Quartz Composer uses the same native graphics libraries in Mac OS X, which is entirely hardware accelerated.</p>
<p>The first composition polls a script on the local machine to generate the webcams, their names, and a word cloud related to the webcam. A MySQL database, stored on an external web server, serves as the central repository and communication between Web App, Quartz Composition, and the Wave Admin interface.</p>
<p>Real-time actions, such as a user tapping on a thumbnail or scanning a QR code, is activated by using the OSC patch in QC. When the user taps on their smartphone, a request is sent to a remote server, which checks the status of Wave-1, then relays the webcam request to Wave-1&#8242;s built-in web server. A PHP script on Wave-1 uses an OSC library to send out the message to the QC composition, and &#8220;playback&#8221; of the webcam is initiated. Despite the numerous &#8220;hops&#8221; needed to achieve this operation, interaction is very responsive.</p>
<h1>Wave Admin</h1>
<div id="attachment_4139" class="wp-caption alignleft" style="width: 310px"><a href="http://jole.ca/wp-content/uploads/Screenshot-2011-09-11-at-4.47.00-PM.png"><img class="size-medium wp-image-4139" title="Preview of Wave Web UI" src="http://jole.ca/wp-content/uploads/Screenshot-2011-09-11-at-4.47.00-PM-300x252.png" alt="" width="300" height="252" /></a><p class="wp-caption-text">A view of the Wave Admin UI</p></div>
<p>In order to maintain state and store complex information about the 500+ webcam collection, an external MySQL database manages most of the data associated with the webcam composition. Scripts on Wave-1 poll all webcams worldwide every 20 minutes, downloading and storing their full size images, and generating appropriate thumbnails for the Quartz composition and web app. Each webcam&#8217;s status is verified, and cross-checked with their predecessors to ensure that the webcam is not dormant. If the webcam has not been updated in a significant amount of time, it is suspended and not checked for 24 hours to reduce bandwidth and polling time. Suspended cameras are pulled out of circulation so they do not appear on the waveboard.</p>
<p>Wave downloads about 1000 images a day, or about 1 gigabyte of data to keep its information current, and emails the creators when it goes offline or has an error. Wave changes colour throughout the day, and turns off automatically at night to save energy.</p>
<p>All of this information can be managed from the Wave Admin web interface.</p>
<h1>Hardware</h1>
<div id="attachment_4131" class="wp-caption alignright" style="width: 328px"><a href="http://jole.ca/wp-content/uploads/DSC_5794-2.jpg"><img class="size-large wp-image-4131  " title="Wave contributors place the last cover, sealing up Wave" src="http://jole.ca/wp-content/uploads/DSC_5794-2-1024x680.jpg" alt="" width="318" height="211" /></a><p class="wp-caption-text">Wave contributors place the last cover, sealing up Wave</p></div>
<p>Two 60&#8243; LCD displays are used in Wave, connected to the Mac Pro via HDMI. A Mac Mini powers a third, smaller display, which provides patrons with facts and information about the installation. Finally, a fourth monitor is setup inside for administering Wave both locally and remotely.</p>
<p>A private Wireless LAN is used to join the two Macs and allow administration. If one computer has become disconnected from UWS, the other one can be used to reinitialize its WiFi connection.</p>
<p>&nbsp;</p>
<h1>Diagrams</h1>
<div id="attachment_4150" class="wp-caption aligncenter" style="width: 212px"><a href="http://jole.ca/wp-content/uploads/Technology-Diagram.001.png"><img class="size-medium wp-image-4150 " title="Technology Diagram.001" src="http://jole.ca/wp-content/uploads/Technology-Diagram.001-202x300.png" alt="" width="202" height="300" /></a><p class="wp-caption-text">Connectivity Diagram of Wave (Click to Enlarge)</p></div>
<div id="attachment_4151" class="wp-caption aligncenter" style="width: 310px"><a href="http://jole.ca/wp-content/uploads/Technology-Diagram.002.png"><img class="size-medium wp-image-4151 " title="Technology Diagram.002" src="http://jole.ca/wp-content/uploads/Technology-Diagram.002-300x140.png" alt="" width="300" height="140" /></a><p class="wp-caption-text">Audio Diagram (Click to Enlarge)</p></div>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fjole.ca%2Fposts%2Fhow-wave-works%2F&amp;title=How%20Wave%20Works" id="wpa2a_4"><img src="http://jole.ca/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://jole.ca/posts/how-wave-works/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Updated Layout</title>
		<link>http://jole.ca/posts/updated-layout/</link>
		<comments>http://jole.ca/posts/updated-layout/#comments</comments>
		<pubDate>Sun, 31 Aug 2008 04:46:18 +0000</pubDate>
		<dc:creator>Joel Adria</dc:creator>
				<category><![CDATA[Website]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[camera]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://jole.ca/wordpress/?p=1471</guid>
		<description><![CDATA[So as you may have noticed, the website has been redesigned quite a bit. Basically after spending way too much time on joleblog/flickrer I &#8230; <a href="http://jole.ca/posts/updated-layout/">Read More <span class="meta-nav">&#62;</span></a>]]></description>
			<content:encoded><![CDATA[<p>So as you may have noticed, the website has been redesigned quite a bit.</p>
<p><span style="text-decoration: line-through;">Basically after spending way too much time on joleblog/flickrer I decided I would be better off using some well built existing software so that every time I wanted to post something, it didn&#8217;t turn into a 4 hour impromptu coding session.</span></p>
<p>Not totally true really, I&#8217;m staying with flickrer for photo management, and then will have Wp-o-matic import them from a custom RSS feeder, where I can then add more details to the photos, but they will still stay in the gallery for legacy and for simpler importing of exif etc. </p>
<p>I know it&#8217;s a bit pathetic. My insistence on using server-lite tools is now a thing of the past. WordPress is the biggest server hog in the world, but the fact is, I&#8217;m running on Kevin&#8217;s underused enterprise class Dell PowerEdge anyway, so what&#8217;s the point in holding back? </p>
<p>So I now have some nice tagging and category features, and the posts from my blog and the gallery came over very nicely thanks to WordPress&#8217; new RSS import feature.</p>
<p>With any luck, the improved management features will mean more posts and more reliable updates. Oh, and <span style="text-decoration: line-through;">I&#8217;m hoping to get a Nikon D40 soon!</span></p>
<p>I got it! Some shots are below.</p>
<p> </p>
<p><strong>UPDATE</strong>: So it looks like someone is stealing the classes off my RSS feeds on it&#8217;s way into WordPress, so the lightbox is a bit messed at the moment. Fix soon?</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fjole.ca%2Fposts%2Fupdated-layout%2F&amp;title=Updated%20Layout" id="wpa2a_8"><img src="http://jole.ca/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://jole.ca/posts/updated-layout/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

