Advanced Title Block — Part 3

[Cicorione]

@pgundlach I open a third discussion because the topic it is not exactly the same, but if you prefer I will delete this and past on "Part 2", thanks.

Hi @pgundlach, this time I really burned my brain off, I've left with just half neuron... 🤯

The SVG to MP conversion is totally unreliable, I don't understand why the graphic is shifted and reduced, I can only imply that Scour is doing its job poorly, I haven't tested with SVG-Cleaner so I keep this window still open...

Anyway since the result was unsatisfactory I decided to come back to pure METAPOST and I learned that METAPOST itself isn't enough to make a good result, you must tweaks both Table and Metapost to remove those annoying artifacts; I am not going to tell that is a bug, it is just the way it is and it must be taken in consideration while designing graphics content with table! 👌

Eventually I had to learn something more about METAPOST 😅
It has been helpful the METAFUN manual though... 🤔

Here is my outcome:

A zoom-in shows the graphic is fine:

And here is the code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="/usr/share/speedata-publisher/schema/layoutschema-en.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?>
<?xml-model href="/usr/share/speedata-publisher/schema/layoutschema-en.xsd" type="application/xml" schematypens="http://http://www.w3.org/2001/XMLSchema"?>
<Layout xmlns="urn:speedata.de:2009/publisher/en" xmlns:sd="urn:speedata:2009/publisher/functions/en" xmlns:xi="http://www.w3.org/2001/XInclude">
  <!-- PAGE SETTINGS -->
  <Trace grid="no" textformat="no" objects="no" />
  <Pageformat width="80mm" height="80mm" />
  <LoadFontfile name="Amaranth-BoldItalic" filename="Amaranth-BoldItalic.ttf" mode="harfbuzz" />
  <LoadFontfile name="Oswald-Light" filename="Oswald-Light.ttf" mode="harfbuzz" features="+frac" />
  <LoadFontfile name="Oswald-Bold" filename="Oswald-Bold.ttf" mode="harfbuzz" features="+frac" />
  <DefineFontfamily fontsize="10" leading="12" name="title">
    <Regular fontface="Oswald-Light" />
    <Bold fontface="Oswald-Bold" />
  </DefineFontfamily>
  <DefineFontfamily fontsize="12" leading="10" name="new">
    <Regular fontface="Amaranth-BoldItalic" />
  </DefineFontfamily>
  <DefineColor name="aglgray" model="RGB" r="153" g="153" b="153" />
  <DefineGraphic name="title">
    filldraw box withcolor colors.aglgray ;
    clip currentpicture to roundedsquare(box.width + 10mm, box.height, 3mm);
  </DefineGraphic>
  <DefineGraphic name="svg_test">
    filldraw (0,0) -- (box.width,0) -- (box.width, box.height) --
    (box.width, box.height) -- (-0.5cm, box.height ) -- cycle withcolor 0.7red ;
    clip currentpicture to roundedsquare(box.width + 1cm, box.height, 3mm) shifted (-1cm,0mm);
  </DefineGraphic>
  <DefineGraphic name="svg2mp">
    fill unitsquare xyscaled (12,8) shifted (0,-8) withcolor red;
    fill (0,0) -- (0,-8) .. controls(1.6569,-8) and (3,-6.6569) .. (3,-5) -- (3,-3) .. controls (3,-1.3431) and (1.6569,0) .. (0,0) -- cycle withcolor colors.aglgray;
    clip currentpicture to (unitsquare xyscaled (12,-8))
  </DefineGraphic>
  <DefineGraphic name="pure_mp">
    filldraw box withcolor red;
    fill (0mm,0mm)..(3mm,3mm)---(3mm,box.height - 3mm)..(0mm, box.height)--cycle withcolor colors.aglgray ;
    clip currentpicture to roundedsquare(box.width + 1cm, box.height, 3mm) shifted (-1cm,0mm);
  </DefineGraphic>
  <DefineGraphic name="tweak_mp">
    filldraw box withcolor red;
    fill (-0.15 mm,0mm)..(3mm,3mm)---(3mm,box.height - 3mm)..(-0.15mm, box.height)--cycle withcolor colors.aglgray ;
    clip currentpicture to roundedsquare(box.width + 1cm, box.height, 3mm) shifted (-1cm,0mm);
  </DefineGraphic>
  <!-- first start with a table -->
  <Record element="data">
    <!-- SVG TO MP -->
    <PlaceObject>
      <Table width="20cm" fontfamily="title">
        <Tr minheight="8mm" align="left" valign="middle">
          <Td graphic="title" padding-left="3.2mm" padding-top="1mm" padding-right="0.6mm">
            <Paragraph>
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE TABLE+SVG>MP</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
          <Td graphic="svg2mp" align="left" padding-right="3mm" padding-left="4.8mm" padding-top="1.3mm">
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    <NextRow rows="1.5" />
    <!-- NOT TWEAKED -->
    <PlaceObject>
      <Table width="20cm" fontfamily="title">
        <Tr minheight="8mm" align="left" valign="middle">
          <Td graphic="title" padding-left="3.2mm" padding-top="1mm">
            <Paragraph>
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE TABLE+MP -TWEAKS</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
          <Td graphic="pure_mp" align="left" padding-right="3mm" padding-left="4.8mm" padding-top="1.3mm">
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    <NextRow rows="1.5" />
    <!-- TWEAKED -->
    <PlaceObject>
      <Table width="20cm" fontfamily="title">
        <Tr minheight="8mm" align="left" valign="middle">
          <Td graphic="title" padding-left="3.4mm" padding-top="1mm" padding-right="0.6mm">
            <Paragraph>
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE TABLE+MP+TWEAKS</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
          <Td graphic="tweak_mp" align="left" padding-right="3mm" padding-left="4.8mm" padding-top="1.3mm">
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
  </Record>
