From 1b226c3bbb8d3c829c5db58bc0810fe86676d8aa Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Wed, 20 Jun 2018 10:24:57 -0400 Subject: [PATCH] add image to experimental UI --- docs/frontend_experiment_index.md | 6 +++--- website/i18n/en.json | 2 ++ .../en/frontend/experimental-ui-comparison.png | Bin 0 -> 12166 bytes 3 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 website/static/img/en/frontend/experimental-ui-comparison.png diff --git a/docs/frontend_experiment_index.md b/docs/frontend_experiment_index.md index 32ee1fa1..5c373933 100644 --- a/docs/frontend_experiment_index.md +++ b/docs/frontend_experiment_index.md @@ -3,13 +3,13 @@ title: "Experimental UI" sidebar_label: Introduction --- -Starting with Home Assistant 0.72, we're experimenting with a way of defining your user interface. The aproach is fundamentally different from the current approach. +Starting with Home Assistant 0.72, we're experimenting with a way of defining your user interface. The aproach is fundamentally different from the current approach. The old user interface relied solely on the state machine. This caused trouble as it meant that people wanted to store things in the state machine to control the user interface. That's a big violation of seperation of concern. With the new user interface, we're taking a completely different approach. All user interface configuration will live in a seperate file, controlled by the user. This allows us to build a faster user interface that is more customizable. -The current approach will look at your groups and entities and will sort them on the fly. With our experimental UI, it is purely based on configuration that is provided by the user, defined in `/experimental-ui.yaml`. +![Visual comparison of old configuration versus new configuration](/img/en/frontend/experimental-ui-comparison.png) ## Trying it out -Create `/experimental-ui.yaml`: +Create a new file `/experimental-ui.yaml` and add the following content: ```yaml title: My Awesome Home diff --git a/website/i18n/en.json b/website/i18n/en.json index de48b539..519c51ec 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -92,6 +92,8 @@ "frontend_creating_custom_ui": "Creating custom UI", "frontend_development": "Frontend development", "Development": "Development", + "frontend_experiment_card_types": "Type Of Cards", + "Cards": "Cards", "frontend_experiment_custom_card": "Custom Cards", "frontend_experiment_index": "Experimental UI", "frontend_index": "Home Assistant Frontend", diff --git a/website/static/img/en/frontend/experimental-ui-comparison.png b/website/static/img/en/frontend/experimental-ui-comparison.png new file mode 100644 index 0000000000000000000000000000000000000000..24dce029e54fb1d8304b7dd93ece0c82888dd914 GIT binary patch literal 12166 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