Skip to content

Instantly share code, notes, and snippets.

@simon-anders
Created May 15, 2017 09:15
Show Gist options
  • Save simon-anders/ddddb86485a77c797089bd77b09e9463 to your computer and use it in GitHub Desktop.
Save simon-anders/ddddb86485a77c797089bd77b09e9463 to your computer and use it in GitHub Desktop.
Example for R code to generate a table in HTML with an image by the side that displays a plot about the table row under the mouse cursor
# A sketch on how one can use hwriter to display an image when hovering
# over a table row.
library( hwriter )
# Make a data frame with some parameters or other data
df <- data.frame(
name = sprintf( "Lissajous-%02d", 0:99 ),
freq.x = floor( runif( 100, min=2, max=8 ) ),
freq.y = floor( runif( 100, min=2, max=8 ) ) )
# Create images, one to illustrate each row
lissajous <- function( fx, fy ) {
plot( NULL, xlim=c(-1,1), ylim=c(-1,1), xlab="", ylab="", xaxt="n", yaxt="n", asp=1 )
gphi <- seq( 0, fx*fy*2*pi, by=pi/100 )
lines( cos( gphi * fx ), sin( gphi * fy ), lwd=2 )
}
dir.create( "images" )
for( i in 1:nrow(df) ) {
png( file = paste0( "images/", df$name[i], ".png" ) )
lissajous( df$freq.x[i], df$freq.y[i] )
dev.off()
}
# Write the HTML page
page <- openPage( "lissajous.html",
head = paste( sep="\n",
"<script>",
" function set_image( name ) {",
" document.getElementById( 'plot' ).setAttribute( 'src', 'images/' + name + '.png' );",
" }",
"</script>" ) )
cat( file=page,
'<table><tr><td style="vertical-align:top"><div style="height:500px; overflow-y:scroll">' )
hwrite( df, border=NULL, page=page,
onmouseover = sprintf( "set_image( '%s' );", df$name ) )
cat( file=page,
'</div></td><td style="vertical-align:top"><img id="plot" width="200px"></td></tr></table>' )
closePage(page)
browseURL( "lissajous.html" )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment