Image scaling and position problem

[Succeeding Lights Software]

Hello I have 4 separate images to display and I made the scaling work (without dpi included which I probly should do but later) but then positions of images are different on different screen sizes.. Im not sure if this is do to how I have the images setup, but the text and staus bars scale down perfect, is there a way to do this with the images? Here is some code and screenshots.. Looks fine on tablet, very off on phone even after trying some methods on the player and enemy character.. Should I just draw it all on one layer? But then how would I scale that to fit to the edge of DisplayWidth and keep the height scaled accordingly so fits the screen without distortion..? Is the a way to anchor things to the corner and move it from there? Please help thank you !

 //Create the main layout
    //Create a layout with objects vertically centered.  
lay = app.CreateLayout( "Absolute", "VCenter,FillXY" );
app.AddLayout( lay );
app.PreventScreenLock( true );
app.SetOrientation( "Portrait" );
lay.SetBackColor( "#ffffff" );

behindltrs = app.CreateImage( "Img/wood background 2.png", "box", "alias");
  behindltrs.SetScale((dspWidth/96)*.19, (dspWidth/96)*.1625);
behindltrs.SetPosition((dspWidth/(dspWidth/2))*.09, (dspHeight/(dspHeight/2))*.272);
//behindltrs.SetScale( 1.565, 1.35);
  //behindltrs.SetPosition( .18, .533 );
  lay.AddChild( behindltrs );

[Succeeding Lights Software]

All images and buttons, text and hp/ exp bars are on same layer

[Alan Hendry]

HI,

Instead of changing scale, 

you could try specifying the width and height (0 to 1, 1 for whole screen; or add option "px" for pixels) on the create/add
img = app.CreateImage( file, width, height, options, pxw, pxh ) 
(or specify width, with height -1 or null and let DS keep the image in proportion; or specify height ...) 

Or use SetSize (accepts 3rd parameter to choose option px for pixels or other)
https://symdstools.github.io/Docs/docs/app/CreateImage.htm

Regards, ah

[Succeeding Lights Software]

Hello thank you for answering, ive made three layers the gui and buttons is absolute, the creatures are on a horrizontal, and the backgrounds are on a vertical layout.

The tablets display width& height is 800*1280

Everythings tailored to the tablet im testing ons screen the background and wooden board peice are 800*640

Characters are 128*128

Works perfect now as far as positioning, but for scaling it is set at using setSize(1, 1) but it remains same size when put on smaller phone screen?

Is the px option how thats done? I dont understand how the automatic scaling works.. Thank you !

[Jesse James]

Could I essentially change to px option and scale to display width and than display height/2 ...? Maybe even do the same with the creatures according to their size

On Monday, October 17, 2022 at 11:04:13 AM UTC hendr...@gmail.com wrote:

[Alan Hendry]

HI,

If you specify pixels (px) then you get precise control of the number of dots on the screen, but it won't scale to larger or smaller screens. If you specify a number 0 to 1 without px/etc then it will scale to fit the screen (for example 0.5 for half the screen). If you specify width 0 to 1 with height -1 it will keep proportions, or width -1 height 0 to 1. Some controls have margins and padding that you may want to alter. Because screens aren't square you might want to look at SetOrientation or cfg.Portrait or cfg.Landscape.

Regards, ah

[Jesse James]

I've set it up so that the scaling works pretty good now but the images positions stay the same distance on my phone as it was on my tablet? For example the background and the wooden board peices have a huge gap in middle now but the image displays as the right scale. There is no use of SetPosition anymore and even with a vertical layout woth one image on it it is lower on the screen now? But shouldnt it be in the middle? It is the right size now though just weird position now for some reason...

dspWidth = app.GetDisplayWidth();
dspHeight = app.GetDisplayHeight();
  if (dspWidth >= 1000 && dspHeight >= 2000){sclW = 1.5; sclH = 1.5;}
  if (dspWidth >= 700 && dspWidth < 1000 && dspHeight >= 1180 && dspHeight < 2000){sclW = 1; sclH = 1;}
  if (dspWidth >= 200 && dspWidth < 700 && dspHeight >= 280 && dspHeight < 1180){sclW = .5; sclH = .5;}
  if (dspWidth < 300 && dspHeight < 380){sclW = .25; sclH = .25;}

[Jesse James]

Ive tried setting margins but doesnt even change it at all no matter what setting..

On Thursday, October 20, 2022 at 11:27:22 AM UTC hendr...@gmail.com wrote:

[Jesse James]

Thank you for your help! Ive used negative margins and adjusted slightly according to scale

On Thursday, October 20, 2022 at 11:27:22 AM UTC hendr...@gmail.com wrote:

[Alan Hendry]

Hi,

There's shortcuts DH() for app.GetDisplayHeight andf DW() for width https://symdstools.github.io/Docs/docs/intro/04CodingFeatures.htm

Also app.GetScreenWidth() https://symdstools.github.io/Docs/docs/app/GetScreenWidth.htm

app.GetScreenHeight() https://symdstools.github.io/Docs/docs/app/GetScreenHeight.htm

(the latter 2 accept option "Real" which includes softkeys in the value).
I seem to recall that the "slot" can make a difference 

(on some devices the display extends to the left and right of the camera, with the camera being the "slot")

Regards, ah

[Jesse James]

Thank you I just saved the width and height as variables in, function OnStart, it is working great now! Having trouble with publishing aab though now made a separate topic if maybe you could help as you know alot on the subject!

https://groups.google.com/g/androidscript/c/JSqE2dSm47Q

[Jesse James]

Hey my makeshift scaling sort of works really good depending on what phone its used on... Most phones display properly as these scalings are to do with the majority resolutions but some phones it squishes the image upwards for some reason..? Thank you for your help so far! Im stuck again though haha

dspWidth = app.GetDisplayWidth();
dspHeight = app.GetDisplayHeight();

  if (dspWidth >= 1000 && dspHeight >= 2000){sclW = 1.5; sclH = .15;}
  if (dspWidth >= 700 && dspWidth < 1000 && dspHeight >= 1180 && dspHeight < 2000){sclW = 1; sclH = 1; marg =0;}
  if (dspWidth >= 200 && dspWidth < 700 && dspHeight >= 280 && dspHeight < 1180){sclW = .6; sclH = .6; marg =-.15;}
  if (dspWidth < 300 && dspHeight < 380){sclW = .25; sclH = .25; marg = -.15}

//here is example of scaling variables applied to an image,all the images scaling are the same

tents.SetScale(sclW,sclH);

here is what normally looks like

[Jesse James]

Also side question would I just be able to turn everything into buttons for scaling to work properly?

On Saturday, October 22, 2022 at 5:22:21 PM UTC-5 hendr...@gmail.com wrote:

[Dave]

I think you have a typo in this line - 

 if (dspWidth >= 1000 && dspHeight >= 2000){sclW = 1.5; sclH = .15;}

You are setting the horizontal scaling to 0.15 when I guess it should be 1.5 so that the image is square right?

Also, you have no margin value for that line.

[Dave]

Note: I would not normally recommend using img.SetScale() to size your images as it's hard to correlate scale and fractional screen dimensions.

You should set the height or width of your image when creating it and if you set one of the dimensions to -1, then it will have the correct aspect ratio.  Since it's more critical that you get the vertical height right, I suggest you leave out the horizontal dimension like this - 

img = app.CreateImage( "Img/stars.png", -1, 0.2, "alias" )

[Jesse James]

Hey awesome thank you Dave thanks guys

[Jesse James]

Hey Dave so I followed your advice and changed everything to have scaling in its creation and havent tested scaling on multiple devices yet    but when I tried to put 

app.CreateImage( "Img/creatures/jelliton_128x128.png",  "creature", -.35, .35, "alias");

which works perfectly fine when the -.35 is positive but not when negative, I tried changing the margins to move it over but it appears that the image doesnt show up at all ? I cant seem to figure this out should I apply a transformation matrix? Will it still retain its scaling if I do So? Thank you for the help again !

On Saturday, December 17, 2022 at 5:46:54 AM UTC-6 Dave wrote:

[Dave]

You need to keep the width value at -1 not -.35 then DS will automatically set the width for you

[Jesse James]

I tried 

