From 5994a355a42cfba5f551cd7355f8ec7f4ee5090f Mon Sep 17 00:00:00 2001
From: Sergio Cinos <sergio.cinos@gmail.com>
Date: Wed, 6 Nov 2024 10:03:29 +0100
Subject: [PATCH 1/2] Support grid layout

---
 src/components/horizonCard/HorizonCard.ts | 50 +++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/components/horizonCard/HorizonCard.ts b/src/components/horizonCard/HorizonCard.ts
index 654c2a4..2c8be9b 100644
--- a/src/components/horizonCard/HorizonCard.ts
+++ b/src/components/horizonCard/HorizonCard.ts
@@ -85,6 +85,56 @@ export class HorizonCard extends LitElement {
     return height
 	}
 
+  public getLayoutOptions () {
+    // Measuring different card elements with DevTools, these are the height of each section in pixels, when the card has a width of 480px.
+    const height = {
+      graph: 187.08,
+      title: 41,
+      sunrise_sunset: 42.17,
+      dawn_noon_dusk: 48.3,
+      single_azimuth_elevation: 48.3,
+      both_azimuth_elevation: 66.78,
+      moonrise_moonrise_moonphase: 48.3
+    }
+
+    // Per the documentation in https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/#sizing-in-sections-view, each row
+    // has a height of 56px and the gap between rows is 8px. So we compute the card height based on the elements being displayed, and then
+    // convert it to rows using the formula `size = 56*num_rows + 8*(num_rows-1)`, which can be expressed as `num_rows = (size + 8)/64`
+
+    let size = height.graph
+    const fieldConfig = this.expandedFieldConfig()
+
+    if (this.config.title && this.config.title.length > 0) {
+      size += height.title
+    }
+
+    if (fieldConfig.sunrise || fieldConfig.sunset) {
+      size += height.sunrise_sunset
+    }
+
+    if (fieldConfig.dawn || fieldConfig.noon || fieldConfig.dusk) {
+      size += height.dawn_noon_dusk
+    }
+
+    if ((fieldConfig.sun_azimuth && fieldConfig.moon_azimuth) || (fieldConfig.sun_elevation || fieldConfig.moon_elevation)) {
+      size += height.both_azimuth_elevation
+    } else if (fieldConfig.sun_azimuth || fieldConfig.moon_azimuth || fieldConfig.sun_elevation || fieldConfig.moon_elevation) {
+      size += height.single_azimuth_elevation
+    }
+
+    if (fieldConfig.moonrise || fieldConfig.moon_phase || fieldConfig.moonset) {
+      size += height.moonrise_moonrise_moonphase
+    }
+
+    const rows = Math.ceil((8+size)/64)
+    return {
+      grid_rows: rows,
+      grid_columns: 4,
+      grid_min_columns: 4,
+      grid_min_rows: rows,
+    }
+  }
+
   // called by HASS whenever config changes
   public setConfig (config: IHorizonCardConfig): void {
     if (config.language && !HelperFunctions.isValidLanguage(config.language)) {

From 052fa1ebbe2f80ee659afb655e6e23b6a265f07c Mon Sep 17 00:00:00 2001
From: Sergio Cinos <sergio.cinos@gmail.com>
Date: Wed, 6 Nov 2024 10:03:36 +0100
Subject: [PATCH 2/2] Add info about dev environment

---
 README.md | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5554727..51f547a 100644
--- a/README.md
+++ b/README.md
@@ -236,7 +236,6 @@ now: 2023-07-06T00:30:05+0300
 debug_level: 0
 ```
 
-
 ## Development
 
 ### Prepare the environment
@@ -245,7 +244,29 @@ debug_level: 0
 2. Enable [corepack](https://github.com/nodejs/corepack). Run `corepack enable`
 3. Install dependencies, run `yarn install`
 
+### Run tests
+
+Run `yarn test`
 
 ### Build the project
 
 Run `yarn build`
+
+### Load in a test bed
+
+1. Run `yarn dev`, keep it running in a terminal
+2. Open the URL `http://<your-ip-address>:5000`
+
+The test bed provides common scenarios to test your changes. You can tweak those scenarios and change the card config editting `/dev/dev.js`
+
+### Load in a Home Assistant instance
+
+If you have Horizon Card installed, it is recommended to disable it before loading it in development mode.
+
+1. Run `yarn dev`, keep it running in a terminal
+2. Go to [https://my.home-assistant.io/redirect/lovelace_dashboards/]. Alternatively, go to Settings > Dashboards
+3. Open the three dots menu > Resources
+4. Add a new resource. The URL is `http://<your-ip-address>/lovelace-horizon-card.js`, type `JavaScript module`.
+5. Add a new Dashboard, add the Horizon card.
+
+Every time you change the code, refresh the Dashboard and the changes should be visible.