# Event Handler Blocks

**URL:** <https://forum.makecode.com/t/event-handler-blocks/5633>\
**Category:** micro:bit extensions\
**Created:** [January 19, 2021, 4:20pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633 "2021-01-19T16:20:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrRSquared](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mrrsquared/32/3074_2.png) [@mrRSquared](https://forum.makecode.com/u/mrRSquared)\
**Post date:** [January 19, 2021, 4:20pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/1 "2021-01-19T16:20:38Z")

</div>

Hello,

I am an FRC mentor, and we just purchased the Freenove [micro:bit mini rover](https://github.com/Freenove/Freenove_Micro_Rover). It is a wonderful device. I am trying to figure out if it is feasible to create a custom interface to teach students how to program using [WPILib conventions](https://github.com/wpilibsuite/allwpilib/blob/master/wpilibjExamples/src/main/java/edu/wpi/first/wpilibj/examples/differentialdrivebot/Robot.java). This will allow students to use this robot to learn how to program a robot with FRC-like syntax in drag and drop programming.

The basic structure I am looking to create is…

When the robot starts \> Do…

Periodically when the robot is running \> Do…

When in Autonomous mode \> Do…

When in teleoperated mode \>Do…

My question is, I do not know how to create a block that wraps (like the forever blocks), and will run once on an event is triggered (or periodically while an event triggered state is true).

I am not incredibly familiar with javascript/typescript, and most of the general event handler docs are either way too specific or way too general for me to apply to this context.

See the attached image for what I would like students to see.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/d/d3d7635ef6a301434cbafea64a9d94cf05d4128d.png)

Any help you could give or docs you could send me to would be appreciated.

---

<div class="post-metadata">

**Author:** ![joshkeys19](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/joshkeys19/32/2182_2.png) [@joshkeys19](https://forum.makecode.com/u/joshkeys19)\
**Post date:** [January 19, 2021, 7:11pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/2 "2021-01-19T19:11:42Z")

</div>

Hi mrRSquared,

The easiest way is something like this inside a namespace:

`
```
//% block="Do something"
export function onYourEvent(codeToFire: () => void): void {
  
}

```

Then somewhere hidden in your code just call that function based on a timer etc. Does that make sense? Start with the custom.ts file to explore.
Thanks,
Josh`

---

<div class="post-metadata">

**Author:** ![mrRSquared](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mrrsquared/32/3074_2.png) [@mrRSquared](https://forum.makecode.com/u/mrRSquared)\
**Post date:** [January 19, 2021, 9:29pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/3 "2021-01-19T21:29:47Z")

</div>

Thank you. That makes sense, and I figured that part out, but I cannot figure out the next step. There are a few pieces here.  
First, if I do as above,

```auto
   
    //% block="Do something"
export function onYourEvent(codeToFire: () => void): void {
  
}

```

Then try to call it, the engine adds a lot to the method call. Let’s say I want to loop it without blocking…

```auto
basic.forever(function () {onYourEvent(function () {
        
    });//it adds the argument (function(){})
	
})

```

When I run it with inputs like so…  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/c/c1295531dadbaeb6ee50621503a795a771dfdf12.png)

The screen always shows zero.  
If I modify it to the following, I can get it to increase to one, but not increase continuously (which is what I expected.

```auto
//% block="Do something"
export function onYourEvent(codeToFire: () => void): void {
    codeToFire();
}

basic.forever(function () {onYourEvent(function () {   
    });	
})

```

So, how do I call that function so that it runs each time it is called? I will work up the framework with the timer later tonight, but basically, I want to make a thread that is the Robot scheduler. It will loop every 20ms. If the mode has not changed, it would just run robotPeriodic(), then the loop (auto or tele), if it had changed, it will run the init() function first.

Thank you for your help. If this works, I feel it will be an incredible educational tool.

---

<div class="post-metadata">

**Author:** ![joshkeys19](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/joshkeys19/32/2182_2.png) [@joshkeys19](https://forum.makecode.com/u/joshkeys19)\
**Post date:** [January 19, 2021, 11:59pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/4 "2021-01-19T23:59:40Z")

</div>

Hi again,

So I think I know what you’re asking. I don’t have a lot of time tonight, but here is a quick example I wrote up and tested in the simulator. The first part I wrote in custom.ts:

`
/**
 * Custom blocks
 */
//% weight=100 color=#0fbc11 icon=""
namespace custom {
```
let nextEvent1Time = 0

let EVENT1_PERIOD = 5000 // Fire every 5 seconds

let EVENT2_PERIOD = 3000 // Fire every 3 seconds

let Event1Fire: (params: any) => void
let Event2Fire: (params: any) => void

//% block="Event1"
export function Event1(codeToFire: () => void): void {
  Event1Fire = codeToFire
}

 
//% block="Event2"
export function Event2(codeToFire: () => void): void {
  Event2Fire = codeToFire
}

basic.forever(function () { //Let's keep a forever loop running inside our custom namespace. You could probably at a basic.pause at the bottom of the loop to slow down how fast it runs.

let nextEvent2Time = 0

if (input.runningTime() > nextEvent1Time) {

    Event1Fire(null) //Fire the code
    nextEvent1Time = input.runningTime() + EVENT1_PERIOD //Set the next timer event
}

if (input.runningTime() > nextEvent2Time) {

    Event2Fire(null) //Fire the code
    nextEvent2Time = input.runningTime() + EVENT2_PERIOD //Set the next timer event
}

```
`

`})
}
`

The next part would go in your main.ts  
`
custom.Event2(function () {
basic.showIcon(IconNames.Butterfly)
})
custom.Event1(function () {
basic.showIcon(IconNames.Heart)
})
`

So every 3 seconds Event2 code is called and every 5 seconds Event1 code is called.

Let me know if that is what you are looking for.

---

<div class="post-metadata">

**Author:** ![mrRSquared](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mrrsquared/32/3074_2.png) [@mrRSquared](https://forum.makecode.com/u/mrRSquared)\
**Post date:** [January 20, 2021, 6:48am UTC](https://forum.makecode.com/t/event-handler-blocks/5633/5 "2021-01-20T06:48:17Z")

</div>

Woot!!!  
That is exactly what I am looking for. I will post an iteration when I get a chance, but this worked, and I can see how I will easily be able to apply it to our context. This is incredible.  
~MrR^2

---

<div class="post-metadata">

**Author:** ![mrRSquared](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mrrsquared/32/3074_2.png) [@mrRSquared](https://forum.makecode.com/u/mrRSquared)\
**Post date:** [January 21, 2021, 4:46pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/6 "2021-01-21T16:46:51Z")

</div>

Hello again,  
Here is the current version of our code. We put everything in custom.ts for now, but It works exactly as expected. Thank you again.

> **[MrRSquared/firstOscatBlockCodeAttempt](https://github.com/MrRSquared/firstOscatBlockCodeAttempt)**
>
> A MakeCode project. Contribute to MrRSquared/firstOscatBlockCodeAttempt development by creating an account on GitHub.

~Mr.R^2

---

<div class="post-metadata">

**Author:** ![mrRSquared](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mrrsquared/32/3074_2.png) [@mrRSquared](https://forum.makecode.com/u/mrRSquared)\
**Post date:** [February 6, 2021, 9:20pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/7 "2021-02-06T21:20:47Z")

</div>

Hello, So, I am making a lot of progress. I want to streamline it a bit, but I am struggling to understand how the variables interact. What I would like is one block that uses an enum value to switch between the different functions. That way, the students will not have to sort through multiple blocks that do the same thing. Here is what I am looking for. I am wondering how to make it work so that changing the event variable changes the function.

![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/f/f58b0f6cff91210daf77f0f5df9c892e90cedefd.png)

---

<div class="post-metadata">

**Author:** ![mrRSquared](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/mrrsquared/32/3074_2.png) [@mrRSquared](https://forum.makecode.com/u/mrRSquared)\
**Post date:** [February 6, 2021, 10:22pm UTC](https://forum.makecode.com/t/event-handler-blocks/5633/8 "2021-02-06T22:22:44Z")

</div>

I figured out one way to accomplish this pretty easily. You can pass the argument into the method and it does not seem to get hung up on multiple instances…

```auto
enum MyEnum {
    //% block="teleopPeriodic()"
    TelePeriodic,
    //% block="autoPeriodic()"
    AutoPeriodic
}
//% block="on $arg"
        export function teleopPeriodic(arg: MyEnum, a: () => void): void {
                if (arg == 0){
                TelePeriodic = a; }
                else {
                    AutoPeriodic = a
                }        
        }
```