Default 3D chart transparency with ASP.NET Chart Control? - c#

like two guys before me there and second one there I have difficulty with 3D chart.
How to force them to be transparent like this picture:
taken from 3D Area chart example shipped with ASP.NET Chart controls. This chart has ChartColorPalette.BrightPastel pallete, but is transparent.
I have also 3D chart with ChartColorPalette.BrightPastel palette, but is not transparent and I still cannot found way how to make it transparent like example chart. (After examining example markup and codebehind):
The only way I've found is to set the color of series with alpha channel for transparency, or use color palette with transparent colors (for example ChartColorPalette.SemiTransparent) but there must be some other default way which I'm missing.
Reason I really need this to know is that I'm creating graphs without any code behind just using markup, so I'm finding it a little bit redundant to create code snippets only because of this.
Thank you very much for any answers.
Edit: I'm using .NET 3.5 version of ASP.NET charts.

I'd same problem here. Solved using this:
// After all series manipulation, add this
chart.ApplyPaletteColors();
foreach (var serie in chart.Series)
serie.Color = Color.FromArgb(220, serie.Color);

I see you're on this thread too. Unfortunately, you do need to use colors with an alpha channel in order to set transparency AFAIK
Here's a good overview of the palettes available and some basics on manipulating them
My guess is that you could create a new palette by iterating over the colors in the bright pastel palette and adding an alpha channel - if you do this in a global static, perhaps as part of your webapp init logic, you should be able to reference it pretty easily - if you don't want to have any codebehind, you ?may? be able to databind your custom palette to the CustomPalette property, but I can't say with certainty.

If you do use palette, and not one color per series, you have to set color for every point:
myChart.ApplyPaletteColors();
foreach (var series in myChart.Series)
{
foreach (var point in series.Points)
{
point.Color = Color.FromArgb(220, point.Color);
}
}

Related

C#, display and navigate structural 3D FEM model (helix-toolkit, SharpDX?)

Hello! I am trying to implement a simple way to display the deformed shape of a beam. I found HelixToolkit that offers perfect tools, but I can't find the way to display different tiles of the same mesh with a different colour, or gradient. I found this: https://github.com/helix-toolkit/helix-toolkit/issues/885 that is the adding of the VertColorMaterial property, but it looks like it is for SharpDX library, but I started with HelixToolkit wpf (don't understand if in HelixToolkit is also available).
I can't even find a way to do it with SharpDX: it looks that there is almost no doc in internet.
Additionaly, SharpDX stopped its developement.
So:
do you know any example?
do you suggest me another library, which is fast/offers the ability of navigate the model, and it is compatible/use the wpf framework?
I also would like the ability to refine and subdivide a mesh.
Any kind of advice would be useful, I am new to the world of computer 3d graphic.
Thanks
EDIT 1:
I followed JonasH hint applying a texture, but it apply the texture for each tile. (See image).
I can only dinstict by out materian and in materia (set in the picture as Hue and the arrow Texture).
I need to apply one color for each polygon to give to the mesh a "FEM" style. Do you know how is it possibile with HelixToolkit?
You might consider using Kitware VTK instead of HelixToolkit. It’s extremely powerful library for scientific data visualization, well documented, perfect for finite element pre and post processing. You can take a look on my app, unfortunately it has not been documented yet, but just as an example:
https://github.com/galuszkm/STAN
I assume you have a color per vertex you want to use. I would recommend using wpf or helixToolkit wpf since they are quite easy to use. But as far as I'm aware they do not support vertex coloring.
A workaround would be to use a texture. I would assume you want to visualize some scalar property as a color. You would first need to create your MeshGeometry and assign the TextureCoordinates, simply assign the value you want to visualize to one of the texture coordinates in the 0-1 range. You would also need to create a gradient texture, either a gradientBrush or create an image. You would then assign the brush like:
var brush = new ImageBrush()
{
ImageSource = new BitmapImage(new Uri("gradient.png", UriKind.Relative))
};
var material = new DiffuseMaterial(brush);
GeometryModel3D model = new GeometryModel3D(mesh, material);

Destructure a solid color into overlayed colors with transparency

I am working on an application, in which I export an image with different shapes (rectangles, circles, polygons and etc). Each shape has its own unique color. Currently, the colors are solid and have no transparency and this gives me a strong limitation: If a shape is placed over another shape, the shape below the first one is lost. This is really bad, because, sometimes there is a very large object, that stays on top and hides more than 100 smaller elements below it. Example image:
The used colors are solid red(255, 0, 0), green(0, 255, 0) and blue(0, 0, 255)
I have an idea how to fix that, but I don't know if it is possible and this is why I am asking here. I want to try to set transparency to each shape (e.g. 0.3/1) and by doing this, I will be able to see all shapes. Example image:
What I want to do, is to find a way to destructure all colors, that compose a particular pixel. For example - in the middle of the picture where all three shapes are overlayed, the color that is generated is a solid one with RGB(163, 124, 141). I want to be able to extract the following colors: RGBA(255,0,0,0.3), RGBA(0,255,0,0.3), RGBA(0,0,255,0.3). Let's say that the Alpha component will be a constant and set to 0.3 if that helps.
As I said, I don't know if this is possible, but any suggestion will be highly appreciated. The programming languages that I use in my project are C#, Go and JavaScript, but any suggestion in another language will be appreciated as well.

How to avoid "adding up" of opacities in SkiaSharp

I'm currently creating a Xamarin.Forms app. One of my pages uses SkiaSharp to allow users to highlight parts of an image in a text marker style (i.e. a yellow brush with low opacity).
This is how the related SKPaint object is defined:
var strokePaint = new SKPaint()
{
Color = Color.FromRgba(255, 255, 0, 100).ToSKColor(),
Style = SKPaintStyle.Stroke,
StrokeWidth = StrokeWidth
};
That's working fine so far, but what bothers me is that the opacity "increases" when I have multiple overlapping paths, until at some point the underlying picture isn't visible anymore.
What could I do to avoid this overlapping? I was thinking about merging all paths into one, but that doesn't seem to work because the user is allowed to change StrokeWidth in between strokes and I didn't see any way of drawing paths with varying width.
I hope any of you guys has some help for me. Any idea is appreciated!
I'm not super familiar with Skia, but I took a look at the documentation for SKPaint, and it looks like it has a BlendMode property. Based on how similar things work in other systems, that should control how colors are combined. You might have to try different values to get the effect you are looking for. Dst, or Modulate look like good candidates. – Bradley Uffner
Thanks for your answer Bradley! I went with the Darken blend mode and set opacity to 255, which creates a very nice effect when highlighting text (only the darker color is visible, so dark text on a light background becomes dark text on a background of my marker color).

How to render dynamic data in a custom WPF control, such as a line graph?

I'm working on a LineGraph control which consists many DependencyProperties that affect how the control should display its data. For example, the control contains the following properties to affect its axes:
AxisStroke - Color of the axes.
AxisThickness - Stroke thickness of the axes.
It also contains properties for display numbers & tick marks
VerticalTicks - True/False to indicate whether or not ticks appear along the vertical axis
HorizontalTicks - True/False to indicate whether or not ticks appear along the horizontal axis
VerticalMin - Minimum value on the vertical axis (numeric)
VerticalStep - The distance in between each vertical tick
VerticalMax - Maximum value on the vertical axis (numeric)
HorizontalMin - Minimum value on the horizontal axis (numeric)
HorizontalStep - The distance in between each horizontal tick
HorizontalMax - Maximum value on the horizontal axis (numeric)
And many more properties exist to allow for different line styles on a single graph (LineColor, LineThickness, DataPointShape, and DataPointIcon to name a few).
My goal is to be able to call out my LineGraph in XAML to insert it into a Window. I would like to be able to specify each of these settings inside the XAML as well, and see the new rendered image of the control in the WPF designer.
Now, given there is a lot of geometric shapes to render on the LineGraph, I though using a Canvas would be a good choice to render the data. Unfortunately, when I'm working in XAML, I cannot perform computations for the locations of shapes based on the control's width & height.
And yes, the shapes' locations must be computed because the data points for the graph are dynamic and the tick-related information is dynamic. Not to mention, I would like to display the actual values along each axis of the LineGraph.
So, I thought I might be able to display this control as if I was doing the rendering in C# code. Other windowing frameworks sometimes provide a Render method that can be used for laying out all of the sub-components.
Doing this, however, doesn't seem possible since WPF relies heavily on XAML for the visual appearance of controls. Also, requiring that the WPF designer must display the LineGraph based on the properties and data specified, it doesn't seem like C# code would solve the problem.
I suppose my questions are these:
How can I render data dynamically inside of a WPF control?
Am I able to specify in C# how my control is rendered, allowing the WPF designer to reflect it?
Side Note:
I've done quite a bit of research, but I am only finding information on how to implement more simple types of controls. If you know of any references that contain information on this topic, please feel free to post them in addition to your answers. I will be more than happy to learn how to do this completely.
EDIT:
I've created a graph using Excel to elaborate what the LineGraph control might look like if it has correct data and properties.
I will answer this based on my experience on implementing custom built graphing libraries in WIN32, WinForm, WPF, WinCE, WP8+WinRT, ....and even on a FPGA :)
It's extremely difficult to implement one from scratch. It may seem easy at first but you will run into a lot of "What should I do if this happens?". For example, in your above graph it seems you got a DataPoint # (5,100) it graphs it pretty well. But lets say, I add another DataPoint # (5.000000005, 0). How would you handle that in your code? Would you say that each pixel on the graph represents an exact value on the X-Axis, or does each pixel represent a range of X-Values?
I would recommend that you use an already establish library to do what you want to do unless you need something very specific like lets say you need horizontal cursors on the graph (think Tektronix Oscilloscope) and you need to calculate some values in between the two cursors.. then maybe you need to implement your own custom one or build on top of an open source one.
So, if you are still adamant of creating your own custom control here are answers to your questions.
How can I render data dynamically inside of a WPF control?
You can use a WriteableBitmap and create your own primitive drawing library from that. After you're done rendering, set it as the ImageSource of your control.
Or you can use WriteableBitmapEx which has GDI like drawing functions already implemented for you.
WriteableBitmapEx CodePlex Page, I also think you can just get it from NuGet as well.
You can also use a <Canvas> and add UI elements to that as well.
Am I able to specify in C# how my control is rendered, allowing the WPF designer to reflect it?
This depends on how you create your controls, but yes you can create Properties in your custom control that will appear in the Designer. Allowing you to change it thus updating the display. I would read a lot of tutorials about writing your own custom user control library. They can explain it better than I can in a SO answer. If you implement the properties correctly it should like so.....
Full Size Image: http://i.stack.imgur.com/pmevo.png
After changing the Number of Rows from 15 to 10 and the starting Y offset to -1 (thus moving the graph up and making the rows a lot taller)
Full Size Image: http://i.stack.imgur.com/0RKnA.png

How do I create a colour that will match the current visual style?

For our winforms application, we've been asked to colour invalid cells in a DataGridView in a red colour. We need to find a red colour that matches the current visual style but which is still distinctive if the user has chosen a palette with mostly reds. How do I create a colour that will match the current visual style? How do I make sure I avoid clashes?
I don't think the original poster is looking to make a palette of colors (colours), instead he is trying to highlight an invalid cell. The chosen highlight color is red, but he is concerned that red might not stick out if the user has chosen a red palette.
How about this: When painting an invalid cell, use SystemColors.Window for the text and SystemColors.WindowText for the background. (or whatever equivalents there are for a DataGridView). This way, you are guaranteed that the invalid cell will be the opposite colors of a normal cell.
I think that you are looking at this the wrong way. Red is often chosen for several reasons. It is (in western culture among others) commonly used to depict that something is wrong or danger. But red is also a colour that usually stands out. However, when trying to direct a users attention to something on the page, there are two infallible methods.
1) Animated gifs or videos (annoying as f***) or
2) Clashing colours
Usually red stands out, but in your situation where a user may have a red themed style, your best bet is to go with a colour that will clash. It is possible to have clashing colours that go together (if that makes sense).
Here are a few websites that I have used in the past to help me find colour schemes that may help you as well:
Kuler, Color Combos and Color scheme designer
This may not have been the answer you were looking for but i hope it helps
The question is a bit ambiguous and a little subjective; it much easier to comment directly on examples. However, there are a multitude of on-line tools that will help you create colour palettes for websites, and these may be useful to gauge how a particular shade of red interacts with various other colours.
Hope this helps.
You could maybe try to use the Light and Dark methods of the ControlPaint class? I do something similar, although kind of in the opposite direction. I needed to make some rows in a grid stand out, but not stand out as much as the selected rows. So I created a color that was a bit lighter than the default selection color like this:
checkedColor = ControlPaint.Light(grid.DefaultCellStyle.SelectionBackColor, 1.65f);
Could try to use that, maybe with some added logic, and base it on some system color that is made to stand out. For example System.Drawing.SystemColors.HighLight or System.Drawing.SystemColors.HotTrack.
take a look at the Krypton Toolkit (http://www.componentfactory.com). They offer a free toolkit for WinForms controls with a theme manager. This theme manager provides ready to use methods to extract the current color values.
I have nothing to do with them. I use it for my own Product (Royal TS at http://www.code4ward.net) and found it really useful.
If you want to build beautiful UI, you should take a look at the Krypton stuff.

Categories