Move a rectangle with a form

lurtnowski · May 21, 2022, 4:22am

I have this,

I’m trying to use the forms select box to move the blue rectangle to another slot, here is what happens when I change the 5 to a 3

Everything looks good,
But if I select 4

I missed the mark, I am confused with the function, how can I get the numbers (3 and 4) to have the same y direction?


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="1800; url=../login/logout.php" /><title>Position Circuit Breaker</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/tabs.css">
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<style>
small { font-size:60% }
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-bottom:10px">
<a class="navbar-brand mb-2" href="../index.php">Data Collection Tool</a>
<p class="text-white position-absolute font-weight-bold font-italic" style="top:35px">Baseline 2.0</p>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="../index.php">Home</a>
      </li>
      <li class="nav-ite">
        <a class="nav-link" href="../rooms/comms.php">Comms&nbsp;Room</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link" href="../rooms/crypto.php">Crypto&nbsp;Room</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="../rooms/data.php">Data&nbsp;Center</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link" href="../rooms/server.php">Server&nbsp;Room</a>
      </li> 
      <li class="nav-item">
        <a class="nav-link" href="../rooms/tech.php">Tech&nbsp;Control</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link" href="../rooms/watch.php">Watch&nbsp;Floor</a>
      </li> 

	  </ul>
    <span class="navbar-text">
You&nbsp;are&nbsp;logged&nbsp;in&nbsp;as&nbsp;&nbsp;ssam@industechnology.com&nbsp;&nbsp;<a class="btn btn-danger btn-sm" href="../login/logout.php" role="button">Logout</a>	</span>
  </div>
</nav>
<div class="card" style="margin:25px auto; width:85%">
    <div class="card-header">
      <h2><span class="icon-move"></span>&nbsp;&nbsp;Position Circuit Breaker <small class="text-secondary ml-3">Use mouse/dropdowns to position.</small></h2> 
	</div>
	<div class="card-body p-3">
		<div class="row"> 
			<div class="col-8">
				<div class="row"> 
					<div class="col">
					  <h3 class="text-dark mb-3">Manufacturer:<span class="text-secondary float-right">Unknown</span></h3>
					  <h3 class="text-dark">Model:<span class="text-secondary float-right">Unknown</span></h3>
					</div>
					<div class="col">
						<div class="row">
							<div class="col">
							  <h5 class="text-dark mb-2">Poles:<span class="text-secondary float-right">2</span></h5>
							  <h5 class="text-dark mb-2">Voltage:<span class="text-secondary float-right">12 Volts</span></h5>
							</div>
							<div class="col">						  <h5 class="text-dark mb-2">Phase:<span class="text-secondary float-right">2</span></h5>
							  <h5 class="text-dark mb-2">Rating:<span class="text-secondary float-right">30 Amps</span></h5>
							</div>
						</div>		
					</div>
				</div>
				  <hr>
				<div class="row mb-3">
					<div class="col-3">
					  <h5 class="text-dark"><span class='icon-comments'></span>&nbsp;&nbsp;Notes:</h5>
					</div>
					<div class="col">	
					   <h5 class="text-secondary">None</h5>
					</div>
				</div>
				  <hr>
				  <form method="post" action="position_circuit_breaker_engine.php">
				<div class="row"> 
					<div class="form-group col">	
					  <label for="Slot">Beginning Slot</label>
						<div class="input-group">
						  <div class="input-group-prepend">
							<span class="input-group-text">#</span>
						  </div>
						  <select class="form-control" id="Slot" name="Slot">
 <option value="5">5</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option>	

						  </select>					
						</div>
					</div>								
				</div>								
				<div class="row"> 
					<div class="form-group col">	
					  <button type="submit" class="btn btn-outline-dark btn-lg btn-block"><span class="icon-ok"></span>&nbsp;&nbsp;Submit</button>
					</div>								
				</div>	
			  <input type="hidden" name="circuit_breaker_id" value="1">
			  <input type="hidden" name="old_x_coord" value="0">
			  <input type="hidden" name="old_y_coord" value="186">
			  <input type="hidden" name="x_coord" id="x_coord" value="">
			  <input type="hidden" name="y_coord" id="y_coord" value="">
			  <input type="hidden" name="power_panel_id" value="1">
			  </form>	
			</div>
			<div class="col">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 780" onload="makeDraggable(evt)">
<defs>
    <script type="text/javascript"><![CDATA[
      function makeDraggable(evt) {
        var svg = evt.target;

        svg.addEventListener('mousedown', startDrag);
        svg.addEventListener('mousemove', drag);
        svg.addEventListener('mouseup', endDrag);
        svg.addEventListener('mouseleave', endDrag);
        svg.addEventListener('touchstart', startDrag);
        svg.addEventListener('touchmove', drag);
        svg.addEventListener('touchend', endDrag);
        svg.addEventListener('touchleave', endDrag);
        svg.addEventListener('touchcancel', endDrag);

        var selectedElement, offset, transform,
            bbox, minX, maxX, minY, maxY, confined;

        var boundaryX1 = 65;
        var boundaryX2 = 465;
        var boundaryY1 = 80;
        var boundaryY2 = 730;

        function getMousePosition(evt) {
          var CTM = svg.getScreenCTM();
          if (evt.touches) { evt = evt.touches[0]; }
          return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
          };
        }

        function startDrag(evt) {
          if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);

            // Make sure the first transform on the element is a translate transform
            var transforms = selectedElement.transform.baseVal;

            if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
              // Create an transform that translates by (0, 0)
              var translate = svg.createSVGTransform();
              translate.setTranslate(0, 0);
              selectedElement.transform.baseVal.insertItemBefore(translate, 0);
            }

            // Get initial translation
            transform = transforms.getItem(0);
            offset.x -= transform.matrix.e;
            offset.y -= transform.matrix.f;

            confined = evt.target.classList.contains('confine');
            if (confined) {
                bbox = selectedElement.getBBox();
                minX = boundaryX1 - bbox.x;
                maxX = boundaryX2 - bbox.x - bbox.width;
                minY = boundaryY1 - bbox.y;
                maxY = boundaryY2 - bbox.y - bbox.height;
            }
          }
        }

        function drag(evt) {
          if (selectedElement) {
            evt.preventDefault();

            var coord = getMousePosition(evt);
            var dx = coord.x - offset.x;
            var dy = coord.y - offset.y;

            if (confined) {
                if (dx < minX) { dx = minX; }
                else if (dx > maxX) { dx = maxX; }
                if (dy < minY) { dy = minY; }
                else if (dy > maxY) { dy = maxY; }
            }

          transform.setTranslate(dx, (dy / 92.857142857143) * 92.857142857143);
		  document.getElementById("x_coord").value = dx;
		  document.getElementById("y_coord").value = (Math.round(dy / 92.857142857143) * 92.857142857143);
		  var y_deviation = parseInt(parseInt(document.getElementById("y_coord").value) / parseInt(92.857142857143)) * 2;
		  console.log('x: '+document.getElementById("x_coord").value+' y: '+document.getElementById("y_coord").value);
		  console.log('Slot Height: '+92.857142857143);
			if(dx < 100) {
			  var slot = y_deviation + 1;
			  console.log('Slot Number: '+ slot);

			} else {
			  var slot = y_deviation + 2;
			  console.log('Slot Number: '+ slot);
				
			}
			  document.getElementById("Slot").value = slot;
		  }
        }

        function endDrag(evt) {
          selectedElement = false;  

        }
      }
    ]]> </script>
  <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#FA8072" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern>
  <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-46)">
    <rect fill="#ddd" x="0" y="0" width="20" height="10"></rect>
    <rect fill="white" x="0" y="10" width="20" height="10"></rect>
  </pattern> 
  <filter id="color-overlay">
    <feFlood flood-color="#d9d9d9"/>
    <feComposite in2="SourceAlpha" operator="atop"/>
  </filter>
  <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
    </filter>
    
<style>
rect, path {
fill:#eeeeee;
stroke:black;
stroke-width:2px;
}
text {
font-size:14pt;
font-family:Verdana;
}
rect.rack {
fill:whitesmoke;
stroke:black;
stroke-width:1px;
}      
rect.asset {
      stroke:#666;
      stroke-width:.8px;
	  cursor:not-allowed;
	  fill:url(#pattern2);
}
rect.draggable {
	stroke:#000;
	fill:#d1ecf1;
	stroke-width:.1;
	opacity:.9;
filter:url(#shadow)
}
.draggable {
	cursor: move;
}</style>
</defs>   
<rect x="10" y="50" width="500" height="700" />
<path d="M10 50 20 30 530 30 510 50 Z"/>
<path d="M510 750 530 730 530 30 510 50 Z"/>
<rect x="65" y="80" width="175" height="650" class="rack" />
<rect x="290" y="80" width="175" height="650" class="rack" />
<text text-anchor='middle' x='35' y='126.42857142857'>1</text>
<text text-anchor='middle' x='487' y='126.42857142857'>2</text>
<text text-anchor='middle' x='35' y='219.28571428571'>3</text>
<text text-anchor='middle' x='487' y='219.28571428571'>4</text>
<text text-anchor='middle' x='35' y='312.14285714286'>5</text>
<text text-anchor='middle' x='487' y='312.14285714286'>6</text>
<text text-anchor='middle' x='35' y='405'>7</text>
<text text-anchor='middle' x='487' y='405'>8</text>
<text text-anchor='middle' x='35' y='497.85714285714'>9</text>
<text text-anchor='middle' x='487' y='497.85714285714'>10</text>
<text text-anchor='middle' x='35' y='590.71428571429'>11</text>
<text text-anchor='middle' x='487' y='590.71428571429'>12</text>
<text text-anchor='middle' x='35' y='683.57142857143'>13</text>
<text text-anchor='middle' x='487' y='683.57142857143'>14</text>
<rect x="65" y="266" width="175" height="185.71428571429" class="draggable confine" id="New_Circuit_Breaker"/></svg>


			</div>
		</div>
	</div>
</div>
<script>
document.getElementById('Slot').addEventListener('change',moveSlot);
function moveSlot() {
        var domElemnt = document.getElementById("New_Circuit_Breaker");
        var selectSlotValue	= document.getElementById("Slot").value;

var originalSlotValue	= 5;		var diff = selectSlotValue - originalSlotValue;
		var orig_y = 186;	
		var y_adjustment = diff * (92.857142857143 / 2);	
        if (selectSlotValue % 2 == 0) {
			x_adjustment = 225;
		    document.getElementById("y_coord").value = y_adjustment;
		} else {
			x_adjustment = 0;
		    document.getElementById("y_coord").value = y_adjustment;
		}		
		console.log('Original value: 5, so its y is '+orig_y);
		console.log('New value: '+selectSlotValue+', so its y is translated in the y direction by '+y_adjustment);
        var transformAttr = ' translate('+x_adjustment+','+y_adjustment+')';

        domElemnt.setAttribute('transform', transformAttr);
   }	
</script>
<script src='../scripts/jquery-3.0.0.js' type='text/javascript'></script>
<script src="../scripts/popper.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
</body>
</html>

rpg_digital · May 21, 2022, 9:58am

Hi Lurtnowski,

Is it possible for you to put this in a jsfiddle or a codepen?

With regards the following:

lurtnowski:

if (selectSlotValue % 2 == 0) {
			x_adjustment = 225; // <-- defining a global here
		    document.getElementById("y_coord").value = y_adjustment;
		} else {
			x_adjustment = 0; // <-- and here
		    document.getElementById("y_coord").value = y_adjustment;
		}

This doesn’t answer your question, but the above could be simplified using a ternary.

var x_adjustment = (selectSlotValue % 2 === 0) ? 225 : 0

document.getElementById("y_coord").value = y_adjustment;

lurtnowski · May 21, 2022, 5:46pm

thanks, tried the ternary thing before but its good now.

Archibald · May 21, 2022, 7:56pm

I think this does what you want:

  var x_adjustment = selectSlotValue % 2 === 0 ? 225 : 0;
  var y_adjustment = (diff - x_adjustment / 225) * 46.43;

lurtnowski · May 21, 2022, 8:04pm

dang, thats exactly it. How did you come up with the y_adjustment formula?

Archibald · May 21, 2022, 8:30pm

The idea is to nudge the circuit breaker up if it’s going in the right-hand slots.

x_adjustment/225 will be 0 if it’s going in the left-hand slots and 1 if it’s going in the right-hand slots. The amount it needs nudging up is 46.43 pixels (very roughly ).

You have an issue if it’s moving to slots 13 or 14.

system · August 21, 2022, 3:31am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.