Hey people, trying to get image loading from netwo...

# compose

[ianrumac]

Hey people, trying to get image loading from network to work:
So I have a

Container{
val state = +model{ NetworkImagemodel(bitmap: null); } // this is a @Model annotated data class

glideBitmapReady(src,context) {
 state.bitmap = it //this is callback from Glide's onResourceReady
}
onCommit(state) {
 println("Loaded)"
}
}

I get a IllegalStateException: Not in a frame pointing to the change of state model (state.bitmap = it //this is callback from Glide's onResourceReady)

[Andrey Kulikov]

could you also show your glideBitmapReady code please?

[ianrumac]

Glide.with( context).asBitmap().load(src)
                    .addListener(object :
                        RequestListener<Bitmap> {
                        override fun onLoadFailed(
                            e: GlideException?,
                            model: Any?,
                            target: Target<Bitmap>?,
                            isFirstResource: Boolean
                        ): Boolean {
                            e!!.printStackTrace()
                            return false
                        }

                        override fun onResourceReady(
                            resource: Bitmap?,
                            _model: Any?,
                            target: Target<Bitmap>?,
                            dataSource: DataSource?,
                            isFirstResource: Boolean
                        ): Boolean {
                            callback(resource)
                            return true
                        }
                    }).preload()

[ianrumac]

I’m an idiot, first thing I should do is switch .submit to .preload() I figure 🤦

[ianrumac]

okay yeah, found my problem - moved to preload and moved the state check code out of onCommit, got it working now

[ianrumac]

is there a way to invoke a lambda only on initial render, not on subsequent updates? or should i have to worry about that in the parent of the component?

[Leland Richardson [G]]

Hey @ianrumac it’s really cool to see people trying out this code

[Leland Richardson [G]]

there’s a couple of things to consider here

[Leland Richardson [G]]

the glideBitmapReady function, as you noticed, will run too often

[Leland Richardson [G]]

what we can do is use a couple of primitives that compose has to run only when it needs to

[Leland Richardson [G]]

for example, the onCommit effect is a way to run code when compose actually applies the changes to the UI, and only when some number of inputs have changed (like memo)

[Leland Richardson [G]]

i rewrote your glide function a little bit

[Leland Richardson [G]]

fun glideBitmapReady(src: String) = effectOf<Bitmap?> {
  val result = +state<Bitmap> { null }
  val context = +ambient(AmbientContext)
  +onPreCommit(src) {
    val listener = object : RequestListener<Bitmap> {
      override fun onLoadFailed(
          e: GlideException?,
          model: Any?,
          target: Target<Bitmap>?,
          isFirstResource: Boolean
      ): Boolean {
          e!!.printStackTrace()
          return false
      }

      override fun onResourceReady(
          resource: Bitmap?,
          _model: Any?,
          target: Target<Bitmap>?,
          dataSource: DataSource?,
          isFirstResource: Boolean
      ): Boolean {
          result.value = resource
          return true
      }
    }
    val glide = Glide
    .with(context)
    .asBitmap()
    .load(src)
    .addListener(listener)
    .preload()
    onDispose {
      glide.removeListener(listener)
    }
  }
  result.value
}

[Leland Richardson [G]]

this turns it into an “effect”, which is a concept that is going away in compose, but the change will only make things simpler. In the future, you would do the same thing, except the = effectOf<Bitmap?> would just turn into : Bitmap? and all of the pluses would go away

[Leland Richardson [G]]

but to explain the code a little bit, what i’m doing is localizing the state to the effect, so that it can be used more succinctly. I’m also only calling onPreCommit when the src string changes. this means that things will properly update if you change the src string

[Leland Richardson [G]]

i don’t remember all of the glide APIs off-hand, so i guessed that removeListener was an API that exists, but let me know if it doesnt

[Leland Richardson [G]]

it’s important that I call onDispose here with the removeListener call, which ensures that as the src string changes, I clean up any old requests that had been set up from earlier versions

[Leland Richardson [G]]

from the composable function you wanted to use this in, you would use this like:

var bitmap = +glideBitmapReady(src)

[Leland Richardson [G]]

OH. almost forgot. the error you were getting with IllegalStateException: Not in a frame was because you were mutating the model in a different thread. This is totally allowed, but you have to do a little bit of extra work. In this case, you need to open up a model transaction and commit it.

I’m not in a place to look up the exact API, but I believe if you look in androidx.compose.frames it will be something like

open {
  myModel.property = newValue
  commit()
}

[ianrumac]

ahhhh thanks for the explanations! noticed the `effectOf`in the docs but wasn’t quite sure what it does. understanding it better now, thanks 👍

[Leland Richardson [G]]

we haven’t been explaining it too thoroughly because it will be going away soon…

[ianrumac]

and thanks for the open tip, I assumed that I was out of the UI scope/thread when getting the exception, and started going through `Frames’ to figure out what was going on but couldn’t really wrap my head around it, now it’s more obvious.

[Leland Richardson [G]]

yeah that error message isn’t particularly helpful. we should add some more to it for sure

[Leland Richardson [G]]

and also the naming isn’t great. we are renaming “frame” in this context to “transaction” but haven’t yet

[ianrumac]

really? I find frame to have more sense in the context of a UI engine, transaction seems way more generic

[Leland Richardson [G]]

and to be clear, the API of effectOf is going away, but that doesn’t mean you shouldn’t use it. It’s “going away” as in the code you write will be almost identical, you will just be able to remove some words and plus signs…. so definitely use effectOf for now

[Leland Richardson [G]]

the problem is that frame doesn’t actually correspond to the UI’s sense of frame here

[ianrumac]

I assume it’s the recorded ‘state’ before a render is invoked?

[Leland Richardson [G]]

no it’s a bit different from that

[Leland Richardson [G]]

model objects are locally consistent, in that you can mutate them on one thread without another thread seeing those mutations… until you “commit” those changes.

[Leland Richardson [G]]

on the UI thread, you don’t need to commit anything

[Leland Richardson [G]]

since it’s also the thread that coordination is done on

[Leland Richardson [G]]

the sort of “view” or “scope” of those mutations can be thought of as the frame (in its current usage)

[Leland Richardson [G]]

you can open a new frame, make changes, abort them, no one will ever see those changes

[Leland Richardson [G]]

you can also open a new frame, make changes, and then commit

[Leland Richardson [G]]

and those changes will then get reflected on the main thread

[Leland Richardson [G]]

so it starts to feel a lot like a transaction IMO

[ianrumac]

ah makes sense, I thought of frame’s more as a single state ‘log’

[ianrumac]

esp when thinking about it as being changes done on a Model, transaction does fit better

[ianrumac]

thanks for the quick engine runthrough, you saved me hours of digging through sources

[Leland Richardson [G]]

👍 hopefully our documentation game will improve before an alpha or beta so that people like you don’t lose this time

[ianrumac]

I think just a architecture diagram would be enough for this phase, just so there’s an overview of things