Author Topic: Controls module v1.0!  (Read 15546 times)

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Controls module v1.0!
« on: December 10, 2017, 05:06:54 PM »
I've just put together another module for the toolbox  ;D

The Controls module allows you to more easily create a layout that contains selectable buttons and labels:



The module is located here, along with a README to explain usage:
https://github.com/liquid8d/attract-extra/tree/master/modules/objects/controls

There is also a sample layout for using the module here:
https://github.com/liquid8d/attract-extra/tree/master/layouts/sample_controls

Right now it just contains selectable labels and buttons. I will probably be looking at adding perhaps some checkboxes that could change a setting, or maybe lists as well.


I'm anticipating some good feedback for this module as some designers start figuring out how to create some more unique, navigate-able layouts  ;)

Enjoy!

jedione

  • Hero Member
  • *****
  • Posts: 1135
  • punktoe
    • View Profile
Re: Controls module v1.0!
« Reply #1 on: December 10, 2017, 07:06:15 PM »
i will be trying this out...fo-shure

thank you..... :) :) :)
help a friend....

calle81

  • Sr. Member
  • ****
  • Posts: 184
    • View Profile
Re: Controls module v1.0!
« Reply #2 on: December 11, 2017, 02:15:50 AM »
Wow, I thought I was done with my theme for HyperPie2... Amazing work as always!  :)

calle81

  • Sr. Member
  • ****
  • Posts: 184
    • View Profile
Re: Controls module v1.0!
« Reply #3 on: December 11, 2017, 06:01:24 AM »
Is it possible to make a sub-menu that popups when you press a specific button? Would be great to see a code snippet I can steal to incorporate into themes. :)
The layouts are already so crowded so I'm having a hard time imaging how to fit the buttons I want.

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Controls module v1.0!
« Reply #4 on: December 11, 2017, 06:00:29 PM »
Is it possible to make a sub-menu that popups when you press a specific button? Would be great to see a code snippet I can steal to incorporate into themes. :)
The layouts are already so crowded so I'm having a hard time imaging how to fit the buttons I want.

The sample layout does exactly that. It toggles a menu surface when a signal is received, enables the controls, and hooks control actions to return and disable/hide the menu.

If your layout is crowded, use a toggle then overlay a new surface that "hides" or covers the main one. It depends on what you want the controls to do, whether it seems appropriate to still see the layout while using the controls.
« Last Edit: December 11, 2017, 06:09:00 PM by liquid8d »

calle81

  • Sr. Member
  • ****
  • Posts: 184
    • View Profile
Re: Controls module v1.0!
« Reply #5 on: December 12, 2017, 03:20:37 PM »
Ok, I tried it just now. I pasted your sample code at the end of the layout I'm working on. It shows when the layout starts but as soon as I exit the menu there's no way to return. I want it to listen to custom2 and be hidden by default until I press the button and not close until I press custom2 again or press a button on the display tied to custom2 which subsequently closes the menu.

https://youtu.be/aMUHq_jIAIc

//////////////////////
//Control Menu
///////////////////

//be sure to load the module!
fe.load_module("objects/controls");

local flw = fe.layout.width;
local flh = fe.layout.height;

//side menu
local menu = fe.add_surface(flw * 0.2, flh);
local menu_bg = menu.add_text("", 0, 0, flw * 0.2, flh);
menu_bg.set_bg_rgb(130, 130, 130);
//menu_bg.alpha = 150;

//create manager class (options are chainable if you prefer)
local manager = FeControls({
    selected = "lblDisplays"
});

function hide_menu() {
    menu.visible = false;
    manager.enabled = false;
    title.set_pos(0, 0, flw, flh * 0.1);
    art.set_pos(0, flh *0.1, flw, flh);
}

function show_menu() {
    menu.visible = true;
    manager.enabled = true;
    title.set_pos(flw * 0.2, 0, flw, flh * 0.1);
    art.set_pos(flw * 0.2, flh *0.1, flw, flh);
}

