Skip to content

NathanielWroblewski/visualizer_widget

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Useage

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

Code

#####widgets/visualizer/visualizer.coffee

class Dashing.Visualizer extends Dashing.Widget

#####widgets/visualizer/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>

#####widgets/visualizer/visualizer.scss

$background-color:  black;

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

About

A Dashing widget that displays visualizations for any audio your microphone can detect

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors