Display the contents of an HTML file on my desktop

Question

I found a very old post on Display the HTML content on desktop as a widget. This is an updated answer with the help of these two answers Answer-1 and Answer-2. I tried to run this as a python script "python file.py" (correct me if I am wrong bcz I have no background knowledge, just got fascinated with the post and trying to get the working script)

So After running the script I got some errors which I resolved by DuckDuckGoing but still there are some errors that needed some experts.

Current script

I just updated first three lines, changed WebKit --> WebKit2.

import gi
gi.require_version('Gtk', '3.0')
gi.require_version('WebKit2', '4.0')
from gi.repository import WebKit2, Gtk, Gdk, Gio, GLib
import signal, os
class MainWin(Gtk.Window):
    def init(self):
        Gtk.Window.init(self, skip_pager_hint=True, skip_taskbar_hint=True)
        self.set_wmclass("sildesktopwidget","sildesktopwidget")
        self.set_type_hint(Gdk.WindowTypeHint.DOCK)
        self.set_size_request(600,400)
        self.set_keep_below(True)
    #Set transparency
    screen = self.get_screen()
    rgba = screen.get_rgba_visual()
    self.set_visual(rgba)
    self.override_background_color(Gtk.StateFlags.NORMAL, Gdk.RGBA(0,0,0,0))

    #Add all the parts
    self.view = WebKit2.WebView()
    self.view.set_transparent(True)
    self.view.override_background_color(Gtk.StateFlags.NORMAL, Gdk.RGBA(0,0,0,0))
    self.view.props.settings.props.enable_default_context_menu = False
    self.view.load_uri(&quot;file:///home/sai/Downloads/todo.html&quot;)

    box = Gtk.Box()
    self.add(box)
    box.pack_start(self.view, True, True, 0)
    self.set_decorated(False)
    self.connect(&quot;destroy&quot;, lambda q: Gtk.main_quit())

    #Show all the parts
    self.show_all()
    self.move(100,100)


def refresh_file(*args):
    print args
    mainwin.view.reload()
def file_changed(monitor, file, unknown, event):
    # reload
    GLib.timeout_add_seconds(2, refresh_file)
if name == 'main':
    gio_file = Gio.File.new_for_path("/home/sai/Downloads/todo.html")
    monitor = gio_file.monitor_file(Gio.FileMonitorFlags.NONE, None)
    monitor.connect("changed", file_changed)
mainwin = MainWin()
signal.signal(signal.SIGINT, signal.SIG_DFL) # make ^c work
Gtk.main()

Current Situation

I am getting this error and not able to resolve.

#$ python file.py 
Traceback (most recent call last):
  File "file.py", line 51, in <module>
    mainwin = MainWin()
  File "file.py", line 23, in __init__
    self.view.set_transparent(True)
AttributeError: 'WebView' object has no attribute 'set_transparent'

Please help me to get the working script to display the HTML page as a desktop widget. I am using Ubuntu Mate 20.04.

Raffa · Answer 1 · 2021-04-10T15:07:41.097

Life is much easier than that!

Step by step

Use google-chrome in --app mode with wmctrl like so:
```
google-chrome --app="https://askubuntu.com/" && wmctrl -r :ACTIVE: -b add,below
```
There you have it... your "widget" is at your desktop... move it, resize it or close it.

To make it transparent, use xprop like so:

xprop -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY "0xCCFFFFFF"

Then, touch it.

To strip it naked, use xprop again like so:

xprop -f _MOTIF_WM_HINTS 32c -set _MOTIF_WM_HINTS "0x2, 0x0, 0x0, 0x0, 0x0"

Then, touch it again.

All at once

You can do all the above in one step, like so:

google-chrome --disable-gpu --disable-software-rasterizer --app="https://askubuntu.com/" && \
wmctrl -r :ACTIVE: -e 0,0,0,550,800 -b add,below && \
xprop -id "$(xprop -root _NET_ACTIVE_WINDOW | awk '{print $5}')" \
-f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY "0xCCFFFFFF" && \
xprop -id "$(xprop -root _NET_ACTIVE_WINDOW | awk '{print $5}')" \
-f _MOTIF_WM_HINTS 32c -set _MOTIF_WM_HINTS "0x2, 0x0, 0x0, 0x0, 0x0"

-e 0,0,0,550,800 sets window position and size... the last four numbers. See man wmctrl
-set _NET_WM_WINDOW_OPACITY "0xCCFFFFFF" sets the window transparency. Change CC to one of these to change transparency level.

N0rbert · Accepted Answer · 2021-04-05T18:15:58.097

FYI - original script runs normally on Ubuntu MATE 14.04 LTS (EoL), 16.04 LTS (EoL) and 18.04 LTS.

For Ubuntu MATE 20.04 LTS you can use the following adapted code:

import gi
gi.require_version('Gtk', '3.0')
gi.require_version('WebKit2', '4.0')
from gi.repository import WebKit2, Gtk, Gdk, Gio, GLib
import signal, os
document="/usr/share/javascript/mathjax/test/sample.html"
class MainWin(Gtk.Window):
    def init(self):
        Gtk.Window.init(self, skip_pager_hint=True, skip_taskbar_hint=True)
        self.set_wmclass("sildesktopwidget","sildesktopwidget")
        self.set_type_hint(Gdk.WindowTypeHint.DOCK)
        self.set_size_request(600,400)
        self.set_keep_below(True)
    #Set transparency
    screen = self.get_screen()
    rgba = screen.get_rgba_visual()
    self.set_visual(rgba)
    self.override_background_color(Gtk.StateFlags.NORMAL, Gdk.RGBA(0,0,0,0))

    #Add all the parts
    self.view = WebKit2.WebView()
    #self.view.set_transparent(True)
    self.view.override_background_color(Gtk.StateFlags.NORMAL, Gdk.RGBA(0,0,0,0))
    #self.view.props.settings.props.enable_default_context_menu = False
    # configure transparency as in https://github.com/LTSchmiddy/dungeon-commander/blob/8d5c58ca321a05519c8cb1c5afdebba4954cbfca/src/webview/platforms/gtk.py#L132
    configure_transparency(self)
    configure_transparency(self.view)
    wvbg = self.view.get_background_color()
    wvbg.alpha = 0.0
    self.view.set_background_color(wvbg)

    self.view.load_uri(&quot;file://&quot;+document)

    box = Gtk.Box()
    self.add(box)
    box.pack_start(self.view, True, True, 0)
    self.set_decorated(False)
    self.connect(&quot;destroy&quot;, lambda q: Gtk.main_quit())

    #Show all the parts
    self.show_all()
    self.move(100,100)


def refresh_file(*args):
    print args
    mainwin.view.reload()
def file_changed(monitor, file, unknown, event):
    # reload
    GLib.timeout_add_seconds(2, refresh_file)
configure transparency as in https://github.com/LTSchmiddy/dungeon-commander/blob/8d5c58ca321a05519c8cb1c5afdebba4954cbfca/src/webview/platforms/gtk.py#L549
def configure_transparency(c):
    c.set_visual(c.get_screen().get_rgba_visual())
    c.override_background_color(Gtk.StateFlags.ACTIVE, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.BACKDROP, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.DIR_LTR, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.DIR_RTL, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.FOCUSED, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.INCONSISTENT, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.INSENSITIVE, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.NORMAL, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.PRELIGHT, Gdk.RGBA(0, 0, 0, 0))
    c.override_background_color(Gtk.StateFlags.SELECTED, Gdk.RGBA(0, 0, 0, 0))
    transparentWindowStyleProvider = Gtk.CssProvider()
    transparentWindowStyleProvider.load_from_data(b"""
        GtkWindow {
            background-color:rgba(0,0,0,0);
            background-image:none;
        }""")
    c.get_style_context().add_provider(transparentWindowStyleProvider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
if name == 'main':
    gio_file = Gio.File.new_for_path(document)
    monitor = gio_file.monitor_file(Gio.FileMonitorFlags.NONE, None)
    monitor.connect("changed", file_changed)
mainwin = MainWin()
signal.signal(signal.SIGINT, signal.SIG_DFL) # make ^c work
Gtk.main()

Notes:

I'm not Python expert yet, but it works as expected:
The script needs the packages installed by sudo apt-get install python2 python-gi gir1.2-webkit2-4.0 .

Display the contents of an HTML file on my desktop

Current script

Current Situation

2 Answers2

Step by step

All at once

configure transparency as in https://github.com/LTSchmiddy/dungeon-commander/blob/8d5c58ca321a05519c8cb1c5afdebba4954cbfca/src/webview/platforms/gtk.py#L549

Linked