Transparent background to a report in HTML Layout Painter?

OK I have designed the following report: I took a giant .jpg image of a world map and basically lay various small webfocus reports over different regions on the map. This is all done in HTML Layout Painter. I've tried to use the font styling within the painter to set the background transparent within each frame but that doesn't seem to work.

Is there a way to explicitly set a report background to transparent? I've tried saving the reports as images as well, and use the SetFillColorTransparent command in the graph gui, but to no avail.

Here is the code generated from HTML Layout Painter where I used the car file to generate a .PNG file called "TRANS2G".

 
<!-- Generated by Report Layout Painter -->
<HTML>
<HEAD>
<SCRIPT id=IBI_OptionsScript type=text/javascript>
var rltVersion = "714";
var cgipath = "cgipath";
var ibirls = "ibirls2";
var multidrill = "multidrill";
var mntFormValidate = "mntFormValidate";
var dyncalendar = "dyncalendar";
var olap="olap";
var olappanebase="olappanebase";
var ibixmltree="ibixmltree";
var ibilangtrans="ibilangtrans";
var olapdrill="olapdrill";
var ibiOptions = new Array(cgipath,ibirls,mntFormValidate,ibilangtrans,dyncalendar,olap,olappanebase,olapdrill,multidrill);
</SCRIPT>

<SCRIPT id=IBI_nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);</SCRIPT>

<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>
<TITLE>HtmlPage
</TITLE>
<SCRIPT id=clientEventHandlersJS type=text/javascript>
function window_onload() {
UpdateData();
// TODO: Add your event handler code here
}
</SCRIPT>

<SCRIPT for=window eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
</HEAD>
<BODY style="OVERFLOW: auto">
<IMG id=image1 style="Z-INDEX: 1; LEFT: 220px; POSITION: absolute; TOP: 110px" tabIndex=1 src="worldmap2.jpg" border=0 name=image1 originalWidth="718" originalHeight="500"> 
<IMG id=image2 style="Z-INDEX: 2; LEFT: 480px; POSITION: absolute; TOP: 150px; BACKGROUND-COLOR: transparent" tabIndex=2 src="TRANSG2.PNG" border=0 name=image2 originalWidth="300" originalHeight="440">
<INPUT id=ibiapp_app style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value=extmgmt name=ibiapp_app>
</BODY>
</HTML>

______________________
WF Version: Prod/Test : WebFOCUS 7.67; ETL 7.67

OP system: WIN2K

Posts: 18 | Registered: June 28, 2006

bcowley

Member

posted

Hide Post

Also, in case it isn't clear what the problem is: the report will overlay the underlying image of the map so that you get kind of chunky blocks of report over a very nice graph. With a transparent background to the report it would fit in seamlessly with the underlying map and look quite slick.

______________________
WF Version: Prod/Test : WebFOCUS 7.67; ETL 7.67

OP system: WIN2K

Posts: 18 | Registered: June 28, 2006

Ignored post by bcowley posted

Show Post

Francis Mariani

Expert

posted

Hide Post

WF HTML or HTMTABLE reports are transparent by default, as shown in this example:

TABLE FILE CAR
SUM
SALES
BY COUNTRY
ON TABLE SET PAGE NOLEAD
ON TABLE SET HTMLCSS ON
ON TABLE HOLD AS H001 FORMAT HTML
ON TABLE SET STYLE *
BORDER=1, BORDER-COLOR=SILVER,
FONT='ARIAL', SIZE=8, $
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<BODY STYLE="background-image: URL(http://farm4.static.flickr.com/3139/3006260201_d4a0683c1a_o.jpg); background-repeat: no-repeat">
!IBI.FIL.H001;
</BODY>
-HTMLFORM END

I assume that TRANSG2.PNG is the graph and that your reports are either HTMTABLE or HTML HOLD files. These should be transparent unless you specify a BACKCOLOR WF stylesheet attribute for the REPORT, or apply a CSS style that has a background-color attribute.

Have you tried to place the world map image as a background image for the body of the HTML page, instead of positioning an IMG tag?

body
{ 
background-image: url('worldmap2.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 220px 110px;
}

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

EWoerle

Gold member

posted

Hide Post

Bcowley,

I would try saving the graph as a GIF. I don't normally do to much work with PNG files and I'm not sure if they support transparency. I know that gif's do though. Also jpg's will not support transparency.

Eric

Eric Woerle
WF 7.6.7 Reportting Server
ETL 7.6.10
Dev Studio 7.6.7

Posts: 95 | Registered: July 31, 2007

Ignored post by EWoerle posted

Show Post

<JG>

posted

Sorry guys you are out of luck.

Transparent backgrounds are not available in WebFocus graphs.
Theoretically you should be able to use the API calls

setFillColor(getChartBackground(),false);
or
setTransparentFillColor(getChartBackground(),true);

however neither are implemented even in 7.6.7 (NFR needed perhaps).

Graphs themselves do not allow inclusion of transparent images,
the reason given has always been one of cross platform compatibility but I had hoped that they would have sorted that out by now.

Look at my tips & techniques article

http://www.informationbuilders.com/support/developers/insertimages.html

Francis Mariani

Expert

posted

Hide Post

quote:
Also, in case it isn't clear what the problem is: the report will overlay the underlying image of the map so that you get kind of chunky blocks of report over a very nice graph. With a transparent background to the report it would fit in seamlessly with the underlying map and look quite slick.

It sure sounded like the graph looked nice but the reports looked chunky.

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

<JG>

posted

Francis, Reading more closely, Yes I would tend to agree, but as you very correctly stated a WebFocus report background is transparent unless you deliberately change it.

bcowley

Member

posted

Hide Post

Thanks for the replies.
As JG said, you can't make a transparent graph. PNG supports transparency but WebFOCUS doesn't even though the graph API says it does.

While the example I gave was using one gif on a map, in actuality the repirt I have is a map of the world and then 10 individual, seperate, live-data reports placed on different regions around the world. The reports show current market values for each region. Using the WebFOCUS HTML Report Painter I created 10 distinct IFRAMEs for the reports. What I found is that I cannot get the IFRAME to be transparent, so that even though by default a report might be transparent, the IFRAME isn't.

Perhaps if I bone up on my actual HTML knowledge I can create the proper HTML table structures for the entire report and then use the !IBI.. command to populate them, per Francis' example.

Thanks again for all the replies.

______________________
WF Version: Prod/Test : WebFOCUS 7.67; ETL 7.67

OP system: WIN2K

Posts: 18 | Registered: June 28, 2006

Ignored post by bcowley posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Try using your favourite internet search engine to search for "transparent iframe" - a lot of results should be found, including this one: iframe go transparent?!

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

bcowley

Member

posted

Hide Post

Francis, I'm a google kinda guy and I spent an hour yesterday on google doing every type of variation on "IFRAME" and "Transparent". The key takeback I got from that was that this should work:

allowtransparency="true"

Along with the corresponding background-color: transparent in the style.

Unfortunately, this doesn't work, at least not in the code that webfocus renders initially through the html layout painter.

In fact the exact code for the north american region in my html was:

 <IFRAME id=report1 title=regionna.fex style="Z-INDEX: 30; LEFT: 210px; WIDTH: 9px; POSITION: absolute; TOP: 180px; HEIGHT: 9px; background:none background-color: transparent" background-color="transparent" frameborder=0 allowTransparency=true tabIndex=30 name=report1 frameBorder=no scrolling=no elementtype="2" autoExecute="True" requests_list="0">
</IFRAME>

No luck though.

______________________
WF Version: Prod/Test : WebFOCUS 7.67; ETL 7.67

OP system: WIN2K

Posts: 18 | Registered: June 28, 2006

Ignored post by bcowley posted

Show Post

Please Wait. Your request is being processed...