Lovelace: Collasping PS4 Controller Card with Icons

Share your Projects! Dashboards & Frontend
1

image

This is my collapsing PS4 Controller Lovelace setup. The controller buttons only show when the PS4 is on.

You’ll need to install the Mini Media Player and Button Card plugins from HACS and have the PS4 integration configured.

Lovelace UI Card Code (add as Manual card or Vertical Stack)

type: vertical-stack
cards:
  - artwork: cover
    entity: media_player.playstation_4
    group: false
    hide:
      controls: true
      power_state: true
      source: true
      volume: true
    info: short
    source: icon
    type: 'custom:mini-media-player'
  - card:
      cards:
        - cards:
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-share'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: share
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-up'
              show_icon: true
              show_name: false
              style:
                height: 40px
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: up
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-options'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: option
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
          type: horizontal-stack
        - cards:
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-left'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: left
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-x'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: enter
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-right'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: right
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
          type: horizontal-stack
        - cards:
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: ps
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-down'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: down
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
            - aspect_ratio: 3/1
              entity: media_player.playstation_4
              hold_action:
                action: more-info
              icon: 'custom:ps4-o'
              show_icon: true
              show_name: false
              tap_action:
                action: call-service
                service: ps4.send_command
                service_data:
                  command: back
                  entity_id: media_player.playstation_4
              type: 'custom:button-card'
          type: horizontal-stack
      type: vertical-stack
    conditions:
      - entity: media_player.playstation_4
        state_not: standby
    type: conditional

To get the custom icons, you make a file called custom_icons.js in your /config/www/ folder and put the following code into it. Then save and restart Home Assistant.

async function getIcon(name) {

  if (name === "ps4-up") {
    return {
      path: "M5.7,14.384,11.9984,20,18.3,14.384V5.9937C18.3,4.8328,14.4112,4,12,4c-2.4128,0-6.3.8328-6.3,1.9937Z",
    };
  }

  if (name === "ps4-down") {
    return {
      path: "M18.3,9.616,12.0016,4,5.7,9.616v8.3903C5.7,19.1672,9.5888,20,12,20c2.4128,0,6.3-.8328,6.3-1.9937Z",
    };
  }

  if (name === "ps4-left") {
    return {
      path: "M14.384,18.3,20,12.0016,14.384,5.7H5.9937C4.8328,5.7,4,9.5888,4,12c0,2.4128.8328,6.3,1.9937,6.3Z",
    };
  }

  if (name === "ps4-right") {
    return {
      path: "M9.616,5.7,4,11.9984,9.616,18.3h8.3903C19.1672,18.3,20,14.4112,20,12c0-2.4128-.8328-6.3-1.9937-6.3Z",
    };
  }

  if (name === "ps4-x") {
    return {
      path: "M2,12A10,10,0,1,1,12,22,9.97863,9.97863,0,0,1,2,12ZM18.0109,7.5736,16.4274,5.9901,12.001,10.4165,7.5746,5.9901,5.992,7.5736,10.4195,12,5.993,16.4264l1.5825,1.5825,4.4265-4.4264,4.4264,4.4264,1.5835-1.5825L13.5855,12Z",
    };
  }

  if (name === "ps4-o") {
    return {
      path: "M2,12A10,10,0,1,1,12,22,9.97812,9.97812,0,0,1,2,12ZM12,7.179A4.821,4.821,0,1,1,7.179,12,4.82686,4.82686,0,0,1,12,7.179m0-1.8843a6.7063,6.7063,0,1,0,6.7073,6.7063A6.70641,6.70641,0,0,0,12,5.2947Z",
      };
  }

  if (name === "ps4-options") {
    return {
      path: "M17.71674,10.32349v8.032c0,2.77289-2.55939,5.01947-5.71576,5.01947a5.95825,5.95825,0,0,1-4.74054-2.21442,4.58,4.58,0,0,1-.97718-2.8078V10.32349a4.52465,4.52465,0,0,1,.70087-2.40784A5.55025,5.55025,0,0,1,9.90948,5.65521,6.38682,6.38682,0,0,1,11.99915,5.304l.00183.00006V5.304C15.15735,5.304,17.71674,7.55151,17.71674,10.32349ZM4.68265,4.116a2.0508,2.0508,0,0,0,.4589-1.454,2.78746,2.78746,0,0,0-.1179-.8552,1.8459,1.8459,0,0,0-.3442-.6426,1.43388,1.43388,0,0,0-.558-.4015A1.95249,1.95249,0,0,0,3.36005.625a1.87079,1.87079,0,0,0-.7739.1481,1.47876,1.47876,0,0,0-.5622.3984,1.46062,1.46062,0,0,0-.3484.6259,3.33987,3.33987,0,0,0-.1043.848,2.09135,2.09135,0,0,0,.4642,1.4539,1.70589,1.70589,0,0,0,1.3246.5049A1.72724,1.72724,0,0,0,4.68265,4.116Zm-1.3236-.1794A.945.945,0,0,1,2.605,3.631a1.45533,1.45533,0,0,1-.2671-.9679,1.62692,1.62692,0,0,1,.265-1.0045.89756.89756,0,0,1,.7562-.3421.88839.88839,0,0,1,.7541.3421,1.65564,1.65564,0,0,1,.2566,1.0045,1.82671,1.82671,0,0,1-.0772.5716,1.12339,1.12339,0,0,1-.2159.3963.88748.88748,0,0,1-.3234.2295,1.01216,1.01216,0,0,1-.3932.0761Zm1.9838.5476h.7802V3.1231h.8657a1.31436,1.31436,0,0,0,.4934-.0877,1.11486,1.11486,0,0,0,.3755-.2419.92416.92416,0,0,0,.2399-.3693,1.37554,1.37554,0,0,0,.0855-.4693,1.32592,1.32592,0,0,0-.0866-.4715,1.13311,1.13311,0,0,0-.2399-.3849,1.07075,1.07075,0,0,0-.3755-.2586,1.2789,1.2789,0,0,0-.4933-.0918H5.34185V4.4748Zm1.5208-1.9963h-.7302V1.3927h.7302a.655.655,0,0,1,.485.1512.531.531,0,0,1,.1491.388.55575.55575,0,0,1-.1481.4026.65337.65337,0,0,1-.485.1544Zm2.473,1.9879h.7802V1.3988h1.1296V.748H8.21535v.6488h1.1213v3.079Zm2.8454.0083V.748h-.7802V4.4841Zm1.9974.1408a1.72174,1.72174,0,0,0,1.3215-.4881,2.0505,2.0505,0,0,0,.4589-1.454,2.923,2.923,0,0,0-.1178-.8553A1.77965,1.77965,0,0,0,15.5,1.185a1.43349,1.43349,0,0,0-.5581-.4015,1.95032,1.95032,0,0,0-.7614-.1377,1.98971,1.98971,0,0,0-.7614.1377,1.62842,1.62842,0,0,0-.5632.3984,1.612,1.612,0,0,0-.3463.6258,2.80932,2.80932,0,0,0-.1179.848,2.08152,2.08152,0,0,0,.4621,1.454,1.70939,1.70939,0,0,0,1.3246.5048Zm-.0021-.6779a.94535.94535,0,0,1-.7541-.3056,1.45678,1.45678,0,0,1-.265-.968,1.62768,1.62768,0,0,1,.2629-1.0044.896.896,0,0,1,.7562-.3421.88688.88688,0,0,1,.7541.3421,1.65425,1.65425,0,0,1,.2587,1.0044,1.8269,1.8269,0,0,1-.0793.5716,1.12388,1.12388,0,0,1-.2159.3964.88686.88686,0,0,1-.3233.2294,1.00559,1.00559,0,0,1-.3933.0762Zm4.3255.5371h.7165V.748h-.7301V3.1438L17.00815.748h-.8344V4.4852h.7217V1.9819l1.5959,2.5033Zm3.0905-2.6264h.7301a1.27833,1.27833,0,0,0-.1179-.5028,1.13765,1.13765,0,0,0-.3024-.388,1.38733,1.38733,0,0,0-.4621-.2461,2.25517,2.25517,0,0,0-1.2308-.0021,1.34534,1.34534,0,0,0-.4172.2357.91976.91976,0,0,0-.2587.3505,1.1261,1.1261,0,0,0-.0855.4318,1.1563,1.1563,0,0,0,.096.5006.7765.7765,0,0,0,.2993.3338,2.13746,2.13746,0,0,0,.5215.2295l.7301.1825a1.6579,1.6579,0,0,1,.2921.0866.59319.59319,0,0,1,.1773.1095.25685.25685,0,0,1,.0855.1377.62444.62444,0,0,1,.024.1669.42146.42146,0,0,1-.1919.365.97145.97145,0,0,1-.5632.1356.9407.9407,0,0,1-.5685-.1669.53443.53443,0,0,1-.2326-.4516h-.7541a1.1632,1.1632,0,0,0,.4318.9314,1.98822,1.98822,0,0,0,1.2245.315,2.28423,2.28423,0,0,0,.5424-.0761,1.30066,1.30066,0,0,0,.4485-.2086.9106.9106,0,0,0,.3129-.3505,1.10418,1.10418,0,0,0,.1043-.4777,1.47077,1.47077,0,0,0-.0458-.3807.91149.91149,0,0,0-.12-.2691.72225.72225,0,0,0-.1857-.1877,1.218,1.218,0,0,0-.2326-.1273,3.60994,3.60994,0,0,0-.4829-.1678l-.6237-.1565a1.13539,1.13539,0,0,1-.4402-.1825.334.334,0,0,1-.1356-.2712c0-.3025.2201-.4548.6624-.4548a.93951.93951,0,0,1,.5382.1409.54957.54957,0,0,1,.2086.4172Z",
    };
  }

  if (name === "ps4-share") {
    return {
      path: "M5.4313,1.8729a.63124.63124,0,0,0-.2334-.4793.97961.97961,0,0,0-.6041-.1574c-.4956,0-.7416.17-.7416.5092a.37366.37366,0,0,0,.1537.3048,1.32924,1.32924,0,0,0,.4947.2053l.6991.1763c.1972.0543.3772.1176.5427.1809a1.34168,1.34168,0,0,1,.2596.1429.771.771,0,0,1,.208.2107,1.01008,1.01008,0,0,1,.1356.3021,1.61789,1.61789,0,0,1,.0507.4287,1.09733,1.09733,0,0,1-.1266.5354,1.22491,1.22491,0,0,1-.3401.3934,1.66875,1.66875,0,0,1-.5047.2442,1.94291,1.94291,0,0,1-.6104.085,2.177,2.177,0,0,1-1.3729-.3617A1.27106,1.27106,0,0,1,2.9559,3.575h.8438a.59785.59785,0,0,0,.2713.5065,1.08313,1.08313,0,0,0,.6395.1854,1.09185,1.09185,0,0,0,.6303-.1502.47734.47734,0,0,0,.2135-.4097.67652.67652,0,0,0-.0254-.1863.33787.33787,0,0,0-.0967-.1537.697.697,0,0,0-.199-.1221,1.77387,1.77387,0,0,0-.3274-.0977l-.8375-.2053a2.01106,2.01106,0,0,1-.5752-.2578.98465.98465,0,0,1-.3346-.3753A1.27125,1.27125,0,0,1,3.05,1.7481a1.23069,1.23069,0,0,1,.094-.4857A1.04062,1.04062,0,0,1,3.4334.869,1.44981,1.44981,0,0,1,3.9155.6049,2.07712,2.07712,0,0,1,4.5838.5,2.20607,2.20607,0,0,1,5.264.5977a1.5703,1.5703,0,0,1,.52.2767,1.27311,1.27311,0,0,1,.3364.4341,1.45427,1.45427,0,0,1,.1321.5644H5.4313ZM9.0851,4.8213V2.9437H7.4526V4.8204H6.5781V.6384h.8745V2.212H9.0851V.6384h.8818v4.182H9.0842Zm4.0608,0-.2634-.8628H11.3398l-.2967.8628H10.117L11.6093.6393h1.0129l1.4742,4.182h-.9505Zm-1.0392-3.236h-.0163l-.5426,1.6532h1.0645l-.5246-1.6623Zm4.5908,3.2441V3.7441a.57279.57279,0,0,0-.1375-.4314.76016.76016,0,0,0-.5155-.1293H15.113V4.8113h-.852V.6384h2.1236a1.46432,1.46432,0,0,1,.5263.0904,1.18056,1.18056,0,0,1,.4052.2532,1.08557,1.08557,0,0,1,.2605.3844,1.28374,1.28374,0,0,1,.0931.4812,1.11623,1.11623,0,0,1-.1627.6014.912.912,0,0,1-.4631.369.69179.69179,0,0,1,.3943.2713,1.03034,1.03034,0,0,1,.1176.5481V4.8131h-.8592ZM15.1112,1.3628V2.477h1.0943a.65418.65418,0,0,0,.4974-.1573.56136.56136,0,0,0,.1447-.3962.58646.58646,0,0,0-.1429-.4033.6033.6033,0,0,0-.4684-.1574Zm2.7675,3.4576V.6384h3.0731v.7307h-2.232v.9044h2.0485v.7371H18.7198V4.0959h2.3243v.7434H17.8787ZM12.001,5.429v.00006L11.99918,5.429a6.38585,6.38585,0,0,0-2.1283.36358A5.55121,5.55121,0,0,0,7.01273,7.99927a4.52793,4.52793,0,0,0-.7295,2.44922v8.02929A4.58,4.58,0,0,0,7.26077,21.286,5.95816,5.95816,0,0,0,12.001,23.5c3.15643,0,5.71582-2.24658,5.71582-5.01947v-8.032C17.71677,7.67651,15.15738,5.429,12.001,5.429Z",
    };
  }

}

window.customIconsets = window.customIconsets || {};
window.customIconsets["custom"] = getIcon;

Then you lastly have to add /local/custom_icons.js as a Javascript Module to your Lovelace Resources.

If you have any questions, let me know!

6 Likes
2

Hello, I ave this errors? Could you help me?

Custom element doesn’t exist: button-card.
aspect_ratio: 3/1
entity: media_player.playstation_4
hold_action:
action: more-info
icon: ‘custom:ps4-share’
show_icon: true
show_name: false
tap_action:
action: call-service
service: ps4.send_command
service_data:
command: share
entity_id: media_player.playstation_4
type: 'custom:but

on any button :frowning:

3

It sounds like you don’t have the custom button-card plugin installed. If you have HACS installed, search for “Button Card” and install that and then try. If you already have the button card plugin installed, then try to remove the first dash in the UI card code.

4

Hello,

thank you, you are right. It is better, but right now only PS button works. Nothing else don’t work.
Can you help me with that?
I copied your code with card.

Selection_014

5

Now you’re just missing the custom icons. Did you create a custom_icons.js file in your /config/www/ folder? If you have that code in place and you added /local/custom_icons.js as a Javascript Module to your Lovelace Resources then the custom icons should be there. It could also be a browser caching issue. Try emptying your cache and seeing if they load then.

