Possible to update a image_rgba on change of a widget?

I see plenty of great examples of how to update glyphs on a plot following an on change of a widget by altering the column data source object. My question is can we update an image in the same way? figure.image_rgba takes a numpy array, not a ColumnDataSource. Is it possible to just replot a new image by specifying a new numpy array when an on_change event is triggered? And if so is there any difference in this functionality compared to glyphs that use a ColumnDataSource? Thanks!

To the best of my knowledge, all the plotting glyphs should be compatible with column data source. With glyphs like image_rgba, you have to assign a list containing your array to a column of your column data source. Currently, this will only work if the column containing your image array is named ‘image’ — this is a closed issue and will be fixed in 0.12.5. From there, updating the plot follows the same pattern or altering the column data source model within a callback.

Here is an example illustrating updating an image_rgba glyph, using bokeh server. Largely borrowing from the example here.

from [bokeh.io](http://bokeh.io) import curdoc
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure
import numpy as np
import pandas as pd
N = 20
img = np.empty((N, N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4
))
for i in range(N):
for j in range(N):
view[i, j, 0] = int(i/N*255        )
view[i, j, 1] = 158
        view[i, j, 2] = int(j/N*255        )
view[i, j, 3] = 255

# assign a list containing our image to column data source column
source = ColumnDataSource({'image'
: [img]})
p = figure(x_range=(0,10), y_range=(0,10
))
p.image_rgba(image='image', x=0, y=0, dw=10, dh=10
, source=source)
slide = Slider(start=0, end=500, step=10, value=0
)
layout = column(p, slide)
# update image on callback
def update(attr, old, new):
    # create a new image based on slider widget value
    new_image = img
new_view = new_image.view(dtype=np.uint8).reshape((N, N, 4    ))
new_view[:, :, 0] = (new_view[:, :, 0] + slide.value) % 255
    new_view[:, :, 2] = (new_view[:, :, 2] + slide.value) % 255
    # update column data source
    source.data = {'image'
: [new_image]}
slide.on_change('value'
, update)
curdoc().add_root(layout)

···

On Tue, Feb 14, 2017 at 3:40 PM, [email protected] wrote:

I see plenty of great examples of how to update glyphs on a plot following an on change of a widget by altering the column data source object. My question is can we update an image in the same way? figure.image_rgba takes a numpy array, not a ColumnDataSource. Is it possible to just replot a new image by specifying a new numpy array when an on_change event is triggered? And if so is there any difference in this functionality compared to glyphs that use a ColumnDataSource? Thanks!

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8478457a-9b5f-463f-9ed5-d8434cbe3b65%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Awesome thanks Tyler! Just for others, one small correction to make your script above work is it seems we still want to start the ColumnDataSource with an empty image, {‘image’:} and then update it with update. Thanks, again!

···

On Wednesday, February 15, 2017 at 11:48:02 AM UTC-8, Tyler Nickerson wrote:

To the best of my knowledge, all the plotting glyphs should be compatible with column data source. With glyphs like image_rgba, you have to assign a list containing your array to a column of your column data source. Currently, this will only work if the column containing your image array is named ‘image’ — this is a closed issue and will be fixed in 0.12.5. From there, updating the plot follows the same pattern or altering the column data source model within a callback.

Here is an example illustrating updating an image_rgba glyph, using bokeh server. Largely borrowing from the example here.

from [bokeh.io](http://bokeh.io) import curdoc
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure
import numpy as np
import pandas as pd
N = 20
img = np.empty((N, N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4
))
for i in range(N):
for j in range(N):
view[i, j, 0] = int(i/N*255        )
view[i, j, 1] = 158
        view[i, j, 2] = int(j/N*255        )
view[i, j, 3] = 255

# assign a list containing our image to column data source column
source = ColumnDataSource({'image'
: [img]})
p = figure(x_range=(0,10), y_range=(0,10
))
p.image_rgba(image='image', x=0, y=0, dw=10, dh=10
, source=source)
slide = Slider(start=0, end=500, step=10, value=0
)
layout = column(p, slide)
# update image on callback
def update(attr, old, new):
    # create a new image based on slider widget value
    new_image = img
new_view = new_image.view(dtype=np.uint8).reshape((N, N, 4    ))
new_view[:, :, 0] = (new_view[:, :, 0] + slide.value) % 255
    new_view[:, :, 2] = (new_view[:, :, 2] + slide.value) % 255
    # update column data source
    source.data = {'image'
: [new_image]}
slide.on_change('value'
, update)
curdoc().add_root(layout)

On Tue, Feb 14, 2017 at 3:40 PM, [email protected] wrote:

I see plenty of great examples of how to update glyphs on a plot following an on change of a widget by altering the column data source object. My question is can we update an image in the same way? figure.image_rgba takes a numpy array, not a ColumnDataSource. Is it possible to just replot a new image by specifying a new numpy array when an on_change event is triggered? And if so is there any difference in this functionality compared to glyphs that use a ColumnDataSource? Thanks!

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8478457a-9b5f-463f-9ed5-d8434cbe3b65%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

I’m glad I could help. Sorry, about the example not working! I removed a line from the callback function that I thought was redundant, but it had the necessary side effect of assigning a copy of img to new_img… Adding the copy method to the first line of the callback function will fix the issue as well. This approach will work with initializing the the column data source with {'image': [img]}. Here’s the modified callback function:

def update(attr, old, new):
    # create a new image based on slider widget value
    new_image = img.copy() new_view = new_image.view(dtype=np.uint8).reshape((N, N, 4    ))
new_view[:, :, 0] = (new_view[:, :, 0] + slide.value) % 255
    new_view[:, :, 2] = (new_view[:, :, 2] + slide.value) % 255

    # update column data source
    source.data = {'image': [new_image]}
`

···

On Thu, Feb 16, 2017 at 9:01 AM, [email protected] wrote:

Awesome thanks Tyler! Just for others, one small correction to make your script above work is it seems we still want to start the ColumnDataSource with an empty image, {‘image’:} and then update it with update. Thanks, again!

On Wednesday, February 15, 2017 at 11:48:02 AM UTC-8, Tyler Nickerson wrote:

To the best of my knowledge, all the plotting glyphs should be compatible with column data source. With glyphs like image_rgba, you have to assign a list containing your array to a column of your column data source. Currently, this will only work if the column containing your image array is named ‘image’ — this is a closed issue and will be fixed in 0.12.5. From there, updating the plot follows the same pattern or altering the column data source model within a callback.

Here is an example illustrating updating an image_rgba glyph, using bokeh server. Largely borrowing from the example here.

from [bokeh.io](http://bokeh.io) import curdoc
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure
import numpy as np
import pandas as pd
N = 20
img = np.empty((N, N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4
))
for i in range(N):
for j in range(N):
view[i, j, 0] = int(i/N*255        )
view[i, j, 1] = 158
        view[i, j, 2] = int(j/N*255        )
view[i, j, 3] = 255

# assign a list containing our image to column data source column
source = ColumnDataSource({'image'
: [img]})
p = figure(x_range=(0,10), y_range=(0,10
))
p.image_rgba(image='image', x=0, y=0, dw=10, dh=10
, source=source)
slide = Slider(start=0, end=500, step=10, value=0
)
layout = column(p, slide)
# update image on callback
def update(attr, old, new):
    # create a new image based on slider widget value
    new_image = img
new_view = new_image.view(dtype=np.uint8).reshape((N, N, 4    ))
new_view[:, :, 0] = (new_view[:, :, 0] + slide.value) % 255
    new_view[:, :, 2] = (new_view[:, :, 2] + slide.value) % 255
    # update column data source
    source.data = {'image'
: [new_image]}
slide.on_change('value'
, update)
curdoc().add_root(layout)

On Tue, Feb 14, 2017 at 3:40 PM, [email protected] wrote:

I see plenty of great examples of how to update glyphs on a plot following an on change of a widget by altering the column data source object. My question is can we update an image in the same way? figure.image_rgba takes a numpy array, not a ColumnDataSource. Is it possible to just replot a new image by specifying a new numpy array when an on_change event is triggered? And if so is there any difference in this functionality compared to glyphs that use a ColumnDataSource? Thanks!

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8478457a-9b5f-463f-9ed5-d8434cbe3b65%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/3a8ca68e-f8d4-414a-9312-7112f9c4e574%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Ah ok this makes more sense. Thanks Tyler!

···

On Thursday, February 16, 2017 at 12:19:12 PM UTC-8, Tyler Nickerson wrote:

I’m glad I could help. Sorry, about the example not working! I removed a line from the callback function that I thought was redundant, but it had the necessary side effect of assigning a copy of img to new_img… Adding the copy method to the first line of the callback function will fix the issue as well. This approach will work with initializing the the column data source with {'image': [img]}. Here’s the modified callback function:

def update(attr, old, new):
    # create a new image based on slider widget value
    new_image = img.copy() new_view = new_image.view(dtype=np.uint8).reshape((N, N, 4    ))
new_view[:, :, 0] = (new_view[:, :, 0] + slide.value) % 255
    new_view[:, :, 2] = (new_view[:, :, 2] + slide.value) % 255

    # update column data source
    source.data = {'image': [new_image]}
`

On Thu, Feb 16, 2017 at 9:01 AM, [email protected] wrote:

Awesome thanks Tyler! Just for others, one small correction to make your script above work is it seems we still want to start the ColumnDataSource with an empty image, {‘image’:} and then update it with update. Thanks, again!

On Wednesday, February 15, 2017 at 11:48:02 AM UTC-8, Tyler Nickerson wrote:

To the best of my knowledge, all the plotting glyphs should be compatible with column data source. With glyphs like image_rgba, you have to assign a list containing your array to a column of your column data source. Currently, this will only work if the column containing your image array is named ‘image’ — this is a closed issue and will be fixed in 0.12.5. From there, updating the plot follows the same pattern or altering the column data source model within a callback.

Here is an example illustrating updating an image_rgba glyph, using bokeh server. Largely borrowing from the example here.

from [bokeh.io](http://bokeh.io) import curdoc
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider
from bokeh.plotting import figure
import numpy as np
import pandas as pd
N = 20
img = np.empty((N, N), dtype=np.uint32)
view = img.view(dtype=np.uint8).reshape((N, N, 4
))
for i in range(N):
for j in range(N):
view[i, j, 0] = int(i/N*255        )
view[i, j, 1] = 158
        view[i, j, 2] = int(j/N*255        )
view[i, j, 3] = 255

# assign a list containing our image to column data source column
source = ColumnDataSource({'image'
: [img]})
p = figure(x_range=(0,10), y_range=(0,10
))
p.image_rgba(image='image', x=0, y=0, dw=10, dh=10
, source=source)
slide = Slider(start=0, end=500, step=10, value=0
)
layout = column(p, slide)
# update image on callback
def update(attr, old, new):
    # create a new image based on slider widget value
    new_image = img
new_view = new_image.view(dtype=np.uint8).reshape((N, N, 4    ))
new_view[:, :, 0] = (new_view[:, :, 0] + slide.value) % 255
    new_view[:, :, 2] = (new_view[:, :, 2] + slide.value) % 255
    # update column data source
    source.data = {'image'
: [new_image]}
slide.on_change('value'
, update)
curdoc().add_root(layout)

On Tue, Feb 14, 2017 at 3:40 PM, [email protected] wrote:

I see plenty of great examples of how to update glyphs on a plot following an on change of a widget by altering the column data source object. My question is can we update an image in the same way? figure.image_rgba takes a numpy array, not a ColumnDataSource. Is it possible to just replot a new image by specifying a new numpy array when an on_change event is triggered? And if so is there any difference in this functionality compared to glyphs that use a ColumnDataSource? Thanks!

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8478457a-9b5f-463f-9ed5-d8434cbe3b65%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/3a8ca68e-f8d4-414a-9312-7112f9c4e574%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.