</Layout>

[Cicorione]

Hi @pgundlach I am almost there but I ran into another issue. 🙏

The METAPOST gray background needs to change while the column "NEW" is invoked, I thought to create two different graphics and call each through a switch case; unfortunately is not working, I tested several combinations but the one that works, and I get:

E:  [page 3 line 296, data line 18] MetaPost graphic $title-col-switcher not defined 
! error:  (node lib): lua <node> expected, not an object with type nil
!  ==> Fatal error occurred, no output PDF file produced!exit status 1

Below is the code that makes more sense for me:

	<!-- TABLE BACKGROUND -->
	
  <DefineGraphic name="title-col-1">
    filldraw box withcolor colors.aglgray ;
    clip currentpicture to roundedsquare(box.width, box.height, 3mm);
  </DefineGraphic>
	
  <DefineGraphic name="title-col-1-alt">
    filldraw box withcolor colors.aglgray ;
    clip currentpicture to roundedsquare(box.width + 10mm, box.height, 3mm);
  </DefineGraphic>

  <DefineGraphic name="new-col-2">
    filldraw box withcolor red;
    fill (-0.15 mm,0mm)..(3mm,3mm)---(3mm,box.height - 3mm)..(-0.15mm, box.height)--cycle withcolor colors.aglgray ;
    clip currentpicture to roundedsquare(box.width + 1cm, box.height, 3mm) shifted (-1cm,0mm);
  </DefineGraphic>

  <Switch>
  <Case  test="@year &gt;= $yr">
    <SetVariable  variable="title-col-switcher"  select="'title-col-1-alt'"  type="mp:string"  />
  </Case>
  <Otherwise>
    <SetVariable  variable="title-col-switcher"  select="'title-col-1'"  type="mp:string"  />
  </Otherwise>
</Switch>  

<PlaceObject  column="{$title-placeobj-col}"  row="{$title-placeobj-row}"  >
  <Table  width="{$title-table-width}"  stretch="no"  fontfamily="title"  border-collapse="collapse">
    <Columns>
      <Column  width="1*"  />
      <!--  ADD  "NEW"  COLUMNS  -->
      <Switch>
        <Case  test="@year  &gt;=  $yr">
          <Column  width="16mm"  />
        </Case>
      </Switch>
      <!--  END  "NEW"  COLUMN  -->
    </Columns>
      <Tr  valign="middle"  minheight="8mm">
				
      <!-- *** THE SWITCHER IS HERE *** --> 	
      <Td  graphic="$title-col-switcher"  padding-left="4mm"  padding-bottom="-3pt"  padding-right="0.6mm">
    <Paragraph  textformat="nohyphen">      
        <NoBreak  reduce="fontfit">
        <Value  select="upper-case(@title)"  />
      </NoBreak>
      </B>
    </Paragraph>
  </Td>
      <!--  IT  IS  NEW  -->
  <Switch>
    <Case  test="@year  &gt;=  $yr">
      <Td  align="left"  graphic="new-col-2"  padding-right="3mm"  padding-left="4.8mm"  padding-top="1.3mm">
        <Paragraph  color="white"  fontfamily="new">
          <Value>NEW</Value>
        </Paragraph>
      </Td>
    </Case>
  </Switch>
  <!--  END  NEW  -->
</Tr>
</Table>

I don't get it, it is supposed to be a simple string that references a graphic that exists, it is not doing anything special... 😩

[pgundlach]

 <Td  graphic="$title-col-switcher" 

there is no graphics with the name "$title-col-switcher", I assume you have stored this in a variable. Use curly braces: <Td graphic="{$title-col-switcher}" >

[Cicorione]

I am pretty sure I made several trials with the curly braces too... 🤷‍♂️
Variables must be given without the attribute type="mp:string" and the attribute td graphics with the curly braces... As I wrote I tested all the combination but the correct one... 🤦‍♂️