Blowing Through Lines

I don’t know where the capitalization came from, but it’s such a simple API for anyone who’s happy with AS3 (is there anyone who isn’t?) that FIVe3D worth the challenging finger-work. I made this demo in about 3 hours total, it draws bitmaps, and adds them to Sprite3Ds, and mimicks what we’ve been working on for 2 months in Papervision3D (I’ll definitly have a link to that when its fully launched).

For a great many simpler 3D applications, I think FIVe3D is the way-to-go, but Papervision3D still does have an edge in speed (when properly optimized that is) if dealing with more then 20 or so planes.

One quirk of FIVe3D that I initially didn’t get, was that the order of my addChild statements determines what shows up on top of what, not the Z value of the sprite, so included with this source is a handy depth sorter loop, that will work with any 53D setup.

FIVe3D Test Source

Also modified it a little so that height and width could be stored in the sprite3D class, i know bad me, but until i get my head around Mathieu’s version of Matrix3D. That ugly blinking plane on the right side is actually a series of bitmapDatas, that are playing back (like cached animation) that I learned from John Grden a few weeks ago. I’m working on my own version of a class to automatically create bmp animations from a timeline swf, unless his goes open source…

Finally had an excuse to make some connected springs, ala the Visual Thesaurus. This was the last of the tests before realizing that the project would be simpler.

Double-click a dot to add a child dot, or click and drag any dot to move it.

Some code will be on the way in a bit.

Sorry it has been so long since my last post. I doubt anyone is reading this anyways. In this article i’m going to attempt to show you what you need to know in order to upload a file (music in this case) into your rails application and safely tuck it away on amazons simple storage solution. I realize this is a very specific application. However, it took me two days to get this working properly so I figured i’d share what I did in order to get this working. I’m assuming you are using rails 2.1 (but that may not be required) and have already created your application. if not you can create and application by issuing the typical rails application_nam command

If you are just planning to upload file to S3 and do not need to manipulate them else do anything to them before they end up on the server. Then I suggest you just use the plugin.

simply install

script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/

after that just follow the instructions on http://clarkware.com/cgi/blosxom/2007/02/24 you should be up and running in no time with the help of this plugin

Lets assume you don’t want to use the plugin

But why would we not want to use the plugin:?

1. Way more code than you need for the task at hand
2. No simple way to manipulate the file or extract data from it before sending to S3


So now that we are going to perform this operation manually there are a few things you will need for this example. You will need to install the mp3info gem as root at command prompt.
gem install mp3info
gem install aws-s3
Say yes to any dependencies once those two gems successfully install you will have to restart your webserver and they will be ready to use in your application

I’m going to skip over a lot here because I don’t know how you want to configure your application however the steps are pretty simple create some scaffold. Make an upload form.
and then save the data. I’m only going to show you the model code. I believe everything is self explanatory from there. I will be happy to field any questions if anyone cares to ask. Enought chit chat show me the code

[-]^?View Code RUBY

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

require "ftools" require "aws/s3" require "mp3info" class Song < ActiveRecord::Base include AWS::S3 belongs_to :user has_one :song_metadata before_validation :set_all_meta_data after_save :write_file after_destroy :delete_file before_create :connect_to_amazon validates_inclusion_of :mime_type, :in =>%w( audio/mpeg audio/mpg ), :message =>"The file you uploaded is not an mp3" validates_inclusion_of :file_size, :in =>300.kilobytes..20.megabytes, :message=>"must be between 300k and 20mb" attr_accessor :id3tags def song=(file_data) @file_data = file_data end def write_file buckets = Service.buckets bucketexists=false buckets.each do |bucket| if bucket.name == AppConfig.ec2["bucket"] bucketexists=true end end if !bucketexists Bucket.create(AppConfig.ec2["bucket"]) end @file_data.rewind if !S3Object.exists? get_file_url, AppConfig.ec2["bucket"] createsong_meta S3Object.store(get_file_url, @file_data.read, AppConfig.ec2["bucket"],:access => :public_read) end end def createsong_meta m = SongMetadata.new self.song_metadata = m if id3tags.title m.title = id3tags.title else m.title = "No song name set" end if id3tags.artist m.artist = id3tags.artist else m.artist = "No artist name set" end if id3tags.album m.album = id3tags.album else m.album = "No album name set" end m.year = id3tags.year m.track_number= id3tags.tracknum m.save! end def get_song self.connect_to_amazon S3Object.value mp3_url, AppConfig.ec2["bucket"] end def delete_file self.connect_to_amazon S3Object.delete mp3_url, AppConfig.ec2["bucket"] end def set_all_meta_data if @file_data!="" && @file_data @file_data.rewind self.mime_type = @file_data.content_type if self.mime_type == "audio/mpg" || self.mime_type=="audio/mpeg" tmplocal = "#{RAILS_ROOT}/tmp/musicfiles" tmpname = "#{Time.now}-#{@file_data.original_filename}" File.makedirs(tmplocal) File.open("#{tmplocal}/#{tmpname}", "w") { |file| file.write(@file_data.read) } mymp3 = Mp3Info.open("#{tmplocal}/#{tmpname}") self.id3tags = mymp3.tag self.bitrate = mymp3.bitrate self.samplerate = mymp3.samplerate self.samplerate = mymp3.samplerate self.mpeg_version= mymp3.mpeg_version self.layer = mymp3.layer self.length = mymp3.length self.file_size = @file_data.size mymp3.close File.delete("#{tmplocal}/#{tmpname}") self.mp3_url = get_file_url end end end def get_file_url "#{user_id}/xrays/#{id}/song/#{@file_data.original_filename}" end def connect_to_amazon Base.establish_connection!(:access_key_id=> AppConfig.ec2["access_key"], :secret_access_key => AppConfig.ec2["secret_key"]) end end

That is really the meat and potatoes. It is all hanging out in the model nicely tucked away. getting the data out of S3 is simple and is left as an exercise for the reader. Obviously you need to insert your own access_key and secret key. I’m not making any assumptions about the configuration of your application and thus this is entirely us to you the reader as well. Hope this helps someone..

So we’ve been developing in Flex 3 for the last 3 months now, and I’m wondering why I didn’t switch earlier… Anyway a small annoyance that bothered me for the first couple weeks was the inability to double click any files that needed to be edited outside of Flex. It just throws this weird error:
Unable to open external editor…
(com.adobe.flexbuilder.ui.osx_3.0.194161)
Sort of more about the error here…

With a little research it seems that this is a problem with the System Editor settings with Eclipse itself (which Flex Builder is based, for the noobs like I me).

So taking a bit of a shot in the dark I looked through com.adobe.flexbuilder.ui.osx_3.0.194161, and it didn’t seem to have anything other then commands to open system editable? files. So just deleted the package from the plugins folder (actually i moved it to a plugins-disabled folder in the main Flex directory), and holy crap it worked!

So far I and my co-developer Sean, and our intern Derek haven’t come across any other errors, or changes in performance, just the unfettered ability to double-click FLAs and watch them load in Flash.

Give it a try and lemme know if your results vary. Though I suppose you should be doing so at your own risk…

This was part of a Rock’em Sock’em Robot game& 8212;for an internal sales project no less! At any rate the budget was good, but the timeline was a little tight, and I was still getting my head around AS3 and the new Flash 9 features.

So I had this idea:

I’m working with a bunch of designer’s who are really good with illustrator, and keyframe animating, but don’t have the time to animate all the movements (each head, body, upper arm x2 lower arm x2, legs, hands, feet… well you get the idea). So I needed a way to reduce the number of animations that the designers would be needed for, but also not create too many Tweeners or other hard coded animation solutions. I really needed bones, but those don’t seem to be arriving for a while, so the next best thing was automatically animated elbows (and knees). Fortunately for me the illustrator I was working with designed the robot’s arms and legs with even length upper and lower lengths so I could do some trig and get this:

1
2
3
4

var theta:Number = Math.acos((distance/2)/limbL)*180/Math.PI;
 
this.limb.rotation =  baseRotation - theta;
this.omoLimb.rotation = theta * 2;

Click and drag the hand or foot to see the automagic joint rotation

AS3 Joint class source file

Right now it’s limited to even length bones, but my little brother with the physics and math degrees, says he has a better equation, so as soon as I have time I’ll update the classes. A public SVN repository is in the works too, stay tuned.

During a day of red5 programming, in the hopes to get a true streaming solution for my flash projects I stumbled upon this little gem. I’ll post about my experiences with red5 at a later time. However, for now I think you should check out this excerpt from the rsyslogd man pages. We are using rsyslog in the hopes that we can log all the red5 events to a centralized server for easier reporting. Check back for updates on that. As always if you like this article please digg it and or leave a comment so we don’t feel like we are talking to ourselves…. Enjoy

At least the suggest violence as a last ditch effort. Hilarious open source world keep it up…

For an example site where I used this technique please refer to www.howcuteismypet.com you’ll notice that when you click on best / worst or most recent it is highlighted with a black underline. This type of highlighting seems trivial. However to do it in rails in a nice elegant way is not obvious. So without further a do, I present my method. This method dis-involves the controller which makes for a cleaner more centralized place for managing your highlighted navigation.

The primary thing required is a method for creating navigation items. I choose to put my method / helper. in the app/helpers/application_helper.rb that way it will be available to all all of my views. The method I chose to use is

1
2
3
4
5
6
7
8
9
10
11

def nav_selected_no_span(hash_name, selectedkey )
                result =""
                hash_name.each do |item|
                        if(item[0].to_s== selectedkey)
                                result +="<li class="selected"+item[0].to_s.gsub(" ", "_").downcase+" selected">"+link_to(item[0].to_s,item[1].to_s)+"</li>"
                        else
                                result +="<li class=""+item[0].to_s.gsub(" ","_").downcase+" ns">"+link_to(item[0].to_s,item[1].to_s)+"</li>"
                        end
                  end
                  return result
        end

This function is fairly, simple what it allows you to do in your view is, make an unorded list of your navigation items. You would use this method most likely in your app/views/layout/application.rb. An example of the navigation from howcuteismypet.com is:

6
7
8

<ul>
     <%= nav_selected_no_span([["Vote On Pets",home_path],["Best / Worst",best_worst_path],["Most Recent",most_recent_path]], params[:location] ) %>
</ul>

The important thing to notice is the params[:location] the function above says that if params[:location] matches one of the names like “Vote On Pets” then highlight that item. Pretty simple. Then in your css you can define the rules that make something selected. Now you may be wondering where params[:location] is set. And you would be correct to wonder that. That parameter is actually set in your routes file believe it or not. As an example i’ll show you the route for “Vote On Pets”. located in config/routes.rb your could do something like this.

map.home '', :controller => 'index', :action => 'index', :location=>'Vote On Pets'

if you wanted most recent you would do something like this

map.most_recent '/most_recent', :controller=>'index',:action=>'recent',:location=>'Most Recent'

The location parameter is sent to the helper and the correct items is selected. So I hope this helps you in your efforts to stay dry and much more organized.

Questions and comments are very welcome on this blog. We like to know we are not talking to ourselves, so if you would like further explanation please feel free to post a comment.

So a reader asked how to implement our accordion script using XML to populate it, and I think the results aren’t half bad. I’m not sure what he meant by a cervical shaped accordion though… Circular maybe? hopefully?

source files for the xml’d accordion

private function init()
{
	var request:URLRequest = new URLRequest("wp-content/xml/images.xml");
	loader = new URLLoader(request);
	loader.addEventListener(Event.COMPLETE, loadComplete);
}
 
private function loadComplete(evt:Event)
{
	data = XML(evt.target.data);
	trace(data.panel.length());
 
	accord = new accordion(500, 400, data.panel.length(), 20);
 
	for(var i:int=0; i < data.panel.length(); i++)
	{
		var panel:MovieClip = new NavPanel(data.panel[i].name);
		var contents:MovieClip = new ImgHolder(data.panel[i].img);
		accord.addPanel(panel, contents);
	}
	addChild(accord);
	accord.openPanel(1);
}

<?xml version="1.0" encoding="UTF-8"?>
<panels>
	<panel>
		<name>panel one</name>
		<img>img/1905143678_218d1aa13a.jpg</img>
	</panel>
	<panel>
		<name>panel zwei</name>
		<img>img/1904306625_fa9cf2cd33.jpg</img>
	</panel>
	<panel>
		<name>panel tre</name>
		<img>img/1904436509_2266d2daf2.jpg</img>
	</panel>
	<panel>
		<name>panel quattre</name>
		<img>img/1904437975_441fec52af.jpg</img>
	</panel>
</panels>

