Formula One Card

For everyone who uses FormulaOne API
I have created a card to display the data!

15 Likes

Thank you very much! Nice work!

And easy to install too, as you can see, it took less, than an hour :wink:

2 Likes

i cant get the cards display next to each other like you show here. they all get in one column in the middle. What did you have for cards/dahs config @BebeMischa ?

attempt with horizontal stack


without stack, it’s always out of displpay and scrolling needed:

That attempt with horizontal stack was almost good, Sander, you just need to change the dashboard view from tiles to panel :wink:

Hi, I created the same layout but for some reason I have a blanc space between the 3 rows.
Can you share how you get the cards close to each other?

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:formulaone-card
        card_type: next_race
        sensor: sensor.formula_one_sensor_races
        title: Next Race
        date_locale: nl
        image_clickable: false
      - type: custom:formulaone-card
        card_type: last_result
        sensor: sensor.formula_one_sensor_last_result
        title: Last Result
  - type: vertical-stack
    cards:
      - type: custom:formulaone-card
        card_type: driver_standings
        sensor: sensor.formula_one_sensor_drivers
        title: Driver Standings
      - type: custom:formulaone-card
        card_type: constructor_standings
        sensor: sensor.formula_one_sensor_constructors
        title: Constructor Standings
  - type: vertical-stack
    cards:
      - type: custom:formulaone-card
        card_type: schedule
        sensor: sensor.formula_one_sensor_races
        title: Schedule
        date_locale: nl

3 Likes

Thanks!

My mistake was I used grid instead of vertical-stack :man_facepalming:

1 Like

could have thought of that myself :yum:


better

still think the cards dont adhere to lovelace rules somehow. when i added a normal entity card, the stuf got split in 2 columns, without that cards it remained one.

and thanks fellow amsterdammer :slight_smile:

1 Like

But why do you want the card sticking together? That wont be a pretty sight xD

When i add the 4 cards to an empty wide dashboard, I would expect them to order themselves in 3 or 4 columns. They dont, the only present themselves as ‘vertically locked’, which is not the default responsive behavior. I would expect that on a phone screen only, not on a desktop with lots of space sideways to put them next to each other for a bit at least.

see, there is room on both sides, but the responsiveness is not using it, just like it is a narrow screen, all vertical ordered… this is indeed not pretty :slight_smile:

2 Likes

Yeah that is the type of dashboard you choose. Has nothing to do with the card. I wish I could influence that. It will help a lot of people but unfortunately I can’t

No, Marco, Sander is right. The cards do not behave same, as all other cards, when the dashboard view is in tiles mode. They all automatically stack vertically, normally they have to go next each other.

I had this issue also, that is, why after some fight against it I decided to go panel mode and horizontal stack. Right, because in standard mode there was no way to get them in more columns.

2 Likes

I used this :

image

Well I did nothing special with the card. So I don’t know how I can fix your issue. Its just a card with simple HTML. Any thing that happens with the placing/position of the card, thats what HA/the theme does. I have the same stacking vertical issue with all other cards that I use. For example Im using masonry default on my main dashboard with 2 vertical stacks.

But the card is open source, so if you can spot the problem I would be very thankful.

1 Like

i’m totally no web UI expert, so wont judge , just an observation i do. It is completely unexplainable for me, maybe i try a colleague tomorrow (both front-ender and HA hobbyist)

before i forget… i love the data and the view, so please dont stop developing these additions !

1 Like

I won’t don’t you worry haha. I hope your colleague will find it. I’m also not a frontender, but a .NET developer. I’m learning with every card I make.

1 Like

Hi @marcokreeft87 ,
Thanks for the cards, looks great. Only the schedule card doesn’t work well for me. It is not properly aligned. I managed to do it with CSS Style, but then it doesn’t look like it on Mobile. The first image is without editing with CSS Style, the second with.
Perhaps you know what it is?

Thanks in advance,


  - badges:
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: custom:layout-card
            layout_type: custom:horizontal-layout
            cards:
              - type: vertical-stack
                cards:
                  - color: rgb(238, 238, 238)
                    color_type: card
                    name: Next Race
                    styles:
                      card:
                        - height: 25px
                    type: 'custom:button-card'
                  - type: custom:formulaone-card
                    card_type: next_race
                    sensor: sensor.formula_one_sensor_races
                    title: Next Race
                    date_locale: nl
                    image_clickable: false
              - type: vertical-stack
                cards:
                  - color: rgb(238, 238, 238)
                    color_type: card
                    name: Driver Standings
                    styles:
                      card:
                        - height: 25px
                    type: 'custom:button-card'
                  - type: custom:formulaone-card
                    card_type: driver_standings
                    sensor: sensor.formula_one_sensor_drivers
                    title: Driver Standings
              - type: vertical-stack
                cards:
                  - color: rgb(238, 238, 238)
                    color_type: card
                    name: Constructor Standings
                    styles:
                      card:
                        - height: 25px
                    type: 'custom:button-card'
                  - type: custom:formulaone-card
                    card_type: constructor_standings
                    sensor: sensor.formula_one_sensor_constructors
                    title: Constructor Standings
              - type: vertical-stack
                cards:
                  - color: rgb(238, 238, 238)
                    color_type: card
                    name: Schedule
                    styles:
                      card:
                        - height: 25px
                    type: 'custom:button-card'
                  - type: custom:formulaone-card
                    card_type: schedule
                    sensor: sensor.formula_one_sensor_races
                    title: Schedule
                    date_locale: nl
                    style: |
                      th, td {
                          overflow: hidden;
                          max-width: 70px;
                          width: 100%;
                          text-align: left;
                      }                      
    title: Formula One

Hey, @marcokreeft87 ,

something weird is happening here. USA is not finished, but Mexico is already there. So we have no sight on the current race.

Can we do something about that? :wink:

Think that’s the API cause, saw it too this morning. Data API from development state

Known issue seems

1 Like

Yeah we fixed it :slight_smile:

2 Likes