AgileMedicine

AgileDiabetes – Diabetic Tracking for Android

September 23rd, 2009

We have just released a new Android application for individuals with diabetes that allows tracking of blood glucose values. The new application, AgileDiabetes, allows for the easy entry of glucose values using either the touch display or keyboard. The application quickly logs and graphs the information for quick analysis. In addition, the software allows you to easily e-mail the glucose values from a selected date range to yourself or your physician.

Future updates will also include the option to integrate with GoogleHealth. Please feel free to leave comments or e-mail us at info@agilemedicine.com for feature requests, bug reports, or comments!

Posted in Uncategorized | No Comments »

Silverlight 3 and DeepZoom

August 27th, 2009

Microsoft’s Silverlight 3 and the DeepZoom composer allow users to display high-resolution images interactively. This provides several benefits for either sets of images in a gallery or for smoothly viewing very large image files.

This brief tutorial will demonstrate how to set up a Silverlight 3 project with interactive zoom and panning/scrolling with a DeepZoom image.

The first thing we will do is add the MultiScaleImage control to our automatically generated UserControl. This control contains the event handlers that we will need to interact with the deep zoom image.

<MultiScaleImage x:Name="_deepZoomImage" Margin="7" MouseWheel="_deepZoomImage_MouseWheel" MouseLeftButtonDown="_deepZoomImage_MouseLeftButtonDown" MouseLeftButtonUp="_deepZoomImage_MouseLeftButtonUp" MouseMove="_deepZoomImage_MouseMove" MouseLeave="_deepZoomImage_MouseLeave">
    <MultiScaleImage.Effect>
        <DropShadowEffect ShadowDepth="8" BlurRadius="10" Color="#FF605D5D"/>
    </MultiScaleImage.Effect>
</MultiScaleImage>

We’ve already added several event handlers to the control:

- MouseWheel: Event fires when the scroll wheel moves forward/backward on the mouse.

- MouseLeftButtonDown/Up: These events fire when the user clicks. Both will be necessary to determine if the user is clicking or dragging the image.

- MouseMove: Will also be used for dragging/panning the image within the control.

- MouseLeave: Indicates when the mouse cursor leaves the control area. Needed in case the user passes the edge of the control when panning.

Now that we have our control created within our XAML file, we can begin loading our images and adding the code to interact with the control. First, we need to prepare a DeepZoom image using the DeepZoom composer. There is a short video to learn how to import images and create a Silverlight DeepZoom collection. Once created, the “GeneratedImages” folder can be uploaded to a webserver of your choice, or used locally depending on the setup of your Silverlight project (be careful for cross-zone policy issues if debugging Silverlight from the ASP webserver and using local image files).

We will need three global variables to keep the status of our mouse:

bool _dragging = false;
Point lastMousePosition;
Point lastMouseViewport;

We can then add in our basic information into the main constructor:

public MainPage()
{
    InitializeComponent();
    string baseUrl = "http://pathToImages/"
    _deepZoomImage.Source = new DeepZoomImageTileSource(new Uri(baseUrl + "/dzc_output.xml"));
}

The above URL can point either to the collage “dzc_output.xml” file, or to an individual deep zoom image XML file (found in the “dzc_output_images” folder). This set of code will load the image into our control as soon as the form loads. Depending on how your application functions, this can be done at any point or bound to other controls (buttons, list of albums, etc).

The application should compile at this point and be able to display the images. Now we can start to add some interactivity to the images.

First, we will add the code to tell our control when the user is dragging the image:

// Set dragging to true when user clicks their mouse within the control
private void _deepZoomImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    _dragging = true;
}

// Set dragging to false when user stops click
// If the mouse position hasn't changed, zoom in on the current location
private void _deepZoomImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    _dragging = false;
    if (e.GetPosition(_deepZoomImage).Equals(lastMousePosition))
    {
        Point mouse = e.GetPosition(_deepZoomImage);
        _deepZoomImage.ZoomAboutLogicalPoint(1.6, (_deepZoomImage.ElementToLogicalPoint(mouse)).X, (_deepZoomImage.ElementToLogicalPoint(mouse)).Y);
    }
}

The first value within “ZoomAboutLogicalPoint” can be adjusted based on how far in or out you would like the image to zoom. The additional values indicate the “LogicalPoint” within the image that was clicked (a value of 0 to 1 indicating the far left/top to far right/bottom). To prevent some general bugginess within the application, we’ll also add a “stop dragging” command for when the user leaves the control:

