## Introduction In this tutorial, we're going to build an image viewer app with Makepad. The goal of this tutorial is to familiarise ourselves with Makepad as a UI framework. As we build our app, we'll encounter many of the core concepts involved in building a Makepad app. By the time we're done, you should have a reasonable idea of how to build a Makepad app. The image viewer app we're going to build will provide two major ways to view images: - As a **slideshow**, which allows us to view one image at a time. - As an **image grid**, which allows us to view multiple images at the same time. By the time you've reached the end of this tutorial, the slideshow will look like this: ![[Slideshow with Image 1.png]] while the image grid will look like this: ![[Image Grid with Animations 1.png]] > [!note] > If you don't feel like typing along, you can find all the code for the tutorial [here](https://github.com/makepad/image_viewer). ## Setup for the Tutorial Before starting the tutorial, let's first make sure we have everything set up. 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 ``` ## Integrating Moly For those of you willing to learn more, the folks from Moly were kind enough to provide a tutorial on how to integrate Moly with Makepad. Moly is a Rust-based LLM client built on top of Robius. You'll find their tutorial in the appendix: [[A - Moly Kit Integration]] To learn more about the Moly project, you can visit their [github page](https://github.com/moxin-org/moly). ## Overview The tutorial is divided into several sections. In each section, we'll implement a new feature. Each section builds on top of the previous one, so we recommend following them in order: - [[1 - Building a Minimal App]] - [[2 - Building a Slideshow]] - [[3 - Making the Slideshow Interactive]] - [[4 - Building an Image Grid]] - [[5 - Making the Image Grid Dynamic]] - [[6 - Switching Between Views]] - [[7 - Adding Animations]] - [[8 - Styling With Shaders]] - Appendix: - [[A - Moly Kit Integration]] ## What's Next Our first goal will be to build a minimal app: [[1 - Building a Minimal App]]