Widget for Tankerkönig in OH3.x

I built a widget under openhab 2.5 to display the “Tankerkönig” binding. It worked very well and even had a map built in. The display was realized via Habpanel and HTML in the framework.

Under OH 3.x I no longer work with Habpanel and had to rebuild the widget to display it in Page. The map is still embedded in HTML and works very well. Since I lack programming knowledge in json, I try to adapt the display to the old version. About the line

<td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/shell.svg" width="32" height="32"></img></td>

in the HTML area, e.g. represent an icon. However, I have problems displaying item values. I’ve already tried to build in an API call with curl. But I have no experience with it and don’t know how to display the result in HTML. The variant

<script src="myscripts.js"></script> 

would be another possibility. However, I have not yet been able to display the item status.

I’ve put a lot of time and effort into this project and it would be a shame to give it up now. But maybe there will be another expert and we will find a solution.

Many Thanks

Not 100% sure what you want to achieve, but within OH3.x you can create a page to show an item status and you can also use a floorplan to show an image in the background and items state within the image combined. Therefore for me it’s unclear why you want to reinvent the wheel

How do you come to the conclusion that I don’t know what I want to achieve? Of course, I don’t want to reinvent the wheel either. In my widget, especially on the leaflet map, it is already possible to display the position of certain gas stations by clicking on a button. In the current situation, I have already installed a temporary solution. But because it doesn’t look so good, I want to improve it. Hence my question and I’m still hoping for someone who could help me. I would also be willing to provide more information.

I made a screenshot so you can get a better idea. For the right part with the prices I had to create a new widget. Exactly this area would like to include in the left area next to “Sorte E5”.

This should all be possible within the mainui and without the need of creating custom scripts or custom html:

Take a screenshot of the map and use a floorplan (instead of the map view).
Within a floorplan you can add the items value exactly at the position of the gas station; that’s not possible with a map view as per my knowledge (where you can only position a marker and have to click on it to see further details).

To show a list of all gas prices use a list view and in addition have a tabbed page to combine floorplan and list view

So if I understand: you would like the table of prices and open status to be embedded in the other section approximately where you have the white rectangle. Is this correct?

This shouldn’t be very difficult, but in order to help you with that you’re going to have to share the full code of the widget so that we can see the structure you have already built.

Just as a general rule when posting on the forum, always include as much information as you can. There’s no real problem with putting too much information. Too little, however, will always make it more difficult for others to zero in on the exact issue.

First of all, I’m glad to read from you again. Yes, you got me right, price and status should be embedded to the right of “E5”. Because there is a lot of personal data in the code and the HTML file, but also because I still have to do a few things, I would PM you again in about 5 to 6 hours. Hope that’s ok considering the time difference.

You can PM me, or you can just scrub the personal data from the code and post it here. That is fairly common as lots of rules and scripts etc. have personal data in them. The most important thing is that we see the complete structure of the page, not the particular details of each and every widget. Either way, I will most likely answer here in the topic (without any personal data of course) so that the solution is at least publicly available in case others have the same question.

OK, to display the left pane I used the default webframe card with the following settings:

Webframe-Card

component: oh-webframe-card
config:
  height: 545
  outline: true
  src: https://xxx.xxx.xxx.xxx:yyyy/static/karte.html
  title: " Tankstellen in..."

next the map itself and the part to the right of it (up to the “----->”) in an HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>


    <style>
        html,body{
            background: black;
        }
        .container{
            height: 100%;
            width: 100%;
        }
        #map {
            height: 525px;
            width: 53%;
            display: inline-block;
        }

        /*
        button {
            height: 40px;
            width: 100px;
            border-color: #00FFFF;
            background-color: #808080;
            color: black; #000000 #19201C
        }

        th, td {
            border: 2px ridge cyan;
            color: white;
            font-family:sans-serif;
            font-size:12pt;
            font-weight: bold;
        }
         */


        /******************************
            Neue Styles
         */


        table{
            border-spacing: 0;
        }
        button{
            height: 40px;
            width: 100px;
            background-color: #fff;
            color: black;
            border: none;
            border-radius: 2px;
            box-shadow: 3px 5px 2px -1px rgba(145, 145, 145, 0.75);
            cursor: pointer;
        }
        button:hover, button:focus{
            background-color: #ddd;
        }


        th, td {
            border: 1px solid #bfbfbf;
            color: white;
            font-family:sans-serif;
            font-size:10pt;
            font-weight: normal;
            padding: 2px 8px;
        }

    </style>