// ADD LABELS //
manager.add(FeLabel("lblDisplays", flw * 0.025, flh * 0.05, 200, 50, {
    surface = menu,
    up = "btnLaunch", down = "lblFilters", right = hide_menu,
    select = function() {
        ::fe.signal("displays_menu");
    },
    state_default = {
        msg = "Displays",
        charsize = 18
    }
}));

manager.add(FeLabel("lblFilters", flw * 0.025, flh * 0.12, 200, 50, {
    surface = menu,
    up = "lblDisplays", down = "lblPrev", right = hide_menu,
    select = function() {
        ::fe.signal("filters_menu");
    },
    state_default = {
        msg = "Filters",
        charsize = 18
    }
}))

manager.add(FeLabel("lblPrev", flw * 0.025, flh * 0.19, 200, 50, {
    surface = menu,
    up = "lblFilters", down = "lblNext", right = hide_menu,
    select = function() {
        ::fe.signal("prev_game");
    },
    state_default = {
        msg = "Previous",
        charsize = 18
    }
}));

manager.add(FeLabel("lblNext", flw * 0.025, flh * 0.26, 200, 50, {
    surface = menu,
    up = "lblPrev", down = "btnRandom", right = hide_menu,
    select = function() {
        ::fe.signal("next_game");
    },
    state_default = {
        msg = "Next",
        charsize = 18
    },
    // state_selected = {
    //     msg = "S"
    // }
}));

// ADD BUTTONS //
manager.add(FeButton("btnRandom", flw * 0.025, flh * 0.45, 200, 50, {
    surface = menu,
    up = "lblNext", down = "btnLaunch", right = hide_menu,
    select = function() {
        ::fe.signal("random_game");
    },
    state_default = {
        msg = "Random Game",
        charsize = 18,
        file_name = "button.png",
        rgb = [ 0, 0, 0],
    },
    state_selected = {
        file_name = "button_selected.png",
        rgb = [ 100, 0, 100],
    },
}));

manager.add(FeButton("btnLaunch", flw * 0.025, flh * 0.55, 200, 50, {
    surface = menu,
    up = "btnRandom", down = "lblDisplays", left = "btnRandom", right = hide_menu,
    state_default = {
        msg = "Launch",
        charsize = 18,
        file_name = "button.png",
        rgb = [ 0, 0, 0 ],
    },
    state_selected = {
        file_name = "button_selected.png",
        rgb = [ 0, 200, 0],
    }
}));

//Our own signal handler - control is handed over to the controls manager
//when 'left' is pressed. Control is passed back to our signal handler when 'right'
// is pressed on any of the label/buttons above
fe.add_signal_handler(this, "on_signal");
function on_signal(str) {
    if ( str == "Custom3" ) {
        // For debugging
        fe.signal("reload");
        return true;
    } else if ( str == "Custom2" ) {
        //return control to the controls manager
        show_menu();
        return true;
    } else if ( str == "right" ) {
        //do nothing for right to prevent confusing UI
        //hmm... we could do a show_right_menu() here with game info :)
        return true;
    }
    return false;
}

//initialize the controls manager
//we init if after our own signal handler here, just to make our signal handler get priority
manager.init();

calle81

  • Sr. Member
  • ****
  • Posts: 184
    • View Profile
Re: Controls module v1.0!
« Reply #6 on: December 14, 2017, 01:40:36 PM »
Hi Liquid8, I can't get your sample code to work when changing to custom1 for activating the menu. Can you please test on your end?

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Controls module v1.0!
« Reply #7 on: December 16, 2017, 12:15:14 PM »
hey, sorry for the delay - i was reloading OSs  :o

If you are using "Custom1" - that won't work, the signals are case-sensitive.. you need "custom1".

I was able to do a menu toggle in the sample layout by just updating "custom1" in the signal handler to:
Code: [Select]
function on_signal(str) {
    if ( str == "custom1" ) {
        if ( menu.visible ) hide_menu(); else show_menu();
        return true;
    }
    return false;
}

