Border Aspect-Ratio

Could someone please explain to me the logic for how borders are dealt with? In particular, is there any way to override the default value? I’ve created borders that are designed exactly for my app, but then SAB distorts them.

This is a sample image because I can’t show the actual app.

The original border file had the circles as true circles.
Because of the aspect ratio of the original border file in this sample, I’d either expect all the circles to be a little short or I would expect the top and bottom rows to be circles and all the middle area to be extra short.
But the fact that the top and bottom of this border are being stretched taller, not the same or shorter, makes absolutely no sense to me. Is this a bug, or is it intentional for some reason I don’t understand?

I’m not an expert but I have used this feature before. I think the challenge with borders is that there is just one image file for the border that has to work on all sorts of screen sizes, so it must be able to stretch and compress to adapt itself. I think that the border is broken up into 8 smaller image files:

  1. Top left corner
  2. Top middle
  3. Top right corner
  4. Right might
  5. Etc…

I’m not sure if the middle pieces get “longer” or repeat themselves. I think they just stretch or compress.

Did you check the documentation? I think it talks about this some. (I’m not in front of my computer right now.)

The documentation says:

Scripture App Builder takes the border image file you provide and finds the blank
rectangle area inside of it. It then cuts up the remaining image into 8 pieces: top-left
corner, top, top-right corner, left, right, bottom-left corner, bottom and bottom-right
corner.
When the border is displayed on the app screen, the corner images are scaled according
to the screen size, and the side, top and bottom images are scaled and stretched to fill
the space between the corners. In this way, the border adapts itself to display with
different screen sizes. This technique allows the app to display the border in full screen
view, or when there is a toolbar displaying at the bottom.

But other than telling me it’s broken into 8 pieces (which I had also discovered by searching my system for the intermediate build files), it doesn’t really give me any of the logic. In particular, it gives absolutely no clue why, in my picture above, the top and bottom are stretched but the sides are shrunk. I can’t think of any possible situation where that would make sense.

If SAB somehow, magically, looked at the sides, found the pattern (there are 9 identical circles), said "I can build the sides out of multiple copies of one of these circles, and then created a side that had 7 or 10 circles depending on the aspect ratio… that would be amazing. But it doesn’t do that, and honestly I wouldn’t expect it to.

IMO SAB should do one of two things, neither of which it currently does:

  1. Trust the app builder to know what he’s doing, and not try to tear the border apart (just rotate it 90 degrees for landscape), or
  2. Allow the app builder to define all eight pieces independently, so that he can state what is a “corner” and what is “one side piece”, and probably also be able to explicitly state the desired border width. Then I would expect it to be fairly simply to build borders with 5, 6, 20, or whatever number of pieces were needed to make stretching/shrinking as small as possible.

Since no one has defended the current logic, I’m going to report this as a bug.

Hmmm. Well, I would imagine the logic was that it was easiest to just require the user to submit one image, rather than 8 pieces. With that one image, it seems that SAB has prioritized keeping the graphic information in each piece, stretching it or compressing it to fit any phone aspect ratio. In your example with the circles, it looks like your original image (with perfect circles) was too wide for the phone, so the top and bottom sections were compressed, making the circles taller and thinner. However, your original image was also too tall for the phone, so the side pieces had to be compressed down, squishing the circles. SAB didn’t eliminate any circles (if it were even possible for it to detect there were circles there). It assumed the whole section was important and so tried to adjust it to fill the available space.
If you envision the screen being a landscape tablet instead, the upper and lower middle pieces would have had very wide, squished circles and the side pieces might be squished even more. So I guess it makes sense to me. The challenge is making a border that is graphically flexible enough to withstand the stretching or compressing–not dependent on even, geometric shapes but on the general design.

it looks like your original image (with perfect circles) was too wide for the phone, … However, your original image was also too tall for the phone

I think you’re saying that SAB looks at one piece (the top/bottom) and makes a skewing decision (shrink horizontally), then it looks at a different piece (the sides) and makes a different decision (shrink vertically). If that’s the case, then I think that’s where the bug is; SAB should make the same skewing decisions on all pieces. (If we had access to the source code, we could verify that’s what’s happening. hint hint).

After looking over things again, I decided to test with a new border which has close as possible to the exact pixels as is being displayed on my phone (1440x1080). So theoretically there shouldn’t be any shrink/stretch on this image at all. And yet here’s what I get!


As far as I can tell there is no aspect ratio or skewing reason for breaking the border up into 8 pieces. I think that’s entirely done because of the way SAB builds the page for the html. (Of course, reading the source code might give us some idea if the 8 pieces are necessary for displaying the output.) But in terms of making the border fit all the different given phones, I think treating the border as a single unit always gives the best results.


Landscape is different–it’s not strictly built out of the pieces, but out of rotation–once the aspect ratio goes from <larger:smaller> to <smaller:larger>, the original image is rotated 90 degrees (I think SAB does this correctly, and that’s not where I have an issue with what’s happening).

Regarding having the user give the individual pieces of a border, I’ve written up a feature request here: Advanced Borders [feature request]