Recently I had to make tabs. Something that has been solved hundreds of times. However I didn’t want to fuck around with a special user interface framework like http://developer.yahoo.com/yui/. Since I use prototype on almost every project since its inception, I decided to just roll out my own solution using the prototype library as a base. It turns out that the implementation was incredibly simple. I have attached a working example for your copy and paste pleasure. The javascript is incredibly simple. The entire javascript programming was less than 25 lines.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var tablinks = null;
var tabcontent = null;
function handletab(event){
	var element = event.element();
	for(i=0;i<tablinks.length;i++){
		var tabli = tablinks[i].up('li');
		if(tablinks[i]==element){
			tabcontent[i].show();
			tabli.removeClassName('deactivetab');
			tabli.addClassName('activetab');
		}else{
			tabcontent[i].hide();
			tabli.removeClassName('activetab');
			tabli.addClassName('deactivetab');
		}
	}
}
function homepageSetup(){
	tablinks = $$('a.tablink');
	tabcontent = $$('div.tabcontent');
	for(i=0;i<tablinks.length;i++){
		tablinks[i].observe('click',handletab);
		tablinks[i].onclick = function(){return false};
	}
}

Prototype javascript css tabs - blowingthroughlines.com

If you find this article and or code useful feel free to leave a comment. I’d love to hear what you think.

This is exactly what you would think it is. I fucked around with getting these bounding values so you don’t have to. I think you will find this useful if a client says to you, “now how do I jump to a state”. You will need the prototype library for this to work. I use it for element selection. If you know how to get the element in other ways then you likely don’t need me to tell you how to change this code. If you would like to download prototype click here.

make sure you include the prototype library before the code for you map.

First the select box that you will need somewhere on your UI

The javascript you no doubt need, is the zoom to state code. It is basically a large switch statement with sensible latitudes and longitudes for zooming and centering. So here it is

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

