you need to build a RUST desktop app!!

Summary

Travis from Travis., media shares a tutorial on building a simple desktop app called 'Income Divider' using Rust and the Slint UI framework. The app facilitates the division of income into four parts following the profit-first methodology, streamlining a process Travis found tedious with calculators and paper. The tutorial covers setting up the project with cargo generate, designing the UI with Slint, and implementing business logic in Rust. It also touches on advanced features like animations and creating a macOS app bundle, providing a practical project to learn Rust and desktop app development.

Takeaways

• 😀 Travis is creating a simple desktop app called 'Income Divider' to practice Rust and to streamline his business income division process.
• 🛠 The app is built using the Slint UI framework, which allows for a user interface with the flexibility to implement business logic in Rust, C++, or Node.js.
• 📈 Travis follows the 'Profit First' methodology, dividing income into four parts: taxes, owner pay, profit, and operating expenses.
• 📝 The app replaces the manual process of using a calculator and writing on paper, aiming for a more efficient and organized approach.
• 💻 Travis chose Slint for its wide range of use cases, including embedded apps, desktop apps, and industrial applications, and its adoption by companies like SK Signate.
• 🔧 The tutorial involves setting up a Rust project using cargo generate and cargo bundle for creating a release-ready binary.
• 📚 Travis emphasizes the importance of learning concepts over languages and suggests focusing on Slint documentation for quick understanding.
• 🎨 The app's UI is designed with a grid layout, input for income amount, a calculate button, and a results display area.
• 🔢 Business logic in Rust handles the calculations based on predefined percentages for taxes, owner pay, profit, and operating expenses.
• 📝 The script provides a step-by-step guide on setting up the Slint environment, coding the UI, and integrating it with Rust for functionality.
• 🎉 The final app includes an animation feature that reveals the results in a curtain-like motion when the calculate button is pressed.

Q & A

What is the main purpose of the 'income divider' desktop app created by Travis?

The 'income divider' desktop app is designed to follow the profit first methodology, dividing income into four parts for taxes, owner's pay, profit, and operating expenses, which Travis finds more practical and less tedious than using a calculator and writing on paper.

Why did Travis choose to use Rust for building the 'income divider' app?

Travis chose Rust because he aims to learn it better and it allows him to practice building desktop apps. Rust also provides the freedom to perform business logic while using the Slint UI framework for the user interface.

What is Slint and how does it relate to the 'income divider' app?

Slint is a UI framework that supplies the user interface for apps, with the flexibility to perform business logic using various programming languages. Travis used Slint with Rust to create the 'income divider' app.

What are some of the use cases for Slint as mentioned in the script?

Slint is used in various applications such as embedded apps, desktop apps, industrial, consumer, automotive, and medical interfaces. It is also used for building instrument clusters for motorcycles and two-wheelers, and by companies like SK Signate for electric vehicle charging solutions.

How does the 'profit first methodology' mentioned in the script influence the design of the 'income divider' app?

The 'profit first methodology' influenced the design by requiring the app to divide the income into specific categories: taxes, owner's pay, profit, and operating expenses, which is the core functionality of the 'income divider' app.

What is the significance of the 'cargo generate' tool in creating the new Rust project for the app?

The 'cargo generate' tool is used to scaffold a new Rust project with a specified template. It simplifies the project setup process and is part of the first steps in creating the 'income divider' app.

How does the Slint documentation guide the development of the 'income divider' app's UI?

The Slint documentation provides a comprehensive guide on concepts, syntax, built-in elements, widgets, and examples. It helps Travis understand how to structure the UI, position elements, and use properties and callbacks for the app's functionality.

What is the role of the 'main.rs' file in the Rust project for the 'income divider' app?

The 'main.rs' file contains the business logic of the app. It is where the calculations for dividing the income are performed and where the app interacts with the Slint UI components through callbacks and property setters.

How does the 'cargo bundle' command contribute to the finalization of the 'income divider' app?

The 'cargo bundle' command is used to create a distributable version of the app, making it easy to install and run without needing to locate the binary file each time.

What additional feature did Travis implement in the 'income divider' app for displaying results?

Travis implemented an animation feature where clicking the 'calculate' button causes a curtain-like opening of two rectangles to reveal the calculated results.

