"Favicon" how to set using a base64 image

[MikeTheWatchGuy]

I would like to set my favicon on the tab of the browser.

I typically store icons as base64 images right in the code, although I do also provide a filename parameter too that can be loaded.

Is there a bit of sample code somewhere that I'm missing?

[dddomodossola]

Hello @MikeTheWatchGuy ,

Here is an example to setup a favicon for the application:

import remi.gui as gui
from remi import start, App
import os

class MyApp(App):
    def main(self):
        #setting up the application icon
        self.page.children['head'].set_icon_file("/res:icon.png")
        #eventually you can setup an icon with base64 data
        #self.page.children['head'].set_icon_data( base64_data="base64 data here", mimetype="image/png" )

        #creating a container VBox type, vertical (you can use also HBox or Widget)
        main_container = gui.VBox(width=300, height=200, style={'margin':'0px auto'})

        # returning the root widget
        return main_container


if __name__ == "__main__":
    start(MyApp)

[MikeTheWatchGuy]

How can I write something that will convert from Python file and variables into the format that Remi expects. The string "/res:icon.png" is not something that is normal in Python.

What I would like to write a function that converts from base64 to whatever Remi needs and one that converts from a Python filename into again whatever it is the Remi expects.

I wrote this a while back, but didn't end up using it.

def base64_to_style_image(base64_image):
    x ="url('data:image/png;base64,"
    x += str(base64_image)
    x += "')"
    return x

[dddomodossola]

@MikeTheWatchGuy in the above example there is a commented line that shows the possibility to set base64 data for the favicon

self.page.children['head'].set_icon_data( base64_data="base64 data here", mimetype="image/png" )

This should solve your problem.

However, a little explanation about remi resource file management

In remi you have to declare folders from which you can get resources (like image or so on). This declaration have to be done in the App constructor. ie.

class MyApp(App):
    def __init__(self, *args):
        my_resource_path = os.path.join(os.path.dirname(__file__), 'res')
        my_resource_path2 = r'c:\mymusics\'
        my_resource_path3 = r'e:\my_images\landscapes\'
        super(MyApp, self).__init__(*args, static_file_path={'res':my_resource_path, 'music':my_resource_path2, 'landscapes':my_resource_path3})

You have to pass a dictionary to the static_file_path parameter. In that dictionary the key will be used to point to a specific folder defined by the value. So, when you want to point to a specific file, you have to compose the filename as:

/key:filename

supposing to have an image called brooklyn_skyline.png in the folder 'e:\my_images\landscapes', and considering we previously defined it as landscapes , we would have this filename:

/landscapes:brooklyn_skyline.png

so you can create an image as gui.Image('/landscapes:brooklyn_skyline.png')

remi implictly replaces landscapes with the previously defined folder ( 'e:\my_images\landscapes\brooklyn_skyline.png' )

[MikeTheWatchGuy]

Still working on this one.... my PyCharm environment is messed up so I can't get proper debug info back.

I've added code, hard coded to values, to my MyApp main but it's not setting the icon. I'll get more info soon.

[dddomodossola]

@MikeTheWatchGuy you gave me an idea and I build two function to load images/resources from standard path name. Look at this example https://github.com/dddomodossola/remi/blob/master/examples/resources_app.py The new functions load_resource and to_uri can be useful for you. ;-)