This commit is contained in:
Andy Bunce 2013-01-22 22:17:44 +00:00
parent 32b10ad30b
commit 1ceb15b446
12 changed files with 294 additions and 325 deletions

View file

@ -23,6 +23,9 @@ body {
}
.navbar-fixed-top {
margin-bottom: 4px;
}
.quick-links {
list-style: none outside none;
margin: 0;
@ -44,21 +47,6 @@ body {
top: 5px;
}
/* XML verbatim */
.xmlverb-default { color: #333333; background-color: #ffffff;
font-size: 10pt;
font-family:"Courier New", Courier, mono; }
.xmlverb-element-name { color: #990000 }
.xmlverb-element-nsprefix { color: #666600 }
.xmlverb-attr-name { color: #660000 }
.xmlverb-attr-content { color: #000099; font-weight: bold }
.xmlverb-ns-name { color: #666600 }
.xmlverb-ns-uri { color: #330099 }
.xmlverb-text { color: #000000; font-weight: bold }
.xmlverb-comment { color: #006600; font-style: italic }
.xmlverb-pi-name { color: #006600; font-style: italic }
.xmlverb-pi-content { color: #006666; font-style: italic }
.xd { background-color: #cccccc; margin: 0px }
#editor {
margin: 0;
@ -69,45 +57,4 @@ body {
min-height:10em;
}
table.ret * th {
border: 1px solid white;
margin: 2px;
padding-left: 5px;
padding-right: 5px;
background-color: #BFCAEB;
text-align: left;
}
table.ret * td {
border: 1px solid white;
margin: 2px;
padding: 2px;
background-color: #EBEEF5;
vertical-align: top;
font-size: 9pt;
}
table.ret caption {
margin-top: 10px;
margin: 2px;
padding-left: 5px;
padding-right: 5px;
background-color: #EBEEF5;
text-align: left;
}
table.ret {
border-bottom: 1px solid #BFCAEB;
margin: 0px;
padding: 0px;
}
.break {
word-break: break-all;
-moz-hyphens: auto;
hyphens: auto;
}
.doctype{
display:inline-block;
width:6em;
text-align: center
}
form.form-table label {text-align:right}

View file

@ -45,6 +45,21 @@ jQuery(function($) { $.extend({
}
}); });
$(function(){
$('a[data-action="lDom"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
$("#rightPane").removeAttr('class').css("display","none");
});
$('a[data-action="equality"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span6");
$("#rightPane").css('display','inline').removeAttr('class').addClass("span6");
});
$('a[data-action="rDom"]').click(function (){
$("#rightPane").css('display','inline').removeAttr('class').addClass("span12");
$("#leftPane").removeAttr('class').css("display","none");
});
});
$(document).ready(function(){
$("#bnup").on("click",getsvg);

View file

@ -16,6 +16,7 @@ import module namespace request = "http://exquery.org/ns/request";
declare namespace svg= "http://www.w3.org/2000/svg";
declare namespace rest = 'http://exquery.org/ns/restxq';
(:~ shared page wrapper :)
declare variable $grxq:layout:=fn:resolve-uri("views/layout.xml");
(:~
@ -24,15 +25,8 @@ declare variable $grxq:layout:=fn:resolve-uri("views/layout.xml");
declare
%rest:GET %rest:path("graphxq")
%output:method("html") %output:version("5.0")
%rest:form-param("dot","{$dot}","")
%rest:form-param("url","{$url}")
function graphxq($dot,$url) {
let $edot:=if($url) then "" else fn:encode-for-uri($dot)
let $dot2:=getdot($dot,$url)
let $svg:=dot2svg($dot)
let $map:=map{"dot":=$dot,"url":=$url,"svg":=$svg,"edot":=$edot}
let $page:=render("views/page1.xml",$map)
return $page
function about(){
render("views/about.xml",map{"title":="GraphXQ"})
};
(:~
@ -70,9 +64,12 @@ declare
function dotform($src){
let $dot:= getdot("digraph {{a -> b}}",$src)
let $svgwidget:=fn:doc("views/widget.svg")
let $toolbar:=fn:doc("views/toolbar.xml")
let $map:=map{"list-shapes":=dotui:shapes(""),
"list-colors":=dotui:colors(""),
"svgwidget":=$svgwidget,
"toolbar":=$toolbar,
"title":="DOT editor",
"dot":=$dot}
return render("views/dotform.xml",$map)
};
@ -80,40 +77,35 @@ function dotform($src){
declare
%rest:GET %rest:path("graphxq/dotml")
%output:method("html") %output:version("5.0")
function dotmlform(){
render("views/dotmlform.xml",map{})
%rest:form-param("src","{$src}")
function dotmlform($src){
let $svgwidget:=fn:doc("views/widget.svg")
let $toolbar:=fn:doc("views/toolbar.xml")
let $default:=<graph xmlns="http://www.martin-loetzsch.de/DOTML"><node id="test"/></graph>
let $dotml:= getdotml($default ,$src)
let $dotml:= fn:serialize($dotml)
let $v:=map{ "svgwidget":=$svgwidget,
"toolbar":=$toolbar,
"title":="DOTML editor",
"dotml":=$dotml}
return render("views/dotmlform.xml",$v)
};
(:~ static about page :)
declare
%rest:GET %rest:path("graphxq/about")
%output:method("html") %output:version("5.0")
function about(){
render("views/about.xml",map{})
};
(:~ static api page :)
declare
%rest:GET %rest:path("graphxq/api")
%output:method("html") %output:version("5.0")
function api(){
render("views/api.xml",map{})
};
declare
%rest:GET %rest:path("graphxq/search")
%output:method("html") %output:version("5.0")
%rest:form-param("q", "{$q}")
function search($q ) {
let $map:=map{"q":=$q}
return render("views/search.xml",$map)
render("views/api.xml",map{"title":="API information"})
};
declare
%rest:GET %rest:path("graphxq/library")
%output:method("html") %output:version("5.0")
function library( ) {
let $map:=map{ }
let $map:=map{"title":="Samples"}
return render("views/library.xml",$map)
};
@ -137,15 +129,21 @@ function api-dotml($dotml ) as node()
declare %private function getdot($dot as xs:string,$url) as xs:string{
if($url) then
try{fn:unparsed-text(fn:resolve-uri($url))} catch * { "digraph {{ failed to load remote }}" }
else
else
$dot
};
(:~ if url is defined then treat as url and fetch else use dotml :)
declare %private function getdotml($dotml as xs:string,$url) as xs:string{
declare %private function getdotml($dotml as node(),$url) as node()
{
if($url) then
try{fn:unparsed-text(fn:resolve-uri($url))} catch * { "digraph {{ failed to load remote }}" }
else
try{
fn:doc(fn:resolve-uri($url))
} catch * {
<graph xmlns="http://www.martin-loetzsch.de/DOTML">
<node id="fail"/>
</graph> }
else
$dotml
};
@ -161,18 +159,8 @@ declare %private function dot2svg($dot as xs:string) as node(){
: @params locals map of page variables
:)
declare function render($template as xs:string,$locals){
let $sidebar:=<div>
<ul>
<div>Samples:</div>
<li> <a href="dot?src=samples/dot/process.gv">process</a></li>
<li><a href="dot?src=samples/dot/unix.gv">unix</a></li>
<li><a href="dot?src=samples/dot/root.gv">root (slow)</a></li>
<li><a href="dotml?src=samples/dotml/sample1.xml">dotml sample</a></li>
</ul>
</div>
let $default:=map{"sidebar":=$sidebar ,
"usermenu":=<div>users</div>,
let $default:=map{"usermenu":=<div>users</div>,
"title":=request:path(),
"messages":=()}
let $locals:=map:new(($default,$locals))

View file

@ -0,0 +1,10 @@
<graph xmlns="http://www.martin-loetzsch.de/DOTML"
file-name="graphs/bgcolor" rankdir="LR" bgcolor="#80FF80">
<node id="a"/>
<cluster id="c1" bgcolor="#FF8080">
<node id="b"/>
<node id="c"/>
<edge from="b" to="c"/>
</cluster>
<edge from="a" to="b"/>
</graph>

View file

@ -1,53 +1,74 @@
<div>
<div >
<h1>About GraphXQ</h1>
<p>
This application provides a web interface to <a href="http://www.graphviz.org/">Graphviz</a>.
</p>
<p>
The server side is written entirely in XQuery. It uses the
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
is used to map XQuery annotations to web server behavior.
</p>
<p>
This application includes DOTML developed by Martin Loetzsch
(<a href="http://www.martin-loetzsch.de/DOTML" target="_blank">http://www.martin-loetzsch.de/DOTML</a>).
DotML is a XML based syntax for the input language of the 'Dot' graph drawing tool from the AT&amp;T GraphViz suite. It can be transformed to the native syntax of the 'Dot' tool using XSLT.
<div class="hero-unit">
<h1>GraphXQ</h1>
<p>A web interface to <a href="http://www.graphviz.org/" target="_blank">Graphviz</a>.
Graph descriptions can be entered in the
<a href="http://www.graphviz.org/content/dot-language" target="_blank">Dot</a> language
or in <a href="http://www.martin-loetzsch.de/DOTML" target="_blank">DOTML</a>.
A REST interface is provided (<a href="api">API</a>) that enables SVG generation to be used as a service.</p>
</div>
<div class="row">
<div class="span4">
<h2>Server</h2>
<p>The server side is written entirely in XQuery. It uses the
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
is used to map XQuery annotations to web server behavior.
</p>
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
</p>
<p> The graphviz <code>dot</code> executable is used to generate SVG from the DOT source.
The resultant SVG is viewed in an interface that provides pan and zoom functionality.
The SVG may also be viewed standalone or downloaded.</p>
<p>This application includes DOTML developed by Martin Loetzsch.
DOTML is a XML based syntax for the input language of the 'Dot'.</p>
</div>
<div class="span4">
<h2>Client</h2>
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
</p>
<p>Twitter <a href="http://twitter.github.com/bootstrap/index.html"
target="_blank">Bootstrap</a> is used for the client side styling.
</p>
<p>Client libraries are loaded from CDN where possible. In particular
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p>
<h2>Bugs</h2>
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
target="_blank">Bootstrap</a> is used for the client side styling.
</p>
<p>Javascript libraries are loaded from CDN where possible. In particular
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p>
<p>The resultant SVG is viewed in an interface that provides pan and zoom functionality.
The SVG may also be viewed standalone or downloaded.</p>
</div>
<div class="span4">
<h2>Bugs</h2>
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
to firefox bugs</p>
<p>For reference this shows how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a>
works.</p>
</div>
<ul class="quick-links">
<!--
<li><iframe class="github-btn"
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&amp;repo=xqwebdoc&amp;type=watch&amp;count=true"
allowtransparency="true" scrolling="0" width="112px" frameborder="0"
height="20px"></iframe></li>
<li><iframe class="github-btn"
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&amp;repo=xqwebdoc&amp;type=fork&amp;count=true"
allowtransparency="true" scrolling="0" width="98px" frameborder="0"
height="20px"></iframe></li>
-->
<li class="follow-btn"><iframe title="Twitter Follow Button"
style="width: 237px; height: 20px;" class="twitter-follow-button"
src="http://platform.twitter.com/widgets/follow_button.html?id=twitter-widget-2&amp;lang=en&amp;screen_name=apb1704&amp;show_count=true&amp;show_screen_name=true&amp;size=m"
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
<li class="tweet-btn"><iframe title="Twitter Tweet Button"
style="width: 106px; height: 20px;"
class="twitter-share-button twitter-count-horizontal"
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Fgithub.com%2Fapb2006%2Fgraphxq&amp;size=m&amp;text=graphxq #xquery&amp;url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&amp;via=apb1704"
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
</ul>
</div>
</div>
<hr/>
<footer>
<p>&#169; Andy Bunce 2013</p>
<ul class="quick-links">
<!--
<li><iframe class="github-btn"
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&amp;repo=xqwebdoc&amp;type=watch&amp;count=true"
allowtransparency="true" scrolling="0" width="112px" frameborder="0"
height="20px"></iframe></li>
<li><iframe class="github-btn"
src="http://markdotto.github.com/github-buttons/github-btn.html?user=apb2006&amp;repo=xqwebdoc&amp;type=fork&amp;count=true"
allowtransparency="true" scrolling="0" width="98px" frameborder="0"
height="20px"></iframe></li>
-->
<li class="follow-btn"><iframe title="Twitter Follow Button"
style="width: 237px; height: 20px;" class="twitter-follow-button"
src="http://platform.twitter.com/widgets/follow_button.html?id=twitter-widget-2&amp;lang=en&amp;screen_name=apb1704&amp;show_count=true&amp;show_screen_name=true&amp;size=m"
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
<li class="tweet-btn"><iframe title="Twitter Tweet Button"
style="width: 106px; height: 20px;"
class="twitter-share-button twitter-count-horizontal"
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Fgithub.com%2Fapb2006%2Fgraphxq&amp;size=m&amp;text=graphxq #xquery&amp;url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&amp;via=apb1704"
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
</ul>
</footer>
</div>

View file

@ -1,72 +1,102 @@
<div class="row-fluid" >
<div class="span6 extend">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-dot" data-toggle="tab">Dot</a></li>
<li><a href="#tab-defaults" data-toggle="tab">Defaults</a></li>
<li><a href="#tab-xml" data-toggle="tab">Raw XML</a></li>
</ul>
<div class="tab-content" style="overflow:hidden;">
<div class="tab-pane active " id="tab-dot" >
<form id="dotForm" action= "svg" method="post" target="_new" class="well " >
<label>digraph "
<input type="text" name="title" placeholder="title" class="input-small" />"
</label>
<span style="margin-right:-5px;padding-right:2px;">{{</span>
<textarea id="dot" name="dot" rows="100" style="width:90%;overflow:scroll"
>{$dot}</textarea><span style="margin-right:-5px;">}}</span>
<label class="checkbox">
<input name="dl" type="checkbox"/> Download
</label>
</form >
</div>
<div class="tab-pane well" id="tab-defaults">
<form id="frm-defaults" class="form-table">
<label>Title:<input type="text" value="" name="dotTitle" size="15"/></label>
<label>RankDir:
<select name="rankdir" >
<option value="rankdir=TB;" selected="selected" >TB (top -> bottom)</option>
<option value="rankdir=LR;">LR (left -> right)</option>
</select>
</label>
<label>Default Shape:<select name="shape" >{$list-shapes}</select></label>
<label>Color:<select id="lstColors" width="10">{$list-colors}</select></label>
<label>Background:<select name="bgcolor" >{$list-colors}</select></label>
<label>Filter:<select name="filter" >
<option value="Bumpy" >Bumpy</option>
<option value="" selected="selected" >(None)</option>
<option value="grey_bevel_shadow">grey_bevel_shadow</option>
<option value="Bevel">Bevel</option>
<option value="MyFilter" >MyFilter</option>
<option value="MyShadow">MyShadow</option>
</select></label>
</form>
</div>
<div class="tab-pane well" id="tab-xml">
<pre id="svgsrc">source</pre>
</div>
</div>
</div>
<div class="span6">
<div class="btn-group">
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button>
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button>
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button>
</div>
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
<div>
<div class="row-fluid" style="height:24px">
{$toolbar}
</div>
<div class="row-fluid">
<div class="span6 extend" id="leftPane">
<script type="text/javascript">
$(document).ready(function(){{
getsvg(false)
}})
</script>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-dot" data-toggle="tab">Dot</a>
</li>
<li>
<a href="#tab-defaults" data-toggle="tab">Defaults</a>
</li>
<li>
<a href="#tab-xml" data-toggle="tab">Raw XML</a>
</li>
</ul>
<div class="tab-content" style="overflow:hidden;">
<div class="tab-pane active " id="tab-dot">
<form id="dotForm" action="svg" method="post" target="_new"
class="well ">
<label>
digraph "
<input type="text" name="title" placeholder="title" class="input-small" />
"
</label>
<span style="margin-right:-5px;padding-right:2px;">{{</span>
<textarea id="dot" name="dot" rows="100"
style="width:90%;overflow:scroll">{$dot}</textarea>
<span style="margin-right:-5px;">}}</span>
<label class="checkbox">
<input name="dl" type="checkbox" />
Download
</label>
</form>
</div>
<div class="tab-pane well" id="tab-defaults">
<form id="frm-defaults" class="form-table">
<label>
Title:
<input type="text" value="" name="dotTitle" size="15" />
</label>
<label>
RankDir:
<select name="rankdir">
<option value="rankdir=TB;" selected="selected">TB (top
-> bottom)
</option>
<option value="rankdir=LR;">LR (left -> right)</option>
</select>
</label>
<label>
Default Shape:
<select name="shape">{$list-shapes}</select>
</label>
<label>
Color:
<select id="lstColors" width="10">{$list-colors}</select>
</label>
<label>
Background:
<select name="bgcolor">{$list-colors}</select>
</label>
<label>
Filter:
<select name="filter">
<option value="Bumpy">Bumpy</option>
<option value="" selected="selected">(None)</option>
<option value="grey_bevel_shadow">grey_bevel_shadow</option>
<option value="Bevel">Bevel</option>
<option value="MyFilter">MyFilter</option>
<option value="MyShadow">MyShadow</option>
</select>
</label>
</form>
</div>
<div class="tab-pane well" id="tab-xml">
<pre id="svgsrc">source</pre>
</div>
</div>
</div>
<div class="span6" id="rightPane">
<div id="svgdiv" class="extend"
style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
</div>
<script type="text/javascript">
$(document).ready(function(){{
getsvg(false)
}})
</script>
</div>
</div>

View file

@ -1,28 +1,17 @@
<div>
<div class="row-fluid" style="height:1em">
ffdfd gffff gfgffgf
<div class="row-fluid" style="height:24px">
{$toolbar}
</div>
<div class="row-fluid" style="height:20em">
<div class="span5">
<form method="post" action="api/dotml" style="background-color:#EEEEEE;padding:8px;">
<div class="row-fluid" style="height:20em" >
<div class="span6" id="leftPane">
<form method="post" action="api/dotml" style="background-color:#EEEEEE;">
<div> <button type="submit">Redraw</button></div>
<textarea name="dotml" rows="12" cols="80">
&lt;graph xmlns="http://www.martin-loetzsch.de/DOTML"
bgcolor="#80FF80" &gt;
&lt;node id="a" /&gt;
&lt;node id="b"/&gt;
&lt;node id="c"/&gt;
&lt;edge from="a" to="c" decorate="false" label="decorate='false'"/&gt;
&lt;edge from="b" to="c" decorate="true" label="decorate='true'"/&gt;
&lt;/graph&gt;
</textarea>
<textarea name="dotml" rows="100" style="width:90%;overflow:scroll">{$dotml}</textarea>
</form >
</div>
<div class="span5">
<div style="width:100%;height:100%;border:5px solid red;">?</div>
<div class="span6" id="rightPane">
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
</div>
</div>
</div>

View file

@ -49,49 +49,24 @@
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
New
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="dot"><i class="icon-edit"></i> Dot</a>
</li>
<li>
<a href="dotml"><i class="icon-align-center"></i> DotML</a>
</li>
</ul>
<ul class="nav">
<li>
<a href="dot"><i class="icon-edit"></i> Dot</a>
</li>
<li>
<a href="dotml"><i class="icon-align-center"></i> DotML</a>
</li>
<li >
<a href="library">Library</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
About
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="about"><i class="icon-edit"></i> About</a>
</li>
<li>
<a href="api"><i class="icon-align-center"></i> API</a>
</li>
</ul>
</li>
</ul>
<div class="btn-group pull-right">
<a href="##" rel="tooltip" title="Make the Directories side dominant" class="btn btn-mini" data-action="dirDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
<a href="##" rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
<a href="##" rel="tooltip" title="Make the Documents side dominant" class="btn btn-mini" data-placement="left" data-action="fileDom"><i class="icon icon-indent-right"></i></a>
</div>
<div class="btn-group pull-right" style="margin-top:0px">
{$usermenu}
</div>
<a href="library"><i class="icon-book"></i> Library</a>
</li>
<li>
<a href="api"><i class="icon-wrench"></i> API</a>
</li>
</ul>
<div class="btn-group pull-right" style="margin-top:0px">
{$usermenu}
</div>
</div>
@ -101,8 +76,7 @@
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="content" class="span10">{$body}</div>
<div id="sidebar" class="span2 well">{$sidebar}</div>
{$body}
</div>
</div>

View file

@ -1,5 +1,26 @@
<div>
<!-- q,collection, hits -->
<h1>No Library yet</h1>
</div>
<!-- q,collection, hits -->
<h2>Samples</h2>
<ul>
<li>
<a href="dot?src=samples/dot/process.gv">process</a>
(dot)
</li>
<li>
<a href="dot?src=samples/dot/unix.gv">unix</a>
(dot)
</li>
<li>
<a href="dot?src=samples/dot/root.gv">root (slow)</a>
(dot)
</li>
<li>
<a href="dotml?src=samples/dotml/sample1.xml">dotml </a>
(dotml)
</li>
<li>
<a href="dotml?src=samples/dotml/cluster.xml"> cluster</a>
(dotml)
</li>
</ul>
</div>

View file

@ -1,35 +0,0 @@
<div>
<h1>RestXQ interface to graphviz</h1>
<p>Enter a string in the dot language
Examples: <a href="?dot=digraph {{ a -> b}}">digraph {{ a -> b}}</a>,
<a href="?hedge={{github|https://github.com/apb2006/hedgetree}}(ab({{tree|%23treexml}}))">another </a>
.</p>
<p> Or enter a Url to a xml document examples:
<a href="?url=graphxq/samples/process.dot">process</a>,
<a href="?">hedgeweb</a>
<a href="?url=https://raw.github.com/apb2006/hedgetree/master/src/hedgetree/samples/hedgeweb.xml">remote</a>
</p>
<form method="get" action="." style="background-color:#EEEEEE;padding:8px;">
<textarea name="dot" rows="2" cols="80">{$dot}</textarea>
<p></p>
<p>Or enter the url to a node XML source
<input name="url" value="{$url}" style="width:30em"/></p>
<button type="submit">Redraw</button>
</form >
<h2 id="isvg">Inline SVG</h2>
<div style="width:300px;height:200px">{$svg}</div>
<h2 id="svg">Object referencing <a href="svg?dot={$edot}&amp;url={$url}">svg</a>,
( <a href="svg?dl=1&amp;dot={$edot}&amp;url={$url}">download</a> svg)</h2>
<object height="150" width="300" data="svg?dot={$edot}&amp;url={$url}"
style="border:5px solid red;" type="image/svg+xml">
SVG Here
</object>
<h2 id="svgxml">SVG xml</h2>
<pre>
{fn:serialize($svg)}
</pre>
</div>

View file

@ -1,6 +0,0 @@
<div>
<!-- q,collection, hits -->
<h1>No Search Results yet</h1>
<p><b>Search results for: </b>{$q} <b> In collection: </b></p>
<ol></ol>
</div>

View file

@ -0,0 +1,15 @@
<div>
<div class="btn-group">
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button>
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button>
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button>
</div>
<!--
http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap
-->
<div class="btn-group pull-right">
<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini" data-action="lDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
<a rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini" data-placement="left" data-action="rDom"><i class="icon icon-indent-right"></i></a>
</div>
</div>