[SOLVED] watermark on HTML?

March 06, 2019, 12:59 PM

I know I can use TYPE=REPORT, OBJECT=IMAGE, IMAGE=logo-bla.gif, POSITION=(+0.70000 +0.70000), SIZE=(4 7.5), Z-INDEX=TOP, OPACITY=15, $ to include a watermark on a PDF report. Is there a way I can get this to show up if the report is output to HTML or AHTML format?

Thanks,
Deb

This message has been edited. Last edited by: FP Mod Chuck,

March 07, 2019, 11:10 AM

FP Mod Chuck

Deb

I tried several things but was unsuccessful as well. Hopefully someone else has a trick up their sleeves.

March 07, 2019, 08:06 PM

Hallway

You can do it in an HTML file using an HTMLFORM block and CSS.

  
TABLE FILE car
SUM SALES
BY CAR 
BY COUNTRY
BY MODEL
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
ENDSTYLE
END

-HTMLFORM BEGIN NOEVAL
<style>
    body {
        background-image: url('https://pbs.twimg.com/profile_images/932533142958804992/lMa20scK_400x400.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 150px 150px; 
        background-size: 200px 200px;
    }
</style>
-HTMLFORM END

March 07, 2019, 08:19 PM

David Briars

@Deb - Yep, I would always try to use WebFOCUS StyleSheets first. If the WF SS doesn't support watermarks (transparent backgrounds) for HTML reports, no worries, one of the strengths of WF is how you can integrate it with HTML CSS.

@Hallway - Excellent example, it worked perfectly for me.

Here is something I came up with on this theme:

-*
-* Create Sales Report
-*
SET PAGE = NOPAGE
TABLE FILE GGSALES
"Gotham Grinds Coffee Sales"
"Exceeding Expectations"
"One Drip at a Time"
SUM DOLLARS/I9C AS 'Sales'
BY PRODUCT
ON TABLE HOLD AS HLDREPT FORMAT HTMTABLE
IF CATEGORY EQ 'Coffee'
ON TABLE SET STYLE *
 INCLUDE=warm.sty, $
 TYPE = REPORT, COLOR = 'WHITE',$
 TYPE = TITLE, JUSTIFY=CENTER, COLOR = 'WHITE',$
 TYPE = DATA, COLUMN = SEQ_NO, JUSTIFY=CENTER,$
ENDSTYLE
END
-RUN
-*
-* Present Sales Report Web Page to User.
-* Note: Transparent image bottom technique from:
-*  https://www.w3schools.com/howt...e_transparent_bottom
-*
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 17px;
}

.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.contenttext {
     margin-left: 30%;}
</style>
</head>
<body>
<h2>Responsive Image with Transparent WebFOCUS HTML Report</h2>
<div class="container">
  <img src="https://res.cloudinary.com/dbriars/image/upload/v1552005649/coffeeshop_uehgs6.jpg" alt="Coffee Shop" style="width:100%;">
  <div class="content">
   <div class="contenttext">
    !IBI.FIL.HLDREPT;
  </div>
 </div>
</div>
</body>
</html>
-HTMLFORM END