Reporting services partially colored cell - reporting-services

How can i create partialy colored cell in reporting services table or matrix? For example: I hava value of 45& i want to fill only 45% of cell with red color, and other 55% stay white?

The only way I can see that working is to have a background image that is x% full of red for each percentage band you want to show.
Then you can set an expression to fill the background with the correct image depending on the value of a particular field.
Not quite the greatest solution as you are going to need 20 images just to get 5% bands.
The other option is to write a webservice/asp.net page that will generate an image in the correct proportions based on a querystring. Then you can set the background image to the aspx page.
This article is an example of how to create an image on the fly through asp.net
Tested the following code and it works quite nicely to produce an in cell chart.
protected void Page_Load(object sender, EventArgs e)
{
int percent = 0;
int height = 20;
if (Request.QueryString.AllKeys.Contains("percent"))
{
int.TryParse(Request.QueryString["percent"], out percent);
}
if (Request.QueryString.AllKeys.Contains("height"))
{
int.TryParse(Request.QueryString["height"], out height);
}
Bitmap respBitmap = new Bitmap(100, height, PixelFormat.Format32bppRgb);
Graphics graphics = Graphics.FromImage(respBitmap);
Brush brsh = new SolidBrush(Color.White);
graphics.FillRectangle(brsh, new Rectangle(0, 0, respBitmap.Width, respBitmap.Height));
brsh = new SolidBrush(Color.Red);
graphics.FillRectangle(brsh, new Rectangle(0, 0, respBitmap.Width * percent / 100, respBitmap.Height));
Response.ContentType = "image/jpeg";
Response.Charset = "";
respBitmap.Save(Response.OutputStream, ImageFormat.Jpeg);
}
Go to the text box you want, change the BackGroundImage source to external and the value to an expression.
Use an expression something like
= "http://mysite/chartimage.aspx?percentage=" & Fields!MyField.Value

Related

How does a computer resize an image?

