Page 1 of 1

AngularJS Example

Posted: Tue Jul 15, 2014 1:38 pm
by letoribo

Code: Select all

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Metronome</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>

<style type="text/css">
.hidden {
 visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;
}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
</style>
</head>

<body ng-controller="myController">
<h1>Metronome</h1>

<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">

<p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>

<p>
<label>MIDI Out:</label> <select id=selectmidi ng-change="changemidi();" ng-model="_out">
<option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Beats:</label> <select id=beat ng-model="_beat">
<option ng-init="_beat=4" ng-repeat="i in beats" ng-selected="{{i==_beat}}" value="{{i}}">{{i}}</option>
</select>
<label>Tempo:</label> <select id=tempo ng-change='changetempo();' ng-model="_tempo">
<option ng-init="_tempo=120" ng-repeat="i in tempos" ng-selected="{{i==_tempo}}" value="{{i}}">{{i}}</option>
</select>
<button class="btn-small" id=play ng-click='play();'>{{playing}}</button>
</p>

<script>
Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
select_out = document.getElementById('selectmidi');
select_beat = document.getElementById('beat');
select_tempo = document.getElementById('tempo');
var myModule = angular.module('myModule',[]);

function myController($scope, $timeout) {
  $scope.state = true; $scope.playing = 'Play';
  $scope.list = Jazz.MidiOutList();
  $scope._out = $scope.list[0];
  var count;
  $scope.play = function() {
    if(!(Jazz && Jazz.isJazz)) return;
    $scope.state = $scope.state === false ? true: false;
    if($scope.state){
      $scope.playing = 'Play';
      $timeout.cancel(timeout);
      } 
    else {
      $scope.playing = 'Stop';
      count = 0; tick();
    }  
  }
  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out);
  }
  $scope.beats = [];
  for(var i = 1; i <= 23; i++) $scope.beats.push(i);
  $scope._beat = 4;      
  var interval = 500;
  $scope.tempos = [];
  for(var i = 40; i <= 540; i++) $scope.tempos.push(i);
  $scope._tempo = 120;      
  $scope.changetempo = function() {
    interval = 60000 / $scope._tempo;
  }
  var tick = function (){
    Jazz.MidiOut(0x99, count ? 33 : 34, 127);
    count ++; if(count >= $scope._beat) count = 0;
    timeout = $timeout(function() {
      tick();
    }, interval);
  }
};

</script>

</body>
</html>

Re: AngularJS Example

Posted: Sat Oct 11, 2014 6:00 am
by letoribo

Code: Select all

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Jazz && Underscore</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

