AIR, Javascript, Prattsville N.Y., Windows

Adobe AIR Application – Prattsville NY Creek Gauge (Alpha release – Windows only)

Simple System Tray Icon application that keeps a small meter that displays the water level of the Schoharie Creek in Prattsville N.Y. within sight on the Windows desktop

This is a useless application to anyone other than people who live in Prattsville N.Y. and the surrounding area. It utilizes the data received from the unmanned experimental sensor located in Prattsville (the gage house is on the side of the creek down by the bridge). There is no Mac functionality at this time for this application (maybe later on). The code is less than elegant at this point. However, there is a view source context menu item if you would like to view the code anyway (Mac users unzip the installer).
I wrote this application for myself to keep an eye on the creek water level in my neighborhood – sorry if its not perfect at this point.

  • Downloads water level datum and default hydrograph every 30 minutes (And caches them on the system in case of disconnection).
  • Click on the icon to download and display the most recent NOAA hydrograph in the lower right corner of the viewport
    (click on it again to make it go away)

  • Icon displayed changes to reflect changes in the water level.
  • Added context menu items that open various pages related to Prattsville N.Y. in the default browser

Download Prattsville NY Creek Gauge
(Requires Adobe AIR)

				  File: PrattsvilleCreek.air
				CRC-32: 4d057fdb
				   MD4: 0f5aa9605d292368cb546fc55ef8d81c
				   MD5: f53dbe407bfc5b477c84a7d9f66d0071
				 SHA-1: fdf93f2f2af533d8e80c84ad1a7621a7269279c5
                

Standard
Browser Extension, Google Chrome, Javascript, Look-It-Up, Opera

Google Chrome and Opera Extension – Look-it-up, a Dictionary Context Menu Extension

Adds context menu item that looks up selected text on dictionary sites. You have the choice of dictionary.com, merriam-webster.com (dictionary and thesaurus), thefreedictionary.com, thesaurus.com, urbandictionary.com, wikipedia.org, wiktionary.org, and yourdictionary.com to look selected terms up with. There is an options page to enable or disable the different menu items included. This is actually a rewrite and improvement of an older version that looked up terms on dictionary.com exclusively. While using the old version, I eventually found myself in need of more options for this add-on so here it is.
 

manifest.json


{
  "name": "Look-it-up",
  "description": "Adds context menu item that looks up selected text on dictionary sites",
  "version": "0.2",
  "permissions": ["contextMenus"],
  "background": {
    "scripts": ["app.js"]
  },
  "options_page": "options.html",
  "icons" : {
        "16" : "book16.png",
        "32" : "book32.png",
        "48" : "book48.png",
        "128" : "book128.png"
    },
  "manifest_version": 2
}

app.js


/** app.js */
var defaultentries = [
	{
	"menu":"dictionary.com",
	"active":1
	},{
	"menu":"merriam-webster.com-dict",
	"active":1
	},{
	"menu":"merriam-webster.com-thes",
	"active":1
	},{
	"menu":"thefreedictionary.com",
	"active":1
	},{
	"menu":"thesaurus.com",
	"active":1
	},{
	"menu":"urbandictionary.com",
	"active":1
	},{
	"menu":"wikipedia.org",
	"active":1
	},{
	"menu":"wiktionary.org",
	"active":1
	},{
	"menu":"yourdictionary.com",
	"active":1
	},
];
var entries = {};
if (!localStorage.getItem("entries")) {
	localStorage.setItem("entries", JSON.stringify(defaultentries));
}
entries = JSON.parse(localStorage.getItem("entries"));
function isActive(menu){
	console.log("isActive");
	var elen = entries.length;
	console.assert(!elen == 0);
	for(i=0;i<elen;i++){
		if(entries[i]["menu"] == menu){
			console.log(entries[i]["menu"]);
			if(entries[i]["active"] == 1){
				return true;
			}else{
				return false;
			}
		}
	}
}
function setActive(menu){
	console.log("setActive");
	var elen = entries.length;
	console.log(menu);
	console.assert(!elen == 0);
	for(i=0;i<elen;i++){
		if(entries[i]["menu"] == menu){
			entries[i]["active"] = 1;
		}
	}
	localStorage.setItem("entries", JSON.stringify(entries));
}
function setInactive(menu){
	console.log("setInactive");
	var elen = entries.length;
	console.log(menu);
	console.assert(!elen == 0);
	for(i=0;i<elen;i++){
		if(entries[i]["menu"] == menu){
			entries[i]["active"] = 0;
		}
	}
	localStorage.setItem("entries", JSON.stringify(entries));
}
/* Create the context menu */
var tm = chrome.contextMenus.create({"title": "Look-it-up", "contexts":["selection"]});
if(isActive("dictionary.com")){
	chrome.contextMenus.create({"title": "dictionary.com", "contexts":["selection"], "parentId": tm, "onclick": lookItUp1});
}
function lookItUp1(i, t){
	var createProperties = {url: "http://www.dictionary.com/cgi-bin/dict.pl?term=" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("merriam-webster.com-dict")){
	chrome.contextMenus.create({"title": "merriam-webster.com-dict", "contexts":["selection"], "parentId": tm, "onclick": lookItUp2});
}
function lookItUp2(i, t){
	var createProperties = {url: "http://www.merriam-webster.com/dictionary/" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("merriam-webster.com-thes")){
	chrome.contextMenus.create({"title": "merriam-webster.com-thes", "contexts":["selection"], "parentId": tm, "onclick": lookItUp3});
}
function lookItUp3(i, t){
	var createProperties = {url: "http://www.merriam-webster.com/thesaurus/" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("thefreedictionary.com")){
	chrome.contextMenus.create({"title": "thefreedictionary.com", "contexts":["selection"], "parentId": tm, "onclick": lookItUp4});
}
function lookItUp4(i, t){
	var createProperties = {url: "http://www.thefreedictionary.com/" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("thesaurus.com")){
	chrome.contextMenus.create({"title": "thesaurus.com", "contexts":["selection"], "parentId": tm, "onclick": lookItUp5});
}
function lookItUp5(i, t){
	var createProperties = {url: "http://thesaurus.com/search?q=" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("urbandictionary.com")){
	chrome.contextMenus.create({"title": "urbandictionary.com", "contexts":["selection"], "parentId": tm, "onclick": lookItUp6});
}
function lookItUp6(i, t){
	var createProperties = {url: "http://www.urbandictionary.com/define.php?term=" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("wikipedia.org")){
	chrome.contextMenus.create({"title": "wikipedia.org", "contexts":["selection"], "parentId": tm, "onclick": lookItUp7});
}
function lookItUp7(i, t){
	var createProperties = {url: "http://en.wikipedia.org/wiki/" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("wiktionary.org")){
	chrome.contextMenus.create({"title": "wiktionary.org", "contexts":["selection"], "parentId": tm, "onclick": lookItUp8});
}
function lookItUp8(i, t){
	var createProperties = {url: "http://en.wiktionary.org/wiki/" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}
if(isActive("yourdictionary.com")){
	chrome.contextMenus.create({"title": "yourdictionary.com", "contexts":["selection"], "parentId": tm, "onclick": lookItUp9});
}
function lookItUp9(i, t){
	var createProperties = {url: "http://www.yourdictionary.com/" + encodeURIComponent(i.selectionText)};
	chrome.tabs.create(createProperties);
}

options.html


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Look-it-up Options</title>
	<script type="text/javascript" src="options.js"></script>
</head>
<body>
<ul id="menu">
</ul>
<div class="summary">Changes will take place the next time you start your browser. 
Or if you don't want to close the browser you could uncheck and recheck the enabled box next to this extension on the Extensions tab page.</div>

</body>
</html>

options.js


window.onload = function () {
	ckb = chrome.extension.getBackgroundPage().entries;
	var list = document.getElementById("menu");
	for(i = 0; i < ckb.length; i++){
		console.log(ckb[i]["active"]);
		if(ckb[i]["active"] == 1){
			var li = document.createElement("li");
			var temp = "<input type=\"checkbox\" class=\"butt\" checked=\"true\" value=\"" + ckb[i]["menu"] + "\"><span>" + ckb[i]["menu"] + "</span></input>";
			
			li.innerHTML = temp;
			list.appendChild(li);
		}else{
			var li = document.createElement("li");
			var tempp = "<input type=\"checkbox\" class=\"butt\" value=\"" + ckb[i]["menu"] + "\"><span>" + ckb[i]["menu"] + "</span></input>";
			li.innerHTML = tempp;
			list.appendChild(li);
			
		}
	}
	as = document.getElementsByClassName("butt");
	for(i=0;i<as.length;i++){
		as[i].addEventListener("click",function(evt){
			if(evt.target.checked == true){
				
				chrome.extension.getBackgroundPage().setActive(evt.target.value);
			}else{
				chrome.extension.getBackgroundPage().setInactive(evt.target.value);
			}
		},false)
	}
}


Install Look-it-up Context Menu Extension in Chrome (Google Chrome Store)

Install Look-it-up Context Menu Extension in Opera (My Repository)

Standard
Browser Extension, Google Chrome, Javascript, uTube-Search, You-Tube-Search

Update – The You-Tube Search extension for Chrome is now renamed to uTube Search

You-Tube Search was taken down and replaced with uTube Search

You-Tube Search was taken down and replaced with uTube Search

Google is fussy about copyright stuff and browser extensions. I used a dash in the name to get around their copyright rules – they caught me. Google owns youtube.com, as well as you-tube.com apparently (even though it doesn’t resolve, it goes through google nameservers) – they don’t own utube.com (Universal Tube & Rollform Equipment Corporation does – I don’t think they’ll complain about my browser extension). So I think this new name will be OK (hopefully). I just want to mention that I am just trying to make searching youtube.com easier and more convenient  – nothing more.  I’m sorry if this caused my users or Google any inconvenience or problems.

The newly named version (uTube Search) is available in the Chrome Store here.

Standard
AIR, Javascript

Adobe AIR Helper File – IntrospectorAliases.js

Adobe AIR Introspector

Adobe AIR Introspector

IntrospectorAliases.js

When developing user interfaces in Adobe AIR and HTML/JavaScript you don’t have the luxury of using the browser tools you may be accustomed to using. What Adobe provides instead is the Introspector tool; which is similar to but not as feature rich as most browser tools. Hey, you have to look at the bright side, at least Adobe gives you the basics to work with.

This file was born as a bunch of functions I used to place at the bottom of the AIRIntrospector.js file. However, its not proper to change the files provided by a third party so I broke them off into this file. It usually saves me a bunch of typing while debugging my Adobe AIR user interfaces using the Introspector. Maybe it can save you a bit of typing too.

IntrospectorAliases.js


/**
 * log
 * Alias for air.Introspector.Console.log
 * @param {String} str
 */
function log(str){
    air.Introspector.Console.log(str);
}
/**
 * warn
 * Alias for air.Introspector.Console.warn
 * @param {String} str
 */
function warn(str){
    air.Introspector.Console.warn(str);
}
/**
 * info
 * Alias for air.Introspector.Console.info
 * @param {String} str
 */
function info(str){
    air.Introspector.Console.info(str);
}
/**
 * error
 * Alias for air.Introspector.Console.error
 * @param {String} str
 */
function error(str){
    air.Introspector.Console.error(str);
}
/**
 * dump
 * Alias for air.Introspector.Console.dump
 * @param {Object} obj
 */
function dump(obj){
    air.Introspector.Console.dump(obj);
}

// Almost forgot this part below

/*************************************************
 *************************************************
 * IntrospectorAliases.js Supplimentary
 * Include this at the top of page script
 * in order to leave console call functions
 * in source while not using the Introspector
 * 
 * Simply comment out the AIRIntrospector.js
 * include to turn off the Introspector while
 * testing. Doing this will avoid errors.
 *\
function log(str){air.trace(str);}
function warn(str){air.trace(str);}
function info(str){air.trace(str);}
function error(str){air.trace(str);}
function dump(obj){air.trace(obj);}
/**************************************************
***************************************************/

Standard
Android, Google Chrome, Mobile Web

Debugging Mobile Web Pages using Google Chrome Developer Tools on an Android device setup

Mobile device usage is said to exceed desktop/laptop usage in the near future. The mobile web is expected to grow exponentially as a result. This post covers setting up the mobile developer tools included in Google Chrome to debug mobile web pages running on Android. Being able to debug your mobile web pages on an actual device is the best way to see how your pages will look and behave. Google provides excellent facilities for this. To do this you’ll need a desktop or laptop, an Android device and a USB cable to connect them together.

Debugging google.com using Chrome Canary and Chrome Beta on Android

Debug mobile pages running on your Android device from the desktop setup steps

  • Install Google Chrome Canary. You cannot inspect the page running on the Android without this debug build installed on your development box. (regular Google Chrome will not allow you to inspect the page)
  • Install Google Chrome Beta on your Android
  • Enable Developer Mode on your Android device
    • Enabling developer mode on your Android device differs from build to build.
    • The most common way is to go to Settings->About(device or tablet) and scroll down to the Build Number. Then click on it seven times. You should see a popup after the first few clicks indicating how many times you have to continue to enable developer mode.
    • If that does not work consult your Android documentation.
    • If all else fails install the USB Debug application from the play store (this worked for me on Android 4.04)
  • Now you must enable USB Debugging which is listed under the Developer options menu item inside the Settings menu on the Android. (If you installed the USB Debug application – just run the app and choose it from there)
  • On your development box (laptop, desktop,..) start up Canary and open a Tab to chrome://inspect
  • On the Android start up Chrome Beta and open up a page (any page will do just to get started)
  • Now plug the Android device into your development system with the USB cable.
  • Back on your development system, on the chrome://inspect page make sure the Discover USB Devices box is checked and wait for your device to show up in the list below.

If you followed the outline above you should see your Android device listed along with any open tabs that may be open in Google Chrome Beta on the Android. From your development desktop you now have complete control over Google Chrome Beta on on your Android. You can open new tabs, reload a tab, close a tab, and inspect the document opened in a tab with Chrome developer tools. Once you start inspecting pages you can screencast what is displayed on the Android by hitting the mobile icon on the inspector toolbar. Now, you can inspect elements graphically on the screencast screen.

Debugging development server mobile pages on your Android device

In order to set up debugging your mobile pages from a local server on your Android device you must enable port forwarding inside of Canary on your development box.

  • Set up your local server to use port 8080 as default is the easiest way as Chrome Canary has that set by default.
    • On Apache edit the httpd.conf to default to 8080 instead of 80
  • If you’re entering a new port forwarding entry you cannot use port 80 or 443 – Chrome Canary will not allow you to set up port forwarding on them.

With that out of the way you should be able to open up pages hosted on your local development server on your Android device for debugging. There you have it – short n sweet ;^>

References

Standard
Browser Extension, Google Chrome, Javascript, Omgili Search

Google Chrome Extension – Omgili Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search Omgili (omgili.com) from the Omnibox.  To use, simply type ‘omg’, a space, and your search query into the Omnibox, then choose a time frame from the drop down, and it will open your search results up in a new tab. Omgili is a time sensitive international message board search engine (in case you didn’t know).

manifest.json


{
	"name" : "Omgili Search",
	"short_name": "omg Search",
	"description" : "To use, type 'omg' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "omg"
	},
	"icons" : {
		"16" : "omg_16.png",
		"32" : "omg_32.png",
		"48" : "omg_48.png",
		"128" : "omg_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputChanged.addListener(function (text, suggest) {
	suggest([{
				content : encodeURIComponent(text) + "&tf=day",
				description : "Search Omgili in the past day (default)"
			}, {
				content : encodeURIComponent(text) + "&tf=week",
				description : "Search Omgili in the past week"
			}, {
				content : encodeURIComponent(text) + "&tf=month",
				description : "Search Omgili in the past month"
			}, {
				content : encodeURIComponent(text) + "&tf=year",
				description : "Search Omgili in the past year"
			}, {
				content : encodeURIComponent(text) + "&tf=any",
				description : "Search Omgili with no time frame"
			}
		]);
});
chrome.omnibox.onInputEntered
.addListener(function (text) {
	var createProperties = {
		url : "http://omgili.com/search?q="
		 + text
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Omgili Message Board Search query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install Omgili Search Extension (chrome store)

Standard
Alexa-Search, Browser Extension, Google Chrome, Javascript

Google Chrome Extension – Alexa Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search Alexa (alexa.com) from the Omnibox.  To use, simply type ‘alx’, a space, and your search query into the Omnibox and it will open your search results up in a new tab.

manifest.json


{
	"name" : "Alexa Search",
	"short_name": "alx Search",
	"description" : "To use, type 'alx' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "alx"
	},
	"icons" : {
		"16" : "alx_16.png",
		"32" : "alx_32.png",
		"48" : "alx_48.png",
		"128" : "alx_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://www.alexa.com/search?q="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search Alexa using the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install Alexa Search Extension (chrome store)

Standard
CEH, Javascript, Links, NodeJS

Link – Node nmap: Scan a network for computers using nmap

Jason Gerfen wrote a package for using nmap with node.js if you’re interested.

From jsclasses.org:
“This is a Node.js module that can scan a network for computers using nmap.

It uses the nmap program to either discover local computers in the same network address range or scan a network of remote computers within a given range.

It outputs a listing of details computers found including IP addresses as well opened ports that were found.”
http://www.jsclasses.org/package/315-JavaScript-Scan-a-network-for-computers-using-nmap.html

Standard
Browser Extension, Google Chrome, Javascript, Wikipedia-Search

Google Chrome Extension – Wikipedia Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search Wikipedia (wikipedia.com) from the Omnibox.  To use, simply type ‘wiki’, a space, and your search query into the Omnibox and it will open your search results up in a new tab.

manifest.json


{
	"name" : "Wikipedia Search",
	"short_name": "wiki Search",
	"description" : "To use, type 'wiki' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "wiki"
	},
	"icons" : {
		"16" : "wiki_16.png",
		"32" : "wiki_32.png",
		"48" : "wiki_48.png",
		"128" : "wiki_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://en.wikipedia.org/w/index.php?search="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search Wikipedia for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install Wikipedia Search Extension (chrome store)

Standard