Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

Cool stuff that you can build

A few months ago I began coaching the SWAT robotics team in San Mateo.
It’s a great group of bright, enthusiastic, creative students from Serra, Mercy and Notre Dame High Schools.

One pillar of the club is the FIRST robotics competition which I’ll an entire blog post of it’s own.
Another pillar is the DIY projects.

As an inspiration for conceiving their own DIY projects, I have started a series of emails titled ‘We Could Build This’ which contain videos of cool projects accessible to anyone with an interest in hands-on electronics, microcontrollers, and programming.
This post is an archive of links to these videos.
I hope you find them inspiring and empowering.

Laser Harp

Piano Stairs (Princeton)

Electric Go Kart

 

Simple Water Table

Since the weather has turned warmer my son has taken to playing in water.
At a recent child’s birthday party the kids delighted in playing with standing water and water toys. I thought I might enhance this experience a bit and built this water table.

Parts:
- Water pump (originally intended for a fish tank)
- Storage bin (rubber/plastic)
- 1/2″ pvc
- 1/2″ pvc corners, T’s and caps
- length of garden hose to attach the pump to the pvc

The most expensive component is the water pump. Depending on how the size of your table and desired spraying power the pump can cost $20-$100. The pumps use a ‘gallons per hour’ (gph) rating system. Fortunately I was able to source a pump from a local thrift store: 500 gph for $10, so keep your eyes open next time you’re suit shopping.

Next I bought a ~$10 storage tub from target.
The 1/2″ pvc and connectors I had in the garage, left over from another project.

The concept is simple enough:
• the bin is filled with water
• the pump is submerged
• the output of the pump is attached to the pvc with a length of hose
• the pvc protrudes through the top of the bin, the ends are capped and 1/8″ holes are drilled in the pvc wherever you want water to shoot out

This took only a few hours to build and the entertainment value has been off the charts.
If you have the inclination I strongly encourage you to build one of your own.

The pvc has small holes drilled into it to let the water shoot out. The bin lid has 1/4: holes drilled into it allowing the water to return to the resevoir.

The pvc has small holes drilled into it to let the water shoot out. The bin lid has 1/4″ holes allowing the water to return to the reservoir.

waterTableGuts

 

Can’t find variable: MutationObserver in Safari

I recently discovered MutationObserver and was excited to find the observer pattern baked into the dom. The MutationObserver allows you to watch a dom node for changes and assign a callback function.

Everything was working great in chrome, so why would i even need to test in Safari? Turns out there is a bug in the safari implementation of MutationObserver. Though it’s not entirely broken.

ReferenceError: Can’t find variable: MutationObserver

The problem is the MutationObserver is not available to the page scope in safari. However, you can locate it from, and store a copy to, an http module object such as Date.

Populate the MutationObserver object:
$(document).ready( function() {
bad: var MutationObserver = window.WebKitMutationObserver || window.MutationObserver || window.MozMutationObserver || null;
good: Date.MutationObserver = window.WebKitMutationObserver || window.MutationObserver || window.MozMutationObserver || null;
});

Create observer var to hold instanct of MutationObserver:
bad: var observer = new MutationObserver($.callback);
good: var observer = new Date.MutationObserver($.callback);

Sample callback:
$.callback = function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
}

Now create an object indicating which properties you want to observe and assign the observer a dom node and this new object:
var observables = { childList: true};
observer.observe( popupTarget, observables );

The good news is that this issue is resolved in safari 6.0.4.

You can find more information on MutationObserver here and here.

more posts at www.toddrothe.com/blog

 

‘Cannot GET /’ Message in Node.js

After creating my first Node.js server and attempting to access index.html through a browser – http://localhost:5000/ – ‘Cannot GET /’ was all I could see.

‘Cannot GET /’ is the default message displayed when
1. Your Node.js server has not been configured to display html.
2. There is no index.html page at the root to serve.

Here is the simplest server.js content that i’ve found to create a generic web server:
var connect = require('connect');
connect.createServer( connect.static(__dirname) ).listen(5000);

more posts at http://toddrothe.com/blog

 

Using UIImpersonator with FlexUnit 4

While testing Spark based custom components I discovered UIImpersonator in FlexUnit 4. Then I nearly strangled UIImpersonator. Here are the issues I ran into, my initial code, and how to resolve the issues.

Issues:
1. Error: Required skin part myRequiredSkinPart cannot be found.
2. Skin for FlexVisualTestEnvironment47.MyView38.MyViewSkin49.contentGroup.myStream._MyStreamSkin_MyRenderer1 cannot be found.

Initial Code:
[Before(async)]
public function setUp():void
{
_target = new MyView();
Async.proceedOnEvent( this, _target, FlexEvent.CREATION_COMPLETE );
UIImpersonator.addChild( _target );
}
[Test(async)]
public function getSetProp():void
{
var _prop:Prop = new Prop();
_target.prop = _prop;
assertThat( _target.prop, sameInstance( _prop ) );
}

Resolutions:
The first error I ran into was this :
1. Error: Required skin part myRequiredSkinPart cannot be found.

Issue : The power of UIImpersonator is that it instantiates your component in isolation, outside of the scope of your application. Therefore css based styles are NOT applied. In my case this meant that my component skin was not applied to my component. When testing using UIImpersonator you need to manually add the skin for your UIComponent.

Fix : Manually set the skinClass style on you component.
_targetSkin = new MyViewSkin();
_target.setStyle( “skinClass”, Class(MyViewSkin) );

The second error I hit was :
2. Error: Skin for FlexVisualTestEnvironment47.MyView38.MyViewSkin49.contentGroup.myStream._MyStreamSkin_MyRenderer1 cannot be found.

Issue : Same issue as before only now the skin that is missing is many components deep.

Fix : Don’t use IUImpersonator for complex composite custom components.

UIImpersonator ensures your test environment is completely separate from the FlexUnit application environment. While this can be useful at times it is often more trouble than it’s worth.

more posts at www.toddrothe.com/blog

 

ArduinoISP error: ‘OUTPUT’ was not declared in this scope

I ran into this “ArduinoISP error: ‘OUTPUT’ was not declared in this scope” after upgrading my Arduino GUI from 0017 to 1.0.1 .
Turns out the Arduino support libs (and much of the code in Examples) has been modified.
Installing and using the new GUI with the old supporting libs caused crazy impossible errors like ‘OUTPUT’ not declared.

Solution:
Rename (or delete) the directory which holds the ‘old’ libs. I’m on a mac so my dir is ‘/User/toddrothe/Documents/Arduino’.
Re-open the Arduino GUI.
You should get a dialog informing you that the supporting libs are missing and will be regenerated.
In the GUI open Files -> Examples -> Basic -> Blink. Click the Verify btn and see that the sketch now compiles without error.

 

ArduinoISP error: ‘Serial’ was not declared in this scope

I ran into this “ArduinoISP error: ‘Serial’ was not declared in this scope” after upgrading my Arduino GUI from 0017 to 1.0.1 .
Turns out the Arduino support libs (and much of the code in Examples) has been modified.
Installing and using the new GUI with the old supporting libs caused crazy impossible errors like ‘Serial’ not declared.

Solution:
Rename (or delete) the directory which holds the ‘old’ libs. I’m on a mac so my dir is ‘/User/toddrothe/Documents/Arduino’.
Re-open the Arduino GUI.
You should get a dialog informing you that the supporting libs are missing and will be regenerated.
In the GUI open Files -> Examples -> Basic -> Blink. Click the Verify btn and see that the sketch now compiles without error.

 

FlexPilot, Ruby, Selenium WebDriver, Jenkins and Windows Part 3

Recently I have been tasked with running automated tests against an html/javascript/flex app as part of the automated build.
This is part 3 in a series of posts detailing the flexpilot install, writing ruby tests, and configuring the jenkins targets and windows box to run the automated tests. The completed ruby test can be seen by viewing source, downloading the project and opening the SampleTest.rb on your local maching.

Part 3 – The FlexPilot API and robust tests in ruby.

Like most API’s the FlexPilot API is straight forward once you know how to use it.

Let’s start by running our SampleTest.rb in its current form (you can grab the contents from this text file).
Open a terminal window, cd to the location of SampleTest.rb, type ruby SampleTest.rb. When the test ends you should see the following in the console:
1 tests, 1 assertions, 0 failures, 0 errors
Notice ‘1 assertion‘. This is the assert_equal in our teardown method that informs us of verification_errors.

Let’s add a ruby test assertion to our test (weez about to get reeeeeeal).
On the last line of our test test_loadAndClickButton, replace the silly ‘sleep(10)’ with a useful assertion:
assert_equal(false, @driver.execute_script("return document.MyApp.fp_assertDisplayObject({name:'modalWindow'})") )
In true TDD fashion we write this test to fail by asserting ‘false’. Run the test and you should see the terminal output something like:
Finished in 16.473764 seconds.
1) Failure:
test_loadAndClickButton(MySampleTest) [SampleTest.rb:25]:
< false > expected but was
< true >.

Change the ‘assert_equal(false…‘ to ‘assert_equal(true…‘ and run the test again. You should see terminal output of:
Finished in 16.264205 seconds.
1 tests, 2 assertions, 0 failures, 0 errors

To examine our ruby test assertion:
assert_equal(val1, val2)
val1 = true (a boolean)
val2 = @driver.execute_script(“return document.MyApp.fp_assertDisplayObject({name:’modalWindow’})”) )

In val2 we leverage the @driver webDriver instance to execute the javascript @driver.execute_script(” “). It’s worth noting that this is the structure we use to communicate with flexpilot – webDriver executing javascript, flexpilot understanding and responding to javascript.
In this case the script returns a boolean value from the flexpilot api call fp_assertDisplayObject.
The fp_assertDisplayObject() method accepts one parameter object (see the curly braces in ({name:’modalWindow’}) ) called a locator. A locator object is simply a name/value pair. In this case the name is ‘name’ and the value is ‘modalWindow’. Note that name is declared without quotes but the value of modalWindow has quotes. In the future we will leverage the ‘automationName’ property in Flex to label and locate our displayObjects as much as possible.

If you see terminal output like this:
1) Failure:
test_loadAndClickButton(MySampleTest) [SampleTest.rb:25]:
< true > expected but was
< nil >.

Then you omitted the ‘return’ at the beginning of the javascript, like so:
@driver.execute_script(“document.MyApp.fp_assertDisplayObject({name:’modalWindow’})”) )
This tripped me up a few times as I was getting started.

def test_loadAndClickButton
@driver.get("http://localhost:8888/coolShit/MyApp.html")
sleep(8)
@wait.until{ @driver.execute_script("return document.MyApp.fp_assertDisplayObject({automationName:'loginBtn'});") == true }
@driver.execute_script("document.MyApp.fp_click({automationName:'loginBtn'})")
assert_equal(true, @driver.execute_script("document.MyApp.fp_assertDisplayObject({name:'modalWindow'})") )
end

Knowing what a locator is and how to use it is half the battle. You can see from the API doc that most methods require only a locator param.

Let’s look at the slightly more complex example of fp_getPropertyValue( locator, attrName).

Open your app and add the following line to MyApp.mxml.
< s:TextArea id="ta" automationName="myTextArea" text="sample"/>

In MyApp.mxml, parent the button and text area with a VGroup.

< s:VGroup>
< s:Button id="loginButton" automationName="loginBtn" label="Login" click="{Alert.show('Zark Wad!')}"/>
< s:TextArea id="ta" automationName="myTextArea" text="sample"/>

Run the app and see our new text area appear.

