Getting The Pixels and Ethereum Events

[00:00 - 00:06] Our contract has a million pixels. At some point, we're going to want to draw the image that all the pixels create .

[00:07 - 00:12] Our current pixels method lets us retrieve one pixel at a time. That would take a million calls.

[00:13 - 00:21] I'm sure we can do better than that. A first try might be to create a function getPixels, which just returns them all.

[00:22 - 00:30] If you try this, it may or may not work. It will be slow either way, because it's a good amount of data.

[00:31 - 00:41] Another idea we might try is to just get each row. This will work in a pinch, but it still requires a thousand calls, one for each row.

[00:42 - 00:52] When we build the UI, we probably want to cache the image, so we don't have to keep reading it from the blockchain. If we had a script to periodically recreate the image, making a thousand local calls isn't that big of a deal.

[00:53 - 01:02] However, it would be great to have a real-time component to this page. We want any visitor to this page to automatically see any new pixels the instant that they're purchased.

[01:03 - 01:11] And thankfully, Ethereum has some mechanisms for this, so we don't have to read every pixel to find out what changed. The mechanism is Ethereum Events.

[01:12 - 01:20] The idea with Events is that our contracts can emit events at certain points in our code. These events can be indexed, which means we can find specific events very quickly.

[01:21 - 01:34] In our case, we're going to emit a pixel-changed event whenever a pixel changes . Later on, when we build the UI, we will subscribe to these events using Web3 over WebSockets, and automatically update each pixel as it changes.

[01:35 - 01:42] To specify an event in Solidity, we use the Event keyword. We'll type event pixel-changed, and it will have three arguments.

[01:43 - 01:50] The x position, the y position, and the color. We emit an event by using parentheses like we're invoking a function.

[01:51 - 01:58] Here we can add this event to Color Pixel. Now when we call Color Pixel, Remix will also show us the logged event as well.

[01:59 - 02:02] There are three important things to know about events. The event can be indexed.

[02:03 - 02:10] The data cannot be accessed by the smart contract. And the data is available for as long as the blocked data is available.

[02:11 - 02:22] Event parameters can be indexed by using the indexed keyword. When you index an argument, you can search for those values, but know that you cannot retrieve the values themselves.

[02:23 - 02:30] In our case, we don't need any indexed arguments. Our event is already indexed to the contract and the event name, and we don't need to index it beyond that.

[02:31 - 02:36] Data emitted by events is not accessible to our smart contract. This data will live in the blockchain lock.

[02:37 - 02:46] Its function is primarily for use by tooling outside of our contract, that is in our Dapps interface. Lastly, these logs are available for as long as the blocked data is available.

[02:47 - 02:55] The consequence here is that these logs are already on our machine alongside our blockchain. We can search for logs using filters such as the block number.

[02:56 - 03:04] That is we can say, "Show me all events for Pixel changed after block 3000." Events can be used as a convenient record of changes.

[03:05 - 03:13] They also can be used for optimizations for your UI. For example, in the million Ether page code, what we have is an X-Y grid of a million pixels.

[03:14 - 03:28] In the naive case, if we wanted to draw the whole image, we had to make one million calls, one for each pixel. However, with events, we can snapshot the image periodically and then query for the events that made changes after that point.

[03:29 - 03:39] But the general idea is that you can emit events in your code, and then your tooling and UI outside of the EVM can query and subscribe to those events. We'll do that when we build our UIs.

[03:40 - 03:54] . . .

[03:55 - 04:09] . . .

[04:10 - 04:24] . . .

[04:25 - 04:39] . . .

[04:40 - 04:54] . . .

[04:55 - 05:09] . . .

[05:10 - 05:24] . . .

[05:25 - 05:39] . . .

[05:40 - 05:54] . . .

[05:55 - 06:04] . .