andodeki/makepad-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

first commit

Browse source
This commit is contained in:
aOK 2023-12-11 23:15:58 +03:00
commit 6fae59285a
15 changed files with 282 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
/dist/
/target/
/Cargo.lock

3
.makepadignore Normal file
View file

@ -0,0 +1,3 @@
/src
/public
/Cargo.toml

3
.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
}

5
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,5 @@
{
"emmet.includeLanguages": {
"rust": "html"
}
}

26
Cargo.toml Normal file
View file

@ -0,0 +1,26 @@
[package]
name = "makepad-template"
version = "0.0.0"
edition = "2021"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[profile.small]
inherits = "release"
#debug = true
opt-level = 'z' # Optimize for size
lto = true # Enable link-time optimization
codegen-units = 1 # Reduce number of codegen units to increase optimizations
panic = 'abort' # Abort on panic
strip = true
[profile.release]
opt-level = "s"
lto = true
codegen-units = 1
panic = "abort"
strip = true
[dependencies]
# makepad-widgets = { version = "0.6.0" }
makepad-widgets = { git = "https://github.com/makepad/makepad/", branch = "rik" }

34
README.md Normal file
View file

@ -0,0 +1,34 @@
# Makepad UI
This template should help get you started developing with Makepad Rust UI.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).
# Desktop in Debug Mode
cargo run
# Desktop in Release Mode
cargo run --release
# Desktop in small size
cargo run --profile=small
# Android
cargo makepad android run --release
# IOS Simulator
cargo makepad apple ios --org=my.test --app=makepad-template run-sim --release
# IOS Device
cargo makepad apple ios --org-id=123456 --org=my.test --app=makepad-template run-device makepad-template --release
# Cargo Check Builds
cargo makepad check install-toolchain
cargo makepad check all
cargo makepad wasm install-toolchain
cargo makepad apple ios install-toolchain
cargo makepad android --abi=all install-toolchain

34
index.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Makepad Template</title>
<script type='module'>
import {WasmWebGL} from "/makepad-template/platform/src/os/web/web_gl.js"
const wasm = await WasmWebGL.fetch_and_instantiate_wasm(
"makepad-template/target/wasm32-unknown-unknown/release/makepad-template.wasm"
);
class MyWasmApp {
constructor(wasm) {
let canvas = document.getElementsByClassName('full_canvas')[0];
this.webgl = new WasmWebGL (wasm, this, canvas);
}
}
let app = new MyWasmApp(wasm);
</script>
<script type='module' src='/makepad-template/platform/src/os/web/auto_reload.js'></script>
<link rel='stylesheet' type='text/css' href='/makepad-template/platform/src/os/web/full_canvas.css'>
</head>
<body>
<canvas class='full_canvas'></canvas>
<div class='canvas_loader' >
<div style=''>
Loading..
</div>
</div>
</body>
</html>

BIN
resources/makepad.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

42
resources/makepad.svg Normal file
View file

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="800px" viewBox="0 0 7067 1035" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-54.1122,-304.466)">
<!-- <rect id="ArtBoard5" x="54.112" y="304.466" width="7066.93" height="1034.07" style="fill:none;"/> -->
<g>
<clipPath id="_clip1">
<rect x="54.112" y="304.466" width="7066.93" height="1034.07"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(2.46433,0,0,0.355348,0.112216,246.617)">
<g transform="matrix(0.412987,0,0,2.51071,-14964.8,-23383.5)">
<path d="M37739.3,9977.06L38019.7,10537.9L37458.9,10537.9L37739.3,9977.06Z" style="fill:rgb(255,92,57);"/>
</g>
<g transform="matrix(-0.412987,0,0,2.51071,15723.6,-23383.5)">
<path d="M37739.3,9977.06L38019.7,10537.9L37458.9,10537.9L37739.3,9977.06Z" style="fill:rgb(255,92,57);"/>
</g>
<g transform="matrix(0.412987,0,0,2.51071,-15087.3,-24885.4)">
<path d="M37739.3,9977.06L38019.7,10537.9L37458.9,10537.9L37739.3,9977.06Z" style="fill:rgb(255,92,57);"/>
</g>
<g transform="matrix(-0.412987,0,0,2.51071,15846,-24885.4)">
<path d="M37739.3,9977.06L38019.7,10537.9L37458.9,10537.9L37739.3,9977.06Z" style="fill:rgb(255,92,57);"/>
</g>
<g transform="matrix(-0.412987,-3.50746e-16,4.43366e-17,-2.51071,16084.4,28088.3)">
<path d="M37739.3,9977.06L38019.7,10537.9L37458.9,10537.9L37739.3,9977.06Z" style="fill:rgb(255,92,57);"/>
</g>
<g transform="matrix(0.412987,-3.50746e-16,-4.43366e-17,-2.51071,-15325.6,28088.3)">
<path d="M37739.3,9977.06L38019.7,10537.9L37458.9,10537.9L37739.3,9977.06Z" style="fill:rgb(255,92,57);"/>
</g>
</g>
<g transform="matrix(83.3091,0,0,83.3091,-43233.8,-47386.6)">
<path d="M544.422,582.292L546.018,582.292L546.63,579.016C546.75,578.38 546.87,577.936 547.026,577.672C547.302,577.204 547.746,576.952 548.31,576.952C548.718,576.952 549.054,577.096 549.222,577.348C549.318,577.492 549.366,577.684 549.366,577.948C549.366,578.14 549.33,578.368 549.282,578.644L548.61,582.292L550.206,582.292L550.818,579.016C550.95,578.296 551.07,577.924 551.274,577.624C551.574,577.192 552.018,576.952 552.534,576.952C552.918,576.952 553.23,577.084 553.398,577.336C553.506,577.48 553.554,577.672 553.554,577.948C553.554,578.14 553.518,578.368 553.47,578.644L552.798,582.292L554.394,582.292L555.102,578.452C555.162,578.116 555.198,577.804 555.198,577.528C555.198,577.168 555.15,576.856 555.054,576.604C554.766,575.896 553.998,575.488 552.954,575.488C552.018,575.488 551.31,575.8 550.638,576.52C550.314,575.788 549.798,575.488 548.874,575.488C548.094,575.488 547.578,575.704 547.002,576.268L547.122,575.644L545.658,575.644L544.422,582.292Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
<path d="M563.61,575.644L562.146,575.644L561.978,576.532C561.558,575.8 560.958,575.488 559.998,575.488C558.03,575.488 556.338,576.964 555.966,578.992C555.918,579.244 555.894,579.484 555.894,579.724C555.894,581.344 556.986,582.448 558.678,582.448C559.614,582.448 560.298,582.16 561.066,581.428L560.91,582.292L562.374,582.292L563.61,575.644ZM559.866,576.952C560.874,576.952 561.522,577.588 561.522,578.548C561.522,578.692 561.498,578.836 561.474,578.992C561.258,580.18 560.322,580.984 559.17,580.984C558.15,580.984 557.526,580.372 557.526,579.448C557.526,579.316 557.538,579.172 557.562,579.028C557.79,577.828 558.75,576.952 559.866,576.952Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
<path d="M563.67,582.292L565.266,582.292L565.842,579.184L567.534,582.292L569.682,582.292L567.546,578.896L570.534,575.644L568.626,575.644L565.914,578.776L566.91,573.424L565.314,573.424L563.67,582.292Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
<path d="M576.918,579.676C577.014,579.448 577.05,579.304 577.098,579.064C577.146,578.8 577.17,578.548 577.17,578.308C577.17,576.64 576.054,575.488 574.326,575.488C572.37,575.488 570.534,577.036 570.174,578.992C570.138,579.208 570.114,579.424 570.114,579.628C570.114,581.26 571.338,582.448 573.138,582.448C574.23,582.448 575.142,582.064 575.994,581.248C576.306,580.936 576.522,580.66 576.69,580.324L574.95,580.324C574.458,580.804 574.026,580.984 573.366,580.984C572.418,580.984 571.818,580.48 571.77,579.676L576.918,579.676ZM571.986,578.272C572.394,577.408 573.126,576.952 574.074,576.952C575.058,576.952 575.622,577.42 575.67,578.272L571.986,578.272Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
<path d="M577.074,584.512L578.67,584.512L579.198,581.668C579.714,582.208 580.278,582.448 581.094,582.448C583.014,582.448 584.694,580.96 585.066,578.944C585.114,578.692 585.138,578.44 585.138,578.2C585.138,576.592 584.07,575.488 582.39,575.488C581.49,575.488 580.662,575.812 580.038,576.424L580.182,575.644L578.718,575.644L577.074,584.512ZM581.874,576.952C582.858,576.952 583.494,577.612 583.494,578.548C583.494,578.68 583.47,578.836 583.446,578.98C583.242,580.108 582.246,580.984 581.178,580.984C580.206,580.984 579.558,580.312 579.558,579.388C579.558,579.256 579.57,579.124 579.594,578.992C579.81,577.828 580.794,576.952 581.874,576.952Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
<path d="M593.37,575.644L591.906,575.644L591.738,576.532C591.318,575.8 590.718,575.488 589.758,575.488C587.79,575.488 586.098,576.964 585.726,578.992C585.678,579.244 585.654,579.484 585.654,579.724C585.654,581.344 586.746,582.448 588.438,582.448C589.374,582.448 590.058,582.16 590.826,581.428L590.67,582.292L592.134,582.292L593.37,575.644ZM589.626,576.952C590.634,576.952 591.282,577.588 591.282,578.548C591.282,578.692 591.258,578.836 591.234,578.992C591.018,580.18 590.082,580.984 588.93,580.984C587.91,580.984 587.286,580.372 587.286,579.448C587.286,579.316 587.298,579.172 587.322,579.028C587.55,577.828 588.51,576.952 589.626,576.952Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
<path d="M601.758,573.424L600.162,573.424L599.646,576.232C599.274,575.716 598.554,575.404 597.714,575.404C595.854,575.404 594.114,576.964 593.742,578.956C593.694,579.196 593.67,579.436 593.67,579.664C593.67,581.284 594.774,582.448 596.43,582.448C597.33,582.448 598.026,582.148 598.806,581.428L598.65,582.292L600.114,582.292L601.758,573.424ZM597.654,576.868C598.662,576.868 599.298,577.528 599.298,578.5C599.298,578.644 599.286,578.788 599.262,578.944C599.046,580.084 598.026,580.984 596.946,580.984C595.974,580.984 595.314,580.276 595.314,579.316C595.314,579.184 595.326,579.052 595.35,578.908C595.566,577.756 596.574,576.868 597.654,576.868Z" style="fill:rgb(250,225,188);fill-rule:nonzero;"/>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 7.1 KiB

4
resources/me.svg Normal file
View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M 26.12 478.318 C 27.455 371.36 111.726 246.106 262.142 245.254 C 405.325 244.252 468.365 358.156 472.358 476.201 Z M 361.132 148.48 C 361.672 200.615 318.234 237.596 265.693 237.952 C 205.763 238.358 141.023 201.499 141.023 141.567 C 141.023 81.635 203.446 37.329 256.008 37.901 C 315.875 38.552 361.22 99.215 361.132 148.48 Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 477 B

96
src/app.rs Normal file
View file

@ -0,0 +1,96 @@
use makepad_widgets::*;
live_design!{
import makepad_widgets::base::*;
import makepad_widgets::theme_desktop_dark::*;
import crate::shared::styles::*;
// LOGO_MAKEPAD = dep("crate://self/resources/makepad.png")
LOGO_MAKEPAD = dep("crate://self/resources/makepad.svg")
App = {{App}} {
ui: <Window>{
show_bg: true
width: Fill,
height: Fill
draw_bg: {
fn pixel(self) -> vec4 {
//return #000
return mix(#7, #3, self.pos.y);
}
}
body = <View>{
flow: Down,
spacing: 20,
align: {
x: 0.5,
y: 0.5
},
avatar = <Image> {
source: (LOGO_MAKEPAD),
// width: 300., height: 50.
}
button1 = <Button> {
text: "Hello world"
}
input1 = <TextInput> {
width: 100, height: 30
text: "Click to count"
}
label1 = <Label> {
draw_text: {
color: #f
},
text: "Counter: 0"
}
}
}
}
}
app_main!(App);
#[derive(Live, LiveHook)]
pub struct App {
#[live] ui: WidgetRef,
#[rust] counter: usize,
}
impl LiveRegister for App {
fn live_register(cx: &mut Cx) {
crate::makepad_widgets::live_design(cx);
// shared
crate::shared::styles::live_design(cx);
}
}
impl MatchEvent for App{
fn handle_actions(&mut self, cx: &mut Cx, actions:&Actions){
if self.ui.button(id!(button1)).clicked(&actions) {
log!("BUTTON CLICKED {}", self.counter);
self.counter += 1;
let label = self.ui.label(id!(label1));
label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
}
}
}
impl App{
async fn _do_network_request(_cx:CxRef, _ui:WidgetRef, _url:&str)->String{
"".to_string()
}
}
impl AppMain for App {
fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
self.match_event(cx, event);
self.ui.handle_event(cx, event, &mut Scope::empty());
}
}

3
src/lib.rs Normal file
View file

@ -0,0 +1,3 @@
pub use makepad_widgets;
pub mod app;
pub mod shared;

6
src/main.rs Normal file
View file

@ -0,0 +1,6 @@
// this stub is necessary because some platforms require building
// as dll (mobile / wasm) and some require to be built as executable
// unfortunately cargo doesn't facilitate this without a main.rs stub
fn main(){
makepad_template::app::app_main()
}

1
src/shared/mod.rs Normal file
View file

@ -0,0 +1 @@
pub mod styles;

22
src/shared/styles.rs Normal file
View file

@ -0,0 +1,22 @@
use makepad_widgets::*;
live_design! {
TITLE_TEXT = {
font_size: (14),
// font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
}
REGULAR_TEXT = {
font_size: (12),
// font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
}
TEXT_SUB = {
font_size: (FONT_SIZE_SUB),
// font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
}
COLOR_PROFILE_CIRCLE = #xfff8ee
COLOR_DIVIDER = #x00000018
COLOR_DIVIDER_DARK = #x00000044
}