This is slightly improved version of standard image widget for Dashing

image.coffee

class Dashing.Image extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered
    @handleSize()

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
    @handleSize()


  handleSize: ->
    if !$(@node).data('width') && !$(@node).data('height') && @get('image_width') && @get('image_height')
      $(@node).fadeOut()
      img = $(@node).find('img')
      paRatio = img.parent().width() / img.parent().height()
      if @get('image_width') >= @get('image_height')
        ratio = @get('image_width') / @get('image_height')
        img.width(img.parent().width() * ratio/paRatio)
      else
        ratio = @get('image_height') / @get('image_width')
        img.height(img.parent().height() * ratio/paRatio)
      $(@node).fadeIn()

image.html

<img data-bind-src="image" data-bind-width="width" data-bind-height="height"/>

Image.md

Description

This is slightly improved version of standard image widget for Dashing.

I had no other choice but to optimize all my image related services (Daily Dilbert, Office Alerts, Quick Camera, Slide Show, etc.) to use the same image widget.

##Usage

To use this widget, copy image.html, image.coffee, and image.scss into the /widgets/image directory. If you want to keep original image widget, rename files and create appropriate widget directory.

Use it as standard image widget.

##Settings

Additional optional settings for widget are data-width and data-height attributes used to stretch image horizontally or vertically. If neither of them is specified and image_width/image_height event parameters are sent, image size ratios are calculated.

image.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  rgba(255,255,255,0);

// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
.widget-image {

  background-color: $background-color;

}