Custom dashboard widgets

luetage

Widget Collection

Vivaldi introduced the Dashboard feature, a native alternative to the various new tab extensions available from the Chrome Web Store, back in version 6.10.34834. It allows users to display a variety of useful widgets on the startpage. One of the available options is the addition of webpage widgets, which enables us to create custom widgets loaded directly from the users’s file system. Following some basic examples and then more advanced stuff.

Basic

To create your first custom widget all it takes is one HTML file, some HTML boilerplate, and loading an already existing widget from the web. I made two example widgets to showcase this previously.

preview

Weather widget

Visit https://weatherwidget.io, choose a location and language
Click on “get code” and copy the code to clipboard
Create an HTML file with following content and save it to your disk (e.g.
weather.html)

<!DOCTYPE html>
<html lang="en">

<head>
 <title>Weather</title>
 <meta name="content-type" content="text/html; charset=UTF-8" />
</head>

<body style="background: var(--colorBg)">
 <div style="margin-top: 60px">
   <!-- replace this line with widget code -->
 </div>
</body>

</html>

Paste the code from the clipboard inside the div of the body element. Maybe
adjust the body color to your theme color. Save the file. Open a new webpage
widget on the dashboard and use the file location as URL (e.g.
file:///path/to/file/weather.html)

Note: Nowadays Vivaldi provides a native weather widget.

Euroleague widget

Create a new HTML file (e.g. euroleague.html)
Copy and paste following code inside the file

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Euroleague Standings</title>
  <meta name="content-type" content="text/html; charset=UTF-8" />
</head>

<body style="background: var(--colorBg)">
  <div data-widget-type="entityStandings" data-entity-type="league" data-entity-id="569" data-lang="en"
    data-widget-id="d788a528-b42d-4305-a9c5-6c1a1edadc9f" data-limit-height-display="350" data-theme="dark"></div>
  <div id="powered-by">Powered by<a id="powered-by-link" href="https://www.365scores.com"
      target="_blank">365Scores.com</a></div>
</body>

<script src="https://widgets.365scores.com/main.js"></script>

</html>

Use file location as webpage URL after creating a new webpage widget in your
dashboard.

Advanced

First of, whether you are creating a widget, or are using one of the widgets from the collection, I would suggest hiding the URL field. It takes up much needed space, especially on regular sized widgets. On tall widgets it’s not that important, but what good does it do having your file path in view all the time?

Disclaimer: The Vivaldi developers deem it a security risk hiding the URL field, that’s why it’s enabled by default and cannot be disabled optionally. When you are browsing a widget and land on a different domain, someone could try to steal your credentials and data. Be mindful what you do on webpage widgets.

How to hide the URL field with custom CSS

Create a folder on your file system and give it a name, for example vivaldi-mods
Create a CSS file in the folder, for example custom.css

Open the file, paste following instruction, and save

.dashboard-widget .url-wrapper {
  display: none;
}

Tick “Allow CSS modifications” in vivaldi://settings/experiments
Restart Vivaldi
Visit vivaldi://settings/appearance and under “Custom UI Modifications” select your folder
Open a new window or restart Vivaldi

Dimensions

You can develop for the regular size widget, tall, or both. Dimensions can be toggled independently per widget from the three dot menu.

Size	URL field	No URL field
Regular	394×154.83	394×170
Tall	394×380.39	394×398

Theme variables

Starting from Vivaldi version 7.1.35467 the browser UI exposes following variables to webpage widgets, which we can use to theme our widgets native.

`var(--colorBg)`	Background
`var(--colorFg)`	Foreground
`var(--colorHighlightBg)`	Highlight
`var(--colorHighlightFg)`	Highlight foreground
`var(--radius)`	Corner rounding in degrees
`var(--isDarkTheme)`	Either 0 or 1

Theming has to be enabled for each widget separately, either by checking “Share Theme Colors” when adding the widget, or by using the “Change Webpage URL” interface from the menu. After enabling this option you can take a look at the variables by opening developer tools for the widget (right‐click ⇒ Developer Tools ⇒ Inspect).

The basic colors are a good starting point, for more detailed theming read about @container rules and color mixing.

Connecting to APIs

We can either keep our widgets strictly offline, or connect to APIs to gather data and information we want to display. Because the widgets reload on each tab switch, and since a user could have many dashboard tabs, it is vital we keep API calls to a minimum. Save data to local storage and check for it on load, then introduce logic to get fresh data when necessary. Local storage doesn’t survive restarts, because we are loading from the file system. The remedy would be a local HTTP server, but we can’t expect users to run one.

mib2berlin

@luetage
Hi, very nice, the weather is shxtty but the widget work.

stardepp

@luetage Thank you for this very useful weather Widet. It also works for me.

I have changed the language HTML to "de", but the language remains English, or is it not possible to change the language of the widget?

Bild Text

nomadic

@stardepp You need to set it in the weather widget's settings before clicking the "get code" option.

It is on the Settings tab next to where you set the location.

Image showing the weatherwidget.io settings for language

DoctorG

@luetage Thanks for sharing with us

DoctorG

@stardepp Adding attribute lang to HTML element does not change the language of a webpage content, it tells assistive technology and search engines which language for content is used.

Catweazle

I'm with the stable version, still no dashboard, but if it will be implemented, is it possible to use those widgets from Rainmeter(FOSS, based on scripts)? That would be a killer function.

luetage

@Catweazle You will have to find the source for widgets you’d like to display. Where do rainmeter widgets get their content from, which APIs do they use? If you can get a hold of the data, you should be able to integrate them.

WildEnte

I don't have the skills to tinker dashboard widgets to look like I want them to, so I'm looking forward to some sort of store or (as Home Assistant calls it) integrations.

Things I've tried (and which I think people may want) are almost all not working that well in the Vivaldi dashboard

Nasa Astronomy picture of the day ... I have no idea how to show only the pic.
https://apod.nasa.gov/apod/astropix.html
WhatsApp ... web.whatsapp.com -> works as panel, not as widget (if mail is on my dashboard, I might want to see my messengers there too...)
Spotify ... https://open.spotify.com unsurprisingly opens as the web page, only after an additional click do I see the mini player in a very bad format.

Everytime I leave the dashboard and come back, it asks me over and over again to choose the player on my network. Currently Unusable.
Here's how it looks in Home Assistant:
Speaking of Home Assistant, it comes with its own dashbaord that's working really well. So if I have Home Assistant running the two things that make me prefer Vivaldi's Dashboard over HA's is Mail/Calendar/Feeds, and showing my Speeddials in a widget. I can set up home assistant 'cards' (= what HA calls widgets) in Vivaldi's dashboard, and that's pretty cool.

Usually the webpage widget would need to zoom out and show a specific part of the page.

Other widgets Vivaldi might want to add (which are specific to Vivaldi's unique functions and thus of particular interest)

Reading list (right now I don't use reading lists because I need to remember to click a button to access them)
Closed pages
Status widget (showing status from mail/calendar/sync)

luetage

@WildEnte I can’t do all of this. But the picture of the day seems simple enough. Gonna cook something up right now, because it could interest more people. It’s a good idea.

WildEnte

@luetage said in Custom dashboard widgets:

I can’t do all of this.

I'm sorry if I made you think I asked for you to create solutions for these topics - I'm just quite excited by the dashboard, and I understood this thread was the one where the limitations of the current (early, first preview) solutions should be discussed. Some of the integrations won't be simple at all.

luetage

Astronomy Picture of the Day

light	dark

Uses the NASA Open API to display the APOD in a Vivaldi webpage widget.

Installation

Use the link to download the webpage folder apod-widget.zip. You can preview its contents by visiting https://github.com/luetage/vivaldi_modding/tree/master/apod-widget first.

Download https://downgit.github.io/#/home?url=https://github.com/luetage/vivaldi_modding/tree/master/apod-widget

Extract the zip file and save the folder to a location of your choice (e.g. alongside other Vivaldi backup files).

Open the dashboard, add a new webpage widget, check “Share Theme Colors” and use the path to the apod.html file within the apod-widget folder as webpage URL ☛ file:///full/path/to/folder/apod-widget/apod.html. Alternatively open the HTML file directly in Vivaldi and copy the address.

API key

The provided API key is a demo key, which is rate limited to 30 requests per hour and 50 requests per day. The widget saves the data to local storage for up to 2 hours, therefore you won’t run out of requests when using the widget casually. Should you decide to make heavy use of the widget’s ability to browse the APOD archives, I would suggest to generate your own API key @ https://api.nasa.gov. They only need an email address and immediately send out the API key with a limit of 1000 requests per hour, which is more than enough. While checking the request headers I found out the limit appears to be 2000 requests in practice, but it doesn’t really matter for our purposes.

To apply your newly generated API key, open apod.js and add the string between EDIT START and EDIT END at the beginning of the file, replacing the DEMO_KEY.

Features

The widget displays the APOD of the day. The calendar input field allows accessing the APOD archives of any date between June 1995 and today. Some images and videos might not be accessible anymore. In any case, you can always check out the corresponding APOD page by right clicking the image and opening the webpage link in a new tab.

Automatically adapts to your Vivaldi theme when you check “Share Theme Colors” when adding the widget.

Have fun and tell me whether you encounter any issues!

History

2024.10.0 Release
2024.10.1 Sanitize CSS and HTML. Handle videos and check whether copyright is available
2024.10.2 Dedicated automatic light and dark themes. Better error handling. Calendar function to load the picture for any available day. Webpage favicon, adjust CSS for widget/panel and tab usage, themed scrollbar
2024.10.3 Bug fixes for copyright and date handling
2024.10.4 Handle media_type “other”
2024.10.5 Dashboard camo support
2024.11.0 Use local storage
2024.12.0 Use Vivaldi theme variables

WildEnte

@luetage Space works best in a dark theme (c:=

luetage

@WildEnte I see this as a modding topic. Showing what’s possible with the tools we have right now. But yes, limitations, problems, and bugs become apparent once you play around with it.

edwardp

@luetage Nice!

sjudenim

@WildEnte

That's because the Dashboard is actually closing the pages, so when you open it everything is loaded again. Spotify seems to have a sniffer so to speak for first time page loading. Unlike in the side panel where the page is always running in the background.

The Dashboard looks like it will give the choice to have certain things always loaded (side panel), with other things closed until we open them (dashboard). I like that

WildEnte

@sjudenim There are some pages (like the astronomy picture of the day) that you do want to reload, but you certainly don't want it to reload every time you open the dashboard. And then there are pages that you want to keep updated continuously.

It's good that we have periodic reload in Vivaldi, I think the webpage widget needs it.

luetage

@WildEnte I think sjudenim is right. There is content far better served through a webpanel or regular tab. The widgets are the third type, each has its purpose. Startpage tabs are fleeting and can be reopened easily—at which point they will update anyway.

I reworked the astronomy widget. The CSS was sloppy, the HTML had errors. It didn’t display well in a tab. It didn’t handle cases where no copyright is available and it couldn’t deal with videos. It seems like videos come up from time to time, but I don’t believe it fruitful to watch them in a widget. I wrote code to display the youtube video thumbnail instead. The video can still be watched by right‐clicking the picture and opening the APOD website in a new tab. Let me know whether anything else is amiss. This is a tad more complicated than I first expected.

WildEnte

@luetage you put a lot of work into this. Thank you!

3dvs

Can we have quotes widget similar too

https://forum.vivaldi.net/topic/68995/show-quotes-on-new-tab