Skip to main content
Solved

Images on report look awful

  • 20 December 2022
  • 20 replies
  • 601 views

Hello.

We have a customer that would like to have a fancier Report, but we face some problems.
We got the attached Texture from them for the Header, i added it as embedded file to the report and used a picture box (tried panel first since i wanted picture over picture, but that ended up the same..)
 


Now we either have 2 results:

As JPG) The Image ends up getting cut-off instead of displaying the full size (which it should, since the image box is exactly as large as the image?) or two 


As PNG) 


Any idea? Fix? Anything?

​​​​​​​

20 replies

C
Rank
Userlevel 7
Badge +9

Hi @jwestermann17 Can you please attach the image files jpg and png. Also, please let us know the report you are trying to change.

Thanks

Chandra

Chandra M
J
Rank
Userlevel 3
Badge

Hi @jwestermann17 Can you please attach the image files jpg and png. Also, please let us know the report you are trying to change.

Thanks

Chandra



Hi @ChandrasekharM 

I am trying to modify the SO641010 - Sales Order Report.
Please see this imgur link for the PNG and JPG Images: https://imgur.com/a/vSVQEIp

It is 21cm Wide and 3,11cm high.
My initial plan was to use it in a Panel so that i can add additional pictures or text above, but this ends up in a bad quality for whatever reason and with the problem above.

Greetings

​​​​​​​

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

I see this as a 595 px by 88 px file. This is really small for an image and will absolutely look terrible in a document as it will need to stretch to meet the edges of the document

Ask them to provide a 2,600 px by 385 px file. This will fit a letter-sized document.

J
Rank
Userlevel 3
Badge

Hey @brendan91 

We got several smaller images from them like these. All small but according to paint.net they got the correct size for A4 for the size they need to be. According to you we would need to upscale all images x4, right? So this one would go from 121x21 to 484x84 px?


That way i fear i can not have multiple images on top of each other, right?
My initial plan was to create multiple panels on top of each other to be able to create Textboxes above image elements - like here.

But providing the embedded image as “BackImage” for the Panel won’t work since panels won’t allow for scaling of the image - unlike a picture box does with “Scale, Fit, Normal...”

 

 

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

@jwestermann17  I resized the image (attached below) to be larger, though not great resolution, I pulled it into a report, and it looked OK for me. 

 

I did not try it as a back image. I will look into that.

2 Attachments
J
Rank
Userlevel 3
Badge

@jwestermann17  I resized the image (attached below) to be larger, though not great resolution, I pulled it into a report, and it looked OK for me. 

 

I did not try it as a back image. I will into that.



Thanks i tried that aswell and it seemed to displaying better.
For plain images resizing them to be way bigger (4x than what we have now) seems to be okay, maybe even 5x (the larger the better i guess?) - but for panels not. But this probably should be done by the company graphic designer and not by us to not pixelate it.

The Back Image part seems to not work with such upscaled images unfortunately. I am trying around with it and different sizes but don’t get any acceptable result.

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

Okay I did some testing and I think you can make this work. You are right, the current report designer ignores the details in images after a certain number of pixels if used as a background image.

After some testing, it looks like 714 x 900 px (rough analyses) works for a report background image on a letter-sized document in report designer. You may need to adjust it a little.

I would plan on making a report level background image

Here is what I would do...

  1. Send the graphic designer an image copy of the report (.jpg)
  2. tell them to work in affinity or adobe graphic design software and make a 714 by 900 px document
  3. have them fit the report image into that space. 
  4. Overlay these image files where they need to go on top of that report image 
  5. Delete the report image 
  6. export a 714 x 900 px file that looks something like second image below. The one with a lot of white space.
  7. import that new file into report designer as report level background image. It will look like the first image
4 Attachments
J
Rank
Userlevel 3
Badge

Hey @brendan91, if i try to click on your attachements Acumatica says image could not be loaded ☹️

 

 

 

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

@jwestermann17 

Sorry about that…  

4 Attachments
brendan91
Rank
Userlevel 5
Badge +1

 

@jwestermann17 

I’m going to create a video showing the process to get a background image to accurately fit background of a report in report designer as I think it will be helpful to the community. In the meantime, I hope the below is helpful and more clear than what I wrote above.

 I found that a 728 px by 971 px file perfectly fit my 8.5 in. by 11 in report with .5 in margins and this is explained below.

In Report Designer, it currently seems to be behaving such a way that it will only accept a certain number of pixels starting from the top left corner of the image. The number of acceptable pixels is probably determined by the document size. Anything beyond the mysterious pixel threshhold will not appear on the report. 

I started out by creating a 2,000px by 1995px ugly yellow grid (attached) knowing that part of this image is going to be cutoff. I then added that grid to my report as a background image and you can see that only part of that image landed in the report. 