<style type="text/css">
body{color: #001326; background: #F4F4F4;}
.hidden {visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;}
.count{color: #0071b5;}
.btn-large{padding:8px 15px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
pre {border: 1px solid #999; background-color: #FFE;word-wrap: break-word;}
span{word-wrap: break-word;}
img{margin-top:5px;}
</style>
</head>

<body ng-controller="myController">
<h1>Exploration of
<br><a href="http://underscorejs.org/"><img src="http://underscorejs.org/docs/images/underscore.png"></a><i> &nbsp the sorting algorithms</i></h1>
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
<p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>
<p>
<label>MIDI Out:</label> <select id=selectmidi ng-change="changemidi();" ng-model="_out">
<option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Tempo:</label> <select id=tempo ng-change='changetempo();' ng-model="_tempo">
<option ng-init="_tempo=100" ng-repeat="i in tempos" ng-selected="{{i==_tempo}}" value="{{i}}">{{i}}</option>
</select>
<button class="btn-large" id=play ng-click='play();'>{{playing}}</button></p>
<p><label>Beats: {{num.beats}}</label></p><input id="pcs" type="range" min="1" max="60" ng-model="num.beats" />
<h3 class="count" ng-model="count">count:{{count+1}}</h3>
<div>
 <div><label><input type="radio" name="method" value="range" ng-model="method.method">Range</label></div> 
 <div><label><input type="radio" name="method" value="sin" ng-model="method.method">Sin</label></div>
 <div><label><input type="radio" name="method" value="cos" ng-model="method.method">Cos</label></div>
 <div><label><input type="radio" name="method" value="tan" ng-model="method.method">Tan</label></div>
 <div><label><input type="radio" name="method" value="crab" ng-model="method.method">Crab</label></div>
 <div><label><input type="radio" name="method" value="clz32" ng-model="method.method">clz32</label></div>
 <div><label><input type="radio" name="method" value="and" ng-model="method.method">and</label></div>
 <div><label><input type="radio" name="method" value="xor" ng-model="method.method">xor</label></div>
 <div><label><input type="radio" name="method" value="modulo" ng-model="method.method">modulo</label></div><br>
 <button class="btn-small" ng-click='shuffle();'>Shuffle</button></p>    
</div>
  <b><pre>{{ method.message }}</pre></b><span><pre>{{ notes }}</pre></span>

<script>

var myModule = angular.module('myModule',[]);
function myController($scope, $timeout) {
  Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
  select_out=document.getElementById('selectmidi');
  select_tempo=document.getElementById('tempo');	
  $scope.num = new Beats(12);
  function Beats(numOfbeats) {
    var beats = numOfbeats;
    this.__defineGetter__("beats", function () {
      return beats;
    });
    this.__defineSetter__("beats", function (val) {        
      val = parseInt(val);
      beats = val;
    });
  }

  $scope.method = {method: "range", message: "_.range(40, 100);"};
  var notes = _.range(40, 100);
  var range = notes;
  var sin = _.sortBy(notes, function(num){ return Math.sin(num); });
  var cos = _.sortBy(notes, function(num){ return Math.cos(num); });
  var tan = _.sortBy(notes, function(num){ return Math.tan(num); });
  var crab = _.reduceRight(notes, function(a, b) { return a.concat(b); }, []);
  Math.clz32 = Math.clz32 || function(value) { // polyfill
    var value = Number(value) >>> 0;
    return value ? 32 - value.toString(2).length : 32;
  };
  var clz32 = _.sortBy(notes, function(num){ return Math.clz32(num); });
  var modulo = _.sortBy(notes, function(a, b) { return a % b; });
  var and = _.sortBy(notes, function(a, b) { return a & b; });
  var xor = _.sortBy(notes, function(a, b) { return a ^ b; });
  var shuffle = _.shuffle(notes); 
  var Data = {
    "range":   {notes: range, message: "_.range(40, 100);"},
    "sin":     {notes: sin, message: "_.sortBy(_.range(40, 100), function(num){ return Math.sin(num); });"},
    "cos":     {notes: cos, message: "_.sortBy(_.range(40, 100), function(num){ return Math.cos(num); });"},
    "tan":     {notes: tan, message: "_.sortBy(_.range(40, 100), function(num){ return Math.tan(num); });"},
    "crab":    {notes: crab, message: "_.reduceRight(_.range(40, 100), function(a, b) { return a.concat(b); }, []);        _.sortBy(_.range(40, 100), function(a, b) { return a / b; });"},
    "clz32":   {notes: clz32, message: "_.sortBy(_.range(40, 100), function(num){ return Math.clz32(num); });"},
    "modulo":  {notes: modulo, message: "_.sortBy(_.range(40, 100), function(a, b) { return a % b; });"},
    "and":     {notes: and, message: "_.sortBy(_.range(40, 100), function(a, b) { return a & b; });"},
    "xor":     {notes: xor, message: "_.sortBy(_.range(40, 100), function(a, b) { return a ^ b; });"},
    "shuffle": {notes: shuffle, message: "_.shuffle(_.range(40, 100));"}
  };
  
  $scope.state = true; $scope.playing = 'Play';
  $scope.list = Jazz.MidiOutList();
  $scope._out = $scope.list[0];
  $scope.play = function() {
    if(!(Jazz && Jazz.isJazz)) return;
    $scope.state = $scope.state === false ? true: false;
    if($scope.state){
      $scope.playing = 'Play';
      $timeout.cancel(timeout);
      Jazz.MidiOut(0xb0, 123, 0);
    } 
    else {
      $scope.playing = 'Stop';
      $scope.count=-1; tick();
    }  
  };
  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out);
  };
  interval = 150;
  $scope.tempos = _.range(10,281);
  $scope._tempo = 100;      
  $scope.changetempo = function() {
    interval = 60000 / $scope._tempo * 0.25;
  };
  $scope.notes = notes;
  $scope.shuffle = function() {
    $scope.method.method = "shuffle"; $scope.notes = _.shuffle(notes);
  };
  $scope.$watch('method.method', function(newVal, oldVal) {
    console.log(newVal, oldVal);
    $scope.notes = Data[newVal].notes; 
    $scope.method.message = Data[newVal].message;
  });
  var tick = function (){
    $scope.count ++; if($scope.count >= $scope.num.beats) $scope.count = 0;
    var note = $scope.notes[$scope.count];
    Jazz.MidiOut(0xb0, 123, 0);
    Jazz.MidiOut(0xb0, 10, note);
    Jazz.MidiOut(0xc0, note, 0);
    Jazz.MidiOut(0x90, note, 127);
    timeout = $timeout(function() {
      tick();
    }, interval);
  }
};

</script>
</body>
</html>

Re: AngularJS Example

Posted: Sat Oct 11, 2014 6:01 am
by letoribo

Re: AngularJS Example

Posted: Sun Oct 26, 2014 7:13 am
by letoribo

Code: Select all

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Jazz && Underscore</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://jazz-snippet.appspot.com/js/pragmatic-angular.js"></script>
<style type="text/css">
body {color: #001326; background: #F4F4F4; font-family: monospace;}
.hidden {visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;}
.count {color: #0071b5;}
.btn-large {padding: 8px 15px; font-size: 17.5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  cursor: pointer;}
.btn-large:hover { background-color: #BACCDF;}
pre {border: 1px solid #999; background-color: #FFE; font-weight: bold; word-wrap: break-word; text-align: center; padding-top:1px;}
img {margin-top: 5px;}
select {border-radius: 18px; border:1px dotted #0071b5; font-weight: lighter; background-color:#FFE; cursor: pointer;}
fieldset {-moz-border-radius:8px; border-radius:8px;border:1px dotted #0071b5;}
fieldset label {background-color: #FFE; border-style: double; margin-left: 15px; padding: 7px; cursor: pointer; 
-moz-border-radius:5px; border-radius:5px;vertical-align: middle;}
fieldset label:hover { background-color: #DDD;}
input[type=text] {color: #0071b5; border: none; font-family: monospace; font-size: inherit; font-weight: bold; padding: 1px 1px; background: #FFE;}
span {line-height: 270%;}
</style>
</head>

<body ng-controller="myController">
<h1>Exploration of
<br><a href="http://underscorejs.org/"><img src="http://underscorejs.org/docs/images/underscore.png"></a><i> &nbsp the sorting algorithms</i></h1>
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
 <p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>
<p>
<label>MIDI Out:</label><select id=selectmidi ng-change="changemidi();" ng-model="_out">
 <option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Tempo:</label><select id=tempo ng-change='changetempo();' ng-model="_tempo">
 <option ng-init="_tempo=150" ng-repeat="i in tempos" ng-selected="{{i==_tempo}}" value="{{i}}">{{i}}</option>
</select>
<button class="btn-large" id=play ng-click='play();'>{{playing}}</button></p>
<div>
 <fieldset>
 <legend>Underscore methods</legend>
 <span ng-jquery-plugin="{ buttonset : {enabled : true} }">
 <label><input class="ui-buttonset" type="radio" name="method" value="range" ng-model="method.method">Range</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="sin" ng-model="method.method">Sin</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cos" ng-model="method.method">Cos</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="tan" ng-model="method.method">Tan</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="crab" ng-model="method.method">Crab</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="clz32" ng-model="method.method">clz32</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="and" ng-model="method.method">and</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="xor" ng-model="method.method">xor</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="modulo" ng-model="method.method">modulo</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="l_shift" ng-model="method.method">l-shift</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="r_shift" ng-model="method.method">r-shift</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond1" ng-model="method.method">cond1</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond2" ng-model="method.method">cond2</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond3" ng-model="method.method">cond3</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond4" ng-model="method.method">cond4</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond5" ng-model="method.method">cond5</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond6" ng-model="method.method">cond6</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond7" ng-model="method.method">cond7</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond8" ng-model="method.method">cond8</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond9" ng-model="method.method">cond9</label>
 </span>
 <button ng-click='shuffle();' ng-jquery-plugin="{button : { label: 'Shuffle' }}"></button></p>
 </fieldset><br>
</div>
<pre class="count" ng-model="count">beats: {{beats}}        count: <input type="text" ng-model="count" value="1"></pre>
<div>
 <div ng-jquery-plugin="{ slider : { min: 0,	max: 128, value: 60, stop : onStop } }"></div>
</div> 
<b><pre>{{ method.message }}</pre></b><pre>notes: {{ notes }}</pre>
<div>
 <div ng-jquery-plugin="{ slider : { range: true,	min: 0,	max: 128, values: [40, 100], change : onChange } }"></div>
 <pre>range: {{range}}</pre>
</div>
<script>
var myModule = angular.module('myModule',['pragmatic-angular']);
function myController($scope, $timeout) {
	
  $scope.onChange = function(event, ui) {
    if (ui.values[0] !== ui.values[1]) {
    	 $scope.range = _.range(ui.values[0], ui.values[1]);
      magick($scope.range);
      $scope.beats = _.size($scope.range);
      $scope.$apply();
    }; 
  };

  $scope.onStop = function(event, ui) {
    if (ui.value <= _.size($scope.notes)) {
      $scope.beats = ui.value;
      $scope.$apply();
    };
  };
  
  var magick = function(x) {
    var range = x;
    var sin = _.sortBy(x, function(num){ return Math.sin(num); });
    var cos = _.sortBy(x, function(num){ return Math.cos(num); });
    var tan = _.sortBy(x, function(num){ return Math.tan(num); });
    var crab = _.reduceRight(x, function(a, b) { return a.concat(b); }, []);
    Math.clz32 = Math.clz32 || function(value) { // polyfill
      var value = Number(value) >>> 0;
      return value ? 32 - value.toString(2).length : 32;
    };
    var clz32 = _.sortBy(x, function(num){ return Math.clz32(num); });
    var modulo = _.sortBy(x, function(a, b) { return a % b; });
    var and = _.sortBy(x, function(a, b) { return a & b; });
    var xor = _.sortBy(x, function(a, b) { return a ^ b; });
    var l_shift = _.sortBy(x, function(a, b) { return a << b; });
    var r_shift = _.sortBy(x, function(a, b) { return a >> b; });
    var cond1 = _.sortBy(x, function(a, b) { return (a % 2 == 0) ? a : b; });
    var cond2 = _.sortBy(x, function(a, b) { return (a % 3 == 1) ? a : b; });
    var cond3 = _.sortBy(x, function(a, b) { return (Math.tan(Math.sin(a) / Math.cos(b)) > 0) ? Math.sin(a) : b; });
    var cond4 = _.sortBy(x, function(a, b) { return (Math.tan(Math.sin(a) / Math.tan(b)) > 0) ? 0 : b; });
    var cond5 = _.sortBy(x, function(a, b) { return (~a / Math.tan(b) > 0) ? 1 : 0; });
    var cond6 = _.sortBy(x, function(a, b) { return a & (~a ^ Math.tan(b) > 0) ? a/b : b; });
    var cond7 = _.sortBy(x, function(a, b) { return ~a & ~b ; });
    var cond8 = _.sortBy(x, function(a, b) { return Math.sin(Math.cos(~b)) ; });
    var cond9 = _.sortBy(x, function(num) { return Math.sin(Math.cos(~num)) ; });
    var shuffle = _.shuffle(x); 
    var Data = {
      "range":   {notes: range, message: "_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ ");"},
      "sin":     {notes: sin, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.sin(num); });"},
      "cos":     {notes: cos, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.cos(num); });"},
      "tan":     {notes: tan, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.tan(num); });"},
      "crab":    {notes: crab, message: "_.reduceRight(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a.concat(b); }, []);     _.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a / b; });     _.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num) { return ~num; });"},
      "clz32":   {notes: clz32, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.clz32(num); });"},
      "modulo":  {notes: modulo, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a % b; });"},
      "and":     {notes: and, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a & b; });"},
      "xor":     {notes: xor, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a ^ b; });"},
      "l_shift": {notes: l_shift, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a << b; });"},
      "r_shift": {notes: r_shift, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a >> b; });"},
      "cond1": {notes: cond1, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (a % 2 == 0) ? a : b; });"},
      "cond2": {notes: cond2, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (a % 3 == 1) ? a : b; });"},
      "cond3": {notes: cond3, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (Math.tan(Math.sin(a) / Math.cos(b)) > 0) ? Math.sin(a) : b; });"},
      "cond4": {notes: cond4, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (Math.tan(Math.sin(a) / Math.tan(b)) > 0) ? 0 : b; });"},
      "cond5": {notes: cond5, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (~a / Math.tan(b) > 0) ? 1 : 0; });"},
      "cond6": {notes: cond6, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a & (~a ^ Math.tan(b) > 0) ? a / b : b; });"},
      "cond7": {notes: cond7, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return ~a & ~b ; });"},
      "cond8": {notes: cond8, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b){ return Math.sin(Math.cos(~b)); });"},
      "cond9": {notes: cond9, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.sin((Math.cos(~num)); });"},
      "shuffle": {notes: shuffle, message: "_.shuffle(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "));"}
    };
    $scope.notes = Data[$scope.method.method].notes;
    $scope.method.message = Data[$scope.method.method].message;
  };
  
  $scope.play = function() {
    if(!(Jazz && Jazz.isJazz)) return;
    $scope.state = $scope.state === false ? true: false;
    if($scope.state){
      $scope.playing = 'Play';
      $timeout.cancel(timeout);
      Jazz.MidiOut(0xb0, 123, 0);
    } 
    else {
      $scope.playing = 'Stop';
      $scope.count=-1; tick();
    }  
  };
  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out);
  };
        
  $scope.changetempo = function() {
    interval = 60000 / $scope._tempo * 0.25;
  };

  $scope.shuffle = function() {
    $scope.method.method = "shuffle"; $scope.notes = _.shuffle($scope.range);
  };
  $scope.$watch('method.method', function(newVal, oldVal) {
    console.log(newVal, oldVal);
    magick($scope.range);
  });

  var tick = function (){
    $scope.count ++;
    if($scope.count >= $scope.beats) $scope.count = 0;
    var note = $scope.notes[$scope.count];
    Jazz.MidiOut(0xb0, 123, 0);
    Jazz.MidiOut(0xb0, 10, note);
    Jazz.MidiOut(0xc0, note, 0);
    Jazz.MidiOut(0x90, note, 127);
    timeout = $timeout(function() {
      tick();
    }, interval);
  }
  