</head>

<body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
<div>
    <div class="container">
        <div id="map"></div>
        <div id="wrapper" style="display: inline-block;">

            <table class="table table-bordered text-right" align="middle">

                <tr id="aralE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/aral-1.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td

                <tr id="shellBlitzE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/shell.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

                <tr id="markHernE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/markant_png.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

                <tr id="totalE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/total_png.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

                <tr id="essoE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/esso.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

                <tr id="shellHertE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/shell.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

                <tr id="jetE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/jet_png.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

                <tr id="bavariaE5">
                    <td class="customBtn" ></td>
                    <td class="customText" style="font-size: 12px;" height="60px" width="130px"></td>
                    <td style="min-width:50px" align="center"><img src="https://xxx.xxx.xxx.xxx:yyyy/static/bilder/petrol.svg" width="32" height="32"></img></td>
                    <td >Sorte&nbsp;E5</td>
                    <td >-----></td
                </tr>

            </table>
        </div>
    </div>
</div>

<script>
    // Container-ID, Beschreibung, LAT, LNG, icon-name Beispiel: "52.5200066,13.4049540" (Berlin)
    var planes = [
        ["aralE5", "<b>Aral&nbsp;Tankstelle</b><br>Friedrich-Ebert-Str. 14 Entfernung:&nbsp;2,4&nbsp;km", 77.4027069, 1.85095, "aral-1.svg"],
        ["shellBlitzE5", "<b>Shell&nbsp;Tankstelle</b><br>Blitzkuhlenstr. 97 Entfernung:&nbsp;5,2&nbsp;km", 77.493768, 2.920507, "shell.svg"],
        ["markHernE5", "<b>Markant&nbsp;Tankstelle</b><br>Herner Str. 249 Entfernung:&nbsp;4,4&nbsp;km", 77.48409, 2.91258, "petrol.svg"],
        ["totalE5", "<b>Total&nbsp;Tankstelle</b><br>Castroper Str. 123 Entfernung:&nbsp;4,8&nbsp;km", 77.404639, 2.914727, "petrol.svg"],
        ["essoE5", "<b>Esso&nbsp;Tankstelle</b><br>Akkoallee 63   Entfernung:&nbsp;3,6&nbsp;km", 77.403758, 1.6498, "esso.svg"],
        ["shellHertE5", "<b>Shell&nbsp;Tankstelle</b><br>Herterner Str. 100 Entfernung:&nbsp;2,9&nbsp;km", 77.409695, 1.81562, "shell.svg"],
        ["jetE5", "<b>Jet&nbsp;Tankstelle</b><br>Kurt&#8209;Schumacher&#8209;Allee&nbsp;5 Entfernung:&nbsp;4,5&nbsp;km", 77.4057, 2.90251, "petrol.svg"],
        ["bavariaE5", "<b>Bavaria&nbsp;Tankstelle</b><br>Bochumer Str. 1 Entfernung:&nbsp;5,8&nbsp;km", 77.4827866, 2.913093, "petrol.svg"]
    ];

    var map = L.map('map').setView([77.58903, 1.7594], 12);


    /*
    // Alte "Zuhause" Markierung, kann einfach wieder aktiviert werden
    var circle = L.circle([77.58903, 1.7594], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 150
    }).addTo(map);
    circle.bindPopup("<b>Eigene Adresse:</b><br>My Street 1");
     */

    var homeMarker = L.marker([77.58903, 1.7594], {
        icon: L.icon({
            iconUrl: "https://cdn0.iconfinder.com/data/icons/free-any-house/96/small_house-home-256.png",
            iconSize: [30, 30]
        })
    }).addTo(map)
        .bindPopup("<b>Eigene Adresse:</b><br>My Street 1");


    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Achim',
            maxZoom: 18,
        }).addTo(map);


    var btnMapping = [];

    var icon = L.icon({
        iconSize: [35, 35]
    });

    for (var i = 0; i < planes.length; i++) {

        icon.options.iconUrl = "/static/bilder/petrol.svg";
        //icon.options.iconUrl = "/static/bilder/" + planes[4];
        // Zum testen kommentar aufheben
        //icon.options.iconUrl = "https://cdn3.iconfinder.com/data/icons/eco-flat-2/512/gas_oil_station_petrol-256.png";

        var marker = L.marker([planes[i][2], planes[i][3]], {icon: icon})
            .bindPopup(planes[i][1])
            .addTo(map);

        var id = planes[i][0];
        var tr = document.getElementById(id);
        var td = tr.getElementsByClassName("customText")[0];
        td.innerHTML = planes[i][1];

        var btnField = tr.getElementsByClassName("customBtn")[0];
        var btn = document.createElement("button");
        btn.innerHTML = "Auf Karte zeigen";
        btn.id = id + "Btn";
        btnField.appendChild(btn);

        btnMapping[btn.id] = L.stamp(marker); // btn id und marker id verknüpfen

        L.DomEvent.on(btn, 'click', (e) => {
            var marker2 = map._layers[btnMapping[e.target.id]]; // get marker over id
            var latlng = marker2.getLatLng();
            map.panTo(latlng);
            marker2.openPopup();
        })
    }

</script>
</body>
</html>

and finally the right part with a second widget showing the item status for prices and open/closed. This area should be embedded in the left part next to “Sort E5”.

uid: Tankstellen_Infos
tags: []
props:
  parameters:
    - context: item
      description: Item Preis AralE5
      label: Item
      name: item1
      required: false
      type: TEXT
    - context: item
      description: Item AralOpen
      label: Item
      name: item2
      required: false
      type: TEXT
    - context: item
      description: Item Preis ShellBlitzE5
      label: Item
      name: item3
      required: false
      type: TEXT
    - context: item
      description: Item ShellBlitzOpen
      label: Item
      name: item4
      required: false
      type: TEXT
    - context: item
      description: Item Preis MarkantE5
      label: Item
      name: item5
      required: false
      type: TEXT
    - context: item
      description: Item MarkantOpen
      label: Item
      name: item6
      required: false
      type: TEXT
    - context: item
      description: Item Preis TotalE5
      label: Item
      name: item7
      required: false
      type: TEXT
    - context: item
      description: Item TotalOpen
      label: Item
      name: item8
      required: false
      type: TEXT
    - context: item
      description: Item Preis EssoE5
      label: Item
      name: item9
      required: false
      type: TEXT
    - context: item
      description: Item EssoOpen
      label: Item
      name: item10
      required: false
      type: TEXT
    - context: item
      description: Item Preis ShellHertE5
      label: Item
      name: item11
      required: false
      type: TEXT
    - context: item
      description: Item ShellHertOpen
      label: Item
      name: item12
      required: false
      type: TEXT
    - context: item
      description: Item Preis JetE5
      label: Item
      name: item13
      required: false
      type: TEXT
    - context: item
      description: Item JetOpen
      label: Item
      name: item14
      required: false
      type: TEXT
    - context: item
      description: Item Preis BavariaE5
      label: Item
      name: item15
      required: false
      type: TEXT
    - context: item
      description: Item BavariaOpen
      label: Item
      name: item16
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: May 19, 2022, 3:39:49 AM
component: f7-card
config:
  class: padding
  expandable: false
  outline: true
  style:
    background: black
    height: 560px
    textColor: white
    width: 220px
slots:
  default:
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 42px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 8px
          width: 110px
        text: Preis je Ltr.
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 42px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 8px
          width: 135px
        text: Status
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 55px
          width: 60px
        text: "=(items[props.item1].displayState) ? items[props.item1].displayState : items[props.item1].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 55px
          width: 85px
        text: "=(items[props.item2].displayState) ? items[props.item2].displayState : items[props.item2].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 121px
          width: 60px
        text: "=(items[props.item3].displayState) ? items[props.item3].displayState : items[props.item3].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 121px
          width: 85px
        text: "=(items[props.item4].displayState) ? items[props.item4].displayState : items[props.item4].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 187px
          width: 60px
        text: "=(items[props.item5].displayState) ? items[props.item5].displayState : items[props.item5].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 187px
          width: 85px
        text: "=(items[props.item6].displayState) ? items[props.item6].displayState : items[props.item6].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 254px
          width: 60px
        text: "=(items[props.item7].displayState) ? items[props.item7].displayState : items[props.item7].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 254px
          width: 85px
        text: "=(items[props.item8].displayState) ? items[props.item8].displayState : items[props.item8].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 321px
          width: 60px
        text: "=(items[props.item9].displayState) ? items[props.item9].displayState : items[props.item9].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 321px
          width: 85px
        text: "=(items[props.item10].displayState) ? items[props.item10].displayState : items[props.item10].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 388px
          width: 60px
        text: "=(items[props.item11].displayState) ? items[props.item11].displayState : items[props.item11].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 388px
          width: 85px
        text: "=(items[props.item12].displayState) ? items[props.item12].displayState : items[props.item12].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 454px
          width: 60px
        text: "=(items[props.item13].displayState) ? items[props.item13].displayState : items[props.item13].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 454px
          width: 85px
        text: "=(items[props.item14].displayState) ? items[props.item14].displayState : items[props.item14].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 23px
          left: 0px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 521px
          width: 60px
        text: "=(items[props.item15].displayState) ? items[props.item15].displayState : items[props.item15].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 23px
          left: 112px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 521px
          width: 85px
        text: "=(items[props.item16].displayState) ? items[props.item16].displayState

