I am using Flot version 0.8.3 to display several types of charts. I give users an option to export the chart from the canvas using .toDataURL('img/png').
The exported images were not showing the tick axis labels. I eventually figured out this was because the labels were rendering in html and not on the canvas. So, I added jquery.flot.canvas.js and set options.canvas = true just prior to exporting. The labels now appear in the exported image, but the x-axis tick labels overlap each other.
I then added jquery.flot.tickrotor.js and set options.xaxis.rotateTicks = 135 to rotate the labels. The labels do still appear in the exported image, and they are correctly rotated, but they have lost the font size, appearing much smaller than other text, and the x-axis ticks have disappeared from the grid. (I have set the font with options.xaxis.font.size = 24, the same font size I've given all text in the canvas.)
What do I need to do to include the tick labels in the exported image without overlapping and, if rotated, at the correct font size?
There were two issues here:
(1) First, the rotated tick label text was tiny. I was initially setting the tick label font with xaxis.font, which is ignored by jquery.flot.tickrotor.js. As stated in the plugin's README, declare the font in the xaxis.rotateTicksFont option instead.
(2) Second, when rotating tick labels, the vertical tick lines would disappear. As pointed out by Mark in the comments, this is due to a bug on on line 77 of jquery.flot.tickrotor.js: opts.ticks = [];. (A bug report has been filed.)
In the meantime, until the bug gets resolved, to fix the issue I have patched jquery.flot.js as follows:
/jquery.flot.js
Index: assets/javascript/lib/jquery/plugins/flot/jquery.flot.js
===================================================================
--- assets/javascript/lib/jquery/plugins/flot/jquery.flot.js (revision 13829)
+++ assets/javascript/lib/jquery/plugins/flot/jquery.flot.js (working copy)
## -2030,8 +2030,9 ##
for (var j = 0; j < axes.length; ++j) {
var axis = axes[j], box = axis.box,
- t = axis.tickLength, x, y, xoff, yoff;
- if (!axis.show || axis.ticks.length == 0)
+ t = axis.tickLength, x, y, xoff, yoff,
+ rTicks = axis.rotatedTicks || axis.ticks;
+ if (!axis.show || rTicks.length == 0)
continue;
ctx.lineWidth = 1;
## -2080,8 +2081,8 ##
ctx.strokeStyle = axis.options.tickColor;
ctx.beginPath();
- for (i = 0; i < axis.ticks.length; ++i) {
- var v = axis.ticks[i].v;
+ for (i = 0; i < rTicks.length; ++i) {
+ var v = rTicks[i].v;
xoff = yoff = 0;
Problem solved.
Related
I want to get info like x, y, width, height, title of the chart. Here is my version for HSSFChart which works (It returns non-zero values):
HSSFChart chart
title = chart.getChartTitle();
x = chart.getChartX();
y = chart.getChartY();
width = chart.getChartWidth();
height = chart.getChartHeight();
The problem is that I can't get the same or any other info from XSSFChart.
XSSFDrawing drawing = sheet.createDrawingPatriarch();
List<XSSFChart> chartsList = drawing.getCharts();
for (XSSFChart chart : chartsList){
#ctChart
CTChart ctChart = chart.getCTChart();
CTPlotArea plotArea = ctChart.getPlotArea();
title = ctChart.getTitle.toString();
int size = plotArea.getScatterChartList().size();
for (int j = 0; j < size; j++){
List<CTScatterSer> seriesList = plotArea.getScatterChartList().get(j).getSerList();
for (int i = 0; i < seriesList.size(); i++){
CTScatterSer ser = seriesList.get(i);
XmlObject serieX = ser.getXVal();
XmlObject serieY = ser.getYVal();
System.out.println("x: " + serieX.xmlText() + " y: " + serieY.xmlText());
}
}
if (plotArea.getLayout() != null)
if (plotArea.getLayout().getManualLayout() != null)
System.out.println("x: " + plotArea.getLayout().getManualLayout().getX() + " y: " +
plotArea.getLayout().getManualLayout().getY());
#chart
chart.getManualLayout().getX(); // returns 0
chart.getManualLayout().getY(); // returns 0
chart.getManualLayout().getHeightRatio(); // returns 0.0
chart.getManualLayout().getWidthRatio(); // returns 0.0
It prints nothing even if there are many charts and series.
I am struggling with a similar problem, and I am stuck also in your code..
List<org.openxmlformats.schemas.drawingml.x2006.chart.CTLineChart> chartList=plotArea.getLineChartList();
int size = chartList.size();
Mine is a LineChart so I've changed accordingly, but I have this runtime error:
Exception in thread "main" java.lang.NoClassDefFoundError: org/openxmlformats/schemas/drawingml/x2006/chart/impl/CTPlotAreaImpl$1LineChartList
at org.openxmlformats.schemas.drawingml.x2006.chart.impl.CTPlotAreaImpl.getLineChartList(Unknown Source)
at ....
Seems something is missing from my poi-openxml-schemas-3.13-20150929.jar file.
Anyway, I've commented out the relevant part and I have NULL as a result of queries on ManualLayout. This is terrible.
I have a strong feeling that the Chart is not rendered in an XML file (as is XLSX) but it's only rendered where we open the file with Office (or OpenOffice), as if the layout is still not done and will be done by the GUI.
In this case I think one can investigate this solution using PUNO:
http://www.wstech2.net/?do=0a,01,05
This involevs a bridge between Php and a running instance of OpenOffice, which exposes the UNO interface.
I've looked at this but it seemed overly complicated to install, but maybe this is the only way.
SDL2 uses a (0,0) top-left configuration with a positive y axis pointing down. How can I change this for y pointing up from the bottom left? Note that the area covered by the input co-ordinates may or may not be the same as the screen area.
Usually I would just change the projection matrix to what I need but I don't seem to have access to this through the SDL API?
How about a function which converts it for you?
float convertPointY(float y) {
return -y + WINDOW_HEIGHT;
}
And if the window changes size thus not having a constant height:
float convertPointY(float y) {
int width = 0, height = 0;
SDL_GetWindowSize(window, &width, &height);
return -y + height;
}
I'm trying to create loading bar for my game. I create basic rectangle and added to the stage and caluclated size acording to the number of files so I get fixed width. Everything works, but for every step (frame) it creates another rectangle, how do I get only one object?
this is my code:
function test(file) {
r_width = 500;
r_height = 20;
ratio = r_width / manifest.length;
if (file == 1) {
new_r_width = 0
// Draw
r = new createjs.Shape();
r_x = (width / 2) - (r_width / 2);
r_y = (height / 2) - (r_height / 2);
new_r_width += ratio;
r.graphics.beginFill("#222").drawRect(r_x, r_y, new_r_width, r_height);
stage.addChild(r);
} else {
stage.clear();
new_r_width += ratio;
r.graphics.beginFill("#" + file * 100).drawRect(r_x, r_y + file * 20, new_r_width, r_height);
stage.addChild(r);
}
stage.update();
}
https://space-clicker-c9-zoranf.c9.io/loading/
If you want to redraw the rectangle, you will have to clear the graphics first, and then ensure the stage is updated. In your code it looks like you are clearing the stage, which is automatically handled by the stage.update() unless you manually turn off updateOnTick.
There are some other approaches too. If you just use a rectangle, you can set the scaleX of the shape. Draw your rectangle at 100% of the size you want it at, and then scale it based on the progress (0-1).
r.scaleX = 0.5; // 50%
A new way that is supported (only in the NEXT version of EaselJS, newer than 0.7.1 in GitHub), you can save off the drawRect command, and modify it.
var r = new createjs.Shape();
r.graphics.beginFill("red");
var rectCommand = r.graphics.drawRect(0,0,100,10).command; // returns the command
// Later
rectCommand.w = 50; // Modify the width of the rectangle
Hope that helps!
The project in question: https://github.com/matutter/Pixel2 is a personal project to replace some out of date software at work. What it should do is, the user adds an image and it generates a color palette of the image. The color palette should have no duplicate colors. (thats the only important stuff)
My question is: why do larger or hi-res or complex images not work as well? (loss of color data)
Using dropzone.js I have the user put a picture on the page. The picture is a thumbnail. Next I use jquery to find the src out of a <img src="...">. I pass that src to a function that does this
function generate(imgdata) {
var imageObj = new Image();
imageObj.src = imgdata;
convert(imageObj); //the function that traverses the image data pulling out RGB
}
the "convert" function pulls out the data fairly simply by
for(var i=0, n=data.length; i<n; i+=4, pixel++ ) {
r = data[i];
g = data[i+1];
b = data[i+2];
color = r + g + b; // format is a string of **r, g, b**
}
finally, the last part of the main algorithme filters out duplicate colors, I only want just 1 occurrence of each... here's the last part
color = monoFilter(color); // the call
function monoFilter(s) {
var unique = [];
$.each(s, function(i, el){
if($.inArray(el, unique) === -1) unique.push(el);
});
unique.splice(0,1); //remove undefine
unique.unshift("0, 0, 0"); //make sure i have black
unique.push("255, 255, 255"); //and white
return unique;
}
I'm hoping someone can help me identify why there is such a loss of color data in big files.
If anyone is actually interesting enough to look at the github, the relivent files are js/pixel2.js, js/dropzone.js, and ../index.html
This is probably the cause of the problem:
color = r + g + b; // format is a string of **r, g, b**
This simply adds the numbers together and the more pixels you have the higher risk you run to get the same number. For example, these colors generate the same result:
R G B
color = 90 + 0 + 0 = 90;
color = 0 + 90 + 0 = 90;
color = 0 + 0 + 90 = 90;
even though they are completely different colors.
To avoid this you can do it like this if you want a string:
color = [r,g,b].join();
or you can create an integer value of them (which is faster to compare with than a string):
color = (b << 16) + (g << 8) + r; /// LSB byte-order
Even an Euclidean vector would be better:
color = r*r + g*g + b*b;
but with the latter you risk eventually the same scenario as the initial one (but useful for nearest color scenarios).
Anyways, hope this helps.
"The problem was that I wasn't accounting for alpha. So a palette from an image that uses alpha would have accidental duplicate records."
I figured this out after finding this Convert RGBA color to RGB
I am currently working on a simple Silverlight app that will allow people to upload an image, crop, resize and rotate it and then load it via a webservice to a CMS.
Cropping and resizing is done, however rotation is causing some problems. The image gets cropped and is off centre after the rotation.
WriteableBitmap wb = new WriteableBitmap(destWidth, destHeight);
RotateTransform rt = new RotateTransform();
rt.Angle = 90;
rt.CenterX = width/2;
rt.CenterY = height/2;
//Draw to the Writeable Bitmap
Image tempImage2 = new Image();
tempImage2.Width = width;
tempImage2.Height = height;
tempImage2.Source = rawImage;
wb.Render(tempImage2,rt);
wb.Invalidate();
rawImage = wb;
message.Text = "h:" + rawImage.PixelHeight.ToString();
message.Text += ":w:" + rawImage.PixelWidth.ToString();
//Finally set the Image back
MyImage.Source = wb;
MyImage.Width = destWidth;
MyImage.Height = destHeight;
The code above only needs to rotate by 90° at this time so I'm just setting destWidth and destHeight to the height and width of the original image.
It looks like your target image is the same size as your source image. If you want to rotate over 90 degrees, your width and height should be exchanged:
WriteableBitmap wb = new WriteableBitmap(destHeight, destWidth);
Also, if you rotate about the centre of the original image, part of it will end up outside the boundaries. You could either include some translation transforms, or simply rotate the image about a different point:
rt.CenterX = rt.CenterY = Math.Min(width / 2, height / 2);
Try it with a piece of rectangular paper to see why that makes sense.
Many thanks to those above.. they helped a lot. I include here a simple example which includes the additional transform necessary to move the rotated image back to the top left corner of the result.
int width = currentImage.PixelWidth;
int height = currentImage.PixelHeight;
int full = Math.Max(width, height);
Image tempImage2 = new Image();
tempImage2.Width = full;
tempImage2.Height = full;
tempImage2.Source = currentImage;
// New bitmap has swapped width/height
WriteableBitmap wb1 = new WriteableBitmap(height,width);
TransformGroup transformGroup = new TransformGroup();
// Rotate around centre
RotateTransform rotate = new RotateTransform();
rotate.Angle = 90;
rotate.CenterX = full/2;
rotate.CenterY = full/2;
transformGroup.Children.Add(rotate);
// and transform back to top left corner of new image
TranslateTransform translate = new TranslateTransform();
translate.X = -(full - height) / 2;
translate.Y = -(full - width) / 2;
transformGroup.Children.Add(translate);
wb1.Render(tempImage2, transformGroup);
wb1.Invalidate();
If the image isn't square you will get cropping.
I know this won't give you exactly the right result, you'll need to crop it afterwards, but it will create a bitmap big enough in each direction to take the rotated image.
//Draw to the Writeable Bitmap
Image tempImage2 = new Image();
tempImage2.Width = Math.Max(width, height);
tempImage2.Height = Math.Max(width, height);
tempImage2.Source = rawImage;
You need to calculate the scaling based on the rotation of the corners relative to the centre.
If the image is a square only one corner is needed, but for a rectangle you need to check 2 corners in order to see if a vertical or horizontal edge is overlapped. This check is a linear comparison of how much the rectangle's height and width are exceeded.
Click here for the working testbed app created for this answer (image below):
double CalculateConstraintScale(double rotation, int pixelWidth, int pixelHeight)
The pseudo-code is as follows (actual C# code at the end):
Convert rotation angle into Radians
Calculate the "radius" from the rectangle centre to a corner
Convert BR corner position to polar coordinates
Convert BL corner position to polar coordinates
Apply the rotation to both polar coordinates
Convert the new positions back to Cartesian coordinates (ABS value)
Find the largest of the 2 horizontal positions
Find the largest of the 2 vertical positions
Calculate the delta change for horizontal size
Calculate the delta change for vertical size
Return width/2 / x if horizontal change is greater
Return height/2 / y if vertical change is greater
The result is a multiplier that will scale the image down to fit the original rectangle regardless of rotation.
**Note: While it is possible to do much of the maths using matrix operations, there are not enough calculations to warrant that. I also thought it would make a better example from first-principles.*
C# Code:
/// <summary>
/// Calculate the scaling required to fit a rectangle into a rotation of that same rectangle
/// </summary>
/// <param name="rotation">Rotation in degrees</param>
/// <param name="pixelWidth">Width in pixels</param>
/// <param name="pixelHeight">Height in pixels</param>
/// <returns>A scaling value between 1 and 0</returns>
/// <remarks>Released to the public domain 2011 - David Johnston (HiTech Magic Ltd)</remarks>
private double CalculateConstraintScale(double rotation, int pixelWidth, int pixelHeight)
{
// Convert angle to radians for the math lib
double rotationRadians = rotation * PiDiv180;
// Centre is half the width and height
double width = pixelWidth / 2.0;
double height = pixelHeight / 2.0;
double radius = Math.Sqrt(width * width + height * height);
// Convert BR corner into polar coordinates
double angle = Math.Atan(height / width);
// Now create the matching BL corner in polar coordinates
double angle2 = Math.Atan(height / -width);
// Apply the rotation to the points
angle += rotationRadians;
angle2 += rotationRadians;
// Convert back to rectangular coordinate
double x = Math.Abs(radius * Math.Cos(angle));
double y = Math.Abs(radius * Math.Sin(angle));
double x2 = Math.Abs(radius * Math.Cos(angle2));
double y2 = Math.Abs(radius * Math.Sin(angle2));
// Find the largest extents in X & Y
x = Math.Max(x, x2);
y = Math.Max(y, y2);
// Find the largest change (pixel, not ratio)
double deltaX = x - width;
double deltaY = y - height;
// Return the ratio that will bring the largest change into the region
return (deltaX > deltaY) ? width / x : height / y;
}
Example of use:
private WriteableBitmap GenerateConstrainedBitmap(BitmapImage sourceImage, int pixelWidth, int pixelHeight, double rotation)
{
double scale = CalculateConstraintScale(rotation, pixelWidth, pixelHeight);
// Create a transform to render the image rotated and scaled
var transform = new TransformGroup();
var rt = new RotateTransform()
{
Angle = rotation,
CenterX = (pixelWidth / 2.0),
CenterY = (pixelHeight / 2.0)
};
transform.Children.Add(rt);
var st = new ScaleTransform()
{
ScaleX = scale,
ScaleY = scale,
CenterX = (pixelWidth / 2.0),
CenterY = (pixelHeight / 2.0)
};
transform.Children.Add(st);
// Resize to specified target size
var tempImage = new Image()
{
Stretch = Stretch.Fill,
Width = pixelWidth,
Height = pixelHeight,
Source = sourceImage,
};
tempImage.UpdateLayout();
// Render to a writeable bitmap
var writeableBitmap = new WriteableBitmap(pixelWidth, pixelHeight);
writeableBitmap.Render(tempImage, transform);
writeableBitmap.Invalidate();
return writeableBitmap;
}
I released a Test-bed of the code on my website so you can try it for real - click to try it
P.S. Yes this is my answer from another question, duplicated exactly, but the question does require the same answer as that one to be complete.