Displaying SVG with Oracle HTML DB (aka Application Express) Derek Scuffell, Syngenta

Displaying SVG with Oracle HTML DB (aka Application Express) Derek Scuffell, Syngenta

The hoops you have to go through What is HTML DB (aka Application Express, Apex) A bit about SVG How Apex uses SVG The how to show your SVGs in HTML DB 2

What is HTML DB? Quick assembly of reporting and data entry applications Based on existing tables and views or data from spreadsheets ~ No programming or scripting Instant deployment on the Web Use the full power of Oracle Database 10g 3

Oracle HTML DB Offers The Qualities of a Personal Database Productivity Ease of Use Flexibility The Qualities of an Enterprise Database Security Integrity Scalability Availability Portability Built for the Web 4

Opportunities with HTML DB Spreadsheets Desktop Databases HTML DB File Servers Any Browser 5

How it Works Shared Workgroup Database Service Centrally Deployed & Managed Accessed anywhere via a Browser Declarative development style Oracle HTML DB 6

Logical Architecture Discovery Applications Applications Schema A Field Trials Applications Applications Schema B Informatics Applications Applications Schema C Oracle HTML DB 7

8 HTML DB home page

9 Declarative App Development

Scalable Vector Graphics (SVG) XML 2D vector graphics Information rich vs image Information usable by applications e.g. BkChem Open Standard W3C Browser support plug-in & built-in 10

Why will SVG use increase? Simplicity Small no. of tags Useable by anyone Inexpensive Because of simplicity many editors available e.g. cheap, vi, inkscape, BKChem Slightly more costly Dreamweaver, visio 2003 Dynamic XML is extensible so can be developed and extended Non-proprietary No vendor lock-in leads to Greater choice of tools available 11

SVGs in Oracle Apex Charts Charts, trees Rendering Adobe Built-in: Mozilla, Camino 12

Structure definitions in use SMILES Daylight Chemical Systems MOL files - MDL CML Chemical Markup Language INCHI - The IUPAC International Chemical Identifier?SVG Well it doesn t really 13

Example SVG for ethanol <?xml version="1.0" encoding="utf-8"?> <svg height="297.000000mm" version="1.0" viewbox="0 0 792 1121" width="210.000000mm" xmlns="http://www.w3.org/2000/svg"> <g font-family="helvetica" font-size="12pt" stroke-linecap="round"> <g stroke="#000" stroke-width="1.0"> <line x1="126.89" x2="149.78" y1="66.78" y2="80.0"/> </g> <g stroke="#000" stroke-linecap="butt" stroke-width="1.0"> <line x1="96.0" x2="89.0" y1="75.379641765" y2="71.3368283093"/> </g> <g stroke="#000" stroke-width="1.0"> <line stroke-width="1.0" x1="126.89" x2="128.712731324" y1="66.78" y2="63.624"/> <line stroke-width="1.0" x1="134.180925295" x2="136.003656619" y1="54.156" y2="51.0"/> </g> <g stroke="#000" stroke-width="1.0"> <line x1="112.0" x2="126.89" y1="75.379641765" y2="66.78"/> </g> <g stroke="#000" stroke-width="1.0"> <line stroke-width="1.0" x1="149.78" x2="151.281616426" y1="80.0" y2="82.6"/> <line stroke-width="1.0" x1="155.786465706" x2="157.288082132" y1="90.4" y2="93.0"/> </g> <g stroke="#000" stroke-width="1.0"> <polygon fill="#000" points="150.28 80.0 152.28 96.0 147.28 96.0 149.28 80.0" stroke="#000"/> </g> <g stroke="#000" stroke-width="1.0"> <polygon fill="#000" points="126.39 66.78 124.39 47.0 129.39 47.0 127.39 66.78" stroke="#000"/> </g> <g stroke="#000" stroke-width="1.0"> <line x1="149.78" x2="165.0" y1="80.0" y2="71.2097684578"/> </g> <text fill="#000" font-family="helvetica" font-size="12pt" x="166.3" y="69.78">h</text> <text fill="#000" font-family="helvetica" font-size="12pt" x="120.3" y="43.35">h</text> </g> </svg> 14

Structure tables DS_STRUCTURES Name Null? Type -------------------------- -------- ------------- STRUCTURE_ID NOT NULL NUMBER(8) REGISTRATION_DATE NOT NULL DATE FORMULA VARCHAR2(700) WEIGHT NUMBER(12,4) STEREO VARCHAR2(40) PROCESS_DATE NOT NULL DATE NO_SEARCH_KEYS VARCHAR2(1) STRUCTURE_CLASS NOT NULL VARCHAR2(15) DS_STRUCTURE_BLOBS Name Null? Type -------------------------- -------- ------------ STRUCTURE_ID BLOB_ID OBJECT_TYPE OBJECT_CONTENTS MIME_TYPE OBJECT_NAME NOT NULL NUMBER(8) NOT NULL NUMBER NOT NULL VARCHAR2(3) BLOB VARCHAR2(48) VARCHAR2(30) 15

Loading & Viewing SVG 1. Page to load SVG files Use default display type Browse Built-in to HTML DB 2. PL/SQL Procedure to return BLOB content 3. Page to view structure summary Use default master/detail form Built-in to HTML DB 4. Page to edit structure detail The detail page from the master/detail form. 16

17 SVG Image Display PL/SQL procedure

Squeezing SVG into the HTMLDB Report Embed Tag <embed src="/alphadglucose_v1.svg" type="image/svg+xml" border="1" width="200" height="150" pluginspage="http://www.adobe.com/svg/viewer/install/" /> Object Tag <object data="/alphadglucose_v1.svg" type="image/svg+xml" width="300" height="300"> </object> Combined <object data="/alphadglucose_v1.svg" type="image/svg+xml" width="300" height="300"> <embed src="/alphadglucose_v1.svg" type="image/svg+xml" border="1" width="200" height="150" pluginspage="http://www.adobe.com/svg/viewer/install/" /> </object> 18

In HTML DB report Locate the report attributes definition page Select column to show SVG Alter selection to add tags 19 <object data= "#OWNER#.svg_image_display?p_image_id=#BLOB_ID#" type="image/svg+xml" width="400" height="300"> </object>

Additional options Add JMOL applet <script> jmolinitialize("../../jmol"); jmolapplet(200, "load #OWNER#.svg_image_display?p_image_id=#BLOB_ID# ); </script> 20

In Summary SVG useful vector graphic display technology Easy to include in HTML DB apps Minimal app produced quickly to render structure graphics 21

Useful links Adobe XSLT document Convert CML to SVG/CML composite http://www.adobe.com/svg/examples.html Structure Code and application available at apex.oracle.com Try Apex yourself http://apex.oracle.com 22