function zoomState(){
	var sw;
	var ne;
	switch($('state').value){
		case 'AL':
			sw=new GLatLng(29.11377539511439, -92.7685546875); ne = new GLatLng(35.96022296929667, -80.4638671875);
			break;
		case 'AK':
			sw=new GLatLng(58.17070248348609, -175.166015625); ne = new GLatLng(71.63599288330606, -125.94726562500001);
			break;
		case 'AZ':
			sw=new GLatLng(30.977609093348686, -117.421875); ne = new GLatLng(37.68382032669382, -105.1171875);
			break;
		case 'AR':
			sw=new GLatLng(31.409912194070973, -97.998046875); ne = new GLatLng(38.08268954483802, -85.693359375);
			break;
		case 'CA':
			sw=new GLatLng(30.14512718337613, -127.13378906250001); ne = new GLatLng(43.13306116240612, -102.5244140625);
			break;
		case 'CO':
			sw=new GLatLng(35.55010533588551, -111.6650390625); ne = new GLatLng(41.88592102814744, -99.3603515625);
			break;
		case 'CT':
			sw=new GLatLng(40.75557964275588, -74.24560546875); ne = new GLatLng(42.27730877423709, -71.16943359375);
			break;
		case 'DE':
			sw=new GLatLng(37.361425501905146, -78.321533203125); ne = new GLatLng(40.52215098562377, -72.169189453125);
			break;
		case 'DC':
			sw=new GLatLng(37.142803443716836, -80.101318359375); ne = new GLatLng(40.3130432088809, -73.948974609375);
			break;
		case 'FL':
			sw=new GLatLng(24.86650252692691, -89.4287109375); ne = new GLatLng(32.008075959291055, -77.1240234375);
			break;
		case 'GA':
			sw=new GLatLng(29.286398892934763, -89.296875); ne = new GLatLng(36.12012758978146, -76.9921875);
			break;
		case 'HI':
			sw=new GLatLng(18.656654486539995, -160.499267578125); ne = new GLatLng(22.46180203533398, -154.346923828125);
			break;
		case 'ID':
			sw=new GLatLng(39.061849134291535, -127.17773437499999); ne = new GLatLng(50.54136296522161, -102.568359375);
			break;
		case 'IL':
			sw=new GLatLng(36.79169061907076, -95.009765625); ne = new GLatLng(43.02071359427862, -82.705078125);
			break;
		case 'IN':
			sw=new GLatLng(36.84446074079564, -92.26318359375); ne = new GLatLng(43.068887774169625, -79.95849609375);
			break;
		case 'IA':
			sw=new GLatLng(38.99357205820944, -99.99755859375); ne = new GLatLng(45.02695045318543, -87.69287109375);
			break;
		case 'KS':
			sw=new GLatLng(35.28150065789119, -104.39208984375); ne = new GLatLng(41.64007838467891, -92.08740234375);
			break;
		case 'KY':
			sw=new GLatLng(34.488447837809304, -91.4501953125); ne = new GLatLng(40.91351257612757, -79.1455078125);
			break;
		case 'LA':
			sw=new GLatLng(27.955591004642528, -98.67919921875); ne = new GLatLng(34.88593094075315, -86.37451171875);
			break;
		case 'ME':
			sw=new GLatLng(42.212245162885814, -75.12451171875); ne = new GLatLng(47.945786463687185, -62.81982421875);
			break;
		case 'MD':
			sw=new GLatLng(37.509725842937485, -80.057373046875); ne = new GLatLng(40.66397287638688, -73.905029296875);
			break;
		case 'MA':
			sw=new GLatLng(40.6723059714534, -75.047607421875); ne = new GLatLng(43.683763524273346, -68.895263671875);
			break;
		case 'MI':
			sw=new GLatLng(40.38002840251183, -90.17578125); ne = new GLatLng(46.28622391806705, -77.87109375);
			break;
		case 'MN':
			sw=new GLatLng(40.58058466412761, -105.5126953125); ne = new GLatLng(51.781435604431195, -80.9033203125);
			break;
		case 'MS':
			sw=new GLatLng(29.24806324379655, -95.361328125); ne = new GLatLng(36.08462129606931, -83.056640625);
			break;
		case 'MO':
			sw=new GLatLng(35.40696093270201, -98.7451171875); ne = new GLatLng(41.75492216766298, -86.4404296875);
			break;
		case 'MT':
			sw=new GLatLng(40.58058466412761, -122.12402343749999); ne = new GLatLng(51.781435604431195, -97.5146484375);
			break;
		case 'NE':
			sw=new GLatLng(38.70265930723801, -106.23779296875); ne = new GLatLng(44.762336674810996, -93.93310546875);
			break;
		case 'NV':
			sw=new GLatLng(35.79999392988527, -122.80517578125); ne = new GLatLng(42.114523952464246, -110.50048828125);
			break;
		case 'NH':
			sw=new GLatLng(42.512601715736665, -74.77294921875); ne = new GLatLng(45.43700828867389, -68.62060546875);
			break;
		case 'NJ':
			sw=new GLatLng(37.86618078529668, -77.926025390625); ne = new GLatLng(41.004775422229464, -71.773681640625);
			break;
		case 'NM':
			sw=new GLatLng(30.902224705171417, -111.708984375); ne = new GLatLng(37.614231415424165, -99.404296875);
			break;
		case 'NY':
			sw=new GLatLng(40.212440718286466, -80.88134765625); ne = new GLatLng(46.13417004624326, -68.57666015625);
			break;
		case 'NC':
			sw=new GLatLng(31.9148675032762, -87.1435546875); ne = new GLatLng(38.54816542304656, -74.8388671875);
			break;
		case 'ND':
			sw=new GLatLng(44.49650533109345, -106.80908203125); ne = new GLatLng(50.00773901463685, -94.50439453125);
			break;
		case 'OH':
			sw=new GLatLng(37.35269280367273, -87.978515625); ne = new GLatLng(43.5326204268101, -75.673828125);
			break;
		case 'OK':
			sw=new GLatLng(31.877557643340015, -104.12841796875); ne = new GLatLng(38.51378825951165, -91.82373046875);
			break;
		case 'OR':
			sw=new GLatLng(41.21172151054787, -126.123046875); ne = new GLatLng(47.040182144806664, -113.818359375);
			break;
		case 'PA':
			sw=new GLatLng(37.63163475580643, -83.43017578125); ne = new GLatLng(43.78695837311561, -71.12548828125);
			break;
		case 'RI':
			sw=new GLatLng(41.3500103516271, -72.2186279296875); ne = new GLatLng(42.108411365705855, -70.6805419921875);
			break;
		case 'SC':
			sw=new GLatLng(32.01739159980399, -83.814697265625); ne = new GLatLng(35.398005947151056, -77.662353515625);
			break;
		case 'SD':
			sw=new GLatLng(41.73852846935917, -106.36962890625); ne = new GLatLng(47.517200697839414, -94.06494140625);
			break;
		case 'TN':
			sw=new GLatLng(32.287132632616355, -92.900390625); ne = new GLatLng(38.89103282648846, -80.595703125);
			break;
		case 'TX':
			sw=new GLatLng(24.5271348225978, -112.060546875); ne = new GLatLng(38.341656192795924, -87.451171875);
			break;
		case 'UT':
			sw=new GLatLng(36.29741818650808, -117.44384765625); ne = new GLatLng(42.56926437219384, -105.13916015625);