'kb-steam-card-plus' with Roblox Custom Integration support

[mkanet]

Hey there, you might remember a little while back you were kind enough to help me get started with your Roblox integration; and, also inspired you to add performance enhancements to your Roblox integration to allow several Roblox users with almost real-time status updates.

Anyway, I forked the original kb-steam-card to natively support your Roblox integration with nicer status colors, Green, Yellow, Red. This is my first forked/updated repo ever. If you get a chance, please let me know if it works as expected.

https://github.com/mkanet/kb-steam-card-plus

Example card code:

type: custom:kb-steam-card
game_background: true
online_only: true
entities:
  - sensor.roblox_1234567890
  - sensor.roblox_1234567891
  - sensor.roblox_1234567892
  - sensor.roblox_1234567893
  - sensor.roblox_1234567894
  - sensor.roblox_1234567895
  - sensor.roblox_1234567896
  - sensor.roblox_1234567897
  - sensor.roblox_1234567898
title: Roblox Friends 🎮

[jdeath]

Looks good to me. Suggest you do a PR to the steam card! I just use the entities themselves, and do not use the steam card. I like to group each of the people's online status into their own list (roblox, minecraft, etc).

I really like the card view, but the steam card does not allow you to remove the title (you can remove the letters with " ", but the space it uses stays. Also, when grouping it with other things, you get the boarder and extra margin. See below. If you can add an option to remove those, it would be great. But my use case might be unique. I would definitely do a PR to the steamcard so you do not need to maintain your own fork.

type: entities
entities:
  - type: divider
  - entity: sensor.XXXX_status
    name: XXXX
  - type: attribute
    entity: sensor.roblox_XXXXXX
    attribute: game
  - type: custom:kb-steam-card
    game_background: true
    online_only: false
    entities:
      - sensor.roblox_XXXXXXXXXX
  - entity: sensor.steam_XXXXXX
    type: custom:multiple-entity-row
    entities:
      - attribute: game

[mkanet]

Thank ls for the suggestions. I made a significant change that the original developer might not like. I changed the color status to show green color as "online/active" and yellow for "Away". In any case, I have a feeling the original developer is just going to let their repo to eventually archive itself from no activity.

So would like to see a setting to disable the card title? I think I might be able to do that. But I have no idea how to setup the card to sort user by their status. If up have any ideas how to do this the Steam card,, I can at least try. My motivation is to have a real goal that would help me learn Javascript/Typescript.

[jdeath]

If you can make a setting to disable title, that would be great. then a little card_mod action should be able to disable to board.

Sorry, I do not mean grouping by there on line status. I just do a group with roblox, steam, minecraft,. That can be done manually. It is just so I see each person all status's in the same place.

[mkanet]

If you can make a setting to disable title, that would be great. then a little card_mod action should be able to disable to board.

Sorry, I do not mean grouping by there on line status. I just do a group with roblox, steam, minecraft,. That can be done manually. It is just so I see each person all status's in the same place.

Done. I just updated my repo with the below enhancement. Can you please make sure it also works for you as expected? If this works as expected and I didnt break anything else, let me know if there's anything else you would like to see.

Top card:

type: custom:kb-steam-card
game_background: true
online_only: false
disable_title: false
entities:
  - sensor.steam_XXXXXXXXXXXXXXXXX
  - sensor.steam_XXXXXXXXXXXXXXXXX
  - sensor.steam_XXXXXXXXXXXXXXXXX
title: Steam Friends 🎮

...same thing when disable_title: false is not mentioned at all.
Bottom card:

type: custom:kb-steam-card
game_background: true
online_only: false
disable_title: true
entities:
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
  - sensor.roblox_XXXXXXXXXX
title: Roblox Friends 🎮

Are there any other gaming networks I can add to Home Assistant that I can also use with this enhanced Steam card?

PS: Happy New Year. I hope 2024 will be a great year.

[jdeath]

It works. Thanks! Only other one I use (but not much) is XBOX Live.

[jdeath]

FYI. If you want to using this in an entities row, the following card_mod code will remove the boarder and align the card correctly.

   - type: entities
      entities:
         - entity: sensor.XXXX_status
          - type: custom:kb-steam-card
                  card_mod:
                    style: |
                      ha-card {
                      border: none ;
                      box-shadow: none;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      }
                      ha-card.type-custom-kb-steam-card {
                      padding: 0px;
                      }
                  game_background: true
                  online_only: false
                  disable_title: true
                  entities:
                    - sensor.steam_XXXX
                    - sensor.roblox_XXXX

[mkanet]

FYI. If you want to using this in an entities row, the following card_mod code will remove the boarder and align the card correctly.

   - type: entities
      entities:
         - entity: sensor.XXXX_status
          - type: custom:kb-steam-card
                  card_mod:
                    style: |
                      ha-card {
                      border: none ;
                      box-shadow: none;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      }
                      ha-card.type-custom-kb-steam-card {
                      padding: 0px;
                      }
                  game_background: true
                  online_only: false
                  disable_title: true
                  entities:
                    - sensor.steam_XXXX
                    - sensor.roblox_XXXX

What entity is sensor.XXXX_status? I'm not sure what to use in its place. I can't find any sensors like that on my setup.

[jdeath]

in my case, entity: sensor.XXXX_status is the xbox live sensor for the person. but it can be any entity (sensor, light, etc). Without card mod:

With card mod:

[mkanet]

Oh, now it makes sense. How do you know what gaming network each sensor is displaying in a seamless list? Can you think of an clever/effective way to make it obvious what network each gamer is on EVEN to someone who doesn't already know?

Even if I keep the entities grouped together (based on gaming network), it still isn't obvious without a respective header to someone other than you or me.

[jdeath]

I just know from the username and the profile icon. Can you use a different symbol for the online status dot for each network? Or put a S or R inside it? I do know how you add that overlay. Or maybe an option to prefix the username with the network name... "Robox: Username" or "Username (Roblox)"

[mkanet]

I just know from the username and the profile icon. Can you use a different symbol for the online status dot for each network? Or put a S or R inside it? I do know how you add that overlay. Or maybe an option to prefix the username with the network name... "Robox: Username" or "Username (Roblox)"

Thanks for the tips. Ultimately, I think it would be better to use one of the methods you mentioned. If I figure out a good solution, I'll let you know.

[mkanet]

I just know from the username and the profile icon. Can you use a different symbol for the online status dot for each network? Or put a S or R inside it? I do know how you add that overlay. Or maybe an option to prefix the username with the network name... "Robox: Username" or "Username (Roblox)"

Something like below screenshot? S is for Steam, R for Roblox. As for Xbox Network, I wasn't sure what to do. I currently have it display X if the sensor name ends with _status.

I'm open to any suggestions for improvements.

[jdeath]

Looks good!

[mkanet]

Looks good!

How do I add my Xbox friends to the xbox integration? I added support for sensor.GAMERTAG_status to display X in the status icon. However, the only sensors that are created by the Xbox Integration are the ones related to my own gamertag. I couldn't figure it out add other people's gamertags by looking at the documentation. Am I using the wrong integration? I'd appreciate any suggestions that you have.

[jdeath]

It has been so long! I think you need to log into xbox live on the web. Have your friends added there. Then you must mark the friend as a "favorite". Once they are a favorite, they show in home assistant. I am guessing because only my favorites show in home assistant.

[mkanet]

I am guessing because only my favorites show in home assistant.

That worked perfectly. Im having a little trouble with detecting the status of the xbox sensors since the card only looks for case sensitive online.. so stuff like Last seen 53m ago: Online will be completely ignored.

[mkanet]

Hey @jdeath I hope I'm not bugging you. I finally got it the Xbox status entities to display more like Roblox/Steam entities.

• Instead of displaying MKANET Status. They are displayed as MKANET.
• When a player is Online or in a game, it will show as green circle.
• When a player is at Home, aka away, it will show as a yellow circle.
• When a player is not logged in aka last seen it will show a gray circle.

Here is what it looks like so far:

Lastly, do you know why the original KB-Steam card (which this card is based on) NEVER displays the Steam game background? I thought it is supposed to do that. Ideally, I'd like for Steam and Xbox games to also display the game background too just like you did with Roblox. Any suggestions?

Since this card has evolved into a general gaming card, instead of just Steam, it would be nice to rename it something like The Gaming Card. However, I don't know if that's okay to do considering I didn't originally make this card. What do you think?

[jdeath]

Looks great. Is your repo updated? I have moved over to your card. I thought it was supposed to display the steam background, but I had it off because of the title thing. I do not think xbox integration has the game background available, so that cannot be added now. I can see if it is available in the API, but I doubt it.

You can definitely rename it. Just put a line in your repo readme thanking the repo you forked it from. Renaming would help, then people can switch more easily or even run both.

Once your's has settled down, I will link to your card in my readme.

[mkanet]

Thanks for the tips. I will start a new repo using a better name with a special thanks to the original author. I'll share as soon as it's ready.

I do have game_background: true in my card. However, it only affects your Roblox integration, nothing else. I'll play around some more with it.

More soon.

[mkanet]

BTW: I'm sure by now you must have noticed that the Steam integration intermittently loses all its entities? Showing "Unknown" for all the Steam entities? A couple of months ago Steam severely restricted their API. This caused the native Steam Integration in Home Assistant to produce ERROR 429 Too Many Requests intermittently; which causes the Steam integration to lose its entities intermittently too.

It was bugging me so much that yesterday I downloaded the latest official steam_online source code from the Home Assistant Core dev branch and fixed it! You can get it here:

[jdeath]

Thanks. I didn't notice. I only have 2 people I watch, so never hit a limit. I hope that person does a PR to update the steam entity.

[mkanet]

@jdeath Would it be okay if I eliminate the disable_title: true setting altogether and just use the standard Home Assistant card title feature like below? Otherwise, it could get confusing for new users when they have to deal with two different titles for the same card.

## Usage Example 1

```yaml
type: entities
entities:
  - type: custom:kb-steam-card
    entities:
      - sensor.steam_<steam-id>
title: Steam 🎮

Also, for the time being, I'm going to just update my existing repo: kb-steam-card-plus. It's going to be very time-consuming for me to rename all possible references in the source code and documentation from kb-steam-card, kb-steam-xxxxx, kb-xxxxxx to mka-gaming-card, mka-gaming-xxxxx, mka-xxxxxx respectively. I know eventually I should do this. However, I just want to focus on getting everything working the way we want first.

The entire source code has dozens of references like this:

      <div class="kb-container kb-clickable" @click=${()=>this.handlePopup(t)}>
        <div class="kb-steam-username">

[jdeath]

You should do what you like, it is your card! kb-steam-card-plus sounds great.

If setting title: without a title does not reserve space for the title, then that would be perfect for me. Probably better than needing a separate field.

[mkanet]

Go ahead and try it. I updated my repo with all the latest code. You shouldn't have to add disable_title: true setting. Even if you do add that setting, it will just be ignored.

BTW: If you know if the Xbox one API supports retrieving an Xbox player's current game background/icon please let me know, I may be able to modify existing xbox sensors like sensor.xxxxxx_status to include the gaming background too and still make them backwards-compatible. This would also give me something to focus on a new task.

https://github.com/home-assistant/core/tree/dev/homeassistant/components/xbox

[jdeath]

Yup. Works great. I turned on the network overlay and card looks great.

[mkanet]

I kind of feel stupid for asking. Any chance I could add you as a friend on Steam? I would like to add more friends to my custom Steam Integration to test the API rate limiter better. If you dont feel comfortable posting it here, you could email me: mkanet @ yahoo dot com.

[jdeath]

Only my kids have accounts, so I'd prefer not to share them..

I poked around the xbox api and the homeassistant integration. I have not tested it, but the API appears to return the gamepic: xbox docs: https://learn.microsoft.com/en-us/gaming/gdk/_content/gc/reference/live/rest/uri/profilev2/uri-usersbatchprofilesettingspost python library that HA uses: https://github.com/OpenXbox/xbox-webapi-python/blob/master/xbox/webapi/api/provider/profile/models.py

The problem is the homeassistant integration only pulls from the Person not Profile field. That does not have the GameDisplayPicRaw field with the picture. The integration is way more complicated python than I can handle, so I it would be complicated to make that call. I think I see how to do it, but would take a while to get it done.