[solved] different coordinates for snap for different screen aspects - how to code it?

[verion]

I'm working on layout that will adapt to screen ratio (responsive) for 16:9 and 16:10 aspects.

Everything is almost finished except that annoying skew/pinch that is somehow related to screen height!
I think the best way to deal with that is to use liquid8d solution - settings table http://forum.attractmode.org/index.php?topic=273.msg1818#msg1818

but... I don't know how to code it properly

Please help me out put it all together into a working code.


Below you'll find a description of what I want to achieve.





==================================
define diffrent coordinate sets for different aspects
==================================

IF (condition #1)

Code: [Select]

fe.layout.width/fe.layout.height < 1.75    //for 16:10 aspect
THEN DEFINE VARIABLES

Code: [Select]

local snap_pos_x = 10;
local snap_pos_y = 10;
local snap_width = 400;
local snap_height = 300;

local snap_skew_y = -8;
local snap_skew_x = 42;
local snap_pinch_y = 27;
local snap_pinch_x = 5;
local snap_rotation = 3;


IF (condition #2)

Code: [Select]

fe.layout.width/fe.layout.height > 1.75    //for 16:9 aspect
THEN DEFINE VARIABLES

Code: [Select]

local snap_pos_x = 8;
local snap_pos_y = 12;
local snap_width = 420;
local snap_height = 320;

local snap_skew_y = -12;
local snap_skew_x = 32;
local snap_pinch_y = 17;
local snap_pinch_x = 3;
local snap_rotation = 6;




==================================
use that variables sets in layout code
==================================

Code: [Select]

local snap = fe.add_image( "snap", snap_pos_x, snap_pos_y, snap_width, snap_height);
snap.skew_y = snap_skew_y;
snap.skew_x = snap_skew_x;
snap.pinch_y = snap_pinch_y;
snap.pinch_x = snap_pinch_x;
snap.rotation = snap_rotation;

[liquid8d]

I've been revisiting this with a layout I'm working on now.. it still needs work before I can release an "aspect" module, but here's the idea I'm working with:

Code: [Select]

local aspect = fe.layout.width / fe.layout.height.tofloat();
switch( aspect )
{
    case 1.77778:
        aspect = "16x9";
        break;
    case 1.33333:
        aspect = "4x3";
        break;
    case 0.75:
        aspect = "3x4";
        break;
}

function Setting( id, name )
{
    if ( aspect in settings && id in settings[aspect] && name in settings[aspect][id] )
    {
        return settings[aspect][id][name];
    }
    return settings["default"][id][name];
}

local settings = {
   "default": {
      object1 = { x = 0, y = 0, width = 100, height = 100 }
   },
   "4x3": {
      object1 = { width = 200, height = 200 }
   }
}

local this_width = Setting( "object1", "width" );


So define all the default values, and define aspect specific values in the settings table. Then anytime you want a setting for an object, you use the Setting( object_id, attr ) function. You will get the values specific to the current resolution, or the default value if that doesn't exist. This way you can define all settings in defaults, and only ones that change for other aspects in that aspects table.

[verion]

Many thanks - just what I needed!

[verion]

I'm affraid that my cut-and-paste coding skills are not enough to make it work
It's not working for me. My code is below:

Code: [Select]

local aspect = fe.layout.width / fe.layout.height.tofloat();
switch( aspect )
{
    case 1.77778:
        aspect = "16x9";
        break;
    case 1.6:
        aspect = "16x10";
        break;
    case 1.33333:
        aspect = "4x3";
        break;
    case 0.75:
        aspect = "3x4";
        break;
}


function Setting( id, name )
{
    if ( aspect in settings && id in settings[aspect] && name in settings[aspect][id] )
    {
        return settings[aspect][id][name];
    }
    return settings["default"][id][name];
}

local settings = {
   "default": {
      cabScreenCoords = { skewY = 42.0, skewY = -8.0, pinchX = 0, pinchY = 29.0, rotate = 0.9 }
   },
   "16x10": {
      cabScreenCoords = { skewY = 62.5, skewY = -12.9, pinchY = 0, pinchY = 40.0, rotate = 1.0 }
   }
}

Code: [Select]

local cabScreen = fe.add_artwork ("snap", flx*0.0615, fly*0.15, flw*0.253, flh*0.221);

cabScreen.skew_x = Setting ( "cabScreenCoords", "skewX" );
cabScreen.skew_y = Setting ( "cabScreenCoords", "skewY" );
cabScreen.pinch_x = Setting ( "cabScreenCoords", "pinchX" );
cabScreen.pinch_y = Setting ( "cabScreenCoords", "pinchY" );
cabScreen.rotation = Setting ( "cabScreenCoords", "rotate" );


[liquid8d]

try using this instead and let me know if you still have issues:

Code: [Select]

local settings = {
   "default": {
      cabScreenCoords = { skewY = 42.0, skewY = -8.0, pinchX = 0, pinchY = 29.0, rotate = 0.9 }
   },
   "16x10": {
      cabScreenCoords = { skewY = 62.5, skewY = -12.9, pinchY = 0, pinchY = 40.0, rotate = 1.0 }
   }
}

local aspect = fe.layout.width / fe.layout.height.tofloat();
local aspect_name = "";
switch( aspect.tostring() )
{
    case "1.77778":
        aspect_name = "16x9";
        break;
    case 1.6:
        aspect_name = "16x10";
        break;
    case "1.33333":
        aspect_name = "4x3";
        break;
    case "0.75":
        aspect_name = "3x4";
        break;
}

function Setting( id, name )
{
    if ( aspect_name in settings && id in settings[aspect_name] && name in settings[aspect_name][id] ) return settings[aspect_name][id][name];
    return settings["default"][id][name];
}



[verion]

Thanks, I'll give it a try right away.

[verion]

No, it is not working.

I've reduced layout just to that snap and layout screenshot at the background for position check.
It would be great if you could check it out.

It looks that snap skew/pinch is not getting any data (zeros) - it's just straight rectangle.
Maybe it is some kind of a stupid mistake from my side - like missing semicolon or something.

[liquid8d]

Code: [Select]

//fe.layout.width = 800;
//fe.layout.height = 600;

fe.layout.width = 1280;
fe.layout.height = 720;

local settings = {
   "default": {
      coords = { x = 0, y = 0, width = 500, height = 30 }
   },
   "4x3": {
  coords = { x = 300, y = 300 }
   }
   "16x9": {
  coords = { x = 300, y = 0 }
   },
   "16x10": {
  coords = { x = 0, y = 300 }
   }
}

local aspect = fe.layout.width / fe.layout.height.tofloat();
local aspect_name = "";
switch( aspect.tostring() )
{
    case "1.77778":
        aspect_name = "16x9";
        break;
    case 1.6:
        aspect_name = "16x10";
        break;
    case "1.33333":
        aspect_name = "4x3";
        break;
    case "0.75":
        aspect_name = "3x4";
        break;
}

function Setting( id, name )
{
    if ( aspect_name in settings && id in settings[aspect_name] && name in settings[aspect_name][id] )
{
::print("\tusing " + aspect_name + " value for " + id + " : " + name + " : " + settings[aspect_name][id][name] + "\n" );
return settings[aspect_name][id][name];
}
::print("\tusing default value for " + id + " : " + name + " : " + settings["default"][id][name] + "\n" );
return settings["default"][id][name];
}

fe.add_text("[Title]", Setting("coords", "x"), Setting("coords", "y"), Setting("coords", "width"), Setting("coords", "height"));

function on_signal( str )
{
    switch( str )
    {
        case "custom1":
            fe.signal("reload");
            break;
    }
    return false;
}

fe.add_signal_handler( this, "on_signal");

This is working for me - I've added print statements so you can see if it is using the aspect values or the default values. You can change the fe.layout.width and fe.layout.height here to get different results. Note with 1.6.2 it looks like there is a glitch if the window isn't focused where the screen isn't getting updated when it reloads, if you are using the custom1 button to reload the layout.

[verion]

strange - it's not working on my side.

I can see only this:

Code: [Select]

fe.add_text("[Title]", Setting("coords", "x"), Setting("coords", "y"), Setting("coords", "width"), Setting("coords", "height"));
but with X and Y set to 0 (zero) reagrdless of screen aspect - tested with 2 different screens 16:9 and 16:10


=========

OK, I just checked what's going on - I'm ALWAYS getting the "default" value regardless of screen aspect

[liquid8d]

are you possibly overwriting the settings variable - can I see your whole layout code with the new code added?

[verion]

I just copy-pasted your code to an empty file. And changed resolution to 1920x1200.

[liquid8d]

Here's updated debug out...

Code: [Select]

//fe.layout.width = 800;
//fe.layout.height = 600;

fe.layout.width = 1280;
fe.layout.height = 720;

local settings = {
   "default": {
      coords = { x = 0, y = 0, width = 500, height = 30 }
   },
   "4x3": {
  coords = { x = 300, y = 300 }
   }
   "16x9": {
  coords = { x = 300, y = 0 }
   },
   "16x10": {
  coords = { x = 0, y = 300 }
   }
}

local aspect = fe.layout.width / fe.layout.height.tofloat();
local aspect_name = "";
switch( aspect.tostring() )
{
    case "1.77778":
        aspect_name = "16x9";
        break;
    case 1.6:
        aspect_name = "16x10";
        break;
    case "1.33333":
        aspect_name = "4x3";
        break;
    case "0.75":
        aspect_name = "3x4";
        break;
}

function Setting( id, name )
{
    if ( aspect_name in settings && id in settings[aspect_name] && name in settings[aspect_name][id] )
{
::print("\tusing settings[" + aspect_name + "][" + id + "][" + name + "] : " + settings[aspect_name][id][name] + "\n" );
return settings[aspect_name][id][name];
} else if ( aspect_name in settings == false )
{
::print("\tsettings[" + aspect_name + "] does not exist\n");
} else if ( name in settings[aspect_name][id] == false )
{
::print("\tsettings[" + aspect_name + "][" + id + "][" + name + "] does not exist\n");
}
::print("\t\tusing default value: " + settings["default"][id][name] + "\n" );
return settings["default"][id][name];
}

fe.add_text("[Title]", Setting("coords", "x"), Setting("coords", "y"), Setting("coords", "width"), Setting("coords", "height"));

function on_signal( str )
{
    switch( str )
    {
        case "custom1":
            fe.signal("reload");
            break;
    }
    return false;
}

fe.add_signal_handler( this, "on_signal");

Here's what I get when I run this layout, with 1280x720 defined for width/height:

Code: [Select]

        using settings[16x9][coords][x] : 300
        using settings[16x9][coords][y] : 0
        settings[16x9][coords][width] does not exist
                using default value: 500
        settings[16x9][coords][height] does not exist
                using default value: 30

and here's with 800x600 defined:

Code: [Select]

        using settings[4x3][coords][x] : 300
        using settings[4x3][coords][y] : 300
        settings[4x3][coords][width] does not exist
                using default value: 500
        settings[4x3][coords][height] does not exist
                using default value: 30


[verion]

I've nailed it:


1. my bad (sorry for wasting your time because of this)   
------------------------------------------------------------------------
I didnt put " "  around my added 1.6 definition - so 16:10 resolution wasn't working (no defined settings)

After that fixed - all golden



//fe.layout.width = 1920;
//fe.layout.height = 1200;
I get [16x10] settings


//fe.layout.width = 1280;
//fe.layout.height = 720;
I get [16x9] settings


//fe.layout.width = 800;
//fe.layout.height = 600;
I get [4x3] settings


2. So I've tested it with deleted //fe.layout.width and //fe.layout.height using real resolutions of 16:10 and 16:9 screens
-----------------------------------------------------------------------------------------------------------------------
It was working... almost

Everything was good with 16:10, but I was getting NO SETTINGS for 16:9 - and default settings was used

It turns out that not all 16:9 screens was made equal
My screen res is 1366x768

The problem is that
1280/720 = 1.77777777777778
1366/768 = 1.77864583333333

slightly different, but different enough for a cold harted computer to reject my screen as not truly 16:9

---

Is there any solution to have more "fuzzy" logic?
Can we cut 1.7786 to 1.7 when turned into string with   aspect.tostring ?
Or maybe round it up to 1.78?
Or make > 1.7?

[liquid8d]

Ah good!

Ah, crap Well for now you could just add:

Code: [Select]

case "1.77778":
case "1.77864583333333":
        aspect_name = "16x9";
        break;

I'm not great with the resolutions/aspect stuff but if you have a suggestion, I'm happy to implement it - it could be rounded down just using floor( aspect ) but I'm not sure if that's good enough or if that might affect others. It could also be modified by just checking specific resolutions instead of the ratio..

I'm doing some work on a separate 'Settings' module to refine this which will also allow for emu or list name specific settings - once we can refine this, i'll be improving and releasing that.

[verion]

I'm not great with the resolutions/aspect stuff but if you have a suggestion, I'm happy to implement it - it could be rounded down just using floor( aspect ) but I'm not sure if that's good enough or if that might affect others.

resolutions - this is my domain

best way is to trim it to #.#
so you'll have 1.3  1.6  1.7

or round up tp #.#
so you'll have 1.3  1.6  1.8

and you'll be covering all resolution variants

-------------

but floor can't be used if I'm not mistaken - because  floor(x) returns a float value that is the largest integer that is less than or equal to x
 so all numbers will give you 1.0 when "floored"