Braindrop Labs Apps

Category Archives: Tutorials

Intro

Searching JSON is actually pretty simple. It is powerful too, as once you have some JSON loaded and cached locally it is much quicker to search than a server-side approach. The amount of data you end up needing to search over should be the determining factor on whether this approach will be best for your situation. An example of a project I’m currently using this on is a video library web page where all the videos and their respective data are defined in JSON (title, body, keywords). I can then search over this JSON and show visually the videos that match their respective JSON nodes. When launched I will post the link here.

Below I will be showing you an approach that results in both suggested search terms and object matching when searching JSON data. Suggested search in this example works using a regular expression I wrote that matches a query string to the entire word that contains it. For example if you searched for “ink” in the example Library.json file below a match of “thinking” (from the Thinking in Numbers… node) and “ink” (from The Biology… node) would be found.

console.log("Basic Suggested Search: " + aRegExpMatches); 

//Basic Suggested Search: ["thinking", "ink"]

I was initially intimidated by RegExp but it really isn’t that bad, it’s just a code where a small subset of predefined characters do a certain type of matching. I watched Using Regular Expressions with Kevin Skoglund on Lynda.com and I highly recommend it. Regular Expressions are insanely powerful and a must learn if you ever plan on doing custom search and unique matching.

The object matching uses Javascript’s built in String.indexOf() which ends up being really damn fast. When matches are found we collect the object who contains the match so we can return an entire item. Using the same “ink” query results in:

console.log("Matched Search Objects: " + aSearchMatches);

/*Matched Search Objects: [{
        "title": "Thinking In Numbers: On Life, Love, Meaning, and Math",
        "keywords": "numbers, mind, love, life, match",
    }, {
        "title": "The Biology of Sharks, Squid, and Rays",
        "keywords": "shark, physiological, ink, cartilaginous, fishes, taxonomy, ecology",
    }]*/

Returning the entire object gives us flexibility: we could create a stylized search result view that contains the title for example (and not just the matched word which wouldn’t have any context). Notice the example just has the title and keywords, but if I had a thumbnail property in the JSON I could show the corresponding thumbnail of the match as well. You can get creative too, as once you have the object, any other properties set inside become accessible. Pretty cool if you ask me.



Library.json

This is the simple example JSON file referenced above. You would load this via ajax (unless you felt compelled to have it baked in JS which I wouldn’t recommend). It would likely contain more than three items too, this is just an example.

//Library.json example
{
	"library": [{
	    "title": "The Sports Gene: Inside the Science of Extraordinary Athletic Performance",
	    "keywords": "run, runner, stride, gene, sports",
	}, {
	    "title": "Thinking In Numbers: On Life, Love, Meaning, and Math",
	    "keywords": "numbers, mind, love, life, match",
	}, {
	    "title": "The Biology of Sharks, Squid, and Rays",
	    "keywords": "shark, physiological, ink, cartilaginous, fishes, taxonomy, ecology",
	} /*... alot more data */ ]
}



Search Function

Here is an example search function utilizing what I talked about above. For the suggested search the meat is the regular expression found on line 7, the while loops, and the aRegExpMatches array. For the object matching the meat is the indexOf function, the hasMatch boolean flags, and the aSearchMatches array push on line 40. You can easily add or remove properties in your JSON object and update the search function’s if/else statements for search customization.

function search(pSearchQuery)
{
	//setup
	var title,
		keywords,
		matchTarget = pSearchQuery.toLowerCase(),
		regex = new RegExp("(?:\\w+)?(" + matchTarget + "(\\w|\\.\\w|\-|)+)", "gmi"),
		regexpRepeatMatch,
		aSearchMatches = [],
		aRegExpMatches = [],
		hasMatch = false; //default

	//may want to filter out certain words here (common words like "a", "the", etc)

	//search all data - order is important for match priority (title, keywords)
    //uses indexOf approach, if it slows try a binary search approach
	$.each(libraryJsonRef.library, function(libraryKey, libraryItem)
	{
		hasMatch = false;
		title = libraryItem.title.toLowerCase();
		keywords = libraryItem.keywords.toLowerCase();

		if(title.indexOf(matchTarget) > -1)
		{
			while ((regexpRepeatMatch = regex.exec(title)) != null)
				aRegExpMatches.push(regexpRepeatMatch[0]);

			hasMatch = true;
		}
		else if(keywords.indexOf(matchTarget) > -1)
		{
			while ((regexpRepeatMatch = regex.exec(keywords)) != null)
				aRegExpMatches.push(regexpRepeatMatch[0]);

			hasMatch = true;
		}

		//append
		if(hasMatch)
			aSearchMatches.push(libraryItem);
	});

	console.log("Basic Suggested Search: " + aRegExpMatches);
	console.log("Matched Search Objects: " + aSearchMatches);
}



Conclusion

All in all JSON Searching is pretty simple. Hope you learned something. I will be posting a live example of this soon. If you have improvements/optimizations throw them my way. You can leave a comment below or connect with me on Twitter – @derekknox.

*This post assumes an intermediate knowledge of Android Development. 

Introduction

