I'm trying to modify specific parts of an image when clicking on them in a C# application. I'll describe the situation in detail:
Task
I want to add a graphical element to an existing C# application. The graphic I want to use is a shell, similar to: https://static.vecteezy.com/system/resources/previews/000/658/484/non_2x/snail-shell-on-white-vector.jpg
Each segment of the shell has to react to click events. Given the nature of the graphic, each segment has a unique form and size. There is a total of 189 segments.
Clicking on a segment must call some methods in code behind. Depending on code behind values, segments must be colored in 3 stages (empty, half, full).
Environment
Existing Application is a C# WPF app using .NET framwork 4.5
The graphic only exists on paper, so can only be scanned and used in the app as an image file (of any format)
What I've tried
I loaded the graphic in a WebBrowser element, using it as image in an HTML file. Segments are defined by HTML areas, calls to code behind methods and vice versa via JavaScript.
Where I am:
Almost everything worked. Defining areas is relatively little work. Calling code behind via JavaScript worked surprisingly well. However, I couldn't change the graphic from code behind. HTML areas cannot take CSS properties, so they can't be colored this way. Adding overlays to the DOM onclick would work but would also mean creating 378 additional images (189 segments * 2 states). I'd prefer not to...
What I need:
Some hint how I can manage this. Is there any way to make what I already have work? Or am I totally on the wrong path and there is some entirely different approach I'm not seeing? I'm willing to scrap what I've done so far if I must. Using external libraries/3rd party tools would be OK as long as they're free.
I considered rebuilding the graphic using polygons on a WPF canvas, but wouldn't want the hassle (189 segments all of which have rounded edges...).
Same goes for rebuilding the graphic in SVG, continuing the "web" approach.
Forgoing the graphic and using an abstraction (e.g. a table) is a last resort solution.
Related
I need to find, or create an editor that will handle text and images as objects. For instance I have a 3 line string of text, to be able to move it around and position it within a canvas, also the ability to add an image, and possibly resize it within that canvas. and take the result, and save it, whether I get the the offsets and positions manually, of each of the objects (preferable) , or get the entire canvas as an image, to be able to save and print.
Rulers would be great... Im not trying to re-create Photoshop, but the idea is similar.
I will be doing this in a C# WinForms application, it does seem however that a WPF solution might be better suited, and I think I can have a WPF control within winforms...
Any direction or advice would be greatly appreciated.
Forget winforms. It doesn't support anything. Your best bet is to do it in WPF and if you need, you can integrate it into an existing winforms application via the ElementHost.
Please see my similar answers/samples about this:
https://stackoverflow.com/a/15580293/643085
https://stackoverflow.com/a/15469477/643085
https://stackoverflow.com/a/15821573/643085
Also, see this example with support for zoom, panning and resizing functionality:
https://stackoverflow.com/a/16947081/643085
They're all MVVM based and have some interesting features.
You can easily customize these samples and add ANY type of elements:
images,
geometries,
usable interactive UI elements with functionality (TextBoxes, ComboBoxes, whatever),
text,
videos,
FlowDocuments,
or whatever that's visible on screen)
by adding additional data items and their corresponding DataTemplates.
I have a desktop app build using .net. I want it to support multilanguages. I am able to do that using resources. Issue is what should I do for images which have text? Should I include all images for separate languages? If so then this will make it difficult and also will increase its size.
I just read that in Android there is "9 patch image", isn't there something similar?
I wish to add background image, and write text on top of that. This background image should resize without change in quality of the image automatically to the size of text in that language.
I couldn't think of any way to avoid separate images with WinForms. WPF, no problem. Web app, no problem. I played around with both text and image on a Button control, but that does not scale fully. I tried using a label over a PIctureBox, but it is impossible to achieve transparency with a Label control. I also tried this using a WebBrowser control--such a thing could possibly work, but would take some further research and would probably change your deployment dramatically (since you would need to make the localization available from some http server).
So I think there is no easy way to do this--I could find nothing easier than maintaining the images separately.
In one of my projects, i had text displayed on top of images. Since the site was multilingual, so no text was part of the images. Instead text was displayed on top of the images, using css properties for absolute position. This had to be tested in all browsers, with multiple languages, as the text size varies in each language, this might break the UI. so enough space has to be provided for text considering all supported languages
Is there a way to display tooltips on an image that is dynamically created. The image is a dynamically created chart that has multiple points and on mouse over on a specific point I need to show additional information via a popup.
I'm using a web forms .net 4.0 and using the System.Drawing and System.Drawing.Imaging namespaces.
If your only output is a flat image, you could try adding a <map> to your page and set the 'title' attribute of each <area> to your tooltip value.
You can learn more about creating maps here: http://www.w3schools.com/tags/tag_map.asp
Essentially, you're defining regions of your image as hot spots.
If you know exactly where the point is, you could create an image map. But will be cumbersome.
How to make an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
I would recommend that you use a Javascript Charting Library, there are tons of them out there. And there are some good free ones.
We are using Highchart
http://www.highcharts.com/products/highstock
But this is not free.
You can use a image map, but in order to do that, you're going to need the exact coordinates and if you're off by just a little bit, it could be messed up. Have you given any thought to using MS Charting? http://www.microsoft.com/download/en/details.aspx?id=14422
With MS Charting, everything is done on the code behind and it generates an image just as the way you're doing it now. The difference is on the backend, when you create the datapoint, you can set the tool tip and several other properties like this:
DataPoint.ToolTip = "Your Tooltip Here";
If you are unfamiliar with them, there is a ton of documentation and samples online.
Good Luck!
Ok, I have a rather strange request.
Due to the inconsistency in how different browsers support text with drop shadow, I was thinking that the text I need with drop shadow (some headers), I could create dynamically on the server side of my web app, and then pass the image to the browser instead of text directly.
I want to use WPF for this, since WPF has a lot of text manipulation built in, and it should be significantly easier to make text with drop shadow in WPF compared to GDI+.
So what I need to do is inside my Web App, create a WPF text element with the drop shadow effect, and save it inside an image (either to disk, or better yes pass it directly to the browser since I actually do not need to store the image since it will be specific for that request only).
I'm hoping for at least some pointers in the right direction :)
I just want to say, since this is unanswered and I don't use WPF that much, GDI+ would actually be pretty easy:
Draw text on image using the desired color of the shadow.
Do a box blur (or Gaussian).
(optional) Create another bitmap and do basically a watermark style draw (this would allow you to set opacity and thus soften the shadow, etc.)
Draw text again using color desired for the text
With that you would have yourself text with a drop shadow. There's about 10 different image processing libraries that make it rather simple (I will sadly do some self promotion and just say that Craig's Utility Library has a draw text function and box blur function in the Utilities.Media.Image.Image class, but there's tons of other packages you could use).
My goal is to gain a better understanding of the characteristics of C#, and become more comfortable creating simple apps. I am fairly competent with Flash (Actionscript 3), and found an old Tic-Tac-Toe game I'd written. I started wondering about porting this code into a C# application. Not knowing much about C#, I'm wondering how difficult the migration would be.
On the one hand, the underlying game logic is syntactically similar, and therefore would be easy to port.
However, as far as the graphics are concerned, I don't even know where to begin. So far, I've only exposed myself to Windows Forms and Console apps in C#.
I'm wondering if these Flash concepts have similar analogs in C#, or if the procedures and syntax are radically different:
Placing graphic elements on a stage
Rendering lines from start/end coordinates
Event listeners on movie clips
Swapping the image inside a graphic element (or, in my Flash version, nextFrame() in a movie clip)
You may want to try developping your little game using Silverlight. Silverlight applications, coded using C# and Xaml, are pretty similar in form with flash applications, and you should find everything you need without trouble.
So I suggest you download the Silverlight SDK (free) and give it a try.
Firstly, Flash is to WPF (close enough) as ActionScript is to C#.
The WPF/Silverlight model is much more similar to Flex that it is to Flash. Everything is added to the UI tree as a object, even lines.
Likewise, adding event handlers to controls (like a button click) can be done in the "code behind" (the code that lives with the view), but the recommendation is to use the MVVM pattern. If you are new to the concepts of separation of concerns and unit testing, feel free to start with the simpler "code behind" method.
While WPF and Silverlight are very similar, I'd recommend starting with Silverlight as the SDK and available samples are richer. You can easily move onto WPF later on (though porting an application from Silverlight to WPF is not automatic).
Swapping images, as you mentioned, would be done via "Visual States" in Silverlight (or possibly changing the image reference, which is more "hacky").
Have a look at the following links to get started:
Learn # Silverlight.net
Silverlight on MSDN
Shapes and Drawing (Silverlight)
If you're looking specifically to do games and the like, you may wish to look into the free XNA framework. However, there will be differences as Flash gives you far more ability to "set up" things beforehand and modify them.
Placing graphic elements on a stage
If you go the XNA route, you will be drawing sprites using the spritebatch, you tell them where and how to draw and that's where they will go
Rendering lines from start/end coordinates
In windows forms you can do this via a simple System.Drawing call, however if you wish to do this in XNA, you will either have to make a 1 pixel square and stretch/rotate it to what you want, or use 3d primitives (Though this will limit you to a 1 pixel line)
Event listeners on movie clips
Look into delegates, but there isn't really an equivalent for movie clips to my knowledge
Swapping the image inside a graphic element (or, in my Flash version, nextFrame() in a movie clip)
This is fairly simple, depending on what you mean. If you want to, say, animate a sprite. You can do this by moving the source rectangle or changing the texture of the spritesheet. If you mean the screen as a whole, this is mostly handled for you provided you use the spritebatch. In windows forms you'll have to do more of it yourself, but the base concepts are the same.
Overall it's not that bad, but if that doesn't sound appealing check out Silverlight. It's basically C# styled flash so you may find the transition easier.
Good luck and hope this helps.