README.md

Dashing Visualization Widget

Description

A Dashing widget to display visualizations for any audio your microphone can detect. This widget uses the totally awesome APEXvj for basically everything.

Preview

Usage

To use this widget, copy visualizer.coffee, visualizer.html, and visualizer.scss into the /widgets/visualizer directory of your Dashing app. This directory does not exist in new Dashing apps, so you may have to create it.

To include the widget in a dashboard, add the following to your dashboard layout file:

#####dashboards/sample.erb

...
  <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div class="visualize" data-id="visualizer" data-view="Visualizer"></div>
  </li>
...

visualizer.coffee

class Dashing.Visualizer extends Dashing.Widget

visualizer.html

<iframe src="http://www.apexvj.com/kaksi/webgl8/index.html?i=1" width="610" height="360" style="-webkit-transform:scale(1.0);-moz-transform-scale(1.0);" frameBorder="0">
</iframe>

visualizer.scss

$background-color:  black;

.visualize {
  padding: 0px;
}
.visualizer {
  padding: 0px;
  margin: 0px;
  background-color: $background-color;
  iframe {
    width: 100%;
    height: 100%;
  }
}