Im pretty new in Android studio and need to make a Slider to view data recieved by an arduino via Wi-Fi (Temperature and Light).
What I want is to have a SemicircularSlider.kt composable that recieves de values of the arduino and displays them in a range which I will set on the Kotlin file.
Then With the Kotlin file I want to add them to my layout in my XML file like it’s another View, Or just a Widget and change the values (Like color and range of the slider) through XML.
As I’m new with Composable and Android Studio I tried making the Composable with ChatGPT and gave me This Code
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)
)
}
}
}
I didn’t really asked for all about the arduino connection because I can’t even show a semicircular slider on the screen
This solution dropped me the error "org.jetbrains.kotlin.backend.common.BackendException: Backend Internal error: Exception during IR lowering"
Feel free to ask any questions if needed or ask for more code. And sorry if my English is a bit off.
Joaquin Hazzi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.