OnlineLogger Widget

Load Web Components & the widget:

        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js"></script>
        <script src="https://onlinelogger.net/dist/widget.js" type="module"></script>
    

Override some styles:

        <style>
          .hamn {
            --widget-background-image: linear-gradient(
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.1)
              ),
              url('https://upload.wikimedia.org/wikipedia/commons/2/2d/Barseb%C3%A4ckshamn_2.jpg');
          }

          .strand {
            --widget-background-image: linear-gradient(
                rgba(0, 0, 0, 0.1),
                rgba(0, 0, 0, 0.0)
              ),
              url('/img/barsebackstrand.jpg');
          }
        </style>
      

Use the component on your page:

          <div style="width: 400px; height: 400px;">
            <widget-component
              class="hamn"
              title="Barsebäckshamn"
              device="cube_3"
            />
          </div>

          <div style="width: 400px; height: 400px;">
            <widget-component
              class="strand"
              title="Barsebäckstrand"
              device="cube_1"
            />
          </div>
      

• unit: string = "°C"
  The unit to display for the value
• title: string = ""
  The title to display on the widget
• type: string = "Badtemperatur"
  Type of measurement for the widget
• device: string = ""
  The device ID to fetch data for
• update-interval: number = 600000
  Interval in milliseconds for refreshing data (default 10 minutes)
• style-override: string = ""
  Legacy style override property (see below)
• api-base: string = "https://api.onlinelogger.net/"

For legacy support (browsers without support for CSS variables) the top level styles such as the background image can be overriden with inline styling:

          <div style="width: 400px; height: 400px;">
            <widget-component
              class="hamn"
              title="Barsebäckshamn"
              device="cube_3"
              style="background-image: linear-gradient(
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.05)
                ),
                url('https://upload.wikimedia.org/wikipedia/commons/2/2d/Barseb%C3%A4ckshamn_2.jpg');"
            />
          </div>

          <div style="width: 400px; height: 400px;">
            <widget-component
              class="strand"
              title="Barsebäckstrand"
              device="cube_1"
              style="background-image: linear-gradient(
                  rgba(0, 0, 0, 0.1),
                  rgba(0, 0, 0, 0.0)
                  ),
                  url('/img/barsebackstrand.jpg');
                  background-position: center;
                  background-size: cover;"
            />
          </div>
        

And the lower level styles can be overriden for legacy compatibility once with the style-override property (not per instance due to limitations in the ShadyCSS polyfill). Note that this property has to be set on the first instance of the widget custom element on the page:

          <div style="width: 300px; height: 300px;">
            <widget-component
              class="hamn"
              title="Barsebäckshamn"
              device="cube_3"
              style="
              background-image: linear-gradient(
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.05)
                ),
                url('https://upload.wikimedia.org/wikipedia/commons/2/2d/Barseb%C3%A4ckshamn_2.jpg');
              "
              style-override="
                .value {
                  font-size: 1.8em;
                }
                .main-wrapper {
                  margin: 10% 0 15%;
                  height: 33%;
                }
              "
            />
          </div>