I’ve had some ideas for personal apps floating around my head the past few months, but I hadn’t gotten around to building any of them until now. There were numerous times I found myself using an app on my phone to execute a single task or two, but I felt as though I didn’t need to actually launch the app and use a UI (I just wanted to execute a small subset of functionality within the app). I wanted to simply click a button to execute some action within an app, but not launch the app visibly and then have to manually exit out and destroy it. Call me lame, but I felt as though I was clicking/touching buttons more than I really needed to. This led me to the idea of an invisible app. I knew of Widgets obviously, but they didn’t fit my requirements. I was unsure if my idea was even possible, but I knew I wanted my app to abide (yes, The Dude does) by two things…

  1. Lightweight in memory consumption (must use minimal resources and it must kill itself – to free up system resources)
  2. Invisible/transparent (no UI)

 
Basically, I wanted to click an app icon on one of my home screens and have the app do the following, in order…

  1. Launch app (invisible/transparent)
  2. Execute some action(s)
  3. Destroy itself (to free up memory)

 
I am aware that Android Widgets provide similar functionality, but Step 3 was not possible (correct me if I’m wrong here). Again, my specs require the app to destroy itself, not run in the background like Widgets can. As a result of these requirements, I figured out a way to achieve my goal. I leave you with How to Create Transparent Apps with Android.

Read More »

Introduction

If you are interested in setting up AIR 3.2 in FlashDevelop, I highly recommend checking out this document created by Rosario Azzarello of http://www.gamedesign.ch/. The directions worked great for the most part, though there were three things I needed to change to make it work. I would suggest trying his directions first, but if it doesn’t work you can try what I did. There were three core things I had to do to get it working…

Read More »

These directions are for Windows machines but they should work for Mac as well. The only difference should be the file system paths.

Introduction

I”ve been testing the new capabilities of Flash Player 11.2 (and FP11 for that matter) and the addition of Stage3D is sick. You can get a breakdown of all the new additions from the release notes found here.

Anyway, I’ve noticed on forums that <many>some</many> people don’t use Flash Builder (I use/love FlashDevelop by the way) and have a hard time targeting newer runtimes of the Flash Player in Flash Professional. As a result I want to show you how to target newer Flash Player runtimes (specifically FP11.2) using Flash Professional CS5. I can attest that this solution works for both Flash Pro CS5 and CS5.5. It may just as easily work for Flash Pro CS4 and earlier, I just haven’t tested it (let me know if you get it to work). This also is not specific to targeting FP11.2, you should be able to do this for any new Flash Player release. Let’s get started.

Read More »

This post assumes you have a Google Analytics account.

Introduction

This is a follow up to my previous post Tutorial: Tracking Browser Content Window Size with Google Analytics (1 of 2) where I explained how to incorporate a tracking scheme to read and record your site’s visitors browser dimensions (as opposed to screen resolution). This is powerful because you get data which informs you of the viewing area of the browsers of your visitors. You can come to your own conclusions with how to use your data, but you can quickly get an idea if certain content is out of your visitors viewing area and/or if your layout and design are as efficient as they could be. That said, I will now explain how to view this data in Google Analytics.

Read More »

This post assumes you are familiar with Google Analytics. It also assumes you are familiar with HTML and Javascript.

Introduction

Google Analytics is super powerful and the fact it is free is amazing. If you don’t know what it is and you work in Web Development it is a must that you introduce yourself to it (or some other form of analytic strategy). Check it out at http://www.google.com/analytics/. If you are here because you want to add Browser Size (as opposed to Screen Resolution) tracking to your Google Analytics account(s) then you’ve come to the right place. Enjoy.

Read More »

This post assumes an intermediate knowledge of AndEngine and Java for Android. The assumption that the Scene and Engine have been initialized is also made.

Introduction

I’ve been working and experimenting with AndEngine for a little over a year now and I wanted to share some information regarding the “Pinch and Zoom” functionality built into the engine. The engine itself makes it pretty easy to utilize multi-touch pinch and zoom, but documentation explaining how to do so is lacking. There are examples which will help developers understand the intended purposes of many of the engine’s core concepts, and they can be found at http://code.google.com/p/andengineexamples/ .

Anyway, for my implementation I created the class TouchAndCameraManager which, as you might guess, helps me manage user touches and the camera’s reactive behavior. Below are the core steps needed to complete pinch and zoom in Android using AndEngine.

Read More »

This is a republish from my previous lab. The original publish date was Apr 7, 2010.

Introduction

In experimenting with SWFObject 2, I came across the question, how do I enable my flash content to display full browser? I found a few solutions but found the following solution to work best for me. The implementation is simple and effective.

Solution

The solution comes after viewing the source for the page found at http://www.bobbyvandersluis.com/swfobject/testsuite_2_2/test_dynamic_fullbrowserflash.html. An explanation isn’t made, but the result is present in viewing the page, I have in turn created an explanation.

  1. You must create a page using SWFObject, I used the AIR app Generator to streamline my HTML page build.
  2. Ensure you set the “Dimensions” to “Percentage” and set 100 as the value for both the width and height.
  3. Next you need to define some CSS (ideally in an external CSS file) and wrap your alternative content into another DIV tag. View the highlighted elements in the image below for visual reference.

 

Read More »