var init = function () {
  Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
  select_out = document.getElementById('selectmidi');
  select_tempo = document.getElementById('tempo');
  interval = 100;
  $scope.state = true; $scope.playing = 'Play';
  $scope.list = Jazz.MidiOutList();
  $scope._out = $scope.list[0];
  $scope.count = 1;
  $scope.beats = 60;
  $scope.tempos = _.range(10,281);
  $scope._tempo = 150;
  $scope.method = {method: "range", message: "_.range(40, 100);"};
  $scope.range = _.range(40, 100);
}();  
  
};

</script>
</body>
</html>
http://jazz-snippet.appspot.com/Angular3.html

Re: AngularJS Example

Posted: Tue Dec 09, 2014 1:55 pm
by letoribo
See how interesting creation of piano with Angular.js

Code: Select all

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Jazz && Underscore</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style type="text/css">
body {color: #001326; background: #F4F4F4; font-family: monospace;}
.hidden {visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;}
select {border-radius: 18px; border:1px dotted #0071b5; font-weight: bolder; height: 28px; background-color:#FFE; cursor: pointer; text-align: center;}
div#piano {
 position: relative; color: #808080; height: 82px;
}
div.ivory {
 position: absolute; left: 0px; top: 0px; border-left: 1px solid; width: 1672px;
}
.ivory span {
 background-color: #fffff0; padding: 0px; margin: 0px; border: 1px solid; border-left: 0px; display: inline-block; width: 21px; height: 80px; vertical-align: top;
}
div.ebony {
 position: absolute; left: 0px; top: 0px; margin-left: 14px; width: 1672px;
}
.ebony span {
 position: relative; z-index: 1; background-color: #111; padding: 0px; margin: 0px; border: 1px solid; display: inline-block; width: 12px; height: 56px; margin-right: 12px; vertical-align: top;
}
.ebony span.break {
 border: 0px; display: inline-block; width: 1px; margin-right: 11px; visibility:hidden;
}
.ivory span.on {
 background-color: #aaa;
}
.ebony span.on {
 background-color: #aaa;
}
.Center {
 width: 86%; height: 28%; margin: auto; margin-top: 25px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: inherit;
}
</style>
</head>

<body ng-controller="myController">
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
 <p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>

<div id=piano class="Center">
<div class="ebony">
<span  ng-repeat="i in keys.b track by $index" id="{{i}}" ng-class="{'break': i == '|',
 'on': i == note}"
 ng-mousedown="down(i)" ng-mouseup="up(i)"></span>
