What is the right way to manage image assets for J2ME in NetBeans - netbeans

I'm using NetBeans to develop a J2ME app that runs across many different devices. The app uses a lot of different image assets. Since the devices have different screen sizes, this means that I need to compile multiple binaries, each with different asset sizes.
So far, I've been using a manual process to control the assets. I have a directory consisting of a bunch of subdirectories, each corresponding to assets needed for a particular class of device. For example, I have one directory "320_240", that has assets sized for a 320x240 screen, and another "480_360", that has assets sized for a 480x360 screen. The files names are exactly the same as is the code that loads them. Before I compile, I just copy the proper files into the default package (under src).
This can obviously be improved. I already have different project configurations representing the different screen sizes, so I'd like to make the assets switch automatically, too. As a relative novice for NetBeans, I'm not sure what the best way to do this is.
FWIW, here's the best I've come up with yet:
Create asset. packages under src, where LABEL corresponds to the device class (e.g. "320_240", "480_360")
Put the images for each class into the proper src/asset/ directory
Create a static final String assetDir that gets set to "/asset//" according to the currently selected project config
Load the images using Image.creatImage(assetDir + "image.png")
For each configuration, only include the necessary asset directory in Project->Build->Sources Filtering (I think this is necessary to avoid storing the unused images in the compiled app, correct?)
This still feels a bit hokey, though. This has to be a common problem. Does anyone have a better solution?
Thanks!

If you are using lot of images, then the size of jar file will be increased. You can't install that jar in some low-end devices.
Just use one image and resize the image according to screen width and screen height.
To resize the image, use the below method.
public Image resizeImage(Image src, int screenHeight, int screenWidth) {
int srcWidth = src.getWidth();
int srcHeight = src.getHeight();
Image tmp = Image.createImage(screenWidth, srcHeight);
Graphics g = tmp.getGraphics();
int ratio = (srcWidth << 16) / screenWidth;
int pos = ratio / 2;
//Horizontal Resize
for (int index = 0; index < screenWidth; index++) {
g.setClip(index, 0, 1, srcHeight);
g.drawImage(src, index - (pos >> 16), 0);
pos += ratio;
}
Image resizedImage = Image.createImage(screenWidth, screenHeight);
g = resizedImage.getGraphics();
ratio = (srcHeight << 16) / screenHeight;
pos = ratio / 2;
//Vertical resize
for (int index = 0; index < screenHeight; index++) {
g.setClip(0, index, screenWidth, 1);
g.drawImage(tmp, 0, index - (pos >> 16));
pos += ratio;
}
return resizedImage;
}

Related

Ag-grid "Size to Fit" on desktop and "Auto-Size" on mobile

