HOW TO MAKE TOGGLE BUTTON IN APP INVENTOR?

This is my first article on app inventor that is why i have to tell you that what is app inventor? Definitely i will share more articles on this topic.

WHAT IS MIT APP INVENTOR?

App Inventor allows you to make android apps without writing any line of code right from your browser.  This is an blocks based programming tool for developing advanced android apps for non-coders.

Fore more details : Click here

Now, i am going forward assuming that you are familiar with app inventor 2 (yes, it is version 2 released by MIT after its classic version). I hope you have completed tutorials from this book.

Let’s get started. Follow this very simple steps to make your own toggle button.

STEP : 1

Open app inventor designer screen

STEP : 2

Drag one Button and One Label from left hand side user interface palette to viewer section. Then drag one HorizontalArrangement from Layout palette to viewer section and place it in between button and label component. And then viewer section will look like this,

STEP : 3

Now, make the changes to the Label1’s properties

⦁ Text -> “Game is Paused”
⦁ FontSize -> 18
⦁ TextAlignment -> Center

Similarly, make the changes to the Button1’s properties

⦁ Text -> “PLAY”
⦁ FontSize -> 18
⦁ Width -> Fill parent

After doing this, screen will look like this,

STEP : 4

Now, it’s time for logical section. We’ve completed designing and we will add logic to our Toggle Button. Go to Blocks Editor and make the arrangement like this,

Congratulations! You have working toggle button. When you press PLAY button, label text will change to “I am playing” and button text will change to “PAUSE“. Similarly, when you press PAUSE button, label text will change to “Game is paused” and button text will change to “PLAY“.

You can customize as you want. Just put all the blocks in two Procedures logically. If you want to download source code(.aia) file of this app, then here is the link or scan this QR CODE

Toggle.aia

If you have any question, feel free to comment. I will answer ASAP. This is my first blog article. So, please share it to your app inventor developers because they may learn something from this and help me to spread.

On/Off button with URL links away to the website

Very new to this app making, but i was wondering i followed a few youtube video in creating an on / off button that seemed to work quiet good but i am having issues adding a URL that need to connect once and toggle back to the next state without leading away to that URL 

I dont think this should be that difficult to work out but i am now struggling to find a solution that works.

Something isnt quiet right with my block diagram.

Any ideas please.

--

Probably the best thing to do is incorporate a "first run" variable, you will need a variable and another if/then block.

variable set to FALSE

If button ON then set variable to TRUE then go to url

If button ON and variable = TRUE do nothing

much the same for button OFF

You may need to reset your variable in some way to get back to the default state.

--

I managed to follow this Youtube video seen here Toggle Button In MIT App Inventor 2 | Part 3
☘Hello Guys, In this I have shown How to Make Toggle Buttons In MIT app Inventor 2. This is requirement of many projects For Example you can use Toggle Button to control An LED there is no need to use Two buttons for ON & OFF you can use Only One Toggle Button.☘

which works fine but i am not able to setup the logic as mentioned in your reply.

I have tried a few things with little success I have removed the blocks to one side but i am not sure in what order they go or if this is correct

My diagram is seen here.

I am certain someone here has done this sort of layout before.

Apologies but i am not good at coding.

--

In simplest terms a toggle button can work like this:

Could you explain again exactly what you want to happen with your urls, I may have misunderstood first time around?

--

Thank you for your reply, i really appreciate your help

Sorry for any confusion

I will explain in more detail what i am doing

This is a electronic project that i have and it is a ESP8266  wifi module ( please see image below ) that allows me to toggle a relay to ON and Off state at my home through my router, which i control the opening and closing of my front sliding gate in my driveway.

The program that i have loaded is from an  Arduino sketch  program that allows me to do this and yes it does works as can be expected.

Currently i can control this through my web browsers through my pc at home or anywhere outside my network eg http://myipaddress/gateON   or http://myipaddress/gateOFF

ESP8266 wifi module

Now all i need is the app that goes with it that allows me to toggle this state to ON or OFF without redirecting me away to that URL

So this is what i have been trying to do all along

The Youtube video i have been watching is what i need, but i just need to have the URL toggle once only for each state to have my relay working.

Any ideas how i can set the block diagram to do this.

Please.........?

--

You should be able to do something with the Web component, assuming the urls you send have all the information needed to complete the task

(just using web.get works fine for submitting google forms, so do not see why this won't work)

You may need to do more work with the responses (if any) - would be good to get the feedback that the gate is opening / closing, or that at least the message has been received

--

You might want to add a confirmatory choosedialog notifer in the mix too, just to avoid unnecessary button touches / gate openings/closings

e.g. "Are you sure you want to open the gate?"  Yes/No If Yes > send the url to open the gate, otherwise do nothing. Similarly for closing.

--

I have setup up your block diagram as you just shown..

The circuit turn on but this does not toggle back to off state.

Any ideas.

--

Can we understand the gate process?

From what you say we need to send a "Gate ON" url, followed by a "Gate OFF" url ? then set the button in the app to OFF ?

--

I'm sorry, in my haste I relaise i left some blocks out that change the text of the button. Change to this:

--

Thanks Tim you are a god.

That worked great.

This is egg-zak-lee what i wanted.

With regards to your other suggestion i will take this into consideration and see if i am able to do this on my very own.

But for now i am very happy with what i got.

I can now have this on my android device and this will solve a lot of my issues, making it more convenient switching on and off the relay for my front gate.

I will mark this as solved.

--

Having made a mess of the blocks previously, to make up I provide a couple of examples of an extra step to prevent unintended activation of the relay. :)

Got me thinking though:

How do you know the state of the gate. Can your system tell you if it is open/closed, what state the relay is in?

Also, you might want the gate to close after a set time period? You could automate this after an "ON" by using a clock timer to trigger the OFF event.

Similarly you may want to open the gate at a set time?

--