January | 2011 | semi/signal

Archive for January, 2011

Mojo.Widget.ImageView

Jan 7 2011 · webOS

Using the ImageView widget is somewhat perplexing. The documentation states:

This widget is designed to view an image full screen with support for zooming and panning…

You would assume that you could simply create the ImageView widget and it would be full screen and handle orientation changes (something very essential and common when viewing photos) out of the box. Unfortunately, this is not the case and some additional code is necessary to get it to function as such.

dotspott photo view

I’ll present some code here, but much of what I did was based on the code at webOS 101.

First, a few additions to the assistant’s activate function:

We setup full-screen mode
Set “free” orientation (allows the system to rotate the display)
Manually size the ImageView widget (id=photoView)

ViewPhotoAssistant.prototype.activate = function(event) {

    this.controller.enableFullScreenMode(true);
    this.controller.stageController.setWindowOrientation('free');
    $('photoView').mojo.manualSize(Mojo.Environment.DeviceInfo.screenWidth, Mojo.Environment.DeviceInfo.screenHeight);
    
    /* set images here  */ 
       
};

To actually respond to orientation changes we need to setup an event listener for the “resize” event. This is dealt with in the assistant’s setup function:

ViewPhotoAssistant.prototype.setup = function() {
    
    var photoViewerAttributes = { noExtractFS: true };    
    var photoViewerModel = {};

    this.controller.setupWidget('photoView', photoViewerAttributes, photoViewerModel);
    
    // setup handler for resize event ... 
    this.handleWindowResizeHandler = this.handleWindowResize.bindAsEventListener(this);
    this.controller.listen(this.controller.window, 'resize', this.handleWindowResizeHandler);

    /* other setup code... */

};

Within the resize event handler, we manually resize the ImageView widget based on the new dimensions of the window:

ViewPhotoAssistant.prototype.handleWindowResize = function (event){
  if ($('photoView') && $('photoView').mojo) {
          $('photoView').mojo.manualSize(this.controller.window.innerWidth, this.controller.window.innerHeight);
  }
}

Finally, in the assistant’s cleanup function, we stop listening on the event:

ViewPhotoAssistant.prototype.cleanup = function(event) {

    this.controller.stopListening(this.controller.window, 'resize', this.handleWindowResizeHandler);    

};

ImageViewmojoMojo.Widget.ImageViewwebOSwidget

The haversine formula

Jan 6 2011 · Random

I had to do a little research into calculating distances between 2 points on the Earth, as I wanted the latest version of the dotspott webOS app to calculate the distance from your current position to your spotts.

dotspott webOS app 1.4.4

The page at Movable Type on the subject proved to be an amazing resource.

I ended up doing an straightforward implementation of the haversine formula:

R = mean radius of earth = 6,371km
Δlat = lat2 - lat1
Δlong = long2 - long1

a = sin²(Δlat/2) + cos(lat1) · cos(lat2) · sin²(Δlong/2)
c = 2 · atan2( sqrt(a), sqrt(1-a) )
d = R · c

The Javascript code (HSD.CurrentGlobalPosition.LatLong is a string with the device’s current position as a latitude,longitude pair):

HSD.Math.toRad = function(deg)
{
    return deg * (Math.PI/180);
}

HSD.CurrentGlobalPosition.calcDistance = function(_targetLat, _targetLon)
{
    var latlongParts = HSD.CurrentGlobalPosition.LatLong.split(',');    

    var lat1 = parseFloat(latlongParts[0]);
    var lon1 = parseFloat(latlongParts[1]);
    var lat2 = parseFloat(_targetLat);
    var lon2 = parseFloat(_targetLon);
    
    var R = 6371; // km
    var dLat = HSD.Math.toRad(lat2-lat1);
    var dLon = HSD.Math.toRad(lon2-lon1); 
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(HSD.Math.toRad(lat1)) * Math.cos(HSD.Math.toRad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;
    
    return d;

}

The result is the distance to the target in kilometers.

distancegeolocationhaversine formulalatitudelongitude

Netbeans RTF Copy plugin

Jan 1 2011 · Netbeans

I made a little plugin for Netbeans to allow copying text from the editor as RTF; mainly, preserving the foreground colors from its syntax highlighting. I wanted something akin to what’s possible with Visual Studio.

Download plugin

Source at bitbucket

netbeans copy as rtf

Taking the copied RTF text and running it thru Rtf2Html, I can then post nicely colored code:

header('Content-type: application/xml; charset=utf-8');
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n";

The NBSpecialCopyPaste by Casper Bang was incredibly helpful as a starting point for this plugin.

There’s an issue I wasn’t able to resolve before releasing this; fields (by default, highlighted green by the editor) aren’t copied properly in some cases. The API seems to give no indication that these tokens are colored differently. I know this is true for Java and PHP code, but not true for XML. The code to get the necessary AttributeSet is exactly what’s in NBSpecialCopyPaste:

private static AttributeSet findFontAndColors(Token tkn, FontColorSettings fcs)
{
    AttributeSet as = fcs.getTokenFontColors( tkn.id().name() );
    if (as == null)
    {
        // ...try to get from its category
        as = fcs.getTokenFontColors(tkn.id().primaryCategory());
    }

    return as;
}