In this tutorial, we're going to build an image viewer app with Makepad. Our image viewer app will support both an image grid and a slideshow view, with the ability to switch between the two. By the time you've reached the end of this tutorial, the image grid will look like this: ![[ImageBrowser.png]]while the slideshow will look like this: ![[Slideshow Image 1.png]] In addition, our app will provide a way to filter images based on a query string. The goal of this tutorial is to familiarise ourselves with Makepad as a UI framework. As we build our app, we'll encounter most of the core concepts involved in building a Makepad app. By the time you're done, you should have a reasonable idea of how you could build your own Makepad app. ## Setup for the Tutorial Makepad is written in Rust, so we'll need to make sure Rust is installed on our system. The recommended way to install Rust is with Rustup, Rust's official toolchain installer. To install it, run the following command in your terminal, and follow the on-screen instructions. ``` curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh ``` ### Additional Setup for Linux On Windows and Mac, Makepad work out of the box. On Linux, however, we need to install some dependencies before it will work. If you're on Ubuntu, you can install the dependencies we need by running the following commands in your terminal: ``` apt-get install clang apt-get install libaudio-dev apt-get install libpulse-dev apt-get install libx11-dev apt-get install libxcursor-dev ``` ## Tutorial Steps The tutorial is divided into several steps. In each step, we'll implement a new feature. Each step builds on the previous one, so we recommend following them in order. - [[1 - Creating a New Cargo Package]] - [[2 - Creating an Empty Window]] - [[3 - Creating an ImageItem]] - [[4 - Creating an ImageRow]] - [[5 - Creating an ImageGrid]] - [[6 - Adding State]] - [[7 - Loading Images]] - [[8 - Creating a SlideshowNavigateButton]] - [[9 - Creating a SlideshowOverlay]] - [[10 - Creating a Slideshow]] - [[11 - Adding More State]] - [[12 - Handling Events]] - [[13 - Creating a MenuBar]] - [[14 - Creating an ImageBrowser]] - [[15 - Switching between Views]] - [[16 - Adding a SearchBox]] - [[17 - Filtering Images]]