volume, stop

kitchenradio/app.js

@@ -56,6 +56,9 @@ radioInstance.play();
 routes.init(app);
 app.set('Routes', routes);
 app.use('/action/play/:id/', routes.play);
+app.use('/action/stop/', routes.stop);
+app.use('/action/volume/up/', routes.volumeUp);
+app.use('/action/volume/down/', routes.volumeDown);
 app.use('/', routes.index);
 
 // catch 404 and forward to error handler

kitchenradio/app/radio.js

@@ -20,6 +20,8 @@ var Log = null
 var Helper = null;
 var Conf = null;
 
+var volume = '40';
+
 
 exports.init = function(Express, Configuration) {
 	App = Express;
@@ -33,6 +35,10 @@ exports.init = function(Express, Configuration) {
   	Log.log('Radio: Found channel ' + channel.title);
 	});
 	
+	// set default volume level
+	Helper.shspawn('amixer scontrols');
+	Helper.shspawn('amixer sset \'PCM\' '+volume+'%');
+	
 	return this;
 }
 
@@ -79,3 +85,29 @@ exports.play = function(idx) {
     Log.error('Radio: No channel defined!');
   }
 }
+
+exports.stop = function() {
+  Log.log('Radio: stop playing');
+  Helper.shspawn(App.get('tools_root')+'action.sh stop');
+}
+
+exports.volumeUp = function() {
+  exports.volume(5)
+}
+
+exports.volumeDown = function() {
+  exports.volume(-5)
+}
+
+exports.volume = function(step) {
+  Log.log('Radio: volume ' + (step>0 ? 'up' : 'down'));
+  
+  if(step != 0) {
+    volume = volume + step;
+    
+    if(volume > 100) { volume = 100; }
+    if(volume < 0) { volume = 0; }
+    
+    Helper.shspawn('amixer sset \'PCM\' '+volume+'%');
+  }
+}

kitchenradio/public/javascripts/radio.js

@@ -9,13 +9,16 @@ var Radio = function() {
 
   var channels;
   var $navigation;
+  var $controlPanel;
 
   return {
     init: function(channels_) {
       channels = channels_;
       $navigation = $('#navigation');
+      $controlPanel = $('#controls');
       
       initTiles();
+      initClickOfControls();
       console.log('Radio initialized with ' + channels.length + ' channels');
     }
   };
@@ -82,4 +85,32 @@ var Radio = function() {
     });
   }
   
+  /* private */
+  function initClickOfControls() {
+    $controlPanel.find('a').click(function(e) {
+      e.preventDefault();
+      
+      var stream = $(this).attr('href');
+      console.log('Action: ' + stream);
+      
+      $.ajax({
+        url: stream,
+        context: document.body,
+        statusCode: {
+          200: function() {
+            console.log('ok');
+          },
+          404: function() {
+            console.log('Resource not found');
+          },
+          500: function() {
+            console.log('Something went wrong');
+          }
+        }
+      }).done(function() {
+        
+      });
+    });
+  }
+
 }();

kitchenradio/public/stylesheets/style.css

@@ -129,8 +129,12 @@ body {
   height: 98.5%;
 }
 body {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
   background-color: rgba(0, 0, 0, 0.38);
+  background-image: url('/images/gl_formentera_seil.jpg');
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
 }
 a {
   color: #00B7FF;
@@ -147,8 +151,8 @@ a {
   align-content: center;
 }
 #navigation .tile {
-  background-color: rgba(255, 255, 255, 0.68);
+  background-color: rgba(255, 255, 255, 0.25);
-  margin: 10px;
+  margin: 2px;
   flex-grow: 1;
   flex-basis: auto;
   align-self: flex-start;
@@ -157,7 +161,7 @@ a {
 #navigation .tile .content {
   height: inherit;
   text-align: center;
-  padding: 10px;
+  padding: 2px;
 }
 #navigation .tile .content .icon {
   display: block;
@@ -169,9 +173,34 @@ a {
   margin-top: 20px;
   font-size: 2.2em;
 }
-#information {
+#navigation .tile:hover {
-  background-color: rgba(255, 255, 255, 0.68);
+  background-color: rgba(255, 255, 255, 0.5);
-  height: 30%;
+}
-  margin: 10px;
+#controls {
-  margin-top: 20px;
+  background-color: rgba(255, 255, 255, 0.25);
+  height: 30%;
+  margin: 2px;
+  margin-top: 4px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+  align-content: center;
+}
+#controls .control {
+  display: block;
+  margin: 2px;
+  flex-grow: 1;
+  flex-basis: auto;
+  align-self: flex-start;
+  height: 100%;
+  text-align: center;
+  text-decoration: none;
+  font-size: 50px;
+}
+#controls .control:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+#controls .control.empty {
+  visibility: hidden;
 }

kitchenradio/public/stylesheets/style.less

@@ -1,6 +1,7 @@
 @backgroundcolor: rgba(0,0,0,0.38);
-@backgroundcolor_element: rgba(255,255,255,0.68);
+@backgroundcolor_element: rgba(255,255,255,0.25);
-@margin_element: 10px;
+@backgroundcolor_element_hover: rgba(255,255,255,0.50);
+@margin_element: 2px;
 
 
 
@@ -59,8 +60,12 @@ html, body {
 }
 
 body {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;
   background-color: @backgroundcolor;
+  background-image: url('/images/gl_formentera_seil.jpg');
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
 }
 
 a {
@@ -104,12 +109,41 @@ a {
         font-size: 2.2em;
       }
     }
+    
+    &:hover {
+      background-color: @backgroundcolor_element_hover;
+    }
   }
 }
 
-#information {
+#controls {
   background-color: @backgroundcolor_element;
   height: 30%;
   margin: @margin_element;
   margin-top: (@margin_element * 2);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+  align-content: center;
+  
+  .control {
+    display: block;
+    margin: @margin_element;
+    flex-grow: 1;
+    flex-basis: auto;
+    align-self: flex-start;
+    height: 100%;
+    text-align: center;
+    text-decoration: none;
+    font-size: 50px;
+    
+    &:hover {
+      background-color: @backgroundcolor_element_hover;
+    }
+    
+    &.empty {
+      visibility: hidden;
+    }
+  }
 }

kitchenradio/routes/routes.js

@@ -34,3 +34,24 @@ exports.play = function(req, res, next) {
     res.sendStatus(400);
   }
 }
+
+exports.stop = function(req, res, next) {
+  Log.trace('Router: stop playing');
+
+  Radio.stop();
+  res.sendStatus(200);
+}
+
+exports.volumeUp = function(req, res, next) {
+  Log.trace('Router: volume up');
+
+  Radio.volumeUp();
+  res.sendStatus(200);
+}
+
+exports.volumeDown = function(req, res, next) {
+  Log.trace('Router: volume down');
+
+  Radio.volumeDown();
+  res.sendStatus(200);
+}

kitchenradio/views/index.jade

@@ -6,7 +6,14 @@ block content
       .content
         img.icon
         span.title
-  div#information
+  div#controls
+    a.control.volume_plus(href="/action/volume/down/")
+      i.fa.fa-volume-down
+    a.control.volume_minus(href="/action/volume/up/")
+      i.fa.fa-volume-up
+    a.control.empty
+    a.control.play_pause(href="/action/stop/")
+      i.fa.fa-stop
 
 
   script.

kitchenradio/views/layout.jade

@@ -2,6 +2,7 @@ doctype html
 html
   head
     title= title
+    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
     link(rel='stylesheet', href='/stylesheets/style.css')
     script(src="/javascripts/vendor/jquery.min.js")
     script(src="/javascripts/radio.js")