Combining XHTML SVG and XML

Discussion in 'XML' started by barmalini, Aug 20, 2004.

  1. barmalini

    barmalini Guest

    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.



    --
    barmalini
    ------------------------------------------------------------------------
    Posted via http://www.forum4designers.com
    ------------------------------------------------------------------------
    View this thread: http://www.forum4designers.com/message110154.html
     
    barmalini, Aug 20, 2004
    #1
    1. Advertising

  2. barmalini

    William Park Guest

    barmalini <4designers.com> wrote:
    >
    > 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 <>
    Open Geometry Consulting, Toronto, Canada
     
    William Park, Aug 21, 2004
    #2
    1. Advertising

  3. barmalini

    William Park Guest

    William Park, Aug 21, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Arne Nordmann
    Replies:
    0
    Views:
    533
    Arne Nordmann
    Jun 28, 2004
  2. Mardagg
    Replies:
    0
    Views:
    810
    Mardagg
    May 12, 2006
  3. Mardagg
    Replies:
    0
    Views:
    669
    Mardagg
    May 12, 2006
  4. milof83

    svg to svg saving problem

    milof83, Aug 18, 2006, in forum: Java
    Replies:
    1
    Views:
    834
    Roland de Ruiter
    Aug 18, 2006
  5. Helmut Jarausch

    Re: svg-chart 1.1 SVG Charting Library

    Helmut Jarausch, May 20, 2008, in forum: Python
    Replies:
    0
    Views:
    475
    Helmut Jarausch
    May 20, 2008
Loading...

Share This Page