The human request was to see all the video camera feeds from the preschool classroooms on an iphone.
Great: This is an app for a non-profit organization that has preschool classes and other ages above this. The intent is that parents can take the material and continue mentoring their kids ALONG with the organization. This organization is a church – so that is why the family focus.
Step 1 – Make it a tabbed app. Since the video portion is not going to be the only use for the app lets make it a tabbed app.
Step 2 – figure out the video feeds. These are foscam FW8919W cameras (I can’t believe they sell for <$90 – these are beyond full featured cameras). Here is the link to figure all this out from foscam. It turns out that the most memory efficient is the MJPEG route with an UIImage item. Googling revealed this guy who has a side-by-side test of a web view vs. image view on the iphone and helped me figure this out. I used his class he has in that app – thank you.
Step 3 – using storyboarding and a UI Scroll View with paging enabled, the app loads in a jiffy. Now I need to unhard code it (arrgg) … but that is done as well. That article also outlines how to do a page controller. Don’t forget to set the .numberOfPages property which that article is missing. I also changed a label above the movie so you know what room in english you are looking at.
Step4 – add a web browser UIWebView to the 2nd storyboard and a back button to make it go back
Step5 – make a webpage and link it into step 4 (this took the longest ironically). The size is 320 by 420px for an iPhone
Step6 – add in some user preferences so that when the user comes back – it remembers the last camera it was viewing.
Step7 – test it all. Finally after about 6 hours it all works.
Testing on the real iPhone
Now I upgraded my iPhone to version 6 and my XCode does go to version 6 because I am still running Leopard for performance reasons. I guess I will have to upgrade to Lion now (arrg)
Now I noticed things that I could not on the simulator
- I cannot scroll my PDFs in the UIWebview
- The system should tell me when I am in an environment where it won’t work (it only should work in the intranet – the over the internet)
- a few other details like turning off cameras when the paged view of the cameras was not on that particular camera
- camera should not rotate. This was a little tricky. I tried to edit the orientations method- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientationbut to no avail. Edit the AppName-Info.plist and delete the rows (or plist entries) for all devices (ipad and iPhone that are not button bottom.
Finishing Touches
- made all icons as per this article and dragged them from the finder into the app’s main page in xcode and the summary tab
- reconnect everything in the iPad story board (re-learn, re-remember all the connections you did)
Here are some quick links for now so that everyone can follow what I had to do to get this working. When I have time, I will back fill the information in:
- Get clicking on the 2nd tab to also stop the cameras
- Add some UI stuff to let my users know that something might be happening and if it isn’t working why
- you could have your app rejected at the app store
- Need to get wifi to talk to your app and send triggers
- I rewrote a re-write of Apple’s reachability app and SimplePing
- Added in the 2nd tab – but wanted to make it available offline
- wow -there is a whole technology in html5 to do this – very exciting stuff
- see my article on building a plugin in wordpress and make a custom set of tempaltes to do this, then to have it serve up its own articles using the html5 applicationCache that comes with ALL new browsers. Unplug your device from the net… and the website STILL WORKS
- It did not work to have the applicationCache working – many articles on this topic
- I then put the AppDelegate as my tabBarController delegate (you can’t use storyboard to hook this up)
- add to your appDelgate.h file the UITabBarControllerDelgate in the interface delcaration (
- [cc]@interface DCAppDelegate : UIResponder <UIApplicationDelegate, UITabBarControllerDelegate>[/cc]
- add a property [cc]@property (strong, nonatomic) UITabBarController *tabBarController;
[/cc]
- add the following code to tell you who the delate of the tabBarContoller is your appDelegate
- add tabBarController delegate method to capture when someone clicks on a tabBarController button – click here for details
Loved to read it. Would have been better if u had added some screenshots
Thanks for the thumbs up. I will add more screenshots to the next blog I do – speaking of which – I am about to do a rant/blog (the missing chapter) of an MVC app that I just created – so because of your comment, I will add screenshots to that one.