home-assistant.io/frontend_creating_custom_panels.markdown at 9fa92cc670b665133809cd22278cd2bc8f11fbc7

mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-05-04 10:08:57 +00:00

Ferry van Zeelst 0b6add374f Fixed 3 typo's in the code (#936 )

Fixed 3 typo's which prevented the script from working out of the box.
- 2nd </script> tag should have been <script>
- changed: "name: hello_world" to "name: hello"
- changed: "url_path: hello_world" to "url_path: hello"
- removed: "webcomponent_path: <config dir>/panels/hello.html"

2016-09-13 22:32:06 +02:00

1.8 KiB

Raw Blame History

layout, title, description, date, sidebar, comments, sharing, footer

layout	title	description	date	sidebar	comments	sharing	footer
page	Creating custom panels	Introduction to create custom panels for Home Assistant.	2016-07-29 13:00	true	false	true	true

Any component has the possibility to add a panel to the frontend. Panels will be rendered full screen and have real-time access to the Home Assistant object via JavaScript. Examples of this in the app are map, logbook and history.

Create a file called hello.html in your /panels/.

The hello.html contains the needed building blocks to create the elements inside the view.

<dom-module id='ha-panel-hello'>
  <template>
    <style>
      p {
        font-weight: bold;
      }
    </style>
    <p>Hello {% raw %}{{who}}{% endraw %}. Greetings from Home Assistant.</p>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-panel-hello',
  properties: {
    // Home Assistant object
    hass: {
      type: Object,
    },
    // If should render in narrow mode
    narrow: {
      type: Boolean,
      value: false,
    },
    // If sidebar is currently shown
    showMenu: {
      type: Boolean,
      value: false,
    },
    // Home Assistant panel info
    // panel.config contains config passed to register_panel serverside
    panel: {
      type: Object,
    },
    who: {
      type: String,
      computed: 'computeWho(panel)',
    }
  },

  computeWho: function (panel) {
    return panel && panel.config && panel.config.who ? panel.config.who : 'World';
  },
});
</script>

Create an entry for the new panel in your configuration.yaml file:

panel_custom:
  - name: hello
    sidebar_title: Hello World
    sidebar_icon: mdi:hand-pointing-right
    url_path: hello

For more examples, see the Custom panel Examples on our examples page.

1.8 KiB Raw Blame History

1.8 KiB

Raw Blame History