and it worked just fine.. let me know if you are still having issues.

Neosys

  • Full Member
  • ***
  • Posts: 50
    • View Profile
Re: Controls module v1.0!
« Reply #8 on: December 16, 2017, 01:10:45 PM »
Quote from: calle81
link=topic=2017.msg13920#msg13920 date=1513120837
Ok, I tried it just now. I pasted your sample code at the end of the layout I'm working on. It shows when the layout starts but as soon as I exit the menu there's no way to return. I want it to listen to custom2 and be hidden by default until I press the button and not close until I press custom2 again or press a button on the display tied to custom2 which subsequently closes the menu.

https://youtu.be/aMUHq_jIAIc

Hello calle81!
How did you do that the right transparent menu opens and closes?

I have inserted your example code in my layout.nut but i get only the left menu!

I can not get a right menu.

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Controls module v1.0!
« Reply #9 on: December 16, 2017, 01:59:09 PM »
neosys,

Good question :) Think you could use set_custom_controls() with a custom listbox when displays_menu is triggered?

Neosys

  • Full Member
  • ***
  • Posts: 50
    • View Profile
Re: Controls module v1.0!
« Reply #10 on: December 17, 2017, 12:12:06 PM »
neosys,

Good question :) Think you could use set_custom_controls() with a custom listbox when displays_menu is triggered?

Hi liquid8d!

Unfortunately, that currently exceeds my abilities. Do not know how to start?

calle81

  • Sr. Member
  • ****
  • Posts: 184
    • View Profile
Re: Controls module v1.0!
« Reply #11 on: December 18, 2017, 02:46:52 PM »
hey, sorry for the delay - i was reloading OSs  :o

If you are using "Custom1" - that won't work, the signals are case-sensitive.. you need "custom1".

I was able to do a menu toggle in the sample layout by just updating "custom1" in the signal handler to:
Code: [Select]
function on_signal(str) {
    if ( str == "custom1" ) {
        if ( menu.visible ) hide_menu(); else show_menu();
        return true;
    }
    return false;
}

and it worked just fine.. let me know if you are still having issues.

Hi, I just cant get this to work. It's very odd. Even with just your sample layout I can only see the menu when opening the layout. After that I cannot open the menu again.

calle81

  • Sr. Member
  • ****
  • Posts: 184
    • View Profile
Re: Controls module v1.0!
« Reply #12 on: December 19, 2017, 12:36:55 AM »
Quote from: calle81
link=topic=2017.msg13920#msg13920 date=1513120837
Ok, I tried it just now. I pasted your sample code at the end of the layout I'm working on. It shows when the layout starts but as soon as I exit the menu there's no way to return. I want it to listen to custom2 and be hidden by default until I press the button and not close until I press custom2 again or press a button on the display tied to custom2 which subsequently closes the menu.

https://youtu.be/aMUHq_jIAIc

Hello calle81!
How did you do that the right transparent menu opens and closes?

I have inserted your example code in my layout.nut but i get only the left menu!

I can not get a right menu.

Hi Neo, I used Oomeks Silky theme as a base for the theme I'm working on. It's however probably not the easiest theme to start off with if you are new to Attract Mode :)

Neosys

  • Full Member
  • ***
  • Posts: 50
    • View Profile
Re: Controls module v1.0!
« Reply #13 on: December 19, 2017, 09:49:49 AM »
Thanks calle81!

But the layout.nut is totally bailed. very complicated for me. I do not know what part of the code I need.

liquid8d

  • Global Moderator
  • Sr. Member
  • *****
  • Posts: 442
    • View Profile
Re: Controls module v1.0!
« Reply #14 on: December 19, 2017, 07:21:32 PM »
calle:

I'm not sure the issue, perhaps you have some control conflicts or conflicting signal handlers? Have you tried just the sample layout by itself, without your code and does it work? To troubleshoot, I'd have to see the full code you are using.