I am new to WP7 development and I would like to know how can I write text to image?
First is it possible to do so?
As in GDI we can write text to image as shown below:
Dim pth As New GraphicsPath()
pth.AddString(txtSample.Text, New FontFamily(DropFont.SelectedValue), 0, Integer.Parse(DropFontSize.SelectedValue), New Point(left, top), StringFormat.GenericTypographic)
But in WP7 as I came to know that GDI is not supported.So how Can I do this?
Edit:
I need to select an image from the pictures hub or take a picture using camera and display it in an image control and write some text and save back with a different name.
Any suggestions are most welcome.
You need to get hold of a WriteableBitmap, which can then be manipulated.
This can be done by either adding a UIElement using the Render method or you can manipulate the pixels directly using the Pixels array.
You probably only need to add TextBlock elements to the bitmap, but if you are curious about pixel manipulation here is how that is done:
I have only experience with pixel manipulation. This is not entirely straight forward, but you access pixel (x, y) in the one-dimensional array by translating y * width + x.
The value is in a format called argb32, ie values for alpha-channel (opacity), red, green and blue. Translation between regular Color and argb32 below:
int ColorToInt(Color c)
{
var argb32 = c.A << 24 | c.R << 16 | c.G << 8 | c.B;
return argb32;
}
Color IntToColor(int argb32)
{
const int mask = 0x000000FF;
byte a, r, g, b;
a = (byte)((argb32 >> 24) & mask);
r = (byte)((argb32 >> 16) & mask);
g = (byte)((argb32 >> 8) & mask);
b = (byte)(argb32 & mask);
return Color.FromArgb(a, r, g, b);
}
Why do you need them embedded in the Image?
You could simply place your image and Text in a Grid such as:
<grid>
<image source="YourImageSource"/>
<TextBlock Text="Your Text Here"/>
</grid>
That will overlay your image with Text without having to modify the image so you can use it later. It also provides more freedom with bindings etc as you can bind both to different things and switch them in and out independently.
If you are using XNA this can also be done by manipulating the Pixels of the Texture2D the same way as faester said.
Related
I need to find the objects that fully/partly visible on the rendered screen. I know this can be done by coloring each object uniquely, rendering the scene, and detecting the colors that end up on the screen. This is a screen-space operation that would involve fiddling with the frame-buffer. Are there any special functions/helpers within three.js that do this more easily?
You can check if object is in view frustum of the camera. See Frustum in Three.js documentation.
One way to achieve this is to render your scene once with constant shading, colour-coding your objects as you need, with any anti-aliasing and other effects turned off, so that you can easily map a read pixel back to its object by its colour.
Then, you can read pixels from your render target, for which you can use three.js' WebGLRenderer.readRenderTargetPixels() (see docs). You can then read the colours out of the buffer you pass to it.
Something like this:
// Render your scene first, into a renderTarget. Then:
const buffer = new Uint8Array(width * height * 4);
this.renderer.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);
for (let i=0; i<buffer.length/4; ++i) {
const r = buffer[i*4 ];
const g = buffer[i*4 + 1];
const b = buffer[i*4 + 2];
const rgb = (r << 16) | (g << 8) | b;
// Do your mapping
}
This is very much just WebGL though, and don't know whether there might be a better way to do this within three.js.
Mapbox provides Global elevation data with height data encoded in PNG image. Height is decoded by height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1). Details are in https://www.mapbox.com/blog/terrain-rgb/.
I want to import the height data to generate terrains in Unity3D.
Texture2D dem = (Texture2D)AssetDatabase.LoadAssetAtPath("Assets/dem/12/12_3417_1536.png", typeof(Texture2D));
for (int i = 0; i < width; i++)
for (int j = 0; j < height; j++)
{
Color c = dem.GetPixel(i, j);
float R = c.r*255;
float G = c.g*255;
float B = c.b*255;
array[i, j] = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1f);
}
Here I set a break point and the rgba value of the first pixel is RGBA(0.000, 0.592, 0.718, 1.000). c.r is 0. The height is incorrect as this point represent the height of somewhere on a mountain.
Then I open the image in Photoshop and get RGB of the first pixel: R=1,G=152,B=179.
I write a test program in C#.
System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap("12_3417_1536.png");
Color a = bitmap.GetPixel(0, 0);
It shows Color a is (R,G,B,A)=(1,147,249,255)
Here is the image I test:
https://api.mapbox.com/v4/mapbox.terrain-rgb/12/3417/1536.pngraw?access_token=pk.eyJ1Ijoib2xlb3RpZ2VyIiwiYSI6ImZ2cllZQ3cifQ.2yDE9wUcfO_BLiinccfOKg
Why I got different RGBA value with different method? Which one is correct?
According to the comments below, different read order and compressed data in unity may result in different value of the rgba of pixel at (0,0).
Now I want to focus on----How to convert the rgba(0~1) to RGBA(0~255)?
r_ps=r_unity*255? But how can I explain r=0 in unity and r=1 in PS of pixel at (0,0)
?
Try disabling compression from the texture's import settings in Unity (No compression). Alternatively, if you fetch the data at runtime, you can use Texture.LoadBytes() to avoid compression artifacts.
I will assume you are using the same picture and that there aren't two 12_3417_1536.png files in separate folders.
Each of these functions has a different concept of which pixel is at (0,0). Not sure what you mean by "first" pixel when you tested with photoshop, but Texture coordinates in unity start at lower left corner.
When I tested the lower left corner pixel using paint, I got the same value as you did with photoshop. However, if you test the upper left corner, you get (1,147,249,255) which is the result bitmap.GetPixel returns.
The unity values that you're getting seem to be way off. Try calling dem.GetPixel(0,0) so that you're sure you're analyzing the simplest case.
I'm trying to develop a small and simplistic webcam-controlled game, where the user moves a figure on the x-axis by tracking a lighting source with the webcam (flashlight eg.)
So far my code generates a target object every couple of seconds at a random location in the picture.
That object is stored as a Mat via
Mat target = imread("target.png");
In order to paint the object onto the background image, I'm using
bgClear.copyTo(temp);
for(int i = targetX; i < target.cols + targetX; i++){
for(int j = targetY; j < target.rows + targetY; j++){
temp.at<Vec3b>(j,i) = target.at<Vec3b>(j-targetY,i-targetX);
}
}
temp.copyTo(bg);
where bgClear represents the clean background, temp the background copy that is being edited and bg the final background thats being shown. including the object.
targetX and targetY are the starting coordinates of the object (whereas targetX is randomly generated beforehand so that the object spawns at a random location in the upper half of the image), relative to the background. (so I'm not iterating through the whole background, only the range of the object).
It works so far, but I have a problem:
The transparent area of the imported image is now white, and I dont seem to be able to fix it by checking the pixel values with something like
if(target.at<Vec3b>(Point(j-targetY,i-targetX))[0] != 255 &&
target.at<Vec3b>(Point(j-targetY,i-targetX))[1] != 255 &&
target.at<Vec3b>(Point(j-targetY,i-targetX))[2] != 255)
before I am actually replacing the pixel.
I've also tried loading the .png file by adding the -1 flag (alpha channel), but then the image just seems ghosty and can barely be seen.
In case I might you have problems imaging what I'm talking about, here's a partial screenshot of it: Screenshot
Any advice on how I might fix this ?
Regards,
Daniel
You need to handle transparency manually. General idea is, while copying to temp only copy pixels that are opaque i.e. alpha value is high.
use CV_LOAD_IMAGE_UNCHANGED (= -1) in imread.
split target to four single channel image using split.
merge first three channels to form a BGR image using merge.
in the paint loop, use newly formed BGR image as source and the unmerged fourth channel (alpha) as mask.
...as I was mentioning in my comment to asif's helpful answer:
Mat target = imread("target", CV_LOAD_IMAGE_UNCHANGED); // load image
Mat targetBGR(target.rows, target.cols, CV_8UC3); // create BGR mat
Mat targetAlpha(target.rows, target.cols, CV_8UC1); // create alpha mat
Mat out[] = {targetBGR, targetAlpha}; // create array of matrices
int from_to[] = { 0,0, 1,1, 2,2, 3,3 }; // create array of index pairs
mixChannels( &target, 1, out, 2, from_to, 4 ); // finally split target into 3
channel BGR plus 1 channel Alpha
...as described in this example. (minus the R-B-channel-swapping).
...later in the pixel-processing loop:
if(targetAlpha.at<uchar>(j-targetY,i-targetX) > 0)
temp.at<Vec3b>(j,i) = targetBGR.at<Vec3b>(j-targetY,i-targetX);
Working like a charm!
I need to determine the amount/quality of color in an image in order to compare it with other images and recommend a user (owner of the image) maybe he needs to print it in black and white and not in color.
So far I'm analyzing the image and extracting some data of it:
The number of different colors I find in the image
The percentage of color in the whole page (color pixels / total pixels)
For further analysis I may need other characteristic of these images. Do you know what else is important (or I'm missing here) in image analysis?
After some time I found a missing characteristic (very important) which helped me a lot with the analysis of the images. I don't know if there is a name for that but I called it the average color of the image:
When I was looping over all the pixels of the image and counting each color I also retrieved the information of the RGB values and summarized all the Reds, Greens and Blues of all the pixels. Just to come up with this average color which, again, saved my life when I wanted to compare some kind of images.
The code is something like this:
File f = new File("image.jpg");
BufferedImage im = ImageIO.read(f);
int tot = 0;
int red = 0;
int blue= 0;
int green = 0;
int w = im.getWidth();
int h = im.getHeight();
// Going over all the pixels
for (int i=0;i<w;i++){
for (int j=0;j<h;j++){
int pix = im.getRGB(i, j); //
if (!sameARGB(pix)) { // Compares the RGB values
tot+=1;
red+=pix.getRed();
green+=pix.getGreen();
blue+=pix.getBlue();
}
}
}
And you should get the results like this:
// Percentage of color on the image
double per = (double)tot/(h*w);
// Average color <-------------
Color c = new Color((double)red/tot,(double)green/tot,(double)blue/tot);
How do you use DwmGetColorizationColor?
The documentation says it returns two values:
a 32-bit 0xAARRGGBB containing the color used for glass composition
a boolean parameter that is true "if the color is an opaque blend" (whatever that means)
Here's a color that i like, a nice puke green:
You can notice the color is greeny, and the translucent title bar (against a white background) shows the snot color very clearly:
i try to get the color from Windows:
DwmGetColorizationColor(dwCcolorization, bIsOpaqueBlend);
And i get
dwColorization: 0x0D0A0F04
bIsOpaqueBlend: false
According to the documentation this value is of the format AARRGGBB, and so contains:
AA: 0x0D (13)
RR: 0x0A (10)
GG: 0x0F (15)
BB: 0x04 (4)
This supposedly means that the color is (10, 15, 4), with an opacity of ~5.1%.
But if you actually look at this RGB value, it's nowhere near my desired snot green. Here is
(10, 15, 4) with zero opacity (the original color), and
(10,15,4) with 5% opacity against a white/checkerboard background:
Rather than being Lime green, DwmGetColorizationColor returns an almost fully transparent black.
So the question is: How to get glass color in Windows Vista/7?
i tried using DwmGetColorizationColor, but that doesn't work very well.
A person with same problem, but a nicer shiny picture to attract you squirrels:
So, it boils down to –
DwmGetColorizationColor is completely
unusable for applications attempting
to apply the current color onto an
opaque surface.
i love this guy's screenshots much better than mine. Using his screenshots as a template, i made up a few more sparklies:
For the last two screenshots, the alpha blended chip is a true partially transparent PNG, blending to your browser's background. Cool! (i'm such a geek)
Edit 2: Had to arrange them in rainbow color. (i'm such a geek)
Edit 3: Well now i of course have to add Yellow.
Undocumented/Unsupported/Fragile Workarounds
There is an undocumented export from DwmApi.dll at entry point 137, which we'll call DwmGetColorizationParameters:
HRESULT GetColorizationParameters_Undocumented(out DWMCOLORIZATIONPARAMS params);
struct DWMCOLORIZATIONPARAMS
{
public UInt32 ColorizationColor;
public UInt32 ColorizationAfterglow;
public UInt32 ColorizationColorBalance;
public UInt32 ColorizationAfterglowBalance;
public UInt32 ColorizationBlurBalance;
public UInt32 ColorizationGlassReflectionIntensity;
public UInt32 ColorizationOpaqueBlend;
}
We're interested in the first parameter: ColorizationColor.
We can also read the value out of the registry:
HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM
ColorizationColor: REG_DWORD = 0x6614A600
So you pick your poison of creating appcompat issues. You can
rely on an undocumented API (which is bad, bad, bad, and can go away at any time)
use an undocumented registry key (which is also bad, and can go away at any time)
See also
Is there a list of valid parameter combinations for GetThemeColor / Visual Styles API
How does Windows change Aero Glass color?
DWM - Colorization Color Handling Using DWMGetColorizationColor
Retrieving Aero Glass base color for opaque surface rendering
i've been wanting to ask this question for over a year now. i always knew that it's impossible to answer, and that the only way to get anyone to actually pay attention is to have colorful screenshots; developers are attracted to shiny things. But on the downside it means i had to put all kinds of work into making the lures.
Colorization color != the base color chosen. It's misleading, I know.
But I'm confused. The image you borrowed was from my post entitled "Retrieving Aero Glass base color for opaque surface rendering". Is this not what you want to do? I also indicated in the post the registry location in which all the color information is stored (HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM) for retrieval purposes.
Edited 8/26
DwmGetColorizationColor (dwmapi.dll) returns the "colorization color", which is a blend of various colors (incl. your selected base color) and shader logic to achieve the overall glass effect.
All the color information you need/want can be found in the registry key noted above. The base color, the colors used in blending, and the resulting colorization color are all there.
(The key above is present on Windows Vista and above.)
I believe I have solved the Aero Color. The color given by ColorizationColor is in fact AARRGGBB but it is not being used in the way that you think at all. And in order to solve the final color, you also need to get the Color Intensity as shown here: http://www.codeproject.com/Articles/610909/Changing-Windows-Aero-Color
First step is to parse AARRGGBB. Then take the resulting RGB and convert to HSV. The pure Hue plus Saturation at full brightness is the base color. Now overlay Value as a grayscale at Alpha over top of pure Hue and Saturation to get the Aero color. Then overlay that color over the frame color: rgb(235, 235, 235) at Intensity to get the final Composite Aero color result.
Lastly, I've also provided an example of how to extract a useable toolbar color that matches the Aero frame color, but will always work with black text and other basic Aero features. This is accomplished by limiting Intensity to 35%.
Here is the math:
function dwmToRgb() {
// Input Values
var colorizationColor = "a84f1b1b"; // dwmcolor.clrColor = ColorizationColor
var colorizationColorBalance = 60; // dwmcolor.nIntensity = ColorizationColorBalance
var F = 235; // Frame base grayscale color when Transparency is disabled
// Parse the input values
var A = Math.round(parseInt(colorizationColor.substr(0,2),16)/2.55)/100;
var R1 = parseInt(colorizationColor.substr(2,2), 16);
var G1 = parseInt(colorizationColor.substr(4,2), 16);
var B1 = parseInt(colorizationColor.substr(6,2), 16);
var I = colorizationColorBalance/100;
// Solve for HSV Value and pure Hue+Sat
var V = Math.max(R1, G1, B1);
var R2 = R1*255/V;
var G2 = G1*255/V;
var B2 = B1*255/V;
// Aero Frame Pure Hue: Overlay Value # Alpha over pure Hue+Sat
var R3 = Math.round(V+(R2-V)-((R2-V)*A));
var G3 = Math.round(V+(G2-V)-((G2-V)*A));
var B3 = Math.round(V+(B2-V)-((B2-V)*A));
var hexRGB3 = "#" + ((1 << 24) + (R3 << 16) + (G3 << 8) + B3).toString(16).slice(1);
// Aero Frame Composite Color: Overlay RGB3 # Intensity over Frame base color
var R4 = Math.round(R3+(F-R3)-((F-R3)*I));
var G4 = Math.round(G3+(F-G3)-((F-G3)*I));
var B4 = Math.round(B3+(F-B3)-((F-B3)*I));
var hexRGB4 = "#" + ((1 << 24) + (R4 << 16) + (G4 << 8) + B4).toString(16).slice(1);
// Aero Toolbar Color: Overlay RGB3 # max 35% Intensity over Frame base color
if (I > 0.35) { I5 = 0.35;} else { I5 = I;}
var R5 = Math.round(R3+(F-R3)-((F-R3)*I5));
var G5 = Math.round(G3+(F-G3)-((F-G3)*I5));
var B5 = Math.round(B3+(F-B3)-((F-B3)*I5));
var hexRGB5 = "#" + ((1 << 24) + (R5 << 16) + (G5 << 8) + B5).toString(16).slice(1);
How does A0F040 look to you?
OP Edit: This is how 0xA0F040 looks to me: