Starting in on a little bit of track layout.

.gitignore

@@ -24,3 +24,4 @@ doc/
 
 Gemfile.lock
 .sass-cache
+log/development.log.age

app/assets/javascripts/session.js

@@ -3,6 +3,7 @@
     context.JK = context.JK || {};
     context.JK.SessionScreen = function(app) {
         var logger = context.JK.logger;
+        var tracks = {};
 
         function afterShow(data) {
             var sessionId = data.id;
@@ -16,7 +17,7 @@
             _renderSessionInfo(sessionData);
             // TODO: Just for testing. Should respond to events.
             var trackData = {
-                clientId: 1,
+                clientId: 'abc-123',
                 name: "Jonathon Wilson",
                 part: "Keyboard",
                 avatar: "https://en.gravatar.com/userimage/3198431/5ba95e655ce68d976f46dcf6f99fdde5.png",
@@ -28,6 +29,9 @@
             _addTrack(trackData);
             // TODO - hook events to the session-tracks container, not the tracks.
             // then have the events see which track fired.
+            //
+
+            context.setTimeout(function() {tracks['abc-123'].setGain(0.75);}, 3000);
         }
 
         function _renderSessionInfo(sessionData) {
@@ -42,6 +46,8 @@
             var template = $('#template-session-track').html();
             var newTrack = JK.fillTemplate(template, trackData);
             $('#session-tracks').append(newTrack);
+            tracks[trackData.clientId] = new JK.SessionTrack(trackData.clientId);
+            logger.debug(tracks);
         }
 
         function _userJoinedSession() {
@@ -73,6 +79,8 @@
             app.subscribe(JK.MessageType.USER_JOINED_MUSIC_SESSION, _userJoinedSession);
         };
 
+        this.tracks = tracks;
+
     };
 
  })(window,jQuery);

app/assets/javascripts/sessionTrack.js

@@ -1,37 +1,49 @@
 (function(context,$) {
 
     context.JK = context.JK || {};
-    context.JK.SessionTrack = function() {
+    context.JK.SessionTrack = function(clientId) {
         var logger = context.JK.logger;
+        var selectorTemplate = '[client-id="' + clientId + '"] [track-role="{role}"]';
+        var parts = ['latency', 'vu', 'gain', 'mute', 'name', 'part', 'avatar'];
+        var $parts = {};
+        $.each(parts, function() {
+            var selector = JK.fillTemplate(selectorTemplate, {role: this});
+            $parts[this] = $(selector);
+            //logger.debug(this + ":" + $parts[this]);
+        });
 
         function events() {
-            $('#session-contents').on("click", '[action="delete"]', deleteSession);
         }
 
         /**
         * Set latency. val = [good,medium,bad]
          */
-        function _setLatency(val) {
-        }
+        this.setLatency = function(val) {
+            $parts.latency.html(val);
+        };
 
         /**
         * Set VU level. val = 0.0-1.0
         */
-        function _setVolumeUnit(val) {
-        }
+        this.setVolumeUnit = function(val) {
+            $parts.vu.html(val);
+        };
 
         /**
         * Set the track's gain. val = 0.0-1.0
         * Allows external control of channel fader.
         */
-        function _setGain(val) {
-        }
+        this.setGain = function(val) {
+            logger.debug('setGain:' + val);
+            $parts.gain.html("Gain: " + val);
+        };
 
         /**
         * Get the track's gain from current fader. Returns 0.0-1.0
         */
-        function _getGain() {
-        }
+        this.getGain = function() {
+            return $parts.gain.html().split("Gain: ")[1];
+        };
 
         /**
         * Set whether this channel is muted. Takes a boolean where

app/assets/stylesheets/client/jamkazam.css.scss

@@ -259,3 +259,50 @@ label {
     margin-right: 8px;
 }
 
+/* Session Tracks */
+.session-track {
+    width: 125px;
+    height: 300px;
+    border: 1px solid #fff;
+    position:relative;
+}
+.session-track [track-role] { margin:4px; }
+.session-track .latency { text-align:center; }
+.session-track .latency.good { color:#00ff00; }
+.session-track .latency.medium { color:#ffff00; }
+.session-track .latency.bad { color:#ff0000; }
+
+.session-track .mute { 
+    background-color:#bbb; color:#000; 
+    position: absolute;
+    bottom: 80px;
+    width: 117px;
+    text-align: center;
+}
+
+.session-track .name { 
+    background-color:#ddd; color:#000; 
+    position: absolute;
+    bottom: 60px;
+    width: 117px;
+    text-align: center;
+}
+.session-track .part { 
+    background-color:#fff; color:#000; 
+    position: absolute;
+    bottom: 40px;
+    width: 117px;
+    text-align: center;
+}
+
+.session-track .avatar { 
+    position:absolute;
+    width: 32px;
+    height: 32px;
+    bottom:4px;
+    left: 46px;
+}
+.session-track .avatar img {
+    width: 32px; height: 32px;
+}
+

app/views/clients/index.html.erb

@@ -386,13 +386,13 @@
         <!-- Template for an individual session track -->
         <script type="text/template" id="template-session-track">
             <div class="session-track" client-id="{clientId}">
-                <div class="latency {latency}">Network</div>
-                <div class="vu">{vu}</div>
-                <div class="gain">{gain}</div>
-                <div class="mute">{mute}</div>
-                <div class="name">{name}</div>
-                <div class="part">{part}</div>
-                <div class="avatar"><img src="{avatar}"/></div>
+                <div track-role="latency" class="latency {latency}">Network</div>
+                <div track-role="vu" class="vu">VU: {vu}</div>
+                <div track-role="gain" class="gain">Gain: {gain}</div>
+                <div track-role="mute" class="mute">Muted: {mute}</div>
+                <div track-role="name" class="name">{name}</div>
+                <div track-role="part" class="part">{part}</div>
+                <div track-role="avatar" class="avatar"><img src="{avatar}"/></div>
             </div>
         </script>