Outlines

00:00

🛠️ Building a Practical Rust Desktop App with Slint

Travis from travis.media introduces a project to create a simple desktop application named 'Income Divider' using Rust and the Slint UI framework. The app is designed to facilitate the division of income into four parts following the profit-first methodology, which Travis finds more practical and less tedious than manual calculations. He chose Slint for its flexibility and its use in various industries, including automotive and medical solutions. Travis emphasizes the importance of learning Rust for building desktop apps and provides a step-by-step guide on setting up the project using cargo generate and modifying the UI with Slint.

05:00

📚 Learning Slint UI Framework and Building the Frontend

The tutorial continues with an in-depth exploration of the Slint UI framework, focusing on its syntax, built-in elements, and widgets. Travis demonstrates how to create a user interface with a grid layout, text elements, input fields, and buttons. He also discusses the importance of understanding the concepts behind UI frameworks rather than just learning multiple languages. The process includes setting properties for elements, using the live preview feature in VS Code, and compiling the app to ensure the frontend design works as intended.

10:02

🔧 Integrating Rust for Business Logic and Callbacks

Travis explains the transition from the frontend UI to the backend business logic, which is handled in Rust. He details the process of setting up properties and callbacks within the Slint file, such as 'on divide income', which will be used to perform calculations when the calculate button is clicked. The tutorial covers the Rust API, explaining how to use setters and getters for top-level properties and how to invoke callbacks. The goal is to connect the UI elements with the Rust logic to make the app functional.

15:06

📊 Implementing Income Division Calculations in Rust

The video script describes the implementation of the income division logic in Rust. Travis outlines the tax, owner, profit, and operating expense percentages and demonstrates how to parse the input string into a float64 for calculations. He shows how to set up the 'on divide income' callback to perform these calculations and update the UI with the results. The focus is on ensuring the app's functionality by correctly setting properties and handling data between the UI and Rust code.

20:08

🖥️ Compiling and Bundling the Rust Desktop Application

Travis guides viewers through the process of compiling the app with optimizations and creating a binary for easy access. He introduces 'cargo bundle', a tool for packaging the app into a format that can be added to the Mac Applications folder. The tutorial includes modifying the cargo.toml file to include package metadata and running the bundle command to create the final app package.

25:10

🎨 Adding Animation and Final Touches to the App

The final part of the script covers adding animations to the app for a better user experience. Travis demonstrates how to create a curtain-opening effect using rectangles and animation properties in Slint. He explains the process of toggling the visibility of results using a boolean property and animating the opening and closing of the result display. The video concludes with a call to action, encouraging viewers to subscribe and follow along for more tutorials.

Keywords

💡Rust

Rust is a systems programming language that focuses on safety, speed, and concurrency. It is known for its ability to prevent certain classes of bugs even during compile-time. In the video, Rust is used to build a desktop application, demonstrating its practical use for developing software with performance and reliability in mind. The script mentions learning Rust better and using it for business logic in the app.

💡Slint UI framework

Slint is a UI framework that allows developers to create user interfaces for applications. It is versatile and can be used with different programming languages, including Rust, which is the choice in the video. The framework is highlighted for its use in various industries, such as automotive and medical, and for its adoption by companies like SK Signate for electric vehicle charging solutions.

💡Income Divider

Income Divider is the name of the desktop application being developed in the video. It is designed to follow the 'profit first' methodology by dividing income into four parts: taxes, owner's pay, profit, and operating expenses. The app is a practical tool for the creator's business needs and serves as a project to improve Rust programming skills.

💡Profit First methodology

The Profit First methodology is a financial management approach that prioritizes profit by allocating a portion of incoming revenue to profit before covering other expenses. In the video, the creator uses this method to manage business finances and builds the Income Divider app to automate the division of income according to this approach.

💡Desktop App

A desktop app, as discussed in the video, is a software program designed to run on a personal computer rather than on a mobile device or web browser. The Income Divider is an example of a desktop app created to streamline the process of income division and financial management.

💡Business Logic

Business logic refers to the underlying processes and rules that drive the operations of an application or system. In the context of the video, the business logic is implemented in Rust and handles the calculations for dividing income into its respective categories within the Income Divider app.

