Lovelace: Volvo on Call card

Hi, anyone here who can write a nice looking Volvo on call lovelacecard?

This is my setup, i have hacked Xiaomi vacuum cleaner card. But it leaves little room to customize any further at least with my limited knowledge.

57

1 Like

Hej, I’m also looking for a Volvo oncall card without success…
Would it be possible to share your modified vaccum js file? It looks like a good start!

1 Like

I´m jusing the picture element card. So no js needed :slight_smile: Below is my code, relpace XXXX with your entity name, i have attached the picture aswell so you can copy the pictures size :slight_smile:

elements:
  - icon: 'mdi:radiator'
    style:
      '--paper-item-icon-active-color': green
      '--paper-item-icon-color': lightgreen
      left: 84%
      top: 92%
    tap_action:
      action: toggle
      service: switch.toggle
      service_data:
        entity_id: switch.XXXX_heater
    type: icon
  - icon: 'mdi:engine'
    style:
      '--paper-item-icon-active-color': green
      '--paper-item-icon-color': lightgreen
      left: 65%
      top: 92%
    tap_action:
      action: toggle
      service: switch.toggle
      service_data:
        entity_id: switch.XXXX_engine
    type: icon
  - icon: 'mdi:lock'
    style:
      '--paper-item-icon-color': 'rgb(20, 154, 210)'
      left: 41%
      top: 92%
    tap_action:
      action: toggle
      service: lock.lock
      service_data:
        entity_id: lock.XXXX_door_lock
    type: icon
  - icon: 'mdi:lock-open'
    style:
      '--paper-item-icon-color': 'rgb(34, 154, 210)'
      left: 18%
      top: 93%
    tap_action:
      action: toggle
      service: lock.unlock
      service_data:
        entity_id: lock.XXXX_door_lock
    type: icon
  - entity: sensor.XXXX_odometer
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      left: 1%
      opacity: 0.8
      pointer-events: none
      text-shadow: 1px 1px black
      top: 10%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.XXXX_fuel_consumption
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      opacity: 0.8
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 10%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.XXXX_fuel_amount
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      left: 1%
      opacity: 0.8
      pointer-events: none
      text-shadow: 1px 1px black
      top: 30%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.XXXX_fuel_level
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      left: 1%
      opacity: 0.8
      pointer-events: none
      text-shadow: 1px 1px black
      top: 50%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: device_tracker.volvo_XXXX
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      left: 1%
      opacity: 0.8
      pointer-events: none
      text-shadow: 1px 1px black
      top: 69%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: binary_sensor.XXXX_doors
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      opacity: 0.8
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 30%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: binary_sensor.XXXX_engine
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      opacity: 0.8
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 50%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: binary_sensor.XXXX_windows
    style:
      background-color: 'rgb(54, 65, 78)'
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      opacity: 0.8
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 69%
      transform: 'translate(0%,-50%)'
    type: state-label
image: /local/V602019.png
type: picture-elements

Here is my Volvo card (mobile view). Thanks for the inspiration!

1 Like

Nice job!! How do you show the adress? Looks great :grinning:

Thanks! I use the Google geocode integration in HACS


As long as you don’t call the api every second it is free of charge.

Detta var snyggt. Du har inte lust att dela hur du fick till det såhär? :slight_smile:

Tack :slightly_smiling_face:
Om det är själva Volvo kortet du tänker på så är det ett picture element card på liknande sätt som Supersonical i sitt exempel här ovan. Jag kan dela min kod när jag får lite tid vid datorn kommande dagarna. Jag har gjort om en del i layouten av kortet men principen är den samma.

IMG_20210405_195111|230x500, 75%

Hallå

Om du har lust att dela koden vore det uppskattat! :slight_smile:

Here’s my code for the Volvo Card as requested :slight_smile: @Helitrox

  card:  
    type: picture-elements
    image: /local/img/v60_v5.png
    elements:
      - type: state-label
        entity: sensor.car_range
        prefix: 'Räckvidd: '
        style:
          top: 5%
          right: 50px
          transform: none

      - type: state-label
        entity: sensor.car_fuel_level
        prefix: (
        suffix: )
        style:
          top: 5%
          right: 5px
          transform: none
                    
      - type: state-label
        entity: sensor.car_trip_meter_2
        prefix: 'Senast tur: '
        style:
          top: 28%
          right: 5px
          transform: none

      - type: state-label
        entity: sensor.car_odometer
        prefix: 'Tot. kört: '
        style:
          top: 48%
          right: 5px
          transform: none

      - type: state-label
        entity: sensor.volvo_v60
        style:
          top: 70%
          right: 5px
          transform: none

      - type: state-icon
        entity: lock.car_door_lock
        style:
          top: 82%
          left: 8%
      - type: state-icon
        entity: switch.car_heater
        style:
          top: 82%
          left: 16%

      - type: state-icon
        entity: binary_sensor.car_engine
        style:
          top: 82%
          left: 24%

Ah men toppen. Fint det. Stort tack!

Do you use this?

Yes I do, it works most of the time… :slightly_smiling_face:

I have a blackout…
How do I install volvooncall integration? I can’t add a custom repositories from GitHub for some reason.
I have added to configuration.yaml
volvooncall:
username:
password:
resources:
- lock
but I haven’t installed anything so…

Can I manually add .py-files to make it work? And if so, in what folder?

Tjena igen

Har nu fått lite tid att sitta och leka lite med detta. Får rätt på allt, förutom att bilden jag valt på bilen tar lite väl stor plats, lite som att den skalas ut för att fylla hela kortet. Detta gör att texten inte syns. Vad är det för format, alltså gällande storlek, på bilden du använder? Känns som att HA skalar upp bilden, oavsett om jag gör den mindre i PS tex?

Hej! Ja kommer tyvärr inte ihåg om jag hade samma problem men jag ser att jag skapade flera versioner av bilden innan jag blev nöjd… Här är iaf de två bilderna jag har använt (690x283) och (424x142).
Din bild är kanske för kvadratisk? Du kan ju alltid testa med mina och se om du får ett annat resultat. Posta annars gärna en print screen så är det lite lättare att förstå problemet.


v60_v5

Volvo on call is an official integration. Those entries you mention in the yaml file and a restart of HA should be enough. What does your log say? If you do not see any Volvo on call errors there should be a new lock entity. But I suggest you skip the resource line so you get all available sensors instead.

Tjena

Det funkade när jag provade med din bild. Jag får köra den som mall för formatet. Tack för det :slight_smile: