Combining XHTML SVG and XML

[barmalini]

I have a very basic question but haven't find an ansver yet.
My problem is that I'm given XHTML and a set of XML files.
Lets call them XML1, XML2... XMLn

XHTML contains description of the procedure to be performed by a
technician, an XML contains data related to the procedure.

What I need is that a browser (Mozilla/Firefox in my case) opens the
XHTML, then generates a SVG graph based on XML data and embed it into
the rendered page everytime it sees words "GRAPH# 1", "GRAPH# 2", ...
"GRAPH #n".
Here is an example of content-
XHTML:

<p style=
"margin-left: 0.87in; margin-bottom: 0in; widows: 2; orphans: 2">
<font size="2">3.1 From GRAPH #1:
<font color="#000000"><font face="Courier, monospace"><font
size="2"><b>UL: Transmission Monitoring297359750
- ESDAC, SSDAC1, SSDAC2</b></font></font></font><font color=
"#000000"><font size="2">, ch</font></font>eck if the problem is an
intensity jump (either up or down), or a gradual trend (either up
or down), with one or both of the spot sensor DAC
signals.</font>
</p>

XML:
<ParameterName>MntDynPrfCh1MAZRxRyMax</ParameterName>
<Unit>nm</Unit>
<ValueList>
<elt>
<SampleTime>2004-06-07T16:30:59+02:00</SampleTime>
<Value>4.977778</Value>
</elt>
<SampleTime>2004-06-07T17:08:19+02:00</SampleTime>
<Value>9.308994</Value>
</elt>
<elt>
<SampleTime>2004-06-07T17:12:55+02:00</SampleTime>
<Value>9.014751</Value>
</elt>
<elt>
<SampleTime>2004-06-07T17:22:50+02:00</SampleTime>
<Value>-8.831666</Value>
</elt>
<elt>
<SampleTime>2004-06-07T17:38:30+02:00</SampleTime>
<Value>-9.408116</Value>
</elt>
<elt>
<SampleTime>2004-06-08T12:31:48+02:00</SampleTime>
<Value>-4.769183</Value>
</elt>
<elt>
<SampleTime>2004-06-08T12:44:45+02:00</SampleTime>
<Value>-6.075797</Value>
</elt>
<elt>
<SampleTime>2004-06-16T10:25:55+02:00</SampleTime>
<Value>9.666429</Value>
</elt>
<elt>
<SampleTime>2004-06-17T08:14:49+02:00</SampleTime>
<Value>7.959008</Value>
</elt>
</ValueList>

In my view there should be created an XSLT stylesheet that would copy
the content of all <p> elements into result tree, checking for the word
"GRAPH#" in it, and once it's there-
it should create an SVG based on <SampleTime> and <Value>
of each <elt>. And reference to that stylesheet must be put into XHTML
file.

So this is rather long description of my problem.
What I need is the sketch example of the XSLT, provided that my vision
of the solution is correct.

I must add also that I have no experience with neither XSLT nor
XML, so it was going to be a kind of "Hello World" task for me.

I shell greatly appreciate any possible help regarding my concept of
the solution as well as examples of code that I might
use.

With kind regards
Taras Bahnyuk.

 

[William Park]

I have a very basic question but haven't find an ansver yet.
My problem is that I'm given XHTML and a set of XML files.
Lets call them XML1, XML2... XMLn

XHTML contains description of the procedure to be performed by a
technician, an XML contains data related to the procedure.

What I need is that a browser (Mozilla/Firefox in my case) opens the
XHTML, then generates a SVG graph based on XML data and embed it into
the rendered page everytime it sees words "GRAPH# 1", "GRAPH# 2", ...
"GRAPH #n".
Here is an example of content-
XHTML:

<p style=
"margin-left: 0.87in; margin-bottom: 0in; widows: 2; orphans: 2">
<font size="2">3.1 From GRAPH #1:
<font color="#000000"><font face="Courier, monospace"><font
size="2"><b>UL: Transmission Monitoring297359750
- ESDAC, SSDAC1, SSDAC2</b></font></font></font><font color=
"#000000"><font size="2">, ch</font></font>eck if the problem is an
intensity jump (either up or down), or a gradual trend (either up
or down), with one or both of the spot sensor DAC
signals.</font>
</p> ....

In my view there should be created an XSLT stylesheet that would copy
the content of all <p> elements into result tree, checking for the word
"GRAPH#" in it, and once it's there-
it should create an SVG based on <SampleTime> and <Value>
of each <elt>. And reference to that stylesheet must be put into XHTML
file.

How do you generate SVG from '2004-06-07T16:30:59+02:00' and '4.977778' ?

Assuming that you have SVG in files SVG1, SVG2, ... or can generate
them into those files, cut/splicing XHTML is relatively simple to do
using (patched) Bash shell. You don't care about context or syntax; you
just want to
- replace 'PATCH #1' with the content of or reference to file SVG1.
- replace 'PATCH #2' with the content of or reference to file SVG2.
...

In that case,

a=()
x=`< file.xhtml`

func () { # Usage: func match n
cat SVG$2
}

array -w 'GRAPH #([0-9]+):' -E func a "$x"

Here, it will split your XHTML file using regex
'GRAPH #([0-9]+)'
into sequence of non-matching and matching strings. Normally, it will
append them unmodified to array variable 'a', ie.
a[0]='...'
a[1]='GRAPH #1'
a[2]='...'
a[3]='GRAPH #2'
...

But, we want to apply some content filtering on the matching element.
Just like Expat XML parser will call appropriate callback handlers when
it encounters XML components, you can specify callback command for regex
splitting. It's simpler for regex, because there are only 2 types,
matching string and non-matching string.

Now, for each matching string (ie. 'GRAPH #1', 'GRAPH #2', etc.), it
will call func() and run it as command substitution, just as though you
typed
`func 'GRAPH #1' 1`
`func 'GRAPH #2' 2`
...
where $1 is the whole matching string, and $2 is the first parenthesized
group in regex. In our case, you're only interested in $2, because you
know the matching string will be 'GRAPH #n' and just want that number.


You now have array variable 'a',
a[0]='...'
a[1]=content-of-SVG1
a[2]='...'
a[3]=content-of-SVG2
...

To print it out with \n (newline) between each elements,
array -j $'\n' a
If you want to use ' ' (space), then just do
echo "${a[*]}"

XML:
<ParameterName>MntDynPrfCh1MAZRxRyMax</ParameterName>
<Unit>nm</Unit>
<ValueList>
<elt>
<SampleTime>2004-06-07T16:30:59+02:00</SampleTime>
<Value>4.977778</Value>
</elt>
<SampleTime>2004-06-07T17:08:19+02:00</SampleTime>
<Value>9.308994</Value>
</elt>

....


This assumes that you already have SVG files, ready to be inserted. If
not, then you have to parse XML file, and feed <SampleTime> and <Value>
data to something that will generate SVG files. To do that,

sample=(0)
value=(0)
x=`< file.xml`

middle () { # Usage: middle data
case ${XML_ELEMENT_STACK[1]} in
SampleTime) sample[+]=$1 ;;
Value) value[+]=$1 ;;
esac
}

xml -d middle "$x"

This will accumulate <SampleTime> and <Value> data in 'sample'
and 'value' array variables, respectively, ie.
sample[1]='2004-06-07T16:30:59+02:00'
sample[2]='2004-06-07T17:08:19+02:00'
...
and
value[1]='4.977778'
value[2]='9.308994'
...
What you do with 'sample' and 'value' data is up to you.


Or, you can just keep a counter, and feed the <SampleTime> and
<Value> data as they come in. Then, you don't have to maintain
the 2 arrays. Let's see...

n=0
x=`< file.xml`

middle () { # Usage: middle data
case ${XML_ELEMENT_STACK[1]} in
SampleTime) sample=$1 ;;
Value) value=$1 ;;
esac
}

end () { # Usage: end tag
if [[ $1 == elt ]]; then
((n++)) # n = 1, 2, ...
svg_generator n sample value
unset sample value
fi
}

xml -d middle -e end "$x"

where 'svg_generator' is whatever that generates your SVG based on
'sample' and 'value' data.

 

[William Park]

array -w 'GRAPH #([0-9]+):' -E func a "$x"

xml -d middle "$x"

xml -d middle -e end "$x"

I forgot... You need to download Bash source, apply my patch, and
compile.

Ref:
http://freshmeat.net/projects/bashdiff/
http://home.eol.ca/~parkw/index.html#xml
help array
help xml