Как создать полукруглый слайдер с помощью холста Jetpack Compose?

Я новичок в Android Studio, и мне нужно создать слайдер для просмотра данных, полученных Arduino через Wi-Fi (температура и освещенность). Я хочу иметь составной файл SemicircularSlider.kt, который будет получать значения Arduino и отображать их в диапазоне, который я установлю в файле Kotlin. Затем с помощью файла Kotlin я хочу добавить их в свой макет в моем XML-файле, как будто это еще одно представление или просто виджет, и изменить значения (например, цвет и диапазон ползунка) через XML.

Поскольку я новичок в Composable и Android Studio, я попробовал создать Composable с помощью

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.unit.dp
import kotlin.math.PI
import kotlin.math.atan2
import kotlin.math.cos
import kotlin.math.sin

@Composable
fun SemiCircularSlider(
    modifier: Modifier = Modifier,
    value: Float,
    onValueChange: (Float) -> Unit,
    colorStart: Color,
    colorEnd: Color
) {
    var angle by remember { mutableStateOf(0f) }

    Canvas(modifier = modifier
        .fillMaxSize()
        .padding(16.dp)
        .pointerInput(Unit) {
            detectDragGestures { change, _ ->
                val position = change.position
                val center = Offset((size.width / 2).toFloat(), (size.height / 2).toFloat())
                angle = ((atan2(position.y - center.y, position.x - center.x) * 180 / PI).toFloat() + 180) % 180
                onValueChange(angle)
            }
        }
    ) {
        val radius = size.minDimension / 2
        val arcRect = Rect(Offset(size.width / 2 - radius, size.height / 2 - radius), Size(radius * 2, radius * 2))

        drawArc(
            color = colorStart,
            startAngle = 180f,
            sweepAngle = angle,
            useCenter = false,
            style = Stroke(width = 20f),
            topLeft = arcRect.topLeft,
            size = arcRect.size
        )

        val thumbX = center.x + cos((angle - 180) * PI / 180).toFloat() * radius
        val thumbY = center.y + sin((angle - 180) * PI / 180).toFloat() * radius

        drawCircle(
            color = colorEnd,
            radius = 20f,
            center = Offset(thumbX, thumbY)
        )
    }
}

@Composable
fun MainControlScreen() {
    var temperature by remember { mutableStateOf(0f) }
    var light by remember { mutableStateOf(0f) }

    MaterialTheme {
        Column {
            Text("Temperature: ${temperature.toInt()}")
            SemiCircularSlider(
                value = temperature,
                onValueChange = { temperature = it },
                colorStart = Color(0xFFFF5722),
                colorEnd = Color(0xFFFFC107)
            )
            Spacer(modifier = Modifier.height(32.dp))
            Text("Light: ${light.toInt()}")
            SemiCircularSlider(
                value = light,
                onValueChange = { light = it },
                colorStart = Color(0xFF03A9F4),
                colorEnd = Color(0xFF4CAF50)
            )
        }
    }
}

Я не спрашивал все про подключение Arduino, потому что даже полукруглый слайдер на экране показать не могу. Это решение привело меня к ошибке "org.jetbrains.kotlin.backend.common.BackendException: Backend Internal error: Exception during IR lowering"

Это идея о том, как я хочу, чтобы мой слайдер выглядел. Идея полукруглого слайдера температуры Единственным отличием будет добавление цифр в крайнем левом нижнем углу ползунка, чтобы показать пользователю диапазон значений, и центральное число, показывающее текущее значение.

Не стесняйтесь задавать любые вопросы, если это необходимо, или просить дополнительный код. И извините, если мой английский немного хромает.