Posted in interaction design, javascript | October 24th, 2009 No Comments »
So it’s a difficult problem when you’re designing a form that has a lot of time inputs (the one I’m thinking of has up to 4 including a time range). There is the usual, one time box, and an AM/PM dropdown, but that requires typing then clicking, and feels too tedious, especially the 3rd time.
Then there is the huge dropdown of times, which isn’t too bad for just hours, with which you end up with 24 options, but when you add quarter hours you get 100 items in a huge scrolling dropdown (scrolling dropdowns in themselves can be dubious to some users).
So I did some looking around and found the following options the first of which isn’t the fastest to use, and doesn’t require the least clicks, but was the most consistent with other elements on the page, and also seemed to have the most development behind it, and I ended up using in my current project.
- http://pttimeselect.sourceforge.net/example/ (I think this is the cleanest, and works the best next to the date picker, because it looks the same. though it’s not the fastest or most efficient, but I think it’s the most developed.)
- http://milesich.com/tpdemo/ (ok but a little overwhelming possibly to some people because of the + the done button that needs to be pressed)
- http://labs.perifer.se/timedatepicker/ (this is probably the simplest option, but like I said, 100 might be a pain for some users)
- http://haineault.com/media/jquery/ui-timepickr/page/ (while my wife used it fine on the first try, it wasn’t scientific because I didn’t give her a specific time to set.)
- http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick (OK but a little less intuitive than timepickr)
- http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-timepicker/ (kinda ok, like a time only version of the second option, but sideways, I’m not sure how well AM/PM works because there isn’t an example)
- http://keith-wood.name/timeEntry.html (neat but totally hard to use until you realize its keyboard-arrow-key driven, oops I gave it away)
I think my dream selector would actually be more like this most excellent timer widget for OS X that I use almost every day called Minutes. You’d just grab it and spin around until you have the time you want, then let go to set. Anyway when I have a project with a better budget then I’ll maybe make that version…
Posted in Arduino | September 28th, 2009 No Comments »
Sorry got totally distracted by a box in the basement with some PS2 Intellimouse parts in it this weekend. I’ll have those Box2D shortcuts updated soon, promise.
Anyway if you’d like to get a PS2 Microsoft Intellimouse with wheel fully working with a current (Diecimila or newer) Arduino here’s the corrected code:
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
| /**
* Code is a mix of ps2mouse from the Arduino playground
* and mousewheel code from "a world in dk" modified to
* work with Arduino Decimilia and 0017, and run a PS2
* Microsoft Intellimouse.
*
* Collin Reidorf collin@paperclipped.com
* Repaired http://blowingthroughlines.com
*/
/*
* an arduino sketch to interface with a ps/2 mouse.
* Also uses serial protocol to talk back to the host
* and report what it finds.
*/
/*
* Pin 5 is the mouse data pin, pin 6 is the clock pin
* Feel free to use whatever pins are convenient.
*/
#define MDATA 5
#define MCLK 6
/*
* according to some code I saw, these functions will
* correctly set the mouse clock and data pins for
* various conditions.
*/
void gohi(int pin)
{
pinMode(pin, INPUT);
digitalWrite(pin, HIGH);
}
void golo(int pin)
{
pinMode(pin, OUTPUT);
digitalWrite(pin, LOW);
}
/* PRECONDITION : clock is HIGH */
/* sends a single bit and returns with clock high */
void sendBit(char bit)
{
if (bit) {
gohi(MDATA);
}
else {
golo(MDATA);
}
/* wait for clock cycle */
while (digitalRead(MCLK) == LOW)
;
while (digitalRead(MCLK) == HIGH)
;
}
/* reads a single bit and returns with clock low */
char readBit()
{
char tmp = 0x00;
while (digitalRead(MCLK) == HIGH)
;
if (digitalRead(MDATA) == HIGH)
tmp = 0x01;
while (digitalRead(MCLK) == LOW)
;
return tmp;
}
void mouse_write(char data)
{
char i;
char parity = 1;
/* put pins in output mode */
gohi(MDATA);
gohi(MCLK);
delayMicroseconds(300);
golo(MCLK);
delayMicroseconds(300);
golo(MDATA);
delayMicroseconds(10);
/* start bit */
gohi(MCLK);
/* wait for mouse to take control of clock); */
sendBit(0);
/* clock is low, and we are clear to send data */
for (i=0; i < 8; i++) {
sendBit(data & 0x01);
parity = parity ^ (data & 0x01); // might not need this anymore but too lazy to test...
data = data >> 1;
}
/* parity */
sendBit(parity);
/* stop bit */
sendBit(1);
/* wait for mouse to switch modes */
while ((digitalRead(MCLK) == LOW) || (digitalRead(MDATA) == LOW))
;
/* put a hold on the incoming data. */
golo(MCLK);
}
/*
* Get a byte of data from the mouse
*/
char mouse_read(void)
{
char data = 0x00;
int i;
char bit = 0x01;
// Serial.print("reading byte from mouse\n");
/* start the clock */
gohi(MCLK);
gohi(MDATA);
delayMicroseconds(50);
readBit();
// delayMicroseconds(5); /* not sure why */ // and not evidently needed
for (i=0; i < 8; i++) { // read the bits
data = data | (readBit()<<i);
}
/* eat parity bit, which we ignore */
readBit();
/* eat stop bit */
readBit();
/* put a hold on the incoming data. */
golo(MCLK);
return data;
}
// for the mousewheel
// #define verbose // for verbose output
unsigned char msInitSequence[7]; // should go up on top when ready
char writeAndGetResponse(char data) {
// #ifdef verbose
// Serial.print("sending : ");
// Serial.print((unsigned char)data, HEX);
// Serial.print("\t");
// #endif
mouse_write( data );
return response();
}
char response() {
char data = mouse_read();
// #ifdef verbose
// Serial.print("echo ");
// Serial.print((unsigned char)data, HEX);
// Serial.print(" from mouse\n");
// #endif
return data;
}
//
void msMode() {
// sequence for ms mode (3 button + scroll)
// this is a entering procedure and i guess it will
// work with other mice/ICs as its problably stadard ps2
// And using an array were just a quick way to handle them
msInitSequence[0] =0xF3;
msInitSequence[1] =0xC8;
msInitSequence[2] =0xF3;
msInitSequence[3] =0x64;
msInitSequence[4] =0xF3;
msInitSequence[5] =0x50;
msInitSequence[6] =0xF2;
int i;
for(i=0;i<7;i++)
writeAndGetResponse(msInitSequence[i]);
}
// end of mousewheel stuff
void showMStat(char mstat)
{
int i;
char bit = 0x01;
for(i = 0; i<8; i++)
{
if(mstat&bit)
{
Serial.print("\t");
switch(i)
{
case 0:
Serial.print("L");
break;
case 1:
Serial.print("R");
break;
case 2:
Serial.print("M");
break;
case 3:
// Serial.print(" Reserve ...\t");
break;
case 4:
// Serial.print(" X data negative \t");
break;
case 5:
// Serial.print("Y data negative \t");
break;
case 6:
Serial.print("X data overflow");
break;
case 7:
Serial.print("Y data overflow");
break;
}
}
bit = bit<<1;
}
}
void mouse_init()
{
gohi(MCLK);
gohi(MDATA);
// Serial.print("Sending reset to mouse\n");
mouse_write(0xff);
mouse_read(); /* ack byte */
// Serial.print("Read ack byte1\n");
mouse_read(); /* blank */
mouse_read(); /* blank */
msMode(); // mousewheel code
// Serial.print("Sending remote mode code\n");
mouse_write(0xf0); /* remote mode */
mouse_read(); /* ack */
// Serial.print("Read ack byte2\n");
delayMicroseconds(100);
}
void setup()
{
Serial.begin(9600);
mouse_init();
}
/*
* get a reading from the mouse and report it back to the
* host via the serial line.
*/
void loop()
{
char mstat;
char mx;
char my;
char mz;
/* get a reading from the mouse */
writeAndGetResponse(0xEB); /* give me data! */
mstat = mouse_read();
mx = mouse_read();
my = mouse_read();
mz = mouse_read();
/* send the data back up */
Serial.print("\tmouse status=");
Serial.print(mstat, BIN);
Serial.print("\tX=");
Serial.print(mx, DEC);
Serial.print("\tY=");
Serial.print(my, DEC);
Serial.print("\tZ=");
Serial.print(mz, DEC);
showMStat(mstat); // print buttons that are down
Serial.println();
delay(20); /* twiddle */
} |
Based on code from The Arduino Playground which also shows the pinouts (where the black and white drawing is the female connector’s pintout, the pins on the mouse itself are a mirror image, like in the blurry photo below) and more code from A world in dk(decay/denmark).
Posted in Bugs, Flash AS 3.0, Flex 3 | September 28th, 2009 No Comments »
So first off, NEVER use this most lazy of hacks to reference the flash object when calling a method in a flash file:
1
2
3
4
| // some code
function test() {
flashID.ner("hello"); // BAAAAAAD!
} |
For some reason it works… Some of the time. On Safari when testing running from Flex. On my Mac.
I was being lazy and not really thinking back to how things work in Javascript at the time, then having recently started using Jquery, I tried:
1
2
3
4
5
| // some code
function test() {
var flashMovie = $('#flashID');
flashMovie.ner("hello"); // ALSO BAAAAAAD!
} |
Also doesn’t work, for some reason Jquery removes the methods associated with the embed tag that is written, and replaces them with only the Jquery methods. So in order for this to work the code needs to be simply:
1
2
3
4
| function test() {
var flashMovie = document.getElementByID("flashID");
flashMovie.ner("hello"); // FINALLY! It worked.
} |
Posted in Flash AS 3.0, physics | July 14th, 2009 No Comments »
Since leaving Hunt & Gather, I’ve been (besides relishing the peace and quiet a bit) playing around with some of those Flash libraries I hadn’t had time for. Most tantalizing of which is the Box2D library. I’d attempted to use it for this auto layout class for LDa Architects, but because of time constraints ended up settling for APE which as you can see is a bit out of date at this point. Anyway APE is fine if the number of bodies is small and you only need very basic simulation capabilities (boxes don’t rotate unless they are attached to 2 or more wheels for instance…), but once you wanna do more advanced things, like robots or buoyancy you’ll need a faster more complete engine.
Box2D seems to be the fastest and most current option out there, but it’s got kind of a funky API due in part to being a fairly direct port from C++. The complicated setup is in fact what had kept me from using it for so long, but some better documentation and turorial files available on the Box2D Wiki is making getting started easier. And to make things even simpler to play with, I’m creating a series of wrapper classes that reduce the amount of code needed to get things started.
World.world
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
| package com.paperclipped.physics
{
import Box2D.Collision.b2AABB;
import Box2D.Common.Math.b2Vec2;
import Box2D.Dynamics.b2DebugDraw;
import Box2D.Dynamics.b2World;
import flash.display.Sprite;
/**
* This is a container class to make the creation of Box2D World simpler.
* Box2D r47 or greater required.
* (c) 2009 Collin Reisdorf MIT License
*
* @author Collin Reisodrf
*/
public class World
{
//-----------------------------------------Variables-----------------------------------------//
private var _scale:Number;
private var _world:b2World;
//-------------------------------------------------------------------------------------------//
//------------------------------------------Getters------------------------------------------//
/**
* @return Scale set by the user when the world is constructed.
*/
public function get scale():Number { return _scale; }
/**
* @return The world object made by the constructor.
*/
public function get world():b2World { return _world; }
//-------------------------------------------------------------------------------------------//
//----------------------------------------Constructor----------------------------------------//
public function World(width:uint, height:uint, debugSprite:Sprite=null, showCenterOfMass:Boolean=false, gravity:b2Vec2=null, scale:Number=30, padding:uint=1000, doSleep:Boolean=true)
{
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-padding, -padding);
worldAABB.upperBound.Set(width+padding, width+padding);
gravity = (gravity)? gravity:new b2Vec2(0, 10.0);
_world = new b2World(worldAABB, gravity, doSleep);
if(debugSprite)
{
var debugDraw:b2DebugDraw = new b2DebugDraw();
debugDraw.SetSprite(debugSprite);
debugDraw.SetDrawScale(scale);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit | uint((showCenterOfMass)? b2DebugDraw.e_centerOfMassBit:0));
_world.SetDebugDraw(debugDraw);
}
}
//-------------------------------------------------------------------------------------------//
//--------------------------------------Private Methods--------------------------------------//
//-------------------------------------------------------------------------------------------//
//--------------------------------------Public Methods--------------------------------------//
//-------------------------------------------------------------------------------------------//
}
} |
Chain
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
| package com.paperclipped.physics
{
import Box2D.Collision.Shapes.b2PolygonDef;
import Box2D.Common.Math.b2Vec2;
import Box2D.Dynamics.Joints.b2Joint;
import Box2D.Dynamics.Joints.b2RevoluteJointDef;
import Box2D.Dynamics.b2Body;
import Box2D.Dynamics.b2BodyDef;
import Box2D.Dynamics.b2World;
/**
* This is a container class to make the creation of a chain simpler
* Box2D r47 or greater required.
* (c) 2009 Collin Reisdorf MIT License
*
* @author Collin Reisodrf
*/
public class Chain
{
//-----------------------------------------Variables-----------------------------------------//
public static const HORIZONTAL:String = 'h';
public static const VERTICAL:String = 'v'; // not supported yet
private var _bodies:Array;
private var _joints:Array;
// private var _parent:
private var _world:b2World;
//-------------------------------------------------------------------------------------------//
//------------------------------------------Getters------------------------------------------//
public function get bodies():Array { return _bodies; }
public function get end():b2Body { return _bodies[_bodies.length-1] as b2Body; }
public function get joints():Array { return _joints; }
public function get start():b2Body { return _bodies[0] as b2Body; }
//-------------------------------------------------------------------------------------------//
//------------------------------------------Setters------------------------------------------//
//-------------------------------------------------------------------------------------------//
//----------------------------------------Constructor----------------------------------------//
public function Chain(world:b2World, numLinks:uint=3, anchorX:int=0, anchorY:int=0, direction:String="h", swingLimit:uint=0, /*parent=null,*/ scale:uint=30)
{
_world = world;
_bodies = new Array();
_joints = new Array();
// _parent = parent; // not sure what/how to attach this to yet...
var ground:b2Body = world.GetGroundBody();
var i:int;
var anchor:b2Vec2 = new b2Vec2();
var body:b2Body;
var joint:b2Joint;
var sd:b2PolygonDef = new b2PolygonDef();
sd.SetAsBox(24 / scale, 5 / scale);
sd.density = 100.0;
sd.friction = 0.8;
var bd:b2BodyDef = new b2BodyDef();
var jd:b2RevoluteJointDef = new b2RevoluteJointDef();
if(swingLimit > 0)
{
jd.lowerAngle = -swingLimit / (180/Math.PI);
jd.upperAngle = swingLimit / (180/Math.PI);
jd.enableLimit = true;
}else
{
jd.enableLimit = false;
}
var prevBody:b2Body = ground;
for (i = 0; i < 3; ++i)
{
// if(i == 0)
// {
// trace("enabled motor damnit");
// jd.enableMotor = true;
// jd.motorSpeed = 1;
// jd.maxMotorTorque = 100;
// }else
// {
// jd.enableMotor = false;
//
// }
bd.position.Set((anchorX + 22 + 44 * i) / scale, anchorY / scale);
body = world.CreateBody(bd);
body.CreateShape(sd);
body.SetMassFromShapes();
anchor.Set((anchorX + 44 * i) / scale, anchorY / scale);
jd.Initialize(prevBody, body, anchor);
joint = world.CreateJoint(jd);
prevBody = body;
_bodies.push(body);
_joints.push(joint);
}
}
//-------------------------------------------------------------------------------------------//
//--------------------------------------Private Methods--------------------------------------//
//-------------------------------------------------------------------------------------------//
//--------------------------------------Public Methods--------------------------------------//
//-------------------------------------------------------------------------------------------//
}
} |
Keep an eye out for more, I’m working on robot leg linkages next. And also trying to get a new job
Posted in Uncategorized | June 9th, 2009 No Comments »
So we had this weird bug, that we were likely the culprit of, but that we didn’t have time to properly find/fix involving SWFAddress, and some JSON and IE 6 & 7. Namely with anything less then IE 8 inclusion of the SWFAddress javascript file was killing the app when we removed it, things worked fine, albeit without deep link or browser history support.
So we needed to have a way for IE8, Firefox, Safari, Chrome (why not even Opera) load SWFAddress, but the rest not, behold:
<!--[if gte IE 8]>-->
<script type="text/javascript" src="js/swfaddress.2.3.js"></script>
<!--<![endif>--> |
Clever eh? it’s the extra -->s that do it, so all browers but IE ignore the only the (otherwise standard) conditional code, but still use the script, like we just put a couple of regular old comments up in there. This has only been tested on a few machines so your milage may vary. Lemme know if things workout (or don’t).