active light icon/text configuration option, better responsiveness

mobile/app/pods/components/hue-controls/template.hbs

@@ -30,11 +30,14 @@
     {{/paper-menu}}
     </div>
 
+
   {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}
 
-  {{lights-tab active=(eq selectedTab 0) apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}}
+  <div id="huegasm-content">
+    {{lights-tab active=(eq selectedTab 0) apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}}
 
-  {{music-tab active=(eq selectedTab 1)  apiURL=apiURL lightsData=lightsData activeLights=activeLights pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn playing=playing storage=storage colorLoopOn=colorLoopOn isShowingAddSoundCloudModal=isShowingAddSoundCloudModal action="startIntro"}}
+    {{music-tab active=(eq selectedTab 1)  apiURL=apiURL lightsData=lightsData activeLights=activeLights pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn playing=playing storage=storage colorLoopOn=colorLoopOn isShowingAddSoundCloudModal=isShowingAddSoundCloudModal action="startIntro"}}
+  </div>
 {{else}}
   {{paper-progress-circular diameter=100}}
 {{/if}}

mobile/app/styles/hue-controls.scss

@@ -1,6 +1,6 @@
 #lights-tab {
-  margin-top: 4vh;
   padding: 0;
+  margin-top: 5vh;
   .paper-icon {
     line-height: 0.8 !important;
   }
@@ -28,7 +28,7 @@
 }
 
 #navigation {
-  padding: 15px 0 20px;
+  padding: 15px 0 4vh;
   text-align: center;
   position: relative;
   .ember-basic-dropdown-trigger {
@@ -84,3 +84,8 @@
   top: 15px;
   font-size: 16px !important;
 }
+
+#huegasm-content {
+  height: 80%;
+  max-height: 500px;
+}

mobile/app/styles/paper.scss

@@ -44,3 +44,7 @@ md-icon {
 md-switch.md-default-theme.md-checked .md-thumb {
   background-color: $secondaryThemeColor;
 }
+
+md-list-item {
+  margin-bottom: 2vh;
+}

web/.ember-cli

@@ -6,6 +6,5 @@
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
   "disableAnalytics": true,
-  "usePods": true,
+  "usePods": true
-  "ssl": true
 }

web/app/pods/application/controller.js

