Skip to content

Commit 10e8507

Browse files
cristinagnncristinagnn
committed
1 parent aa8faef commit 10e8507

13 files changed

Lines changed: 1285 additions & 16 deletions

File tree

‎docs/autonomous_cars/1.electronics/2.soldering/index.md‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,52 @@
11
---
22
title: Soldering
3-
---
3+
---
4+
5+
## Soldering tutorial
6+
7+
A quick start-up guide to soldering techniques and good practices can be found [here](https://www.youtube.com/watch?v=Qps9woUGkvI).
8+
9+
## Wiring
10+
11+
### Motor Drivers
12+
13+
| Connection | Pin Mapping |
14+
|----------------|--------------------------|
15+
| Vbat | VCC |
16+
| GND | GND |
17+
| Motor 1 Pin1 | Driver 1 OUT1 & OUT2 |
18+
| Motor 1 Pin2 | Driver 1 OUT3 & OUT4 |
19+
| Motor 2 Pin1 | Driver 2 OUT1 & OUT2 |
20+
| Motor 2 Pin2 | Driver 2 OUT3 & OUT4 |
21+
| P0_25 | Driver 1 IN1 & IN3 |
22+
| P0_24 | Driver 1 IN2 & IN4 |
23+
| P0_26 | Driver 2 IN1 & IN3 |
24+
| P0_27 | Driver 2 IN2 & IN4 |
25+
26+
---
27+
28+
### Pixy Cam
29+
30+
| Connection | Pin Mapping |
31+
|------------|-------------|
32+
| 5V | VCC |
33+
| GND | GND |
34+
| P4_1 | SCL |
35+
| P4_0 | SDA |
36+
37+
---
38+
39+
### Servo Motor
40+
41+
| Connection | Pin Mapping |
42+
|------------|--------------------------|
43+
| 5V | VCC (red wire) |
44+
| GND | GND (black wire) |
45+
| P1_12 | SIG (yellow wire) |
46+
47+
## Schematic
48+
49+
50+
<div align="center">
51+
![pixy_cam](../assets/schematic_ipw.png)
52+
</div>

‎docs/autonomous_cars/1.electronics/assets/schematic_ipw.png‎

823 KB
Loading

‎docs/desktop_applications/03_Slint/01_Introduction.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Introduction to Slint
2+
3+
## What is Slint?
4+
Slint is a **declarative UI language** designed to make building modern, efficient, and portable user interfaces simple and intuitive.
5+
It allows you to describe *what* your UI should look like and *how* it should behave, without dealing with low-level implementation details.
6+
7+
Slint is designed to work seamlessly with languages like **Rust**, **C++**, and **JavaScript**, keeping your **business logic** separate from the UI code.
8+
9+
10+
## Core Concepts
11+
12+
### Elements and Properties
13+
Slint uses **elements** (such as `Text`, `Rectangle`, `Button`) followed by curly braces `{}` to define UI components.
14+
Inside the braces, you set **properties** that describe the appearance or behavior of that element.
15+
16+
Example:
17+
```slint
18+
Text {
19+
text: "Hello World!";
20+
font-size: 24px;
21+
color: #0044ff;
22+
}
23+
```
24+
25+
### Nesting Elements
26+
Elements can be placed inside one another to build hierarchical UIs.
27+
28+
Example:
29+
```slint
30+
Rectangle {
31+
width: 150px;
32+
height: 60px;
33+
background: white;
34+
border-radius: 10px;
35+
36+
Text {
37+
text: "Hello World!";
38+
font-size: 24px;
39+
color: black;
40+
}
41+
}
42+
```
43+
44+
### Reactivity
45+
Slint has **built-in reactivity**: when a property changes, all dependent UI elements automatically update.
46+
47+
Example with a counter:
48+
```slint
49+
property <int> counter: 0;
50+
51+
Rectangle {
52+
width: 150px;
53+
height: 60px;
54+
background: white;
55+
border-radius: 10px;
56+
57+
Text {
58+
text: "Count: " + counter;
59+
font-size: 24px;
60+
color: black;
61+
}
62+
63+
TouchArea {
64+
clicked => {
65+
counter += 1;
66+
}
67+
}
68+
}
69+
```
70+
71+
72+
## Why Slint?
73+
74+
- **Pure declarative language** built for UI from the ground up.
75+
- **Easy to read and write** for both developers and designers.
76+
- **Portable** works on desktop, embedded systems, and web.
77+
- **Clear separation** of UI and business logic.
78+
- **Reactivity** makes dynamic UIs effortless.
79+
80+
Compared to traditional UI approaches (like HTML/JavaScript or XML-based layouts), Slint is more concise, readable, and easier to maintain.

‎docs/desktop_applications/03_Slint/02_Reactivity.md‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
# Slint Reactivity
2+
3+
## Introduction
4+
**Reactivity** is a core concept in Slint. It allows you to create complex, dynamic user interfaces with far less code.
5+
In Slint, UI elements automatically update when the properties they depend on change — without requiring manual refresh logic.
6+
7+
## Example: Mouse Tracking and Color Change
8+
```slint
9+
export component MyComponent {
10+
width: 400px; height: 400px;
11+
12+
Rectangle {
13+
background: #151515;
14+
}
15+
16+
ta := TouchArea {}
17+
18+
myRect := Rectangle {
19+
x: ta.mouse-x;
20+
y: ta.mouse-y;
21+
width: 40px;
22+
height: 40px;
23+
background: ta.pressed ? orange : white;
24+
}
25+
26+
Text {
27+
x: 5px; y: 5px;
28+
text: "x: " + myRect.x / 1px;
29+
color: white;
30+
}
31+
32+
Text {
33+
x: 5px; y: 15px;
34+
text: "y: " + myRect.y / 1px;
35+
color: white;
36+
}
37+
}
38+
```
39+
40+
### How It Works
41+
- The **rectangle follows the mouse** using `x: ta.mouse-x;` and `y: ta.mouse-y;`.
42+
- **Color changes on click**: `background: ta.pressed ? orange : white;`.
43+
- Text labels **automatically update** to show the rectangle's current position.
44+
45+
This works because:
46+
1. The `TouchArea` exposes `mouse-x`, `mouse-y`, and `pressed` properties.
47+
2. When these properties change, all bound expressions are automatically re-evaluated.
48+
3. The UI updates only where dependencies have changed.
49+
50+
51+
## Performance and Dependency Tracking
52+
Slint evaluates bindings lazily:
53+
- Dependencies are registered when a property is accessed during evaluation.
54+
- When a property changes, only dependent expressions are re-evaluated.
55+
- This ensures high performance, even for complex UIs.
56+
57+
58+
## Property Expressions
59+
Property bindings can be simple or complex:
60+
61+
```slint
62+
// Tracks foo.x
63+
x: foo.x;
64+
65+
// Conditional expression
66+
x: foo.x > 100px ? 0px : 400px;
67+
68+
// Clamped value
69+
x: clamp(foo.x, 0px, 400px);
70+
```
71+
72+
You can also use **functions** for clarity:
73+
74+
```slint
75+
export component MyComponent {
76+
width: 400px; height: 400px;
77+
78+
pure function lengthToInt(n: length) -> int {
79+
return (n / 1px);
80+
}
81+
82+
ta := TouchArea {}
83+
84+
myRect := Rectangle {
85+
x: ta.mouse-x;
86+
y: ta.mouse-y;
87+
width: 40px;
88+
height: 40px;
89+
background: ta.pressed ? orange : white;
90+
}
91+
92+
Text {
93+
x: 5px; y: 5px;
94+
text: "x: " + lengthToInt(myRect.x);
95+
}
96+
Text {
97+
x: 5px; y: 15px;
98+
text: "y: " + lengthToInt(myRect.y);
99+
}
100+
}
101+
```
102+
103+
## Purity in Bindings
104+
For reactivity to work correctly, bindings must be **pure**:
105+
- Evaluating a property should not change any other observable state.
106+
- The Slint compiler enforces purity in binding expressions, pure functions, and pure callbacks.
107+
108+
Example:
109+
```slint
110+
export component Example {
111+
pure callback foo() -> int;
112+
public pure function bar(x: int) -> int {
113+
return x + foo();
114+
}
115+
}
116+
```
117+
118+
## Two-Way Bindings
119+
Two-way bindings keep two properties in sync using `<=>`:
120+
121+
```slint
122+
export component Example {
123+
in property<brush> rect-color <=> r.background;
124+
in property rect-color2 <=> r.background;
125+
126+
r:= Rectangle {
127+
width: parent.width;
128+
height: parent.height;
129+
background: blue;
130+
}
131+
}
132+
```

0 commit comments

Comments
 (0)