Lander project

[johnno56]

First of all, I should have stated 50 instead of 20...

I have attached a sample. As you can see, scaling a 600x600 image down to 48x48, had an impact on resolution.

J

[johnno56]

Threw together a complete set of buttons. Simple light blue text on a darker blue background.

J

[bplus]

Hi Johnno,

You are right, shrinking down does not do Planet justice.

I was hoping for pictures not words, as they are universal language.

[johnno56]

Ok. Figured I would stick to more familiar images. Used and modified standard web page navigation icons.

J

[johnno56]

Can I make a quick suggestion? (Yes, I know the question is rhetorical, as I would have have to wait for your response to continue... lol) If the Lander runs out of fuel, would it not be correct to assume that, Sir Isaac Newton would "take over the drivers seat" and the Lander's downward motion would increase until it crashes? Just curious. Also thought of two extra animated sprites when a crash occurs. 1. If no fuel left then the lander just crumples on the ground and 2. If fuel remains... well, I think you would know what happens... lol Oh. Then there is sound. Thrusters; Landing and Crashing....

Food for thought.

[bplus]

Yeah Johnno, you are right about running out of fuel, and those new picture buttons are more what I had in mind, not sure about the house, I was thinking the universal symbol for power button, circle with 12 o'clock line?

Anyway I have made a bunch of changes including the new word buttons and have an update. Here are my notes from .bas file since version 1:

' Apparently image files have to be located at root where the UiEditor.exe resides.
' To load into form at design time.

' Lander_Inform2 started 2018-06-05
' + use Johnno's Stars.png for pbScene stars background, remove star making
' + use terraH for creating a black silhoette of land profile color line at top
' + installed landing lights and adjust colors
' + 4 bases for landing are separated fairly evenly across screen
' + arrow keys will work after click a button one time, even after Restart
' + Horizontal and vertical speeds can now see beyond deciaml point
' + New crash numbers for speeds: abs(1.5) for horizontal and 1.5 max for vertical.
' + Added Image Files for buttons by Johnno,
' - Even with the shrink property set to True,
'  and the buttons designed to fit precisely don't! :(

A screen shot and the zip of the package:

[FellippeHeitor]

' - Even with the shrink property set to True,
'  and the buttons designed to fit precisely don't! :(

The .Shrink property is only effective for PictureBox controls. MenuItems and Buttons will adapt the image's size so that the height fits within the button area, respecting the bevels, while maintaining the original aspect ratio. You may reconsider the button size for the images to fit nicer.

The KeyPressed event will be fired for controls that can get focus. As the picturebox control cannot, you are only able to read key presses once a button has focus. You may want to add SetFocus bRotLeft (or to any other button) in the OnLoad event, so that key presses can be accepted from the start.

[johnno56]

bplus,

If the buttons are not the right size, let me know what size you need, and I'll make more...

Here is "Restart".

J

[bplus]

The buttons were made perfectly! The more I look, the more I see the fit, just not what I first expected.

[johnno56]

May I ask what you were expecting?

J

[bplus]

I was expecting the image to completely fill the buttons designated area like in a picture box. When looking carefully, I think I see the beveling and possibly a rectangular "insert area" that was intended. I was not expecting white frames for dark colored button images. But! now that I know what happens I can lighten the forms background color to tone down the white frames, it does look off to the button image color and the Stars background image. Dang! when did I become an interior decorator? :D

[bplus]

' - Even with the shrink property set to True,
'  and the buttons designed to fit precisely don't! :(

The .Shrink property is only effective for PictureBox controls. MenuItems and Buttons will adapt the image's size so that the height fits within the button area, respecting the bevels, while maintaining the original aspect ratio. You may reconsider the button size for the images to fit nicer.

The KeyPressed event will be fired for controls that can get focus. As the picturebox control cannot, you are only able to read key presses once a button has focus. You may want to add SetFocus bRotLeft (or to any other button) in the OnLoad event, so that key presses can be accepted from the start.

I looked all over for some dang reference to setfocus in the Wiki, I did find FocusIn and FocusOut described but nothing about SetFocus which should be a word on the list there. I did not try search... now that I think of it.

Also if you have something about z order of controls (for tabbing and focus...), that is important to describe how it works and set / reset order.

Also what do you think about a board for InForm and Collecting notes for Wiki, here or at least a dedicated thread pinned. You'd probably prefer GitHub?

OK so how much area is taken away for button beveling? is it a percent or hard number? ie take off 15% or 15 pixels?
Can we assume the "insert" area for image is in same x, y ratio as width and height of button? (probably since mentioned in quote.)
Can we control the color of bevel? (because neither fore nor back color effect it and it is white before a button gets focus so focus color doesn't help.)

Also I did stumble upon a bunch of message box constants, that would imply there is message box service but not on the linked word list.

I've got to remember to try search as well as going down the linked list of key words or topics.

Update: https://github.com/FellippeHeitor/InForm/search?

[johnno56]

Hmm... Beveled inserted picture boxes. Interesting. I had considered a bevel, but having a button 50 pixels in height, would mean an even smaller area for the picture. A single 'image' in the centre of a rectangular button does look a bit odd... Poor little images look a bit 'lost' in all that space. Shortening the button and increasing the height as well would lend itself to a 'fancier' button or providing space for a more detailed image. Did you have any ideas as to the kind of images you would prefer? After all, the 'text' and 'image' buttons, are basically a sample of what could be done.

Gimp, just like Photoshop, can do a LOT of stuff. If you Google 'gimp buttons' or 'gimp crystal button' you will be presented with a heap of styles. Have a look and if you see anything you like just let me know and I will see what I can do...

J

ps: Are you hinting at the possibility that 'bevel' maybe part of the button drawing process? If so, do you have to use Inform's procedure to draw it? If these are the only buttons, then either draw them the way you are used to, or just 'put' the beasties there and create 'click zones'... Just a suggestion...

[bplus]

Hi Johnno,

Yes, it looks like when we are designing images for buttons we have to take into account built-in beveling from InForm.
Your images do fit fine into the buttons because they had the proper ratios.
It is hard to say further what designs are needed while still exploring how Inform is working.

It may be easier to just redesign the form and button sizes than rework images.

Now that we have mouse locating code for picture box and picture box does take click events, we could put simulated buttons in the picture box but that is kind of silly.

Update: More thought, I like square buttons for picture buttons then we won't have to worry about x, y ratios.
Your thruster button looks like upside down speaker button, confusing me, I think a simple wide arrow up approach might do better.
It looks like Inform can change color when buttons have focus (maybe that's for text only buttons?).

For now, just worry about one main image design before worry about variations for mouse over or clicks. BTW you found the power button design I had in mind for restart.

[FellippeHeitor]

I looked all over for some dang reference to setfocus in the Wiki, I did find FocusIn and FocusOut described but nothing about SetFocus which should be a word on the list there. I did not try search... now that I think of it.

Well, a book won't get a second edition if no one's reading it. I didn't bother updating the wiki in a while because there was no feedback of anyone reading it, so I'll dedicate some time to getting it up to date with beta 7.

if you have something about z order of controls (for tabbing and focus...)

Edit -> Z-Ordering.

what do you think about a board for InForm and Collecting notes for Wiki, here or at least a dedicated thread pinned. You'd probably prefer GitHub?

GitHub does have a dedicated section for issues, but I won't force anyone to make an account. Anywhere you post about InForm here in the forum will catch my attention and I'm always willing to assist, so let's keep it going as we are and it's all good.

OK so how much area is taken away for button beveling?

In the current XP theme, it's 3 pixels from the top and 3 pixels from the bottom, that is, Control().Height - 6.

Can we control the color of bevel? (because neither fore nor back color effect it and it is white before a button gets focus so focus color doesn't help.)

Nope. Buttons follow the theme's imagery, in this case Windows XP's silver theme.

Also I did stumble upon a bunch of message box constants, that would imply there is message box service but not on the linked word list.

Not yet documented, but here goes:
FUNCTION MessageBox& (Message$, Title$, Setup AS LONG)

Not specifying Title$ will have the message box inherit the main form's title/caption.

Setup is a combination (button + icon) of:
Buttons, which can be MsgBox_OkOnly, MsgBox_OkCancel, MsgBox_AbortRetryIgnore, MsgBox_YesNoCancel, MsgBox_YesNo, MsgBox_RetryCancel, MsgBox_CancelTryagainContinue, MsgBox_CancelTryagainContinue.

Icons, which can be MsgBox_Critical, MsgBox_Question, MsgBox_Exclamation, MsgBox_Information

The possible return values are: MsgBox_Ok, MsgBox_Cancel, MsgBox_Abort, MsgBox_Retry, MsgBox_Ignore, MsgBox_Yes, MsgBox_No, MsgBox_Tryagain, MsgBox_Continue.

All combinations of the above work as expected in Windows. For macOS and Linux, you only get OkOnly and YesNo for buttons.

Now that we have mouse locating code for picture box and picture box does take click events, we could put simulated buttons in the picture box but that is kind of silly.

For goodness sake, don't. If you don't want a button with an image, just place a new PictureBox control in place of the button and respond to the Click event, which will work fine for a picturebox control, but don't _PUTIMAGE the button image onto the main canvas, as that would mean not needing InForm at all and be just silly as you put it.

If you do decide to replace buttons with picturebox controls, you can make use of the MouseEnter and MouseLeave events to use different images for hovered/not hovered, as I cover (although with labels, but the functionality is the same) in this video:

&t=1s