wiki:rp_xml_ele_image

Version 5 (modified by dkearney, 16 years ago) (diff)

added info on using putFile and encoding module to properly get images into rappture.

<image>

An image object represents some photographic image. On the input side, it can be used as a diagram for control values. In that case, the image data is stored as a base64-encoded GIF, JPEG, or PNG image. You can use your favorite language's equivalent Rappture::RpLibrary::putFile function to automatically load an image file into your Rappture library object or you can take advantage of the Rappture::encoding module to do the base64-encoding. Also, on Linux, you can use the mimencode program to convert a normal GIF/JPEG/PNG file to the proper encoding shown below:

  <image>
    <current>R0lGODlhtAA8APcAAFeBu////0VurKW829Ld7YSjzWKJwLzN5HmayfT3+unu9sfV6G2SxJqz1t3m
8Y+r0rHE31aAus3Y6VJ5sEpysEdvrXeVwlV+uVB6tVZ/uEhwrlV/uEx1slN8t1eAuk50qFF4rlJ7
tkZol5yy0092q0dqmVV+t053tElxr0VmlEVnlU92qlR8tFN7sk12s0VtrEVtqkRrpktvoUxxpEt0
...
    </current>
  </image>

An image can have a label in the <about> section, although this example doesn't.


An image can also be produced as output. In that case, the image appears in a viewer with controls for zooming in and out:

  <output>
    <image id="outi">
      <about>
        <label>Rotated Image</label>
      </about>
      <current>/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRof
Hh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwh
MjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAAR
...
      </current>
    </image>
    ...
  </output>


Another option for image objects include <resize>. Users can resize an image by including this tag in the <image> object as shown in the examples below. If the <resize> parameter is set, then the image is resized. The "auto" value resizes to the current area. The "width=XX" or "height=xx" form resizes to a particular size. The "none" value leaves the image as-is; this is the default.

  <image>
    <resize>height=60</resize>
    <current>R0lGODlhtAA8APcAAFeBu////0VurKW829Ld7YSjzWKJwLzN5HmayfT3+unu9sfV6G2SxJqz1t3m
8Y+r0rHE31aAus3Y6VJ5sEpysEdvrXeVwlV+uVB6tVZ/uEhwrlV/uEx1slN8t1eAuk50qFF4rlJ7
tkZol5yy0092q0dqmVV+t053tElxr0VmlEVnlU92qlR8tFN7sk12s0VtrEVtqkRrpktvoUxxpEt0
...
    </current>
  </image>
  <image>
    <resize>width=40</resize>
    <current>R0lGODlhtAA8APcAAFeBu////0VurKW829Ld7YSjzWKJwLzN5HmayfT3+unu9sfV6G2SxJqz1t3m
8Y+r0rHE31aAus3Y6VJ5sEpysEdvrXeVwlV+uVB6tVZ/uEhwrlV/uEx1slN8t1eAuk50qFF4rlJ7
tkZol5yy0092q0dqmVV+t053tElxr0VmlEVnlU92qlR8tFN7sk12s0VtrEVtqkRrpktvoUxxpEt0
...
    </current>
  </image>
  <image>
    <resize>auto</resize>
    <current>R0lGODlhtAA8APcAAFeBu////0VurKW829Ld7YSjzWKJwLzN5HmayfT3+unu9sfV6G2SxJqz1t3m
8Y+r0rHE31aAus3Y6VJ5sEpysEdvrXeVwlV+uVB6tVZ/uEhwrlV/uEx1slN8t1eAuk50qFF4rlJ7
tkZol5yy0092q0dqmVV+t053tElxr0VmlEVnlU92qlR8tFN7sk12s0VtrEVtqkRrpktvoUxxpEt0
...
    </current>
  </image>
  <image>
    <resize>none</resize>
    <current>R0lGODlhtAA8APcAAFeBu////0VurKW829Ld7YSjzWKJwLzN5HmayfT3+unu9sfV6G2SxJqz1t3m
8Y+r0rHE31aAus3Y6VJ5sEpysEdvrXeVwlV+uVB6tVZ/uEhwrlV/uEx1slN8t1eAuk50qFF4rlJ7
tkZol5yy0092q0dqmVV+t053tElxr0VmlEVnlU92qlR8tFN7sk12s0VtrEVtqkRrpktvoUxxpEt0
...
    </current>
  </image>