@@ -8,20 +8,33 @@ const {
 
 export default Controller.extend({
   dimmerOn: false,
+  lightsIconsOn: true,
 
   init(){
     this._super(...arguments);
 
     let storage = new window.Locally.Store({compress: true}),
-      dimmerOn = storage.get('huegasm.dimmerOn');
+      dimmerOn = storage.get('huegasm.dimmerOn'),
+      lightsIconsOn = storage.get('huegasm.lightsIconsOn');
     this.set('storage', storage);
 
     if (!isEmpty(dimmerOn) && dimmerOn) {
       this.send('toggleDimmer');
     }
+
+    if (!isEmpty(lightsIconsOn)) {
+      this.set('lightsIconsOn', lightsIconsOn);
+    }
   },
 
   actions: {
+    toggleLightsIcons() {
+      this.toggleProperty('lightsIconsOn');
+
+      let lightsIconsOn = this.get('lightsIconsOn');
+
+      this.get('storage').set('huegasm.lightsIconsOn', lightsIconsOn);
+    },
     toggleDimmer(){
       this.toggleProperty('dimmerOn');
 

web/app/pods/application/template.hbs

@@ -1,3 +1,3 @@
-{{huegasm-app action="toggleDimmer" dimmerOn=dimmerOn storage=storage}}
+{{huegasm-app toggleLightsIcons="toggleLightsIcons" toggleDimmer="toggleDimmer" dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage}}
 
 {{huegasm-footer action="toggleDimmer" dimmerOn=dimmerOn storage=storage}}

web/app/pods/components/hue-controls/component.js

@@ -122,7 +122,10 @@ export default Component.extend({
       location.reload();
     },
     toggleDimmer() {
-      this.sendAction();
+      this.sendAction('toggleDimmer');
+    },
+    toggleLightsIcons() {
+      this.sendAction('toggleLightsIcons');
     },
     clearAllSettings() {
       this.get('storage').clear();

web/app/pods/components/hue-controls/template.hbs

@@ -12,7 +12,11 @@
         {{/menu.trigger}}
         {{#menu.content width=3 as |content|}}
           {{#content.menu-item onClick="toggleDimmer"}}
-            {{paper-icon "lightbulb outline" class=dimmerOnClass}} Dark Mode: {{if dimmerOn "On" "Off"}}
+            {{paper-icon "highlight" class=dimmerOnClass}} Dark Mode: <strong>{{if dimmerOn "On" "Off"}}</strong>
+          {{/content.menu-item}}
+
+          {{#content.menu-item onClick="toggleLightsIcons"}}
+            {{paper-icon "lightbulb outline" class=dimmerOnClass}} Active Lights: <strong>{{if lightsIconsOn "Icons" "Text"}}</strong>
           {{/content.menu-item}}
 
           {{#content.menu-item onClick="clearBridge"}}
@@ -31,7 +35,7 @@
     </div>
   </div>
 
-  {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}
+  {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage}}
 
   <div id="huegasm-content" class="row">
     {{lights-tab active=(eq selectedTab 0) apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}}

web/app/pods/components/huegasm-app/component.js

@@ -28,7 +28,11 @@ export default Component.extend({
 
   actions: {
     toggleDimmer(){
-      this.sendAction();
+      this.sendAction('toggleDimmer');
+    },
+
+    toggleLightsIcons(){
+      this.sendAction('toggleLightsIcons');
     },
 
     isReady(){

web/app/pods/components/huegasm-app/template.hbs

@@ -1,5 +1,5 @@
 {{#if bridgeUsername}}
-  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage action="toggleDimmer"}}
+  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage toggleDimmer="toggleDimmer" toggleLightsIcons="toggleLightsIcons"}}
 {{else}}
   {{#if ready}}
     {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}

web/app/pods/components/light-group/component.js

@@ -12,7 +12,7 @@ const {
 
 export default Component.extend({
   elementId: 'active-lights',
-  classNames: ['light-group', 'horizontal-light-group'],
+  classNames: ['light-group'],
   isHovering: false,
   activeLights: A(),
 

web/app/pods/components/light-group/template.hbs

@@ -1,5 +1,11 @@
 {{#each lightsList as |light|}}
-  <div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+  {{#if lightsIconsOn}}
-    <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
+    <div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
-  </div>
+      <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
+    </div>
+  {{else}}
+    <div class="{{light.activeClass}} light-text light{{light.id}}" {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+      {{light.name}}
+    </div>
+  {{/if}}
 {{/each}}

web/app/styles/hue-controls.scss

@@ -1,9 +1,6 @@
 #lights-tab {
   padding: 0;
-  height: 100%;
+  margin-top: 5vh;
-  justify-content: center;
-  flex-direction: column;
-  display: flex;
   .paper-icon {
     line-height: 0.8 !important;
   }
@@ -41,7 +38,7 @@
 }
 
 #navigation {
-  padding: 15px 0;
+  padding: 15px 0 4vh;
   text-align: center;
   margin: auto;
   position: relative;
@@ -111,7 +108,6 @@
 @media(min-width:767px) {
   #lights-tab {
     font-size: 20px;
-    min-height: 450px;
     .paper-icon {
       font-size: 24px;
     }

web/app/styles/light-group.scss

@@ -1,10 +1,11 @@
 .light-group {
   max-width: 800px;
   margin: 0 auto;
-  text-align: center;
+  display: flex;
+  justify-content: center;
   .tooltip.top {
-    margin-top: 4px;
+    margin-top: 1px;
-    margin-left: 0;
+    margin-left: 2px;
   }
   div {
     display: inline-block;
@@ -19,25 +20,14 @@
 .light-inactive::before {
   font-weight: bold;
   position: absolute;
+  top: -9px;
+  left: 6px;
   content: "X";
-  top: -10px;
-  left: 5px;
   font-size: 40px;
   color: rgba(255, 0, 0, 0.37);
   font-family: cursive;
 }
 
-.horizontal-light-group {
-  .light-inactive::before {
-    top: -9px;
-    left: 6px;
-  }
-  .tooltip.top {
-    margin-top: 1px;
-    margin-left: 2px;
-  }
-}
-
 .light-active {
   cursor: pointer;
   img {
@@ -58,3 +48,12 @@
 .remove-button {
   margin: 10px 0 10px 60px;
 }
+
+.light-text {
+  width: 60px;
+  word-wrap: break-word;
+  padding: 0 10px;
+  &.light-inactive::before {
+    left: 10px;
+  }
+}

web/ssl/server.crt

@@ -1,21 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDaDCCAlACCQDSynsn/7ONRTANBgkqhkiG9w0BAQsFADB2MQswCQYDVQQGEwJD
-QTELMAkGA1UECAwCQkMxEjAQBgNVBAcMCVZhbmNvdXZlcjESMBAGA1UECgwJTmlk
-cmF0ZWNoMQ0wCwYDVQQDDARFZ29yMSMwIQYJKoZIhvcNAQkBFhRob2JvbWFuMzEz
-QGdtYWlsLmNvbTAeFw0xNzAyMDMwODM3NDFaFw0xODAyMDMwODM3NDFaMHYxCzAJ
-BgNVBAYTAkNBMQswCQYDVQQIDAJCQzESMBAGA1UEBwwJVmFuY291dmVyMRIwEAYD
-VQQKDAlOaWRyYXRlY2gxDTALBgNVBAMMBEVnb3IxIzAhBgkqhkiG9w0BCQEWFGhv
-Ym9tYW4zMTNAZ21haWwuY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
-AQEAm+ebAZYcwy0wZeYTZM7KkGBQN2kVqI7WRt6Ud739HXR3/EVV+jVh2Fb4CbHC
-VRbJM0FGgkM09XPse507B/jp8UIXzL1w3/Ek5RhBt+xyX9dQDAcseoc252OcqQNF
-dSJXxL9YqPPCzXGqTrctOh/73iVvq7fK7lbby+GCrYzfFosmMzaSXYTCSSQ51Lg9
-U4j1GAF+yCaueTcjD5BnNgEtRzrsHlJ+UUFHfnUqGLzaDthJQ6x8KuMW3ddmPxdF
-OyGzOxpp2BSbx2psDod61NNLz+dRCH2R6lPic3EU6HL8EbwNzqw3qdX6PowdT8yB
-KGFLlvfVPCAlXslLlydessxFWQIDAQABMA0GCSqGSIb3DQEBCwUAA4IBAQA0R2lt
-HX6+6+YUYXfWVf2POCmVWiHZ1CVrPdfG3POqnIGL4T0KjcjZJIvkE9hjl55LlC6f
-xt0dPcHvKy8+WsAFTjGIcWSKQVQSvyQpCraC7IfhtFq5MqbQHEUjmo7J1p40Xo96
-XrL14X8p+kkQmN68ylZvdmuebgj0K5x8PUQORor2sZI0sN03vgSMQDFF5/kIswkJ
-t1YvzpVel6vGiXbewRL6y+XUK/akYb/G/QjGsgrZ6Y9wIQuqzme9I9S76ynkm/in
-AUwBSYYXd/0skKpeFsnGjGv0LjXpb+9z4Tk/B0g78EXrmDjfMsEVUaiMjuv9JrIP
-6CnM3TiDqne1ahTc
------END CERTIFICATE-----

web/ssl/server.key

@@ -1,27 +0,0 @@
------BEGIN RSA PRIVATE KEY-----
-MIIEpAIBAAKCAQEAm+ebAZYcwy0wZeYTZM7KkGBQN2kVqI7WRt6Ud739HXR3/EVV
-+jVh2Fb4CbHCVRbJM0FGgkM09XPse507B/jp8UIXzL1w3/Ek5RhBt+xyX9dQDAcs
-eoc252OcqQNFdSJXxL9YqPPCzXGqTrctOh/73iVvq7fK7lbby+GCrYzfFosmMzaS
-XYTCSSQ51Lg9U4j1GAF+yCaueTcjD5BnNgEtRzrsHlJ+UUFHfnUqGLzaDthJQ6x8
-KuMW3ddmPxdFOyGzOxpp2BSbx2psDod61NNLz+dRCH2R6lPic3EU6HL8EbwNzqw3
-qdX6PowdT8yBKGFLlvfVPCAlXslLlydessxFWQIDAQABAoIBAArUI2gQzR6hXOM2
-/9HYqyksB2ZR3jc+9JMnkphekd4h4NOc3UPrwUgNglzqA911H7R3rDYQBPWnf512
-Zks/dsBTHuQRpG1pim5/KNFlkuwlQGIVfXllOuMHgDIdEA36vK3lvHq/s6AhbPra
-rkGDRzM+1mrO8UFstweKOlFjn3spQ1VYOvZKvvis69ucbjcfqU6KB/73WmvNb25i
-3Yp4zAf41xycu+NVRvH+jEU+Pa8WA4NW1mC0tHSq/6sPrnTppXtHxGwFWGj8t/h4
-+ZFPullL9V/g21LtMOlJL9a8CTimkayR1SalIeBZgwRDfANh1n3srBCZ2lZgwD3i
-iF9ahKECgYEAx9Jpxj1l9DxrB8xDwaKnEF6HO69Vb+ApMdbcqQWzlzOxplPbULcY
-3PguKtxhvE3ozJ7rGD8Ust4QhFo+SAW+P2DHYWwxOG5mzssvIfH8TUVUi2O3a9ob
-mkywj3Yl54u4x/p0QZaMFf2gOGx7TChYK2UuL99AmkogGu0EF4P/45cCgYEAx7xh
-s3ah4hpzp24ecn4pZ8AJ3c+ErnLR7A67K6rFzAXD0A6iyp4kPR/WnddvMpmVzubC
-pLvxMYghhVI2fEZ6tpzXUuTQsUa6rLfRtXB9QYVFAxDaNvJ/JvGLXk79cr3QTU0M
-ORXcFW+FkyEKGvgO3oVLG9fQ+xiJUu9Eq2g5fI8CgYEAjwWv59BydQn5oa82oBYH
-ddPy/2lTwau0UJP1hJUsIgFCGkbTJ0amaSLKCKuM2Pb6tdrZcpVT/2Kqd9EP2wUh
-UsO2cai64iVDOKh9p9JIQBZrmQlac7u9HgfeKBDsuHptW9WL+JYE1oiecURUTAJk
-eUsGcAVffA+qQxt6XkqAkSkCgYEAoTEcwBKrjqe+Uo8CL3A1xi8rR0EkWQz88T7q
-OtF1E7RLVOua4V5C7Ll3IKcubG2agwGkcAHlIw4zzz6MDjtq6VkmRRW4fnkQSjeH
-HKCN1YTSLyk4kkOd7jXdPd0Nmb4qD1hw1tkXZo08BYMSfrVWeqqj9PJ1C0+/85h5
-mMNiMW0CgYAJAsqZBgAqp4AeXjvojJ4x4SohuQskfSfe9206dclxTf0BELt3cPF0
-Lgxxe3e3srglUDMvUQzo7Sg0N/FkOidGsJInw8tLxEB9zzTBmo4uXv57vf+08R9F
-0sNsIHStt2dj67ddhFGi2vH/Lu/Ekcsipf67Qr/dwmUDeDtE6Frx/A==
------END RSA PRIVATE KEY-----