big_image.coffee

# A Dashing widget which shows an image.
#
# To use, in your dashboard.erb file:
#
#     <li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
#       <div data-id="picture" data-view="BigImage" data-image="http://i.imgur.com/JycUgrg.jpg"
#         style="background-color:transparent;"
#         data-max="true"
#       ></div>
#     </li>
#
# You can update the image via a background job or API key.  Whenever the image laods, the image
# will be resized to fit the dimensions of the widget.  If `data-max="false"`, then the image
# will never be enlarged.
#
class Dashing.BigImage extends Dashing.Widget

    endsWith = (str, suffix) -> str.indexOf(suffix, str.length - suffix.length) isnt -1

    # Courtesy @mr-deamon
    resizeImage = ($img, maxWidth, maxHeight, maximize) ->
        width = $img.width()
        height = $img.height()
        delta_x = width-maxWidth
        delta_y = height-maxHeight

        if delta_x <= delta_y
            $img.css("height", maxHeight)
        else
            $img.css("width", maxWidth)

    getImageSize = ($img, done) ->
        loadedHandler = ->
            $img.off 'load', loadedHandler
            done $img.width(), $img.height()

        img = $img[0]
        if !img.complete
            # Wait for the image to load
            $img.on 'load', loadedHandler
        else
            # Image is already loaded.  Call the loadedHandler.
            sleep 0, loadedHandler

    sleep = (timeInMs, fn) -> setTimeout fn, timeInMs

    ready: ->
        container = $(@node).parent()
        @maxWidth = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
        @maxHeight = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
        draw this

    onData: (data) ->
        return if !@maxWidth or !@maxHeight
        draw this

    makeVideo = (url, type) ->
        return $('
            <video preload="auto" autoplay="autoplay" muted="muted" loop="loop" webkit-playsinline>
                <source src="' + url + '" type="' + type + '">
            </video>
        ')

    draw = (self) ->
        $el = $(self.node)

        needResize = false

        # Remove the old image
        $el.find('img').remove()
        $el.find('video').remove()

        # Load the new image
        imageUrl = self.get("image")
        if endsWith imageUrl, ".mp4"
            $img = makeVideo imageUrl, 'video/mp4'
        else if endsWith imageUrl, ".gifv"
            imageUrl = imageUrl[0...-5] + ".mp4"
            $img = makeVideo imageUrl, 'video/mp4'
        else
            # Need to resize images to preserve aspect ration
            needResize = true
            $img = $('<img src="' + self.get("image") + '"/>')
        $el.append $img

        if needResize
            # Resize the image
            getImageSize $img, (width, height) =>
                resizeImage $img, self.maxWidth, self.maxHeight, self.get 'max'

big_image.html

<img/>

big_image.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #4b4b4b;

// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
div.widget-big-image {
    padding: 0;
    background-color: $background-color;

    video {
        width: 100%
    }
}

BigImage.md

A Dashing widget which shows an image.

To use, in your dashboard.erb file:

<li data-row="1" data-col="1" data-sizex="3" data-sizey="2">
  <div data-id="picture" data-view="BigImage" data-image="http://i.imgur.com/JycUgrg.jpg"
    style="background-color:transparent;"
    data-max="true"
  ></div>
</li>

You can update the image via a background job or API key. Whenever the image laods, the image will be resized to fit the dimensions of the widget. If data-max="false", then the image will never be enlarged.

This also supports imgur .mp4 and .gifv files.

sorry to bother you, when i load this in a new vanilla dashboard i get a lot of text above the image starting with {"str",[Tilt::St screenshot can be seen here https://drive.google.com/file/d/0BytoU2WNKZ8FOEhoNjkya1Awa0U/edit?usp=sharing, any help would be appreciated

I am also having the same problem. The solution in my case; I make widget Folder name as same in the folder files. For example: If files name is big_image.coffe, big_image.html and big_image.scss. Widget folder name must be big_image.

What do you think about this?:

resizeImage = ($img, maxWidth, maxHeight, maximize) ->
        width = $img.width()
        height = $img.height()
        delta_x = width-maxWidth
        delta_y = height-maxHeight

        if delta_x<=delta_y
          $img.css("height", maxHeight)
        else
          $img.css("width", maxWidth)

Thanks mr-deamon, exactly what I needed :)

Thanks @mr-deamon. I've grabbed your fix. I've also updated this to work with .mp4 and .gifv videos from imgur. :)

I attempted to use a .gifv file, but all I got was a blank field. It appears to be working fine for .jpg images though.

Is it possible to add an updatedAtMessage, like the one that exists on the text widget?

Anyone been able to get SVG's working properly? All I get is a layer, not the full image.

@andrewsmhay: SVG is working without any issues for us.

how do I update a image widget through API or background job?

@jwalton same question as @z00tv how can I get to automatically reload the image through a background job?

@z00tv @hostingnuggets this curl command works for me:

curl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "image": "image.jpg" }' \http://localhost:3030/widgets/WIDGET_DATA_ID_HERE

I can't get this widget to work. It just shows the image in the original size, without making it fit

hello all, how can I use a localfile instead of a https:// ????

You could, but the file would have to be present on whatever machine is viewing the dashboard, so I wouldn't recommend it. You can always use something like imgur to host the image, especially if it's not going to be viewed by thousands of people or anything. (I'm a little surprised to see someone is still using Dashing! Shopify hasn't exactly been maintaining it. You might want to look into something a bit more modern like Grafana?)