[Free] The ExtraComponents Extension (Beta)

components
design
extension
#1

EDIT: Version 1.2 is currently under testing. Try it out here:
[Free]The ExtraComponents Extension (Beta)

Hello everybody It’s time for a fresh extension. :wink:.
There was a huge discussion about the integration of Toggle buttons onto the Thunkable platform a few days ago (see here). Until now, there has been no easy way to add off-palette components to your app without fidgeting with canvases, arrangements and whatnot. All this struggle for something developers on other platforms take for granted.
In order to bridge this gap between Thunkable and the more sophisticated IDEs out there, I have created an extension which adds the functionality of components that are missing in the designer palette. It currently supports only the Toggle button, but feel free to suggest more components here.

Here are the currently available methods:

This method is used to create the toggle button on the screen.
The x and y coordinates are specified in pixels (please suggest a better measure because I don’t know much about dp, px, sp and the likes).
The thumbColour is the colour of the draggable circle specified in hex format.
The trackColour is the colour of the rounded rectangle which carries the thumb, also specified as hex.
The id is a unique integer to identify a specific toggle button. Never create two toggle buttons with the same id. By using an id for a toggle button, you can create multiple buttons without having to drag the extension onto the screen multiple times.


This method allows you to change the colours of the toggle button during runtime.


With this method, you can programmatically toggle a specific button.

Programmatically enable/disable toggle buttons using this method. It is advised to use this in conjunction with the ChangeColour method as the disabled buttons do not automatically gray out.

This event is invoked whenever a toggle button is pressed. It returns if the toggle is switched on (boolean) and the id of the toggle button (int).

Creative Commons License
ExtraComponents Extension by Vishwas Adiga is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.

Screenshots
(Thanks @taifun for the Tools extension. The tinted Status bar sure adds an awesome touch to the previews)

Screenshot_20170602-190200.png1080x1920 50.5 KB

Screenshot_20170602-190145.png1080x1920 36.4 KB

Screenshot_20170602-190148.png1080x1920 51.8 KB

AIX file: (deprecated) com.vishwas.ExtraComponents.aix (30.3 KB)

Hope you find it useful. Please post bugs and other nasty encounters with bots here. I will try my best to fix them.

Cheers
Helios

[Free] Create Buttons, Labels, TextBoxes, Images, Sliders by code. New font. Vertical Slider
Generate components automatically
Dynamic components extension
ExtraComponents Extension problem
Dynamic components extension
Floating Labels
Android Toggle Button
#2

Its awesome to use.

#3

Nice extension! I like it! :slight_smile:

#4

Did you say that “It isn’t possible”?.. Never say Never! :wink:

#5

Thank you very much my friend @Helios
This is another great work made by you! :slight_smile:

I love it.

-Mika

#6

Like it a lot :slight_smile: :thumbsup:

Some suggestions.

  1. coordinates only in dp, now I need to calculate all possible screens to get it on the right side of the screen
  2. a method to remove toggle
  3. extra padding for the tint
#7

I knew such problems would arise but didn’t quite know the best bet. Could you elaborate on dp Vs px and choose the best one among all so that the buttons look similar on all screens?

I’ll surely include that in the next update.[quote=“Boban_Stojmenovic, post:6, topic:4125”]
3.extra padding for the tint
[/quote]
Could you please elaborate?

#8

Yes, I indeed regret saying that. :wink: :joy:

#9

Great! Keep up the good work! Highly needed extension!

#10

Amazing!!! :100: out of :100:

#11

You should use dp as it scales according to screen density

#12

Thanks for all the support! Please let me know of other components you would like to see on the extension here:


I’m currently working on a progressbar. And weeding out bugs from the current release, not excluding making the transition to dp.

#13

Probably an extensive ListView you can try.

#14

As a tip, I prefer the 500 shade for the thumb and the 200 shade for the track.
https://material.io/guidelines/style/color.html#color-color-tool

#15

Side bar

#16

I won’t say that it is impossible! :joy::joy::joy:

#17

In theory between you and the creators of FAB can create the Side Bar

#18

So, what happens if other components are resized at runtime? I understand these are an overlay and will not reposition accordingly or relatively to the other components on the screen. Is that right?
How do you add a label to them?

#19

These are not overlays. The components are directly added to the screen. I’m guessing they will scale accordingly. This is why the extension is open for bug testing.
Cheers

#20

Feature upcoming in the next version