Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

Screen Shot Screen Shot Screen Shot Screen Shot Screen Shot

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>
...
class Dashing.Visualizer extends Dashing.Widget
<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>
$background-color: black;
.visualize {
padding: 0px;
}
.visualizer {
padding: 0px;
margin: 0px;
background-color: $background-color;
iframe {
width: 100%;
height: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment