OpenTK text animation - c#

Does anybody know how to do, or where to find some good examples, for scrolling (animating) 2D text using OpenTK framework. I need something like bottom (top) scrolling tickers on news TV channels.
Thanks.

There are many possible approaches to text rendering. The simplest one: use System.Drawing to render your text into a System.Drawing.Bitmap. Afterwards, load this Bitmap into an OpenGL texture and splat it onto a quad for rendering. Animate the text by moving this quad and update the Bitmap/texture whenever the text changes.
Edit: I have written a text rendering example for OpenTK, which you can find here: http://opentk.svn.sourceforge.net/viewvc/opentk/trunk/Source/Examples/OpenGL/1.x/TextRendering.cs?revision=3063&view=markup
Copy the TextRenderer class to your own project and you are good to go. Check the example for usage instructions.

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);

Properly Scale UI Images in Unity

I have a png that's size 150x100 , and I set the UI image to the same, but it makes a bunch of extra space around it (that can be interacted with). How do I fix this?
Image of Problem: https://imgur.com/a/2ILXY1t
Unity isn't adding extra space. The image itself HAS that space.
There are options to crop out the alpha space in Unity by using the sprite editor, but by my experience i prefer using a proper Image editor like Gimp. using one is the best way to handle your image assets.
To crop out the extra space you just have to reduce the canvas size.
Well, first you could check (in Unity) wether your Image has its property Preserve Aspect set to True.
You could click Set Native Size which is right below it, so the 'box' around your image will take it's size.
Edit: Nevermind the first two. I do not know why i thought they could solve it, i looked at your image again and i, too, think there are transparent pixels above and below it. So you should try this:
Then you could check whether your picture has any transparent pixels around it, using an image editor. If it has, you would need to cut them out.

How can I programmatically load a texture into an Image the same way the Unity Editor does?

In the image above, the first image is loaded via C# script. The second is assigned via the inspector in Unity editor. Note the dark gray border around the first image. How can I load the image via C# and have it not have the border?
The source image is a white-on-transparent PNG 512x512 pixels. It's being displayed in an UnityEngine.UI.Image sized at 30x30 with a red color assigned. The source image is identical (same location on disk) for both examples above.
The code I am using for the first image is as follows;
var texture = new Texture2D(512, 512);
texture.LoadImage(File.ReadAllBytes(Path.Combine(TexturePath, name)));
image.sprite = Sprite.Create(texture, new Rect(0,0, texture.width, texture.height), new Vector2(.5f,.5f), 100);
where image is the appropriate UnityEngine.UI.Image.
Note
The advantage of using the code above is that the images do not need to be embedded in the game that unity ends up building. It means these images can be distributed separately from the game. Using Resources.Load does not cater for this, and I suspect, is the same as assigning the image via the inspector, meaning that unity has already done something to the texture prior to assignment (likely something by the UnityEditor.TextureImporter)
Update
I investigated the Texture2D constructor some more and determined that the following code results in the image above, where the edges of the sprite no longer have the grey border, but now appear jagged. (Setting the last parameter to true retains the grey border).
var texture = new Texture2D(512, 512, TextureFormat.Alpha8, false);
Some googling has me thinking that the issue is mipmap related, and that the Unity Editor may be resolving this on import due to whatever occurs with UnityEditor.TextureImporter.borderMipMap as seen here. However, the UnityEditor namespace is not available when building the project.
The issue is that the PNG format uses a non-premultiplied Alpha and Unity uses straight alpha blending designed to work best with pre-multiplied alpha colors.
Better in-depth descriptions of Pre vs non-Pre can be found from:
NVidia
Microsoft
A Unity-specific discussion can be found Here (however, note this problem has nothing to do with mip-mapping, but can be exacerbated by filtering and resizing techniques)
You can also look to Unity's documentation on alpha importing to see a visual example of a common solution to this problem if you have access to pipeline-side creation of these PNGs (I have typically solved this by applying a post-process to modify PNGs after/during their creation).
Using a cutout shader is also a solution though it can result in jaggy/visual artifacts.
You would think rendering a sprite using the features of Unity's primary supported runtime load image file format would be a simple affair but, alas, it is quite a bit more complicated than that. I don't know the inner workings of UnityEditor.TextureImporter.borderMipMap but I suspect its inception is built around a similar problem (weight between the edge pixel alpha and any neighbors used in the filtering)
Use Resources.Load, thus you can configure the texture settings in the editor.

Any way to snap animated TranslateTransform to pixel grid?

Is there any way to snap animated TranslateTransform to pixel grid?
There is a very bad jittering, when moving text using animation. I guess it's because of subpixel positioning. I need to avoid this jittering. Suggest possible ways.
It sounds like you want TextOptions.TextHintingMode="Animated" in your XAML. See http://msdn.microsoft.com/en-us/library/system.windows.media.textoptions.texthintingmode(v=VS.95).aspx for more details.
Dave Relyea posted an article on how to implement a pixel snapping control in Silverlight. This is a control which listens to the LayoutUpdated event to perform pixel snapping on child elements. Perhaps this is what you're looking for; hopefully without too much modification :)
Why won't you render thit text to WritableBitmap like this:
WriteableBitmap wb = new WriteableBitmap(textToTranslate, null);
Then place this bitmap into Image and translate image instead?
What are you trying to do exactly? Do pixel snapping using drag'n'drop? If so, you just could call the method that does the translate if the coordinate is a multiple of a certain number.
A small example of what you are trying to do would also be helpful.

wpf custom control: audiowaveform rectangle with selection slider

I'm working on a c# wpf app in which I want to do something with audio. the irrklang audio library provides me with a pcm decoded 16 bit byte array.
I want to create a timeline control which shows the waveform along the timeline with an overlaying rectangle which the user can drag and click/drag the left and right side to increase or decrease the selection.
It is used to the trim the audio track. I would like the selected min and max to be databindable, the minimum and maximum value of the total track to be bindable.
To clarify here is an image mockup:
I'm not asking for a complete control but tips and suggestions on how to tackle this are more than welcome. Perhaps solutions like this already exist but so far I haven't been able to find it.
I think I need to tackle: the control (zooming, panning and changing the selection) and drawing the waveform in the control
Thanks in advance,
I think you should check out this codeplex project
http://wpfsvl.codeplex.com/
Refer to Audio WaveForm Drawing Using WPF.
Something based upon WaveFileTrimmerControl.xaml would be useful, it uses related controls PolygonWaveFormControl.xaml & RangeSelectionControl.xaml (links are to the XAML but refer to the CS also). In any case it'd be a good starting point for building a control that exactly meets what you want.
You could override the render method and use primitives which will give possibly better performance; but like anything related to performance I'd try the above approach first which is almost certainly good enough.

Categories