you need to build a RUST desktop app!!
Summary
TLDRTravis 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
🛠️ 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.
📚 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.
🔧 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.
📊 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.
🖥️ 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.
🎨 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.
Mindmap
Keywords
💡Rust
💡Slint UI framework
💡Income Divider
💡Profit First methodology
💡Desktop App
💡Business Logic
💡Callbacks
💡Cargo
💡UI Components
💡Animation
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
Weitere ähnliche Videos ansehen
ReactJS - Let's Build An Invoice App - PART 1
🔥📱 Flutter x Firebase CRUD Masterclass • Create / Read / Update / Delete
How to Animate on FlipaClip Tutorial for Beginners (FREE!)
Tauri & ReactJS - Creating Modern Desktop Apps (read desc.)
Cara Membuat Tetris sederhana untuk pemula di Mit App inventor GRATIS 2024 | programmer pemula
Coding with AI: The Beginning of the Personalized Software Era?
5.0 / 5 (0 votes)