I screenshotted the image of the report and overlayed it onto the original grid. 

By resizing the image onto the grid, I was able to get the exact pixel area that showed up in the report. This turned out to be a 728 x 971 pixel image.

I then took that resized image and overlayed some ugly blocks and hearts in the areas of the report where I wanted them to show up. After adding these ugly designs, I removed the image and exported the 728 x 971 pixel file with a white background. The result is below.

The end result after embedding the above image into my report is below. The ugly patterns showed up exactly where I designed them to in the report.

If you need any more help with this, I’m happy to help.

4 Attachments
J
Rank
Userlevel 3
Badge

Hello Brendan,

I spent my morning trying out your idea, and it seemed to work as intended, although I did it a bit differently (more trial and error). Instead of adding the image as the background for the entire report, I added it to the DocumentHeader (the header of the groupDocument) so that it is only visible in the header. This way, I can use a different image on the second page and beyond. For A4 (the standard size in Germany), I found that 800x1132 worked well. We use a picture of this size in the report header to add some fancy borders for the order date or customer address.

Using a “Back-Image” in specific report sections i was able to create another file (800px by 48px) for the header of the detailsection which prints on the invidiual correct spot on every page.


Actually - using this way for other detailsections leads to relatively easy and working tablelines that are able to expand themself! :o


 

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

Wow! That's going to look so good!

I can see why breaking the images up into sections makes sense. The repeating details image is brilliant.

I'm excited to redesign our customer-facing reports now haha

J
Rank
Userlevel 3
Badge

Wow! That's going to look so good!

I can see why breaking the images up into sections makes sense. The repeating details image is brilliant.

I'm excited to redesign our customer-facing reports now haha


Yep! We had a customer using a old panel-styled table-detailsection using multiple panels inside of panels inside of panels... that i have built roughly over a year ago. It looked great but had some huge flaws with moving the footer up and down since panels in detailsections are sometimes a bit funky. But the back-image version seems to work quite good for us. 

Achieved with just this attached to every detail-section + another detailsection with just 1px high with a line that is 1px high for the “spacing” - works flawless and Expands itself like it should. The “image” i used is just the same height my detail-section is and my textboxes are 1px smaller. Works great on multiple-page texts (especially for long “InventoryItem.Body” texts).
 

 

 

 

Thank you very much for your help and input.
I had the idea of using a Back Image for tables since yesterday but feared to use panels since the move the footer up and down sometimes. Would have never came to the idea to just use the back image. Now we are finally able to not totally deny tablelines in our report ^^

Jannik W.
J
Rank
Userlevel 3
Badge

Hey @brendan91,

we have been utilizing the method of putting images in the back for this customizer quite a bit, but we noticed that the images seem to be low-quality on the PDF Prints. Do you have any idea on how to up the Quality? We got these kind of images from the designers from our customer. It’s the correct size for a A4 Document without borders. (Attached) - yet on the actual report print it looks a bit… fizzy? Obviously it is not really noticeable at ~90% zoom but the further you go the more pixels you find. 
 


As far as i know the report designer does not support vector graphics (svg) which is a bummer, but i am wondering if there is another way to get more quality out of it.

1 Attachment
Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

Yes, I've run into the same issue around pixelization in the pdfs. Yes, unfortunately we cant use svg files as back images and we can't scale down larger images, so I don't think we can do anything about it right now. 

For best image possible, i would say use pngs over jpegs, but beyond that I think we are SOL. 

We could open up a feature request that would allow us to "shrink to fit" high res images as back images in report designer. I don't know what limitations might be there, but it sure would be helpful! 

 

J
Rank
Userlevel 3
Badge

Hi @brendan91,

Hmm… But this does not seem to be a “short-solution” but rather a solution in like ~1-2 Years i’d guess, as this feature would need to have some upvotes. I think if we had the option to upload svg files (within the system and within the Report Designer) to use vector graphics this would be ideal. As vector graphics are always sharp, no matter how much you zoom in or out. 

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

Vector graphics would be helpful for sure with what you have shown in the pdf. I’m working on building a product catalog through Acumatica which uses a lot of photos, so I would like to see both options.

I’ll create a feature request tomorrow if you don’t get to it.

J
Rank
Userlevel 3
Badge

@brendan91 Hmmm yeah sounds valid.

Feel free to do so and link it here. I am sure it is better if you write it anyways, since english is not my native language and therefore i am not the best at explaining.

Jannik W.
J
Rank
Userlevel 3
Badge

Hey @brendan91, did u create mentioned Feature Request?

Thank you!

Jannik W.
brendan91
Rank
Userlevel 5
Badge +1

@jwestermann17 

Sorry about delay...

 Scale Back Images in Report Designer to Area | Community (acumatica.com)

Reply


Terms & ConditionsCookie settings