iMedia Ventures - Easy to Create and Maintain Websites

August 16, 2012
by admin
0 comments

AngularJS Tips and Tutorials

This blog post will be for discoveries I make using AngularJS that can hopefully help you as well. My learning is driven by the desire to develop an open source ‘app’ that helps people with disabilities such as autism to speak. Here is one version of the tap to speak web app. With Chrome and other browsers you can right click and ‘inspect element’ to view the javascript (app.js and grid.js, the rest are libraries) and the various html pages (index.html, tpl/sentence.html, etc).

For some of you, AngularJS might require a different way of thinking, especially if you’re good with jQuery. Try to use the built-in databinding as much as you can, where $scope variables in your controller will be bound to expressions in the HTML. eg $scope.name would be referenced by {{name}} in the HTML. Use the ng-click directive for click events, and ng-repeat to loop around arrays in your controller.

For starters the majority of discussion is happening on the AngularJS Google group and some on StackOverflow

Angular Docs
Angular tutorial, dev guide and APIs. Some of the docs can be confusing but go through the tutorial and read the dev guide and APIs over and over (especially rootScope, directives, etc) once you get past the basics.

Video Tutorials

Anything by John Lindquist and simpulton are great.

JsFiddle Examples

AngularJS folks have posted a list of jsfiddles for AngularJS for each version

Popup (using Bootstrap Modal and Angular-ui)

http://jsfiddle.net/willkriski/4GNBd/26/

Simple form submit (ng-model) to controller

http://jsfiddle.net/willkriski/yQs8z/30/

Simple form submit to controller, using jQuery’s form serialize (need DOM element)

http://jsfiddle.net/willkriski/yQs8z/59/

Insert an HTML fragment using ng-bind-html-unsafe

http://jsfiddle.net/willkriski/8XAXe/4/

Directives (for more advanced applications)

Really basic directive using template: http://jsfiddle.net/mhevery/zg7Jd/1/

This is actually my example (modified from simpulton) where you can animate elements using a custom HTML element and attributes, via a directive. Note the difference with the original jsfiddle where they reference the child elements rather than an attribute driven approach (eg. animate=”down”) http://jsfiddle.net/simpulton/E7xER/ Update: Okay someone came up with an even slicker version! http://jsfiddle.net/willkriski/E7xER/90//

Drag and drop features using directive and services

July 16, 2012
by admin
0 comments

App for Autism

I’m working on an open source, web-based app for Autism or others who can’t speak. You can use it right now, or download the source code from Github and make changes as you see fit. I’ll be continuing to add more features based on feedback from anyone who provided it, hopefully you!

The app is based on HTML5 so that with some work it will be available on any device, rather than having to write an app for every type of device out there (iPhone/iPad, Windows, Android, Blackberry, etc). HTML5 is getting more powerful with each passing year, including some upcoming features with webcams and microphones (without requiring a browser plugin).

Upcoming features could be that it can work completely offline, build up a sentence/phrase before speaking, customize the layout, and so on.

The app uses HTML5, meaning HTML elements, Javascript (AngularJS), CSS (Twitter Bootstrap), and Open Mary text-to-speech server. The speech part can also use audio files such as mp3 files, or Google Translate service. If you would like to help out, or provide feedback on the app if you’re a therapist or parent with someone using the app, feel free to contact me.

July 3, 2012
by admin
0 comments

Eclipse, Python 2.7 and Google App Engine

Cloud computing is becoming popular and the idea is that you can use Google App Engine as a REST based server (often for free) and then each of your clients (mobile, desktop) would connect to the server via REST. And based on the latest Google I/O developer conference, they are making it easy to create REST services based on your object models, and will also generate the clientside Javascript (or XCode, Java, etc). This tutorial is about getting Python 2.7 working with Eclipse and Google App Engine in preparation for future enhancements.

A while ago I managed to get Eclipse working with Python 2.5 but thought I would upgrade to Python 2.7 since Google App Engine now supports it. If you’re new to Python and/or Eclipse it can be a little tricky to get things working. This tutorial is helpful to get you going, but I will add a few points.

If you have used Python 2.5 in Eclipse or haven’t done a project before, you need to add the 2.7 interpreter. On my Mac the location of this is /Library/Frameworks/Python.framework/Versions/2.7/bin. You can find this out by opening up a Terminal (under Applications/Utilities) and typing ‘type -a python’ on the command line. So to set the Python Interpreter go to Eclipse->Preferences->PyDev->Interpreter-Python and click the New button.

Then when you create a new project make sure you select the Interpreter as 2.7, or if you want to modify an existing project, right click on the project and select Properties. Once you’ve set the interpreter to 2.7 the basic helloworld app would look something like:

import webapp2

class MainPage(webapp2.RequestHandler):
 def get(self):
 self.response.headers['Content-Type'] = 'text/plain'
 self.response.out.write('Hello, webapp World!')

app = webapp2.WSGIApplication([('/', MainPage)],
 debug=True)

Note that this is simpler than the same code for Python 2.5. Also the app.yaml file changes so that the handler points to the app object, not the .py file itself. So the .app matches the ‘app’ (some tutorials have shown this as ‘application’ from v2.5 which is wrong). Also the threadsafe entry is required in 2.7. If you set it to true, App Engine will serve the request concurrently instead of serially. You can specify the libraries you want to use (helps backwards compatibility) but I didn’t do that in this sample.

application: helloworld
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /.*
 script: helloworld.app

Hope this help someone out there!

June 29, 2012
by admin
0 comments

Using jQuery and CSS to hide an image but Keeping the Space

If you dynamically add li and img elements (via Javascript) to your HTML page (DOM) it can be tricky to get jQuery to control them, such as toggling them on and off. In other words, these new elements won’t show up when you ‘view source’ (you have to use Chrome’s inspect element feature). Many of the answers on StackOverflow didn’t work for me.

If we have this dynamically created HTML snippet:
<ul> <li><img src="someURL" /></li> <li><img src="someURL" /></li> </ul>
We can use this jQuery to toggle (add or remove) the img CSS class. The on() function makes sure it works for any new HTML elements are added after the initial page is loaded (via jQuery)
$(document).on('click', "li img", function(e) { $(this).toggleClass('none'); });

This code just toggles the class that is equal to 'none' for the img element that was clicked. In other words, it adds and subtracts the class to the img element, so when it is added, any CSS that addresses the 'none' class will be used.

Here’s the CSS:
.none {opacity : 0.1; filter: alpha(opacity=10); }

This sets the opacity of the img tag to 10%, so you can still see the image. You could do other things to the image if you want. Here’s a screenshot of the effect: