Skip to content

Instantly share code, notes, and snippets.

@jwalton jwalton/BigImage.md
Last active Dec 24, 2018

Embed
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.

@derrybarry

This comment has been minimized.

Copy link

commented Dec 18, 2013

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

This comment has been minimized.

Copy link

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.

@mr-deamon

This comment has been minimized.

Copy link

commented Apr 4, 2014

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

This comment has been minimized.

Copy link

commented Jun 12, 2014

Thanks mr-deamon, exactly what I needed :)

@jwalton

This comment has been minimized.

Copy link
Owner Author

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. :)

@awgraf

This comment has been minimized.

Copy link

commented Oct 23, 2014

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

This comment has been minimized.

Copy link

commented Nov 3, 2014

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

@andrewsmhay

This comment has been minimized.

Copy link

commented Nov 3, 2014

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

@rackspeed

This comment has been minimized.

Copy link

commented Jan 24, 2015

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

@z00tv

This comment has been minimized.

Copy link

commented Jan 20, 2016

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

@hostingnuggets

This comment has been minimized.

Copy link

commented Jul 25, 2017

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

@imikerussell

This comment has been minimized.

Copy link

commented Aug 27, 2017

@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

@stigert

This comment has been minimized.

Copy link

commented Aug 25, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.