makepad/makepad.github.io

Github pages repo with a wasm build and the old js makepad things.

Contact

Rik Arends: @rikarends on twitter, https://fosstodon.org/@rikarends#

Eddy Bruel: @ejpbruel on twitter

Sebastian Michailidis: @SebMichailidis on twitter

Our discord channel for Makepad: https://discord.gg/adqBRq7Ece

Most recent talk about makepad: https://www.youtube.com/watch?v=rC4FCS-oMpg

Makepad

Overview

This is the repository for Makepad, a new way to build UIs in Rust for both native and the web.

Makepad consists of Makepad Framework and Makepad Studio.

Makepad Framework is our UI framework. It consists of multiple crates, but the top level crate is makepad-widgets. For a further explanation of Makepad Framework, please see the README for that crate.

Makepad Studio is a prototype of an IDE that we've built using Makepad Framework. It's still under heavy development, but our eventual goal with Makepad Studio is to create an IDE that enables the design of an application to be changed at runtime. The main crate for Makepad Studio is makepad-studio. Please see the README for that crate for more.

Demo links:

makepad-example-fractal-zoom

makepad-example-ironfish

makepad-example-simple

Prerequisites

To build the Makepad crates you first need to install Rust. https://www.rust-lang.org/tools/install

Our native builds work on the stable Rust toolchain. However, some of the errors generated by Makepad at runtime (particulary those originating in our DSL) do not contain line information unless you use the nightly Rust toolchain. Moreover, our web builds only work on nightly for now. For this reason, we recommend that you build Makepad using the nightly Rust toolchain.

For the non standard build targets (apple ios, apple tvos, android, wasm) we have a buildtool called 'cargo-makepad' that you need to install.

Install it from the repo:

cargo install --path=./tools/cargo_makepad

Or install it from cargo (might be behind the repo)

cargo install cargo-makepad

Now this tool can be used to install toolchains per platform needed

cargo makepad wasm install-toolchain

cargo makepad apple ios install-toolchain

cargo makepad apple tvos install-toolchain

cargo makepad android --abi=all install-toolchain

Running makepad studio

Makepad studio allows you to easily build and view the examples, and it uses cargo-makepad internally so be sure to install cargo-makepad as shown above.

cargo run -p makepad-studio --release

Or install it from cargo (might be behind the repo)

cargo install makepad-studio

If you build the wasm applications, you can open it on:

http://127.0.0.1:8010

Build & Run Commands

Makepad is a cross-platform UI framework written in Rust. It is in active development, but is already usable to build quick prototypes and simple (or even complicated UI) applications.

One of the key features of the Makepad is its ability to simply, and quickly, build and run applications on multiple platforms, including MacOS, Windows, Linux, Android, iOS, and WebAssembly.

Here are the current/latest instructions on how to build and run Makepad applications on the different platforms.

Assumptions

We will assume the following: Name of application: makepad-example-simple

It can be changed to any one of the existing example apps in the Makepad examples folder.

Build & Run Instructions

Follow step 1 commands below for initial setup of the Makepad build and run environment. After step 2, you may choose any one or more of the platforms you're interested in building for.

1. Setup Makepad

Replace projects with your own directory name.

cd ~/projects

Clone the Makepad repository

git clone https://github.com/makepad/makepad.git

or

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

Change to latest 'rik' branch (Optional)

cd ~/projects/makepad
git branch rik

Install makepad subcommand for cargo

cd ~/projects/makepad
cargo install --path ./tools/cargo_makepad

Install platform toolchains

rustup toolchain install nightly

2. Go To Examples folder (Optional)

cd ~/projects/makepad/examples
ls -l

All examples in this directory have the application name of makepad-example- prefix plus the name of directory.

3. MacOS / PC

Running on Desktop is the quickest way to try out an example app.

cd ~/projects/makepad/examples/simple
cargo run

or

cd ~/projects/makepad
cargo run -p makepad-example-simple

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

4. Android Build

Install Android toolchain (First time)

cargo makepad android install-toolchain

Install app on Android device or Android emulator

Open either the Android emulator or connect to a real Android device use adb command to make sure there's a single device connected properly, then install and run as below:

cd ~/projects/makepad
cargo makepad android run -p makepad-example-simple --release

The application will be installed and launch on either the emulator or device.

5. iOS Setup & Install

Install iOS toolchain (First time)

xcode-select --install
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 makepad-example-simple (used in --app later)
   3. Set the Organization Identifier to a value of your choice, for this example we will use my.test (used in --org 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. Usually in the form of com.somecompany or org.orgname, etc. This is the same value used to setup the initial skeleton app above. For this example:

my.test

--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:

makepad-example-simple

Install app on iOS simulator

cd ~/projects/makepad
cargo makepad apple ios \
  --org=my.test \
  --app=makepad-example-simple \
  run-sim -p makepad-example-simple --release

Install app on iOS device

For installing on real device, the process is more involved due to possibility of multiple profiles and signing identities and target devices. For this reason, Makepad provides a list command to show all the local provisioning profiles, signing identities and connected devices, which can be used as the value for the subsequent command arguments.

For example, first run the following command:

cd ~/projects/makepad
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.

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

cargo makepad apple ios \
 --profile=unique-starting-hex-string-of-provisioning-profiles \
 --cert=UNIQUE_STARTING_HEX_STRING-of-signing-certificates \
 --device-identifier=UNIQUE-STARTING-HEX-STRING-of-devices \
 --org=my.test \
 --app=makepad-example-simple \
 run-device -p makepad-example-simple –release
 

The application will be installed and launched on either the emulator or real device. (Make sure the device is connected and unlocked)

6. WASM Build

Running the Makepad application as a WASM build is as simple as a single command. The sript will automatically generate the necessary index.html and other files and also start a local webserver at port 8010. 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.

Install WASM toolchain (First time)

cargo makepad wasm install-toolchain

Install app as WASM binary for browsers

cargo makepad wasm run -p makepad-example-simple --release

---

Makepad Commands Quick Reference

Cargo Tools Installations

These are commands that need to be run at least once initially to setup Makepad development environments. They should also be run once in a while or when there are updates to the cargo_makepad script.

rustup update
rustup install nightly
rustup toolchain install nightly

cd ~/projects/makepad
cargo install --path ./tools/cargo_makepad
cargo makepad android install-toolchain
cargo makepad apple ios install-toolchain
cargo makepad apple tv install-toolchain
cargo makepad wasm install-toolchain

Android

Command for installing the app onto an iOS Simulator.

cargo makepad android run -p makepad-example-simple --release

cargo makepad android run -p makepad-example-fractal-zoom --release

cargo makepad android run -p makepad-example-ironfish --release

cargo makepad android run -p makepad-example-news-feed --release

iOS Simulator

Command for installing the app onto an iOS Simulator.

cargo makepad apple ios --org=my.test --app=makepad-example-simple run-sim -p makepad-example-simple --release

cargo makepad apple ios --org=my.test --app=makepad-example-fractal-zoom run-sim -p makepad-example-fractal-zoom --release

cargo makepad apple ios --org=my.test --app=makepad-example-ironfish run-sim -p makepad-example-ironfish --release

cargo makepad apple ios --org=my.test --app=makepad-example-news-feed run-sim -p makepad-example-news-feed --release

iOS Device

Command for installing the app onto a physical iOS device.

See Step 5 above for more detailed instructions.

cargo makepad apple ios --org=my.test --profile=ABC --cert=DEF --device=MyiPhone --app=makepad-example-simple run-device -p makepad-example-simple --release

cargo makepad apple ios --org=my.test --profile=ABC --cert=DEF --device=MyiPhone --app=makepad-example-fractal-zoom run-device -p makepad-example-fractal-zoom --release

cargo makepad apple ios --org=my.test --profile=ABC --cert=DEF --device=MyiPhone --app=makepad-example-ironfish -run-device -p makepad-example-ironfish --release

cargo makepad apple ios --org=my.test --profile=ABC --cert=DEF --device=MyiPhone --app=makepad-example-news-feed run-device -p makepad-example-news-feed --release

Cargo Check Builds

Command to check that the compilation passes for all Makepad supported platforms: (Will use 100% CPU and cause hang machine, only try on high-end systems)

cargo makepad check install-toolchain
cargo makepad check all

makepad.github.io's Issues

How to encode / use additional fonts?

Is there a particular config/command you are using for msdfgen?

Has the included fontencoder source deviated from Chlumsky/msdfgen? wondering if output from latest (v1.4) ought to work.

Playing around with HUD like UI, need me some Inconsolata :)

@makepaddev, if helpful, I can PR in a few more open-source fonts.

weird artefacts during scrolling

I went to: https://makepad.github.io/makepad.html
and scrolled editor:

browser: Chrome 58.0.3029.110 (64-bit)
system: OS X El Capitan 10.11.16

Selecting text slow on Firefox

Selecting text takes a significant time to catch up to the moving cursor.

Screehshot (left - firefox v58, right - chrome): https://gfycat.com/LeftPresentDormouse

[Question] Could this be used to develop cross platform webapps?

Hello, im very novice js developer, mostly focused on python, however I saw the video presentation for this library in youtube and was impressed by its performance.

Because the examples shown in the video where eluded to work on mobile, and I have tried it they do,
couldn't than webgl with a wrapping library be used to develop apps that run native .. I mean that they can than be installed thru the app stores of its respected platform.

Transition to state with multiple timing/duration values

for example, when transitioning via setState('selected', false, {dx: this.dx}) to state below, how can I animate Bg props with different timing functions than Text props? Is there a way to configure this in the state tree or a lower level API? I'm assuming nested states are not possible? I can imagine how to do manually in the pixel () render call but that's no fun! Considering falling back to rapidly setting multiple states in consecutive frame updates to coordinate the animation, but that feels kind of wrong too...

    ...
    selected:{
	duration:0.3,
	time:{fn:'ease',begin:0,end:10},
	to:{
		Text:{
			dx:0,
		},
		Icon:{
			dx:0,
		},
		Bg:{
			color:'#00000010',
			dx:0,
			selected:1,
		}
	}
     ...
},

[Question] Possible collaboration for scene graph, layout logic

Removing a lot of the rendering cruft in the browser is something I'm particularly interested in. Also having a direct API to GL from JavaScript, instead of string casting and the convoluted pipelines that exist on the web today.

I'm currently working on my own "layout" engine. It can be found here. It's mainly based on streams and FRP principles. It takes DOM events as input and it outputs CSS3 transforms, opacities and sizes (non-accelerated). That's all it does, and all it will ever do. It could be augmented to output to your GPU layer, while providing powerful scene graph, user input, primitives, a simple physics engine, and other things.

Some old examples can be seen here. They work on every modern device, but are designed for mobile devices.

Here's a newer example of a 3D scrollview (implemented in DOM):

Odd file locations for syntax errors

with the following js program:

y = 1
y += 2
y *= 3

console.log("hello, world")

I find that makepad says can't find variable y at the line containing "hello, world"

If I type

y = 1
y += 2
y *= 3

console.log("hello, world")

The error is reported in the middle of the line containing y *= 3

Both times I would have expected the errors to occur at the first occurence of y

Curious: what powers the UI?

Cool project! Is it a Rust UI lib that powers the tabs, text editor, etc? Or is it built from scratch for Makepad?

Memory Leak

Hey bro... I accidentally left the online makepad demo running overnight and when I checked the Task Manager in chrome (I'm testing on a Parallels Windows 10 VM, this morning, ) I noticed that the memory had grown substantially..

In case you hadn't noticed this I thought I would report it.

While I'm here I have a question... Your turtle graphics implementation.. did you write that from scratch or port it in from somewhere? If it's borrowed do you mind sharing the original source location? Thanks.

/W

[Improvement] "find" feature for the editor

when I press Ctrl + F to find text in the editor I cant find what I am looking for. I know it is in the canvas so it will be hard to implement.

How to apply alpha to background

I'm attempting to apply makepad output atop something like an a-frame scene, but I can't get any alpha through the canvas. Setting alpha:true on the canvas opt & an initial gl.clear doesnt seem to help for any the examples or anything I can contrive.

There is clearly deep ideas in here, @makepaddev any pointers?