How to make a button - Revision history

JoeStrout at 14:43, 30 August 2024

2024-08-30T14:43:42Z

JoeStrout: added example using events module

2024-08-30T14:32:07Z

added example using events module

JoeStrout: /* Using a Sprite and No Import Modules */

2022-02-02T15:21:25Z

Using a Sprite and No Import Modules

JoeStrout: Created page with "There are several ways to make a clickable button in Mini Micro. All methods involve drawing some clickable area on the screen, detecting when that area has been clicked,..."

2022-02-02T15:19:18Z

Created page with "There are several ways to make a clickable button in Mini Micro. All methods involve drawing some clickable area on the screen, detecting when that area has been clicked,..."

New page

There are several ways to make a clickable button in [[Mini Micro]]. All methods involve drawing some clickable area on the screen, detecting when that area has been clicked, and then tracking the mouse while the button remains down.

For proper button behavior, the button should change in some way (appear darker or shift/scale) to indicate it is pressed, as long as the button is held down but only while the mouse is within the button bounds. If the mouse is dragged outside the bounds, the button should pop back up, and if released in this state it should not count as a click (this is how a user can "cancel" a button click if they realize they made a mistake before releasing the mouse button).

== Using a Sprite and No Import Modules ==

The core of this technique is described in [[How to detect a click on a sprite]]. But in the example code below, we make it a bit more general, adding an <c>isClicked</c> method to the [[Sprite]] class that can perform button behavior for any sprite. Then the main program needs only call <c>isClicked</c> on each button sprite whenever the mouse button goes down, and handle the button click if this method returns true.

<ms>clear

// Prepare the sprite we want to use as a button.
button = new Sprite
button.image = file.loadImage("/sys/pics/Block3.png")
button.x = 350; button.y = 550
display(4).sprites.push button

// Function to check for clicks, with button behavior.
// (Call this when the mouse button is pressed.)
Sprite.isClicked = function
// Ensure the self has a bounds.
if not self.localBounds then
self.localBounds = new Bounds
self.localBounds.width = self.image.width
self.localBounds.height = self.image.height
end if
// Track the mouse until the button is released,
// showing the button as "pressed" whenever the
// mouse is within the self bounds.
while mouse.button
if self.contains(mouse) then
self.tint = color.silver
else
self.tint = color.white
end if
yield
end while
self.tint = color.white
// Return whether the mouse was released within bounds.
return self.contains(mouse)
end function

// Main loop.
while true // (press Control-C to exit)
yield
if mouse.button then
// The mouse button is down. Check each of our buttons,
// and do whatever they should do if clicked.
if button.isClicked then
print "Button clicked!"
end if
end if
end while</ms>

@@ Line 83: / Line 83: @@
 events.eventLoop.run</ms>
 [[Category:Mini Micro]]
 [[Category:How To]]

@@ Line 54: / Line 54: @@
 [[File:ButtonClick.gif]]
 [[Category:Mini Micro]]
 [[Category:How To]]

← Older revision		Revision as of 15:21, 2 February 2022
Line 51:		Line 51:
	end if		end if
	end while</ms>		end while</ms>
		+
		+	[[File:ButtonClick.gif]]
		+
		+
		+	[[Category:Mini Micro]]
		+	[[Category:How To]]