Create a gist now

Instantly share code, notes, and snippets.

@jwalton /BigImage.md
Last active May 19, 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.

Show comment
Hide comment
@derrybarry

derrybarry 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

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.

Show comment
Hide comment
@cemelf

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

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.

@mr-deamon

This comment has been minimized.

Show comment
Hide comment
@mr-deamon

mr-deamon 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)

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.

Show comment
Hide comment
@mmh

mmh Jun 12, 2014

Thanks mr-deamon, exactly what I needed :)

mmh commented Jun 12, 2014

Thanks mr-deamon, exactly what I needed :)

@jwalton

This comment has been minimized.

Show comment
Hide comment
@jwalton

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

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

@marinemonk

This comment has been minimized.

Show comment
Hide comment
@marinemonk

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

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.

Show comment
Hide comment
@oguime

oguime Nov 3, 2014

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

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

Show comment
Hide comment
@andrewsmhay

andrewsmhay Nov 3, 2014

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

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.

Show comment
Hide comment
@rackspeed

rackspeed Jan 24, 2015

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

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

@casdr

This comment has been minimized.

Show comment
Hide comment
@casdr

casdr Oct 20, 2015

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

casdr commented Oct 20, 2015

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

@z00tv

This comment has been minimized.

Show comment
Hide comment
@z00tv

z00tv Jan 20, 2016

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

z00tv commented Jan 20, 2016

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

@hostingnuggets

This comment has been minimized.

Show comment
Hide comment
@hostingnuggets

hostingnuggets Jul 25, 2017

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

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

@imikerussell

This comment has been minimized.

Show comment
Hide comment
@imikerussell

imikerussell 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

@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