Code

This is the start of some of my code that I find useful as a web developer.

DMX Address Calculator/Dipswitch Tool

Apr 21st

Posted by Dooza in Code

3 comments

Several years ago DiscoPete created an app for my first Windows Mobile phone that helped me set the DMX address on my lights. He always found it funny how I got it wrong all the time when trying to do it manually.

Since then I have changed phones several times and no longer have the handy app. I have been resorting to using the calculator instead, which isn’t always the speedy way to get the job done. I have wanted an app for my Nokia 5800 for sometime, and decided it was time I sorted it out.

I came across this during my research: http://business.virgin.net/tom.baldwin/dmx_calculator2.html and have based much of the code for mine on it. The main problem with the above is that its not very mobile friendly, entering the number take a while as you need to go into the keyboard, I needed a touch screen friendly input. My solution was to have arrows above and below each digit which increases or decreases its value.

This is my solution: http://www.dooza.tv/dmx/, and still has more work to be done, but for version 0.1 I am happy with the way it works.

Future versions will have the dip switches toggle, allowing you to work out the address of a light. I will also make the dip switch reversible, as many lights are the other way around.

One really handy feature of DiscoPete’s app was that it turned on the LED flash light of the camera. This helped you see the dip switch when up a ladder in a dark club. I know I can do this with my Nokia 5800, as I already have an app that does this, I just need to work it out.

Download it (166 downloads) for your Nokia Symbian S60 based phone. I would love to hear what you think, please post a comment below.

Spry External Link Icon

Dec 8th

Posted by Dooza in Code

10 comments

Spry LogoThis is the first bit of code that I have created that I think is good enough to share. I didn’t come up with this on my own, I drew inspiration from this blog post, and had some help from V1 over at the Adobe Spry Forum.

This simple bit of JavaScript will give your external links on your page an icon to indicate that you will be leaving the site. I previously would have done this using a CSS selector that targeted all links in a paragraph that had the target attribute set to “_blank”, but I wanted a fool-proof way of doing this without having to remember to set the target.

How does it work?

It works by manipulating the DOM using the Spry Dom Utils JS. It creates an observer that on page load adds the class called “external” to all links that are on a different domain.

To use it, just put this in your head section:

<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryExternalLinkIcon.js" type="text/javascript"></script>
<link href="SpryAssets/SpryExternalLinkIcon.css" rel="stylesheet" type="text/css" />

The first file is from the current Spry library.

The second is my custom code, and the third is a small bit of CSS.

This is SpryExternalLinkIcon.js:

function externalLinkIcon(){
  Spry.$$("a").forEach(function(href) {
  	if( href.hostname != window.location.host ){
  Spry.Utils.addClassName( href, 'external');}
  });
}
Spry.Utils.addLoadListener(externalLinkIcon);

This is SpryExternalLinkIcon.css

.external {
    background: url('external.png') 100% 60% no-repeat;
    padding:  0 15px 0 0;
}

Now any link that is on a different domain will get assigned the class “external”, which in turns puts an external link icon at the end of it.

Demo

You can see what I have been talking about here: http://www.dooza.tv/spry/SpryExternalLinkIcon.html

Download

You can download the files here: http://www.dooza.tv/spry/SpryExternalLinkIcon.zip

Conclusion

Using JavaScript to add this icon is progressive enhancement, the page doesn’t break, the link still works, but in browsers with JavaScript support you get the added functionality of an icon that helps the visitor recognise an external link. The visitor might want to open the link in another tab or window, knowing its an external link before having to click it will save time.

I would love to hear your opinions on this little bit of code that I have presented here. There aren’t many Spry tutorials or blogs about, which is a shame, its got potential.

/SpryAssets