Merge pull request #394 from jo-mueller/add-repr_html

added `_repr_html_` method for `_ImageWrapper`
ome · Apr 24, 2024 · 65bdd13 · 65bdd13
2 parents 2864126 + b0a7fad
commit 65bdd13
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 1 deletion.
diff --git a/src/omero/gateway/__init__.py b/src/omero/gateway/__init__.py
@@ -29,7 +29,7 @@
 from omero.cmd import Chgrp2, Delete2, DoAll, SkipHead, Chown2
 from omero.cmd.graphs import ChildOption
 from omero.api import Save
-from omero.gateway.utils import ServiceOptsDict, GatewayConfig, toBoolean
+from omero.gateway.utils import ServiceOptsDict, GatewayConfig, toBoolean, image_to_html
 from omero.model.enums import PixelsTypeint8, PixelsTypeuint8, PixelsTypeint16
 from omero.model.enums import PixelsTypeuint16, PixelsTypeint32
 from omero.model.enums import PixelsTypeuint32, PixelsTypefloat
@@ -245,6 +245,13 @@ def __init__(self, conn=None, obj=None, cache=None, **kwargs):
                     self._conn.SERVICE_OPTS)
         self.__prepare__(**kwargs)
 
+    def _repr_html_(self):
+        """
+        Returns an HTML representation of the object. This is used by the
+        IPython notebook to display the object in a cell.
+        """
+        return image_to_html(self)
+
     def __eq__(self, a):
         """
         Returns true if the object is of the same type and has same id and name

diff --git a/src/omero/gateway/utils.py b/src/omero/gateway/utils.py
@@ -217,3 +217,111 @@ def propertiesToDict(m, prefix=None):
         except:
             d[items[-1]] = value
     return nested_dict
+
+def image_to_html(image):
+    import base64
+
+    try:
+        pixsizeX = '{:.3f}'.format(image.getPixelSizeX())
+        pixsizeY = '{:.3f}'.format(image.getPixelSizeY())
+        pixsizeZ = '{:.3f}'.format(image.getPixelSizeZ())
+        UnitX = image.getPixelSizeX().getUnit()
+        UnitY = image.getPixelSizeY().getUnit()
+        UnitZ = image.getPixelSizeZ().getUnit()
+    except:
+        pixsizeX, pixsizeY, pixsizeZ = 'na', 'na', 'na'
+        UnitX, UnitY, UnitZ = 'na', 'na', 'na'
+
+    html_style_header = """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Image Details</title>
+        <style>
+            img {
+                min-width: 250px; /* Set the minimum width for all images */
+                min-height: 250px; /* Set the minimum height for all images */
+            }
+            .align-top {
+            vertical-align: top;
+            }
+            .text-right {
+            text-align: right;
+            }
+        </style>
+    </head>
+    """
+
+    def obj_html(obj, otype):
+        return f"""<tr>
+                <td><b>{otype}</b></td>
+                <td class=text-right>{obj.id if obj else ""}</td>
+                <td class=text-right>{obj.name if obj else ""}</td>
+                </tr>
+            """
+
+    # create a sub-table for image information
+    table_imageinfo = f"""
+    <table>
+        <tr><th></th><th>ID</th><th>Name</th></tr>
+        {obj_html(image, 'Image')}
+        {obj_html(image.getParent(), 'Dataset')}
+        {obj_html(image.getProject(), 'Project')}
+    </table>
+    """
+
+    # get entries for thumbnail and dimensions
+    encoded_image = base64.b64encode(image.getThumbnail()).decode('utf-8')
+    dimensions = f"""(
+        {image.getSizeT()},
+        {image.getSizeC()},
+        {image.getSizeZ()},
+        {image.getSizeY()},
+        {image.getSizeX()})"""
+    physical_dims = f"""({pixsizeZ}, {pixsizeY}, {pixsizeX})""".format()
+    physical_units = f"""({UnitZ}, {UnitY}, {UnitX})"""
+
+    table_dimensions = f"""
+    <table>\n
+        <tr>\n
+            <td><b>Dimensions (TCZYX): </b></td> <td class=text-right>{dimensions}</td>\n
+        </tr>\n
+        <tr>\n
+            <td><b>Voxel/Pixel dimensions (ZYX): </b></td> <td class=text-right>{physical_dims}</td>\n
+        </tr>\n
+        <tr>\n
+            <td><b>Physical units: </b></td> <td class=text-right>{physical_units}</td>\n
+        </tr>\n
+        <tr>\n
+            <td><b>Channel Names: </b></td> <td class=text-right>{image.getChannelLabels()}</td>\n
+        </tr>\n
+    </table>
+    """
+
+    table_assembly = f"""
+    <table>
+    <tr>
+        <td><div class="thumbnail">
+            <img src="data:image/jpeg;base64,{encoded_image}" alt="Thumbnail">
+        </div></td>
+        <td class="align-top"><h2>Image information </h2>
+        {table_imageinfo}
+        </td>
+    </tr>
+    </table>
+    <table>
+        <tr>
+            <td>{table_dimensions}</td>
+        </tr>
+    </table>
+    """
+
+    return '\n'.join([
+        html_style_header,
+        '<body>',
+        table_assembly,
+        '</body>',
+        '</html>'
+    ])