6

The same, don´t appear the icons, y make the steps, copy the card and the file .js in the /config/www/ folder, add the resource in lovelance, but don´t see the icons in the browser (firefox, chrome) and don´t see icons in the app too.

7

That means your Lovelace still isn’t seeing the resource. The PS logo is an MDI icon so that is why that one shows. Make sure your resource is linked to the file you made. If you made the name different somewhere along the line, that would cause it not to work.

8

I’ve been scratching my head for hours on this and just can’t get it to work, so I’ll admit defeat and ask for help. Anyone got any ideas?

Here’s the location of the file:

location
location881×265 10.3 KB

To create the file I opened notepad, copy and pasted the text in, and then renamed it. Here’s the contents:

async function getIcon(name) {

  if (name === "ps4-up") {
    return {
      path: "M5.7,14.384,11.9984,20,18.3,14.384V5.9937C18.3,4.8328,14.4112,4,12,4c-2.4128,0-6.3.8328-6.3,1.9937Z",
    };
  }

  if (name === "ps4-down") {
    return {
      path: "M18.3,9.616,12.0016,4,5.7,9.616v8.3903C5.7,19.1672,9.5888,20,12,20c2.4128,0,6.3-.8328,6.3-1.9937Z",
    };
  }

  if (name === "ps4-left") {
    return {
      path: "M14.384,18.3,20,12.0016,14.384,5.7H5.9937C4.8328,5.7,4,9.5888,4,12c0,2.4128.8328,6.3,1.9937,6.3Z",
    };
  }

  if (name === "ps4-right") {
    return {
      path: "M9.616,5.7,4,11.9984,9.616,18.3h8.3903C19.1672,18.3,20,14.4112,20,12c0-2.4128-.8328-6.3-1.9937-6.3Z",
    };
  }

  if (name === "ps4-x") {
    return {
      path: "M2,12A10,10,0,1,1,12,22,9.97863,9.97863,0,0,1,2,12ZM18.0109,7.5736,16.4274,5.9901,12.001,10.4165,7.5746,5.9901,5.992,7.5736,10.4195,12,5.993,16.4264l1.5825,1.5825,4.4265-4.4264,4.4264,4.4264,1.5835-1.5825L13.5855,12Z",
    };
  }

  if (name === "ps4-o") {
    return {
      path: "M2,12A10,10,0,1,1,12,22,9.97812,9.97812,0,0,1,2,12ZM12,7.179A4.821,4.821,0,1,1,7.179,12,4.82686,4.82686,0,0,1,12,7.179m0-1.8843a6.7063,6.7063,0,1,0,6.7073,6.7063A6.70641,6.70641,0,0,0,12,5.2947Z",
      };
  }

  if (name === "ps4-options") {
    return {
      path: "M17.71674,10.32349v8.032c0,2.77289-2.55939,5.01947-5.71576,5.01947a5.95825,5.95825,0,0,1-4.74054-2.21442,4.58,4.58,0,0,1-.97718-2.8078V10.32349a4.52465,4.52465,0,0,1,.70087-2.40784A5.55025,5.55025,0,0,1,9.90948,5.65521,6.38682,6.38682,0,0,1,11.99915,5.304l.00183.00006V5.304C15.15735,5.304,17.71674,7.55151,17.71674,10.32349ZM4.68265,4.116a2.0508,2.0508,0,0,0,.4589-1.454,2.78746,2.78746,0,0,0-.1179-.8552,1.8459,1.8459,0,0,0-.3442-.6426,1.43388,1.43388,0,0,0-.558-.4015A1.95249,1.95249,0,0,0,3.36005.625a1.87079,1.87079,0,0,0-.7739.1481,1.47876,1.47876,0,0,0-.5622.3984,1.46062,1.46062,0,0,0-.3484.6259,3.33987,3.33987,0,0,0-.1043.848,2.09135,2.09135,0,0,0,.4642,1.4539,1.70589,1.70589,0,0,0,1.3246.5049A1.72724,1.72724,0,0,0,4.68265,4.116Zm-1.3236-.1794A.945.945,0,0,1,2.605,3.631a1.45533,1.45533,0,0,1-.2671-.9679,1.62692,1.62692,0,0,1,.265-1.0045.89756.89756,0,0,1,.7562-.3421.88839.88839,0,0,1,.7541.3421,1.65564,1.65564,0,0,1,.2566,1.0045,1.82671,1.82671,0,0,1-.0772.5716,1.12339,1.12339,0,0,1-.2159.3963.88748.88748,0,0,1-.3234.2295,1.01216,1.01216,0,0,1-.3932.0761Zm1.9838.5476h.7802V3.1231h.8657a1.31436,1.31436,0,0,0,.4934-.0877,1.11486,1.11486,0,0,0,.3755-.2419.92416.92416,0,0,0,.2399-.3693,1.37554,1.37554,0,0,0,.0855-.4693,1.32592,1.32592,0,0,0-.0866-.4715,1.13311,1.13311,0,0,0-.2399-.3849,1.07075,1.07075,0,0,0-.3755-.2586,1.2789,1.2789,0,0,0-.4933-.0918H5.34185V4.4748Zm1.5208-1.9963h-.7302V1.3927h.7302a.655.655,0,0,1,.485.1512.531.531,0,0,1,.1491.388.55575.55575,0,0,1-.1481.4026.65337.65337,0,0,1-.485.1544Zm2.473,1.9879h.7802V1.3988h1.1296V.748H8.21535v.6488h1.1213v3.079Zm2.8454.0083V.748h-.7802V4.4841Zm1.9974.1408a1.72174,1.72174,0,0,0,1.3215-.4881,2.0505,2.0505,0,0,0,.4589-1.454,2.923,2.923,0,0,0-.1178-.8553A1.77965,1.77965,0,0,0,15.5,1.185a1.43349,1.43349,0,0,0-.5581-.4015,1.95032,1.95032,0,0,0-.7614-.1377,1.98971,1.98971,0,0,0-.7614.1377,1.62842,1.62842,0,0,0-.5632.3984,1.612,1.612,0,0,0-.3463.6258,2.80932,2.80932,0,0,0-.1179.848,2.08152,2.08152,0,0,0,.4621,1.454,1.70939,1.70939,0,0,0,1.3246.5048Zm-.0021-.6779a.94535.94535,0,0,1-.7541-.3056,1.45678,1.45678,0,0,1-.265-.968,1.62768,1.62768,0,0,1,.2629-1.0044.896.896,0,0,1,.7562-.3421.88688.88688,0,0,1,.7541.3421,1.65425,1.65425,0,0,1,.2587,1.0044,1.8269,1.8269,0,0,1-.0793.5716,1.12388,1.12388,0,0,1-.2159.3964.88686.88686,0,0,1-.3233.2294,1.00559,1.00559,0,0,1-.3933.0762Zm4.3255.5371h.7165V.748h-.7301V3.1438L17.00815.748h-.8344V4.4852h.7217V1.9819l1.5959,2.5033Zm3.0905-2.6264h.7301a1.27833,1.27833,0,0,0-.1179-.5028,1.13765,1.13765,0,0,0-.3024-.388,1.38733,1.38733,0,0,0-.4621-.2461,2.25517,2.25517,0,0,0-1.2308-.0021,1.34534,1.34534,0,0,0-.4172.2357.91976.91976,0,0,0-.2587.3505,1.1261,1.1261,0,0,0-.0855.4318,1.1563,1.1563,0,0,0,.096.5006.7765.7765,0,0,0,.2993.3338,2.13746,2.13746,0,0,0,.5215.2295l.7301.1825a1.6579,1.6579,0,0,1,.2921.0866.59319.59319,0,0,1,.1773.1095.25685.25685,0,0,1,.0855.1377.62444.62444,0,0,1,.024.1669.42146.42146,0,0,1-.1919.365.97145.97145,0,0,1-.5632.1356.9407.9407,0,0,1-.5685-.1669.53443.53443,0,0,1-.2326-.4516h-.7541a1.1632,1.1632,0,0,0,.4318.9314,1.98822,1.98822,0,0,0,1.2245.315,2.28423,2.28423,0,0,0,.5424-.0761,1.30066,1.30066,0,0,0,.4485-.2086.9106.9106,0,0,0,.3129-.3505,1.10418,1.10418,0,0,0,.1043-.4777,1.47077,1.47077,0,0,0-.0458-.3807.91149.91149,0,0,0-.12-.2691.72225.72225,0,0,0-.1857-.1877,1.218,1.218,0,0,0-.2326-.1273,3.60994,3.60994,0,0,0-.4829-.1678l-.6237-.1565a1.13539,1.13539,0,0,1-.4402-.1825.334.334,0,0,1-.1356-.2712c0-.3025.2201-.4548.6624-.4548a.93951.93951,0,0,1,.5382.1409.54957.54957,0,0,1,.2086.4172Z",
    };
  }

  if (name === "ps4-share") {
    return {
      path: "M5.4313,1.8729a.63124.63124,0,0,0-.2334-.4793.97961.97961,0,0,0-.6041-.1574c-.4956,0-.7416.17-.7416.5092a.37366.37366,0,0,0,.1537.3048,1.32924,1.32924,0,0,0,.4947.2053l.6991.1763c.1972.0543.3772.1176.5427.1809a1.34168,1.34168,0,0,1,.2596.1429.771.771,0,0,1,.208.2107,1.01008,1.01008,0,0,1,.1356.3021,1.61789,1.61789,0,0,1,.0507.4287,1.09733,1.09733,0,0,1-.1266.5354,1.22491,1.22491,0,0,1-.3401.3934,1.66875,1.66875,0,0,1-.5047.2442,1.94291,1.94291,0,0,1-.6104.085,2.177,2.177,0,0,1-1.3729-.3617A1.27106,1.27106,0,0,1,2.9559,3.575h.8438a.59785.59785,0,0,0,.2713.5065,1.08313,1.08313,0,0,0,.6395.1854,1.09185,1.09185,0,0,0,.6303-.1502.47734.47734,0,0,0,.2135-.4097.67652.67652,0,0,0-.0254-.1863.33787.33787,0,0,0-.0967-.1537.697.697,0,0,0-.199-.1221,1.77387,1.77387,0,0,0-.3274-.0977l-.8375-.2053a2.01106,2.01106,0,0,1-.5752-.2578.98465.98465,0,0,1-.3346-.3753A1.27125,1.27125,0,0,1,3.05,1.7481a1.23069,1.23069,0,0,1,.094-.4857A1.04062,1.04062,0,0,1,3.4334.869,1.44981,1.44981,0,0,1,3.9155.6049,2.07712,2.07712,0,0,1,4.5838.5,2.20607,2.20607,0,0,1,5.264.5977a1.5703,1.5703,0,0,1,.52.2767,1.27311,1.27311,0,0,1,.3364.4341,1.45427,1.45427,0,0,1,.1321.5644H5.4313ZM9.0851,4.8213V2.9437H7.4526V4.8204H6.5781V.6384h.8745V2.212H9.0851V.6384h.8818v4.182H9.0842Zm4.0608,0-.2634-.8628H11.3398l-.2967.8628H10.117L11.6093.6393h1.0129l1.4742,4.182h-.9505Zm-1.0392-3.236h-.0163l-.5426,1.6532h1.0645l-.5246-1.6623Zm4.5908,3.2441V3.7441a.57279.57279,0,0,0-.1375-.4314.76016.76016,0,0,0-.5155-.1293H15.113V4.8113h-.852V.6384h2.1236a1.46432,1.46432,0,0,1,.5263.0904,1.18056,1.18056,0,0,1,.4052.2532,1.08557,1.08557,0,0,1,.2605.3844,1.28374,1.28374,0,0,1,.0931.4812,1.11623,1.11623,0,0,1-.1627.6014.912.912,0,0,1-.4631.369.69179.69179,0,0,1,.3943.2713,1.03034,1.03034,0,0,1,.1176.5481V4.8131h-.8592ZM15.1112,1.3628V2.477h1.0943a.65418.65418,0,0,0,.4974-.1573.56136.56136,0,0,0,.1447-.3962.58646.58646,0,0,0-.1429-.4033.6033.6033,0,0,0-.4684-.1574Zm2.7675,3.4576V.6384h3.0731v.7307h-2.232v.9044h2.0485v.7371H18.7198V4.0959h2.3243v.7434H17.8787ZM12.001,5.429v.00006L11.99918,5.429a6.38585,6.38585,0,0,0-2.1283.36358A5.55121,5.55121,0,0,0,7.01273,7.99927a4.52793,4.52793,0,0,0-.7295,2.44922v8.02929A4.58,4.58,0,0,0,7.26077,21.286,5.95816,5.95816,0,0,0,12.001,23.5c3.15643,0,5.71582-2.24658,5.71582-5.01947v-8.032C17.71677,7.67651,15.15738,5.429,12.001,5.429Z",
    };
  }

}

window.customIconsets = window.customIconsets || {};
window.customIconsets["custom"] = getIcon;

Here it is added in resources.

resource
resource1610×549 31.5 KB

Now here’s where things get interesting. My resources shows my mini media player located in the “local” directory. I have a mini media player card on my dashboard. If I delete that resource entry, the mini media player card stops working. This proves the resource entries are working.

However if I delete “mini-media-player-bundle.js” from “config/www” then the mini media player still works! This suggests to me that home assistant is getting “mini-media-player-bundle.js” from somewhere else? If I find where that is, maybe if I put “custom_icon.js” then these custom icons will start working?

I’m getting very confused by this. Any help is much appreciated.

9

Update: after I deleted “mini-media-player-bundle.js” from “config/www” and the media player still worked…about 15 minutes later the card stopped working. I put “mini-media-player-bundle.js” back in “config/www” and the media player card started working again.

To summarise: it appears that putting “custom_icon.js” in “config/www” will work, but for some reason it isn’t…

10

Aha! Nailed it!

There’s an error in the above instructions @adamoberley please edit it to stop other pople going mad haha.

says ICON

Says ICONS

Both need to be the same. If you either remove the “s” from one or add it to the other then it works.

Hope this helps someone.

11

Dang, I’m so sorry you struggled with such a stupid error. I was trying to think of things it could have been that was causing it but I’m glad you found the problem! Let me know if you have any issues with the Lovelace cards.

12

I have a question.

Why it not for in netflix app?

13

It’d be easy to add. I just don’t use Netflix so I didn’t have a reason to add it.

14

I wanted to create a control for the playstation and luckily came across your work. I do have a small suggestion though. The playstation integration doesn’t support the share command (anymore?). Instead it support ps_hold meaning holding the playstation button. I’ve incorporated the last one by hold_action on the existing button. Now to find something to replace the share button with :sweat_smile:

And for anybody wanting a “nice” background I myself added the background: attribute and used the picture below.
playstation-banner-small