Image Reader from Directory for Dashing

README.md

Description

This widget is used to display a collection of images from a directory. This is used for your sinatra based dashing application.

Usage

For this widget to work, copy `image.rb` to your `/jobs` folder. copy `image.coffee` `image.html`, and `image.scss` to your `widgets/image` folder.

add the following code snippet to the /dashboards/yourdashboardname.erb folder:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-id="values" data-view="Image"></div>
</li>

Possible Modifications

The height doesn't automatically scale to the size of the widget. This can be fixed. Since the Images are shuffled another correction could be to read images from beginning to end without shuffle. If you want to make changes visit my github account at: https://github.com/shushiej/DirectoryImageReader-for-Dashing

image.coffee

class Dashing.Image extends Dashing.Widget

  ready: ->
    # This is fired when the widget is done being rendered
    

  onData: (data) ->
    # Handle incoming data
    # You can access the html node of this widget with `@node`
    #$(@image).fadeOut()
    #$(@node).fadeIn().fadeOut()

image.html

<img data-bind-src="image | raw" class="img"></img>

image.rb

imgArry = Array.new
imgDir = "Your Directory here"
SCHEDULER.every '10s', :first_in => 0 do #change the '10s' to your liking how often the image should rotate.
	Dir.chdir(imgDir) do
		Dir.foreach(imgDir) do |item|
			next if item == '.' or item == '..' or item == 'history.yml'
			imgWidth = Dimensions.width(item) #Don't need to add this line this was for testing purposes.
			imgHeight = Dimensions.height(item) #Don't need to add this line this was for testing purposes.
			image = 'assets/values/' + item
			imgArry.push(image)
		end
	end
	imgSamp = imgArry.sample

	send_event('values', image: imgSamp)
	imgArry.clear
end

image.scss

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

// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
.widget-image {

  background-color: $background-color;
 .img{
 	height:340px; //might need to change depending on the size of your widget. 
 	width:100%;
 }

}