praveenuni
asked on
Join Javascript and C#
Hi
I have an aspx page, which contains a picture box (id: MapImage) and ZoomIn Image Button
2 Files:
Javascript function: Draw a rectangle on the picture box
C# code: collect the starting and ending co-ordinates plus some other functions
When I click the zoomin button:
1. Javascript function should fire up and I should be able to draw the rectangle
2. When I finished drawing the rectangle ( i.e when I released the mouse button) C# code should fire up .
I should be able to repeat the above 2 steps until I click another button or exit out from the page.
Javascript function:
function init()
{
// Declarations
// ****************
rect = null;
ptr = null;
MapImage = document.getElementById("M apImage");
MapImage.onmousedown = setObj;
MapImage.onmousemove = draw;
xOffset = getX(MapImage);
yOffset = getY(MapImage);
document.onmouseup = clearObj;
MapImage.ondragstart = function() {return false;};
// On Mouse Down
// *********************
function setObj(e)
{
rect = document.createElement("di v");
rect.className = "rectDraw";
sX = (window.event)? event.x: e.clientX;
sY = (window.event)? event.y: e.clientY;
sX -= xOffset;
sY -= yOffset;
rect.style.left = (sX+xOffset) + "px";
rect.style.top = (sY+yOffset) + "px";
document.body.appendChild( rect);
}
//On Mouse Move (Draw Rectangle)
//************************ ********** ********** *
function draw(e)
{
if (rect)
{
var currX = (window.event)? event.x: e.clientX;
var currY = (window.event)? event.y: e.clientY;
// make sure not outside the bounds of image
var leftX = getX(MapImage);
var leftY = getY(MapImage);
if (currX < leftX || currY < leftY)
return false;
currX -= xOffset;
currY -= yOffset;
var diffX = currX - sX;
var diffY = currY - sY;
if (currX < sX)
{
rect.style.left = (currX+xOffset) + "px";
diffX = Math.abs(diffX);
}
if (currY < sY)
{
rect.style.top = (currY+yOffset) + "px";
diffY = Math.abs(diffY);
}
rect.style.width = diffX + "px";
rect.style.height = diffY + "px";
// output start & end coordinates
document.getElementById("s tartX").va lue = (sX > currX)? currX: sX;
document.getElementById("s tartY").va lue = (sY > currY)? currY: sY;
document.getElementById("e ndX").valu e = (sX < currX)? currX: sX;
document.getElementById("e ndY").valu e = (sY < currY)? currY: sY;
}
}
// Get X and Y
//******************
function getX(obj)
{
var temp = obj;
var left = 0;
while (temp.offsetParent)
{
left += temp.offsetLeft;
temp = temp.offsetParent;
}
return left;
}
function getY(obj)
{
var temp = obj;
var top = 0;
while (temp.offsetParent)
{
top += temp.offsetTop;
temp = temp.offsetParent;
}
return top;
}
// On Mouse Up (Clear Rectangle)
//************************ ********** ********
function clearObj()
{
if (rect)
rect.parentNode.removeChil d(rect);
rect = null;
}
}
My C# Code:
RegisterStartupScript("For mSubmitted JSCode", "<script>init();</script>" );
double sx = Convert.ToDouble(startX.Va lue);
double sy = Convert.ToDouble(startY.Va lue);
double ex = Convert.ToDouble(endX.Valu e);
double ey = Convert.ToDouble(endY.Valu e);
double realminx = (sx * pux) + minxx;
double realminy = ((300 - sy) * puy) + minyy;
double realmaxx = (sx * pux) + maxxx;
double realmaxy = ((300-sy) * puy) + maxyy;
string XMLCommand1 = FrameXMLCommand(realminx, realminy, realmaxx, realmaxy, 0);
Now I'm able to draw the rectangle and execute the code.
But I'm unable to
-- execute the C# code as soon as I release the mouse (finishing drawing the rectangle)
-- and repeat the same until I click other button or exit the page.
Please help !
Regards
-- Praveen
I have an aspx page, which contains a picture box (id: MapImage) and ZoomIn Image Button
2 Files:
Javascript function: Draw a rectangle on the picture box
C# code: collect the starting and ending co-ordinates plus some other functions
When I click the zoomin button:
1. Javascript function should fire up and I should be able to draw the rectangle
2. When I finished drawing the rectangle ( i.e when I released the mouse button) C# code should fire up .
I should be able to repeat the above 2 steps until I click another button or exit out from the page.
Javascript function:
function init()
{
// Declarations
// ****************
rect = null;
ptr = null;
MapImage = document.getElementById("M
MapImage.onmousedown = setObj;
MapImage.onmousemove = draw;
xOffset = getX(MapImage);
yOffset = getY(MapImage);
document.onmouseup = clearObj;
MapImage.ondragstart = function() {return false;};
// On Mouse Down
// *********************
function setObj(e)
{
rect = document.createElement("di
rect.className = "rectDraw";
sX = (window.event)? event.x: e.clientX;
sY = (window.event)? event.y: e.clientY;
sX -= xOffset;
sY -= yOffset;
rect.style.left = (sX+xOffset) + "px";
rect.style.top = (sY+yOffset) + "px";
document.body.appendChild(
}
//On Mouse Move (Draw Rectangle)
//************************
function draw(e)
{
if (rect)
{
var currX = (window.event)? event.x: e.clientX;
var currY = (window.event)? event.y: e.clientY;
// make sure not outside the bounds of image
var leftX = getX(MapImage);
var leftY = getY(MapImage);
if (currX < leftX || currY < leftY)
return false;
currX -= xOffset;
currY -= yOffset;
var diffX = currX - sX;
var diffY = currY - sY;
if (currX < sX)
{
rect.style.left = (currX+xOffset) + "px";
diffX = Math.abs(diffX);
}
if (currY < sY)
{
rect.style.top = (currY+yOffset) + "px";
diffY = Math.abs(diffY);
}
rect.style.width = diffX + "px";
rect.style.height = diffY + "px";
// output start & end coordinates
document.getElementById("s
document.getElementById("s
document.getElementById("e
document.getElementById("e
}
}
// Get X and Y
//******************
function getX(obj)
{
var temp = obj;
var left = 0;
while (temp.offsetParent)
{
left += temp.offsetLeft;
temp = temp.offsetParent;
}
return left;
}
function getY(obj)
{
var temp = obj;
var top = 0;
while (temp.offsetParent)
{
top += temp.offsetTop;
temp = temp.offsetParent;
}
return top;
}
// On Mouse Up (Clear Rectangle)
//************************
function clearObj()
{
if (rect)
rect.parentNode.removeChil
rect = null;
}
}
My C# Code:
RegisterStartupScript("For
double sx = Convert.ToDouble(startX.Va
double sy = Convert.ToDouble(startY.Va
double ex = Convert.ToDouble(endX.Valu
double ey = Convert.ToDouble(endY.Valu
double realminx = (sx * pux) + minxx;
double realminy = ((300 - sy) * puy) + minyy;
double realmaxx = (sx * pux) + maxxx;
double realmaxy = ((300-sy) * puy) + maxyy;
string XMLCommand1 = FrameXMLCommand(realminx, realminy, realmaxx, realmaxy, 0);
Now I'm able to draw the rectangle and execute the code.
But I'm unable to
-- execute the C# code as soon as I release the mouse (finishing drawing the rectangle)
-- and repeat the same until I click other button or exit the page.
Please help !
Regards
-- Praveen
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello Amit,
Thanks for your immediate response.
I tried the above code .. somehow its not working (unable to draw the rectangle also) ..
Could you please check that?
__ Praveen
Thanks for your immediate response.
I tried the above code .. somehow its not working (unable to draw the rectangle also) ..
Could you please check that?
__ Praveen
ASKER
Hello Amit,
sorry for the above message .. actually its working ..
if there is other button like .. for eg., zoom out how can achieve the same thing .. should i do like this ..?
function clearObj()
{
if (rect)
{
rect.parentNode.removeChil d(rect);
document.getElementById("Z oomInImgBu t").click( );
document.getElementById("Z oomOutImgB ut").click ();
}
rect = null;
}
Regards
-- Praveen
sorry for the above message .. actually its working ..
if there is other button like .. for eg., zoom out how can achieve the same thing .. should i do like this ..?
function clearObj()
{
if (rect)
{
rect.parentNode.removeChil
document.getElementById("Z
document.getElementById("Z
}
rect = null;
}
Regards
-- Praveen
Yes you could do so.
ASKER
Hello Amit,
when I draw the rectangle using the javascript function and when I use the mouse scroll button to scroll down the page .. the fucntion is acting weird. It is drawing the rectangle, but the distance between the mouse pointer and end point of the rectangle is very high. Normally both the mouse pointer and the end point of rectangle should be attached right!.
I know this is a bit confusing .. if you need any further info .. please let me know ..
Regards
-- Praveen
when I draw the rectangle using the javascript function and when I use the mouse scroll button to scroll down the page .. the fucntion is acting weird. It is drawing the rectangle, but the distance between the mouse pointer and end point of the rectangle is very high. Normally both the mouse pointer and the end point of rectangle should be attached right!.
I know this is a bit confusing .. if you need any further info .. please let me know ..
Regards
-- Praveen
function clearObj()
{
if (rect)
{
rect.parentNode.removeChil
document.getElmentById("Zo
}
rect = null;
}