CSS Problems

[trzbla]

Thx for the integration. It is the first MVV/MVG integration which is working.

I've added the two cards into my dashboard and I get some problems with the styling.

• the background of the cards (dark blue) will also change the background of the dashboard page.
• it looks like the name of the station will not be show with the correct style
• if I include only the "small" card, the color of the font will be black.

Are there plans to make the colors configurable?

Perhaps there is a conflict with the names (e.g. container) and it would make sense to change this names (e.g. amvg_container).

[Nisbo]

Good morning, this looks crazy. ^^ But no idea why. Lets try to find a solution.

• Whats your HA version ? Older than 6 months ?
• Was it the 1st installation or an update of Another MVG ?
• Are there any other addons installed in the frontend (design) ? Like special cards for styling the frontend ? e.g. card switcher ? Kiosk mode ?
• Which browser are you using ?
• Is there also a problem in the HA Android/IOS App ?
• are there other cards on the same page ?
• May I aks for a complete screenshot of the browser page ?
• How did you transfer the small card to your HA instalation ? Maybe you can try to copy/paste the RAW contend of the card again via the HA build in File editor like in this issue because it looks like that the css code is in one line in the file.
• https://github.com/Nisbo/another_mvg/issues/5
• after this, clear the frontend cache
• whats the code of the card you are using ?
• it should be something like this

  type: custom:content-card-another-mvg
  entity: sensor.olching_und_eichenau

Are there plans to make the colors configurable?

There are no plans because I want to keep the MVG style

This is how it should look

[trzbla]

Hello, thank you for the feedback.

HA is the current version and I made my tests in an empty dashboard with the two card types. One of my problems was that I had both types (custom:content-card-another-mvg and custom:content-card-another-mvg-big) on the same page and as both are using the same css class names the result was not so good.

Another problem was that there was a conflict with the css class names with something else in my HA installation. I didn't see which component was the cause of the problem. But I could solve it by renaming some of the css class names in content-card-another-mvg.js

..
        .amvg_container {
          background-color: #ffffff; // #000080;
          border-radius: var(--ha-card-border-radius,12px);
          padding-bottom: 5px;
        }
        /* Name of the card - from name parameter */
        .amvg_cardname {
          font-weight: bold;
          font-size:1.0em;
          padding: 2px 0 2px 8px;
        }
        /* Table */
        .mvg-table {
          width: 100%;
          border-collapse:collapse;
        }

        /* Table Header - Linie, Ziel, Gleis, Abfahrt */
        .amvg_headline {
          font-weight: bold;
          background-color: #FAE10C;
          color: #ffffff; // #000080;
          border-width: 0;
          text-align: left;
        }
...

With this change I could solve the conflict. Also I've changed the color :-)

Perhaps you could rename the css classes if you create another version in the future.

If I find some time I will try to make the colors configurable.

Perhaps I've found another issue. In Ebersberg we have the value 2a for Gleis. And this value will not be shown. Do you have an idea what is going wrong? I've attached a screenshot with the output for Ebersberg.

Best regards, Bernhard

[Nisbo]

The big card is for single card pages

there is a 2nd lovalace card for single card use. Means with big font so that you can put it on a screen or on an Amazon Show 15

But this was only mentioned in the release note for an update. Maybe I should include it also in the normal documentation.

Regarding the css classes, I will try to keep it in mind.

Regarding the 2a. This looks like that platform is missing in departures.

            # Format platform
            if departure["transportType"] in ["BUS", "REGIONAL_BUS"]:
                track = "Bus"
            elif "platform" in departure:
                track = str(departure["platform"])
            else:
                # the key 'platform' doesnt exist in Dictionary user
                track = "---"

in this case you will see the --- (if its not a Bus) can you provide me the id for Ebersberg you are using in your yaml ?

Is it de:09175:4070 ?

In this case (other than Gleis 1) the platform information is missing in the data provided by the MVG API

https://www.mvg.de/api/fib/v2/departure?globalId=de:09175:4070&limit=80&offsetInMinutes=0&transportTypes=SBAHN

[Nisbo]

I created a workaround for the missing track 2a

in sensor.py replace the code mentioned in my last answer with this code

            # Format platform
            if departure["transportType"] in ["BUS", "REGIONAL_BUS"]:
                track = "Bus"
            elif "platform" in departure:
                track = str(departure["platform"])
            elif self._globalid == "de:09175:4070" or self._globalid2 == "de:09175:4070":
                # Work Around for missing track 2a in Ebersberg
                # If there is no platform available, assume that the departure is from Gleis 2a
                track = "2a"
            else:
                # the key 'platform' doesnt exist in Dictionary user
                track = "---"

keep in mind that python doesnt allow TAB and you have to take care that the spaces in front of the code has to be the same than in the original code. After this you have to restart HA.

This code assumes that if the platform is missing the departure is from Gleis 2a. I included it in my next version. I will try to release it in the next days.

[Nisbo]

I released a new version

28.05.2024 - Version 1.4.0

• improved error handling
• improved error reporting in the system log
• workaround for missing track 2a (not provided by the API) in Ebersberg. It assumes that if there is no platform provided by the API that the departure is from track 2a (Gleis 2a).
• fixed an issue with CSS on some installations (possible problems with other addons)
• You can also use BAHN but this feature is not fully integrated and not enabled by default. There is also no special design / labeling available. If you want to include it to your departure list, you can use this code:

transporttypes: "SBAHN,UBAHN,TRAM,BUS,REGIONAL_BUS,BAHN"

To update, replace all files with the new files and restart HA. Afterwards you have to clear the frontend cache on all devices.

[trzbla]

Thank you very much. Regarding the colors I was able to make it configurable. I will create a version which will behave like before if the colors are not set and send you an update. If you think it is fine probably it can be included in a new version.

[trzbla]

I've made some changes to content-card-another-mvg.js:

class ContentAnotherMVG extends HTMLElement {
  // Whenever the state changes, a new `hass` object is set. Use this to
  // update your content.
  set hass(hass) {
    const entityId = this.config.entity;
    const state    = hass.states[entityId];
    const stateStr = state ? state.state : "unavailable";

    let container_background_color = this.config.style && this.config.style.container_background_color ? this.config.style.container_background_color : '#000080';
    let cardname_color = this.config.style && this.config.style.cardname_color ? this.config.style.cardname_color : '#FFFFFF';
    let headline_background_color = this.config.style && this.config.style.headline_background_color ? this.config.style.headline_background_color : '#FAE10C';
    let headline_color = this.config.style && this.config.style.headline_color ? this.config.style.headline_color : '#000080';
    let text_color = this.config.style && this.config.style.text_color ? this.config.style.text_color : '#FFFFFF';

    // Initialize the content if it's not there yet.
    if (!this.content) {
      const card    = document.createElement('ha-card');
      //card.header = "Another MVG Card";
      this.content  = document.createElement('div');
      const style   = document.createElement('style');

      style.textContent = `

        /* Card background */
        .amvg-container {
          background-color: ${container_background_color};
          border-radius: var(--ha-card-border-radius,12px);
          padding-bottom: 5px;
        }
        /* Name of the card - from name parameter */
        .amvg-cardname {
          font-weight: bold;
          font-size:1.0em;
          padding: 2px 0 2px 8px;
          color: ${cardname_color};
        }
        /* Table */
        .amvg-table {
          width: 100%;
          border-collapse:collapse;
        }

        /* Table Header - Linie, Ziel, Gleis, Abfahrt */
        .amvg-headline {
          font-weight: bold;
          background-color: ${headline_background_color};
          color: ${headline_color};
          border-width: 0;
          text-align: left;
        }

        /* Column widths and spacing */
        .label {
          width: 10%;
          padding: 0 6px;
        }
        .destination {
          width: 60%;
          text-wrap: wrap;
          color: ${text_color};
        }
        .track {
          padding: 0 5px;
          width: fit-content;
          color: ${text_color};
        }
        .time {
          padding-right: 5px;
          width: fit-content;
          white-space: nowrap;
          color: ${text_color};
        }
       ...

If the configuration looks like

type: custom:content-card-another-mvg
entity: sensor.ebersberg_2
style:
  container_background_color: '#008000'
  cardname_color: black
  headline_background_color: red
  headline_color: yellow
  text_color: blue

it will take the colors from the configuration. Without the style settings it will look like before (blue background, etc.).

I've attached the modified java script file. content-card-another-mvg.js.txt

[Nisbo]

Nice idea, I will include it in the next version. :)