colour93
/
esp32-car-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: control page style

This commit is contained in:
玖叁 2024-12-24 09:45:58 +08:00
parent 48d4cf4ec0
commit c8e9f7d53c
18 changed files with 399 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
app/src/main/java/icu/fur93/esp32_car/page/ControlPage.kt
View File

@ -1,15 +1,33 @@
package icu.fur93.esp32_car.page
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import icu.fur93.esp32_car.R
import icu.fur93.esp32_car.Route
import icu.fur93.esp32_car.ui.carditem.StatusCardInfo
import icu.fur93.esp32_car.ui.carditem.StatusCardJoystickStatus
import icu.fur93.esp32_car.ui.carditem.StatusCardMotorStatus
import icu.fur93.esp32_car.ui.component.BottomNavigationBar
import icu.fur93.esp32_car.ui.component.CardButtonGroup
import icu.fur93.esp32_car.ui.component.CardButtonItem
import icu.fur93.esp32_car.ui.component.PageTitle
import icu.fur93.esp32_car.ui.component.StatusCard
import icu.fur93.esp32_car.ui.layout.MainLayout
@Composable
fun ControlPage(navController: NavHostController) {
MainLayout(
content = {
PageTitle("控制")
ControlPageStatusCard()
},
bottomBar = {
BottomNavigationBar(
@ -19,3 +37,44 @@ fun ControlPage(navController: NavHostController) {
}
)
}
@Composable
fun ControlPageStatusCard() {
ControlPageAutoControl()
Spacer(Modifier.height(18.dp))
ControlPageManualControl()
}
@Composable
fun ControlPageAutoControl() {
return CardButtonGroup(
title = "自动控制",
buttons = listOf(
CardButtonItem(
text = "循迹模式",
icon = ImageVector.vectorResource(id = R.drawable.outline_route_24)
)
)
)
}
@Composable
fun ControlPageManualControl() {
CardButtonGroup(
title = "手动控制",
buttons = listOf(
CardButtonItem(
text = "单摇杆模式",
icon = ImageVector.vectorResource(id = R.drawable.outline_joystick_24)
),
CardButtonItem(
text = "单向按键模式",
icon = ImageVector.vectorResource(id = R.drawable.outline_gamepad_24)
),
CardButtonItem(
text = "陀螺仪模式",
icon = ImageVector.vectorResource(id = R.drawable.motion_sensor_active_24)
)
)
)
}

105
app/src/main/java/icu/fur93/esp32_car/page/HomePage.kt
View File

@ -1,22 +1,16 @@
package icu.fur93.esp32_car.page
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import icu.fur93.esp32_car.Route
import icu.fur93.esp32_car.ui.card.UnconnectedStatusCard
import icu.fur93.esp32_car.ui.carditem.StatusCardInfo
import icu.fur93.esp32_car.ui.carditem.StatusCardInfraredStatus
import icu.fur93.esp32_car.ui.carditem.StatusCardMotorStatus
import icu.fur93.esp32_car.ui.carditem.StatusCardUltrasoundStatus
import icu.fur93.esp32_car.ui.component.BottomNavigationBar
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.PageTitle
import icu.fur93.esp32_car.ui.component.StatusCard
import icu.fur93.esp32_car.ui.component.StatusCardItemText
import icu.fur93.esp32_car.ui.layout.MainLayout
@Composable
@ -24,8 +18,8 @@ fun HomePage(navController: NavHostController) {
MainLayout(
content = {
PageTitle("标题还没想好")
// HomePageConnectedStatusCard()
HomePageUnconnectedStatusCard()
HomePageStatusCard()
// UnconnectedStatusCard()
},
bottomBar = {
BottomNavigationBar(
@ -37,89 +31,14 @@ fun HomePage(navController: NavHostController) {
}
@Composable
fun HomePageConnectedStatusCard() {
fun HomePageStatusCard() {
StatusCard(
cardItems = listOf(
CardItem(
title = "当前连接",
content = {
StatusCardItemText("名称 Name")
StatusCardItemText("Mac XX:XX:XX:XX:XX:XX")
StatusCardItemText("版本 001")
}
),
CardItem(
title = "电机状态",
content = {
LazyVerticalGrid(
columns = GridCells.Fixed(2)
) {
item {
StatusCardItemText("A 0 1 255")
}
item {
StatusCardItemText("D 0 1 255")
}
item {
StatusCardItemText("B 1 0 255")
}
item {
StatusCardItemText("C 1 0 255")
}
}
}
),
CardItem(
title = "红外模块状态",
content = {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
listOf(0, 0, 0, 0, 0).forEach { status ->
StatusCardItemText(status.toString())
}
}
}
),
CardItem(
title = "超声波状态",
content = {
Row(
modifier = Modifier.fillMaxWidth()
) {
Column(Modifier.weight(1f)) {
StatusCardItemText("舵机角度 90")
}
Column(Modifier.weight(1f)) {
StatusCardItemText("舵机角度 20mm")
}
}
}
)
StatusCardInfo(),
StatusCardMotorStatus(),
StatusCardInfraredStatus(),
StatusCardUltrasoundStatus()
)
)
}
@Composable
fun HomePageUnconnectedStatusCard() {
StatusCard(
cardItems = listOf(
CardItem(
title = "设备未连接",
content = {
StatusCardItemText("请先连接设备")
}
)
),
bottomControl = {
Button(
onClick = {
}
) {
Text("连接设备")
}
}
)
}

31
app/src/main/java/icu/fur93/esp32_car/ui/card/UnconnectedStatusCard.kt Normal file
View File

@ -0,0 +1,31 @@
package icu.fur93.esp32_car.ui.card
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCard
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@Composable
fun UnconnectedStatusCard() {
StatusCard(
cardItems = listOf(
CardItem(
title = "设备未连接",
content = {
StatusCardItemText("请先连接设备")
}
)
),
bottomControl = {
Button(
onClick = {
}
) {
Text("连接设备")
}
}
)
}

19
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StatusCardInfo.kt Normal file
View File

@ -0,0 +1,19 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.runtime.Composable
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardInfo () : CardItem {
return CardItem(
title = "当前连接",
content = {
StatusCardItemText("名称 Name")
StatusCardItemText("Mac XX:XX:XX:XX:XX:XX")
StatusCardItemText("版本 001")
}
)
}

28
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StatusCardInfraredStatus.kt Normal file
View File

@ -0,0 +1,28 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardInfraredStatus () : CardItem {
return CardItem(
title = "红外模块状态",
content = {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
listOf(0, 0, 0, 0, 0).forEach { status ->
StatusCardItemText(status.toString())
}
}
}
)
}

18
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StatusCardJoystickStatus.kt Normal file
View File

@ -0,0 +1,18 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.runtime.Composable
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardJoystickStatus () : CardItem {
return CardItem(
title = "摇杆状态",
content = {
StatusCardItemText("X 0.00")
StatusCardItemText("Y 0.00")
}
)
}

17
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StatusCardPathfinderStatus.kt Normal file
View File

@ -0,0 +1,17 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.runtime.Composable
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardPathfinderStatus () : CardItem {
return CardItem(
title = "循迹状态",
content = {
StatusCardItemText("进行中")
}
)
}

17
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StatusCardSliderStatus.kt Normal file
View File

@ -0,0 +1,17 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.runtime.Composable
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardSliderStatus () : CardItem {
return CardItem(
title = "速度推杆",
content = {
StatusCardItemText("0")
}
)
}

30
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StatusCardUltrasoundStatus.kt Normal file
View File

@ -0,0 +1,30 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardUltrasoundStatus () : CardItem {
return CardItem(
title = "超声波状态",
content = {
Row(
modifier = Modifier.fillMaxWidth()
) {
Column(Modifier.weight(1f)) {
StatusCardItemText("舵机角度 90")
}
Column(Modifier.weight(1f)) {
StatusCardItemText("舵机角度 20mm")
}
}
}
)
}

34
app/src/main/java/icu/fur93/esp32_car/ui/carditem/StautsCardMotorStatus.kt Normal file
View File

@ -0,0 +1,34 @@
package icu.fur93.esp32_car.ui.carditem
import android.annotation.SuppressLint
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.runtime.Composable
import icu.fur93.esp32_car.ui.component.CardItem
import icu.fur93.esp32_car.ui.component.StatusCardItemText
@SuppressLint("ComposableNaming")
@Composable
fun StatusCardMotorStatus () : CardItem {
return CardItem(
title = "电机状态",
content = {
LazyVerticalGrid(
columns = GridCells.Fixed(2)
) {
item {
StatusCardItemText("A 0 1 255")
}
item {
StatusCardItemText("D 0 1 255")
}
item {
StatusCardItemText("B 1 0 255")
}
item {
StatusCardItemText("C 1 0 255")
}
}
}
)
}

81
app/src/main/java/icu/fur93/esp32_car/ui/component/CardButtonGroup.kt Normal file
View File

@ -0,0 +1,81 @@
package icu.fur93.esp32_car.ui.component
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import icu.fur93.esp32_car.ui.theme.CardButtonTypography
data class CardButtonItem(
val text: String,
val icon: ImageVector,
val onClick: (() -> Unit)? = null,
val modifier: Modifier? = Modifier
)
val CardButtonGroupGap = 8.dp
@Composable
fun CardButtonGroup(
title: String,
buttons: List<CardButtonItem>
) {
Text(
text = title,
style = CardButtonTypography.CardButtonGroupTitleTextStyle
)
Spacer(Modifier.height(CardButtonGroupGap))
LazyVerticalGrid(
columns = GridCells.Fixed(2),
horizontalArrangement = Arrangement.spacedBy(CardButtonGroupGap),
verticalArrangement = Arrangement.spacedBy(CardButtonGroupGap)
) {
buttons.forEach { buttonItem ->
item {
CardButton(buttonItem)
}
}
}
}
@Composable
fun CardButton(
item: CardButtonItem
) {
Card {
Column(
modifier = Modifier.fillMaxWidth().padding(12.dp),
verticalArrangement = Arrangement.SpaceBetween
) {
Text(
text = item.text,
style = CardButtonTypography.CardButtonItemTextStyle
)
Box(
modifier = Modifier.fillMaxWidth(),
contentAlignment = Alignment.BottomEnd
) {
Icon(
imageVector = item.icon,
contentDescription = item.text,
modifier = Modifier.size(24.dp)
)
}
}
}
}

12
app/src/main/java/icu/fur93/esp32_car/ui/theme/Type.kt
View File

@ -2,6 +2,7 @@ package icu.fur93.esp32_car.ui.theme
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
@ -48,3 +49,14 @@ val PageTitleTextStyle = TextStyle(
fontSize = 32.sp,
fontWeight = FontWeight.Black
)
object CardButtonTypography {
val CardButtonGroupTitleTextStyle = TextStyle(
fontSize = 18.sp,
fontWeight = FontWeight.SemiBold
)
val CardButtonItemTextStyle = TextStyle(
fontSize = 18.sp,
fontWeight = FontWeight.Normal
)
}

5
app/src/main/res/drawable/baseline_gamepad_24.xml Normal file
View File

@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="@android:color/white" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
<path android:fillColor="@android:color/white" android:pathData="M15,7.5V2H9v5.5l3,3 3,-3zM7.5,9H2v6h5.5l3,-3 -3,-3zM9,16.5V22h6v-5.5l-3,-3 -3,3zM16.5,9l-3,3 3,3H22V9h-5.5z"/>
</vector>

5
app/src/main/res/drawable/baseline_route_24.xml Normal file
View File

@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="@android:color/white" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
<path android:fillColor="@android:color/white" android:pathData="M19,15.18V7c0,-2.21 -1.79,-4 -4,-4s-4,1.79 -4,4v10c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2V8.82C8.16,8.4 9,7.3 9,6c0,-1.66 -1.34,-3 -3,-3S3,4.34 3,6c0,1.3 0.84,2.4 2,2.82V17c0,2.21 1.79,4 4,4s4,-1.79 4,-4V7c0,-1.1 0.9,-2 2,-2s2,0.9 2,2v8.18c-1.16,0.41 -2,1.51 -2,2.82c0,1.66 1.34,3 3,3s3,-1.34 3,-3C21,16.7 20.16,15.6 19,15.18z"/>
</vector>

10
app/src/main/res/drawable/motion_sensor_active_24.xml Normal file
View File

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960"
android:tint="@android:color/white">
<path
android:fillColor="@android:color/white"
android:pathData="M160,880Q127,880 103.5,856.5Q80,833 80,800L80,640L160,640L160,800Q160,800 160,800Q160,800 160,800L320,800L320,880L160,880ZM80,320L80,160Q80,127 103.5,103.5Q127,80 160,80L320,80L320,160L160,160Q160,160 160,160Q160,160 160,160L160,320L80,320ZM440,756Q348,742 283,677Q218,612 204,520L284,520Q296,579 338.5,621.5Q381,664 440,676L440,756ZM204,440Q218,348 283,282.5Q348,217 440,204L440,284Q381,296 338.5,338.5Q296,381 284,440L204,440ZM480,560Q447,560 423.5,536.5Q400,513 400,480Q400,446 423.5,423Q447,400 480,400Q514,400 537,423Q560,446 560,480Q560,513 537,536.5Q514,560 480,560ZM520,756L520,676Q579,664 621.5,621.5Q664,579 676,520L756,520Q743,612 677.5,677Q612,742 520,756ZM676,440Q664,381 621.5,338.5Q579,296 520,284L520,204Q612,218 677.5,283Q743,348 756,440L676,440ZM640,880L640,800L800,800Q800,800 800,800Q800,800 800,800L800,640L880,640L880,800Q880,833 856.5,856.5Q833,880 800,880L640,880ZM800,320L800,160Q800,160 800,160Q800,160 800,160L640,160L640,80L800,80Q833,80 856.5,103.5Q880,127 880,160L880,320L800,320Z"/>
</vector>

5
app/src/main/res/drawable/outline_gamepad_24.xml Normal file
View File

@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="@android:color/white" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
<path android:fillColor="@android:color/white" android:pathData="M13,4v2.67l-1,1 -1,-1L11,4h2m7,7v2h-2.67l-1,-1 1,-1L20,11M6.67,11l1,1 -1,1L4,13v-2h2.67M12,16.33l1,1L13,20h-2v-2.67l1,-1M15,2L9,2v5.5l3,3 3,-3L15,2zM22,9h-5.5l-3,3 3,3L22,15L22,9zM7.5,9L2,9v6h5.5l3,-3 -3,-3zM12,13.5l-3,3L9,22h6v-5.5l-3,-3z"/>
</vector>

10
app/src/main/res/drawable/outline_joystick_24.xml Normal file
View File

@ -0,0 +1,10 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960"
android:tint="@android:color/white">
<path
android:fillColor="@android:color/white"
android:pathData="M272,520L480,640Q480,640 480,640Q480,640 480,640L688,520L520,423L520,560L440,560L440,423L272,520ZM440,331L440,314Q396,301 368,264.5Q340,228 340,180Q340,122 381,81Q422,40 480,40Q538,40 579,81Q620,122 620,180Q620,228 592,264.5Q564,301 520,314L520,331L800,492Q819,503 829.5,521.5Q840,540 840,562L840,638Q840,660 829.5,678.5Q819,697 800,708L520,869Q501,880 480,880Q459,880 440,869L160,708Q141,697 130.5,678.5Q120,660 120,638L120,562Q120,540 130.5,521.5Q141,503 160,492L440,331ZM440,709L200,571L200,638Q200,638 200,638Q200,638 200,638L480,800Q480,800 480,800Q480,800 480,800L760,638Q760,638 760,638Q760,638 760,638L760,571L520,709Q501,720 480,720Q459,720 440,709ZM480,240Q505,240 522.5,222.5Q540,205 540,180Q540,155 522.5,137.5Q505,120 480,120Q455,120 437.5,137.5Q420,155 420,180Q420,205 437.5,222.5Q455,240 480,240ZM480,800Q480,800 480,800Q480,800 480,800L480,800L480,800Q480,800 480,800Q480,800 480,800L480,800Q480,800 480,800Q480,800 480,800L480,800Q480,800 480,800Q480,800 480,800L480,800Z" />
</vector>

5
app/src/main/res/drawable/outline_route_24.xml Normal file
View File

@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="@android:color/white" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
<path android:fillColor="@android:color/white" android:pathData="M19,15.18V7c0,-2.21 -1.79,-4 -4,-4s-4,1.79 -4,4v10c0,1.1 -0.9,2 -2,2s-2,-0.9 -2,-2V8.82C8.16,8.4 9,7.3 9,6c0,-1.66 -1.34,-3 -3,-3S3,4.34 3,6c0,1.3 0.84,2.4 2,2.82V17c0,2.21 1.79,4 4,4s4,-1.79 4,-4V7c0,-1.1 0.9,-2 2,-2s2,0.9 2,2v8.18c-1.16,0.41 -2,1.51 -2,2.82c0,1.66 1.34,3 3,3s3,-1.34 3,-3C21,16.7 20.16,15.6 19,15.18zM6,7C5.45,7 5,6.55 5,6s0.45,-1 1,-1s1,0.45 1,1S6.55,7 6,7zM18,19c-0.55,0 -1,-0.45 -1,-1s0.45,-1 1,-1s1,0.45 1,1S18.55,19 18,19z"/>
</vector>