diff --git a/doc/groovy/TableAPI.ipynb b/doc/groovy/TableAPI.ipynb index 99b7272846..9ad9289c89 100644 --- a/doc/groovy/TableAPI.ipynb +++ b/doc/groovy/TableAPI.ipynb @@ -424,7 +424,7 @@ "source": [ "## HTML format\n", "\n", - "HTML format allows markup and styling of the cell's content. Interactive JavaScript is not supported however." + "HTML format allows markup and styling of the cell's content. Interactive JavaScript and images are not supported however. See below for image support." ] }, { @@ -440,6 +440,52 @@ "tbl" ] }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Image format\n", + "\n", + "Image format allows loading any image supported by the web browser, including PNG, JPG, and SVG formats. It can be a relative URL served from the same directories as the notebook itself, an absolute URL to anywhere on the web, or a data URL with encoded data." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "tbl = new TableDisplay(['Peacock': '../resources/img/butterfly1.jpg',\n", + " 'Morpho': '../resources/img/butterfly2.jpg',\n", + " 'Swallowtail': '../resources/img/butterfly3.jpg']);\n", + "tbl.setStringFormatForColumn(\"Value\", TableDisplayStringFormat.getImageFormat())\n", + "tbl" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "tbl = new TableDisplay(['https://en.wikipedia.org/wiki/IPython': 'http://jupyter.org/assets/nav_logo.svg',\n", + " 'https://en.wikipedia.org/wiki/Two_Sigma': 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/2_sigma_logo.png/150px-2_sigma_logo.png']);\n", + "tbl.setStringFormatForColumn(\"Value\", TableDisplayStringFormat.getImageFormat())\n", + "tbl" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "tbl = new TableDisplay(['up': 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaGVpZ2h0PSI2NCIgd2lkdGg9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPg0KICA8cG9seWdvbiBmaWxsPSIjNmJhMmM3IiBwb2ludHM9IjMwLDQgNCw2MCA2MCw2MCI+PC9wb2x5Z29uPg0KPC9zdmc+DQo=',\n", + " 'down': 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGhlaWdodD0iNjQiIHdpZHRoPSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij4KICA8cG9seWdvbiBmaWxsPSIjNmJhMmM3IiBwb2ludHM9IjMwLDYwIDYwLDQgNCw0Ij48L3BvbHlnb24+Cjwvc3ZnPgo=']);\n", + "tbl.setStringFormatForColumn(\"Value\", TableDisplayStringFormat.getImageFormat())\n", + "tbl" + ] + }, { "cell_type": "markdown", "metadata": {}, diff --git a/doc/resources/img/butterfly1.jpg b/doc/resources/img/butterfly1.jpg new file mode 100644 index 0000000000..43edf483a1 Binary files /dev/null and b/doc/resources/img/butterfly1.jpg differ diff --git a/doc/resources/img/butterfly2.jpg b/doc/resources/img/butterfly2.jpg new file mode 100644 index 0000000000..5122c4feca Binary files /dev/null and b/doc/resources/img/butterfly2.jpg differ diff --git a/doc/resources/img/butterfly3.jpg b/doc/resources/img/butterfly3.jpg new file mode 100644 index 0000000000..214c7bdf4d Binary files /dev/null and b/doc/resources/img/butterfly3.jpg differ