Add an image into an Rook web app using css

Question

I have the following code which should produce a simple page with an image as background

r <- matrix(runif(9, 0, 1), 3)
g <- matrix(runif(9, 0, 1), 3)
b <- matrix(runif(9, 0, 1), 3)

col <- rgb(r, g, b)
dim(col) <- dim(r)

library(grid)
jpeg(filename="image.jpg")
grid.raster(col, interpolate=FALSE)
dev.off()

library(Rook)
server <- Rhttpd$new()

server$add(
  app=function(env){
    req <- Rook::Request$new(env)
    res <- Rook::Response$new()
    #....# r code
    res$write('
<!DOCTYPE html>
<html>
<head>              
<style>

body
{
background-image: url("image.jpg");
}

</style>
</head>
<body>
<h1>Hello World!</h1>
</h1>
</body>
</html>')

    res$finish()
  },
  name='webApp'
)

server$start(quiet=TRUE)
server$browse("webApp")

However, it doesn't show the image. I currently use a lot of css style formatting into the <head> tag but only background-image seems not to work... (just exporting everything inside the function res$write into a .html file and opening with browser does show the image)

EDIT:

NB: Relative or Absolute path does not make any difference unfortunately. Firebug and chrome dev tools both show the css line and no error is displayed. Can anyone of you see the image in the background running the example above?

Possibly an issue with the location of the image? Does adding a path to the `background-image` line help? — Hong Ooi, Jul 07 '13 at 18:35
What's getting to the browser? Maybe you could use the Firebug extension of Firefox to track down the error? Any 404 or other error? — JerryWho, Jul 07 '13 at 19:24
@JerryWho I'll answer your question tomorrow. For now I can say that using the exact html code into a normal .html page shows perfectly the Image. — Michele, Jul 07 '13 at 22:22
You wrote that opening the html-page locally is just fine. But with firebug you'll see what the webserver (rook) is delivering. maybe it is sending the wrong content-type for the image or doesn't find the image at all. You can also try to add this image in an img-tag. Just to test whether rook is delivering the image correctly. — JerryWho, Jul 08 '13 at 04:10
Just another guess: Maybe you have to reference the image absolutely. In http://goo.gl/BdVfV I found an example where images are delivered and are referenced absolutely. — JerryWho, Jul 08 '13 at 04:19
I just removed the css formatting and put the image into the `` tag. No go there either. It may be that Rook simply can't handle background images. — Hong Ooi, Jul 08 '13 at 10:37
@HongOoi that's my first guess... I really doesn't hope so. If so, probably it'd be fixed deploying the app in rApache(?) — Michele, Jul 08 '13 at 11:25

user1609452 · Accepted Answer · 2013-07-09T14:34:10.057

1

Its an issue with paths. TLDR. add your working directory and give it a name (pic for example)

Try the following:

library(Rook)
server <- Rhttpd$new()
r <- matrix(runif(9, 0, 1), 3)
g <- matrix(runif(9, 0, 1), 3)
b <- matrix(runif(9, 0, 1), 3)

col <- rgb(r, g, b)
dim(col) <- dim(r)

library(grid)
jpeg(filename="image.jpg")
grid.raster(col, interpolate=FALSE)
dev.off()




server$add(app = File$new(getwd()), name = 'pic')


server$add(
  app=function(env){
    req <- Rook::Request$new(env)
    res <- Rook::Response$new()
    #....# r code
    res$write('
<!DOCTYPE html>
<html>
<head>              
<style>

body
{
background-image: url("pic/image.jpg");
}

</style>
</head>
<body>
<h1>Hello World!</h1>
</h1>
</body>
</html>')

    res$finish()
  },
  name='webApp'
)

server$start(quiet=TRUE)
server$browse("webApp")

EDIT: Try working with the temporary directory:

jpeg(filename=paste0(tempdir(), "/image.jpg"))

and

server$add(app = File$new(tempdir()), name = 'pic')

edited Jul 09 '13 at 14:34

answered Jul 08 '13 at 11:15

user1609452

4,406
1
15
20

`R version 3.0.0 (2013-04-03) Platform: x86_64-w64-mingw32/x64 (64-bit)` – Michele Jul 08 '13 at 12:36
you add() two app to the server: `pic` and `webapp`. everything you do on the first doesn't affect the second. So, calling `server$browse("webapp")` you're doing nothing different than what I did. Have you misspelled anything? cause you say it's working on your side – Michele Jul 09 '13 at 13:25
Files need to be served. You need to define a rook application to serve your static files from your working directory. The file class does this. The code above works fine for me. I have opened a clean linux R and sourced the above in and get Hello World with multi colored background. I switch to a seperate windows 8 machine 64 bit. I open a clean seesion of R and source the code in. I get Hello world with a multi colored background. You may have some permission issues on your working directory. Are you on a locked down machine of some sort? You can try using the temporary directory. – user1609452 Jul 09 '13 at 14:12
thanks for this explanation I'll try to understand it... cause I never used this "fies need to be served". I always save my app in a `.R` file and `add`() it to the server, that's it. it always worked, but now this stupid image doesn't want to stick into my page :-) – Michele Jul 09 '13 at 14:17
Good to hear. The documentation is a bit sparse. Rook is based on Ruby package Rack so it can help sometimes to see how things are done in Rack also. – user1609452 Jul 12 '13 at 14:37
I'm really sorry. Your solution does work! I just tried with another image and it shows that. The problem is that R creates a **white** image with `grid.raster`. It's very weird. It must be an issue of 3.0.0 cause I've also got 2.5.3 and it comes with the right image... – Michele Jul 12 '13 at 15:08

Add an image into an Rook web app using css

1 Answers1