Aurigma Forums
»
Graphics Mill
»
Samples – Graphics Mill
»
HOWTO: Create Overview-Window for AJAX BitmapViewer
Rank: Advanced Member
Groups:
Joined: 1/31/2005(UTC)
Posts: 458
Was thanked: 5 time(s) in 5 post(s)
|
Hi everybody, There was a question from one of our customers - how to create "overview" window for AJAX BitmapViewer control - something like "Navigator" control in Photoshop but simpler, just to indicate which part of large image is currently displayed in the viewer. Maybe it will be interesting for somebody else, so I posted the answer here. The idea is very simple - place small thumbnail on the same page and handle all zoom & scroll events of the BitmapViewer to reflect viewport changes. You can find the sample project in the attachment. It was created with VS2005 and you will need to set references to GraphicsMill and AjaxControls DLLs (they were excluded from the archive to decrease its size). Few words about implementation: in server-side code we load bitmap into the BitmapViewer control and also we create small thumbnail and put it into the AJAX controls public cache. Later it will be linked with a simple "Image" element on the page. The frame on the thumbnail is just a transparent "div" element with visible border. So all other manipulations are performed on client. As usual - any feedback is greatly appreciated, so feel free to comment this post ;) Edited by moderator Monday, May 28, 2012 8:36:35 PM(UTC)
| Reason: Not specified File Attachment(s): Alex Kon attached the following image(s): |
|
|
|
|
|
|
|
Rank: Advanced Member
Groups:
Joined: 1/31/2005(UTC)
Posts: 458
Was thanked: 5 time(s) in 5 post(s)
|
Hi everybody, And here is second version of the same sample. Now it not only displays current position in overview window, but also allows user to change it by dragging frame. And we added slider-bar which changes BitmapVievew zoom, so it now looks like Photoshops's Navigator pane. This sample uses slider-bar from AJAX controls toolkit which can be found on official Microsoft ASP.NET site. Edited by user Sunday, April 6, 2008 4:36:34 PM(UTC)
| Reason: Not specified File Attachment(s): Alex Kon attached the following image(s): |
|
|
|
|
|
|
|
Rank: Newbie
Groups:
Joined: 2/7/2008(UTC)
Posts: 4
|
hi Alex, 1) How can i disable right click on the bitmapviewer control. i want to prevent the users right clicking on the bitmapviewer and click 'save picutre as' and get the visible portion of image. 2)Mouse drag on the overview window in firefox doesn't work. If you have any known browser issues please let me know. Thanks Praveen
|
|
|
|
|
|
Rank: Advanced Member
Groups: Member, Administration, Moderator
Joined: 7/28/2003(UTC)
Posts: 1,660
Thanks: 5 times
Was thanked: 76 time(s) in 74 post(s)
|
Quote:1) How can i disable right click on the bitmapviewer control. i want to prevent the users right clicking on the bitmapviewer and click 'save picutre as' and get the visible portion of image. You should modify _addTiles method of BitmapViewer class (BitmapViewer.js): Code: _addTiles : function(s) {
for (var z = 0; z < s.tiles.length; z++) {
var t = s.tiles[z];
//Add the tile
var cl = new GraphicsMill.Rectangle(t.x, t.y, t.w, t.h);
var wl = this.workspaceToControlRectangle(cl).round();
wl = this.controlToContentRectangle(wl);
var url = String.format(s.baseName, z);
var i = this._doc.createElement("img");
i.galleryImg = "no";
i.width = wl.width;
i.height = wl.height;
i.style.position = "absolute";
i.style.left = wl.x + "px";
i.style.top = wl.y + "px";
i.display = "none";
//i.style.borderWidth = "1px";
//i.style.borderColor = "red";
//i.style.borderStyle = "solid";
i.ondrag = function() {
return false
};
//NEW CODE
i.oncontextmenu = function() {
return false
};
//END NEW CODE
this._tilesCtx.appendChild(i);
this._tiles.push({location : cl, zoom : s.zoom, url : url, img : i});
}
},
|
Best regards, Fedor Skvortsov |
|
|
|
|
|
Rank: Advanced Member
Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070
Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
|
Hello, To get rid of the problem with drag operation on overview window in Firefox3 you need to disable selection for frame1 element (rectangle in the overview window). Here is the code that you need to append to initialize: function() method in OverviewWindow.js: Code: var r = this.get_frame();
r.unselectable = "on";
r.style.MozUserSelect = "none";
r.style.cursor = "default";
I have attached the modified project to this post. Edited by user Tuesday, July 29, 2008 5:03:14 PM(UTC)
| Reason: Not specified |
|
|
|
|
|
|
|
Aurigma Forums
»
Graphics Mill
»
Samples – Graphics Mill
»
HOWTO: Create Overview-Window for AJAX BitmapViewer
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.