elliot winard

The tricky part of creating a class that displays a scaled reversed character is figuring out what to stretch & what to flip. Ultimately, the best solution was to add a single view wrapping the (resizing) text with a stretchy view that is flipped and positioned to take the flippage into account.

    <class name="revletterblock" font="black">
           width="100%" height="100%"
           options="releasetolayout"
           bgcolor="${blockcolor}"
           >
        <attribute name="letter" type="string"></attribute>
        <attribute name="blockcolor" value="$once{canvas.colorhash['orange']}" type="color" />
        <attribute name="color" value="white" type="color"></attribute>
        <attribute name="borderwidth" value="2"></attribute>

        <view width="${-parent.width}" x="${parent.width}">
              height="100%"
              stretches="both">
            <text name="char" text="${classroot.letter}" resize="true">
                  fgcolor="${classroot.color}" />
        </text>
    </view>
</class>

Using Laszlo’s default resizelayout to lay the block characters out, the full cover reproduction looks like this -

    <!--
         resize laid-out view
         stretches to fill parent unless told otherwise by layout
    -->
    <class name="lview" height="100%" width="100%">
        <attribute name="axis" value="y" type="string"></attribute>
        <resizelayout spacing="2" axis="$once{classroot.axis}">
    </resizelayout>

    <lview name="t" axis="x" width="100%" height="100%">

        <lview width="40%" axis="y">

            <revletterblock letter="Y" options="releasetolayout">

            <lview height="60%">

                <lview axis="x" height="60%">
                    <revletterblock letter="O">
                    <revletterblock letter="P">
                </revletterblock>

                <lview axis="x" height="25%">
                    <revletterblock letter="A">
                    <revletterblock letter="R">
                    <revletterblock letter="G">
                </revletterblock>

                <lview axis="x" options="releasetolayout">
                    <revletterblock letter="E" id="e">
                    <revletterblock letter="I">
                    <revletterblock letter="H">
                    <revletterblock letter="P">
                </revletterblock>

            </revletterblock>

        </revletterblock>

        <revletterblock letter="T" options="releasetolayout">
    </revletterblock>
</revletterblock></lview></revletterblock></revletterblock></lview></revletterblock></lview></lview></revletterblock></lview></lview>

next…. physics? layouts? more type experiments? code-generating projects?