💡Callbacks

In programming, a callback is a piece of executable code that is passed as an argument to other code. The video script mentions callbacks in the context of the Slint UI framework, where they are used to communicate changes in the state of the application, such as invoking the 'divide income' functionality when a button is clicked.

💡Cargo

Cargo is Rust's package manager and build system. It is used to manage Rust projects, including building the code, downloading libraries, and managing dependencies. In the video, Cargo is used to build and run the Income Divider app, showcasing its role in the development process.

💡UI Components

UI components are the individual elements that make up a graphical user interface, such as buttons, text fields, and sliders. The video script describes creating various UI components in the Slint framework, including a grid layout, text elements, line edits, and buttons, to construct the interface of the Income Divider app.

💡Animation

Animation in the context of UI development refers to the movement or change in properties of UI elements over time. The video describes using animation to create a 'curtain opening' effect when the results of the income division are displayed in the Income Divider app, enhancing the user experience.

Highlights

Travis from Travis.media is building a simple desktop app called 'Income Divider' using Rust and the Slint UI framework.

The 'Income Divider' app follows the profit-first methodology, dividing income into four parts for taxes, owner pay, profit, and operating expenses.

Travis aims to make the income division process less tedious by automating calculations through the app.

Slint is a UI framework that allows for the use of Rust, C++, or Node.js for business logic, chosen by Travis for its flexibility.

Slint supports various platforms including embedded apps, desktop apps, and industrial applications.

The app development process includes setting up a project with cargo generate and using the Slint project template.

The tutorial provides a step-by-step guide for beginners to learn how to build desktop apps with Rust and Slint.

Travis demonstrates the process of creating a UI layout using Slint's grid layout and built-in elements.

The importance of learning concepts over languages is emphasized for flexibility and adaptability in development.

Slint's documentation and VS Code extension facilitate the learning process for the UI framework.

Travis explains how to implement business logic in Rust, connecting it with the Slint UI components.

The app includes a feature to animate the display of results, adding an interactive element to the user experience.

The tutorial covers how to handle callbacks and state changes between the UI and Rust business logic.

Travis shows how to compile and run the app using Cargo, and how to create a release build.

The final app can be bundled into a macOS application for easy access and use.

The tutorial concludes with a demonstration of the complete app in action, showcasing its functionality.

Travis encourages viewers to subscribe for more content and provides a link to the GitHub repository for the app.

Transcripts

hey everyone Travis here from travis.

media today we're going to build a

simple desktop app using rust in the

slint UI framework now I don't really

care these days to build meaningless

things that I can't use or that I can't

offer to the public to use I'm aiming

for practical and I want to learn rust

better this year so I built this little

simple desktop app called income divider

and all it does when I get paid or I

receive some money in my business I like

to follow the profit first methodology

or a modified version of it and what I

do is I take the money and I divide it

up into four parts so let's say someone

sent me

3,722 bucks what I would do in the past

is I would open up my calculator on my

MacBook and I would type it in 3722 and

then I'd multiply it by 3 for taxes and

I'd find some piece of paper around my

desk and I'd write it down i' do the

calculations this way but I found that

to be tedious and I found that it makes

a big mess on my desk so I just created

this desktop app and all I have to do

like I said is put in the number click

calculate and I get the amount I owe in

taxes the the amount that I'm eventually

going to pay myself out of it the amount

of profit I want to keep in my business

and the amount of operating expenses I

also want to allocate so it gave me a

reason to practice my rust and to learn

to build desktop apps with it and I

looked around a little bit and I chose

slint to build it with now slint is a UI

framework that supplies the user

interface on your app and then you have

the freedom to perform the business

logic with either rust C++ or node.js

I'm going to be using rust so as far as

slint there are a lot of use cases

there's embedded apps desktop apps

industrial consumer Automotive so slint

built with Russ now supports q andx and

is being used for building instrument

clusters for motorcycles and two-

wheelers and then medical they have some

videos on it being used with a Raspberry

Pi supported boards and then there's one

case story I found interesting in that

SK signate the number one electric

vehicle charging solution in the US has

transitioned their human machine

interface for their EV Chargers from QT

to slint if you look here looks really

nice really modern I don't have an

