Image artifacts

25 Apr 2015, 22:13

So i have a number of images that I use for portraits. I can either load the images at runtime or drop them into a resource dictionary. Both could work for me, but both have problems.

Resource Dictionary
To do this i need to be able to bind a static resource somehow. Like this.

<Rectangle Fill="{StaticResource {Binding imageKey}}"/>

Obviously this isn't legal, but somehow I would need to take the string image name and get the static resource for the key. The images i get from this look perfect, (when i manually set the resource key). Crisp clean images.

Runtime Load
I could also get references to the image source as described in the image section.

Texture2D texture = Resources.Load("Portraits/" + imgname) as Texture2D;
Image = new TextureSource(texture);

<Image Source="{Binding Image}"  />

This works, but the images are total crap, i get pixely artifacts all over the place. It looks like the import preview in unity.

cosmo · 26 Apr 2015, 01:14

I have not tested this in noesisgui but in wpf land you would do the following.

MyImage.Source = this.FindResource("MyImageSource") as DrawingImage;

Basically in the code behind for your user control you can call FindResource. The FindResource would take the key of the resource you would like to be found. If the user control has a resource distonary setup then the key will find the resource in the resource dictionary. You would then set the source of the image to the resource returned from the FindResource and voila it works.

26 Apr 2015, 17:05

The issue is how to get to resources in unity noesis. There is no App class per say in unity.

cosmo · 27 Apr 2015, 02:43

I have about 200 Icons that I am setting dynamically in my project. I am doing the following to accomplish that if it helps.

In WPF
1.) Create a resource dictionary with the icons in it. Below is an example of an icon.
2.) Create a content control on my page where I would like that icon to live.
3.) Set the template of the content control to the resource key of the control template in my resource dictionary.

To Get the Icons
To get the Icon Path Data I did the following.
1.) I imported an icon into inkscape.
2.) I used inkscapes path tool to turn them from a png into a path.
3.) I saved the icon as a xaml file which contained all of the path data in wpf format.
4.) I reformatted the path data to be path rather than a PathGeometry as noesis does not support PathGeometry and as long as your path is not animated it dosent matter.
5.) I included all of the icons in a resource dictionary and reference them by the key as control templates.

Example Content Control

<ContentControl Grid.Row="0" Grid.Column="0" Template="{StaticResource IconGlobe}" Width="20" Height="20"></ContentControl>

Example Code Changing the Icon. This code is in the user control that the content control belongs to.

contentControl.Template = Resources.FindName("IconChecked") as ControlTemplate;

Example Icon

    <ControlTemplate x:Key="IconOpenBox">
        <Viewbox Stretch="Uniform">
            <Canvas Name="svg2" Width="75" Height="75">
                <Path Fill="#FF000000"
                      Data="m 24.1318 1040.8776 -12.9637 -3.9214 -0.4051 -9.0759 -0.4051 -9.0759 -5.179 -1.6409 -5.1789 -1.6409 5.105 -5.3244 5.105 -5.3244 -4.9581 -5.78098 -4.9581 -5.78101 14.289 -4.20359 14.2891 -4.20368 4.3259 4.69732 4.3258 4.69741 4.2423 -4.71859 4.2422 -4.71851 14.3229 4.22997 14.3229 4.22989 -4.9496 5.75681 -4.9496 5.75686 5.1227 5.3429 5.1226 5.3426 -4.3125 1.324 c -2.372 0.7281 -4.7815 1.3239 -5.3544 1.3239 -0.7732 0 -1.1008 2.4193 -1.2708 9.3874 l -0.2291 9.3875 -13.3689 3.9901 c -7.3528 2.1946 -13.3688 3.962 -13.3688 3.9276 0 -0.034 -5.8336 -1.8274 -12.9637 -3.9841 z m 12.5586 -13.4957 c 0 -6.9097 -0.2228 -12.563 -0.4952 -12.563 -0.2724 0 -2.2663 1.5327 -4.4309 3.4061 l -3.9356 3.4062 -5.8194 -1.7024 c -3.2007 -0.9363 -6.1289 -1.5045 -6.5072 -1.2628 -0.8084 0.5164 -0.8977 6.0629 -0.1841 11.444 l 0.5038 3.7994 9.8266 2.9565 c 5.4047 1.626 10.1001 2.984 10.4343 3.0177 0.3343 0.033 0.6077 -5.592 0.6077 -12.5017 z m 13.5714 9.1291 9.1151 -2.6824 0 -7.8299 c 0 -4.3063 -0.2342 -7.8296 -0.5203 -7.8296 -0.2862 0 -3.0301 0.7725 -6.0974 1.7168 -5.5301 1.7025 -5.5957 1.7033 -7.7846 0.09 -1.2141 -0.8946 -2.902 -2.4211 -3.7509 -3.392 -0.8489 -0.971 -1.8516 -1.7654 -2.2282 -1.7654 -0.3765 0 -0.6846 5.6788 -0.6846 12.6194 0 11.6248 0.1117 12.5854 1.4179 12.1873 0.7798 -0.2377 5.5197 -1.6392 10.533 -3.1146 z m -18.8906 -20.8074 c 2.0305 -1.8166 3.4199 -3.4519 3.0876 -3.634 -0.3323 -0.182 -4.915 -1.5834 -10.1838 -3.1142 l -9.5796 -2.7833 -3.3444 3.4571 c -1.8394 1.9014 -3.1799 3.6163 -2.979 3.811 0.4583 0.4437 17.0351 5.4165 18.3438 5.5028 0.5299 0.035 2.6249 -1.4228 4.6554 -3.2394 z m 26.1704 0.59 c 5.0201 -1.4921 9.1274 -2.9232 9.1274 -3.1802 0 -0.2569 -1.4436 -1.9243 -3.208 -3.7053 l -3.2079 -3.2379 -9.5532 2.7688 c -5.2543 1.5229 -9.84 2.9343 -10.1905 3.1365 -0.7284 0.42 5.8918 6.8444 7.1069 6.8966 0.4388 0.02 4.9052 -1.1863 9.9253 -2.6785 z m -11.2493 -8.2561 c 4.7455 -1.4265 9.1094 -2.8695 9.6974 -3.2066 1.0026 -0.5748 -15.702 -5.95584 -18.4891 -5.95584 -2.1601 0 -19.4803 5.29904 -18.987 5.80894 0.4335 0.448 16.8308 5.6527 18.461 5.8598 0.3792 0.048 4.5721 -1.0797 9.3177 -2.5063 z m -22.1788 -7.8525 c 5.2588 -1.59956 9.6854 -3.03643 9.8369 -3.19297 0.1514 -0.15653 -1.2666 -1.84852 -3.1512 -3.75987 l -3.4264 -3.47518 -8.5075 2.52098 c -4.679 1.38662 -8.9896 2.68999 -9.5792 2.89646 -0.734 0.25703 -0.096 1.55529 2.0256 4.11966 1.7036 2.05942 3.1295 3.75672 3.1689 3.77182 0.04 0.015 4.3741 -1.2813 9.6329 -2.8809 z m 39.5825 -0.89477 3.1038 -3.64538 -5.9396 -1.78948 c -3.2668 -0.98418 -7.5633 -2.32659 -9.5479 -2.98322 l -3.6083 -1.19382 -3.4642 3.51455 c -1.9053 1.93295 -3.3094 3.67461 -3.12 3.87034 0.3575 0.3696 18.3532 5.93248 19.0673 5.89408 0.2228 -0.012 1.8018 -1.6622 3.5089 -3.66707 z">
                    <Path.RenderTransform>
                        <TranslateTransform X="0" Y="-977.36218"/>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
        </Viewbox>
    </ControlTemplate>

27 Apr 2015, 18:32

So i have a number of images that I use for portraits. I can either load the images at runtime or drop them into a resource dictionary. Both could work for me, but both have problems.

Resource Dictionary
To do this i need to be able to bind a static resource somehow. Like this.
Code: Select all
<Rectangle Fill="{StaticResource {Binding imageKey}}"/>
Obviously this isn't legal, but somehow I would need to take the string image name and get the static resource for the key. The images i get from this look perfect, (when i manually set the resource key). Crisp clean images.

You can use a Binding with a Converter to transform the imageKey to the corresponding ImageSource in the dictionary:

public class ImageKeyConverter : Noesis.IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    ResourceDictionary images = (ResourceDictionary)parameter;
    return images[(string)value];
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

<Grid...>
  <Grid.Resources>
    <ResourceDictionary>
      <ImageKeyConverter x:Key="imageKeyConverter"/>
      <ResourceDictionary x:Key="imagesDictionary" Source="ImageDictionary.xaml"/>
    </ResourceDictionary>
  </Grid.Resources>
  ...
  <Rectangle Fill="{Binding imageKey, Converter={StaticResource imageKeyConverter},
     ConverterParameter={StaticResource imagesDictionary}}"/>
  ...
</Grid>

Runtime Load
I could also get references to the image source as described in the image section.
Code: Select all
Texture2D texture = Resources.Load("Portraits/" + imgname) as Texture2D;
Image = new TextureSource(texture);

<Image Source="{Binding Image}"  />
This works, but the images are total crap, i get pixely artifacts all over the place. It looks like the import preview in unity.

What are the texture settings of the image file in Unity? Maybe image is being scaled or compressed to an incorrect size.

27 Apr 2015, 18:58

Perfect solution with a converter. I'll give it a shout tonight thanks.

Image artifacts

Image artifacts

Re: Image artifacts

Re: Image artifacts

Re: Image artifacts

Re: Image artifacts

Re: Image artifacts

Who is online