Image resizing is nearly universal in any GUI framework. In fact, one of the first things you learn when starting out in web development is how to scale images using CSS or HTML's img attributes. But how does this work?
When I tell the computer to scale a 500x500 img to 100x50, or the reverse, how does the computer know which pixels to draw from the original image? Lastly, is it reasonably easy for me to write my own "image transformer" in another programming language without significant drops in performance?
Based on a bit of research, I can conclude that most web browser will use nearest neighbor or linear interpolation for image resizing. I've written a concept nearest neighbor algorithm that successfully resizes images, albeit VERY SLOWLY.
using System;
using System.Drawing;
using System.Timers;
namespace Image_Resize
{
class ImageResizer
{
public static Image Resize(Image baseImage, int newHeight, int newWidth)
{
var baseBitmap = new Bitmap(baseImage);
int baseHeight = baseBitmap.Height;
int baseWidth = baseBitmap.Width;
//Nearest neighbor interpolation converts pixels in the resized image to pixels closest to the old image. We have a 2x2 image, and want to make it a 9x9.
//Step 1. Take a 9x9 image and shrink it back to old value. To do this, divide the new width by old width (i.e. 9/2 = 4.5)
float widthRatio = (float)baseWidth/newWidth;
float heightRatio = (float)baseHeight/newHeight;
//Step 2. Perform an integer comparison for each pixel in old I believe. If we have a pixel in the new located at (4,5), then the proportional will be
//(.8888, 1.11111) which SHOULD GO DOWN to (0,1) coordinates on a 2x2. Seems counter intuitive, but imagining a 2x2 grid, (4.5) is on the left-bottom coordinate
//so it makes sense the to be on the (0,1) pixel.
var watch = new System.Diagnostics.Stopwatch();
watch.Start();
Bitmap resized = new Bitmap(newWidth, newHeight);
int oldX = 0; int oldY = 0;
for (int i = 0; i < newWidth; i++)
{
oldX = (int)(i*widthRatio);
for (int j = 0; j < newHeight; j++)
{
oldY = (int)(j*heightRatio);
Color newColor = baseBitmap.GetPixel(oldX,oldY);
resized.SetPixel(i,j, newColor);
}
}
//This works, but is 100x slower than standard library methods due to GetPixel() and SetPixel() methods. The average time to set a 1920x1080 image is a second.
watch.Stop();
Console.WriteLine("Resizing the image took " + watch.Elapsed.TotalMilliseconds + "ms.");
return resized;
}
}
class Program
{
static void Main(string[] args)
{
var img = Image.FromFile(#"C:\Users\kpsin\Pictures\codeimage.jpg");
img = ImageResizer.Resize(img, 1000, 1500);
img.Save(#"C:\Users\kpsin\Pictures\codeimage1.jpg");
}
}
}
I do hope that someone else can come along and provide either a) a faster algorithm for nearest neighbor because I'm overlooking something silly, or b) another way that image scalers work that I'm not aware of. Otherwise, question... answered?

in Flex/AS3 how can I highlight a datagrid row?

I am writing an application, using a datagrid. Various rows are differing colors based on the data. When the user selects a row the color becomes a few shades lighter.
Unfortunately one of the users doesn't think it is enough of a contrast and would like a more noticeable visual indicator. My two thoughts are to either;
A) Draw a rectangle around the entire row selected.
B) Add a column with an image that I hide or make visible based on whether the row is selected.
I went down path A. for a while and got to the point where in the function;
override protected function drawHighlightIndicator
I was able to identify when I was looking at the specific row, but I couldn't determine how to draw the rectangle.
So I backtracked and looked into B. I am able to create an Item renderer with an arrow, but I can't figure out how to turn it on & off when selected. I have a click event in the main module, but no way to reference back to the Item renderer component.
I could set a value in the array collection, and do a refresh, which will probably work, but that tends to move the selected row to the top of the datagrid display area.
So if anyone can help I on A or B would appreciate it. This is a DataGrid, not an AdvancedDataGrid.
Since you're using mx.controls.DataGrid, overriding drawHighlightIndicator could look like following example, which draws 1px red border around selection marker:
protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
var width:int = unscaledWidth - viewMetrics.left - viewMetrics.right;
var borderColor:uint = 0xff0000;
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(borderColor);
g.drawRect(0, 0, width, height);
g.beginFill(color);
g.drawRect(1, 1, width - 2, height - 2);
g.endFill();
indicator.x = x;
indicator.y = y;
}

Image not rendering on web browser

I got a kaleidoscope code from Gary George at openprocessing. I tried to modify it to meet my needs and export it to web. But I'm having trouble rendering the image on the browser. It runs well on the desktop but not on browser. I've been trying to fix the error but...no luck (yet, I hope).
Here is the code:
/**
* Kaleidoscope by Gary George.
*
*Load an image.
*Move around the mouse to explore other parts of the image.
*Press the up and down arrows to add slices.
*Press s to save.
*
*I had wanted to do a Kaleidoscope and was inspired with the by Devon Eckstein's Hexagon Stitchery
*and his use of Mask. His sketch can be found at http://www.openprocessing.org/visuals/?visualID=1288
*/
PImage a;
int totalSlices=8; // the number of slices the image will start with... should be divisable by 4
int previousMouseX, previousMouseY; //store previous mouse coordinates
void setup()
{
size(500,500, JAVA2D);
background(0,0,0);
smooth(); //helps with gaps inbetween slices
fill(255);
frameRate(30);
a=loadImage("pattern.jpg");
}
void draw() {
if(totalSlices==0){
background(0,0,0);
image(a,0,0);
}
else{
if(mouseButton == LEFT){
background(0,0,0);
//the width and height parameters for the mask
int w =int(width/3.2);
int h = int(height/3.2);
//create a mask of a slice of the original image.
PGraphics selection_mask;
selection_mask = createGraphics(w, h, JAVA2D);
selection_mask.beginDraw();
selection_mask.smooth();
selection_mask.arc(0,0, 2*w, 2*h, 0, radians(360/totalSlices+.1)); //using 369 to reduce lines on arc edges
selection_mask.endDraw();
float wRatio = float(a.width-w)/float(width);
float hRatio = float(a.height-h)/float(height);
//println("ratio: "+hRatio+"x"+wRatio);
PImage slice = createImage(w, h, RGB);
slice = a.get(int((mouseX)*wRatio), int((mouseY)*hRatio), w, h);
slice.mask(selection_mask);
translate(width/2,height/2);
float scaleAmt =1.5;
scale(scaleAmt);
for(int k = 0; k<=totalSlices ;k++){
rotate(k*radians(360/(totalSlices/2)));
image(slice, 0, 0);
scale(-1.0, 1.0);
image(slice,0,0);
}
}
resetMatrix();
}
}
You need to change two things for loading a local image in JS mode:
Your images must be in a folder called data inside your sketch folder. You can just make the folder yourself and put the image in it. You still load the image as before, no need to specify the data folder.
In JS mode, you need to preload the image using this command: /* #pjs preload="pattern.jpg"; */
So your full image loading code would be:
/* #pjs preload="pattern.jpg"; */
a = loadImage("pattern.jpg");