electric vehicle I don't know much about

it but it looks good but what I'm

getting at is it isn't just some side

hobby app that nobody uses it's pretty

well known so I chose to build the app

with that and just to note slint didn't

sponsor this video I have no affiliation

with them I just picked them based on

what I read now if you scroll up and go

to docs you can choose between rust C++

and node.js so pick your tool and let's

get started I'm going to be using rust

so I'm going to click on the project

template I'm going to open it in a new

tab and by the way this tutorial is

really good for learning how all this

works so if you go to your project

template which is a GitHub page and just

follow the instructions so first step is

install cargo generate I've already done

that the next step is to create a new

project with the template so I'm going

to copy this open my terminal go to my

repos folder and copy that command and

I'll change my project to something like

income app CD into that cargo

build and then cargo

run and there's your app the default app

is just a counter so counter equals 4 42

I can increase it by clicking here

that's all it is but let's open it up in

vs code and you have your normal files

like your cargo Tomo file your cargo

lock but what we're mainly interested in

is this Source folder and the UI folder

in your Source folder you have the main.

RS this is where your business logic is

going to live and we'll come to that in

a minute we're going to start off with

the slint part of it so if you go to the

UI folder you have a file called app

window. slint here the counter equals 42

when the button is clicked it calls this

request increase value which is this

call back here then if you go to the

Rust part of it you'll see that it gets

the counter and it sets the counter to

whatever it is plus one that's all so

I'm actually going to comment this part

out and let's go to app window. slint

and just get rid of all this so you

might be wondering like now I got to

learn slint right it's great that you

can use rust here but why I got to learn

slant well here's the thing and this is

some good advice for 2024 when it comes

to tools like this you should be able to

go to the documentation and get up to

speed with slint pretty quickly if you

haven't before you want to focus more

this year on Concepts more than learning

lots of languages and here's what I mean

if we go back to the documentation and

click on the slint

language here's how you would approach

this so here's a getting started page

tells you hey use VSS code and then

there's an extension go ahead and

download that extension then you

probably want to read the introduction

under language reference and then look

under Concepts you probably want to read

these especially like positioning and

layout of elements but the next section

called syntax so you know what

properties are in functions and

callbacks and statements and conditional

elements and repetitions or Loops are

you know what these things are so when

you're writing this app you should be

able to in your head pseudo code

everything and then come here and figure

out how to do it in slint it's a good

skill to have be conceptual so that you

have flexibility between languages more

than just learning a bunch of languages

so I'm going to be be building this but

we're going to be coming back here and

referencing this syntax next you have

some built-in stuff and some widgets so

right here this is how you get buttons

and checkboxes Sliders text edits

vertical boxes all of that those are

widgets and then if you want to know how

these work there's a section called

recipes and examples so animation

examples layout examples Global

callbacks custom widgets things you want

to reference as you build so to start we

may just want to go to layout examples

and get an idea of like what this looks

like so let's scroll up to the top

and here here's a clickable button so we

have a vertical box and inside of it we

have a button it's kind of like flutter

so I can click the button button press

one time two time I can scroll down um

and see animation

examples States examples layout examples

so here's three buttons in a vertical

layout here's three buttons in a

horizontal layout here's using grid box

so we got two rows actually three rows

the third row being a slider and you get

an idea of how to do this so let's go

back to our app let's think about this

and you can open up any kind of

diagramming tool like draw.io or

something but basically just come in

here what do you want the app to look

like you can do this with a notepad as

well but let's say I just want it to

look like this I need some text here

saying income divider make that bigger

then I want an

input then I want a button below it that

just says calculate now if I go back and

spend a few minutes in the documentation

and go to something like uh under

built-ins if you go to built-in elements

you can find an item called grid layout

you have access to columns rows and

things like that so I could do a grid

layout and have three rows in it so if

you go back to our diagram here this

would be a grid layout this is Row one

row two and Row three so that they're

stacked on top of each other let's just

do that so let's go to our code and just

type in Grid

layout and within it let's create a

couple

rows Row one row

two and Row

three and in row one let's do some text

here's some text and if you need to know

what properties you can use with text

it's all listed right

here so I'm actually going to just copy

this go to my code and paste that in

inside of row and for text I'm going to