</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
<div class="ivory">
<span  ng-repeat="i in keys.w" id="{{i}}" ng-mousedown="down(i)" 
ng-mouseup="up(i)" ng-class="{'on': i == note}" ></span> 
</div>
</div>

<center>
<p>
<label>MIDI Out:</label><select id=selectmidi ng-change="changemidi();" ng-model="_out">
 <option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Sound: </label><select id=midiSnd ng-change='changeSnd();' ng-model="_sound">
 <option ng-init="_sound='Drawbar Organ'" ng-repeat="i in sounds" ng-selected="{{i==_sound}}" value="{{i}}">{{i}}</option>
</select>
</p>
</center> 

<script>

var myModule = angular.module('myModule',[]);
function myController($scope) {
	
  $scope.keys = {
    b: [
      1,3,'|',6,8,10,'|',13,15,'|',18,20,22,'|',25,27,'|',30,32,34,'|',37,39,'|',42,44,46,'|',49,51,'|',54,56,58,'|',61,63,'|',66,68,70,'|',
      73,75,'|',78,80,82,'|',85,87,'|',90,92,94,'|',97,99,'|',102,104,106,'|',109,111,'|',114,116,118,'|',121,123,'|',126
    ],
    w: [
       0,2,4,5,7,9,11,12,14,16,17,19,21,23,24,26,28,29,31,33,35,36,38,40,41,43,45,47,48,50,52,53,55,57,59,60,62,64,65,67,69,71,
       72,74,76,77,79,81,83,84,86,88,89,91,93,95,96,98,100,101,103,105,107,108,110,112,113,115,117,119,120,122,124,125,127
    ]
  }

  $scope.down = function(id){
    Jazz.MidiOut(0x90, id, 127); $scope.note = id;
  }	
  $scope.up = function(id){
    Jazz.MidiOut(0x80, id, 0); $scope.note = null;
  }	

  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out); Jazz.MidiOut(0xc0, $.inArray( $scope._sound, $scope.sounds ), 0);
    select_out.blur();
  };

  $scope.changeSnd = function() {
    Jazz.MidiOut(0xc0, $.inArray( $scope._sound, $scope.sounds ), 0);
    selSnd.blur();
  };

  var init = function () {
    Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
    select_out = document.getElementById('selectmidi');
    selSnd = document.getElementById('midiSnd');
    $scope.list = Jazz.MidiOutList();
    $scope._out = $scope.list[0];
    var sounds = ['Acoustic Grand Piano','Bright Acoustic Piano','Electric Grand Piano','Honky-tonk Piano','Electric Piano 1','Electric Piano 2','Harpsichord','Clavinet',
    'Celesta','Glockenspiel','Music Box','Vibraphone','Marimba','Xylophone','Tubular Bells','Dulcimer','Drawbar Organ','Percussive Organ','Rock Organ',
    'Church Organ','Reed Organ','Accordion','Harmonica','Tango Accordion','Acoustic Guitar nylon','Acoustic Guitar steel','Electric Guitar jazz',
    'Electric Guitar clean','Electric Guitar muted','Overdriven Guitar','Distortion Guitar','Guitar Harmonics','Acoustic Bass','Electric Bass finger','Electric Bass pick',
    'Fretless Bass','Slap Bass 1','Slap Bass 2','Synth Bass 1','Synth Bass 2','Violin','Viola','Cello','Contrabass','Tremolo Strings','Pizzicato Strings','Orchestral Harp','Timpani',
    'String Ensemble 1','String Ensemble 2','Synth Strings 1','Synth Strings 2','Choir Aahs','Voice Oohs','Synth Choir','Orchestra Hit','Trumpet','Trombone',
    'Tuba','Muted Trumpet','French Horn','Brass Section','Synth Brass 1','Synth Brass 2','Soprano Sax','Alto Sax','Tenor Sax','Baritone Sax','Oboe','English Horn',
    'Bassoon','Clarinet','Piccolo','Flute','Recorder','Pan Flute','Blown Bottle','Shakuhachi','Whistle','Ocarina','Lead 1 square','Lead 2 sawtooth','Lead 3 calliope',
    'Lead 4 chiff','Lead 5 charang','Lead 6 voice','Lead 7 fifths','Lead 8 bass + lead','Pad 1 new age','Pad 2 warm','Pad 3 polysynth','Pad 4 choir','Pad 5 bowed',
    'Pad 6 metallic','Pad 7 halo','Pad 8 sweep','FX 1 rain','FX 2 soundtrack','FX 3 crystal','FX 4 atmosphere','FX 5 brightness','FX 6 goblins','FX 7 echoes','FX 8 sci-fi',
    'Sitar','Banjo','Shamisen','Koto','Kalimba','Bagpipe','Fiddle','Shanai','Tinkle Bell','Agogo','Steel Drums','Woodblock','Taiko Drum','Melodic Tom',
    'Synth Drum','Reverse Cymbal','Guitar Fret Noise','Breath Noise','Seashore','Bird Tweet','Telephone Ring','Helicopter','Applause','Gunshot'];
    $scope.sounds = sounds;
    $scope._sound='Drawbar Organ';
    $scope.changeSnd();
  }();  
  
};
  
