Removed unused stuff. Updated.

config/configuration.yaml

   unit_system: metric
   time_zone: Europe/Berlin
   customize: !include customize.yaml
+  whitelist_external_dirs:
+    - '/snapshots'
 
 zone:  
   - name: HTWG
   password: Mindabew1
 
 sensor:
+  - platform: pi_hole
+    host: 192.168.1.3
+    monitored_conditions:
+      - ads_blocked_today
+      - dns_queries_today
+      - unique_clients
+      - unique_domains
   - platform: command_line
     name: CPU Temperature
     command: "cat /sys/class/thermal/thermal_zone0/temp"
     entities:
       - sensor.dht_sensor_humidity
     hours_to_show: 12
+  pihole:
+    name: Queries over the last 24 hours
+    refresh: 60
+    entities:
+      - sensor.pi_hole_ads_blocked_today
+      - sensor.pi_hole_dns_queries_today
+    hours_to_show: 24
   octoprint:
     name: OctoPrint
     refresh: 1
   api_password: !secret http_password
   base_url: http://localhost:8123
   #base_url: https://home.rutschmann.tech
-  #server_port: 443
   #ssl_profile: intermediate
   #ssl_certificate: /config/ssl/fullchain.pem
   #ssl_key: /config/ssl/privkey.pem

config/known_devices.yaml

   name: PC-E0-B5-2D-ED-BA-31
   picture:
   track: false
+
+raspberrypi:
+  hide_if_away: false
+  icon:
+  mac: DC:A6:32:03:C6:56
+  name: raspberrypi
+  picture:
+  track: false
+
+raspberrypi_2:
+  hide_if_away: false
+  icon:
+  mac: DC:A6:32:03:C6:57
+  name: raspberrypi
+  picture:
+  track: false

config/www/circle-sensor-card.js

