CODEWITHSUNDEEP
pythonpython-imaging-librarybokeh
athlonshi
athlonshi

Reputation: 1821

Display PIL.Image.image to bokeh hoovertool

Trying to displace images to Bokeh hoover pop-ups but could not see the images. The images are stored as PIL.Image.image in a pandas dataframe series The code is as shown

source = ColumnDataSource(data=dict(x=tsne_pca[:,0], y=tsne_pca[:,1], 
desc=df['CAS'], color=df['Property'], 
                                imgs=df['images']))

hover = HoverTool(tooltips="""
<div>
    <div>            
    <img
         src="@imgs" height="42" alt="@imgs" width="42"
         style="float: left; margin: 0px 15px 15px 0px;"
         border="2"
        ></img>
    </div>
    <div>
        <span style="font-size: 17px; font-weight: bold;">@desc</span>
    </div>
</div>
"""
)
p = figure(plot_width=700, plot_height=700, title='T-SNE Molecule Display', 
tools=['reset,box_zoom,wheel_zoom,zoom_in,zoom_out,pan',hover])

p.circle('x', 'y', size=10, source=source, fill_alpha=0.2, 
     line_color = linear_cmap('color', palette=[colors[0], 
colors[1]], low=min(y), high=max(y)))
show(p)

Also tried to decode the images to strings, but also could not see the images but only strings.

Any suggestions? Thanks!

Upvotes: 0

Views: 591

Answers (1)

athlonshi
athlonshi

Reputation: 1821

Figured out a way to display the decoded images Change the html script

src="@imgs" height="42" alt="@imgs" width="42"

to the following

data:image/jpeg;base64, @imgs" height="42" alt="@imgs" width="42"

Completed code

hover = HoverTool(tooltips="""
<div>
    <div>            
    <img
         src="data:image/jpeg;base64, @imgs" height="300px" width="300px"
         style="float: left; margin: 15px 15px 15px 15px;"
         border="2"
        ></img>
    </div>
    <div>
        <span style="font-size: 16px;">@desc</span>
    </div>
    <div>
        <span style="font-size: 16px; font-weight: bold;">TSI:@color</span>
    </div>
</div>
"""

)

Upvotes: 1

Related Questions