OK, I think I understand and it looks to me like you’ve got a couple of pretty manageable options. The basic idea that I would employ here is not to try and get the table into the webpage (which I think is what you were trying with the api call perhaps?) but just to wrap the webframe and the table in an f7-row component. The f7-row (and f7-block for that matter) just represent <div> elements, so you can use this to combine and space these two however you wish, just as you would in html.

The different options are just whether you want to add the f7-row and the oh-webframe-card to the widget you already have:

uid: Tankstellen_Infos
tags: []
props:
  parameters:
    - context: item
      description: Item Preis AralE5
      label: Item
      name: item1
      required: false
      type: TEXT
...
component: f7-row
config:
  style:
    css here to get desired space of child elements
slots:
  default:
    - component: oh-webframe-card
      config:
        webpage config
    - component: f7-card
        ...

Or create an entirely new widget that calls the custom widget you’ve already got:

uid: Combined_Widget
tags: []
props:
  parameters: []
  parameterGroups: []
component: f7-row
config:
  style:
    css here to get desired space of child elements
slots:
  default:
    - component: oh-webframe-card
      config:
        webpage config
    - component: widget:Tankstellen_Infos
      config:
        item1: something
        item2: something else
        ...

Incidentally, if you don’t want to make an extra standalone widget, you can also just use the page editor code tab to input the second configuration directly onto a page.

1 Like

Thank you very much for your support. However, I still don’t understand what needs to be entered under “css here to get desired space of child elements”.

css alignment and spacing is a huge topic that can’t be even remotely covered in one post. But I can certainly give you some suggestions. If I were building this widget, my plan A for trying to get the placement of the two pieces would be to use flexbox spacing. f7-row components use flexbox spacing by default so all we probably have to worry about is changing just one or two parameters to get the alignment we want.

Here’s an example. I going to build a widget that includes some other widget I’ve made (an old demo widget for using one of OH’s map pages) and an image card. If I just put both of these items together in an f7-row:

uid: demo:spacing
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-row
config:
slots:
  default:
    - component: widget:demo:map_widget
    - component: oh-image-card
      config:
        url: 'https://picsum.photos/400/200'

this is the result:


When using flexbox spacing, the parent element always tries to do it’s best to display the child elements at full size. In this case, it decides that there isn’t enough room to put them side by side at full size, so it wraps the second piece down into an next row of elements.

But I want the two side-by-side. So, I have to tell the f7-row that it’s not allowed wrap the flexboxed elements. That’s one simple css parameter: flex-wrap, which I want to set to nowrap:

uid: demo:spacing
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-row
config:
  style:
    flex-wrap: nowrap
slots:
  default:
    - component: widget:demo:map_widget
    - component: oh-image-card
      config:
        url: 'https://picsum.photos/400/200'

Now, the f7-row can’t split up the child elements into two different rows, so it does the next best thing: it shrinks them down until they fit side-by-side:
image

Now, there’s a ton more to this, because you can control most aspects of how the flex box places the child elements and how the child elements respond to size changes etc. Check out this great summary for a quick crash course in using flexbox spacing.

I didn’t fill this in for you in my previous suggestion about the page, because I don’t know your specific requirements in terms of the page size, how you responsive to page size changes you want this be, whether you want to prioritize the size of the map…or a thousand other little things. However, I suspect that a structure such as:

uid: Combined_Widget
tags: []
props:
  parameters: []
  parameterGroups: []
component: f7-row
config:
  style:
    flex-wrap: nowrap
    justify-content: flex-start
slots:
  default:
    - component: oh-webframe-card
      config:
        webpage config
    - component: widget:Tankstellen_Infos
      config:
        item1: something
        item2: something else
        ...

will get you close enough that you’ll just have to find a few other small tweak to get the placement and spacing to your satisfaction.

1 Like

I have since solved the problem with a custom widget that displays the data via popover. The map as an HTML file (as shown above) is still included in a slightly modified constellation.

