Starting Points for Graphics 1

[bitseeker]

I'd like to build a web form that will be an illustration consisting of rectangles, "rounded corner rectangles", arrows and text labels with text labels. I want users to be able to left and right click on the different graphics to produce different behaviors, including:
- highlight a graphic element
- add information associated with a graphic elements
- fill in the text value of the labels

A very full page could have maybe 100 graphic elements and 250 labels (which could be bounded input fields).

I've prototyped this in Access, and now I'm researching and testing to find the best general approach for implementing it in ASP.NET Visual Basic 2005. It would seem that the two main choices are A) controls or B) drawings.

I've got many questions, which I can distribute over several posts. For this post, I would very much appreciate getting some starting points for the research and testing. Having said that, some of the specific questions that come to mind are:

If Controls: Are there controls that can be made "click sensitive" in order to create these effects? Can/should I build custom controls with these behaviors? What do I need to do to be able to freely position the controls on the page?

If Drawings: What is the general approach to creating a drawing surface, and then getting mouse events from it? (I think I can figure out how to draw on the surface, if I know what to start with, and if I store where I've drawn what, then I can tell what was clicked on.)

Any opinions on whether one approach is clearly better than the other, for performance, simplicity or other reasons?

Any guidance in this area would be appreciated.

Thanks!

 

[ca8msm]

Personally, I don't think the basics of this even need use ASP.NET.

From what I can understand you would simply want to show certain images in a certain part of the page (whether they overlap or not is irrelevant). Therefore, if you simply used HTML controls such as "img" tags, you could position them with CSS and capture click events in javascript (which is what you would have to do anyway unless you posted back to the server everytime an image was clicked and that would be overkill and too slow).

Try coming up with a simple example that only uses two images, is positioned with CSS and pops up a javascript alert when the relevant image is clicked (ask in the HTML forum - forum215 and the JavaScript forum - forum216) if you get stuck on any of these. You can then take that example and apply the functionality to the 100 or so elements that you have.




____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bitseeker]

Thanks for the input. I appreciate that perspective. I'm looking for a solution that will leverage the VS2005 IDE and minimize browser-side processing. If encounter unacceptable problems with that, I'll come back to your suggestion.

 

[ca8msm]

I'm looking for a solution that will leverage the VS2005 IDE and minimize browser-side processing

Can I ask why? If you allow the client to do all the processing then it will have greater speed increase on your site (and dramatically reduce the load on the server) as it will save posting back to the server everytime an image is clicked. As for the VS2005 IDE, you can still use it with HTML and JavaScript functions.

I really think a server-side solution isn't a good idea...


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bitseeker]

Thanks for your post. I'm new at this and I've probably made a lot of assumptions based on experience in other programming models that may not make sense in web programming.

Also, my apologies, I see that I left out a major requirement in my original post, which is that I also need to move the graphic elements (and their associated labels) around on the page, in response to the mouse actions on them. The graphic repositioning will require a significant amount of calculation (which I worked out in MS Access), and each movement could require repositioning several elements. Essentially it amounts to recalculating and "re-painting" the whole collection of graphics, or significant fraction of them.

I've pretty much given up on true drag and drop, due to feedback issues, and the complexity of people learning the meaning of guestures...it's possible perhaps, but I'm just going to set it aside for later, if at all. I can accomplish much the same with a set of actions involving selecting one graphic element, and then selecting another, or a menu item, to complete "pseudo-drag and drop" type actions.

From what I have been able to glean from forums and documentation, I'm pushing the limits of web functionality...but the application really needs a browser-only, no-client-or-gadget-download solution, so I've got to see what I can do within that set of constraints.

With respect to HTML versus ASP.NET, I'm really just trying to avoid having to work directly in complex HTML (spoiled by GoLive and other web-site builders), though if that's what it takes, then I guess I'll learn that, too.

I appreciate your attention to this...any other thoughts?

 

[ca8msm]

I still think this can be achieved only using HTML and JavaScript (ASP.NET could still be used once the elements have been positioned if you then need to do any server-side positioning). You'll obviously have to create the calculations again using a different language (i.e. JavaScript) but that shouldn't be too difficult if you have already done them in VBA.

I'd suggest starting a thread in either the JavaScript or HTML forum with the very basics (i.e. just two div elements that are absolutely positioned and then we'll work on moving them in JavaScript) and then take it from there.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bitseeker]

Thanks for the post. This has been very productive in terms of getting me to think about it in the right framework. I'm going to see what I can do with creating the graphic as a single image on the server side, and then picking up mouse events that can be related to it. I'll also take your suggestion about pure HTML and JavaScript under consideration. Again, thanks!

 

[bitseeker]

ca8msm: FYI, I believe I finally grasped the import of your original suggestion, and have found a variety of techniques that can be used to implement it. The material at

http://scripts.franciscocharrua.com/drag-and-drop.php

(and the related scripts at that site)
seems particularly relevant. Thanks again for the prompting on this.

 

[ca8msm]

Yes, the outcome of that page is the basic idea (it means that you don't have any server-side processing to do and makes it much quicker for the user). You can then submit that page to the server if you wish and find where the elements where moved to if you need to.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bitseeker]

Wow...hadn't thought of submitting the whole page back to the server. Sure, its settings would show where the different layers had been positioned, and how they had been configured. What's the basic technique for submitting the whole page, versus only a url? (Please pardon the piecemeal questions...each little bit of concrete information helps me fill in the big picture.)
Thanks!

 

[ca8msm]

What's the basic technique for submitting the whole page, versus only a url?

I'm not what you mean by that as when you submit an ASP.NET page, the whole form (i.e. all it's elements) is submitted. If you included hidden variables of where your elements had moved to, you could then access them server-side and manipulate them however you wish.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[bitseeker]

OK. That'll get me started. I'll come back to this when I have more context knowledge. Thanks!