Node-RED : IBM developerWorks Open Tech Talk

Readers of my blog know I am a huge fan of Node-RED so now you can learn about it in the upcoming tech talk by IBM developerWorks. I most recently used Node-RED in an Eclipse application where I provide an automatic translation service for a tool called PET.

node-redIBM developerWorks Open Tech Talk
Node-RED
Categories: Cloud, Internet of Things

Wed June 22nd, 11 AM ET

Web Meeting link.

Node-RED is a tool for wiring together the Internet of Things in new and interesting ways, including hardware devices, APIs, and online services. Node-RED makes it easy to wire together real-world events, add in some intelligence, and access simple nodes to integrate them with existing messaging systems and social platforms such as Twitter, MongoDB, and Redis to create apps that can react to the world around them..  Learn more.

Base JavaScript versus jQuery example – Driving a DOM selector

One of the things a good web programmer should be able to do is write code using multiple libraries. In this case I have created two snippets that show how to select an HTML on a page using both bare-bones JavaScript and its corollary in jQuery.

The basic flow is:

MouseEnter Listener -> Modify border -> Click Listener -> Call Function

MouseOut Listener -> Restore border

This gives you an interface where you can then select a DOM element right from the web page. It would look like this:

web-selection

Here are the two different implementations, you can see why I love jQuery, its brevity is breathtaking. The biggest difference is the selector API in jQuery that does the loop processing for you.

Base JavaScript

[codesyntax lang=”javascript”]

var all_1_Links = document.getElementsByTagName('div');
for (var i = 0; i < all_1_Links.length; i++) {
    var elm = all_1_Links[i];
    elm.addEventListener('mouseenter', function() {
        this.addEventListener('click', clickListener, true);
        this.style.oldborder = this.style.border;
        this.style.border = 'thin solid red';
    });
    elm.addEventListener('mouseout', function() {
        this.style.border = this.style.oldborder;
    });
}

[/codesyntax]

 

jQuery Version

[codesyntax lang=”javascript”]

$("div").mouseenter(function(e) {
    e.target.oldborder = e.target.style.border;
    $(e.target).css("border", "thin solid red"); 
    $(e.target).click(clickListener); 
}); 
$("div").mouseout(function(e) { 
    $(e.target).css("border", e.target.style.oldborder); 
    $(e.target).off("click"); 
});

[/codesyntax]

 

Final Re-Tweet Code for my Node-RED application on BlueMix (updated)

If you have been following my blog and more specifically my Twitter account in the past week you probably noticed an awful lot of re-tweets in the past week. Well, if you just happen to have missed my original video where I created a simple Node-RED application to automatically retweet and promote “bluemix” on Twitter feel free to get some context here and watch the video.

This is the final flow after some debugging and watching the different retweets happening:

 

Continue reading

Getting and setting check boxes with jQuery

Getting and setting check boxes in jQuery is a lot easier than setting radio buttons and we can thank the “prop” function for that.

Here is the HTML, notice each check box has its own Id, that is the key so the jQuery selector can get at the “checked” property:

Screen Shot 2013-11-25 at 10.46.49 PM

Getting the value is a single line call and it can be stored in a boolean:

pillar_buy = $('#screen_pillar_buy').prop( "checked");

Setting is just as easy:

$('#screen_pillar_buy').prop( "checked", pillar_buy );

Debug JavaScript and HTML in a UIWebView on an iOS Device

Screen Shot 2013-10-10 at 12.33.29 PMI got my first Mac over the summer and have been playing around writing applications for iPhone and iPad. Being very new to the Mac I am constantly using Google to find tips, tricks, and “how to” articles. And of course when I find something very cool and easy to do I like to share it. This is my first quick tip for developing embedded HTML applications in an iOS device. Without a debugger you are dead in the water!

I am interested to hear if this the best way to debug such applications, any feedback is welcome.

Want to learn Dojo? Then check out this site today!

sitepenLogoDojo is considered the most robust JavaScript framework for business applications. If you want to really sink your teeth in then you might want to check out what Sitepen has to offer. The site hosts a blog, support, and workshops to get your team up and running with Dojo very quickly. You can even schedule a free 30 minute call to talk about your project.

Sitepen –¬†Development, support, and training from the makers of Dojo.

 

Getting and setting radio button values with JQuery

I figured I would share this because I found so many inconsistent hits on the internet searching for a solution. I have this dialog that I pop up and want to set the values and then retrieve the values once OK is hit using JQuery.

jquery-radio

The HTML is pretty straight forward:

jquery-html

The code to set the value from my model looks like this:

var $radios = $('input:radio[name=transition]');
$radios.filter('[value=' + model.options.transition +']').attr('checked', true);

The code to retrieve the value looks like this:

model.options.transition = $('input:radio[name=transition]:checked').val();