Widget Tanken_v7:

uid: Tanken_v7
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Sep 15, 2022, 4:13:38 AM
component: f7-card
config:
  class:
    - padding
  outline: true
  style:
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: flex-start
    width: 100%
  stylesheet: ".card:first-child {flex: 1 1 auto;}"
slots:
  default:
    - component: oh-webframe-card
      config:
        height: 545px
        outline: true
        src: https://xxx.xxx.xxx.xxx:12343/static/karte.html
        title: " Tankstellen in der Umgebung "
    - component: f7-row
      config:
        style:
          height: 35px
          width: 25%
          align-items: center
      slots:
        default:
          - component: f7-col
            config:
              style:
                height: 600px
                background-color: rgba(0, 0, 0, 0.9)
              class:
                - display-flex
                - justify-content
                - align-items-center
            slots:
              default:
                - component: oh-button
                  config:
                    action: popover
                    actionModal: widget:Tankstellen_Infos
                    actionModalConfig:
                      item1: TankAral_E5
                      item10: TankEsso_GeoffnetGeschlossen
                      item11: TankShellHert_E5
                      item12: TankShellHert_GeoffnetGeschlossen
                      item13: TankJet_E5
                      item14: TankJet_GeoffnetGeschlossen
                      item15: TankBavaria_E5
                      item16: TankBavaria_GeoffnetGeschlossen
                      item2: TankAral_GeoffnetGeschlossen
                      item3: TankShellBlitz_E5
                      item4: TankShellBlitz_GeoffnetGeschlossen
                      item5: TankMarkHern_E5
                      item6: TankMarkHern_GeoffnetGeschlossen
                      item7: TankTotal_E5
                      item8: TankTotal_GeoffnetGeschlossen
                      item9: TankEsso_E5
                    outline: true
                    style:
                      left: 50px
                      margin-right: 10px
                      width: 150px
                      top: -200px
                    text: Preise / Status
          - component: oh-button
            config:
              width: 400px
              iconF7: house_fill
              text: Home Page
              outline: true
              action: navigate
              actionPage: page:overview
              style:
                left: 50px
                width: 150px
                top: -350px

widget Tankstellen_Infos:

uid: Tankstellen_Infos
tags: []
props:
  parameters:
    - context: item
      description: Item Preis AralE5
      label: Item
      name: item1
      required: true
      type: TEXT
    - context: item
      description: Item AralOpen
      label: Item
      name: item2
      required: false
      type: TEXT
    - context: item
      description: Item Preis ShellBlitzE5
      label: Item
      name: item3
      required: false
      type: TEXT
    - context: item
      description: Item ShellBlitzOpen
      label: Item
      name: item4
      required: false
      type: TEXT
    - context: item
      description: Item Preis MarkantE5
      label: Item
      name: item5
      required: false
      type: TEXT
    - context: item
      description: Item MarkantOpen
      label: Item
      name: item6
      required: false
      type: TEXT
    - context: item
      description: Item Preis TotalE5
      label: Item
      name: item7
      required: false
      type: TEXT
    - context: item
      description: Item TotalOpen
      label: Item
      name: item8
      required: false
      type: TEXT
    - context: item
      description: Item Preis EssoE5
      label: Item
      name: item9
      required: false
      type: TEXT
    - context: item
      description: Item EssoOpen
      label: Item
      name: item10
      required: false
      type: TEXT
    - context: item
      description: Item Preis ShellHertE5
      label: Item
      name: item11
      required: false
      type: TEXT
    - context: item
      description: Item ShellHertOpen
      label: Item
      name: item12
      required: false
      type: TEXT
    - context: item
      description: Item Preis JetE5
      label: Item
      name: item13
      required: false
      type: TEXT
    - context: item
      description: Item JetOpen
      label: Item
      name: item14
      required: false
      type: TEXT
    - context: item
      description: Item Preis BavariaE5
      label: Item
      name: item15
      required: false
      type: TEXT
    - context: item
      description: Item BavariaOpen
      label: Item
      name: item16
      required: false
      type: TEXT
      advanced: false
  parameterGroups: []
timestamp: Sep 15, 2022, 6:48:50 AM
component: f7-card
config:
  class: padding
  expandable: false
  outline: true
  style:
    --text-color: rgba(255,255,255,1)
    background-color: rgba(0, 0, 0, 0.9)
    height: 640px
    width: 75%
slots:
  default:
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 35px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 64px
          width: 200px
        text: Adresse
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 64px
          width: 80px
        text: Icon
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 35px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 64px
          width: 60px
        text: Sorte
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 35px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 64px
          width: 110px
        text: Preis je Ltr.
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          color: cyan
          font-size: 12pt
          height: 35px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 0px
          padding-left: 0px
          padding-right: 0px
          padding-top: 5px
          position: absolute
          text-align: center
          top: 64px
          width: 135px
        text: Status
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 105px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle1
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 105px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/aral-1.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 105px
          width: 10px
        text: E5
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 105px
          width: 60px
        text: "=(items[props.item1].displayState) ? items[props.item1].displayState : items[props.item1].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 105px
          width: 85px
        text: "=(items[props.item2].displayState) ? items[props.item2].displayState : items[props.item2].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 170px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle2
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 170px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/shell.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 170px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 170px
          width: 60px
        text: "=(items[props.item3].displayState) ? items[props.item3].displayState : items[props.item3].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 170px
          width: 85px
        text: "=(items[props.item4].displayState) ? items[props.item4].displayState : items[props.item4].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 235px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle3
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 235px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/markant_png.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 235px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 235px
          width: 60px
        text: "=(items[props.item5].displayState) ? items[props.item5].displayState : items[props.item5].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 235px
          width: 85px
        text: "=(items[props.item6].displayState) ? items[props.item6].displayState : items[props.item6].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 300px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle4
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 300px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/total_png.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 300px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 300px
          width: 60px
        text: "=(items[props.item7].displayState) ? items[props.item7].displayState : items[props.item7].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 300px
          width: 85px
        text: "=(items[props.item8].displayState) ? items[props.item8].displayState : items[props.item8].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 366px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle5
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 366px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/esso.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 366px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 366px
          width: 60px
        text: "=(items[props.item9].displayState) ? items[props.item9].displayState : items[props.item9].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 21px
          position: absolute
          text-align: center
          top: 366px
          width: 85px
        text: "=(items[props.item10].displayState) ? items[props.item10].displayState : items[props.item10].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 432px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle6
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 432px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/shell.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 432px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 432px
          width: 60px
        text: "=(items[props.item11].displayState) ? items[props.item11].displayState : items[props.item11].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 432px
          width: 85px
        text: "=(items[props.item12].displayState) ? items[props.item12].displayState : items[props.item12].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 498px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle7
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 35px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 15px
          padding-left: 20px
          padding-right: 20px
          padding-top: 15px
          position: absolute
          text-align: center
          top: 498px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/jet_png.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 498px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 498px
          width: 60px
        text: "=(items[props.item13].displayState) ? items[props.item13].displayState : items[props.item13].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 498px
          width: 85px
        text: "=(items[props.item14].displayState) ? items[props.item14].displayState : items[props.item14].state"
    - component: f7-block
      config:
        style:
          border: 1px solid
          border-color: white
          color: white
          font-size: 10pt
          height: 66px
          left: 210px
          letter-spacing: .75px
          padding-bottom: 5px
          padding-left: 10px
          padding-right: 10px
          padding-top: 5px
          position: absolute
          text-align: left
          top: 563px
          width: 200px
          line-height: 1.4em
      slots:
        default:
          - component: Label
            config:
              text: Tankstelle8
              style:
                font-weight: bold
          - component: Label
            config:
              text: Straße
          - component: Label
            config:
              text: "Entfernung: 0.0 km"
    - component: oh-image
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 410px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 20px
          padding-right: 20px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 563px
          width: 40px
        url: https://xxx.xxx.xxx.xxx:12343/static/bilder/petrol5.svg
    - component: Label
      config:
        outline: true
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 490px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 563px
          width: 10px
        text: E5
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 550px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 563px
          width: 60px
        text: "=(items[props.item15].displayState) ? items[props.item15].displayState : items[props.item15].state"
    - component: Label
      config:
        style:
          border: 1px solid
          border-color: white
          font-size: min(max(50px, 2.5vw), 15px)
          height: 25px
          left: 662px
          letter-spacing: .75px
          padding-bottom: 20px
          padding-left: 25px
          padding-right: 25px
          padding-top: 20px
          position: absolute
          text-align: center
          top: 563px
          width: 85px
        text: "=(items[props.item16].displayState) ? items[props.item16].displayState : items[props.item16].state"

I would like to express my thanks to @JustinG for the intensive support in creating the widget. Thanks to his help, I was able to successfully complete this great project.