my home update

Example.markdown → Example1.markdown

@@ -1,14 +1,15 @@
 ---
 layout: default
-title: Examples
-permalink: /floorplan/
+title: Floorplan basics
+permalink: /floorplan/myhome
+toc: true  
 floorplan_example:
-  - example_name: "floorplanner_home"
-    example_classes: "size-auto"
   - example_name: "MyHome"
     example_classes: "size-auto"
+---
+
+## Floorplan-Home
 
-## Floorplan
 Here is the demo of the floorplan. You can click on rooms and visualise lights turning on and off animations. also other graphics can displayes and animated.
 
 {% include floorplan_example %}

floorplan/examples/MyHome/MyHome.css

@@ -1,12 +1,32 @@
 /* All Good :/ */
-.entitystate-on {
+#floorplan  {
+  padding: 10px;
+}
+
+/* #floorplan svg{
+  height: 100vh!important;
+ } */
+
+svg tspan {
+  fill: var(--primary-text-color);
+  }
+
+/* SVG shapes */
+
+svg, svg * {
+  vector-effect: non-scaling-stroke !important;
+  pointer-events: all !important;
+}
+
+
+.light-on {
     opacity: 0 !important;
     transition: opacity .25s;
     -moz-transition: opacity .25s;
     -webkit-transition: opacity .25s;
 }
 
-.entitystate-off {
+.light-off {
     /*opacity: 0.9;*/
     fill: rgb(2626269d)!important;
     transition: opacity .25s;

floorplan/examples/MyHome/MyHome.yaml

@@ -1,76 +1,59 @@
-title: My Home
-views:
-  - title: Chandler Terrace
-    path: floorplan
-    theme: Google Dark Theme
-    panel: true
-    type: panel
-    badges: []
-    cards:
-      - config:
-          console_log_level: info
-          defaults:
-            hover_action: hover-info
-            tap_action: more info
-          image: /local/floorplan/New home/MyHome.svg
-          rules:
-            - element: Light-bedroom
-              entity: switch.bedroom_plug
-              state_action:
-                action: call-service
-                service: floorplan.class_set
-                service_data: entitystate-${entity.state}
-              tap_action:
-                action: call-service
-                service: homeassistant.toggle
-            - element: Light-living_room
-              entity: switch.wifi_plug
-              state_action:
-                action: call-service
-                service: floorplan.class_set
-                service_data: entitystate-${entity.state}
-              tap_action:
-                action: call-service
-                service: homeassistant.toggle
-            - element: Light-kitchen_
-              entity: switch.wifi_plug
-              state_action:
-                action: call-service
-                service: floorplan.class_set
-                service_data: entitystate-${entity.state}
-              tap_action:
-                action: call-service
-                service: homeassistant.toggle
-            - element: Light-home_office
-              entity: switch.office_plug
-              state_action:
-                action: call-service
-                service: floorplan.class_set
-                service_data: entitystate-${entity.state}
-              tap_action:
-                action: call-service
-                service: homeassistant.toggle
-            - element: living-flame
-              entity: switch.plug_heater
-              state_action:
-                action: call-service
-                service: floorplan.class_set
-                service_data: flame-${entity.state}
-            - element: living-heater
-              entity: switch.plug_heater
-              tap_action:
-                action: call-service
-                service: homeassistant.toggle
-            - element: sensor.temperature
-              entity: sensor.temph_temperature
-              state_action:
-                - service: floorplan.text_set
-                  service_data: >-
-                    ${(entity.state !== undefined) ? Math.round(entity.state
-                    *10) / 10 + "°" : "unknown"}
-                - service: floorplan.class_set
-                  service_data:
-                    class: static-temp
-          stylesheet: /local/floorplan/New home/MyHome.css
-        full_height: true
-        type: custom:floorplan-card
+title: MyHome
+config:
+  image: /local/floorplan/examples/MyHome/MyHome.svg
+  stylesheet: /local/floorplan/examples/MyHome/MyHome.css
+
+  defaults:
+      hover_action: hover-info
+      tap_action: more-info
+
+  rules:
+    - element: Light-bedroom
+      entity: light.bedroom
+      state_action:
+        service: floorplan.class_set
+        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
+      tap_action: light.toggle
+
+    - element: Light-living_room
+      entity: light.livingroom
+      state_action:
+        service: floorplan.class_set
+        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
+      tap_action: light.toggle
+
+    - element: Light-kitchen_
+      entity: light.kitchen
+      state_action:
+        service: floorplan.class_set
+        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
+      tap_action: light.toggle
+
+    - element: Light-home_office
+      entity: light.homeoffice
+      state_action:
+        service: floorplan.class_set
+        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
+      tap_action: light.toggle
+
+    - element: living-flame
+      entity: switch.plug_heater
+      state_action:
+        service: floorplan.class_set
+        service_data: flame-${entity.state}
+
+    - element: living-heater
+      entity: switch.plug_heater
+      tap_action: toggle
+
+    - element: sensor.temperature
+      entity: sensor.temperature
+      state_action:
+        - service: floorplan.text_set
+          service_data: '${(entity.state !== undefined) ? Math.round(entity.state
+            *10) / 10 + "�" : "unknown"}'
+        - service: floorplan.class_set
+          service_data:
+            class: 'static-temp'
+
+

floorplan/examples/MyHome/simulations.yaml

@@ -0,0 +1,31 @@
+simulations:
+  - entities:
+      - light.livingroom
+      - light.kitchen
+      - light.homeoffice
+      - light.bedroom
+    states:
+      - state: on
+
+  - entities:
+      - light.livingroom
+      - light.kitchen
+      - light.homeoffice
+      - light.bedroom
+    states:
+      - state: off
+
+  - entity: sensor.temperature
+    states:
+      - state: 23.3
+        duration: 1
+      - state: 23.2
+        duration: 1
+      - state: 23.0
+        duration: 1
+      - state: 23.3
+        duration: 2
+
+  - entity: switch.plug_heater
+    states:
+      - state: on

floorplan/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Floorplan Examples</title>
+
+  <script src="./floorplan-examples.js" type="module"></script>
+
+  <style>
+    * {
+      font-family: sans-serif;
+    }
+
+    .floorplan-example {
+      margin-bottom: 50px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <h1>Floorplan Examples</h1>
+
+  <floorplan-examples examplespath="/examples"
+    data-include=" MyHome ">
+  </floorplan-examples>
+
+</body>
+
+</html>