</script>
</body>
</html>
http://jazz-snippet.appspot.com/Angular4.html

Re: AngularJS Example

Posted: Fri Jan 23, 2015 7:23 am
by letoribo

Re: AngularJS Example

Posted: Thu Jan 29, 2015 5:57 am
by beemsoft
Hi letoribo,

Thanks for the interesting example!

I've extended it with a MIDI input option, so that you can also play with a MIDI keyboard. 8-)
Here, you can see the result:
http://www.jammidi.net/piano.html

Also, I did some refactoring on the code. Now 'jazz' is injected into the controller:

Code: Select all

var app = angular.module('myApp', []);

app.factory('jazz', function ($rootScope) {
  var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
  return {
	MidiInOpen: function(channel, callback) {
		Jazz.MidiInOpen(channel, callback);
	},
	MidiOutList: function() {
		return Jazz.MidiOutList();
	},
	MidiInList: function() {
		return Jazz.MidiInList();
	},
	MidiOut: function(a, key, b) {
		Jazz.MidiOut(a, key, b);
	}
  };
});

function MainCtrl($scope, jazz) {
  
  ...

  $scope.listIn = jazz.MidiInList();
  $scope._in = $scope.listIn[0];

  ...

  jazz.MidiInOpen(0, function (t,a,key,c) {
	  if (c == 127) {
		  $scope.note.splice($scope.note.indexOf(key),1)
	  } else {
		  $scope.note.push(key)
	  }
	  jazz.MidiOut(a, key, c);
	  message = t + ', ' + a + ', '+ key + ', '+ c;
	  $scope.$apply($scope.messages.push(message));
  });

Re: AngularJS Example

Posted: Mon Mar 02, 2015 3:52 am
by letoribo
Instead of:

Code: Select all

//app.js
var str = jazz.MidiInOpen(0, function (t,a,key,c) {
	  if (c == 127) {
		  $scope.note.splice($scope.note.indexOf(key),1)
	  } else {
		  $scope.note.push(key)
	  }
	  jazz.MidiOut(a, key, c);
	  message = t + ', ' + a + ', '+ key + ', '+ c;
	  $scope.$apply($scope.messages.push(message));
  });
do this:

Code: Select all

var str = jazz.MidiInOpen(0, function (t,a,key,c) {
  	  var cmd = Math.floor(a / 16); //console.log(cmd);
	  if (cmd == 9) {
		  $scope.note.push(key)
	  } 
	  if (cmd == 8) {
		 $scope.note.splice($scope.note.indexOf(key),1) 
	  }
	  jazz.MidiOut(a, key, c);
	  message = t + ', ' + a + ', '+ key + ', '+ c;
	  $scope.$apply($scope.messages.push(message));
  });
and in Angular piano.html add "track by" :

Code: Select all

<ul  ng-model="messages">
  <li ng-repeat="msg in messages track by $index">{{msg}}
</ul>

Re: AngularJS Example

Posted: Tue Mar 03, 2015 3:05 am
by letoribo

Re: AngularJS Example

Posted: Thu Apr 02, 2015 2:15 pm
by beemsoft
I've combined the Angular piano with the chat example from g00glen00b
(Using WebSockets with Spring, AngularJS and SockJS,
http://g00glen00b.be/spring-angular-sockjs/)

Now you can really jam online:
http://www.jammidi.net/jammidi-ng/

You can try it out with two browsers on different machines.