Loading ...
Sorry, an error occurred while loading the content.

how to keep an object at constant position & not allow to be zoomed and panned

Expand Messages
  • SujanaRajendran
    Hi All, I have a tab at a position and when zoomed and panned, I want that tab to be at that postion whereas other objects can be zoomed and panned. Please
    Message 1 of 2 , Oct 5, 2009
    • 0 Attachment
      Hi All,
      I have a tab at a position and when zoomed and panned, I want that tab to be at that postion whereas other objects can be zoomed and panned. Please help me with the code. Below is the code for 'zoom and pan' and the 'tab'. But the tab is also zoomed and panned and doesn't stay at one position. Please help me as to what changes do I need to make to keep the tab at that place only, even when the zoom and pan buttons are clicked:

      (The 3 javascript functions used in this code are at http://www.carto.net/papers/svg/gui/tabgroup/ )

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg version="1.1" onload = "removeAllText(evt)"
      baseProfile="full"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      height="100%" width="100%" preserveAspectRatio="xMidYMid"
      onzoom="handleZoom(evt);"
      onscroll="handlePan(evt);"
      id="svg2">

      <script type="text/ecmascript" xlink:href="helper_functions.js"></script>
      <script type="text/ecmascript" xlink:href="timer.js"></script>
      <script type="text/ecmascript" xlink:href="tabgroup.js"></script>

      <script type="text/ecmascript"> <![CDATA[

      function removeAllText(id) {

      var tabStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1,"cursor":"pointer"};
      var tabwindowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
      var tabtextStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal"};
      var tabtextStylesCenter = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal","text-anchor":"middle"};

      var tabTitlesMulti = new Array("Browser","Folder","Account","Help");
      tabgroupTriangle = new tabgroup("tabgroupTriangle","tabgroupTriangle",300,450,300,350,35,"triangle","triangle",20,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStylesCenter,tabTitlesMulti,0,true,undefined);

      tabgroupTriangle.addContent("contentTabGroupTriangle0",0,true);
      tabgroupTriangle.addContent("contentTabGroupTriangle1",1,true);
      tabgroupTriangle.addContent("contentTabGroupTriangle2",2,true);
      tabgroupTriangle.addContent("contentTabGroupTriangle3",3,true);

      tabgroupTriangle.activateTabByIndex(0,false);

      function handleLoad(evt)
      {
      if (!document)
      window.document = evt.target.ownerDocument;
      init();
      }

      }

      document.rootElement.addEventListener( "SVGScroll", removeAllText, false );
      document.rootElement.addEventListener( "SVGResize", removeAllText, false );
      document.rootElement.addEventListener( "SVGZoom", removeAllText, false );


      if (!window)
      window = this;
      window.onresize=control;


      function init(){
      var tlist = document.getElementById("controls").transform.baseVal;
      tlist.getItem(0).setTranslate(0,0);
      tlist.getItem(1).setScale(1,1);
      obj = document.getElementById("centre");
      obj.setAttributeNS(null,"visibility","hidden");
      }


      function zoom(type){
      var de = document.documentElement;
      var oldScale = de.currentScale;
      var oldTranslate = { x: de.currentTranslate.x, y: de.currentTranslate.y };
      var s = 2;
      if (type == 'in')
      de.currentScale *= s;
      if (type == 'out')
      de.currentScale /= s;
      var vp_width = window.innerWidth;
      var vp_height = window.innerHeight;
      de.currentTranslate.x = vp_width/2 -
      (de.currentScale/oldScale) * (vp_width/2 - oldTranslate.x);
      de.currentTranslate.y = vp_height/2 -
      (de.currentScale/oldScale) * (vp_height/2 - oldTranslate.y);
      control();
      }

      function pan(type){
      var ct = document.documentElement.currentTranslate;
      var t = 30;
      if (type == 'left')
      ct.x += t;
      if (type == 'up')
      ct.y += t;
      if (type == 'right')
      ct.x -= t;
      if (type == 'down')
      ct.y -= t;
      control();
      }

      function control(){
      var de=document.documentElement;

      var user2screen=de.getScreenCTM();

      var inverscreen=de.createSVGMatrix();
      inverscreen.a=de.currentScale;
      inverscreen.d=de.currentScale;
      inverscreen.e=de.currentTranslate.x;
      inverscreen.f=de.currentTranslate.y;
      inverscreen=inverscreen.inverse();

      var inversuser=inverscreen.multiply(user2screen);
      inversuser=user2screen.inverse().multiply(inversuser);

      var tlist = document.getElementById("controls").transform.baseVal;
      tlist.getItem(0).setTranslate(inversuser.e, inversuser.f);
      tlist.getItem(1).setScale(inversuser.a, inversuser.d);
      }

      function centre(){
      obj = document.getElementById("centre");
      var visi=obj.getAttributeNS(null,"visibility");
      if(visi=="hidden"){
      obj.setAttributeNS(null,"visibility","visible");}
      else{
      obj.setAttributeNS(null,"visibility","hidden");}
      }

      function original(){
      var de= document.documentElement;
      de.currentTranslate.x=0;
      de.currentTranslate.y=0;
      de.currentScale=1;
      var tlist = document.getElementById("controls").transform.baseVal;
      tlist.getItem(0).setTranslate(0,0);
      tlist.getItem(1).setScale(1,1);
      }

      ]]> </script>

      <defs id="defs4">
      <path id="arrow" d="M0,9 h19 v-9 l19,29 l-19,29 v-9 h-19 z" fill="green" />
      </defs>
      <g id="controls" transform="scale(1) translate(0,0)">
      <rect x="20" y="20" width="140" height="160" fill="#ffff00" stroke="none"/>
      <circle cx="90" cy="95" r="20" fill="red" onclick="zoom('in');"/>
      <circle cx="90" cy="95" r="9" fill="green" onclick="zoom('out');"/>
      <use x="110" y="65" xlink:href="#arrow" onclick="pan('left');"/>
      <use x="115" y="80" xlink:href="#arrow" transform="rotate(90,100,100)" onclick="pan('up');"/>
      <use x="130" y="75" xlink:href="#arrow" transform="rotate(180,100,100)" onclick="pan('right');"/>
      <use x="125" y="60" xlink:href="#arrow" transform="rotate(270,100,100)" onclick="pan('down');"/>

      <g onclick="original()">
      <rect x="20" y="0" width="140" height="30" stroke="none" fill="#f9c"/>
      <text font-size="20pt" text-anchor="middle" x="95" y="25">original</text>
      </g>
      <g onclick="centre()">
      <rect x="20" y="155" width="140" height="30" stroke="none" fill="#f9c"/>
      <text font-size="20pt" text-anchor="middle" x="95" y="180">centre</text>
      </g>
      <g id="centre">
      <rect x="480" y="280" width="40" height="40" fill="none" stroke="black"/>
      <circle cx="500" cy="300" r="15" fill="none" stroke="black"/>
      </g>
      </g>

      <g id="tabgroupTriangle" />

      <text id="contentTabGroupTriangle0" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">This is a tabgroup with triangular tab corners<tspan x="10" dy="15">and a double line tab. (use "\n" as a line separator)</tspan><tspan x="10" dy="15">Click on the second tab to see oversize content</tspan></text>

      <text id="contentTabGroupTriangle1" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">This is oversize content that can be<tspan x="10" dy="15">hidden on tab-change</tspan></text>

      <text id="contentTabGroupTriangle2" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">Please contact our sales person to get an account</text>

      <text id="contentTabGroupTriangle3" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">RTFM!</text>

      </svg>
    • samydagan
      Hi Sujana, Here is my solution: http://alzt.tau.ac.il/~dagan/tools/ Look on the last subtitle called Zoom and Pan . It works fine with Firefox and Opera. It
      Message 2 of 2 , Oct 5, 2009
      • 0 Attachment
        Hi Sujana,
        Here is my solution:
        http://alzt.tau.ac.il/~dagan/tools/
        Look on the last subtitle called "Zoom and Pan" .
        It works fine with Firefox and Opera. It cannot work with IE/ASV , as explained there. It works, but not perfectly with Safari, I guess because of some bugs there of the scripting functions I am using.
        Good luck, Samy

        --- In svg-developers@yahoogroups.com, "SujanaRajendran" <sujana_jyothi@...> wrote:
        >
        > Hi All,
        > I have a tab at a position and when zoomed and panned, I want that tab to be at that postion whereas other objects can be zoomed and panned. Please help me with the code. Below is the code for 'zoom and pan' and the 'tab'. But the tab is also zoomed and panned and doesn't stay at one position. Please help me as to what changes do I need to make to keep the tab at that place only, even when the zoom and pan buttons are clicked:
        >
        > (The 3 javascript functions used in this code are at http://www.carto.net/papers/svg/gui/tabgroup/ )
        >
        > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
        > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        > <svg version="1.1" onload = "removeAllText(evt)"
        > baseProfile="full"
        > xmlns="http://www.w3.org/2000/svg"
        > xmlns:xlink="http://www.w3.org/1999/xlink"
        > xmlns:ev="http://www.w3.org/2001/xml-events"
        > height="100%" width="100%" preserveAspectRatio="xMidYMid"
        > onzoom="handleZoom(evt);"
        > onscroll="handlePan(evt);"
        > id="svg2">
        >
        > <script type="text/ecmascript" xlink:href="helper_functions.js"></script>
        > <script type="text/ecmascript" xlink:href="timer.js"></script>
        > <script type="text/ecmascript" xlink:href="tabgroup.js"></script>
        >
        > <script type="text/ecmascript"> <![CDATA[
        >
        > function removeAllText(id) {
        >
        > var tabStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1,"cursor":"pointer"};
        > var tabwindowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
        > var tabtextStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal"};
        > var tabtextStylesCenter = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal","text-anchor":"middle"};
        >
        > var tabTitlesMulti = new Array("Browser","Folder","Account","Help");
        > tabgroupTriangle = new tabgroup("tabgroupTriangle","tabgroupTriangle",300,450,300,350,35,"triangle","triangle",20,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStylesCenter,tabTitlesMulti,0,true,undefined);
        >
        > tabgroupTriangle.addContent("contentTabGroupTriangle0",0,true);
        > tabgroupTriangle.addContent("contentTabGroupTriangle1",1,true);
        > tabgroupTriangle.addContent("contentTabGroupTriangle2",2,true);
        > tabgroupTriangle.addContent("contentTabGroupTriangle3",3,true);
        >
        > tabgroupTriangle.activateTabByIndex(0,false);
        >
        > function handleLoad(evt)
        > {
        > if (!document)
        > window.document = evt.target.ownerDocument;
        > init();
        > }
        >
        > }
        >
        > document.rootElement.addEventListener( "SVGScroll", removeAllText, false );
        > document.rootElement.addEventListener( "SVGResize", removeAllText, false );
        > document.rootElement.addEventListener( "SVGZoom", removeAllText, false );
        >
        >
        > if (!window)
        > window = this;
        > window.onresize=control;
        >
        >
        > function init(){
        > var tlist = document.getElementById("controls").transform.baseVal;
        > tlist.getItem(0).setTranslate(0,0);
        > tlist.getItem(1).setScale(1,1);
        > obj = document.getElementById("centre");
        > obj.setAttributeNS(null,"visibility","hidden");
        > }
        >
        >
        > function zoom(type){
        > var de = document.documentElement;
        > var oldScale = de.currentScale;
        > var oldTranslate = { x: de.currentTranslate.x, y: de.currentTranslate.y };
        > var s = 2;
        > if (type == 'in')
        > de.currentScale *= s;
        > if (type == 'out')
        > de.currentScale /= s;
        > var vp_width = window.innerWidth;
        > var vp_height = window.innerHeight;
        > de.currentTranslate.x = vp_width/2 -
        > (de.currentScale/oldScale) * (vp_width/2 - oldTranslate.x);
        > de.currentTranslate.y = vp_height/2 -
        > (de.currentScale/oldScale) * (vp_height/2 - oldTranslate.y);
        > control();
        > }
        >
        > function pan(type){
        > var ct = document.documentElement.currentTranslate;
        > var t = 30;
        > if (type == 'left')
        > ct.x += t;
        > if (type == 'up')
        > ct.y += t;
        > if (type == 'right')
        > ct.x -= t;
        > if (type == 'down')
        > ct.y -= t;
        > control();
        > }
        >
        > function control(){
        > var de=document.documentElement;
        >
        > var user2screen=de.getScreenCTM();
        >
        > var inverscreen=de.createSVGMatrix();
        > inverscreen.a=de.currentScale;
        > inverscreen.d=de.currentScale;
        > inverscreen.e=de.currentTranslate.x;
        > inverscreen.f=de.currentTranslate.y;
        > inverscreen=inverscreen.inverse();
        >
        > var inversuser=inverscreen.multiply(user2screen);
        > inversuser=user2screen.inverse().multiply(inversuser);
        >
        > var tlist = document.getElementById("controls").transform.baseVal;
        > tlist.getItem(0).setTranslate(inversuser.e, inversuser.f);
        > tlist.getItem(1).setScale(inversuser.a, inversuser.d);
        > }
        >
        > function centre(){
        > obj = document.getElementById("centre");
        > var visi=obj.getAttributeNS(null,"visibility");
        > if(visi=="hidden"){
        > obj.setAttributeNS(null,"visibility","visible");}
        > else{
        > obj.setAttributeNS(null,"visibility","hidden");}
        > }
        >
        > function original(){
        > var de= document.documentElement;
        > de.currentTranslate.x=0;
        > de.currentTranslate.y=0;
        > de.currentScale=1;
        > var tlist = document.getElementById("controls").transform.baseVal;
        > tlist.getItem(0).setTranslate(0,0);
        > tlist.getItem(1).setScale(1,1);
        > }
        >
        > ]]> </script>
        >
        > <defs id="defs4">
        > <path id="arrow" d="M0,9 h19 v-9 l19,29 l-19,29 v-9 h-19 z" fill="green" />
        > </defs>
        > <g id="controls" transform="scale(1) translate(0,0)">
        > <rect x="20" y="20" width="140" height="160" fill="#ffff00" stroke="none"/>
        > <circle cx="90" cy="95" r="20" fill="red" onclick="zoom('in');"/>
        > <circle cx="90" cy="95" r="9" fill="green" onclick="zoom('out');"/>
        > <use x="110" y="65" xlink:href="#arrow" onclick="pan('left');"/>
        > <use x="115" y="80" xlink:href="#arrow" transform="rotate(90,100,100)" onclick="pan('up');"/>
        > <use x="130" y="75" xlink:href="#arrow" transform="rotate(180,100,100)" onclick="pan('right');"/>
        > <use x="125" y="60" xlink:href="#arrow" transform="rotate(270,100,100)" onclick="pan('down');"/>
        >
        > <g onclick="original()">
        > <rect x="20" y="0" width="140" height="30" stroke="none" fill="#f9c"/>
        > <text font-size="20pt" text-anchor="middle" x="95" y="25">original</text>
        > </g>
        > <g onclick="centre()">
        > <rect x="20" y="155" width="140" height="30" stroke="none" fill="#f9c"/>
        > <text font-size="20pt" text-anchor="middle" x="95" y="180">centre</text>
        > </g>
        > <g id="centre">
        > <rect x="480" y="280" width="40" height="40" fill="none" stroke="black"/>
        > <circle cx="500" cy="300" r="15" fill="none" stroke="black"/>
        > </g>
        > </g>
        >
        > <g id="tabgroupTriangle" />
        >
        > <text id="contentTabGroupTriangle0" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">This is a tabgroup with triangular tab corners<tspan x="10" dy="15">and a double line tab. (use "\n" as a line separator)</tspan><tspan x="10" dy="15">Click on the second tab to see oversize content</tspan></text>
        >
        > <text id="contentTabGroupTriangle1" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">This is oversize content that can be<tspan x="10" dy="15">hidden on tab-change</tspan></text>
        >
        > <text id="contentTabGroupTriangle2" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">Please contact our sales person to get an account</text>
        >
        > <text id="contentTabGroupTriangle3" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">RTFM!</text>
        >
        > </svg>
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.