Ajax, XSLT and SVG Displaying ATLAS Conditions Data with New

Ajax, XSLT and SVG Displaying ATLAS conditions data with new web technologies

Shaun Roe

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 1 Aim

parameters

Web page form SQL db

active graph

Don’t want the web page to ‘blink’ => insert the graph to the page in memory Want the graph to have hyperlinks, where appropriate=> ? Would like the output format to be flexible => separate presentation from information

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 2 Yesterday’s alternatives

SQL Web page form

Bitmap? Flash? Graph server (or process)

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 3 A plan

parameters db Web page form SQL

XML stylesheet

So I need: 1. A way of getting xml from the database 2. A stylesheet to format xml so it looks like a graph 3. A way of injecting that graph…

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 4 XML from Oracle (I’m dealing with Oracle. For MySQL, see xaware.org.)

SELECT DBMS_XMLGEN.GETXML( ‘query’ ) XML FROM DUAL

It’s (almost) that simple. In practice, have to be careful about quotes: $query = “SELECT TO_CHAR(A.TS, ''YYYY-MM-DD HH24:MI:SS'') AS …”;

The reply Great! Is there more like this? • Form sub nodes with subqueries 1065554581272 • Stored functions allow one to page SCT BAR PS Q2 B303 ch8000 lay0 phi12 eta06 HVchVolt • Stylesheets can be stored and 5.0 11-AUG-08 applied on the DB. 11.27.41.931000000 AM • XMLDB package allows one to 1218454061.931 create an XML server on the DB which responds to http calls. 106555458127

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 5 Styling and Transforming XML

CSS Cascading Style Sheets XSLTXML Stylesheet Language for Transformations ROWSET { Allows radical restructuring; the stylesheet is a font-family:arial, helvetica, sans-serif; complete programming language. text-align:left; margin:10px; border-width: 1px; border-style: solid; } Simple XSLT

A simple demo of xslt

display:table-row; font-size: 10pt;

The average of all HV values is: } V

display:table-cell; border-width: 1px; border-style: solid; padding: 4px; }

http://cern.ch/sroe/chep/HVcss.xml http://cern.ch/sroe/chep/HVxsl0.xml CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 6 Example of XSLT applied

Blocks are printed; their colour and position are determined by a CSS.

For each element, the time average has been calculated and inserted as a tooltip

Bias voltage

http://cern.ch/sroe/chep/HVxsl2.xml

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 7 SVG: A Graphical web standard

Wouldn’t it be great if this worked: This does work: xmlns:svg="http://www.w3.org/2000/svg"> This is a circle SVG embedded inline in XHTML

Show a circle

SVG embedded inline in XHTML

fill="red”/> Firefox, Safari, Opera • Probably on your mobile phone • Almost certainly in your digital TV ..and IE? (Vector Markup

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) Language) 8 Extreme SVG http://cern.ch/sroe/display/example.xml JiveXML 0 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 0 0 0 0 00 0 0 0 0 0 -5 5 -5 -4 -3 1 3 3 3 -2 -1-1 3 3 3 3 -3 4 -3 -1 -1 1…

zoom

CHEP'09 Prague Ajax, XSLT & SVG (Shaun Roe, Atlas) 9 / Ajax Asynchronous Javascript And XML blog.jjg.net A way of changing web pages in memory Xml Http Request

XHR http:// Form POST js XML

Alter the existing

New page document / Forming an XHR is browser specific, so use a common javascript library: prototype