Cropping specific part of the image

I am building a windows phone 8 camera app. After a photograph has been taken i want to give the user the option of cropping specific part of the image. Like if there are some specific objects in the image, when crop option is selected, it should highlight or outline that specific part of the image, and it should be able to crop it, rather than manually cropping it.
Any specific ways to do it?.
Thanks In advance.
One way would be to create a WriteableBitmap and do a TranslateTransform of the original image into the WritableBitmap. Something like::
Image workImage = new Image { Source = originalImage, Width = originalWidth, Height = originalHeight };
WriteableBitmap writeableBitmap = new WriteableBitmap(newWidth, newHeight);
writeableBitmap.Render(temporaryImage, new TranslateTransform { X = (originalWidth – newWidth) / -2, Y = (originalHeight – newHEight) / -2 });
writeableBitmap.Invalidate();
//... or some other stream
Stream newImageStream = new MemoryStream();
//set whatever quality settings you like if 75 is no good
writeableBitmap.SaveJpeg(newImageStream, newWidth, newHeight, 0, 75);
// TODO: do something with newImageStream

Bitmap conversion - Creating a transparent + black image from a B&W source

I have a whole bunch of jpg files that I need to use in a project, that for one reason or another cannot be altered. Each file is similar (handwriting), black pen on white BG. However I need to use these assets against a non-white background in my flash project, so I'm trying to do some client-side processing to get rid of the backgrounds using getPixel and setPixel32.
The code I am currently using currently uses a linear comparison, and while it works, the results are less than expected, as the shades of grey are getting lost in the mix. Moreso than just tweaking my parameters to get things looking proper, I get the feeling that my method for computing the RGBa value is weak.
Can anyone recommend a better solution than what I'm using below? Much appreciated!
private function transparify(data:BitmapData) : Bitmap {
// Create a new BitmapData with transparency to return
var newData:BitmapData = new BitmapData(data.width, data.height, true);
var orig_color:uint;
var alpha:Number;
var percent:Number;
// Iterate through each pixel using nested for loop
for(var x:int = 0; x < data.width; x++){
for (var y:int = 0; y < data.height; y++){
orig_color = data.getPixel(x,y);
// percent is the opacity percentage, white should be 0,
// black would be 1, greys somewhere in the middle
percent = (0xFFFFFF - orig_color)/0xFFFFFF;
// To get the alpha value, I multiply 256 possible values by
// my percentage, which gets multiplied by 0xFFFFFF to fit in the right
// value for the alpha channel
alpha = Math.round(( percent )*256)*0xFFFFFF;
// Adding the alpha value to the original color should give me the same
// color with an alpha channel added
var newCol = orig_color+alpha;
newData.setPixel32(x,y,newCol);
}
}
var newImg:Bitmap = new Bitmap(newData);
return newImg;
}
Since it's a white background, blendMode may give you a better result.