Selecting the default light group tab on web panel load if configured

platypush/backend/http/static/js/light.hue.js

@@ -392,6 +392,7 @@ $(document).ready(function() {
             var $room = $('<div></div>')
                 .addClass('room-item')
                 .data('id', room)
+                .data('name', rooms[room].name)
                 .text(rooms[room].name);
 
             var $roomLights = $('<div></div>')
@@ -471,6 +472,8 @@ $(document).ready(function() {
             }
 
             updateRooms(groups);
+        }).then(function() {
+            initBindings();
         });
     };
 
@@ -644,11 +647,17 @@ $(document).ready(function() {
             $animationContainers.hide();
             $animationContainer.show();
         });
+
+        if (window.config.light.hue.default_group) {
+            var $defaultRoomItem = $roomsList.find('.room-item').filter(
+                (i, r) => $(r).data('name') == window.config.light.hue.default_group);
+
+            $defaultRoomItem.click();
+        }
     };
 
     var init = function() {
         initUi();
-        initBindings();
     };
 
     init();

platypush/backend/http/templates/plugins/light.hue.html

@@ -1,6 +1,19 @@
 <script type="text/javascript" src="{{ url_for('static', filename='js/light.hue.js') }}"></script>
 <link rel="stylesheet" href="{{ url_for('static', filename='css/light.hue.css') }}"></script>
 
+{% set default_group = configuration['groups'][0] if 'groups' in configuration else None %}
+
+<script type="text/javascript">
+    window.config = window.config || {};
+    window.config.light = window.config.light || {};
+    window.config.light.hue = window.config.light.hue || {};
+{% if default_group %}
+    window.config.light.hue.default_group = '{% print default_group %}';
+{% else %}
+    window.config.light.hue.default_group = null;
+{% endif %}
+</script>
+
 <div id="hue-container" class="row">
     <div class="three columns">
         <div class="hue-section-title">Rooms</div>