Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

Dashing Visualization Widget


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


Screen Shot Screen Shot Screen Shot Screen Shot Screen Shot


To use this widget, copy, 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:


  <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    <div class="visualize" data-id="visualizer" data-view="Visualizer"></div>
class Dashing.Visualizer extends Dashing.Widget
<iframe src="" width="610" height="360" style="-webkit-transform:scale(1.0);-moz-transform-scale(1.0);" frameBorder="0">
$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