makepad_image_manipulation

This is a simple application used for benchmarking image rendering in Makepad, it consists of a grid of animated images.

The images either rotate, scale or fade out:

makepad_image_grid.mp4

You can find the benchmark results and how to run your own measurements in this document

We also compared Makepad's results against Flutter and Native. You can find their implementations under /benchmark_comparisons

Build Instructions

1. Setup Makepad

Clone the Makepad repository

cd ~
git clone [email protected]:makepad/makepad.git

Change to latest 'rik' branch

git branch rik

Install makepad subcommand for cargo

cargo install --path ~/makepad/tools/cargo_makepad

2. Get Project

Clone the makepad_image_manipulation repo

git clone https://github.com/project-robius/makepad_image_manipulation

3. Android Build

Install Android toolchain (First time)

rustup toolchain install nightly
cargo makepad android install-toolchain

Install app on Android devivce or Android emulator

Open either the Android emulator or connect to a real Android device use adb command to make sure there's a device connected properly

cd ~/makepad_image_manipulation
cargo makepad android run -p makepad_image_manipulation --release

4. iOS Setup & Install

Install IOS toolchain (First time)

rustup toolchain install nightly
cargo makepad apple ios install-toolchain

Install app on Apple devivce or iOS simulator

iOS Setup

For iOS, the process is slightly more complicated. The steps involved are:

1. Enable your iPhone's Developer Mode, please see instructions here: Enable Developer Mode
2. Setup an Apple Developer account
3. Setup an empty skeleton project in XCode
   1. File -> New -> Project to create a new "App"
   2. Set the Product Name as animation (used in --org later)
   3. Set the Organization Identifier to a value of your choice, for this example we will use rs.robius. (used in --app later)
   4. Setup the Project Signing & Capabilities to select the proper team account
4. In XCode, Build/Run this project to install and run the app on the simulator and device
5. Once the simulator and device has the "skeleton" app installed and running properly, then it is ready for Makepad to install its application.

Makepad Install

We will run the cargo makepad apple ios command, similar to Android build above, but there are some 2 to 6 additional parameters that need to be filled in:

--org

First few parts of the organization identifier (which makes up the Bundle Identifier). Usually in the form of com.somecompany or org.someorg This is the same value used to setup the initial skeleton app above. For this example:

rs.robius

--app

The name of the application or the project. This is the same as the Product Name used to setup the initial skeleton app above. In this case:

animation

Install app on IOS simulator

cd ~/makepad_image_manipulation
cargo makepad apple ios \
  --org=rs.robius \
  --app=animation \
  run-sim -p makepad_image_manipulation --release

Install app on IOS device

First run the following command:

cargo makepad apple list

This command will print out the list of all provisioning profiles, signing identities, and device identifiers on the current system. The user has to decide and choose the ones that he/she needs to use for each type. (If you get an error from the command, please follow the iOS Setup instructions above first.)

Once decided, run the folloiwng command and fill in the unique starting characters chosen from the output.

cd ~/makepad_image_manipulation
cargo makepad apple ios \
  --profile=unique-starting-hex-string \
  --cert=UNIQUE_STARTING_HEX_STRING \
  --device=UNIQUE-STARTING-HEX-STRING \
  --org=rs.robius \
  --app=makepad_image_manipulation \
  run-device -p makepad_image_manipulation –release

5. WASM Build

Running the Makepad application as a WASM build is as simple as a single command. The script will automatically generate the necessary index.html and other files and also start a local webserver at port 8010.

Demo

https://wasm.robius.rs/makepad_image_manipulation

Install WASM toolchain (First time)

cargo makepad wasm install-toolchain

Install app as WASM binary for browsers

cargo makepad wasm run -p makepad_image_manipulation --release

After running the command below, just open your browser to http://127.0.0.1:8010/ in order for the app to load and run.

6. MacOS / PC

Although it is a mobile app, Makepad cross-platform means you may run it on desktops if you wish.

cd ~/makepad_image_manipulation
cargo run

or

cd ~/makepad_image_manipulation
cargo run -p makepad_image_manipulation --release

And there should be a desktop application window now running (may need to click on the icon on MacOS's Dock to show it)