Additional Button Properties (cosmetic enhancements)

design

#1

This is a cosmetic change request for more interesting push buttons. They could be implemented within Thunkable, or as an extension as somebody’s personal project. Although they are not as important as functional enhancements, some of them might be quick and easy to implement.

One or more of the following additional button properties would be helpful:

(1) “Outline button” option, or “Border color” option. This would simply outline a button with a border, to offset it from the background more distinctly.

(2) “3D button” option (or a “Raised button” and “Pressed button” option). This is expands the border concept with an angled lighting effect (like a shaded picture frame) to make the button appear raised or pressed.

(3) “Scale background image” option. This would scale the button’s background image to fit within the size of the button (and cropped to the shape of the button). This is important because the size of a button is a function of the amount of text on the button, and perhaps also the size and resolution of the device’s screen.

(4) “Illuninated button” option. This is a variation on the background color property, with highlights and shadows to give the appearance of an illuminated glass button. This is a subset of Request #3 above, but without the requirement for a background image.

All of the above can be accomplished by using a canvas, or part of a canvas, or a sprite, for a button. But that is not a light-weight solution.

Any one of the above enhancement suggestions would suffice to make the buttons a little more interesting.

The more professional of an appearance that Thunkable-created apps have, the more appeal that Thunkable will have as a development tool. Simple cosmetic enhancements can be an edge when potential developers are choosing an app IDE.


#2

I love it! Nice topic!


#3

This is already possible. Look into my article on this:


Maybe you can use another framework or write the CSS and JS on your own!
Hope this helps!


#4

Thanks, Helios. I will look into that resource.


#5

@Helios i think what @dddiam meant was that the buttons in thunkable should be enhanced without the need to use the webviewer component and the material design process. think of the message that would be displayed if the app fails to load the webviewer component.


#6

I don’t see why an error would occur as the pages are already stored on the device. If they were to be downloaded, then that would be different. Tell me if I’ve missed something :slight_smile:


#7

@dddiam I second your recommendations, especially #3. It’ really important to be able to have the background image of a button or any other component scale while automatically preserving the aspect ratio.

@Helios Materialize looks great. But, although it’s technically possible to use other frameworks to provide such functionality, it may not be practical for widely used, very basic user interface elements such as buttons.

The point of tools like Thunkable is to provide a high level of abstraction by hiding the complexity of low-level functionality into simple elements and building blocks. Using other low-level frameworks requires writing and maintaining more, less reusable, more complex, low-level code.

I’d rather focus my development efforts on the unique parts of an app rather than basic plumbing like buttons and other components.


#8

Great idea!
I always want the option #3 ! :slight_smile:

And all others are too useful.


#9

Not to hijack the thread … but other tools I’ve used had a potential 5th option:

(5) “Two image” option. This would have one image for the un-pressed view of the button, and another image for the pressed view of the button. This would allow a button to have a 3D look or highlights/shadows. (would be nice if it could scale the images to the button size)


#10

Thank for your additional input, Jbp4444.

Option (5) is really a hybrid of Options (2) and (3). I have tried the 2-image method in Thunkable, and the images are not scaled; they are a fixed size. You would have to resized the image of the frame externally, and accept however it comes out on any device that the app might be installed on.

As I mentioned in my initial post, one can, of course, paint buttons on a canvas, or use sprites for buttons, but that is not a lightweight solution. It takes more development and debugging time, makes the code more complex and cluttered, and consumes more resources. Although I have had fun developing that type of approach myself, it is not a solution for novice programmers.

And it diverges from Thunkable’s simple drag 'n drop programming philosophy.