// Set dragging to false when mouse leaves the control area
private void _deepZoomImage_MouseLeave(object sender, MouseEventArgs e)
{
    _dragging = false;
}

Now to actually handle the dragging. These statements get placed in the MouseMove event handler. If our user has clicked (_dragging == true), we can move the image. If our user hasn’t clicked, set the last position for use with dragging:

// Code to handle panning our image
private void _deepZoomImage_MouseMove(object sender, MouseEventArgs e)
{
    if (_dragging)
    {
        Point newOrigin = new Point();
        newOrigin = lastMouseViewport; // Set the last mouse position

        // Add the X and Y values of our current mouse position
        newOrigin.X += ((lastMousePosition.X - e.GetPosition(_deepZoomImage).X) / _deepZoomImage.ActualWidth * _deepZoomImage.ViewportWidth);
        newOrigin.Y += ((lastMousePosition.Y - e.GetPosition(_deepZoomImage).Y) / _deepZoomImage.ActualWidth * _deepZoomImage.ViewportWidth);

        // Set the Viewport origin to the new mouse location
        _deepZoomImage.ViewportOrigin = newOrigin;
    }
    else
    {
        lastMousePosition = e.GetPosition(_deepZoomImage);
        lastMouseViewport = _deepZoomImage.ViewportOrigin;
    }
}

In the above code, the X and Y scroll distance is calculated by subtracting the current mouse position from the last recorded location. This value is then divided by the image’s ActualWidth and multiplied by the ViewportWidth to compensate for any zooming within the image (otherwise the image will scroll very fast or very slow if the user has zoomed in or out).

Almost done! We’re also going to add an event so that the use can scroll in and out using their mouse wheel:

private void _deepZoomImage_MouseWheel(object sender, MouseWheelEventArgs e)
{
    Point mouse = e.GetPosition(_deepZoomImage);
    if (e.Delta > 0) // If scrolling in
    {
        _deepZoomImage.ZoomAboutLogicalPoint(1.2, (_deepZoomImage.ElementToLogicalPoint(mouse)).X, (_deepZoomImage.ElementToLogicalPoint(mouse)).Y);
    }
    else // If scrolling out
    {
        _deepZoomImage.ZoomAboutLogicalPoint(0.8, (_deepZoomImage.ElementToLogicalPoint(mouse)).X, (_deepZoomImage.ElementToLogicalPoint(mouse)).Y);
    }
}

We use our Delta value to determine if the user was scrolling in or out, and then zoom using ZoomAboutLogicalPoint accordingly. Again, the first value can be changed to alter the “speed” of zooming. This works great for desktop users, but adding additional functionality for people without scroll wheels (particularly laptop users) would be necessary for a full-featured application.

Finally, we’re going to add one piece of XAML and an event handler in case the image gets lost so that the user can reset the zoom and position of the original image:

<Button x:Name="resetZoom" Height="27" HorizontalAlignment="Right" Margin="0,47,128,0" VerticalAlignment="Top" Width="29" Content="Reset&#xd;&#xa;Zoom" Opacity="0.25" FontSize="8" Click="resetZoom_Click">
    <Button.Background>
        <SolidColorBrush Opacity="0.5" Color="#FF1F3B53"/>
    </Button.Background>
</Button>

private void resetZoom_Click(object sender, RoutedEventArgs e)
{
    _deepZoomImage.ZoomAboutLogicalPoint(_deepZoomImage.ViewportWidth, 0.5, 0.5);
    _deepZoomImage.ViewportOrigin = new Point(0, 0);
}

Since the ViewportWidth indicates how far the image is zoomed, we simply tell our control to ZoomAboutLogicalPoint with ViewportWidth as the first argument. We then reset the position to the center of the image.

To view the final project: http://www.agilemedicine.com/resources/DeepZoomExample

We’ll get the full source code posted soon. If you have any questions or comments, feel free to leave them below or e-mail us at info@agilemedicine.com.

Tags: deepzoom, multiscaleimage, Silverlight, tutorial
Posted in Code snippets, Silverlight | No Comments »

Android Medication/Drug Reference

May 10th, 2009

We get several e-mails each week regarding the availability of a drug reference for the Android platform. Unfortunately, we are unaware of any that are available as standalone applications at this time. Unfortunately, we do not own the rights to any of the currently available drug databases, and therefore cannot create an Android-specific application to use them. If anyone knows of an available database, please let us know (info@agilemedicine.com) and we would be happy to look at creating an application to use it!

In the meantime, as long as 3G or wireless access is available, ePocrates does offer an online version of their application: https://online.epocrates.com/home.

Please feel free to post links to other available references or databases in the comments if you have found one that works well!

Tags: Android, drug reference
Posted in Android | No Comments »

Adobe Flex: WebService XML Array Binding, Value-Enabled ComboBox

April 26th, 2009

While working on a new application using Adobe Flex, one shortcoming of the ComboBox was readily apparent: there is no way to store a value and display a different string like one can do with HTML:

<SELECT>
  <OPTION value="123">First String</OPTION>
  <OPTION value="124">Second String</OPTION>
  <OPTION value="125">Third String</OPTION>
</SELECT>

While browsing the internet, there were several pages that either made a custom ComboBox to store the data, or went through a decent amount of loops and arrays. One other task that was difficult was trying to use the HTTPService to bind XML data to an array.

HTTPService to Array

This solution doesn’t bind directly to an array, but uses the XMLListCollection instead, which works similar to an ArrayCollection. The HTTPService is set up like the main examples for binding to other objects:

<mx:HTTPService id="xmlList"
    url="http://www.mywebserver.com/webService.php"
    result="handleXml(event)"
    fault="handleFault(event)"
    resultFormat="e4x">
    <mx:request>
        <type>{requestedType}</type>
        <format>{requestedFormat}</format>
    </mx:request>
</mx:HTTPService>

To set this data to an array (or in this case an XMLListCollection):

private var myXmlCollection:XMLListCollection;

public function handleXml(event:ResultEvent):void{
    if(event.result != ""){
        // Set the data to the XMLListCollection for lookup
        myXmlCollection= new XMLListCollection(event.result.node);
        // Bind the ListCollection to the comboBox
        myComboBox.dataProvider = myXmlCollection;
    }
}

Use XMLListCollection for Value-Enabled ComboBox

To have the ComboBox use the current ID when we change it, we then use the “change” attribute:

<mx:Label text="My List Data: "
       x="10" y="40"/>
<mx:ComboBox id="xmlList"
    x="60" y="38"
    width="250"
    labelField="description"
    change="getCurrentId()" />

And finally, we lookup our current value/ID:

public function getCurrentId():void{
    var o:Object = myXmlCollection.getItemAt(xmlList.selectedIndex);
    var currentId:String = o.nodeid.toString();
    // Do whatever we want with our selected ID
}

This can then be used to update other combo boxes (such as displaying a list of cities once a state is selected) or any other tasks where your ID and display value may differ for UI reasons.

Tags: arraycollection, combobox, Flex, webservice, xmllistcollection
Posted in Flex | 1 Comment »

Android Programming: Transferring Data Between Intents

April 18th, 2009

While working on the development of some new applications, I have tried transferring complex variables to new intents. For example:

Transferring a single variable, or set of single variable is easily accomplished by adding them to the intent.

Intent i = new Intent();
i.setClassName("packageName", "packageName.IntentClass");
String term = "data to pass";
i.putExtra("packageName.term", term);
startActivity(i);

In the called intent, we then get this data by calling getExtras():

   1: Bundle extras = getIntent().getExtras();
   2: String term = extras.getString("packageName.term");

However, what if we want to pass more complex data? As you can see above, the data types that can be added as extras are somewhat limited. In order to pass an object, it must first implement either the Parcelable or Serializable class. Our next post will be on how to implement the Parcelable class, followed by a post on how to integrate a data service.

Tags: Android, intent, putextra
Posted in Android, Android programming, Code snippets | No Comments »

Android Programming: Basic Animation

December 30th, 2008

Saving space is a constant necessity of programming on mobile platforms. While mobile devices are extremely convenient, providing a large amount of computing power in an easy-to-carry size, the screen size can make it difficult to use complex applications. One benefit of both the iPhone/iPod and the Android platforms is the ability to use animations and views to provide additional screen real estate. On the Android platform, the easiest way to do this is by using the ViewFlipper widget. This is the method we use in our AgileMedCalc application to provide equation information along with the calculators.

