From e2168f4adcd0d0067a0dcbd939dbf93d271ba0c4 Mon Sep 17 00:00:00 2001
From: Jon Ziebell <ziebelje@gmail.com>
Date: Sat, 14 Mar 2026 07:26:36 -0400
Subject: [PATCH] Tweaked visualize page to make it easier to record videos

---
 js/component/card/floor_plan_editor.js |  8 ++-
 js/component/card/three_d.js           |  5 +-
 js/layer/visualize.js                  | 83 +++++---------------------
 3 files changed, 25 insertions(+), 71 deletions(-)

diff --git a/js/component/card/floor_plan_editor.js b/js/component/card/floor_plan_editor.js
index 374b0df..5a837da 100644
--- a/js/component/card/floor_plan_editor.js
+++ b/js/component/card/floor_plan_editor.js
@@ -331,6 +331,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_contents_ = function
  */
 beestat.component.card.floor_plan_editor.prototype.decorate_drawing_pane_ = function(parent) {
   const self = this;
+  const drawing_height = 575;
 
   // Tear down prior drawing-pane components to avoid stale listeners.
   // Dispose existing SVG to remove any global listeners.
@@ -354,7 +355,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_drawing_pane_ = func
     'position': 'relative',
     'width': '100%',
     'overflow': 'hidden',
-    'height': '500px'
+    'height': drawing_height + 'px'
   });
   parent.appendChild(drawing_canvas_container);
 
@@ -389,6 +390,11 @@ beestat.component.card.floor_plan_editor.prototype.decorate_drawing_pane_ = func
   );
 
   this.floor_plan_.render(drawing_canvas_container);
+  if (this.floor_plan_.height_ !== undefined && this.floor_plan_.height_ > 0) {
+    this.floor_plan_.height_ = drawing_height;
+    this.floor_plan_.svg_.setAttribute('height', drawing_height);
+    this.floor_plan_.update_view_box_();
+  }
 
   this.layers_sidebar_ = new beestat.component.floor_plan_layers_sidebar(
     beestat.setting('visualize.floor_plan_id'),
diff --git a/js/component/card/three_d.js b/js/component/card/three_d.js
index 1bc0f9d..b548571 100644
--- a/js/component/card/three_d.js
+++ b/js/component/card/three_d.js
@@ -96,7 +96,7 @@ beestat.extend(beestat.component.card.three_d, beestat.component.card);
  *
  * @type {number}
  */
-beestat.component.card.three_d.rerender_delay_floor_plan_ms = 5000;
+beestat.component.card.three_d.rerender_delay_floor_plan_ms = 2147483647;
 
 /**
  * Debounce delay in milliseconds for scene setting-triggered rerenders.
@@ -423,6 +423,7 @@ beestat.component.card.three_d.prototype.decorate_contents_ = function(parent) {
  */
 beestat.component.card.three_d.prototype.decorate_drawing_pane_ = function(parent) {
   const self = this;
+  const drawing_height = 770;
 
   // Create the scene
   if (this.scene_ !== undefined) {
@@ -456,6 +457,8 @@ beestat.component.card.three_d.prototype.decorate_drawing_pane_ = function(paren
   // Set the initial date.
   this.update_scene_();
   this.scene_.render($(parent));
+  this.scene_.height_ = drawing_height;
+  this.scene_.set_width(this.scene_.width_);
 
   // Use current local time of day for initial scene lighting.
   const now = moment();
diff --git a/js/layer/visualize.js b/js/layer/visualize.js
index 811481d..84eaa01 100644
--- a/js/layer/visualize.js
+++ b/js/layer/visualize.js
@@ -18,89 +18,34 @@ beestat.layer.visualize.prototype.decorate_ = function(parent) {
   });
 
   beestat.dispatcher.addEventListener([
-    'setting.visualize.floor_plan_id',
-    'setting.visualize.hide_affiliate'
+    'setting.visualize.floor_plan_id'
   ], function() {
     (new beestat.layer.visualize()).render();
   });
 
   (new beestat.component.header('visualize')).render(parent);
 
-  // All the cards
-  var cards = [];
-
-  if (window.is_demo === true) {
-    cards.push([
-      {
-        'card': new beestat.component.card.demo(),
-        'size': 12
-      }
-    ]);
-  }
-
-  if (
-    beestat.setting('visualize.floor_plan_id') !== null &&
-    beestat.setting('visualize.floor_plan_id') !== undefined
-  ) {
-    cards.push([
-      {
-        'card': new beestat.component.card.floor_plan_editor(
-          beestat.setting('thermostat_id')
-        ),
-        'size': 12
-      }
-    ]);
-
-    cards.push([
+  var cards = [
+    [
       {
         'card': new beestat.component.card.visualize_settings(),
         'size': 12
       }
-    ]);
-
-    if (
-      beestat.setting('visualize.hide_affiliate') === false &&
-      window.is_demo === false
-    ) {
-      cards.push([
-        {
-          'card': new beestat.component.card.visualize_affiliate(),
-          'size': 12
-        }
-      ]);
-    }
-
-    cards.push([
+    ],
+    [
+      {
+        'card': new beestat.component.card.floor_plan_editor(
+          beestat.setting('thermostat_id')
+        ),
+        'size': 6
+      },
       {
         'card': new beestat.component.card.three_d()
           .set_floor_plan_id(beestat.setting('visualize.floor_plan_id')),
-        'size': 12
+        'size': 6
       }
-    ]);
-  } else {
-    cards.push([
-      {
-        'card': new beestat.component.card.visualize_intro(
-          beestat.setting('thermostat_id')
-        ),
-        'size': 12
-      }
-    ]);
-    cards.push([
-      {
-        'card': new beestat.component.card.visualize_video(),
-        'size': 12
-      }
-    ]);
-  }
-
-  // Footer
-  cards.push([
-    {
-      'card': new beestat.component.card.footer(),
-      'size': 12
-    }
-  ]);
+    ]
+  ];
 
   (new beestat.component.layout(cards)).render(parent);
 };