app.CreateImage( "Img/creatures/bespike_128x128.png",  -1, .35, "creature", "alias");

and without tag(s)- also tried removing "alias" tag too

app.CreateImage( "Img/creatures/bespike_128x128.png",  -1, .35, "alias");

app.CreateImage( "Img/creatures/bespike_128x128.png",  -1, -1, "alias");

-.35, null,"creature", "alias");

-with just one attribute changed

-1, "creature", "alias");

-1, -.35,"creature", "alias"); - this one made the image dissapear, I tried moving it around and nothing

none of these except bottom one did anything at all

still no luck, the SetScale is the only thing that flips it around is there a way I could still use that and keep proper fractal scale maybe just flip it?

[Jesse James]

would it be just better to have the images maually scaled to correct size than leave scaling attributes blank..? but then how would I flip it I have 100 images I dont want to have another 100 flipped horrizontally

On Wednesday, February 22, 2023 at 9:05:38 AM UTC-6 Dave wrote:

[Right2TheV0id]

As Alan told you in the very begining of this thread, the Image control is created this way:

img = app.CreateImage( file, width, height, options, pxw, pxh ) 

The first parameter is the path to the file.

The second one is the horizontal size (or "scale" as you sometimes call it) representing a fraction of the screen's width.

The third one is the vertical size representing a fraction of the screen's height.

The fourth parameter is a string containing all the options that you wan to apply to the Image object (as a comma separated list)

The last two (pxw, pxh) are for performance concern and explained here: https://groups.google.com/g/androidscript/c/192ai5V5R8w/m/ySXrcfv_AgAJ

So when you do this:

app.CreateImage( "Img/creatures/bespike_128x128.png",  -1, .35, "creature", "alias");

file is "Img/creatures/bespike_128x128.png" (ok)

width is -1 (ok)

height is .35 (ok)

option is "creature" (not ok, "creature" is not a valid option")

pxw is "alias" (not ok, "alias" is an option)

What was your goal with the "creature" parameter/option?

[Jesse James]

I thought there was a tagging option for some reason idunno how I got that idea.. Okay I understand what you are saying now I removed "creature" tag but even when I remove both "creature" and "alias" it and change the horizontal option to -1 it doesnt flip the image but when I set scale it does,  so I think using scale wont work for fractional screen dimensions, but does using scale for just -1 to flip it does that also affect fractional screen dimensions? I cant test untill a few weeks from now otherwise would just test it

Here is what I have but doesnt flip image

playerMon = app.CreateImage( "Img/creatures/jelliton_128x128.png",  -1, .35, "alias");

[Right2TheV0id]

To mirror (or "flip") an image you have effectively to use img.SetScale(x, y) with negative values:

https://groups.google.com/g/androidscript/c/NvFNcYieyZ8/m/oHtmkharKAAJ

Following Dave's recommendation it is better to avoid resizing the image using SetScale, so you should use it only with 1 and -1.

Here's a demo:

function OnStart()
{
    lay = app.CreateLayout( "Linear", "VCenter,FillXY" );

    layH1 = app.CreateLayout( "Linear", "Horizontal" );
   
        img1 = app.CreateImage( "/Sys/Img/Hello.png", 0.4 );
        img1.SetScale( 1, 1 ); // No effect, just for reference
        layH1.AddChild( img1 );
       
        img2 = app.CreateImage( "/Sys/Img/Hello.png", 0.4 );
        img2.SetScale( -1, 1 ); // Mirror horizontally
        layH1.AddChild( img2 );
   
    lay.AddChild( layH1 );
   
    layH2 = app.CreateLayout( "Linear", "Horizontal" );
   
        img3 = app.CreateImage( "/Sys/Img/Hello.png", 0.4 );
        img3.SetScale( 1, -1 ); // Mirror vertically
        layH2.AddChild( img3 );
       
        img4 = app.CreateImage( "/Sys/Img/Hello.png", 0.4 );
        img4.SetScale( -1, -1 ); // Mirror horizontally and vertically
        layH2.AddChild( img4 );
   
    lay.AddChild( layH2 );

    app.AddLayout( lay );
}

[Jesse James]

Okay awesome thank you Right2TheV0id!