To use this approach, the ViewFlipper widget is added similar to a layout in the application’s XML view. Each widget or layout within the ViewFlipper will be rotated through when the showNext() property is called by the application. Because of this, if you want to have more than one widget within a single view, you will need to have additional layouts added:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ViewFlipper
        android:id="@+id/flipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TextView
                android:id="@+id/albuminLbl"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="\nAlbumin (g/dL):"
                android:gravity="center_vertical" />
            <EditText
                android:id="@+id/albumin"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_toRightOf="@+id/albuminLbl" />
            <ImageView
                android:id="@+id/viewInfo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/questionicon"
                android:layout_below="@+id/calc"
                android:layout_alignParentRight="true" />
        </RelativeLayout>
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TextView
                android:id="@+id/calcInfo"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Corrected Calcium = Measured Calcium + (0.8 * (Normal Albumin - Measured Albumin))\nNormal Albumin = 4.0" />
            <ImageView
                android:id="@+id/done"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/backicon"
                android:layout_below="@+id/calcInfo"
                android:layout_alignParentRight="true" />
        </RelativeLayout>
    </ViewFlipper>
</RelativeLayout>

In the above code, our ViewFlipper has 2 RelativeLayouts. This allows us to switch between one layout or the other, thereby switching the entire layout’s contents with very little code. In our Java class, we add the following code to bind to our buttons (or in our case, an ImageView):

private void setFlipper(){
    ViewFlipper infoFlipper = (ViewFlipper)findViewById(R.id.flipper);
    infoFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
    infoFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));

    final ImageView info = (ImageView)findViewById(R.id.viewInfo);
    info.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v)
        {
            infoFlipper.showNext();
        }
    });
    final ImageView done = (ImageView)findViewById(R.id.done);
    done.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v)
        {
            infoFlipper.showNext();
        }
    });
}

After adding our ViewFlipper object, we set a couple of animations on when the view moves in or out (we’ll talk more about this in a second). In addition, we set our onClickListeners to show the next view with infoFlipper.showNext(). This way, when a user clicks the icon, it will slide out the calculator and slide in the equation info.

This can be done either with or without fancy animations. Several animations are included with the Android SDK (SDKpath\samples\ApiDemos\res\anim). To use these, simply copy the animation from the SDK path into your application by creating the res\anim folder and pasting the animation file. Once this is done, you can access the animation like any other resource (such as R.anim.push_left_in). The details in these files can be customized to your liking to add different effects to the animation.

While the above examples are more complicated than doing a single view, it is much easier and saves a lot of typing when compared to making several different intents to display the same information. It also makes the applications look “shiny” which makes the GUI a little more friendly.

Tags: Android, animation, shownext, viewflipper
Posted in Android programming | No Comments »

Android Programming: AgileMedCalc

December 29th, 2008

Quick, easy to use specialty applications are fantastic on mobile platforms. However, for some utilities, a single application with multiple functions can save a lot of “application space” on menus. To help address this, we’ve created AgileMedCalc to work as a multi-function medical calculator. We’ve rolled in one of our past applications, AgileBloodGas, into this application to cut down on multiple apps for users to download.

With the concept of “saving space” in mind, we’ve also included some animations that will allow users to view details about the calculations being performed on the calculators. A coming post will talk about the animations from the Android platform we used to accomplish this task.

Tags: Android, calculator
Posted in Android, Applications | 1 Comment »

Android Programming: Google Service/App Authentication

December 23rd, 2008

While many of the Google applications already have Android-based ports, some of the more “specialty apps” such as AdSense don’t have a mobile interface. Luckily, the Google API allows for an easy login method using an HTTP Post request. One of our current applications, SimpleAdMonitor, uses this method to download an AdSense user’s daily and all time totals.

While the solution is fairly easy to implement, the actual POST request appears to run quite slowly, at least over the Android emulator and somewhat on the device as well.

The first step to generating an authorized session is to post the user’s login details to the Google ServiceLogin:

String login = "https://www.google.com/accounts/ServiceLoginAuth?service=adsense&hl=en-US&ltmpl=login&ifr=true&passive=true&rm=hide&nui=3&alwf=true&continue=https%3A%2F%2Fwww.google.com%2Fadsense%2Fgaiaauth&followup=https%3A%2F%2Fwww.google.com%2Fadsense%2Fgaiaauth";
DefaultHttpClient client = new DefaultHttpClient();
String websiteData = null;
URI uri = new URI(login);
HttpPost method = new HttpPost(uri);
method.addHeader("User-Agent", "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.10) Gecko/20071115 Firefox/2.0.0.10");
method.addHeader("Pragma", "no-cache");
method.addHeader("Content-Type", "application/x-www-form-urlencoded");

