Skip to content

Instantly share code, notes, and snippets.

@jwalton
Last active June 12, 2020 13:40
Show Gist options
  • Save jwalton/7916168 to your computer and use it in GitHub Desktop.
Save jwalton/7916168 to your computer and use it in GitHub Desktop.
# 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
Copy link

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
Copy link

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
Copy link

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
Copy link

mmh commented Jun 12, 2014

Thanks mr-deamon, exactly what I needed :)

@jwalton
Copy link
Author

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

@awgraf
Copy link

awgraf 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
Copy link

oguime commented Nov 3, 2014

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

@andrewsmhay
Copy link

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

@rackspeed
Copy link

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

@z00tv
Copy link

z00tv commented Jan 20, 2016

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

@hostingnuggets
Copy link

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

@imikerussell
Copy link

@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
Copy link

stigert 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

@Eduardovil98
Copy link

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

@jwalton
Copy link
Author

jwalton commented Jun 12, 2020

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?)

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