<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Trendelburg Abbundzeichen</title>
<link rel="stylesheet" href="TBAB_Data/TBAB_Data.css"/>
<style></style>
<script src="TBAB_Data/TBAB_Java/TBAB_PanSVG.js"></script>
<script></script>
</head>
<body>
<!--
coded by CrEaToXx for a museum.
script language is english and in small letters. no exceptions!!!
element declaration:
<div> = division(top priority in hierarchie)
<svg> = scalable vector graphic (secondary priority in hierarchie)
<g> = group (terdiary priority in hierarchie)
<a> = 'a' hyper link (terdiary priority in hierarchie)
<defs> = graphical element for later usage across the file?
<script> = embedded script (lowest priority in hierarchie)
<rect> = rectangle (lowest priority in hierarchie)
<text> = standard text (lowest priority in hierarchie)
hierarchie needs to stay in equal order always!!! unordered elements can not exist inside higher tier elements!!!
you can, however, include non svg native elements with <foreignobject>.
naming declaration:
allowed naming is: id, class and tag. id will be used in .ccs as well as in scripts. classes should be avoided, because the .ccs functions are bugged in Firefox!!!
if no id, class or tag is given, then the particular element is not used inside any script or .css!!! you do not necessarily need named elements!
-->
<!--primary layer-->
<svg id="svg_Main_ID" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1504" height="2072" preserveAspectRatio="xMinYMax meet" >
<!--Pan and Zoom java script, disabled during development!!!-->
<!--head>
<script href="TBAB_Data/TBAB_Java/TBAB_PanSVG.js"></script>
</head-->
<!--main stroke element-->
<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black" stroke-width="3" stroke-opacity="0.6"/>
<!--path layer group-->
<g id="g_path_ID">
<image x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path01.svg"/> <!--Beschriftung-->
<image x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path02.svg"/> <!--Grundriss-->
<image id="03_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path03.svg" visibility="hidden"/> <!--Stiele-->
<image id="04_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path04.svg" visibility="hidden"/> <!--Riegel-->
<image id="05_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path05.svg" visibility="hidden"/> <!--Schwelle-->
<image id="06_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path06.svg" visibility="hidden"/> <!--Strebe-->
<image id="07_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path07.svg" visibility="hidden"/> <!--Kopfbaender-->
<image id="08_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path08.svg" visibility="hidden"/> <!--Deckenbalken-->
<image id="09_path_ID" x="0%" y="0%" width="100%" height="100%" xlink:href="TBAB_Data/TBAB_Paths/TBAB_Path09.svg" visibility="hidden"/> <!--Dachbalken-->
</g>
<!--main description/text group-->
<g id="g_txt_img_ID">
<!--EG Eingang_SW01-->
<rect x="980" y="1597" width="3" height="50" fill="black"/>
<text x="1008" y="1597" transform="rotate(90 1013,1597)" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="18" font-weight="bold">Eingang</text>
<rect x="1049" y="1597" width="3" height="50" fill="black"/>
<!--EG Eingang_SW02-->
<rect x="382" y="1597" width="3" height="50" fill="black"/>
<text x="410" y="1597" transform="rotate(90 415,1597)" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="18" font-weight="bold">Eingang</text>
<rect x="451" y="1597" width="3" height="50" fill="black"/>
<!--EG Eingang_NW-->
<rect x="1200" y="1743" width="50" height="3" fill="black"/>
<text x="1195" y="1782" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="18" font-weight="bold">Eingang</text>
<rect x="1200" y="1807.5" width="50" height="3" fill="black"/>
<!--Anbau-->
<text x="1364" y="1742" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="15" font-weight="bold">Anbau EG</text>
<text x="1362.5" y="1257" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="15" font-weight="bold">Anbau OG1</text>
<text x="1360" y="751" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="15" font-weight="bold">Anbau OG2</text>
<!--EG Eingang_Anbau-->
<rect x="1370" y="1609" width="2" height="25" fill="black"/>
<text x="1375" y="1605" transform="rotate(90 1380,1609)" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="10" font-weight="bold">Eingang</text>
<rect x="1399" y="1609" width="2" height="25" fill="black"/>
<!--OG1 Engang_NW-->
<rect x="1237" y="1180" width="20" height="2" fill="black"/>
<text x="1235.5" y="1191" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Eingang</text>
<rect x="1237" y="1192.5" width="20" height="2" fill="black"/>
<!--OG1 Luke_NW-->
<rect x="1237" y="1325" width="20" height="2" fill="black"/>
<text x="1235.5" y="1336" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Luke</text>
<rect x="1237" y="1337.5" width="20" height="2" fill="black"/>
<!--OG2 Luke_SO-->
<rect x="1242" y="778" width="20" height="2" fill="black"/>
<text x="1240.5" y="789.5" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Luke</text>
<rect x="1242" y="791" width="20" height="2" fill="black"/>
<!--DG Luke_SO-->
<rect x="1195" y="323" width="20" height="2" fill="black"/>
<text x="1193.5" y="335.5" stroke="black" stroke-width="0.3" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="11" font-weight="bold">Luke</text>
<rect x="1195" y="338" width="20" height="2" fill="black"/>
</g>
<!--image layer-->
<svg id="svg_image_ID" visibility="hidden">
<!--jede Menge Imagereferenzen, die ich hier im CB Beispiel weglasse-->
</svg>
<!--legend layer-->
<svg id="svg_legend_ID" x="29.85%" y="34%" viewBox="0 0 3534 4716" visibility="hidden">
<!--green layer rect with fill and stroke-->
<rect x="0%" y="0%" width="40%" height="30%" rx="25" ry="25" fill="lightgreen" fill-opacity="0.5" stroke="black" stroke-width="5" stroke-opacity="0.6"/>
<text x="11.0%" y="2%" style="text-decoration: underline" stroke="black" fill="black" fill-opacity="0.5" font-family="latinwd" font-size="100" font-weight="bold">Legende/Hilfe:</text>
</svg>
<!--developer grid layer-->
<svg id="svg_developer_ID" width="100%" height="100%" visibility="hidden" onload="init()" onmousemove="mouseMove(evt)">
<!--grid group-->
<g>
<defs>
<pattern id="p_smGr_ID" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="p_Gr_ID" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#p_smGr_ID)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#p_Gr_ID)" />
</g>
<!--cursor info group-->
<g>
<rect id="r_ball_ID" fill="white" fill-opacity="0.0000001" width="100%" height="100%"/><!--notice this rect is only for dummy effects, it can not be dragged!!!-->
<text id="t_xTx_ID" x="100" y="100" font-size="10" fill="black">X:</text>
<text id="t_xPo_ID" x="110" y="100" font-size="10" fill="black">636</text>
<text id="t_yTx_ID" x="100" y="110" font-size="10" fill="black">Y:</text>
<text id="t_yPo_ID" x="110" y="110" font-size="10" fill="black">441</text>
<circle id="c_dot_ID" cx="50%" cy="50%" r="10" fill="none" stroke="none" stroke-width="0.5"/><!--real wuslon fill is gold-->
</g>
</svg>
<!--script section-->
<!--developer grid layer wuslon script-->
<script><![CDATA[
var bMouseDragging = false;
var nMouseOffsetX = 0;
var nMouseOffsetY = 0;
function mouseDown(evt) {
bMouseDragging = true;
var r_ball_ID = document.getElementById("r_ball_ID");
if(r_ball_ID) {
var p = document.documentElement.createSVGPoint();
p.x = evt.pageX;
p.y = evt.pageY;
var m = r_ball_ID.getScreenCTM();
p = p.matrixTransform(m.inverse());
nMouseOffsetX = p.x - parseInt(r_ball_ID.getAttribute("cx"));
nMouseOffsetY = p.y - parseInt(r_ball_ID.getAttribute("cy"));
}
}
function mouseUp(evt) {
bMouseDragging = false;
}
function mouseMove(evt) {
var p = document.documentElement.createSVGPoint();
p.x = evt.pageX;
p.y = evt.pageY;
if(bMouseDragging) {
var r_ball_ID = document.getElementById("r_ball_ID");
if(r_ball_ID) {
var m = r_ball_ID.getScreenCTM();
p = p.matrixTransform(m.inverse());
r_ball_ID.setAttribute("cx", p.x - nMouseOffsetX);
r_ball_ID.setAttribute("cy", p.y - nMouseOffsetY);
}
}
displayCoords(p.x, p.y);
}
function displayCoords(x,y) {
var xNode = document.getElementById("t_xPo_ID");
var yNode = document.getElementById("t_yPo_ID");
if(xNode && yNode) {
xNode.firstChild.nodeValue = parseInt(x);
yNode.firstChild.nodeValue = parseInt(y);
}
}
function init() {
var r_ball_ID = document.getElementById("r_ball_ID");
if(r_ball_ID) {
r_ball_ID.addEventListener("mousedown", mouseDown, false);
r_ball_ID.addEventListener("mouseup", mouseUp, false);
r_ball_ID.addEventListener("mousemove", mouseMove, false);
}
}
]]></script>
<!--image layer on/off key(1-7) scripts-->
<!--legend layer on/off key(F1) script-->
<!--developer grid layer on/off key(F2) script-->
<!--developer grid layer wuslon script_addition...makes coordinates move with cursor!-->
<script>
var beforePan
window.onload = function() {
beforePan = function(oldPan, newPan){
var stopHorizontal = false
, stopVertical = false
, gutterWidth = 100
, gutterHeight = 100
, sizes = this.getSizes()
, leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
, rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
, topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
, bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)
customPan = {}
customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))
return customPan
}
window.panZoom = svgPanZoom('#svg_Main_ID', {
zoomEnabled: true
, dblClickZoomEnabled: false
, minZoom: 0.4
, maxZoom: 20
, controlIconsEnabled: false
, fit: 1
, beforePan: beforePan
});
panZoom.setBeforePan(beforePan)
// outcommended: made screen stuck in last place when scrolled = bugged
};
document.addEventListener('keydown', (event) => {
const keyName = event.key;
var stielVar = document.getElementById("03_path_ID");
var riegeVar = document.getElementById("04_path_ID");
var schweVar = document.getElementById("05_path_ID");
var strebVar = document.getElementById("06_path_ID");
var kopfbVar = document.getElementById("07_path_ID");
var deckbVar = document.getElementById("08_path_ID");
var dachbVar = document.getElementById("09_path_ID");
var g_stielVar = document.getElementById("g_stiel_ID");
var g_riegeVar = document.getElementById("g_riegel_ID");
var g_schweVar = document.getElementById("g_schwelle_ID");
var g_strebVar = document.getElementById("g_strebe_ID");
var g_kopfbVar = document.getElementById("g_kopfb_ID");
var g_deckbVar = document.getElementById("g_deckb_ID");
var g_dachbVar = document.getElementById("g_dachb_ID");
var visStVar = stielVar.getAttributeNS(null,"visibility");
var visRiVar = g_riegeVar.getAttributeNS(null,"visibility");
var visScVar = schweVar.getAttributeNS(null,"visibility");
var visSrVar = strebVar.getAttributeNS(null,"visibility");
var visKoVar = kopfbVar.getAttributeNS(null,"visibility");
var visDeVar = deckbVar.getAttributeNS(null,"visibility");
var visDaVar = dachbVar.getAttributeNS(null,"visibility");
var legendVar = document.getElementById("svg_legend_ID");
var visibilityLegendVar = legendVar.getAttributeNS(null,"visibility");
var dragVar = document.getElementById("svg_developer_ID");
var visibilityDragVar = dragVar.getAttributeNS(null,"visibility");
if (keyName === '1') {
event.preventDefault();
if (visStVar == "visible"){
g_stielVar.setAttributeNS(null,"visibility","hidden");
stielVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_stielVar.setAttributeNS(null,"visibility","visible");
stielVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === '2') {
event.preventDefault();
if (visRiVar == "visible"){
g_riegeVar.setAttributeNS(null,"visibility","hidden");
//riegeVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_riegeVar.setAttributeNS(null,"visibility","visible");
//riegeVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === '3') {
event.preventDefault();
if (visScVar == "visible"){
g_schweVar.setAttributeNS(null,"visibility","hidden");
schweVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_schweVar.setAttributeNS(null,"visibility","visible");
schweVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === '4') {
event.preventDefault();
if (visSrVar == "visible"){
g_strebVar.setAttributeNS(null,"visibility","hidden");
strebVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_strebVar.setAttributeNS(null,"visibility","visible");
strebVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === '5') {
event.preventDefault();
if (visKoVar == "visible"){
g_kopfbVar.setAttributeNS(null,"visibility","hidden");
kopfbVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_kopfbVar.setAttributeNS(null,"visibility","visible");
kopfbVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === '6') {
event.preventDefault();
if (visDeVar == "visible"){
g_deckbVar.setAttributeNS(null,"visibility","hidden");
deckbVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_deckbVar.setAttributeNS(null,"visibility","visible");
deckbVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === '7') {
event.preventDefault();
if (visDaVar == "visible"){
g_dachbVar.setAttributeNS(null,"visibility","hidden");
dachbVar.setAttributeNS(null,"visibility","hidden");
}
else {
g_dachbVar.setAttributeNS(null,"visibility","visible");
dachbVar.setAttributeNS(null,"visibility","visible");
}
}
if (keyName === 'F1') {
event.preventDefault();
if (visibilityLegendVar == "visible"){
legendVar.setAttributeNS(null,"visibility","hidden");
//legendVar.parentNode.scrollTop = legendVar.offsetTop - legendVar.parentNode.offsetTop;
}
else {
legendVar.setAttributeNS(null,"visibility","visible");
//legendVar.scrollIntoView({block: "start", behavior: "smooth"})
}
}
if (keyName === 'F2') {
event.preventDefault();
if (visibilityDragVar == "visible"){
dragVar.setAttributeNS(null,"visibility","hidden");
}
else {
dragVar.setAttributeNS(null,"visibility","visible");
}
}
}, true);
var svg = document.documentElement, pt = svg.createSVGPoint(), c_dot_ID = document.querySelector('#c_dot_ID');
svg.addEventListener('mousemove', function(evt) {
var c_dot_IDVar = document.getElementById("c_dot_ID");
var t_xPo_IDVar = document.getElementById("t_xPo_ID");
var t_xTx_IDVar = document.getElementById("t_xTx_ID");
var t_yPo_IDVar = document.getElementById("t_yPo_ID");
var t_yTx_IDVar = document.getElementById("t_yTx_ID");
var cursorPointVar = cursorPoint(evt);
c_dot_IDVar.setAttribute('cx',cursorPointVar.x);
c_dot_IDVar.setAttribute('cy',cursorPointVar.y);
t_xPo_IDVar.setAttribute('x',cursorPointVar.x+21);
t_xPo_IDVar.setAttribute('y',cursorPointVar.y);
t_xTx_IDVar.setAttribute('x',cursorPointVar.x+11);
t_xTx_IDVar.setAttribute('y',cursorPointVar.y);
t_yPo_IDVar.setAttribute('x',cursorPointVar.x+21);
t_yPo_IDVar.setAttribute('y',cursorPointVar.y+9);
t_yTx_IDVar.setAttribute('x',cursorPointVar.x+11);
t_yTx_IDVar.setAttribute('y',cursorPointVar.y+9);
}, false);
svg.addEventListener('wheel', function(evt) { //fix for not following mouse when zooming, panning or scrolling
var c_dot_IDVar = document.getElementById("c_dot_ID");
var t_xPo_IDVar = document.getElementById("t_xPo_ID");
var t_xTx_IDVar = document.getElementById("t_xTx_ID");
var t_yPo_IDVar = document.getElementById("t_yPo_ID");
var t_yTx_IDVar = document.getElementById("t_yTx_ID");
var cursorPointVar = cursorPoint(evt);
c_dot_IDVar.setAttribute('cx',cursorPointVar.x);
c_dot_IDVar.setAttribute('cy',cursorPointVar.y);
t_xPo_IDVar.setAttribute('x',cursorPointVar.x+21);
t_xPo_IDVar.setAttribute('y',cursorPointVar.y);
t_xTx_IDVar.setAttribute('x',cursorPointVar.x+11);
t_xTx_IDVar.setAttribute('y',cursorPointVar.y);
t_yPo_IDVar.setAttribute('x',cursorPointVar.x+21);
t_yPo_IDVar.setAttribute('y',cursorPointVar.y+9);
t_yTx_IDVar.setAttribute('x',cursorPointVar.x+11);
t_yTx_IDVar.setAttribute('y',cursorPointVar.y+9);
}, false);
function cursorPoint(evt) {
var top = this.scrollY;//fix for scrolling, panning, zooming
var left = this.scrollX;//fix for scrolling, panning, zooming
pt.x = evt.pageX - left;
pt.y = evt.pageY - top;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
</script>
</svg>
</body>
</html>
