Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m unsure

Button Placement trouble

I'm new to IRule. I've been useing DemoPad but am annoyed at Apple products so bought a Nexus 7, Irule pro, and am trying to make an Android remote.

Anyhoo... I'm having trouble placing buttons correctly. It's difficult to explain but when selected the buttons have a green square behind them that wont center with the image. It seems to disallow me to place them better. What if anything can I do to fix it?

1 person has
this question
+1
Reply
  • That green area is the selectable area. To adjust the size of the green area click on the button and inside the properties window adjust the fields that say width and heigth.

    Scott
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thanks for the reply but I understand and did find the width height settings, it doesn't help.
    The problem is the selectable area doesn't center with the button image but to the upper left corner of the original selectable area of the image.

    as an example, This is with up, left, and right set to 300x10, enter is set to 100x100, down is set to 300x150



    A screen shot of the page I'm trying to build.


    Because the selectable area wont center with the button images, I cannot place button where I need them and makes the rest of the program useless for me.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Oh, I should add that I cant make the page work because Enter selectable area is set to 1x1 to get the button placement you see above.

    Also, the rest of the buttons dont work out in the app because the selectable area isnt centered with the image.
    for example, to stop, I have to press to the upper left of the stop button image in the app.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • The selectable area is not just a title for the green space behind those images. That is also the area that has to be pressed to send the commands within the buttons on your screen. When you configure the selectable area to match your button you can then manually assign the location you want the image to appear on your screen if you cannot drag and drop them to the spot.

    Drag the graphic to an area that you want and if you need to adjust row or column location you can do so in the properties window. This will allow you to have the proper selectable area as well as the location of the buttons.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I understand the well descriptive name of "selectable area" and I now see how to move them better.
    I didn't try the "manual" way of moving them. It's not immediately obvious and seems to be the most difficult way possible to place a button.

    I am using the largest buttons in the builder so they are easy to see and I don't want a HUGE selectable area around them taking up space for better button placement. So how to center the selectable area to the image instead of upper left corner after reducing the size? Is this possible?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • The image will always start from the top corner that is how the system is currently designed. The other option to try would be the full resolution grid. If you create a new page you can right click on the tile of that page and convert to full resolution grid. This will give you a pixel by pixel breakdown of your handset instead of a generic grid.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Chris, why not download one of the panel templates designed for a iPad retina display just to see how it places the 2x buttons? AFAIK "retina" just means double the resolution, so it has use the 2x images.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated