{"id":321,"date":"2021-06-04T09:52:26","date_gmt":"2021-06-04T08:52:26","guid":{"rendered":"https:\/\/www.davidezanatta.com\/blog\/?p=321"},"modified":"2021-12-07T17:00:03","modified_gmt":"2021-12-07T16:00:03","slug":"volkswagen-weconnect-id-in-home-assistant-and-custom-dashboard-for-id-3","status":"publish","type":"post","link":"https:\/\/www.davidezanatta.com\/blog\/volkswagen-weconnect-id-in-home-assistant-and-custom-dashboard-for-id-3\/?lang=en","title":{"rendered":"Volkswagen WeConnect ID in Home Assistant and Custom Dashboard for ID.3"},"content":{"rendered":"\n
\"Volkswagen<\/figure><\/div>\n\n

I recently bought a Volkswagen ID.3 and in this guide we will see how to import the data displayed by the Volkswagen WeConnect ID app into the Home Assistant and how to create sensors to record various data such as the battery charge status, the autonomy, the charging power in Watts (which at the moment it is not possible to obtain from the car infotainment) and much more.<\/p>\n\n

Before we start<\/h3>\n\n

In this guide I will assume that you have already installed Home Assistant (you can find a lot of guides online, the official one can be found here<\/a> [for example I have installed the Home Assistant operating system in a virtual machine, but it is also possible install it on a raspberry pi]).Then you need to install the “ha_vwid<\/em>” component available on the “Home Assistant Community Store” (even if it is called store, everything is free, don’t worry).To get it you will need to install the Home Assistant Community Store through this guide<\/a> and then you will need to install the “ha_vwid<\/em>” component following the guide in the Github repository<\/a> (or directly in HACS after adding the repository in custom repositories).<\/p>\n\n

Configuring the Volkswagen ID component in Home Assistant<\/h3>\n\n

The first thing to do to import WeConnect ID data into Home Assistant is to activate the component installed previously by entering your credentials during the configuration procedure. To do this, you must first enter the “Settings>Integrations<\/em>” section and then click on “Add Integration<\/em>“. Search and click on “Volkswagen ID<\/em>“. You should see a window like this:<\/p>\n\n

\"\"<\/figure><\/div>\n\n

Then enter your WeConnect ID credentials (username and password) and then enter the VIN code of the vehicle.<\/p>\n\n

ATTENTION<\/u><\/strong>: Before activating the integration in Home Assistant you have to connect the official Volkswagen WeConnect ID app to your vehicle).<\/p>\n\n

After restarting the Home Assistant server (go to “Settings>Server Controls>Server Management<\/em>” and click “Restart<\/em>“) a new entity will be available in “Settings>Entity<\/em>” and it will be called “State of Charge<\/em>” which will indicate the SOC of the car and it will show all other relevant data as attributes.<\/p>\n\n

\"\"<\/figure><\/div>\n\n

Create custom sensors to collect all WeConnect ID data in Home Assistant<\/h3>\n\n

To collect the data shown as attributes from the sensor automatically generated by the integration, it will be necessary to create a custom sensor in Home Assistant for each attribute. To do this we need to add the following code in the sensor section of the “configuration.yaml<\/em>” file of Home Assistant (if you don’t know what I’m talking about you can read this guide<\/a>) (instead of “[vin]”<\/em> you will have to write the VIN code of your vehicle):<\/p>\n\n

  #ID3 Charge state\n  - platform: template\n    sensors:\n      id3_charge_state:\n        friendly_name: \"State of Charge\"\n        unit_of_measurement: \"%\"\n        value_template: '{{ states.sensor.[vin]_soc.attributes.CurrentSOCPct }}'\n\n  #ID3 Charge Power\n  - platform: template\n    sensors:\n      id3_charge_power:\n        friendly_name: \"Charging Power\"\n        unit_of_measurement: \"kW\"\n        value_template: '{{ states.sensor.[vin]_soc.attributes.ChargePowerKW }}'\n\n  #ID3 Climatization State\n  - platform: template\n    sensors:\n      id3_climatization_state:\n        friendly_name: \"Climatization State\"\n        value_template: '{{ states.sensor.[vin]_soc.attributes.ClimatisationState }}'\n\n  #ID3 Range\n  - platform: template\n    sensors:\n      id3_range:\n        friendly_name: \"Range\"\n        unit_of_measurement: \"Km\"\n        value_template: '{{ states.sensor.[vin]_soc.attributes.CruisingRangeElectricKm }}'<\/code><\/pre>\n\n
After restarting the server again the sensors will be available in Home Assistant (you’ll see them inside “Settings>Entities<\/em>“).<\/p>\n\n
Customization of icons based on status<\/h3>\n\n
To make the graphical interface more attractive we need to make sure that the icons change according to the data imported from WeConnect ID in Home Assistant.<\/p>\n\n
To change the icons and the color of the icons based on the WeConnect ID data in Home Assistant I used the custom-ui component available on the “Home Assistant Community Store”. To get it you will need to install the component following the guide in the Github repository<\/a> (in my case it was also necessary to install this other component<\/a>to make everything work correctly).<\/p>\n\n
We will then have to insert inside “configuration.yaml<\/em>” under the “homeassistant<\/em>” section the name of the file, that will be inserted in the same folder as the configuration file, in which we’ll write the customizations (I use an external file to keep everything in order, but you could also write the customizations directly inside the configuration file). The result is the following (in my case I called the file “customizations.yaml<\/em>“):<\/p>\n\n
homeassistant:\n\n  customize: !include customizations.yaml<\/code><\/pre>\n\n
Then you’ll need to insert the following code in the “customize<\/em>” section of the Home Assistant configuration file (or in the dedicated file):<\/p>\n\n
sensor.id3_charge_state:\n  templates:\n    icon: >\n      if (state < 10) return 'mdi:battery-alert-variant-outline';\n      if (state < 15) return 'mdi:battery-10';\n      if (state < 25) return 'mdi:battery-20';\n      if (state < 35) return 'mdi:battery-30';\n      if (state < 45) return 'mdi:battery-40';\n      if (state < 55) return 'mdi:battery-50';\n      if (state < 65) return 'mdi:battery-60';\n      if (state < 75) return 'mdi:battery-70';\n      if (state < 85) return 'mdi:battery-80';\n      if (state < 95) return 'mdi:battery-90';\n      if (state >= 95) return 'mdi:battery';\n      else return 'mdi:alert-octagon';\n    icon_color: >\n      if (state < 10) return 'rgb(229,0,0)';\n      if (state < 15) return 'rgb(253,101,40)';\n      if (state < 25) return 'rgb(251,141,35)';\n      if (state < 35) return 'rgb(249,183,30)';\n      if (state < 45) return 'rgb(248,226,24)';\n      if (state < 55) return 'rgb(222,246,19)';\n      if (state < 65) return 'rgb(172,245,14)';\n      if (state < 75) return 'rgb(122,243,9)';\n      if (state < 85) return 'rgb(70,241,4)';\n      if (state < 95) return 'rgb(17,239,0)';\n      if (state >= 95) return 'rgb(0,255,0)';\n      else return 'rgb(255,0,0)';\n\nsensor.id3_charge_power:\n  templates:\n    icon: >\n      if (state > 11) return 'mdi:ev-plug-ccs2';\n      if (state > 0) return 'mdi:ev-plug-type2';\n      else return 'mdi:power-plug-off';\n    icon_color: >\n      if (state > 0) return 'rgb(0,255,0)';\n\nsensor.id3_climatization_state:\n  templates:\n    icon: >\n      if (state === \"ventilation\") return 'mdi:fan';\n      if (state === \"cooling\") return 'mdi:car-seat-cooler';\n      if (state === \"heating\") return 'mdi:car-seat-heater';\n      else return 'mdi:fan-off';\n    icon_color: >\n      if (state === \"cooling\") return 'rgb(62,219,240)';\n      if (state === \"heating\") return 'rgb(207,0,0)';<\/code><\/pre>\n\n
Finally restart Home Assistant to apply the changes.<\/p>\n\n
Creation of a custom dashboard<\/h3>\n\n
Since I’m also going to connect a wallbox to Home Assistant (I’ll write a guide about it) I decided to create a dashboard dedicated to car management (if you want you can skip this section and go to the next). To do this, simply select “edit dashboard<\/em>” from the Overview section of Home Assistant to enter the editor.<\/p>\n\n
\"\"<\/figure><\/div>\n\n
Then just press the “add<\/em>” button (the one with the “+” icon) and enter the necessary information as shown in the image below:<\/p>\n\n
\"\"<\/figure><\/div>\n\n
Finally press “save<\/em>” and move to the newly created board.<\/p>\n\n
Creation of a custom card for Volkswagen ID.3 (and all other vehicles of the ID series)<\/h3>\n\n
\"\"<\/figure><\/div>\n\n
Before creating a custom card it will be necessary, if you want to show an image of the car at the top of the card, to import an image into Home Assistant.<\/p>\n\n
To do this, first we need to import the image that we want to insert into Home Assistant via the Visual Studio Code add-on. You only need to create a folder in the “www<\/em>” folder (in my case I called it “myimages<\/em>“) and insert the images that we want to use in Home Assistant. The uploaded images will then be available within Home Assistant at the path “local\/myimages\/filename.extension<\/em>“.<\/p>\n\n
Here is the image I used (you can also use it as a template to create your own custom image):<\/p>\n\n
id3_business_makena<\/a>Download<\/a><\/div>\n\n
Finally, it will be sufficient to create a new card. To do this, simply click on “Add Card<\/em>” (if the button is not visible, look at the previous section to understand how to open the dashboard editor). To use the same card I use, just select the “Manual” option and copy the following code, then press save (I assume that the image loaded at the beginning of the guide is saved with the same name and in the same folder as in my server):<\/p>\n\n
type: entities\nentities:\n  - entity: sensor.id3_charge_state\n    name: Stato di Carica\n  - entity: sensor.id3_range\n    icon: 'mdi:road-variant'\n    name: Autonomia\n  - entity: sensor.id3_charge_power\n    name: Potenza di Ricarica\n  - entity: sensor.id3_climatization_state\n    name: Stato Clima\nheader:\n  type: picture\n  image: local\/myimages\/id3_business.png\n  tap_action:\n    action: none\n  hold_action:\n    action: none\ntitle: ID.3\nshow_header_toggle: false\nstate_color: true<\/code><\/pre>\n\n
Alternatively, you can also create the card using the visual editor (you can also visually modify the card I created by copying the code, saving it and pressing the “Show Visual Editor<\/em>” button).<\/p>\n\n
Conclusion<\/h3>\n\n
In this guide we have seen how to get data from WeConnect ID to use in Home Assistant and how to create a custom dashboard to view the status of the car. With this data we could create interesting automations such as creating more complex charging modes in combination with a wallbox connected to Home Assistant.<\/p>\n\n
If you liked this guide, follow the page on social networks (click on the icons at the bottom of the page) to be informed about all the new articles I will write.<\/p>\n","protected":false},"excerpt":{"rendered":"
I recently bought a Volkswagen ID.3 and in this guide we will see how to import the data displayed by the Volkswagen WeConnect ID app into the Home Assistant and how to create sensors to record various data such as the battery charge status, the autonomy, the charging power in Watts (which at the moment it is not possible to obtain from the car infotainment) and much more. Before we start In this guide I will assume that you have … <\/p>\n
Read More<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[25],"tags":[32,33,34,35],"_links":{"self":[{"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/posts\/321"}],"collection":[{"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":9,"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/posts\/321\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/posts\/321\/revisions\/375"}],"wp:attachment":[{"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/media?parent=321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/categories?post=321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.davidezanatta.com\/blog\/wp-json\/wp\/v2\/tags?post=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}