Hi, i have created a simple image preview, that sh...

# compose-desktop

[Gordon]

Hi, i have created a simple image preview, that shows an image and a slider to visually compare images.
But it's not performing well (slow).
Can you see at the code and suggest a better approach?

@OptIn(ExperimentalComposeUiApi::class)
@Composable
@Preview
fun ImagePreview(args: Array<String>) {

    if (args.size != 2) {
        Text(text = "Usage: app image1 image2, args:${args.size}")
        return
    }
    val bitmap = loadImageBitmap(FileInputStream(args[1]))
    val bitmap2 = loadImageBitmap(FileInputStream(args[0]))
    var mousePos by remember { mutableStateOf(IntOffset(320, 0)) }
    Box(
        modifier = Modifier.background(color=Color.Gray).fillMaxSize()
        .clickable(onClick = {
            println("click at $mousePos")
        }).onPointerEvent(PointerEventType.Move) {
            mousePos = IntOffset(it.changes.last().position.x.toInt(), 0)
        }
    ) {
        Image(bitmap = bitmap, "kotlin", contentScale = ContentScale.None, modifier = Modifier.fillMaxSize() )
        Box(modifier = Modifier.fillMaxHeight().fillMaxWidth()) {
           Image(bitmap = bitmap2, contentDescription = "bla", contentScale = ContentScale.None, modifier = Modifier.fillMaxSize().clip(MyShape(mousePos.x)))
        }
        Box(
            modifier = Modifier.width(4.dp).fillMaxHeight().offset { mousePos }.background(color = Color.Red)
        )
    }
}

class MyShape(private val maxWidth: Int) : Shape {
    override fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline {
        return Outline.Rectangle(Rect(Offset(0f,0f), Size(maxWidth.toFloat(), size.height)))
    }
}

[Filip Wiesner]

If I understand it right, you are loading a bitmap from a file on every re-composition. That will certainly cause performance problems

[Gordon]

🤦‍♂️ Thanks. That did improve it a lot. But it still fills kinda slow. Comparing this to HTML/CSS/JS and QML versions.

[Gordon]

Never mind, it's ok now.

[Gordon]

Thanks

[Filip Wiesner]

No problem 👌

[Kebbin]

@Gordon How did you fix it? Thanks.

[Gordon]

val bitmap by remember { mutableStateOf(loadImageBitmap(FileInputStream(args[1]))) }
val bitmap2 by remember { mutableStateOf(loadImageBitmap(FileInputStream(args[0]))) }

That did the trick.

[Kebbin]

Thanks!