Clean up first demo

[balloob]

The demo is what people exploring Home Assistant are exposed to. It's prominently placed on the frontpage at https://demo.home-assistant.io

We should spend some time to spice up the first demo, and make it more appealing for mobile users too.

Here are some ideas for which I would love to see PRs:

• ~Remove 2nd floor plan~
• ~Move lights to be 2nd card (1st card is demo switcher), reduce number of lights. Generally, move cards higher that we can interact with~
• ~Add sensor cards~
• ~Add a notification~
• Add history panel
• Add logbook panel

Thanks to @SeanPM5 for input on the ideas for improvement.

Get started with development

To get started with this, open the dev environment and run demo/script/develop_demo to start the demo, and open the demo at http://localhost:8080

Some useful places in the code base to help with this issue:

• Directory with API stubs
• Where we activate stubs
• 1st demo entities + config
• Hass Demo Config

[SeanPM5]

Regarding the lights card in particular, because it has a section with a label, it's not possible to edit through the UI:

I think it's important to keep in mind that majority of people browsing this demo are likely brand new to Home Assistant and YAML. Seeing a confusing multi-line red text error message like this doesn't leave the best first impression.

At the moment it's the only card on the first page like that, but ideally any cards that get tweaked or added should aim to be editable through UI so that beginners will have an easy experience interacting with the demo.

[iantrich]

@SeanPM5 we need to pimp out our entities editor with support for action/icon/name as well as support for special row types. Need to think about how best to display that; probably an 'Add Row' button that takes you to a screen with a detailed editor