用于改变散景图像图中使用的切片的交互式滑块

时间:2015-08-13 04:23:52

标签: python numpy ipython-notebook bokeh

我有兴趣使用Bokeh将图像放入IPython笔记本中。特别是我经常与之交互的数据类型是具有3个或更多维度的多维NumPy数组。以三维数组为例。经常遇到的例子是RGB图像。三个维度为xycolor

我有兴趣使用Bokeh在IPython笔记本中绘制单个图像通道。我想提供一个交互式滑块,允许IPython笔记本的用户点击第三维的每个索引,在本例中为颜色。

下面的代码(在IPython笔记本中运行时)成功显示了第一个颜色通道的图。但是我无法弄清楚在调用interact时导致错误的原因。我是否正确定义了ColumnDataSource并在散景图构造中正确引用了它?

# imports
import numpy as np
from scipy.misc import imread

from bokeh.plotting import figure, show
from bokeh.io import output_notebook
from bokeh.models import ColumnDataSource
from bokeh.palettes import Greys9

from IPython.html.widgets import interact
# enable Bokeh to plot to the notebook 
output_notebook()

# Make the Bokeh plot of the "first" layer of the 3D data
## This part works
TOOLS="pan, box_zoom, reset, save"

  # The image from https://windycitizensports.files.wordpress.com/2011/10/baboon.jpg?w=595
RGB_image = imread('/Users/curt/Downloads/BaboonRGB.jpg')

nx, ny, n_colors = RGB_image.shape

source = ColumnDataSource(data={'image': RGB_image[:, :, 0]})

p = figure(title="ColorChannel", 
           tools=TOOLS, 
           x_range=[0, nx], 
           y_range=[0, ny],
          )

p.image([source.data['image'][::-1, :]-1],
        x=0, 
        y=0, 
        dh=[ny], 
        dw=[nx], 
        palette=Greys9,
        source=source,
        )

show(p)
# try to add interactive slider
## This part does not work & gives a JavaScript error

def update(idx=0):
    global RGB_image
    source.data['image'] = RGB_image[:, :, idx]
    source.push_notebook()

interact(update, idx=(0, 2))

Javascript错误是:

Javascript error adding output!
TypeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The provided float value is non-finite.
See your browser Javascript console for more details.

我不确定这是怎么回事。我在尝试RGB_Image之后立即执行RGB_Image = RGB_Image.astype(float)尝试强制public class JAVA_Guevarra { public static void main(String[] args) { //These are the variables double empBasicPay[] = {4000,5000,12000,6000,7500}; double empHousingAllow[] = new double[5]; int i; //This program computes for the payment of the employees for(i=0; i<5; i++){ empHousingAllow[i] = 0.2 * empBasicPay[i]; //This loop statement gets 20% of the employee basic payment } System.out.println("Employee Basic and House Rental Allowance"); for(i = 0; i<5; i++){ System.out.println(empBasicPay[i] + " " + empHousingAllow[i]); //This prints out the final output of the first loop statement } } } ,但我得到了相同的错误。

1 个答案:

答案 0 :(得分:5)

从本质上讲,您的预定义图像与您尝试更新的图像之间的数据格式不一致。

可行的解决方法:

def update(idx=0):
    global RGB_image
    source.data['image'] = RGB_image[:, :, idx]
    p.image([source.data['image'][::-1, :]-1],
        x=0, 
        y=0, 
        dh=[ny], 
        dw=[nx], 
        palette=Greys9,
        source=source,
        )
    show(p)

interact(update, idx=(0, 2))

我会承认,一遍又一遍地定义图像并不是这种方法的首选方法,但它应该至少可以帮助您了解在哪里查看。