In SampleTest.rb we are going to kill the button/alert test and instead test the height of the TextDisplay inside a TextArea component – which you might do if you wanted to ensure a block of text is displaying as expected (font, style, length, etc).
Replace the last 3 line of our test with:
@wait.until{ @driver.execute_script(“return document.MyApp.fp_assertDisplayObject({automationName:'myTextArea'});") == true }
assert_equal("100", @driver.execute_script("return document.MyApp.fp_getPropertyValue({id:'textDisplay',attrName:'height'})"))

Run the test and adjust the expected value (100 in the above sample) to match the actual value which is returned by the test failure:
1) Failure:
test_loadAndClickButton(MySampleTest) [SampleTest.rb:24]:
< "10" > expected but was
< "149" >.

To change the text displayed in the TextArea:
@driver.execute_script(“document.MyApp.fp_type({automationName:’myTextArea’,text:’this is the new sample text ‘})”)

 

FlexPilot, Ruby, Selenium WebDriver, Jenkins and Windows Part 2

Recently I have been tasked with running automated tests against an html/javascript/flex app as part of the automated build.
This is part 2 in a series of posts detailing the flexpilot install, writing ruby tests, and configuring the jenkins targets and windows box to run the automated tests. The completed ruby test can be seen by viewing source, downloading the project and opening the SampleTest.rb on your local maching.

Part 2 – Writing FlexPilot tests in ruby.

I should start by saying I’m on a mac (and you can too). Open a terminal and type:

ruby –version

If you don’t see ruby 1.9.3p125 you may want to install RVM and upgrade to ruby 1.9.3.
Feel free to run through this with ruby 1.8, but know that you may experience issues.

Create a tests.automation.flexpilot package in the root of the project we created in part 1. Inside, create a new text file and call it SampleTest.rb. Then add the following boilerplate code:
require "rubygems"
require "selenium-webdriver"
require "test/unit"
class MySampleTest < Test::Unit::TestCase
# Called before every test method runs.
def setup
@driver = Selenium::WebDriver.for :firefox
@wait = Selenium::WebDriver::Wait.new(:timeout => 20) # seconds
@verification_errors = []
end
# Called after every test method runs.
def teardown
@driver.quit
assert_equal [], @verification_errors
end

Forgive my smashing this snippet together. I need to get a new ‘code display’ plugin for my blog.
You see the ‘require’ statements at the top which correspond to the gems we will be using.
Next is the ‘class’ declaration, class name and base class (Test::Unit::TestCase).
Then a ‘setup’ method is defined. Inside;
@driver – an instance of selenium web driver for firefox is created
@wait – a 20 sec wait
@verification_errors – an array to hold errors.
Finally, a ‘teardown’ method is defined. Inside, we tell the driver to quit and assert that the verification_errors array is empty.

Now for the less boilerplate.
Define your test method below teardown and tell the driver to load your app. Something like:
def test_loadAndClickButton
@driver.get("http://localhost:8888/coolShit/MyApp.html")
sleep(5)
end

*note: the ‘test_’ in our ‘def’ name alerts ruby that this is a test that should be exed when this class is run
*note: the ‘sleep(5)’ sleeps our test until the app and flexpilot are loaded, after which we can use our ‘@wait’.

Go to your terminal window and cd into the flexpilot dir that holds SampleTest.rb and then type the following:
ruby SampleTest.rb
Unless you have the required gems installed, you should get an error that looks something like this:
no such file to load — selenium-webdriver
Simply install the missing gem(s) by typing the following into the terminal:
gem install selenium-webdriver
You’ll see some text in the terminal confirming that the gem has been found and is loading/loaded.

Run your test again (ruby SampleTest.rb) and watch firefox popup, load your app, and then close after 30 seconds (our sleep duration). Very cool, but worthless so far. Let’s add some code to allow our test to interact with our app
.
MyApp is super basic, consisting of the flexpilot hook and one button that launches an alert when you click it. The button looks like this:
< s:Button id="loginButton" automationName="loginBtn" label="Login" click="{Alert.show('Zark Wad!')}"/>
Notice the ‘automationName=”loginBtn” ‘. This is what we will use to target and click the button from our test. Add the following to the bottom of you test method:

@wait.until{ @driver.execute_script("return document.MyApp.fp_assertDisplayObject({automationName:'loginBtn'});") == true }
@driver.execute_script("document.MyApp.fp_click({automationName:'loginBtn'})")
sleep(10)

The first line of code tells the driver to wait until the loginBtn exists as a child of the stage.
The next line clicks the loginBtn.
The next line delays the teardown so you can see the results of the click.
Hopefully you are seeing the alert in all its automated glory!

 

FlexPilot, Ruby, Selenium WebDriver, Jenkins and Windows Part 1

Recently I have been tasked with running automated tests against an html/javascript/flex app as part of the automated build using Flexpilot to interface with the flex app, ruby to write/run the tests and a Jenkins master to a windows slave build machine.

This will be a series of posts detailing the flexpilot install, writing ruby tests, and configuring the jenkins targets and windows box to run the automated tests.

Part 1 – Installing FlexPilot

Download FPBootstrap.zip from the download site. Unpacking this will give you org.flex_pilot.FPBootstrap.as which you can place in your project.

Download FlexPilot-4-stable.swf from the download site. Rename the swf to FlexPilot.swf and place it in your apps root directory.

In your application mxml you need to set the value of FPBootstrap.flex_pilotLibPath in response to applicationComplete or addedToStage.

<.s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" addedToStage="addedToStageHandler(event)"/>
private function addedToStageHandler(event:Event):void
{
FPBootstrap.flex_pilotLibPath = "FlexPilot.swf";
FPBootstrap.init(stage);
}

Run your app, open dev tools in the browser window running your app and enter the following in the javascript console, where ‘MyApp’ is the name of your app as referenced in the embed code on your html page:
document.MyApp.fp_explorerStart()

Now mouse over your app and see the blue squares appear around the ui elements under your cursor. *Don’t see cool blue squares?

You will also see a bunch of great stuff fill your javascript console.

These are locator chains and you will use them to ensure that your target ui elements have the id or automationName you are expecting in your test.

Locator chain: id:MyApp/name:ApplicationSkin271/id:_ApplicationSkin_Group1/id:contentGroup/id:mainScreen/
automationName:Screen/name:ScreenSkin547/id:contentGroup/id:contentHolderGroup/name:Selection138/
name:VGroup140/name:Group141/automationName:LoginButton/name:BorderContainerSkin619

The locator chain consists of the locator (id, name, or automationName) / value for the parents of the ui element that you interact with. When writing tests you will use these locators:values to target and interact with ui elements.

For example, if you want to click the login button referenced in the locator chain above you would use something like this
document.MyApp.fp_click({automationName:’LoginButton’})

*If you don’t see the cool blue squares and locator chains and instead you get this in the js console:
document.MyApp.fp_explorerStart()
TypeError: Result of expression ‘document.MyApp.fp_explorerStart’ [undefined] is not a function.
Then flex pilot is not in place.
Double check the install steps detailed above.
One of the issues I ran accross was the old security sandbox issue. Since my app and supporting files are Akamai’ed MyApp.swf and FlexPilot.swf were served from different locations, therefore unable to communicate.
To resolve this I added some url params and logic, allowing me to load un-Akamai’ed version of my app and all its supporting files.

Good luck!