-import {
-  LitElement, html
-} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
-
-class CircleSensorCard extends LitElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      state: Object,
-      dashArray: String
-    }
-  }
-
-  _render({ state, dashArray, config }) {
-    return html`
-      <style>
-          :host {
-            cursor: pointer;
-          }
-
-          .container {
-            position: relative;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-          }
-
-          .labelContainer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-          }
-          
-          #label {
-            display: flex;
-            line-height: 1;
-          }
-          
-          #label.bold {
-            font-weight: bold;
-          }
-          
-          #label, #name {
-            margin: 1% 0;
-          }
-
-          .text, #name {
-            font-size: 100%;
-          }
-          
-          .unit {
-            font-size: 75%;
-          }
-
-      </style>
-      <div class="container" id="container" on-click="${() => this._click()}">
-        <svg viewbox="0 0 200 200" id="svg">
-          <circle id="circle" cx="50%" cy="50%" r="45%"
-            fill$="${config.fill || 'rgba(255, 255, 255, .75)'}"
-            stroke$="${config.stroke_color || '#03a9f4'}"
-            stroke-dasharray$="${dashArray}"
-            stroke-width$="${config.stroke_width || 6}" 
-            transform="rotate(-90 100 100)"/>
-        </svg>
-        <span class="labelContainer">
-          ${config.name != null ? html`<span id="name">${config.name}</span>` : ''}
-          <span id="label" class$="${!!config.name ? 'bold' : ''}">
-            <span class="text">
-              ${config.attribute ? state.attributes[config.attribute] : state.state}
-            </span>
-            <span class="unit">
-              ${config.show_max
-                ? html`&nbsp/ ${config.attribute_max ? state.attributes[config.attribute_max] : config.max}`
-                : (config.units ? config.units : state.attributes.unit_of_measurement)}
-            </span>
-          </span>
-        </span>
-      </div>
-    `;
-  }
-
-  _createRoot() {
-    const shadow = this.attachShadow({ mode: 'open' })
-    if (!this.config.show_card) {
-      return shadow;
-    }
-    const card = document.createElement('ha-card');
-    shadow.appendChild(card);
-    return card;
-  }
-
-  _didRender() {
-    this.circle = this._root.querySelector('#circle');
-    if (this.config) {
-      this._updateConfig();
-    }
-  }
-
-  setConfig(config) {
-    if (!config.entity) {
-      throw Error('No entity defined')
-    }
-    this.config = config;
-    if (this.circle) {
-      this._updateConfig();
-    }
-  }
-
-  getCardSize() {
-    return 3;
-  }
-
-  _updateConfig() {
-    const container = this._root.querySelector('.labelContainer');
-    container.style.color = 'var(--primary-text-color)';
-
-    if (this.config.font_style) {
-      Object.keys(this.config.font_style).forEach((prop) => {
-        container.style.setProperty(prop, this.config.font_style[prop]);
-      });
-    }
-  }
-
-  set hass(hass) {
-    this.state = hass.states[this.config.entity];
-
-    if (this.config.attribute) {
-      if (!this.state.attributes[this.config.attribute] ||
-          isNaN(this.state.attributes[this.config.attribute])) {
-        console.error(`Attribute [${this.config.attribute}] is not a number`);
-        return;
-      }
-    } else {
-      if (!this.state || isNaN(this.state.state)) {
-        console.error(`State is not a number`);
-        return;
-      }
-    }
-
-    const state = this.config.attribute
-      ? this.state.attributes[this.config.attribute]
-      : this.state.state;
-    const r = 200 * .45;
-    const min = this.config.min || 0;
-    const max = this.config.attribute_max
-      ? this.state.attributes[this.config.attribute_max]
-      : (this.config.max || 100);
-    const val = this._calculateValueBetween(min, max, state);
-    const score = val * 2 * Math.PI * r;
-    const total = 10 * r;
-    this.dashArray = `${score} ${total}`;
-
-    let colorStops = {};
-    colorStops[min] = this.config.stroke_color || '#03a9f4';
-    if (this.config.color_stops) {
-      Object.keys(this.config.color_stops).forEach((key) => {
-        colorStops[key] = this.config.color_stops[key];
-      });
-    }
-
-    if (this.circle) {
-      const stroke = this._calculateStrokeColor(state, colorStops);
-      this.circle.setAttribute('stroke', stroke);
-    }
-  }
-
-  _click() {
-    this._fire('hass-more-info', { entityId: this.config.entity });
-  }
-
-  _calculateStrokeColor(state, stops) {
-    const sortedStops = Object.keys(stops).map(n => Number(n)).sort((a, b) => a - b);
-    let start, end, val;
-    const l = sortedStops.length;
-    if (state <= sortedStops[0]) {
-      return stops[sortedStops[0]];
-    } else if (state >= sortedStops[l - 1]) {
-      return stops[sortedStops[l - 1]];
-    } else {
-      for (let i = 0; i < l - 1; i++) {
-        const s1 = sortedStops[i];
-        const s2 = sortedStops[i + 1];
-        if (state >= s1 && state < s2) {
-          [start, end] = [stops[s1], stops[s2]];
-          if (!this.config.gradient) {
-            return start;
-          }
-          val = this._calculateValueBetween(s1, s2, state);
-          break;
-        }
-      }
-    }
-    return this._getGradientValue(start, end, val);
-  }
-
-  _calculateValueBetween(start, end, val) {
-    return (val - start) / (end - start);
-  }
-
-  _getGradientValue(colorA, colorB, val) {
-    const v1 = 1 - val;
-    const v2 = val;
-    const decA = this._hexColorToDecimal(colorA);
-    const decB = this._hexColorToDecimal(colorB);
-    const rDec = Math.floor((decA[0] * v1) + (decB[0] * v2));
-    const gDec = Math.floor((decA[1] * v1) + (decB[1] * v2));
-    const bDec = Math.floor((decA[2] * v1) + (decB[2] * v2));
-    const rHex = this._padZero(rDec.toString(16));
-    const gHex = this._padZero(gDec.toString(16));
-    const bHex = this._padZero(bDec.toString(16));
-    return `#${rHex}${gHex}${bHex}`;
-  }
-
-  _hexColorToDecimal(color) {
-    let c = color.substr(1);
-    if (c.length === 3) {
-      c = `${c[0]}${c[0]}${c[1]}${c[1]}${c[2]}${c[2]}`;
-    }
-
-    const [r, g, b] = c.match(/.{2}/g);
-    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
-  }
-
-  _padZero(val) {
-    if (val.length < 2) {
-      val = `0${val}`;
-    }
-    return val.substr(0, 2);
-  }
-
-  _fire(type, detail) {
-    const event = new Event(type, {
-      bubbles: true,
-      cancelable: false,
-      composed: true
-    });
-    event.detail = detail || {};
-    this.shadowRoot.dispatchEvent(event);
-    return event;
-  }
-}
-customElements.define('circle-sensor-card', CircleSensorCard);

config/www/surveillance-card.js

-import {
-  LitElement, html
-} from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
-
-import { repeat } from 'https://unpkg.com/lit-html@0.10.2/lib/repeat.js?module';
-
-class SurveillanceCard extends LitElement {
-  /* eslint-disable indent,object-curly-newline */
-  _render({ imageSources, currentCamera, lastMotion, updateInterval }) {
-    const accessToken = currentCamera && this._hass.states[currentCamera].attributes.access_token;
-    const template = html`
-    <style>
-      .container {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: stretch;
-        position: absolute;
-        background: #000;
-      }
-
-      .thumbs {
-        flex: 1;
-        overflow-y: auto;
-        position:relative;
-      }
-
-      .thumb > img {
-        width: 100%;
-        height: auto;
-        border: 1px solid var(--primary-color);
-      }
-
-      .thumb {
-        width: calc(100% - 9px);
-        padding: 2px 4px;
-        position: relative;
-      }
-
-      .thumb.motion > img {
-        border-color: var(--accent-color);
-      }
-
-      img {
-        display: block;
-      }
-
-      .mainImage {
-        flex: 3;
-        height: 100%;
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-      }
-
-      .mainImage > img {
-        display: inline-block;
-        max-width: 100%;
-        max-height: 100%;
-      }
-
-      .loading {
-        color: #FFF;
-        text-align: center;
-        font-size: 1.2rem;
-        margin-top: 3rem;
-      }
-    </style>
-    <div class="container">
-      <div class="thumbs">
-        ${imageSources ? repeat(this.cameras, (camera) => {
-          const thumbClass = lastMotion && lastMotion === camera.motion ? 'thumb motion' : 'thumb';
-          const source = this.imageSources[camera.entity];
-          return html`
-            <div class$="${thumbClass}" on-click="${() => { this.currentCamera = camera.entity; }}">
-              <img src="${source || ''}" />
-            </div>
-          `;
-        }) : html`<div class="loading">Loading Cameras...</div>`}
-      </div>
-      <div class="mainImage">
-        <img src$="${currentCamera ? `/api/camera_proxy_stream/${currentCamera}?token=${accessToken}&interval=${updateInterval}` : ''}" />
-      </div>
-    </div>
-    `;
-
-    return template;
-  }
-  /* eslint-enable indent,object-curly-newline */
-
-  static get properties() {
-    return {
-      _hass: Object,
-      cameras: Array,
-      currentCamera: String,
-      imageSources: Object,
-      lastMotion: String,
-      thumbInterval: Number,
-      updateInterval: Number
-    };
-  }
-
-  setConfig(config) {
-    this.cameras = config.cameras.map(c => ({
-      entity: c.entity,
-      motion: c.motion_entity
-    }));
-    this.currentCamera = this.cameras[0].entity;
-    this.thumbInterval = (config.thumb_interval || 10) * 1000;
-    this.updateInterval = config.update_interval || 1;
-    this.focusMotion = config.focus_motion !== false;
-  }
-
-  set hass(hass) {
-    this._hass = hass;
-
-    for (const cam of this.cameras) {
-      const { motion } = cam;
-      if ((motion in hass.states) && hass.states[motion].state === 'on') {
-        if (this.focusMotion && this.lastMotion !== motion) {
-          this.currentCamera = cam.entity;
-        }
-        this.lastMotion = motion;
-        return;
-      }
-    }
-    this.lastMotion = null;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.thumbUpdater = setInterval(() => this._updateThumbs(), this.thumbInterval);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.thumbUpdater);
-    this.imageSources = null;
-    this.currentCamera = '';
-  }
-
-  _firstRendered() {
-    this._updateThumbs();
-  }
-
-  async _updateCameraImageSrc(entity) {
-    try {
-      const { content_type: contentType, content } = await this._hass.callWS({
-        type: 'camera_thumbnail',
-        entity_id: entity,
-      });
-
-      return {
-        entityId: entity,
-        src: `data:${contentType};base64, ${content}`
-      };
-    } catch (err) {
-      return {
-        entityId: entity,
-        src: null
-      };
-    }
-  }
-
-  _updateThumbs() {
-    const sources = {};
-    const promises = this.cameras.map(camera => this._updateCameraImageSrc(camera.entity));
-    Promise.all(promises).then((vals) => {
-      this.cameras.forEach((camera) => {
-        const target = vals.find(val => val.entityId === camera.entity);
-        sources[camera.entity] = target.src;
-      });
-      this.imageSources = sources;
-    });
-  }
-}
-customElements.define('surveillance-card', SurveillanceCard);

docker-compose.yml

 services:
   homeassistant:
     container_name: home-assistant
-    image: homeassistant/raspberrypi3-homeassistant:0.92.2
+    image: homeassistant/raspberrypi3-homeassistant:0.95.4
     restart: always
     devices:
       - /dev/video0:/dev/video0
     volumes:
       - ./config:/config
+      - ./snapshots:/snapshots
       - ./keys:/root/.ssh/
       - /etc/localtime:/etc/localtime:ro
       - /dev/mem:/dev/mem