-
|
Hi again, After getting the browser_mod popup to work last night, the next thing I'd like to do is use it to show the custom:mini-media-player card for any media_player element, as a hold_action. The popup is working when I hard code the element_id, but I want to pass the entity id of the element clicked on to the popup, to avoid duplicating lots of code. I've tried |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 17 replies
-
|
Unfortunately, I still haven't been able to find out if this is possible so I had no option but to repeat the code for each media player. To make it a little - but not much - cleaner, I used decluttering cards... |
Beta Was this translation helpful? Give feedback.
-
|
You can save even more lines. can be shorten down to If the entity matches the element, there's no need to define it. Here's one example with |
Beta Was this translation helpful? Give feedback.
-
|
ah, thank you, that does make it cleaner |
Beta Was this translation helpful? Give feedback.
-
|
So you'd like to pass a value related to the element you're triggering - and parsing that entity to browser_mod, only showing that card, instead of all the media-players? Your description let's me think about the xy-problem. I'm not really sure what you're hoping to do - other than a technical description of it 😄 . I hope it makes a bit of sense. I think there's two routes:
|
Beta Was this translation helpful? Give feedback.
-
|
For point no. 1, here's one example of my sonos solution. I've done this for a mod_browser card: - type: custom:mini-media-player
entity: media_player.sonos_kontor
hide:
power: true
speaker_group:
platform: sonos
show_group_count: true
entities: !include ../../../../entities_sonos.yamlIn my entities_sonos.yaml-file, I've added the following: - entity_id: media_player.sonos_stue
name: Stue
- entity_id: media_player.sonos_kontor
name: Kontor
- entity_id: media_player.sonos_kokken
name: Køkken
- entity_id: media_player.sonos_badevaerelse
name: Badeværelse... But I know that not 1:1 what you're asking for 😄 . But... I'll give you a better suggestion in a bit ;) |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I've got 5 sonos media players which I have created svg icons for. These are placed in each room. When I click, it simply calls play/pause. I want to be able to quickly change source, see artwork, group, etc when I hold on the icon, but only for that media player. I want to write the code to show mmp once and pass whichever button/media player I'm interacting with to it as a variable. |
Beta Was this translation helpful? Give feedback.
-
|
I'll post this as a new answer. |
Beta Was this translation helpful? Give feedback.
-
|
☕ Did you find this useful, and would you like to say thanks? Buy me a coffee at: https://www.buymeacoffee.com/coffeetoexetico (Support my ha-floorplan work, say thanks for 1-to-1 help in discussions and whatever else you think about 😺) So @m90att ... More than three hours spend on this, cause I just noticed that many services (if not all?) can actually handle JavaScript as a data-input. That's somehow totally new information to me, which maybe sounds a bit off. But I've never had the needs to dig into the ha-instance like this. Now I've updated all things, and researched a bit. I noticed that browser_mod also supported a data-element, so... It's time to play. ... Here I provide you a fresh 🔥 example on how to really do things with magic. In the
name: Sonos
entities:
- media_player.sonos_kontor
- media_player.sonos_kokken
- media_player.sonos_badevaerelse
- media_player.sonos_stue
tap_action: media_player.media_play_pause
state_action:
- action: call-service
service: floorplan.class_set
service_data: "${entity.state}"
hold_action:
- action: call-service
service: floorplan.class_set
service_data:
class: |
>
try{
browser_mod.service('popup',{title: "Media player",
content:
{
type: "vertical-stack",
cards: [
/* Media player for that specific room */
{
type: "custom:mini-media-player",
entity: entity.entity_id, /* entity.entity_id is the reference from hold_action from ha-floorplan */
artwork: "full-cover",
hide: {
power: true
}
},
/* Auto-entitiy example, showing all from office - auto-entities is a custom lovelace function */
{
type: "custom:auto-entities",
card: {
type: "entities",
show_header_toggle: false
},
filter: {
include: [{group: "group.office"}]
}
}
]
}
})
return `${entity.state}`;
}catch(e){
console.log("Well.. That didn't go as planned");
}
Let me know if you have any questions. Tested with HA 2022.8.5 + browser_mod 2.1.3 @OzGav I'm sure you'll find this very interesting, too.
Some Jazz was playing in the background.... OK.... Great? 😄 😆 |
Beta Was this translation helpful? Give feedback.
-
|
No you understood. I missed the return at the very bottom I was focussed on understanding what you were doing with the browser mod service call! |
Beta Was this translation helpful? Give feedback.
-
|
Now I'm confused, but what's just fine. 1.0.34 is now released, adding a See PR #260 for more details. It looks like I should use a bit of time, re-factoring some of the ha-floorplan code, at some point in the future... @m90att Here is the example, where we use the new "execute" function: name: Sonos
entities:
- media_player.sonos_kontor
- media_player.sonods_kokken
- media_player.sonos_badevaerelse
- media_player.sonos_stue
tap_action: media_player.media_play_pause
state_action:
- action: call-service
service: floorplan.class_set
service_data: "${entity.state}"
hold_action:
- service: floorplan.execute
service_data:
calling_browsermod_execution: |
>
try{
const elementId = element.id;
const ruleHaEntities = [];
let ourRule = null;
// Spot our rule in the config
config.rules.every(rule=>{
if(rule.entities && rule.entities.indexOf(elementId) > -1){
ourRule = rule;
return false; // Stop loop cause match
}
return true; // Keep loop going
});
// Use entities, or create empty array - just to prevent errors, even if we're in a try-catch statement
const ruleEntitiesReference = ourRule && ourRule.entities ? ourRule.entities : [];
// Pop each entity from entities into our new array
// Note that ha-floorplan will create our "entities" array, even if we just use "entity" in our rule
ruleEntitiesReference.forEach(reference => {
if(entities[reference]){
const entity = entities[reference];
// Push each entity defined in the rule to our ruleHaEntities array, which will be used as our speaker_group
ruleHaEntities.push(
{
entity_id: entity.entity_id,
name: entity.attributes.friendly_name
}
);
}
})
// Call browser_mod service
browser_mod.service('popup',{title: "Media player",
content:
{
type: "vertical-stack",
cards: [
/* Media player for that specific room */
{
type: "custom:mini-media-player",
entity: entity.entity_id, /* entity.entity_id is the reference from hold_action from ha-floorplan */
artwork: "full-cover",
hide: {
power: true
},
speaker_group: {
platform: "sonos",
show_group_count: true,
entities: ( ruleHaEntities ? ruleHaEntities : [])
}
}
]
}
})
}catch(e){
console.log("Well.. That didn't go as planned",e);
}It can be shorted down, minified a bit, and re-factored with a few custom functions, but that's for another day. Documentation updated: |
Beta Was this translation helpful? Give feedback.
-
|
Great work Tobias! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. With that said: ha-floorplan has this function build in (cause it's executing the evaluate-statement for every service, before the "match a service"-switch). The above solution also work if I'm calling But.. By doing it with a dedicated function, we have the option to extend it down the road, and create better documentation, for sure. |
Beta Was this translation helpful? Give feedback.
-
|
That seems unusual? But yes better to have an actual service call! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I second @OzGav's comment about great work! I actually managed to implement the solution using your code before you updated it with the execute function. Here it is... which gives me this...
You'll notice that I worked out the code for the speaker group. I used to know basic javascript but as I haven't used it in anger for a long time I find it difficult writing it now. Another benefit of the execute function is dynamic inclusion of devices for the speaker group, I think, however I don't want to include all devices so I haven't yet updated my code. What's your advice on that? |
Beta Was this translation helpful? Give feedback.
-
|
There's not much to change, for you to swap to the execute solution :) I'll just recommend that. You have a point, related to the amount of speakers. I don't have that problem with four Sonos-speakers. But I'm not sure why you're not mapping every speaker to a SVG-element, and just using the code I provided. as it generates the list for you? 😄 |
Beta Was this translation helpful? Give feedback.
-
|
@m90att and then you could move the javascript into a custom function to make it useable in multiple places, passing in the relevant items as parameters. |
Beta Was this translation helpful? Give feedback.
Hi, I second @OzGav's comment about great work!
I actually managed to implement the solution using your code before you updated it with the execute function. Here it is...