Dynamic image

Sample description

The dynamic content returned by CXP pages is not limited to simple HTML. Instead, arbitrary content can be generated. In this sample, a GIF image is created in CXP code and is then returned to the browser. No HTML markup is used here. Instead, the member variable :ContentType and the method :WriteBinary() of the HTTP response object are used to send the image data back to the browser.

Run in new tab

Live editor

<%#code locality="page-global"%>
<%
/// Calculates the differences of two colors in means
/// of readable contrast.
FUNCTION LuminosityDiff(aRGB1,aRGB2)
  LOCAL L1,L2
  L1 := 0.2126 * (aRGB1[1]/255 ^ 2.2) + 0.7152 * (aRGB1[2]/255 ^ 2.2) + 0.0722 * (aRGB1[3]/255 ^ 2.2)
  L2 := 0.2126 * (aRGB2[1]/255 ^ 2.2) + 0.7152 * (aRGB2[2]/255 ^ 2.2) + 0.0722 * (aRGB2[3]/255 ^ 2.2)
  IF(L1 > L2)
   RETURN(L1+0.05) / (L2+0.05)
  ENDIF
RETURN (L2+0.05) / (L1+0.05)

/// Returns a RGB color pair randomly selected with an
/// readble/acceptable contrast
FUNCTION ChooseRandomColor()
  LOCAL aRGB1,aRGB2,nDiff

// Random Select color pairs, calculate contrast and select
  // only those which are readable
  aRGB1 := { RandomInt(50,200) , RandomInt(50,200), RandomInt(50,200) }
  DO WHILE .T.
    aRGB2 := { RandomInt(0,255) , RandomInt(0,255), RandomInt(0,255) }
    nDiff := LuminosityDiff(aRGB1,aRGB2)
    IF(nDiff>1.0100)
      RETURN( { aRGB1, aRGB2 } )
    ENDIF
  ENDDO
RETURN(NIL)
%>

<%#code locality="page-render"%>
<% 
#include "gra.ch"
#include "xbp.ch"

// The image created in this sample can easily be embedded in
   // other HTML or CXP pages using an ordinary HTML markup.
   // Example:  <img src="dynamic-content-image.cxp" >.
   // See dynamic-content-usage.html for an example

xs := 250
   ys := 150

// Choose random colors
   aColors    := ChooseRandomColor()

// Create a bitmap and associate it with a
   // canvas object we can use for drawing
   oBmp:= XbpBitmap():New():Create()
   oPS := XbpPresSpace():new():create()
   oBmp:presSpace( oPS )
   oBmp:make( xs , ys )

// Set up a font for text output
   oFont := XbpFont():new()
   oFont:familyName := "Segoe UI"
   oFont:height     := 16
   oFont:width      := 12
   oFont:Create()
   oPS:SetFont(oFont)

// Erase the bitmap with color yellow,
   // then draw some text
   oPS:SetColor( GraMakeRGBColor(aColors[1]), 0)
   GraBox(oPS,{0,0},{xs,ys},1,0,0)

// Randomly rotate the text a bit
   aMatrix  := GraInitMatrix()
   GraRotate( oPS , aMatrix, RandomInt(-15,15), {125,75}, GRA_TRANSFORM_ADD )
   oPS:setGraTransform( aMatrix, GRA_TRANSFORM_REPLACE )

oPS:SetColor( GraMakeRGBColor(aColors[2]), 0)
   GraStringAt(oPS,{10,80},"Image by Xbase++")
   GraStringAt(oPS,{10,60},"Create Time " + Time())

// Get the binary image data of the bitmap
   // in GIF format and send it back to the
   // browser as our page result. To do this,
   // we need to first specify the content/mime
   // type of the binary data we send via the
   // HTTP response object
   ::HttpResponse:ContentType := "image/gif"
   ::HttpResponse:WriteBinary( oBmp:SetBuffer(, XBPBMP_FORMAT_GIF) )

oBmp:Destroy()
%>

                    Result
                    built with V2 2156
                