mcarlson · LorienHW · May 7, 2014 · May 7, 2014 · May 7, 2014 · May 7, 2014
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
-
+docs/.idea
 *.map
diff --git a/README.md b/README.md
@@ -1,17 +1,18 @@
 rheses
 ======
 
+running
+--------
+A web server is currently required to serve LZX autoincludes, as it satisfies the same-origin policy. Any simple web server will do, here's a one liner that works in most cases:
+
+    python -m SimpleHTTPServer
 
+Once the server is running, visit [http://localhost:8000/data.html]()
 
 building
 --------
+This is only required when editing the coffeescript core.
 
     coffee -j layout.js -mo ./ -cw *.coffee
 
 
-running
---------
-
-    python -m SimpleHTTPServer
-
-and visit [http://localhost:8000/data.html]()
diff --git a/audio.html b/audio.html
@@ -0,0 +1,93 @@
+<html>
+<head>
+  <title>dr33m</title>
+  <style type="text/css">
+    body {
+      background-color: white;
+      font-family: 'Helvetica';
+      font-size: 36px;
+      margin: 0px;
+      padding: 0px;
+      font-size: 14px;
+    }
+    input {
+      font-family: 'Helvetica';
+      font-size: 14px;
+      margin: 0px;
+      padding: 0px;
+      width: 100px;
+    }
+  </style>
+  <script type="text/javascript" src="lib/jquery-1.9.1.js"></script>
+  <script type="text/javascript" src="lib/acorn.js"></script>
+  <script type="text/javascript" src="lib/coffee-script.js"></script>
+  <script type="text/javascript" src="layout.js"></script>
+  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+</head>
+<body>
+  <view>
+    <shim id="bus"></shim>
+
+    <audioplayer id="audio" url="music/03_Homage Sliders.mp3" fftsize="1024" fftsmoothing="0" playing="true">
+      <handler name="onfft" args="fft">
+        // Deal with JSON.stringify() issues by converting to a regular array
+        var copy = Array.apply([], fft);
+        bus.send('fft', copy);
+      </handler>
+    </audioplayer>
+
+    <simplelayout attribute="y" axis="height" spacing="0"></simplelayout>
+
+    <class name="timetext" extends="text">
+      <!-- TODO: evaluate setters and overrides -->
+      <setter name="text" args="time" type="coffee">
+        minutes = Math.floor(time / 60)
+        seconds = Math.floor(time) - minutes * 60
+        seconds = '0' + seconds if (seconds < 10)
+        text = minutes + ':' + seconds
+        if (text != @text)
+          @sprite.text(text)
+          @updateSize()
+      </setter>
+    </class>
+
+    <view bgcolor="${audio.playing ? 'green' : 'gray'}" opacity="${audio.loaded ? 1 : .8}" width="${(audio.loadprogress * audio.fftsize * .5)}" height="20">
+      <handler name="onclick">
+        audio.toggle();
+      </handler>
+      <view name="playhead" bgcolor="red" width="${(audio.time / audio.duration) * this.parent.width}" height="20"></view>
+      <view y="3" x="${this.parent.playhead.width}" width="${this.parent.width - this.x}">
+        <simplelayout spacing="2"></simplelayout>
+        <view width="16" class="fa fa-spin fa-spinner">
+          <method name="updateState">
+            if (audio.loaded) {
+              this.setAttribute('class', 'fa fa-play')
+              if (audio.playing && ! audio.paused) {
+                this.setAttribute('class', 'fa fa-pause')
+              } else {
+                this.setAttribute('class', 'fa fa-play')
+              }
+            } else {
+              this.setAttribute('class', 'fa fa-spin fa-spinner')
+            }
+          </method>
+          <handler name="onloaded" method="updateState" reference="audio"></handler>
+          <handler name="onpaused" method="updateState" reference="audio"></handler>
+          <handler name="onplaying" method="updateState" reference="audio"></handler>
+        </view>
+        <view width="16" class="fa fa-stop" onclick="audio.stop()"></view>
+        <timetext y="-1" text="${audio.time}"></timetext>
+        <text y="-1">/</text>
+        <timetext y="-1" text="${audio.duration}"></timetext>
+      </view>
+    </view>
+
+    <class name="bar" width="1" bgcolor="red" height="${this.data}"></class>
+
+    <view height="256">
+      <simplelayout spacing="0"></simplelayout>
+      <replicator name="foo" classname="bar" data="${audio.fft}" pooling="true"></replicator>
+    </view>
+  </view>
+</body>
+</html>
diff --git a/classes/audioplayer.lzx b/classes/audioplayer.lzx
@@ -0,0 +1,132 @@
+    <class name="audioplayer" extends="node">
+      <attribute name="url" value="" type="string"></attribute>
+      <attribute name="loadprogress" value="0" type="number"></attribute>
+      <attribute name="loaded" value="false" type="boolean"></attribute>
+      <attribute name="playing" value="false" type="boolean"></attribute>
+      <attribute name="paused" value="false" type="boolean"></attribute>
+      <attribute name="loop" value="false" type="boolean"></attribute>
+      <attribute name="time" value="0" type="number"></attribute>
+      <attribute name="duration" value="0" type="number"></attribute>
+      <attribute name="fftsize" value="0" type="number"></attribute>
+      <attribute name="fftsmoothing" value="0.8" type="number"></attribute>
+      <attribute name="fft" value="[]" type="expression"></attribute>
+      <handler name="onurl" args="url">
+        if (! url) return;
+        var _this = this;
+        function updateProgress(evt) {
+          if (evt.lengthComputable) {  
+            var percentComplete = (evt.loaded / evt.total);  
+            _this.setAttribute('loadprogress', percentComplete);
+          } 
+        }
+
+        this.sendEvent('loading', url);
+        var request = new XMLHttpRequest();
+        this.setAttribute('loaded', false);
+        request.open('GET', url, true);
+        request.onprogress=updateProgress;
+        request.responseType = 'arraybuffer';
+
+        // Decode asynchronously
+        request.onload = function() {
+          _this.context.decodeAudioData(request.response, function(buffer) {
+            _this.buffer = buffer;
+            _this.setAttribute('duration', buffer.duration);
+            _this.setAttribute('loaded', true);
+            if (_this.playing && ! _this.paused) {
+              _this.play();
+            }
+          });
+        }
+        this.buffer = null;
+        request.send();
+      </handler>
+      <handler name="oninit">
+        // Fix up prefixing
+        window.AudioContext = window.AudioContext || window.webkitAudioContext;
+        this.context = new AudioContext();
+        var _this = this;
+        this.context.oncomplete = function() {
+          _this.setAttribute('playing', false);
+        }
+        this.gain = null;
+        this.fftNode = null;
+        this.buffer = null;
+        this.startOffset = 0;
+        this.startTime = 0;
+      </handler>
+      <method name="play">
+        this.setAttribute('playing', true);
+        if (! this.buffer) return;
+
+        // track the time when playback started
+        this.startTime = this.context.currentTime;
+        this.setAttribute('paused', false);
+        // creates a sound source
+        this.source = this.context.createBufferSource(); 
+
+        this.source.loop = this.loop;
+        // tell the source which sound to play
+        this.source.buffer = this.buffer;                    
+        // Create a gain node.
+        //this.gain = this.context.createGain();
+        // Create fft     
+        this.fftNode = this.context.createAnalyser();     
+        if (this.fftsize) {
+          this.fftNode.fftSize = this.fftsize;
+          this.fftNode.smoothingTimeConstant = this.fftsmoothing;
+        }
+
+        // Connect the source to the gain node.
+        this.source.connect(this.fftNode);
+        // Connect the gain node to the destination.
+        this.fftNode.connect(this.context.destination);
+        // play the source now
+        if (!this.source.start)
+          this.source.start = source.noteOn;
+        this.source.start(0, this.startOffset % this.duration);                           
+      </method>
+      <method name="stop">
+        // store state to start playback after load
+        this.setAttribute('playing', false);
+        if (! this.source) return;
+
+        if (!this.source.stop)
+          this.source.stop = source.noteOff;
+        this.source.stop(0);
+        this.setAttribute('time', 0);
+        this.startTime = this.startOffset = 0;
+      </method>
+      <method name="pause">
+        this.setAttribute('paused', true);
+        if (! this.source) return;
+        if (!this.source.stop)
+          this.source.stop = source.noteOff;
+        this.source.stop();
+        this.startOffset += (this.context.currentTime - this.startTime);
+        // console.log('this.startOffset', this.startOffset);
+        this.setAttribute('paused', true);
+      </method>
+      <method name="toggle">
+        if (! this.playing || this.paused) {
+          this.play();
+        } else {
+          this.pause();
+        }
+      </method>
+      <handler name="onidle" reference="lz.idle">
+        if (! (this.fftNode && this.playing && ! this.paused)) return;
+
+        var time = this.context.currentTime - this.startTime + this.startOffset;
+        if (time > this.duration) {
+          this.stop();
+        }
+        this.setAttribute('time', time % this.duration);
+
+        if (this.fftsize) {
+          var data = new Uint8Array(this.fftsize);
+          this.fftNode.getByteFrequencyData(data); 
+          this.setAttribute('fft', data)
+        }
+      </handler>
+    </class>
diff --git a/classes/boundslayout.lzx b/classes/boundslayout.lzx
@@ -1,18 +1,24 @@
     <!-- Set the parent's width/height to match the bounds of all its children -->
     <class name="boundslayout" extends="layout" type="coffee">
+      <attribute name="ignoreattr" type="string" value=""></attribute>
       <attribute name="width" type="number" value="0"></attribute>
       <attribute name="height" type="number" value="0"></attribute>
       <handler name="oninit">
         # console.log('oninit', this)
       </handler>
       <handler name="onsubview" args="subview">
-        # console.log('onsubview bound', @update, subview, this)
-        @listenTo(subview, 'x y width height', @update)
+        listeners = ""
+        listeners += "width x " unless @ignoreattr == 'width'
+        listeners += "height y " unless @ignoreattr == 'height'
+        # console.log('onsubview bound', listeners, subview, this)
+        @listenTo(subview, listeners, @update)
       </handler>
       <method name="update" args="value, sender, attribute">
         # console.log('skip', @skip, @locked)
         return if @skip()
+        locked = @locked
         @locked = true
+
         # TODO: fix to track outliers (and maybe thresholds) and update everything when all outliers go below that threshold
         if false # and sender? and value? and (@lastlength == @parent.subviews.length)
           # update based on sender attribute where available
@@ -36,17 +42,17 @@
           for subview, len in @parent.subviews
             continue if subview.ignorelayout
             # console.log 'updating', subview, @attribute, pos
-            width = Math.max(width, subview.x + subview.width)
-            height = Math.max(height, subview.y + subview.height)
+            width = Math.max(width, subview.x + subview.width) unless @ignoreattr == 'width'
+            height = Math.max(height, subview.y + subview.height) unless @ignoreattr == 'height'
             # return if isNaN(width) or isNaN(height)
             # console.log 'value', subview, width, height
 
           @lastlength = len
 
-          @setAttribute('width', width) unless @.width == width
-          @setAttribute('height', height) unless @.height == height
-          @parent.setAttribute('width', width) unless @parent.width == width
-          @parent.setAttribute('height', height) unless @parent.height == height
-        @locked = false
+          @setAttribute('width', width) unless @ignoreattr == 'width' or @width == width
+          @setAttribute('height', height) unless @ignoreattr == 'height' or @height == height
+          @parent.setAttribute('width', width) unless @ignoreattr == 'width' or @parent.width == width
+          @parent.setAttribute('height', height) unless @ignoreattr == 'height' or @parent.height == height
+        @locked = locked
       </method>
     </class>
diff --git a/classes/dataset.lzx b/classes/dataset.lzx
@@ -4,9 +4,9 @@
         lz.datasets[@name] = @
       </handler>
       <attribute name="url" type="string" value=""></attribute>
-      <handler name="ontextcontent">
-        if @textcontent
-          @setAttribute('data', JSON.parse(@textcontent))
+      <handler name="on$textcontent">
+        if @$textcontent
+          @setAttribute('data', JSON.parse(@$textcontent))
           # console.log('data', @name, @data)
       </handler>
       <handler name="onurl" method="loadURL"></handler>

diff --git a/classes/dragstate.lzx b/classes/dragstate.lzx
@@ -0,0 +1,26 @@
+    <class name="dragstate" extends="state">
+      <attribute name="dragaxis" value="both" type="string"></attribute>
+      <handler name="onapplied" args="applied">
+        //console.log('onapplied', applied, this)
+        if (applied) {
+          var pos = this.parent.getAbsolute();
+          this.startx = lz.mouse.x - pos.x;
+          this.starty = lz.mouse.y - pos.y;
+          //console.log('startx', pos, lz.mouse.x, lz.mouse.y, this.startx, this.starty)
+        }
+      </handler>
+      <handler name="onx" reference="lz.mouse" args="x">
+        if (this.dragaxis == 'both' || this.dragaxis == 'x') {
+          this.updatePos('x', x - this.parent.getAbsolute().x - this.startx)
+        }
+      </handler>
+      <handler name="ony" reference="lz.mouse" args="y">
+        if (this.dragaxis == 'both' || this.dragaxis == 'y') {
+          this.updatePos('y', y - this.parent.getAbsolute().y - this.starty);
+        }
+      </handler>
+      <method name="updatePos" args="name, val">
+        //console.log('updatePos', name, val, this, this.updatePos)
+        this.setAttribute(name, val)
+      </method>
+    </class>
diff --git a/classes/gyro.lzx b/classes/gyro.lzx
@@ -0,0 +1,27 @@
+    <class name="gyro" scriptincludes="https://raw.githubusercontent.com/tomgco/gyro.js/master/js/gyro.min.js">
+      <attribute name="x" value="0" type="number"></attribute>
+      <attribute name="y" value="0" type="number"></attribute>
+      <attribute name="z" value="0" type="number"></attribute>
+      <attribute name="alpha" value="0" type="number"></attribute>
+      <attribute name="beta" value="0" type="number"></attribute>
+      <attribute name="gamma" value="0" type="number"></attribute>
+      <attribute name="compass" value="0" type="number"></attribute>
+      <attribute name="compassaccuracy" value="0" type="number"></attribute>
+      <handler name="oninit">
+        var _this = this;
+        // TODO: use lzidle to throttle
+        window.addEventListener('devicemotion', function(ev) {
+          var o = ev.accelerationIncludingGravity;
+          for (var key in o) {
+            _this.setAttribute(key, o[key]);
+          }
+        });
+        window.addEventListener('deviceorientation', function(ev) {
+          _this.setAttribute('alpha', ev.alpha);
+          _this.setAttribute('beta', ev.beta);
+          _this.setAttribute('gamma', ev.gamma);
+          _this.setAttribute('compassaccuracy', ev.webkitCompassAccuracy);
+          _this.setAttribute('compass', ev.webkitCompassHeading);
+        }); 
+      </handler>
+    </class>