Author Topic: Visual editor for layout.nut?  (Read 10367 times)

tonberryhunter

  • Full Member
  • ***
  • Posts: 60
    • View Profile
Visual editor for layout.nut?
« on: January 07, 2017, 11:08:15 PM »
Is it possible to edit a layout theme with a program much like one would edit a web page with Wordpress or Dreamweaver?  I know this is probably a stupid question but I find it very tricky to figure out how to edit this layout file without visually seeing changes made in real time. 

I'm currently trying to make a wheel layout for Cave games and since they are all vertical I want the regular snap screen to be rotated vertically to display the videos that way.  The way I have it now it just puts black bars on the left and the right of the snap display and runs the snap vertically.  Which looks sorta bootleg to be honest.  In the arcade you would physically rotate the screen 90 degrees.  So your display size stays the same.  If someone could point me in the right direction that would be great.   

I'm currently working with a modified Robospin Layout. 

Here is what I have come up with thus far for this layout. 


jedione

  • Hero Member
  • *****
  • Posts: 1135
  • punktoe
    • View Profile
Re: Visual editor for layout.nut?
« Reply #2 on: January 08, 2017, 06:51:45 AM »
my advice is to put am in windowed mode so u can see and edit your nut file
then just do a quick restart of am to see the change.
u will become very fast at it....
help a friend....

verion

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 863
    • View Profile
    • new projects
Re: Visual editor for layout.nut?
« Reply #3 on: January 08, 2017, 07:37:21 AM »
or just make a second display and switch lef-right-left to reset the current one

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Visual editor for layout.nut?
« Reply #4 on: January 08, 2017, 08:05:22 AM »
Aren't your vertical game snaps already vertical aspect resolutions? If you set preserve_aspect_ratio to true, you could run horizontal and vertical snaps in the same area and it would fit in there.

A visual editor is something i've worked on from time to time, but it will probably be awhile before I can make it happen.

Quick tip for code editing though:

Code: [Select]
function reload(str) { if ( str == "custom2" ) fe.signal("reload") }
fe.add_signal_handler(this, "reload")

This allows you to reload your layout with a hotkey, so you can make a change in code and reload it. This is handy to adjust your object positions, or do various testing. Only thing to keep in mind here is if your layout generates an error, it may not be able to reload without shutting down and restarting.

jedione

  • Hero Member
  • *****
  • Posts: 1135
  • punktoe
    • View Profile
Re: Visual editor for layout.nut?
« Reply #5 on: January 08, 2017, 03:15:13 PM »
thank's for the code....another snipit to add to my script log,,, thanks
help a friend....

verion

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 863
    • View Profile
    • new projects
Re: Visual editor for layout.nut?
« Reply #6 on: January 08, 2017, 03:45:51 PM »
...and is there a shortcut or a hotkey invoked script that will get you straight to the current layout options?

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Visual editor for layout.nut?
« Reply #7 on: January 08, 2017, 04:21:13 PM »
...and is there a shortcut or a hotkey invoked script that will get you straight to the current layout options?

no, just a signal to go to configure - I assume you mean to quickly test different layout options? I just keep all settings in a table that way you can adjust them while coding. Then, when your layout is mostly finalized, you can hook that to the user layout options...

Code: [Select]
class UserConfig {
    </ label="Art 1", help="The artwork for slot 1", options="wheel,flyer,snap", order=1 />
    art1="flyer";
    </ label="Preserve Art 1", help="Preserve artwork for slot 1", options="true,false", order=1 />
    art1_preserve=true;
}

local user_config = fe.get_config();

//use this while testing
local settings = {
   art1 = { art = "flyer", x = 0, y = 0, width = 200, height = 100, preserve_aspect_ratio = true }
}

//when finalized, replace the variable values with the users options
//local settings = {
//   art1 = { art = user_config["art1"], x = 0, y = 0, width = 200, height = 100, preserve_aspect_ratio = user_config["art1_preserve"]}
//}

//set properties on an object
::setProps <- function(target, props) {
    foreach( key, val in props )
        try {
            target[key] = val
        } catch(e) { "error setting property: " + key }
}

local art = fe.add_artwork("snap", -1, -1, 1, 1)
   setProps(art, settings.art1)

verion

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 863
    • View Profile
    • new projects
Re: Visual editor for layout.nut?
« Reply #8 on: January 08, 2017, 05:57:15 PM »
Good idea. Thanks!

tonberryhunter

  • Full Member
  • ***
  • Posts: 60
    • View Profile
Re: Visual editor for layout.nut?
« Reply #9 on: January 09, 2017, 08:58:02 PM »
Aren't your vertical game snaps already vertical aspect resolutions? If you set preserve_aspect_ratio to true, you could run horizontal and vertical snaps in the same area and it would fit in there.

A visual editor is something i've worked on from time to time, but it will probably be awhile before I can make it happen.

Quick tip for code editing though:

Code: [Select]
function reload(str) { if ( str == "custom2" ) fe.signal("reload") }
fe.add_signal_handler(this, "reload")

This allows you to reload your layout with a hotkey, so you can make a change in code and reload it. This is handy to adjust your object positions, or do various testing. Only thing to keep in mind here is if your layout generates an error, it may not be able to reload without shutting down and restarting.

I already set preserve aspect ratio to true thats why you see the above video at the correct aspect ratio but its scaled down to fit within the display area.  I want a purely vertical layout that keeps the physical snap size the same without scaling it to the 4:3 horizontal layout like shown above. 

Here is a shopped version of what Im saying. 
   

verion

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 863
    • View Profile
    • new projects
Re: Visual editor for layout.nut?
« Reply #10 on: January 10, 2017, 03:04:50 AM »
There is no problem with that if you are using ONLY VERTICAL snaps.
But (AFAIK) there is no way to "detect" if your current snapshot is vertical or horizontal.

For sure it's possible to code it (as with AM sky is the limit) - but it's not something that works out-of-the-box with standard methods of displaying artwork.

---

...and we are going away from the topic, if the problem is vertical snap display I suggest to create a separate topic - You'll have a better chance to get your answers.

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Visual editor for layout.nut?
« Reply #11 on: January 10, 2017, 04:06:15 PM »
I'm still not sure I understand what you are trying to do... are you mixing both horizontal and vertical snaps, or are you just trying to change a layout to work vertically with vertical snaps?

I was under the impression vertical snaps fit within a horizontal aspect with preserve_aspect_ratio set to true - so you can just  set your artwork width/height to a horizontal aspect and use preserve_aspect_ratio, or setup your artwork with a vertical aspect width/height (but you'll still probably want to preserve aspect since there are different resolutions in snaps, unless you want to stretch the art).

Alternatively, you could try using my preserve-art module and see if maybe that will fit your needs. It can fit or fill the artwork area with the art and anchor it to center or a side, so you could use fit and anchor it to one side.

If you do need to detect the arts aspect, there is a way to do it but it is a bit of a pain because the artworks texture width/height is not always available when the layout first starts. You can look at the code in my preserve-art module to see how I handle that:

https://github.com/mickelson/attract/blob/master/config/modules/preserve-art.nut