Updates for html interaction with qgis - raster metadata revamp

resources/CMakeLists.txt

@@ -4,3 +4,4 @@ INSTALL(FILES srs.db qgis.db qgis_help.db symbology-ng-style.xml spatialite.db c
 ADD_SUBDIRECTORY(context_help)
 ADD_SUBDIRECTORY(js)
 ADD_SUBDIRECTORY(html)
+ADD_SUBDIRECTORY(css)

resources/css/CMakeLists.txt

@@ -0,0 +1,4 @@
+FILE(GLOB CSS_FILES *.*) 
+
+INSTALL(FILES ${CSS_FILES} DESTINATION ${QGIS_DATA_DIR}/resources/css)
+

resources/css/ie.css

@@ -0,0 +1,36 @@
+/* -----------------------------------------------------------------------
+
+
+ Blueprint CSS Framework 1.0
+ http://blueprintcss.org
+
+   * Copyright (c) 2007-Present. See LICENSE for more info.
+   * See README for instructions on how to use Blueprint.
+   * For credits and origins, see AUTHORS.
+   * This is a compressed file. See the sources in the 'src' directory.
+
+----------------------------------------------------------------------- */
+
+/* ie.css */
+body {text-align:center;}
+.container {text-align:left;}
+* html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 {display:inline;overflow-x:hidden;}
+* html legend {margin:0px -8px 16px 0;padding:0;}
+sup {vertical-align:text-top;}
+sub {vertical-align:text-bottom;}
+html>body p code {*white-space:normal;}
+hr {margin:-8px auto 11px;}
+img {-ms-interpolation-mode:bicubic;}
+.clearfix, .container {display:inline-block;}
+* html .clearfix, * html .container {height:1%;}
+fieldset {padding-top:0;}
+legend {margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em;}
+textarea {overflow:auto;}
+label {vertical-align:middle;position:relative;top:-0.25em;}
+input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
+input.text:focus, input.title:focus {border-color:#666;}
+input.text, input.title, textarea, select {margin:0.5em 0;}
+input.checkbox, input.radio {position:relative;top:.25em;}
+form.inline div, form.inline p {vertical-align:middle;}
+form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button {margin:0.5em 0;}
+button, input.button {position:relative;top:0.25em;}

resources/css/print.css

@@ -0,0 +1,29 @@
+/* -----------------------------------------------------------------------
+
+
+ Blueprint CSS Framework 1.0
+ http://blueprintcss.org
+
+   * Copyright (c) 2007-Present. See LICENSE for more info.
+   * See README for instructions on how to use Blueprint.
+   * For credits and origins, see AUTHORS.
+   * This is a compressed file. See the sources in the 'src' directory.
+
+----------------------------------------------------------------------- */
+
+/* print.css */
+body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}
+.container {background:none;}
+hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
+hr.space {background:#fff;color:#fff;visibility:hidden;}
+h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
+code {font:.9em "Courier New", Monaco, Courier, monospace;}
+a img {border:none;}
+p img.top {margin-top:0;}
+blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
+.small {font-size:.9em;}
+.large {font-size:1.1em;}
+.quiet {color:#999;}
+.hide {display:none;}
+a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
+a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}

resources/css/screen.css

@@ -0,0 +1,265 @@
+/* -----------------------------------------------------------------------
+
+
+ Blueprint CSS Framework 1.0
+ http://blueprintcss.org
+
+   * Copyright (c) 2007-Present. See LICENSE for more info.
+   * See README for instructions on how to use Blueprint.
+   * For credits and origins, see AUTHORS.
+   * This is a compressed file. See the sources in the 'src' directory.
+
+----------------------------------------------------------------------- */
+
+/* reset.css */
+html {margin:0;padding:0;border:0;}
+body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
+body {line-height:1.5;background:white;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;float:none !important;}
+table, th, td {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:'';}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+:focus {outline:0;}
+
+/* typography.css */
+html {font-size:100.01%;}
+body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
+h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
+h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
+h2 {font-size:2em;margin-bottom:0.75em;}
+h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
+h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
+h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
+h6 {font-size:1em;font-weight:bold;}
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
+p {margin:0 0 1.5em;}
+.left {float:left !important;}
+p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
+.right {float:right !important;}
+p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}
+a:focus, a:hover {color:#09f;}
+a {color:#06c;text-decoration:underline;}
+blockquote {margin:1.5em;color:#666;font-style:italic;}
+strong, dfn {font-weight:bold;}
+em, dfn {font-style:italic;}
+sup, sub {line-height:0;}
+abbr, acronym {border-bottom:1px dotted #666;}
+address {margin:0 0 1.5em;font-style:italic;}
+del {color:#666;}
+pre {margin:1.5em 0;white-space:pre;}
+pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
+li ul, li ol {margin:0;}
+ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
+ul {list-style-type:disc;}
+ol {list-style-type:decimal;}
+dl {margin:0 0 1.5em 0;}
+dl dt {font-weight:bold;}
+dd {margin-left:1.5em;}
+table {margin-bottom:1.4em;width:100%;}
+th {font-weight:bold;}
+thead th {background:#c3d9ff;}
+th, td, caption {padding:4px 10px 4px 5px;}
+tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
+tfoot {font-style:italic;}
+caption {background:#eee;}
+.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
+.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
+.hide {display:none;}
+.quiet {color:#666;}
+.loud {color:#000;}
+.highlight {background:#ff0;}
+.added {background:#060;color:#fff;}
+.removed {background:#900;color:#fff;}
+.first {margin-left:0;padding-left:0;}
+.last {margin-right:0;padding-right:0;}
+.top {margin-top:0;padding-top:0;}
+.bottom {margin-bottom:0;padding-bottom:0;}
+
+/* forms.css */
+label {font-weight:bold;}
+fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
+legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
+fieldset, #IE8#HACK {padding-top:1.4em;}
+legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
+input[type=text], input[type=password], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
+input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}
+select {background-color:#fff;border-width:1px;border-style:solid;}
+input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
+input.text, input.title {width:300px;padding:5px;}
+input.title {font-size:1.5em;}
+textarea {width:390px;height:250px;padding:5px;}
+form.inline {line-height:3;}
+form.inline p {margin-bottom:0;}
+.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
+.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
+.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
+.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
+.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
+.error a, .alert a {color:#8a1f11;}
+.notice a {color:#514721;}
+.success a {color:#264409;}
+.info a {color:#205791;}
+
+/* grid.css */
+.container {width:595px;margin:0 auto;}
+.showgrid {background:url(src/grid.png);}
+.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:5px;}
+.last {margin-right:0;}
+.span-1 {width:20px;}
+.span-2 {width:45px;}
+.span-3 {width:70px;}
+.span-4 {width:95px;}
+.span-5 {width:120px;}
+.span-6 {width:145px;}
+.span-7 {width:170px;}
+.span-8 {width:195px;}
+.span-9 {width:220px;}
+.span-10 {width:245px;}
+.span-11 {width:270px;}
+.span-12 {width:295px;}
+.span-13 {width:320px;}
+.span-14 {width:345px;}
+.span-15 {width:370px;}
+.span-16 {width:395px;}
+.span-17 {width:420px;}
+.span-18 {width:445px;}
+.span-19 {width:470px;}
+.span-20 {width:495px;}
+.span-21 {width:520px;}
+.span-22 {width:545px;}
+.span-23 {width:570px;}
+.span-24 {width:595px;margin-right:0;}
+input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
+input.span-1, textarea.span-1 {width:8px;}
+input.span-2, textarea.span-2 {width:33px;}
+input.span-3, textarea.span-3 {width:58px;}
+input.span-4, textarea.span-4 {width:83px;}
+input.span-5, textarea.span-5 {width:108px;}
+input.span-6, textarea.span-6 {width:133px;}
+input.span-7, textarea.span-7 {width:158px;}
+input.span-8, textarea.span-8 {width:183px;}
+input.span-9, textarea.span-9 {width:208px;}
+input.span-10, textarea.span-10 {width:233px;}
+input.span-11, textarea.span-11 {width:258px;}
+input.span-12, textarea.span-12 {width:283px;}
+input.span-13, textarea.span-13 {width:308px;}
+input.span-14, textarea.span-14 {width:333px;}
+input.span-15, textarea.span-15 {width:358px;}
+input.span-16, textarea.span-16 {width:383px;}
+input.span-17, textarea.span-17 {width:408px;}
+input.span-18, textarea.span-18 {width:433px;}
+input.span-19, textarea.span-19 {width:458px;}
+input.span-20, textarea.span-20 {width:483px;}
+input.span-21, textarea.span-21 {width:508px;}
+input.span-22, textarea.span-22 {width:533px;}
+input.span-23, textarea.span-23 {width:558px;}
+input.span-24, textarea.span-24 {width:583px;}
+.append-1 {padding-right:25px;}
+.append-2 {padding-right:50px;}
+.append-3 {padding-right:75px;}
+.append-4 {padding-right:100px;}
+.append-5 {padding-right:125px;}
+.append-6 {padding-right:150px;}
+.append-7 {padding-right:175px;}
+.append-8 {padding-right:200px;}
+.append-9 {padding-right:225px;}
+.append-10 {padding-right:250px;}
+.append-11 {padding-right:275px;}
+.append-12 {padding-right:300px;}
+.append-13 {padding-right:325px;}
+.append-14 {padding-right:350px;}
+.append-15 {padding-right:375px;}
+.append-16 {padding-right:400px;}
+.append-17 {padding-right:425px;}
+.append-18 {padding-right:450px;}
+.append-19 {padding-right:475px;}
+.append-20 {padding-right:500px;}
+.append-21 {padding-right:525px;}
+.append-22 {padding-right:550px;}
+.append-23 {padding-right:575px;}
+.prepend-1 {padding-left:25px;}
+.prepend-2 {padding-left:50px;}
+.prepend-3 {padding-left:75px;}
+.prepend-4 {padding-left:100px;}
+.prepend-5 {padding-left:125px;}
+.prepend-6 {padding-left:150px;}
+.prepend-7 {padding-left:175px;}
+.prepend-8 {padding-left:200px;}
+.prepend-9 {padding-left:225px;}
+.prepend-10 {padding-left:250px;}
+.prepend-11 {padding-left:275px;}
+.prepend-12 {padding-left:300px;}
+.prepend-13 {padding-left:325px;}
+.prepend-14 {padding-left:350px;}
+.prepend-15 {padding-left:375px;}
+.prepend-16 {padding-left:400px;}
+.prepend-17 {padding-left:425px;}
+.prepend-18 {padding-left:450px;}
+.prepend-19 {padding-left:475px;}
+.prepend-20 {padding-left:500px;}
+.prepend-21 {padding-left:525px;}
+.prepend-22 {padding-left:550px;}
+.prepend-23 {padding-left:575px;}
+.border {padding-right:1px;margin-right:2px;border-right:1px solid #ddd;}
+.colborder {padding-right:14px;margin-right:15px;border-right:1px solid #ddd;}
+.pull-1 {margin-left:-25px;}
+.pull-2 {margin-left:-50px;}
+.pull-3 {margin-left:-75px;}
+.pull-4 {margin-left:-100px;}
+.pull-5 {margin-left:-125px;}
+.pull-6 {margin-left:-150px;}
+.pull-7 {margin-left:-175px;}
+.pull-8 {margin-left:-200px;}
+.pull-9 {margin-left:-225px;}
+.pull-10 {margin-left:-250px;}
+.pull-11 {margin-left:-275px;}
+.pull-12 {margin-left:-300px;}
+.pull-13 {margin-left:-325px;}
+.pull-14 {margin-left:-350px;}
+.pull-15 {margin-left:-375px;}
+.pull-16 {margin-left:-400px;}
+.pull-17 {margin-left:-425px;}
+.pull-18 {margin-left:-450px;}
+.pull-19 {margin-left:-475px;}
+.pull-20 {margin-left:-500px;}
+.pull-21 {margin-left:-525px;}
+.pull-22 {margin-left:-550px;}
+.pull-23 {margin-left:-575px;}
+.pull-24 {margin-left:-600px;}
+.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
+.push-1 {margin:0 -25px 1.5em 25px;}
+.push-2 {margin:0 -50px 1.5em 50px;}
+.push-3 {margin:0 -75px 1.5em 75px;}
+.push-4 {margin:0 -100px 1.5em 100px;}
+.push-5 {margin:0 -125px 1.5em 125px;}
+.push-6 {margin:0 -150px 1.5em 150px;}
+.push-7 {margin:0 -175px 1.5em 175px;}
+.push-8 {margin:0 -200px 1.5em 200px;}
+.push-9 {margin:0 -225px 1.5em 225px;}
+.push-10 {margin:0 -250px 1.5em 250px;}
+.push-11 {margin:0 -275px 1.5em 275px;}
+.push-12 {margin:0 -300px 1.5em 300px;}
+.push-13 {margin:0 -325px 1.5em 325px;}
+.push-14 {margin:0 -350px 1.5em 350px;}
+.push-15 {margin:0 -375px 1.5em 375px;}
+.push-16 {margin:0 -400px 1.5em 400px;}
+.push-17 {margin:0 -425px 1.5em 425px;}
+.push-18 {margin:0 -450px 1.5em 450px;}
+.push-19 {margin:0 -475px 1.5em 475px;}
+.push-20 {margin:0 -500px 1.5em 500px;}
+.push-21 {margin:0 -525px 1.5em 525px;}
+.push-22 {margin:0 -550px 1.5em 550px;}
+.push-23 {margin:0 -575px 1.5em 575px;}
+.push-24 {margin:0 -600px 1.5em 600px;}
+.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}
+div.prepend-top, .prepend-top {margin-top:1.5em;}
+div.append-bottom, .append-bottom {margin-bottom:1.5em;}
+.box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}
+hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}
+hr.space {background:#fff;color:#fff;visibility:hidden;}
+.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
+.clearfix, .container {display:block;}
+.clear {clear:both;}

resources/html/qgsrasterlayer.html

@@ -0,0 +1,48 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!-- custom blueprint see http://ianli.com/blueprinter/?cw=20&gw=5&cc=24 -->
+    <link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection" />
+    <link rel="stylesheet" href="../css/print.css" type="text/css" media="print" /> 
+    <script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
+    <script language="javascript" type="text/javascript" src="../js/jquery.flot.js"></script>
+    <script language="javascript" type="text/javascript" src="../js/jquery.flot.navigate.js"></script>
+    <script language="javascript" type="text/javascript" src="../js/json.js"></script>
+    <script id="source" language="javascript" type="text/javascript">
+      //The raster layer properties dialog will pass an object 'mRasterLayer' 
+      //to this javascript context which you can interrogate for all its metadata
+      function showJson() 
+      {
+        if (typeof mRasterLayer === 'undefined') 
+        {
+          $("#notes").html("mRasterLayer is undefined");
+        }
+        else
+        {
+          //for fun lets pickle the raster layer as a json object
+          $("#notes").html(JSON.stringify(mRasterLayer));
+        }
+      }
+      /** Load the metadata object passed into this page from c++ context using 
+          wvMetadata->page()->mainFrame()->addToJavaScriptWindowObject( "mRasterLayer", mRasterLayer );
+          wvMetadata->page()->mainFrame()->evaluateJavaScript(QString("setMetadata()"));
+      */
+      function setMetadata( )
+      {
+        $("#metadata").html( mRasterLayer["metadata"] );
+      }
+    </script>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Metadata</h1>
+      <hr/>
+      <div id="metadata" class="span-24"></div>
+      </hr>
+      <div id="footer">Generated by Quantum GIS (http://qgis.org)</div>
+      <button onclick="showJson()" >Show JSON</button>
+      <div id="notes" class="span-24"></div>
+    </div>
+  </body>
+</html>

resources/js/json.js

@@ -0,0 +1,96 @@
+(function ($) {
+    var m = {
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        s = {
+            'array': function (x) {
+                var a = ['['], b, f, i, l = x.length, v;
+                for (i = 0; i < l; i += 1) {
+                    v = x[i];
+                    f = s[typeof v];
+                    if (f) {
+                        v = f(v);
+                        if (typeof v == 'string') {
+                            if (b) {
+                                a[a.length] = ',';
+                            }
+                            a[a.length] = v;
+                            b = true;
+                        }
+                    }
+                }
+                a[a.length] = ']';
+                return a.join('');
+            },
+            'boolean': function (x) {
+                return String(x);
+            },
+            'null': function (x) {
+                return "null";
+            },
+            'number': function (x) {
+                return isFinite(x) ? String(x) : 'null';
+            },
+            'object': function (x) {
+                if (x) {
+                    if (x instanceof Array) {
+                        return s.array(x);
+                    }
+                    var a = ['{'], b, f, i, v;
+                    for (i in x) {
+                        v = x[i];
+                        f = s[typeof v];
+                        if (f) {
+                            v = f(v);
+                            if (typeof v == 'string') {
+                                if (b) {
+                                    a[a.length] = ',';
+                                }
+                                a.push(s.string(i), ':', v);
+                                b = true;
+                            }
+                        }
+                    }
+                    a[a.length] = '}';
+                    return a.join('');
+                }
+                return 'null';
+            },
+            'string': function (x) {
+                if (/["\\\x00-\x1f]/.test(x)) {
+                    x = x.replace(/([\x00-\x1f\\"])/g, function(a, b) {
+                        var c = m[b];
+                        if (c) {
+                            return c;
+                        }
+                        c = b.charCodeAt();
+                        return '\\u00' +
+                            Math.floor(c / 16).toString(16) +
+                            (c % 16).toString(16);
+                    });
+                }
+                return '"' + x + '"';
+            }
+        };
+
+	$.toJSON = function(v) {
+		var f = isNaN(v) ? s[typeof v] : s['number'];
+		if (f) return f(v);
+	};
+	
+	$.parseJSON = function(v, safe) {
+		if (safe === undefined) safe = $.parseJSON.safe;
+		if (safe && !/^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/.test(v))
+			return undefined;
+		return eval('('+v+')');
+	};
+	
+	$.parseJSON.safe = false;
+
+})(jQuery);

src/app/qgsrasterlayerproperties.cpp

@@ -69,6 +69,10 @@ QgsRasterLayerProperties::QgsRasterLayerProperties( QgsMapLayer* lyr, QgsMapCanv
   QString myChartPage = "file:///" + QgsApplication::pkgDataPath() + "/resources/html/chart.html";
   mWebPlot->load(QUrl( myChartPage ));
   connect( mWebPlot->page()->mainFrame(), SIGNAL( loadFinished( bool ) ), this, SLOT( histogramPageLoaded( bool ) ) );
+  QString myMetadataPage = "file:///" + QgsApplication::pkgDataPath() + "/resources/html/qgsrasterlayer.html";
+  wvMetadata->load(QUrl( myMetadataPage ));
+  connect( wvMetadata->page()->mainFrame(), SIGNAL( loadFinished( bool ) ), this, SLOT( metadataPageLoaded( bool ) ) );
+
   connect( buttonBox, SIGNAL( accepted() ), this, SLOT( accept() ) );
   connect( this, SIGNAL( accepted() ), this, SLOT( apply() ) );
   connect( buttonBox->button( QDialogButtonBox::Apply ), SIGNAL( clicked() ), this, SLOT( apply() ) );
@@ -843,14 +847,6 @@ void QgsRasterLayerProperties::sync()
   pixmapPalette->setScaledContents( true );
   pixmapPalette->repaint();
 
-  QgsDebugMsg( "populate metadata tab" );
-  /*
-   * Metadata Tab
-   */
-  //populate the metadata tab's text browser widget with gdal metadata info
-  QString myStyle = QgsApplication::reportStyleSheet();
-  txtbMetadata->document()->setDefaultStyleSheet( myStyle );
-  txtbMetadata->setHtml( mRasterLayer->metadata() );
 
 } // QgsRasterLayerProperties::sync()
 
@@ -1608,10 +1604,6 @@ void QgsRasterLayerProperties::on_buttonBuildPyramids_clicked()
   pixmapLegend->setPixmap( mRasterLayer->legendAsPixmap() );
   pixmapLegend->setScaledContents( true );
   pixmapLegend->repaint();
-  //populate the metadata tab's text browser widget with gdal metadata info
-  QString myStyle = QgsApplication::reportStyleSheet();
-  txtbMetadata->setHtml( mRasterLayer->metadata() );
-  txtbMetadata->document()->setDefaultStyleSheet( myStyle );
 }
 
 void QgsRasterLayerProperties::on_cboBlue_currentIndexChanged( const QString& theText )
@@ -1854,6 +1846,14 @@ void QgsRasterLayerProperties::on_tabBar_currentChanged( int theTab )
   }
 }
 
+void QgsRasterLayerProperties::metadataPageLoaded( bool theOkFlag )
+{
+  Q_UNUSED( theOkFlag );
+  //populate the metadata tab's text browser widget with raster metadata info
+  wvMetadata->page()->mainFrame()->addToJavaScriptWindowObject( "mRasterLayer", mRasterLayer );
+  wvMetadata->page()->mainFrame()->evaluateJavaScript( QString("setMetadata()"));
+}
+
 void QgsRasterLayerProperties::histogramPageLoaded( bool theOkFlag )
 {
   if ( tabBar->currentIndex() == 6 && theOkFlag ) //yuk magick number

src/app/qgsrasterlayerproperties.h

@@ -72,6 +72,9 @@ class QgsRasterLayerProperties : public QDialog, private Ui::QgsRasterLayerPrope
     /** \brief slot executed when the web view for the histogram is loaded and ready to display charts
      * @note added in 2.0 */
     void histogramPageLoaded( bool theOkFlag );
+    /** \brief slot executed when the web view for the metadata is loaded and ready to display content
+     * @note added in 2.0 */
+    void metadataPageLoaded( bool theOkFlag );
     /** \brief slow executed when user wishes to import transparency values */
     void on_pbnImportTransparentPixelValues_clicked();
     /** \brief slot executed when user presses "Remove Selected Row" button on the transparency page */

src/core/qgsmaplayer.h

@@ -42,6 +42,7 @@ class QPainter;
 class CORE_EXPORT QgsMapLayer : public QObject
 {
     Q_OBJECT
+    Q_PROPERTY(QString metadata READ metadata)
 
   public:
     /** Layers enum defining the types of layers that can be added to a map */

src/core/qgsrasterdataprovider.cpp

@@ -123,7 +123,7 @@ QStringList QgsRasterDataProvider::cStringList2Q_( char ** stringList )
 
 QString QgsRasterDataProvider::makeTableCell( QString const & value )
 {
-  return "<p>\n" + value + "</p>\n";
+  return "<td>\n" + value + "</td>\n";
 } // makeTableCell_
 
 
@@ -131,7 +131,7 @@ QString QgsRasterDataProvider::makeTableCell( QString const & value )
 // convenience function for building metadata() HTML table cells
 QString QgsRasterDataProvider::makeTableCells( QStringList const & values )
 {
-  QString s( "<tr>" );
+  QString s( "<table border=\"1\"><tr>" );
 
   for ( QStringList::const_iterator i = values.begin();
         i != values.end();
@@ -140,7 +140,7 @@ QString QgsRasterDataProvider::makeTableCells( QStringList const & values )
     s += QgsRasterDataProvider::makeTableCell( *i );
   }
 
-  s += "</tr>";
+  s += "</tr></table>";
 
   return s;
 } // makeTableCell_

src/core/raster/qgsrasterlayer.cpp

@@ -1685,22 +1685,25 @@ double QgsRasterLayer::maximumValue( QString theBand )
 
 QString QgsRasterLayer::metadata()
 {
+  //even as I am writing this I know it is wrong - we should separate markup from content...TS
+  QString myLabelStart = "<label class=\"span-10\">";
+  QString myLabelEnd   = "</label>";
+  QString myDetailStart = "<p class=\"span-13\">";
+  QString myDetailEnd   = "</p>";
+
   QString myMetadata ;
-  myMetadata += "<p class=\"glossy\">" + tr( "Driver:" ) + "</p>\n";
+  myMetadata += myLabelStart + tr( "Driver:" ) + myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   myMetadata += mDataProvider->description();
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
   // Insert provider-specific (e.g. WMS-specific) metadata
-  // crashing
-  //QString s =  mDataProvider->metadata();
-  //QgsDebugMsg( s );
   myMetadata += mDataProvider->metadata();
 
-  myMetadata += "<p class=\"glossy\">";
+  myMetadata += myLabelStart;
   myMetadata += tr( "No Data Value" );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   if ( mValidNoDataValue )
   {
     myMetadata += QString::number( mNoDataValue );
@@ -1709,13 +1712,12 @@ QString QgsRasterLayer::metadata()
   {
     myMetadata += "*" + tr( "NoDataValue not set" ) + "*";
   }
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
-  myMetadata += "</p>\n";
+  myMetadata += myLabelStart;
-  myMetadata += "<p class=\"glossy\">";
   myMetadata += tr( "Data Type:" );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   //just use the first band
   switch ( mDataProvider->srcDataType( 1 ) )
   {
@@ -1755,36 +1757,31 @@ QString QgsRasterLayer::metadata()
     default:
       myMetadata += tr( "Could not determine raster data type." );
   }
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
-  myMetadata += "<p class=\"glossy\">";
+  myMetadata += myLabelStart;
-  myMetadata += tr( "Pyramid overviews:" );
-  myMetadata += "</p>\n";
-  myMetadata += "<p>";
-
-  myMetadata += "<p class=\"glossy\">";
   myMetadata += tr( "Layer Spatial Reference System: " );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   myMetadata += mCRS->toProj4();
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
-  myMetadata += "<p class=\"glossy\">";
+  myMetadata += myLabelStart;
   myMetadata += tr( "Layer Extent (layer original source projection): " );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   myMetadata += mDataProvider->extent().toString();
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
   // output coordinate system
   // TODO: this is not related to layer, to be removed? [MD]
 #if 0
-  myMetadata += "<tr><td class=\"glossy\">";
+  myMetadata += myLabelStart;
   myMetadata += tr( "Project Spatial Reference System: " );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   myMetadata +=  mCoordinateTransform->destCRS().toProj4();
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 #endif
 
   //
@@ -1795,100 +1792,104 @@ QString QgsRasterLayer::metadata()
   {
     QgsDebugMsg( "Raster properties : checking if band " + QString::number( myIteratorInt ) + " has stats? " );
     //band name
-    myMetadata += "<p class=\"glossy\">\n";
+    myMetadata += "<h2>" + tr("QGIS Metadata") + "</h2></hr>";
-    myMetadata += tr( "Band" );
+    myMetadata += myLabelStart;
-    myMetadata += "</p>\n";
+    myMetadata += tr( "Band Name:" );
-    myMetadata += "<p>";
+    myMetadata += myLabelEnd;
+    myMetadata += myDetailStart;
     myMetadata += bandName( myIteratorInt );
-    myMetadata += "</p>\n";
+    myMetadata += myDetailEnd;
     //band number
-    myMetadata += "<p>";
+    myMetadata += myLabelStart;
-    myMetadata += tr( "Band No" );
+    myMetadata += tr( "Band No:" );
-    myMetadata += "</p>\n";
+    myMetadata += myLabelEnd;
-    myMetadata += "<p>\n";
+    myMetadata += myDetailStart;
     myMetadata += QString::number( myIteratorInt );
-    myMetadata += "</p>\n";
+    myMetadata += myDetailEnd;
 
+    myMetadata += myLabelStart;
+    myMetadata += tr( "Has stats?" );
+    myMetadata += myLabelEnd;
     //check if full stats for this layer have already been collected
     if ( !hasStatistics( myIteratorInt ) )  //not collected
     {
       QgsDebugMsg( ".....no" );
 
-      myMetadata += "<p>";
+      myMetadata += myDetailStart;
-      myMetadata += tr( "No Stats" );
-      myMetadata += "</p>\n";
-      myMetadata += "<p>\n";
       myMetadata += tr( "No stats collected yet" );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
     }
     else                    // collected - show full detail
     {
       QgsDebugMsg( ".....yes" );
 
+      myMetadata += myDetailStart;
+      myMetadata += tr( "yes" );
+      myMetadata += myDetailEnd;
       QgsRasterBandStats myRasterBandStats = bandStatistics( myIteratorInt );
       //Min Val
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Min Val" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.minimumValue, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       // Max Val
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Max Val" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.maximumValue, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       // Range
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Range" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.range, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       // Mean
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Mean" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.mean, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       //sum of squares
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Sum of squares" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.sumOfSquares, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       //standard deviation
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Standard Deviation" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.stdDev, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       //sum of all cells
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Sum of all cells" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.sum, 'f', 10 );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
 
       //number of cells
-      myMetadata += "<p>";
+      myMetadata += myLabelStart;
       myMetadata += tr( "Cell Count" );
-      myMetadata += "</p>\n";
+      myMetadata += myLabelEnd;
-      myMetadata += "<p>\n";
+      myMetadata += myDetailStart;
       myMetadata += QString::number( myRasterBandStats.elementCount );
-      myMetadata += "</p>\n";
+      myMetadata += myDetailEnd;
     }
   }
 

src/providers/gdal/qgsgdalprovider.cpp

@@ -356,27 +356,41 @@ void QgsGdalProvider::closeDataset()
 
 QString QgsGdalProvider::metadata()
 {
+  //even as I am writing this I know it is wrong - we should separate markup from content...TS
+  QString myLabelStart = "<label class=\"span-10\">";
+  QString myLabelEnd   = "</label>";
+  QString myDetailStart = "<p class=\"span-13\">";
+  QString myDetailEnd   = "</p>";
+
   QString myMetadata ;
+  myMetadata += myLabelStart;
   myMetadata += QString( GDALGetDescription( GDALGetDatasetDriver( mGdalDataset ) ) );
-  myMetadata += "<br>";
+  myMetadata += myLabelEnd;
+  myMetadata += myDetailStart;
   myMetadata += QString( GDALGetMetadataItem( GDALGetDatasetDriver( mGdalDataset ), GDAL_DMD_LONGNAME, NULL ) );
+  myMetadata += myDetailEnd;
 
   // my added code (MColetti)
 
-  myMetadata += "<p class=\"glossy\">";
+  myMetadata += myLabelStart;
   myMetadata += tr( "Dataset Description" );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   myMetadata += QFile::decodeName( GDALGetDescription( mGdalDataset ) );
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
 
   char ** GDALmetadata = GDALGetMetadata( mGdalDataset, NULL );
 
   if ( GDALmetadata )
   {
+    myMetadata += myLabelStart;
+    myMetadata += tr( "GDAL Dataset Metadata:" );
+    myMetadata += myLabelEnd;
+    myMetadata += myDetailStart;
     QStringList metadata = cStringList2Q_( GDALmetadata );
     myMetadata += QgsRasterDataProvider::makeTableCells( metadata );
+    myMetadata += myDetailEnd;
   }
   else
   {
@@ -385,14 +399,19 @@ QString QgsGdalProvider::metadata()
 
   for ( int i = 1; i <= GDALGetRasterCount( mGdalDataset ); ++i )
   {
-    myMetadata += "<p class=\"glossy\">" + tr( "Band %1" ).arg( i ) + "</p>\n";
+    myMetadata += "<h2>" + tr( "Band %1" ).arg( i ) + "</h2><hr/>";
     GDALRasterBandH gdalBand = GDALGetRasterBand( mGdalDataset, i );
     GDALmetadata = GDALGetMetadata( gdalBand, NULL );
 
     if ( GDALmetadata )
     {
+      myMetadata += myLabelStart;
+      myMetadata += tr( "GDAL Metadata:" );
+      myMetadata += myLabelEnd;
+      myMetadata += myDetailStart;
       QStringList metadata = cStringList2Q_( GDALmetadata );
       myMetadata += QgsRasterDataProvider::makeTableCells( metadata );
+      myMetadata += myDetailEnd;
     }
     else
     {
@@ -403,6 +422,9 @@ QString QgsGdalProvider::metadata()
 
     if ( GDALcategories )
     {
+      myMetadata += myLabelStart;
+      myMetadata += tr( "Categories:" );
+      myMetadata += myLabelEnd;
       QStringList categories = cStringList2Q_( GDALcategories );
       myMetadata += QgsRasterDataProvider::makeTableCells( categories );
     }
@@ -415,15 +437,15 @@ QString QgsGdalProvider::metadata()
 
   // end my added code
 
-  myMetadata += "<p class=\"glossy\">";
+  myMetadata += myLabelStart;
   myMetadata += tr( "Dimensions:" );
-  myMetadata += "</p>\n";
+  myMetadata += myLabelEnd;
-  myMetadata += "<p>";
+  myMetadata += myDetailStart;
   myMetadata += tr( "X: %1 Y: %2 Bands: %3" )
                 .arg( GDALGetRasterXSize( mGdalDataset ) )
                 .arg( GDALGetRasterYSize( mGdalDataset ) )
                 .arg( GDALGetRasterCount( mGdalDataset ) );
-  myMetadata += "</p>\n";
+  myMetadata += myDetailEnd;
 
   //just use the first band
   GDALRasterBandH myGdalBand = GDALGetRasterBand( mGdalDataset, 1 );
@@ -436,11 +458,10 @@ QString QgsGdalProvider::metadata()
     {
       GDALRasterBandH myOverview;
       myOverview = GDALGetOverview( myGdalBand, myOverviewInt );
-      myMetadata += "<p>X : " + QString::number( GDALGetRasterBandXSize( myOverview ) );
+      myMetadata += "X : " + QString::number( GDALGetRasterBandXSize( myOverview ) );
-      myMetadata += ",Y " + QString::number( GDALGetRasterBandYSize( myOverview ) ) + "</p>";
+      myMetadata += ",Y " + QString::number( GDALGetRasterBandYSize( myOverview ) ) + "<br />";
     }
   }
-  myMetadata += "</p>\n";
 
   if ( GDALGetGeoTransform( mGdalDataset, mGeoTransform ) != CE_None )
   {
@@ -450,23 +471,23 @@ QString QgsGdalProvider::metadata()
   }
   else
   {
-    myMetadata += "<p class=\"glossy\">";
+    myMetadata += myLabelStart;
     myMetadata += tr( "Origin:" );
-    myMetadata += "</p>\n";
+    myMetadata += myLabelEnd;
-    myMetadata += "<p>";
+    myMetadata += myDetailStart;
     myMetadata += QString::number( mGeoTransform[0] );
     myMetadata += ",";
     myMetadata += QString::number( mGeoTransform[3] );
-    myMetadata += "</p>\n";
+    myMetadata += myDetailEnd;
 
-    myMetadata += "<p class=\"glossy\">";
+    myMetadata += myLabelStart;
     myMetadata += tr( "Pixel Size:" );
-    myMetadata += "</p>\n";
+    myMetadata += myLabelEnd;
-    myMetadata += "<p>";
+    myMetadata += myDetailStart;
     myMetadata += QString::number( mGeoTransform[1] );
     myMetadata += ",";
     myMetadata += QString::number( mGeoTransform[5] );
-    myMetadata += "</p>\n";
+    myMetadata += myDetailEnd;
   }
 
   return myMetadata;

src/ui/qgsrasterlayerpropertiesbase.ui

@@ -7,7 +7,7 @@
     <x>0</x>
     <y>0</y>
     <width>755</width>
-    <height>667</height>
+    <height>669</height>
    </rect>
   </property>
   <property name="windowTitle">
@@ -1728,7 +1728,13 @@
         <number>0</number>
        </property>
        <item row="0" column="0">
-        <widget class="QTextBrowser" name="txtbMetadata"/>
+        <widget class="QWebView" name="wvMetadata">
+         <property name="url">
+          <url>
+           <string>about:blank</string>
+          </url>
+         </property>
+        </widget>
        </item>
       </layout>
      </widget>
@@ -1777,6 +1783,7 @@ p, li { white-space: pre-wrap; }
 &lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;/p&gt;
 &lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;/p&gt;
 &lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;/p&gt;
+&lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;/p&gt;
 &lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-size:10pt;&quot;&gt;&lt;/p&gt;
 &lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; font-family:'Sans'; font-size:10pt;&quot;&gt;&lt;/p&gt;
 &lt;p style=&quot;-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;&quot;&gt;&lt;/p&gt;