do enter total

income and remember I mentioned

installing that vs code extension so I

can say horizontal alignment and it

shows me that that's available in a text

element horizontal alignment

center font size I'm going to make that

big at like 24 pixels and font weight

I'm going to make 900 I don't care

anything about the color right now

that's going to be our starting text now

what about our input let's go back and

take a look in addition to these

built-in elements you have widgets so if

you go to widgets and line edit you'll

see that it's a widget used to enter a

single line of text and here's an

example here I can click on it I can

type text in it so I'm going to use that

so I'm going to copy

this and paste that in my second row and

I get this red squiggly because I need

to import it and the easiest way to do

that is just to highlight it start

typing and accept the auto suggestion

and you'll see it's added here at the

top and here I'm going to have the

placeholder text of ENT your

number font size I'm going to make 16

and I'll leave it at that then finally

we need a button I think that's also

under widgets yeah here's a

button so this one's simple let just go

back typ Tye in

button and text is going to

be

calculate and that looks good for now

and this vs code extension you can

actually open your command pallet and

there's an option that says slint Show

preview if you click that it'll show you

a preview of your app and there it is

looks all jammed together so let's add

some padding in this grid layout we can

do padding 50 pixels and then also if we

go back to builtins and built-in

elements and grid layout I think they

have a spacing element yeah spacing the

distance between elements in the layout

so let's also do spacing 25

pixels and save that see what it looks

like looks way better this enter your

number let's Center that by doing uh

horizontal alignment

center see if that fixes it yep and then

calculate this button is gray so let's

go back to the documentation on that and

there's a property called primary if set

to true the button is displayed with the

primary accent color so let's change it

to primary

true and that looks better as for the

background color let's go to the main

window and do background and I have a

color 313 e50 which is like a dark blue

change it to that and it looks better

and then these look really narrow so

let's go to the line edit and do height

uh 35

pixels and then the button Let's Do

height of the same thing 35

pixels and that looks great so like I

said you just have to go and look at

what properties each widget or built-in

element has with it now that's the slint

live preview let's actually compile it

and see what it looks like so cargo

run yeah and it looks about the same so

that's good now in case you're wondering

I didn't even talk about this but this

is a slint file this is going to be your

UI and you see here it exports component

app window this can be named anything

you want and it inherits the window

component So within this you can do all

your UI editing you can also create

another uh component like I can do um

component let's just do it uh component

uh calculate calculate

button and then here I can actually just

put this button that I have here

uh place it there and then down here I

can just call calculate button and it's

the same thing so you can make your app

a lot cleaner by breaking things up a

bit but we don't need to do that this is

a small app so I'm going to undo that

now we have the front end working but it

does nothing so we need to jump over to

the business logic which in my case is

rust it might be C++ or no. JS for you

but we need to jump into the back end

and figure out how this all works so if

we go to main. RS here's what's going on

we have a main function it returns a

result within that we're declaring a new

app window so app window of course

corresponds to our component it's called

app window and then we create a weak

pointer to it which is explained in the

documentation if you don't know what

that means and then you unwrap that weak

pointer here in this closure but what is

this ui. on request increase value well

if you remember when we created this

template if I go back to the GitHub repo

there was a call back called request

increase value and then when you click

the button it called that call back now

if we go to the documentation the slint

documentation and we go to Concepts and

or actually syntax and

callbacks you'll see here that

components May declare callbacks that

communicate changes of the state to the

outside callbacks are invoked by calling

them like you would call a function so

when this request increased value is

called it's going to use this getter and

Setter so get counter set counter to do

its thing so if I go back to what was

originally there you'll see that there's

a property called counter so all you do

in the business logic side is you add

set to whatever that property was so set

counter get counter or on to the call

back so if you look at the documentation

for rust the rust API and you scroll

down you see here for each top level

property there's a Setter and a getter

so you can call set underscore whatever

the property name is or getor property

name same thing for each top level

callback there's an invoke underscore

callback name or an onore callback name

and this documentation is really good

it's done really well so what we want to

do is when we click this button let's go

back to the UI when we click this button

which on button you can just say clicked

there's a property called clicked you

can call something so let's go here and

go to properties and it's very easy it's

just property the type and then the name

of the property so I'm going to grab

this and there's different qualifiers

that specify how the property can be

read and written there's a private which

is theault default it can be an input an

output or an inout so I'm just going to

start with private so up here at the

very top I'll create a new

property the type is going to be a

string and we'll call it results and

I'll set it to an empty string this is

going to be our results when we click

the button we want to display that

calculated income in a window at the

bottom next when we click this button we

want to invoke this call back which we

hadn't created yet called divide

income inside of it we want to put

whatever input that we put in this line

edit so up here under line edit let's

just call you can actually assign

variables to this so I can say income

and then it's kind of like a go syntax

here but income equals this line edit

component so down here I can just do

income. text I'm going to pass in the

number that we input basically and then

as far as callbacks if we go to the

documentation and callbacks you'll see

an example

here of call back of hello and then

you're passing in some kind of arguments

so up here under this property we'll

just put our call back and we'll call it

divide income and we just need to pass

in a string value great so when we click

this button we invoke this divide income

call back which is up here and we're

going to do some calculations and

display them in results so let's create

a little place in the bottom to display

these results so let's create a new row

and inside of it create a vertical box

and in that a

rectangle let's do a height of 100

pixels a background of uh let's do FS2

F2

F2 and that looks pretty good and then

inside of that rectangle let's do a text

component or widget I guess is the

proper term with a color of black the

text should be black let's make the font

size uh 16 pixels and font weight a

little bigger at

500 and then the text itself should be

the results right so to access this

results property since it's outside of

this grid layout in the rows and all of

that we can do root dot

results this is all in the documentation

root gives you access to that root

component the root part of the component

then you can also use self for the

component itself all right so I think

we're ready to go over to rust and make

this magic happen so here at the top I'm

going to give my calculations const uh

the tax

percentage is going to be a float

64 and is going to be 0.30 so 30% copy

this the owner percentage will be

55 the profit percentage will be

5% and the operating expenses percentage

will be 10% and that should equal 100 60

7 90 100 yeah 100% And so here instead

of on request increased value we'll do

on on on divide income so it already

recognizes that call back that's

available to me so what do we need to do

now well if you go back you see that we

actually pass in a string to that divide

income and just a note in slint it's

going to be divide Dash income but when

you get over to rust it's going to use

underscores and it knows the difference

there so save this that's that's fine on

divide income so what I need to do is I

need to pass in the string and that

string is actually going to be a number

so let's parse it let

num of float 64 equals string. trim

always got to trim first dop parse do

unwrap so we're going to turn that

string into a float 64 then we need to

get the percentages of this number so

let tax of

f64 equal num

times uh tax

percentage copy that four

times let's do owner num times owner

percentage profit num times profit

percentage then operating expenses Opex

num

times operating expenses

percentage save that and actually we

didn't put air parenthesis here so

that's a

problem and the same thing with unwrap

what are we doing and then let's let

result equals we'll do a

format here we'll do

taxes new line

owner new

line

profit

new line and operating

expenses and then our arguments so

one 2 3

4 TX

owner

profit and operating

expenses save it and this needs to be a

decimal place of two so inside of these

we'll put

colon 2 I think that does it let me word

wrap here we go and now I should be able

to use that Setter we talked about

earlier ui. set what are we setting the

results property to

result and we seem to have an error here

if I hover over it it says method set

results is private so we need to go back

to our slint file and I need to set this

property which is private by default to

be an input by putting in in front of it

remember there's an input there's an

output and then there's an input output

so I think doing an input should be

enough if I go back there's still an

error and if this happens just resave

it and that fixed that now we have an

issue with result and it tells us here

that we need to add into to this result

so result. into that's in the

documentation if you're wondering what

that does but now when I save it we

should be good I can now set the result

to whatever we calculate here then in

air slint file that should show up down

here in the text of root results so

let's try it out and let's actually run

the app cargo

run and let's do like 4,000 actually

let's do 100 because it's easy to

calculate click calculate and we get the

right numbers but we have this weird

decimal thing going on I thought we

fixed that so if we go back to main. RS

it's actually colon.

two that should do it

let's rebuild

this and try it out again so let's do

1,00 calculate there we have it 300 550

50 100 great so at this point you have a

fully working app you can do uh cargo

build

release to get you an optimized binary

and then of course we don't want to have

to find this binary every time we want

to run it I would rather make it an app

on my Mac so that I can find it in my

Spotlight income divider there it is and

to do that we use cargo bundle so to get

that working we need to run cargo

install cargo bundle so here in my app

I'll do that cargo install cargo bundle

and then according to the documentation

we need to add a package metadata bundle

to our cargo. Tomo file so here at the

bottom let's add that and then we'll

need a name an identifier and a

description and let copy this identifier

this GitHub identifier so name equals

income device

identifier

equals I'm going to change my username

to my username and then my project on

GitHub is this so I'm going to copy this

project name paste that in here and then

finally we need to add a description to

the package so description equals a

desktop

app that divides up

income

and then the final step is to run cargo

bundle with the release flag hit

return now if I look in my target folder

in in release I have a bundle folder

open that actually let's open it up in

finder open up bundle OSX and there's my

app I simply just drag that to

Applications but let's take this a step

further and add this animation so if I

put 1,000 when I click calculate we can

set it so a window opens so click

calculate and this window opens to our

numbers this will teach you how to use

the animation so let's go back to app

window and under the rectangle that

shows a results let's create two more

rectangles let's call this left

rectangle and then right

rectangle you'll see why in a

minute and

rectangle for that

one and the rectangle for our left one

now the background for these let's make

as almost black so 3 3 3 3 3

3 paste that also on the left the right

rectangle so what's going to happen here

is you have two rectangles that are

opening like a curtain so this first

rectangle starts out as

x0 it starts out right at the zero

position think of X like 0 to 100 or

whatever x0 is going to be all the way

out the picture and then when we click

the button we want it to come in halfway

so we can do like parent width divided

two and then when we click it again it

goes back to zero so it's just this left

panel coming in and coming out and when

we do the right panel we needed to start

at the end of it and come in halfway and

back out halfway so let's try this let's

go up here and let's create another

property let's do in

out and it's going to be a type of

bull and let's call it open

curtain cuz the curtain is being open

what we do is when we click on it we're

going to set that to True when we click

on it again it's going to set to false

and it's just going to be a toggle so in

our first rectangle when it comes to

width we're going to put open curtain if

that's false the width is going to be

zero but if it's true the width is going

to be parent. width which is going to be

the full width of the parent divided

two that's going to take it to the

halfway position and then for height we

want it the full height of the parent so

parent.

height and then for animate let's go to

animations and there's a whole bunch of

animations here these values here and

work with that so we're want to animate

the

width and let's put these values in here

for duration let's do 250 milliseconds

and for

easing let's do ease in and that should

do it now the right rectangle is a

little bit trickier so the X if open

curtain is

false then the EXP position should be

outside of the right side which is going

to be the full width of the parent so

parent. width else it needs to be

parent. width /

two which is going to bring it in

halfway that's the EXP position now the

width needs to be if open

curtain then the width needs to be zero

pixels meaning the x is going to be all

the way to the right and it's not going

to have any width at all but if that's

true it also needs to be parent

width / two height is going to be

parent. height and then we need to

animate two things this

time so animate width it's going to be

like the last one duration 250 EAS in

then we also need to animate the

X to the same thing let's run that and

try it out cargo

run and so we have our window here

remember our Windows almost black let's

put in a number like 5,000 when we click

calculate they should open to our

numbers and nothing happens because we

didn't set the click so let's go find

our

button clicked we want two things to

happen before we actually divide the

income and here we can do root dot open

curtain is equal to not root. openen

curtain so again this is just a toggle

every time we click this it's going to

flip to the other thing false true false

true so let's save it try it again type

in a number like 5,000 click calculate

and it opens click calculate again it

closes so that's pretty neat and guys

this is basically the tip of the iceberg

there's so much you can do here you can

actually access elements on your

computer and you can get way more

advanced and intricate than this but

this is just a simple app a way for me

to speed up things in my business and

also a way for me to practice using rust

which is a goal I have this year I'll

link to the GitHub repo below if got

stuck if you found this video helpful

you like this kind of thing give it a

thumbs up if you haven't subscribed to

the channel consider doing so and I'll

see you in the next

video