Closes #213 - Added in Fire Tablet Sensors from WallPanel.

configuration.yaml

@@ -84,6 +84,7 @@ logbook:
     entities:
       - automation.detect_lights_and_adjust_the_brightness_when_turned_on_based_on_time
       - automation.cuckoo_clock
+      - binary_sensor.office_motion
       - group.garage_doors
       - media_player.LivingRoomCC
       - py.warnings

floorplan.yaml

@@ -2,6 +2,7 @@ name: Alarm Panel
 image: /local/custom_ui/floorplan/floorplan.svg
 stylesheet: /local/custom_ui/floorplan/floorplan.css
 pan_zoom:
+warnings:
 
 groups:
 

packages/fire_tablet.yaml

@@ -0,0 +1,37 @@
+#-------------------------------------------
+#  Fire Tablet Alarm Panel - http://www.vmwareinfo.com/2017/07/visualizing-smart-home-using-home.html
+#-------------------------------------------
+#
+# homeassistant:
+#   customize:
+#     binary_sensor.office_motion:
+#       icon: mdi:sensor
+#       friendly_name: Office Motion Sensor
+#       emulated_hue: False
+#       hidden: False
+
+#---Sensor for Fire Tablet-----------------------------
+binary_sensor:
+  - platform: mqtt
+    state_topic: "wallpanel/alarm 1/sensor/battery"
+    name: "Alarm Panel 1 Battery Level"
+    value_template: '{{ value_json.value }}'
+    unit_of_measurement: '%'
+    device_class: power
+
+  - platform: mqtt
+    state_topic: "wallpanel/alarm 1/sensor/battery"
+    name: "Alarm Panel 1 Plugged In"
+    value_template: '{{ value_json.acPlugged }}'
+    unit_of_measurement: '%'
+    device_class: power
+
+  - platform: mqtt
+    state_topic: "wallpanel/alarm 1/sensor/motion"
+    name: "Alarm Panel 1 Motion"
+    device_class: motion
+
+  - platform: mqtt
+    state_topic: "wallpanel/alarm 1/state"
+    name: "Alarm Panel 1 Screen"
+    value_template: '{{ value_json.screenOn }}'

www/custom_ui/floorplan/ha-floorplan.html

@@ -1,6 +1,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://momentjs.com/downloads/moment.js"></script>
-<script src="https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/svg-pan-zoom.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.1/dist/svg-pan-zoom.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
 
 <dom-module id="ha-floorplan">
@@ -278,7 +278,7 @@
 
                 $(newSvgShape).attr('title', 'test');
 
-                if (this.IsPanZoomEnabled) {
+                if (this.instance.IsPanZoomEnabled) {
                   // Touch screen friendlyness!
                   //var mc = new Hammer(newSvgShape[0]); //went for the custom recognizers
                   var mc = new Hammer.Manager(newSvgShape[0]);
@@ -329,15 +329,29 @@
           }
 
           // Enable pan / zoom if enabled in config
-          if (this.IsPanZoomEnabled) {
-            svgPanZoom($(newSvg)[0], {
+          if (this.instance.IsPanZoomEnabled) {
+            var panZoom = window.panZoom = svgPanZoom($(newSvg)[0], {
               zoomEnabled: true,
               controlIconsEnabled: true,
               fit: true,
               center: true,
               dblClickZoomEnabled: false,
               customEventsHandler: this.instance.getHammerEventHandlers(),
             });
+
+            $(window).resize(function () {
+              panZoom.resize();
+              panZoom.fit();
+              panZoom.center();
+            });
+
+            document.addEventListener('transitionend', function (event) {
+              if (event.propertyName == 'left') {
+                panZoom.resize();
+                panZoom.fit();
+                panZoom.center();
+              }
+            });
           }
 
           this.callback();
@@ -799,7 +813,7 @@
     warn(message) {
       if (this.IsWarningsEnabled) {
         var warnings = Polymer.dom(this.$.warnings).node;
-        $(warnings).find('ul').append('<li>${message}</li>')
+        $(warnings).find('ul').append(`<li>${message}</li>`);
         $(warnings).css('display', 'block');
       }
     },