Create a gist now

Instantly share code, notes, and snippets.

@jwalton /BigImage.md
Last active Aug 27, 2017

What would you like to do?
# 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'
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #4b4b4b;
// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
div.widget-big-image {
padding: 0;
background-color: $background-color;
video {
width: 100%
}
}

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

cemelf commented Feb 15, 2014

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)

mmh commented Jun 12, 2014

Thanks mr-deamon, exactly what I needed :)

Owner

jwalton commented Oct 9, 2014

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.

oguime commented Nov 3, 2014

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.

casdr commented Oct 20, 2015

Is it possible to get a fade effect when the data-image updates using a job?

z00tv commented Jan 20, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment