mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-04-11 11:42:24 +01:00
cdnjs and start svg hud
This commit is contained in:
parent
41d29c6036
commit
8b96190322
5 changed files with 152 additions and 6 deletions
42
src/graphxq/samples/hedge.svg
Normal file
42
src/graphxq/samples/hedge.svg
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48.5 60" version="1.1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#E3A820;stop-opacity:1"/>
|
||||
<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)"/>
|
||||
<g transform="translate(0,-5) scale(10)">
|
||||
<g>
|
||||
<a xlink:href="https://github.com/apb2006/hedgetree">
|
||||
<title>Debug info: x coord= 0</title>
|
||||
<rect x="0.24249999999999972" y="1" width="4.365" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.425" y="1.8" font-size="0.9" text-anchor="middle">github</text>
|
||||
</a>
|
||||
</g>
|
||||
<line x1="2.425" y1="2" x2="0.445" y2="3" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<line x1="2.425" y1="2" x2="2.67" y2="3" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<g>
|
||||
<a>
|
||||
<title>Debug info: x coord= 0</title>
|
||||
<rect x="0.04449999999999998" y="3" width="0.801" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="0.445" y="3.8" font-size="0.9" text-anchor="middle">a</text>
|
||||
</a>
|
||||
</g>
|
||||
<g>
|
||||
<a>
|
||||
<title>Debug info: x coord= 0.445</title>
|
||||
<rect x="2.2695" y="3" width="0.801" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.67" y="3.8" font-size="0.9" text-anchor="middle">b</text>
|
||||
</a>
|
||||
</g>
|
||||
<line x1="2.67" y1="4" x2="2.67" y2="5" style="stroke-width: 0.1; stroke: black;"/>
|
||||
<g>
|
||||
<a xlink:href="#treexml">
|
||||
<title>Debug info: x coord= 0.445</title>
|
||||
<rect x="1.0679999999999998" y="5" width="3.204" height="1" rx="0.4" ry="0.4" style="fill: yellow; stroke: black; stroke-width: 0.1;"/>
|
||||
<text x="2.67" y="5.8" font-size="0.9" text-anchor="middle">tree</text>
|
||||
</a>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
11
src/graphxq/samples/multiple.svg
Normal file
11
src/graphxq/samples/multiple.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg x="10">
|
||||
<rect x="10" y="10" height="100" width="100"
|
||||
style="stroke:#ff0000; fill: #0000ff"/>
|
||||
</svg>
|
||||
<svg x="200">
|
||||
<rect x="10" y="10" height="100" width="100"
|
||||
style="stroke:#009900; fill: #00cc00"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
91
src/graphxq/samples/test.html
Normal file
91
src/graphxq/samples/test.html
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head id="head">
|
||||
<meta charset="utf-8">
|
||||
<title id="title">svg loader</title>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$("#load").on("click",getsvg);
|
||||
|
||||
});
|
||||
function getsvg(){
|
||||
var f=$("#src").val();
|
||||
alert("hi: "+f);
|
||||
$.ajax({
|
||||
type:"GET",
|
||||
url:f,
|
||||
|
||||
dataType: "text",
|
||||
success: function(str){
|
||||
// console.log(data)
|
||||
var oParser = new DOMParser();
|
||||
var data = oParser.parseFromString(str, "text/xml");
|
||||
// http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file
|
||||
var n = document.importNode(data.documentElement,true);
|
||||
// $("#svgdiv").empty().append(n);
|
||||
$("#cuthere").empty().append(n);
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<input id="src" value="hedge.svg"/>
|
||||
<button id="load">load</button>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" onmousemove="show_coords(evt)"
|
||||
style="border:5px solid red;overflow:scroll;"
|
||||
viewBox="0 0 400 400" version="1.1" width="500px" height="300px" preserveAspectRatio="xMidYMid meet">
|
||||
<script type="text/ecmascript" xlink:href="../viewbox/ViewBox.js"/>
|
||||
<script type="text/ecmascript"><![CDATA[
|
||||
var svgns = "http://www.w3.org/2000/svg";
|
||||
var svgRoot;
|
||||
|
||||
var viewBox;
|
||||
var cursor;
|
||||
var coords;
|
||||
function init(e) {
|
||||
if ( window.svgDocument == null )
|
||||
svgDocument = e.target.ownerDocument;
|
||||
|
||||
svgRoot = e.target;
|
||||
|
||||
// viewBox = new ViewBox(svgRoot);
|
||||
tspans =svgRoot.getElementById("coords").getElementsByTagNameNS(svgns, "tspan");
|
||||
};
|
||||
|
||||
function show_coords(e) {
|
||||
var parent = e.currentTarget;
|
||||
var p1 = svgRoot.createSVGPoint();
|
||||
p1.x = e.clientX;
|
||||
p1.y = e.clientY;
|
||||
|
||||
// Show the results
|
||||
tspans.item(1).firstChild.data = e.clientX;
|
||||
tspans.item(3).firstChild.data = e.clientY;
|
||||
tspans.item(5).firstChild.data = Math.round(p1.x*100) / 100;
|
||||
tspans.item(7).firstChild.data = Math.round(p1.y*100) / 100;
|
||||
}
|
||||
]]></script>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="yellow" />
|
||||
<g id="cuthere">
|
||||
|
||||
</g>
|
||||
<rect x="10" y="10" width="250" height="40" fill="blue" opacity="0.6"/>
|
||||
<text id="coords" fill="white" transform="translate(20,10)"
|
||||
pointer-events="none">
|
||||
<tspan x="0" dy="10pt">Client X = </tspan><tspan> </tspan>
|
||||
<tspan x="0" dy="10pt">Client Y = </tspan><tspan> </tspan>
|
||||
<tspan x="120" dy="-10pt">User X = </tspan><tspan> </tspan>
|
||||
<tspan x="120" dy="10pt">User Y = </tspan><tspan> </tspan>
|
||||
</text>
|
||||
|
||||
</svg>
|
||||
<div id="svgdiv" style="width:400px;height:300px" >hi</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -65,7 +65,9 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){{
|
||||
getsvg(false)
|
||||
}}
|
||||
</script>
|
||||
</div>
|
||||
|
|
@ -7,18 +7,18 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="xquery documentation" />
|
||||
<meta name="author" content="andy bunce" />
|
||||
<link href="/lib/bootstrap/2.1.0/css/bootstrap.css" rel="stylesheet"
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.css" rel="stylesheet"
|
||||
type="text/css" />
|
||||
|
||||
|
||||
<link href="/lib/bootstrap/2.1.0/css/bootstrap-responsive.min.css"
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css"
|
||||
rel="stylesheet" type="text/css" />
|
||||
<link href="/graphxq/app.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="/graphxq/graphxq2.png" />
|
||||
|
||||
<script src="/lib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
|
||||
<script src="/lib/bootstrap/2.1.0/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="/graphxq/jquery-svgpan.js" type="text/javascript"></script>
|
||||
<script src="/graphxq/app.js" type="text/javascript"></script>
|
||||
<script type="text/javascript"><![CDATA[
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue