I've been tasked bringing in SVG support to our legacy MFC app in one way or another. After digging around I figured it out, but now going through and testing the changes another thing has popped up. When going from IE4 (which was the default) to using IE9 in our webbrowser control, either the VML or the Javascript broke. I'm not really familiar with Javascript to know if it's the cause. I can't necessarily fall back to using IE4 as the SVG will no longer load. The VML has a namespace "v", is that the issue? Is it that I'm using SVG and VML concurrently? Is the Javascript outdated? Any insight here would be greatly appreciated.
Here is the javascript
<xsl:template name='CertMain' match="/">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META http-equiv="X-UA-Compatible" content="IE=9" />
<title>
Certificate of Calibration and Testing
</title>
<script type='text/javascript' language='javascript' >
var dotSize = <xsl:value-of select='$DotSize'/>;
var GraphWidth = <xsl:value-of select='$GraphWidth'/>;
var GraphHeight = <xsl:value-of select='$GraphHeight'/>;
<xsl:copy-of select='$GlobalCertCheck'/>
<![CDATA[
//
function plotPoints()
{
// Convert graph point positions to log10 scales
// This gets called after HTML is all rendered by the body tag's "onload" event
//var points = document.getElementsByTagName("oval");
var graph = document.getElementById("IAQ_GraphDiv");
var points = getElementsByClassName(graph, "*", "TPMark");
for(i = 0; i < points.length; i++)
{
if (points[i].className == 'TPMark')
{
var x = points[i].style.left.substr(0,points[i].style.left.length - 2);
var y = points[i].style.top.substr(0,points[i].style.top.length - 2);
if(x < 0.008)
x = 0.008;
if(y < 0.008)
y = 0.008;
var xOff = 0;
var logX = ( ( (Math.log(x)*Math.LOG10E)+2) / 4)*GraphWidth;
var logY = ( ( (Math.log(y)*Math.LOG10E)+2) / 4)*GraphHeight;
if(points[i].nodeName == "rect")
logX += 32;
points[i].style.left = logX - (dotSize / 2);
points[i].style.top = (GraphHeight - logY) - (dotSize / 2);
}
}
OnLoad();
}
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
]]>
</script>
Here is most stuff regarding VML:
<xsl:template name='CertGraph'>
<xsl:param name='CertLabel'/>
<xsl:variable name='YLabel'>
<xsl:value-of select='$CertLabel/Translation[@label="DEVICE RESPONSE"]' /> (mg/m<sup>3</sup>)
</xsl:variable>
<xsl:variable name='XLabel'>
<xsl:value-of select='$CertLabel/Translation[@label="AEROSOL CONCENTRATION"]' />
(mg/m<sup>3</sup>)
</xsl:variable>
<xsl:variable name='GraphTitle'>
<xsl:value-of select='$CertLabel/Translation[@label="LINEARITY PLOT"]' />
</xsl:variable>
<div id='IAQ_GraphDiv' style='width:6.5in;text-align:left;padding: 0in;'>
<!-- Graph box group -->
<v:group style="width=6.5in; height=6.5in;" coordsize="625,625" coordorigin="0,0">
<v:rect style="top:0; left:1; width:{$GraphBorderWidth}; height: {$GraphBorderHeight}; " fillcolor="white"
strokecolor="black" strokeweight="2"></v:rect>
<v:rect style="top:5; left:6; width:{$GraphBorderWidth - 10}; height: {$GraphBorderHeight - 10}; " fillcolor="white"
strokecolor="rgb(200,200,200)" strokeweight="1px"></v:rect>
<!--
-->
<v:line from="0 20" to="625 21">
<v:fill on="True" color="black"/>
<v:stroke on="False" color="black"/>
<v:path textpathok="True"/>
<v:textpath on="True"
string="{$GraphTitle}"
class='gScaleTitles' />
</v:line>
<!-- Graph -->
<v:group style="top: 40; left: {$GraphOffset}; width:500; height:500;" coordsize="1000,1000" coordorigin="0,0">
<v:rect style="width:{$GraphWidth};height:{$GraphHeight};" fillcolor="white" strokecolor="black" strokeweight="1" />
<!-- Y scale tick marks, scaled to 440 height -->
<v:line from="-10 0" to="0 0" />
<v:line from="-10 {$GraphHeight*.25}" to="0 {$GraphHeight*.25}" />
<v:line from="-10 {$GraphHeight*.5}" to="0 {$GraphHeight*.5}" />
<v:line from="-10 {$GraphHeight*.75}" to="0 {$GraphHeight*.75}" />
<v:line from="-10 {$GraphHeight}" to="0 {$GraphHeight}"/>
<!-- X scale tick marks -->
<v:line from="0 {$GraphHeight}" to="0 {$GraphHeight+10}" />
<v:line from="{$GraphWidth*.25} {$GraphHeight}" to="{$GraphWidth*.25} {$GraphHeight+10}" />
<v:line from="{$GraphWidth*.5} {$GraphHeight}" to="{$GraphWidth*.5} {$GraphHeight+10}" />
<v:line from="{$GraphWidth*.75} {$GraphHeight}" to="{$GraphWidth*.75} {$GraphHeight+10}" />
<v:line from="{$GraphWidth} {$GraphHeight}" to="{$GraphWidth} {$GraphHeight+10}" />
<!-- Y-scale number labels -->
<v:rect class='gLabel'
style='left:-90; top:-10;' fillcolor='none' strokecolor='none'>
100
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight*.25-10};' fillcolor='none' strokecolor='none'>
10
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight*.5-10};' fillcolor='none' strokecolor='none'>
1
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight*.75 -10};' fillcolor='none' strokecolor='none'>
0.1
</v:rect>
<v:rect class='gLabel' style='left:-90; top:{$GraphHeight -10};' fillcolor='none' strokecolor='none'>
0.01
</v:rect>
<v:rect class='gLabel' style='left:-35; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
0.01
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth*.25-35}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
0.1
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth*.5-47}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
1
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth*.75-40}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
10
</v:rect>
<v:rect class='gLabel' style='left:{$GraphWidth -30}; top:{$GraphHeight +30};' fillcolor='none' strokecolor='none'>
100
</v:rect>
<!-- Diagonal line -->
<v:line from="0 {$GraphHeight}" to="{$GraphWidth} 0" strokecolor='rgb(100,100,100)'/>
<!-- Y Scale Label -->
<v:line from="-100 {$GraphHeight}" to="-101 0">
<v:fill on="True" color="black"/>
<v:stroke on="False" color="black"/>
<v:path textpathok="True"/>
<v:textpath on="True" string="{$YLabel}" class='gScaleLabels' />
</v:line>
<!-- X Scale Label -->
<v:line from="0 {$GraphHeight +80}" to="{$GraphWidth} {$GraphHeight +81}">
<v:fill on="True" color="black"/>
<v:stroke on="False" color="black"/>
<v:path textpathok="True"/>
<v:textpath on="True" string="{normalize-space($XLabel)}" class='gScaleLabels' />
</v:line>
<xsl:variable name='TPDotColorOK'>
rgb(240,240,240)
</xsl:variable>
<xsl:variable name='TPDotColorBad'>
black
</xsl:variable>
<!-- dot legend -->
<v:oval fillcolor='{$TPDotColorOK}'
style='left:{$GraphWidth + $DotSize + $DotSize}; top:{$GraphHeight - 60}; width:{$DotSize};height:{$DotSize};' />
<v:rect style='text-align:left; height:20; width:340;left:{$GraphWidth + ($DotSize * 4)};top:{$GraphHeight - 60 - 6};'
fillcolor='none' strokecolor='none'>
= <xsl:value-of select='$CertLabel/string_09' />
</v:rect>
<v:oval fillcolor='{$TPDotColorBad}'
style='left:{$GraphWidth + $DotSize + $DotSize}; top:{$GraphHeight - 35}; width:{$DotSize};height:{$DotSize};' />
<v:rect style='text-align:left; height:20; width:340;left:{$GraphWidth + ($DotSize * 4)};top:{$GraphHeight - 35 - 6};'
fillcolor='none' strokecolor='none'>
= <xsl:value-of select='$CertLabel/string_10' />
</v:rect>
<xsl:if test='$ShowTolerance10Percent = 1'>
<v:rect style='text-align:left; height:20; width:340;left:{$GraphWidth + ($DotSize * 4)};top:{$GraphHeight - 5 - 6};'
fillcolor='none' strokecolor='none'>
<xsl:call-template name='TranslateValue' >
<xsl:with-param name='CertLabel' select='$CertLabel' />
<xsl:with-param name='Value'>Tolerance</xsl:with-param>
</xsl:call-template>
: ±10%
</v:rect>
</xsl:if>
<!-- Dynamically Plot Data points found in XML -->
<xsl:for-each select='TestResults/Test[Type="DTII_CONC_CAL" or Type="AM510_CAL" or Type="DT8520_CAL"]/TestDataPoint[starts-with(Parameter, "VER_")]'>
<xsl:if test='starts-with(Parameter, "VER_")' >
<xsl:variable name='pointX'>
<xsl:value-of select='CalRef' />
</xsl:variable>
<xsl:variable name='pointY'>
<xsl:value-of select='Measured' />
</xsl:variable>
<xsl:variable name='TPDotColor'>
<xsl:if test='ErrorCode = "0"' >
<xsl:value-of select='$TPDotColorOK'/>
</xsl:if>
<xsl:if test='ErrorCode = "0"' >
<xsl:value-of select='$TPDotColorBad'/>
</xsl:if>
</xsl:variable>
<v:oval id='{Parameter}' class='TPMark' fillcolor='{$TPDotColor}'
style='left:{CalRef}in;top:{Measured}in;width:{$DotSize};height:{$DotSize};' />
<!-- Point information -->
<xsl:variable name='TPLabelColor'>
<xsl:if test='ErrorCode = "0"' >black</xsl:if>
<xsl:if test='ErrorCode != "0"' >red</xsl:if>
</xsl:variable>
<xsl:if test='ErrorCode!="0" and /TestResults/AsFound="0"'>
<v:rect class='TPMark'
style='color:{$TPLabelColor}; text-align:left; height:20; width:140;left:{CalRef}in;top:{Measured}in;'
fillcolor='none' strokecolor='none'>
<xsl:value-of select='CalRef'/>, <xsl:value-of select='Measured'/>
</v:rect>
</xsl:if>
</xsl:if>
</xsl:for-each>
</v:group>
</v:group>
<xsl:if test='$ShowLinearityBench = 1'>
<div style='margin:-0.25in 0.1in 0in 0in;font-size:8pt;text-align:right;'>
<xsl:value-of select='$CertLabel/string_19' />:
<xsl:value-of select='TestResults/Test/BenchSN'/>
</div>
</xsl:if>
</div>
</xsl:template>
