teaching machines

Walkthrough/Service description apps

December 20, 2011 by . Filed under cs491 mobile, fall 2011, postmortems.

For the final project, I added to an old app and also created another to go with it.   Originally I intended to expand the functionality of the database app we made earlier this semester.  I did add some features, such as a tabular view and a database of machines to choose from, but did not implement as many as I hoped to.  To supplement this, I made an additional app.

The database app is similar to what we did earlier.  It has the same look and feel, as in that you can add a new machine and once added, you can edit the machine details. When the user chooses to add a new machine, a new activity is spawned that has a list of machines to choose from.  The machines are separated into tabs to make it easier for the user to find the machine they are looking for.  The tabs are Printers, Copiers and Faxes.  I did not implement a full database to look up these machines, it is something I would have liked to do though.  I made these tabs by making three separate classes that extend ListActivity.  These three activities are called by the activity that is made when the use chooses to add a new machine.  This is a TabActivity.  It creates the tabs and brings whatever tab the user selects into the view.  Here is how I implemented this:

	    intent = new Intent().setClass(this, FaxActivity.class);
	    spec = tabHost.newTabSpec("faxes").setIndicator("Faxes",
	                      res.getDrawable(R.drawable.tab_faxes))
	                  .setContent(intent);
	    tabHost.addTab(spec);

	    tabHost.setCurrentTab(0);

This tells what ListActivity to display when a tab is clicked and also what image will be displayed above the name of the tab.  Below I am setting the current tab to the left most tab, which is the printer tab.  This is what the tabs look like:

Like I said, I did not implement a database for this portion of the app.  Otherwise there would be many more machines to choose from.

The after the use selects a machine, an edit screen is displayed.  It is similar to the way we did it in class, just a few more fields for all the machine features.  It looks something like this:

 

This is used concepts we used earlier so I feel it does not need to be reiterated.

 

The second app is one that would be used to show a customer to explain what this undisclosed company does and to talk it up a bit.  This app implements videos, plays videos and displays pdfs.  Looks like this:

The attention of the app is drawn to the ‘wheel’ of services that the company offers.  When a piece of the pie is clicked on, a short description of what the service is and some key questions to ask the customer about using the service.  This was challenging determining what slice the user clicked on.  I determined this by locating the center of the wheel and finding what angle the event happened relative to the center.  I also found the radius of the circle and only process clicks if they occur within the are of the wheel.

You can’t see it but, when the app starts up or resumes, the wheel spins around in a circle. Kind of resembling a pinwheel.  This was easier than I thought to do.  Within my view with the wheel image, I placed this method:

        private void createAnim(Canvas canvas) {
            anim = new RotateAnimation(0, 360, canvas.getWidth() * .295F, canvas.getHeight() / 2);
            anim.setRepeatCount(0);
            anim.setDuration(2000L);

            startAnimation(anim);
        }

This tells the canvas where the pivot point is, how much to rotate, now many times to repeat this process and how long the entire animation should take.  Being I developed this on a Motorola Xoom, it may not work on all devices.

To go along with the descriptions of the services, there are also written testimonials and video testimonials.  Clicking the “Written Testimonials” button brings up a list of pdfs that are on the device.  The user selects one and a new intent is launched that handles pdf file types.  If the device has no functionality to open pdfs, a error message is displayed.  It looks something like this:

        if (file.exists()) {
            Uri path = Uri.fromFile(file);
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.setDataAndType(path, "application/pdf");
            intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);

            try {
                startActivity(intent);
            }
            catch (ActivityNotFoundException e) {
                Toast.makeText(QuarterlyReviewActivity.this,
                    "No Application Available to View PDF",
                    Toast.LENGTH_SHORT).show();
            }

Something similar is done when displaying a video.  I created a video holder that takes in a file location and sends it to the holder.  This holder is a VideoView and plays the video.

Other than that, its a pretty straightforward design and does what it is suppose to do.