I need ag-grid to be responsive on all devices. When I tried this.gridApi.sizeColumnsToFit() It looks nice on desktop, but in mobile screen column width gets zero
as shown in this image.
When I give this.gridColumnApi.autoSizeColumns(allColumnIds, false); it leaves a blank space if there are less number of columns like shown in this image.
Is there a way to autoFit in desktop and autoSize in smaller screens?
you can call them after another. I'd suggest to first call the autoSizeColumns.
Afterwards you calculate the actual tableWidth with something like
const tableWidth = grid.columnApi.getAllColumns()
.reduce((i, current) => i += current.getActualWidth(), 0);
and then you calculate the actual container width
const {left, right} = grid.api.getHorizontalPixelRange();
const containerWidth = right - left;
and only if the tableWidth is smaller than the container width you call `sizeColumnsToFit``
if (tableWidth < containerWidth) {
grid.api.sizeColumnsToFit();
}

How to get depth images from the camera in pyBullet

In pyBullet, I have struggled a bit with generating a dataset. What I want to achieve is to get pictures of what the camera is seeing: img = p.getCameraImage(224, 224, renderer=p.ER_BULLET_HARDWARE_OPENGL)
Basically: to get the images that are seen in Synthetic Camera RGB data and Synthetic Camera Depth Data (especially this one), which are the camera windows you can see in the following picture on the left.
p.resetDebugVisualizerCamera(cameraDistance=0.5, cameraYaw=yaw, cameraPitch=pitch, cameraTargetPosition=[center_x, center_y, 0.785])
img = p.getCameraImage(224, 224, renderer=p.ER_BULLET_HARDWARE_OPENGL)
rgbBuffer = img[2]
depthBuffer = img[3]
list_of_rgbs.append(rgbBuffer)
list_of_depths.append(depthBuffer)
rgbim = Image.fromarray(rgbBuffer)
depim = Image.fromarray(depthBuffer)
rgbim.save('test_img/rgbtest'+str(counter)+'.jpg')
depim.save('test_img/depth'+str(counter)+'.tiff')
counter += 1
I already run the following, so I don't know if it is related to the settings. p.configureDebugVisualizer(p.COV_ENABLE_DEPTH_BUFFER_PREVIEW, 1)
I have tried several methods because the depth part is complicated. I don't understand if it needs to be treated separately because of the pixel color information or if I need to work with the project matrixes and view matrixes.
I need to save it as a .tiff because I get some cannot save F to png errors. I tried playing a bit with the bit information but acomplished nothing. In case you asked,
# depthBuffer[depthBuffer > 65535] = 65535
# im_uint16 = np.round(depthBuffer).astype(np.uint16)
# depthBuffer = im_uint16
The following is an example of the the .tiff image
And to end, just to remark that these depth images keep changing (looking at all of them, then to the RGB and passing again to the depth images, shows different images regardless of being the same image. I have never ever seen something like this before.
I thought "I managed to fix this some time ago, might as well post the answer found".
The data structure of img has to be taken into account!
img = p.getCameraImage(224, 224, shadow = False, renderer=p.ER_BULLET_HARDWARE_OPENGL)
rgb_opengl = (np.reshape(img[2], (IMG_SIZE, IMG_SIZE, 4)))
depth_buffer_opengl = np.reshape(img[3], [IMG_SIZE, IMG_SIZE])
depth_opengl = far * near / (far - (far - near) * depth_buffer_opengl)
seg_opengl = np.reshape(img[4], [IMG_SIZE, IMG_SIZE]) * 1. / 255.
rgbim = Image.fromarray(rgb_opengl)
rgbim_no_alpha = rgbim.convert('RGB')
rgbim_no_alpha.save('dataset/'+obj_name+'/'+ obj_name +'_rgb_'+str(counter)+'.jpg')
# plt.imshow(depth_buffer_opengl)
plt.imsave('dataset/'+obj_name+'/'+ obj_name+'_depth_'+str(counter)+'.jpg', depth_buffer_opengl)
# plt.show()
Final Images:

How to open an image with annotations by script

How do I open an (dm4) image with annotations in a script in dm-script?
When a dm4 image has annotations (e.g. a scale bar or some text), this is displayed when I open the image via the menu (Ctrl + O). But when I open the same file in a script by openImage() they do not show up as shown below.
On the left there is the image opened via the menu, on the right is the exact same image opened by openImage(). It is missing the annotations.
The following example shows the same thing. The code adds text to an image, saves it and opens it again. The opened image does not show the annotations just as the images above:
String path = GetApplicationDirectory("current", 0);
path = PathConcatenate(path, "temp.dm4");
// get the current image
image img;
img.getFrontImage();
ImageDisplay display = img.ImageGetImageDisplay(0);
// add some test annotations
number height = img.ImageGetDimensionSize(1);
number padding = height / 100;
number font_size = height/10;
for(number y = padding; y + font_size + padding < height; y += font_size + padding){
Component annotation = NewTextAnnotation(padding, y, "Test", font_size);
annotation.componentSetForegroundColor(255, 255, 255);
display.ComponentAddChildAtEnd(annotation);
}
// save the current image
img.saveImage(path);
// show the saved image
image img2 = openImage(path);
img2.showImage();
You have a mistake in the second to last line.
By using = instead of := you are copying (the values only) from the opened image into a new image. You want to do
image img2 := openImage(path)
This is a rather typical mistake made when being new to scripting, because this is a "specialty" of the scripting language not found in other languages. It comes about because scripting aims to enable very simple scripts like Z = log(A) where new images (here Z) are created on-the-fly from processing existing images (here A).
So there needs to be a different operator when one wants to assign an image to a variable.
For further details, see the F1 help documentation here:
The same logic / source of bugs concerns the use of := instead of = when "finding" images, "creating new images" and cloning images (with meta data).
Note the differences when trying both:
image a := RealImage("Test",4,100,100)
ShowImage(a)
image b = RealImage("Test",4,100,100)
ShowImage(b)
and
image a := GetFrontImage()
a = 0
image b = GetFrontImage()
b = 0
and
image src := GetFrontImage()
image a := ImageClone( src )
showImage(a)
image b := ImageClone( src )
showImage(b)

Drag and drop with pinch zoom doesn't work as expected

In the zoomed mode for pinch-zoom the drag doesn't align properly with the mouse pointer.
I've detailed the problem here:https://stackblitz.com/edit/angular-t7hwqg
I expect the drag to work same way irrespective of the zoom.
I saw in version 8 of angular material they have added #Input('cdkDragConstrainPosition')
constrainPosition: (point: Point, dragRef: DragRef) => Point, which will solve my problem as in the zoomed mode I can write a custom logic to map the drag properly with pointer, but I can't upgrade to version 8 as there are other parts of the application with version 7.
So if someone can suggest what can be done? Either somehow the drag can be modified and take into account the current amount of zoom, or if I can take 'cdkDragConstrainPosition' from version 8 of material and integrate into my current packages.
I had to manually calculate the updated coordinates something like this:
Here imageHeight is the width/height of the DOM element and height is the actual image height that was loaded into the DOM element.
item is the DOM element to be moved around.
this.zoomFactorY = this.imageHeight / this.height;
this.zoomFactorX = this.imageWidth / this.width;
// to be called at every position update
const curTransform = this.item.nativeElement.style.transform.substring(12,
this.item.nativeElement.style.transform.length - 1).split(',');
const leftChange = parseFloat(curTransform[0]);
const topChange = parseFloat(curTransform[1]);
and then update the DOM item's location:
item.location.left = Math.trunc(
item.location.left + leftChange * (1 / this.zoomFactorX)
);
item.location.top = Math.trunc(
item.location.top + topChange * (1 / this.zoomFactorY)
);

iOS draw the table in pdf document

I will create the pdf from the contents of UIViewController.
When UIViewController has a table region(the same as Excel), I didn't find the method for drawing an table in pdf document.
Does anyone know to solve this problem? Please help me.
There is no easy method of creating a table I know of if you're using a Quartz graphics context (CGContextRef type). I was able to create a table programmatically by drawing lines on the PDF in nested for loops, and by paying careful attention to spacing to make it look right.
Psuedo-code:
for (int i=0; i < numberOfRows; i++)
{
// display each row
// Draw row line
CGPoint horizontalRowDivider[2] = {CGPointMake(x_startPoint, y_startPoint + (i * row_width)), CGPointMake(x_endPoint, y_endPoint + (i * row_width))};
CGContextStrokeLineSegments(pdfContext, newlineItemDivider, 2);
for(int j = 0; j < numberOfColumns; j++)
{
//Draw each column cell
const char *desc_text = "Table value"
CGContextShowTextAtPoint (pdfContext, x_cellDataLoc, y_cellDataLoc, desc_text, strlen(desc_text));
CGPoint verticalLineCellDivider[2] = {CGPointMake(x_startPoint + (j * col_width), y_startPoint), CGPointMake(x_endPoint + (j * col_width), y_endPoint)};
CGContextStrokeLineSegments(pdfContext, verticalLineCellDivider, 2);
}
}
This is a rough example of the kind of logic you might use to draw a table. You'll probably want a rectangle, or a border, around your table to make it look right, among any other kinds of tweaks to make it how you want. You can find the list of methods on how to do that and more through the below link. I know this probably isn't what you had in mind, but I hope this gives you some direction to take if you were totally stuck. Good luck!
You can find the full library of functions available for drawing PDFs in Apple's documentation: http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CGContext/Reference/reference.html