Could you please help on abling pixel value?

[zhengchencai]

Hi there,

Thank you very much for making this wrapper and it helps a lot for R users. I am trying to enable "flagValue" and "colormap" such that pixel values could be displayed like the demo here (https://brainsprite.github.io/auto_examples/plot_stat_map.html). However, it only shows "no value" no matter where I click.

What I did is just simply hacked brainsprite.R and add "flagValue" and "colormap" in the script. I also added "crosshair" and "colorCrosshair" which works. colormap input is just a png colorbar.

brainsprite_new = function(sprites,
                       spriteHeight = 233,
                       spriteWidth = 189,
                       inputId = tempfile('id') %>% basename,
                       spriteID = tempfile('id') %>% basename,
                       flagCoordinates = FALSE,
                       flagValue = TRUE,
                       crosshair = TRUE,
                       colormap = FALSE,
                       nanValue = T,
                       colorCrosshair = "black",
                       origin = c(0,0,0),
                       fontColor = "#FFFFFF",
                       background = "#000000",
                       overlay = NULL,
                       overlayHeight = NULL,
                       overlayWidth = NULL,
                       overlayID = tempfile('id') %>% basename,
                       overlayOpacity = 0.5,
                       height = NULL,
                       width = NULL){

  script = glue::glue(" $( <spriteID> ).load(function() {
                       var brain = brainsprite({
                       canvas: '<inputId>', // That is the ID of the canvas to build slices into
                       sprite: '<spriteID>', // That is the ID of the sprite image that includes all (sagital) brain slices
                       nbSlice: { 'Y':<spriteHeight> , 'Z':<spriteWidth> },
                       colorBackground: '<background>',
                       colorFont: '<fontColor>',
                       crosshair: '<tolower(crosshair)>',
                       colorCrosshair: '<colorCrosshair>',
                       flagValue: '<tolower(flagValue)>',
                       colormap: '<colormap>',
                       nanValue: '<nanValue>',
                       flagCoordinates: <tolower(flagCoordinates)>
                       "
                      ,.open = '<',.close = '>')

 script = glue::glue(" $( <spriteID> ).load(function() {
                       var brain = brainsprite({
                       canvas: '<inputId>', // That is the ID of the canvas to build slices into
                       sprite: '<spriteID>', // That is the ID of the sprite image that includes all (sagital) brain slices
                       nbSlice: { 'Y':<spriteHeight> , 'Z':<spriteWidth> },
                       colorBackground: '<background>',
                       colorFont: '<fontColor>',
                       crosshair: '<tolower(crosshair)>',
                       colorCrosshair: '<colorCrosshair>',
                       flagValue: '<tolower(flagValue)>',
                       colormap: '<colormap>',
                       nanValue: '<nanValue>',
                       flagCoordinates: <tolower(flagCoordinates)>
                       "
                      ,.open = '<',.close = '>')

I hasn't fully understood how brainspriteR works since I am not familiar with java scrip. It seems one needs to provide a colormap which is same as the one in the overlay image, and pixel value is extracted by reading the RGB value and corresponds to the colorbar range (see below function getValue from brainsprite.js). Could you please help? Thanks

  let getValue = function (rgb, colorMap) {
  // Extract the value associated with a voxel by looking up in a colormap.
    if (!colorMap) {
      return NaN
    }
    let ind = NaN
    let val = Infinity
    const nbColor = colorMap.canvas.width
    const cv = colorMap.context.getImageData(0, 0, nbColor, 1).data
    for (let xx = 0; xx < nbColor; xx++) {
      const dist = Math.abs(cv[xx * 4] - rgb[0]) + Math.abs(cv[xx * 4 + 1] - rgb[1]) + Math.abs(cv[xx * 4 + 2] - rgb[2])
      if (dist < val) {
        ind = xx
        val = dist
      }
    }