Added a few help bubbles to the floor plan editor

css/dashboard.css

@@ -420,6 +420,7 @@ input[type=range]::-moz-range-thumb {
 .icon.alarm_snooze:before { content: "\F068E"; }
 .icon.alpha_b:before { content: "\F0AEF"; }
 .icon.alpha_b_box:before { content: "\F0B09"; }
+.icon.arrow_down:before { content: "\F0045"; }
 .icon.arrow_expand_horizontal:before { content: "\F084E"; }
 .icon.arrow_expand_vertical:before { content: "\F084F"; }
 .icon.arrow_horizontal_lock:before { content: "\F115B"; }

js/component/card/floor_plan_editor.js

@@ -119,6 +119,27 @@ beestat.component.card.floor_plan_editor.prototype.decorate_contents_ = function
       .style('margin-top', beestat.style.size.gutter / 2);
     parent.appendChild(this.info_pane_container_);
     this.decorate_info_pane_(this.info_pane_container_);
+
+    // Help container
+    if (beestat.floor_plan.get_area(beestat.setting('visualize.floor_plan_id')) === 0) {
+      const help_container = document.createElement('div');
+      Object.assign(help_container.style, {
+        'position': 'absolute',
+        'left': '65px',
+        'top': '59px'
+      });
+      drawing_pane_container.appendChild(help_container);
+
+      this.helper_tile_ = new beestat.component.tile()
+        .set_text('Start by adding a room')
+        .set_shadow(false)
+        .set_background_color(beestat.style.color.green.base)
+        .set_text_color('#fff')
+        .set_type('pill')
+        .set_size('small')
+        .set_icon('arrow_left')
+        .render($(help_container));
+    }
   }
 
   const expand_container = document.createElement('div');
@@ -478,6 +499,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu
 
   // Sensor
   div = $.createElement('div');
+  div.style('position', 'relative');
   grid.appendChild(div);
   const sensor_input = new beestat.component.input.select()
     .add_option({
@@ -539,8 +561,37 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu
       beestat.cache.delete('data.three_d__runtime_sensor');
     }
 
+    // For the help box
+    self.update_info_pane_();
+
     self.update_floor_plan_();
   });
+
+  // Help container
+  if (
+    Object.keys(beestat.floor_plan.get_sensor_ids_map(beestat.setting('visualize.floor_plan_id'))).length === 0 &&
+    this.state_.active_room_entity !== undefined
+  ) {
+    const help_container = document.createElement('div');
+    Object.assign(help_container.style, {
+      'position': 'absolute',
+      'left': 0,
+      'top': '-9px'
+    });
+    div.appendChild(help_container);
+
+    this.helper_tile_ = new beestat.component.tile()
+      .set_text('Assign a sensor')
+      .set_shadow(false)
+      .set_background_color(beestat.style.color.green.base)
+      .set_text_color('#fff')
+      .set_type('pill')
+      .set_size('small')
+      .set_icon('arrow_down')
+      .render($(help_container));
+
+    sensor_input.set_label('⠀');
+  }
 };
 
 /**

js/component/floor_plan.js

@@ -74,14 +74,6 @@ beestat.component.floor_plan.prototype.render = function(parent) {
   });
   parent.appendChild(this.toolbar_container_);
 
-  this.toolbar_helper_container_ = $.createElement('div');
-  this.toolbar_helper_container_.style({
-    'position': 'absolute',
-    'top': 55,
-    'left': beestat.style.size.gutter * 4
-  });
-  parent.appendChild(this.toolbar_helper_container_);
-
   this.floors_container_ = $.createElement('div');
   this.floors_container_.style({
     'position': 'absolute',
@@ -443,17 +435,6 @@ beestat.component.floor_plan.prototype.update_toolbar = function() {
     })
   );
 
-  // Helper
-  if (beestat.floor_plan.get_area(this.floor_plan_id_) === 0) {
-    new beestat.component.tile()
-      .set_text('Start by adding a room')
-      .set_shadow(false)
-      .set_background_color(beestat.style.color.green.base)
-      .set_text_color('#fff')
-      .set_type('pill')
-      .render(this.toolbar_helper_container_);
-  }
-
   // Remove room
   const remove_room_button = new beestat.component.tile()
     .set_icon('card_remove_outline')

js/component/input/select.js

@@ -44,6 +44,9 @@ beestat.component.input.select.prototype.decorate_ = function(parent) {
   this.input_.style.marginBottom = beestat.style.size.gutter + 'px';
   this.input_.style.borderBottom = '2px solid ' + beestat.style.color.lightblue.base;
 
+  // Clear any existing option values from the input.
+  this.input_.innerHTML = '';
+
   // Set input width; interpret string widths literally (ex: 100%)
   if (this.width_ !== undefined) {
     if (isNaN(this.width_) === true) {