On line 1, the address specifies a Google service to authorize against. This service can be changed if you need to access some other application. Once this request is formed, the user’s login information can be added using a NameValuePair list. These are then set on the HttpPost method using setEntity:

List <NameValuePair> loginInfo = new ArrayList <NameValuePair>();
loginInfo.add(new BasicNameValuePair("Email", username));
loginInfo.add(new BasicNameValuePair("Passwd", password));
loginInfo.add(new BasicNameValuePair("null", "Sign+in"));
HttpEntity entity = new UrlEncodedFormEntity(nvps, HTTP.UTF_8);

method.setEntity(entity);
HttpResponse res = client.execute(method);

One item to note on line 3 is that the param used for the password is “Passwd”. Once this data is posted, the server will return a response that should be evaluated for a correct login. If the login is valid, the page should respond with a link to a redirect page that needs to again be posted to:

String login2 = "https://www.google.com/accounts/CheckCookie?continue=https%3A%2F%2Fwww.google.com%2Fadsense%2Fgaiaauth&followup=https%3A%2F%2Fwww.google.com%2Fadsense%2Fgaiaauth&hl=en-US&service=adsense&ltmpl=login&chtml=LoginDoneHtml";
method.setURI(new URI(login2));
res = client.execute(method);

At this point, the server should respond with the data from the redirect URL, in this case, the main AdSense page. Further requests can now be made to the server using the same method without needing to re-authorize the user. As I mentioned previously, there are some latency issues with this method that I haven’t quite sorted out yet. The lag isn’t horrible, but is fairly significant when waiting for two fairly small pieces of data. Some additional digging will hopefully find out what is causing the delay and how to improve it.

Tags: Android, authentication, defaulthttpclient, google servicelogin, httppost, namevaluepair
Posted in Android, Android programming, Applications | No Comments »

Android Programming: DefaultHttpClient GET Request

December 16th, 2008

This article will briefly describe the method to form and receive an HTTP GET request in Android. The first code snippet listed below shows how to form the request and receive the data back from the server. The second shows a function that can be used to read the InputStream and save it to a string. The entire process isn’t very difficult, but can be a bit confusing the first time you try to piece it together. The code below still requires some additional code to fail more elegantly in case of a broken internet connection, website error, etc., but should copy/paste pretty easily into applications.

public String getUrlData(String url) {
    String websiteData = null;
    try {
        DefaultHttpClient client = new DefaultHttpClient();
        URI uri = new URI(url);
        HttpGet method = new HttpGet(uri);
        HttpResponse res = client.execute(method);
        InputStream data = res.getEntity().getContent();
        websiteData = generateString(data);
    } catch (ClientProtocolException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (URISyntaxException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    return websiteData;
}

public String generateString(InputStream stream) {
    InputStreamReader reader = new InputStreamReader(stream);
    BufferedReader buffer = new BufferedReader(reader);
    StringBuilder sb = new StringBuilder();

    try {
        String cur;
        while ((cur = buffer.readLine()) != null) {
            sb.append(cur + "\n");
        }
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    try {
        stream.close();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return sb.toString();
}

Tags: Android, defaulthttpclient, httpget
Posted in Android programming | No Comments »

Application Development: AgileBloodGas

December 15th, 2008

The AgileBloodGas application was developed as an acid/base status calculator. The most time consuming part of developing this application was some of the error checking and equation entry. The paper used as a basis for the equations was Morganroth, M. 1990. Six steps to acid-base analysis: Clinical applications. The Journal of Critical Illness 5:460-469.
. This is an excellent paper to read for anyone who deals with arterial blood gases on a regular basis.

One major improvement that can be made to this application yet is an on-screen method of data entry, rather than needing to flip out the keyboard. This will hopefully be solved either with a future application update from us or a soft keyboard in a future Android release.

In addition, we hope to incorporate this into a larger medical calculator at some point in the future to make it more applicable to a wider range of audiences, rather than having a specific application for each individual equation.

Tags: Android, blood gas
Posted in Android, Applications | No Comments »

Archives

Categories