1
00:00:00,300 --> 00:00:04,500
In this lecture, we are going to begin defining a function in rust.

2
00:00:04,950 --> 00:00:11,490
The job of this function will be to transform an image into a greyscale image before we get into the

3
00:00:11,490 --> 00:00:12,240
heavy stuff.

4
00:00:12,420 --> 00:00:15,000
We should try to log the file from rust.

5
00:00:15,300 --> 00:00:20,880
At the moment, we're logging the file from JavaScript if the file can be logged from rust.

6
00:00:21,060 --> 00:00:24,690
We can confirm a relationship between JavaScript and Rust.

7
00:00:24,960 --> 00:00:28,260
To begin, let's open the main D.J.s file.

8
00:00:30,690 --> 00:00:36,990
Search for the unload end function on the file reader object inside this function, we are logging the

9
00:00:36,990 --> 00:00:38,640
base 64 variable.

10
00:00:38,910 --> 00:00:44,580
Let's replace the console log function with a function called Rust APT Greyscale.

11
00:00:44,850 --> 00:00:46,770
The argument can stay in place.

12
00:00:49,430 --> 00:00:56,180
The rust out variable is a module like all modules we can access methods and properties exported by

13
00:00:56,180 --> 00:00:56,900
the module.

14
00:00:57,260 --> 00:01:00,530
You may get an error if you're running web pack in the background.

15
00:01:00,830 --> 00:01:03,410
It's because we haven't defined this function.

16
00:01:03,710 --> 00:01:05,060
Let's take care of that.

17
00:01:05,360 --> 00:01:08,000
Open the library dot rc file.

18
00:01:10,450 --> 00:01:13,840
Inside this file define a function called grey scale.

19
00:01:16,350 --> 00:01:22,980
As we learned previously, we are expecting a string from JavaScript in the argument list at an argument

20
00:01:22,980 --> 00:01:24,600
called encoded file.

21
00:01:24,900 --> 00:01:27,900
The tape will be set to string, which will be borrowed.

22
00:01:30,380 --> 00:01:34,760
We are borrowing this string because we're not going to update this string directly.

23
00:01:35,090 --> 00:01:39,980
The purpose of encoding the file was to transfer it between JavaScript and Rust.

24
00:01:40,340 --> 00:01:41,420
Mission accomplished.

25
00:01:41,690 --> 00:01:46,670
Once we receive the file, we're going to transform it back into binary data.

26
00:01:47,000 --> 00:01:51,260
Once we have the binary data, we can begin to manipulate the image.

27
00:01:51,830 --> 00:01:55,040
It is possible to manipulate an image through a string.

28
00:01:55,370 --> 00:01:58,250
Unfortunately, it's not ideal or common.

29
00:01:58,610 --> 00:02:02,540
We're not going to go through the trouble of manipulating images with strings.

30
00:02:02,870 --> 00:02:05,510
It's much easier to work with binary data.

31
00:02:05,840 --> 00:02:10,130
Luckily, base64 is a highly popular encoding format.

32
00:02:10,460 --> 00:02:14,180
Rust has support for decoding base 64 strings.

33
00:02:15,390 --> 00:02:19,560
Before we get there, let's log the string to confirm it's been transferred.

34
00:02:19,950 --> 00:02:23,460
First, we need to expose this function to JavaScript.

35
00:02:23,790 --> 00:02:27,930
By default, functions are not accessible to external files.

36
00:02:28,230 --> 00:02:33,450
However, we can make a function public by adding the public key word to the function.

37
00:02:36,170 --> 00:02:39,620
The public key word will make a function public trust.

38
00:02:39,890 --> 00:02:43,010
However, it doesn't make it public to JavaScript.

39
00:02:43,370 --> 00:02:51,030
Luckily, the WebAssembly Bind Jen Crate can export functions to JavaScript above the function.

40
00:02:51,050 --> 00:02:55,640
We're going to add a hash character, followed by a pair of square brackets.

41
00:02:56,820 --> 00:03:03,090
I'm introducing a new feature called Macro Attributes, Attributes, or a feature for running macros

42
00:03:03,090 --> 00:03:03,840
on a function.

43
00:03:04,140 --> 00:03:11,250
So far, we've used macros to create values, but what if we want to apply a macro to a function definition?

44
00:03:11,580 --> 00:03:15,030
We can use attributes to run macros on functions.

45
00:03:15,330 --> 00:03:19,090
The name of the macro can be written inside the square brackets.

46
00:03:19,380 --> 00:03:23,190
For this example, we're going to run the web assembly bind.

47
00:03:23,190 --> 00:03:26,910
Jen Prelude Web Assembly Bind Jen Macro.

48
00:03:29,400 --> 00:03:36,420
What a mouthful the vine gin crate exports a macro for handling the action of exporting a function to

49
00:03:36,420 --> 00:03:37,260
JavaScript.

50
00:03:37,650 --> 00:03:41,550
The actual macro is the Bind Gin portion of this code.

51
00:03:41,940 --> 00:03:44,730
We may need to export multiple functions.

52
00:03:45,030 --> 00:03:48,150
I think it would be annoying to constantly type this line.

53
00:03:48,510 --> 00:03:53,500
We can shorten this line by using the use keyword at the top of the file.

54
00:03:53,640 --> 00:03:55,140
Add the use keyword.

55
00:03:56,720 --> 00:04:02,480
They use keyword allows us to access a specific function or macro from within a crate.

56
00:04:02,900 --> 00:04:07,490
We'll be able to reference the macro by its name instead of typing the full path.

57
00:04:07,880 --> 00:04:09,680
Let's copy and paste the path.

58
00:04:12,230 --> 00:04:16,010
Next, we can shorten the macro to just bind, Jen.

59
00:04:16,339 --> 00:04:18,050
This results in the same thing.

60
00:04:18,380 --> 00:04:21,380
It's an optional step, but can make your code readable.

61
00:04:21,649 --> 00:04:28,700
In some examples, you may see developers replace the Bind Gen Macro with a star character in the used

62
00:04:28,700 --> 00:04:29,360
statement.

63
00:04:29,660 --> 00:04:35,750
The difference is that the star character will shorten all functions and macros defined under the prelude

64
00:04:35,750 --> 00:04:36,230
path.

65
00:04:36,620 --> 00:04:38,030
Either solution works.

66
00:04:38,390 --> 00:04:41,060
Feel free to use whichever solution you prefer.

67
00:04:41,660 --> 00:04:44,720
The next step is to begin logging the encoded file.

68
00:04:44,960 --> 00:04:47,510
We have two options at our disposal.

69
00:04:47,930 --> 00:04:52,070
We can write the code for logging of value or we can use a crate.

70
00:04:52,610 --> 00:04:54,740
I think using a crate will be easier.

71
00:04:54,980 --> 00:04:56,990
You'll likely come across the crate.

72
00:04:56,990 --> 00:05:03,230
I'm about to mention in the resource section of this lecture, I provide a link to a crate called Web

73
00:05:03,230 --> 00:05:03,830
System.

74
00:05:06,390 --> 00:05:13,080
The weapons system crate exports a set of JavaScript functions to rust, this trade is completely different

75
00:05:13,080 --> 00:05:19,620
from the bind generate the buying and crate exports functions, but it does not define the functions

76
00:05:19,620 --> 00:05:20,400
themselves.

77
00:05:20,640 --> 00:05:27,150
We are responsible for writing the logic, whereas the web system crate exports JavaScript functions

78
00:05:27,150 --> 00:05:28,560
defined by their browser.

79
00:05:28,860 --> 00:05:31,680
This includes the console log function.

80
00:05:32,010 --> 00:05:34,800
Let's open the cargo configuration file.

81
00:05:37,390 --> 00:05:41,650
Next, at a table called Dependences Dot Web System.

82
00:05:44,160 --> 00:05:48,300
Normally, dependencies can be listed under the Dependencies table.

83
00:05:48,600 --> 00:05:52,350
However, cargo is a very efficient package manager.

84
00:05:52,770 --> 00:05:57,240
We have the option of partially importing the features we need from a crate.

85
00:05:57,570 --> 00:06:00,120
We don't need to download the entire package.

86
00:06:00,390 --> 00:06:05,670
The Bind Gin Crate is lightweight, but the Webb System Crate is not.

87
00:06:06,240 --> 00:06:12,360
We can specify a list of features by creating a separate table with the name of the crate appended at

88
00:06:12,360 --> 00:06:13,860
the end of the table name.

89
00:06:14,310 --> 00:06:18,660
Below this table, we can set the version by adding the version option.

90
00:06:18,990 --> 00:06:22,260
The latest version is zero point three point four.

91
00:06:24,970 --> 00:06:31,210
Next, we can add an option called features, which will be an array of features to download in this

92
00:06:31,210 --> 00:06:31,750
array.

93
00:06:31,810 --> 00:06:34,270
We're going to download the console feature.

94
00:06:35,850 --> 00:06:41,130
The console feature will export Java Scripts console functions to our robust project.

95
00:06:41,430 --> 00:06:42,840
We don't need anything else.

96
00:06:43,020 --> 00:06:45,130
So let's go back to the rust file.

97
00:06:45,750 --> 00:06:46,860
We can start calling.

98
00:06:46,860 --> 00:06:53,070
The web system creates functions, but we should add there paths below the first use statement.

99
00:06:53,280 --> 00:06:54,210
Add another one.

100
00:06:54,570 --> 00:06:59,970
We're going to add the following path web system console log one.

101
00:07:02,710 --> 00:07:06,610
The Web System Crate defines several logging functions.

102
00:07:06,910 --> 00:07:10,030
The number refers to how many values can be launched.

103
00:07:10,360 --> 00:07:17,680
For example, the long one function will log one value, the log to function will log two values, so

104
00:07:17,680 --> 00:07:18,670
on and so forth.

105
00:07:18,970 --> 00:07:21,010
We don't need the other log functions.

106
00:07:21,160 --> 00:07:22,720
This function will suffice.

107
00:07:23,050 --> 00:07:29,410
We can make our code readable by adding an alias instead of referring to the function as log one.

108
00:07:29,620 --> 00:07:32,980
We can add the as keyword to create an alias.

109
00:07:33,310 --> 00:07:35,830
The name of the alias will be called log.

110
00:07:38,430 --> 00:07:44,280
Let's use our new function inside the greyscale function called this function with the encoded file

111
00:07:44,280 --> 00:07:44,970
variable.

112
00:07:45,270 --> 00:07:47,370
This function wants to borrow the string.

113
00:07:47,700 --> 00:07:49,950
We'll need to add the ampersand symbol.

114
00:07:52,460 --> 00:07:54,140
We're going to receive an error.

115
00:07:54,320 --> 00:07:55,440
Do you understand why?

116
00:07:55,460 --> 00:07:57,680
Let's hover our mouse over this function.

117
00:07:58,070 --> 00:08:01,580
This function is expecting a type called juice value.

118
00:08:02,120 --> 00:08:04,130
However, we're passing in a string.

119
00:08:04,860 --> 00:08:08,000
Strings are not equivalent to JavaScript strings.

120
00:08:08,450 --> 00:08:11,840
At the end of the day, we're calling a JavaScript function.

121
00:08:11,960 --> 00:08:18,800
We need to perform type conversion after the encoded file argument SINI function called into.

122
00:08:21,390 --> 00:08:27,600
This function is one of the most interesting features of rust type conversion can be performed by calling

123
00:08:27,600 --> 00:08:28,770
the into function.

124
00:08:29,070 --> 00:08:35,429
The new function will intelligently detect the data type where converting to it understands we're trying

125
00:08:35,429 --> 00:08:38,220
to convert a string into a a.j.'s value.

126
00:08:38,700 --> 00:08:41,970
There's a lot more going on, but that's the basics of things.

127
00:08:42,210 --> 00:08:44,790
Let's save our file and open the browser.

128
00:08:45,360 --> 00:08:47,790
I have web pack running in the background.

129
00:08:48,030 --> 00:08:52,950
I will always have it running for the remainder of this course with the console opened.

130
00:08:53,070 --> 00:08:54,720
I'm going to upload a file.

131
00:08:57,260 --> 00:08:57,860
Wow.

132
00:08:57,920 --> 00:09:01,010
We've successfully transferred the file to rust.

133
00:09:01,250 --> 00:09:05,750
It's magically logging the same value we logged in our JavaScript file.

134
00:09:05,990 --> 00:09:07,130
Isn't that amazing?

135
00:09:07,400 --> 00:09:09,920
It's time to start transforming the image.

136
00:09:10,190 --> 00:09:13,970
Let's begin transforming our images in the next lecture.