Border with non-horizontal lines

[letsfindaway]

Background drawing issue ?

It seems there is an issue if we set a border for 90° lines. For the Seyes background, the vertical lines should start with the margin to the right direction and no vertical line at the left of the margin. (https://en.wikipedia.org/wiki/File:Page_blanche_A5_reglure_Seyes.svg) So I try to modify the XML accordingly. Have e look below:

<bg:background xmlns:bg="http://openboard.org/template/background/">
    <bg:uuid>38b45f18-f6a5-4336-ae91-bedba3a2442c</bg:uuid>
    <bg:description xml:lang="en">Seyes</bg:description>
    <bg:attributes ruled="true"/>
    <bg:linegroup>
        <bg:angle>0</bg:angle>
        <bg:spacing>20</bg:spacing>
        <bg:line>
            <bg:offset>0</bg:offset>
            <bg:width>2</bg:width>
            <bg:color>
                <bg:onDark>#8e7cc3</bg:onDark>
                <bg:onLight>#8e7cc3</bg:onLight>
            </bg:color>
        </bg:line>
        <bg:line>
            <bg:offset>5</bg:offset>
            <bg:width>2</bg:width>
            <bg:color>
                <bg:onDark>#996fa8dc</bg:onDark>
                <bg:onLight>#996fa8dc</bg:onLight>
            </bg:color>
        </bg:line>
        <bg:line>
            <bg:offset>10</bg:offset>
            <bg:width>2</bg:width>
            <bg:color>
                <bg:onDark>#996fa8dc</bg:onDark>
                <bg:onLight>#996fa8dc</bg:onLight>
            </bg:color>
        </bg:line>
        <bg:line>
            <bg:offset>15</bg:offset>
            <bg:width>2</bg:width>
            <bg:color>
                <bg:onDark>#996fa8dc</bg:onDark>
                <bg:onLight>#996fa8dc</bg:onLight>
            </bg:color>
        </bg:line>
    </bg:linegroup>
    <bg:linegroup>
        <bg:angle>90</bg:angle>
        <bg:spacing>20</bg:spacing>
        <bg:origin>topleft</bg:origin>
        <bg:line>
            <bg:offset>0</bg:offset>
            <bg:width>2</bg:width>
            <bg:color>
                <bg:onDark>#8e7cc3</bg:onDark>
                <bg:onLight>#8e7cc3</bg:onLight>
            </bg:color>
        </bg:line>
        <bg:border>
            <bg:left>0</bg:left>
        </bg:border>
    </bg:linegroup>
    <bg:linegroup>
        <bg:angle>90</bg:angle>
        <bg:origin>topleft</bg:origin>
        <bg:line>
            <bg:offset>20</bg:offset>
            <bg:width>2</bg:width>
            <bg:color>
                <bg:onDark>#ff0000</bg:onDark>
                <bg:onLight>#ff0000</bg:onLight>
            </bg:color>
        </bg:line>
    </bg:linegroup>
</
bg:background>

I get some strange not really vertical lines:

Originally posted by @sebojolais in https://github.com/letsfindaway/OpenBoard/discussions/165#discussioncomment-8478706

[letsfindaway]

@sebojolais: Do you have a proposal how <border> should be interpreted and specified so that we can correctly draw Seyes and other use cases? At least those already existing should be covered.

[letsfindaway]

I think we need two different things:

• The border, which limits the length of the lines and optionally draws a short orthogonal line connecting the lines of a line group.
• A new property limiting the extend of a line group with spacing.

Is extend a good name for it? And what should it measure? Number of lines to the left and right of the origin? Or something related to the page size like border does? But - and this is also a question for border, what does this mean for any line group with an angle of neither 0 nor 90?

[letsfindaway]

Idea for an algorithm

Border

Similar to the origin, we also create borders relative to a corner of the document page. Remember, angles are measured counter-clockwise relative to a horizontal line. Then for the border at the start of the line:

• For an angle from 0° to 90°, the reference point is the bottom left corner.
• For an angle from 90° to 180°, the reference point is the bottom right corner.
• For an angle from 180° to 270°, the reference point is the top right corner.
• For an angle from 270° to 360°, the reference point is the top left corner.

Using an inverse of the distance function we calculate a border line, orthogonal to the grid line and with the given distance from the reference point. For the border at the end of the line we use the opposite reference point.

Extend

For the extend, i.e. the amount of parallel repeating line groups, we can choose a similar approach. Also here we specify a maximum distance from the reference point.

Window

Perhaps it is also useful to specify a rectangular clipping area. Only lines or parts of lines inside this rectangle are drawn. This would allow to limit even the isometric grid to some rectangular area. I would propose to specify this clipping area also relative to the document page.

To some extend this has the same effect as the Border or Extend, but specifically the Border was meant to not only limit a line, but also draw the small connecting lines. And also the areas to the left and the top in Seyes (as shown in the Wikipedia image linked above) can not be created by clipping.

Better names?

I'm also open for proposals for better names. Some ideas:

• border: stretch, breadth
• extend: range, stack
• window: clip, clipping, viewport

[sebojolais]

Hi, I am trying to understand your proposition. My understanding is that the current Seyes issue should be managed by the new Extend parameter. Is not it ? The windows clipping is also an good idea.

[letsfindaway]

Hi, I am trying to understand your proposition.

Let me try to explain it more from a user perspective:

By default, the lines in a line group continue endless to the left and right. If they are repeating (i.e. have a spacing), then the stack of groups also continues endless upwards and downwards. However some background patterns need a limitation. This is not only true for horizontal lines, but also for any other angle.

• The border element shall limit the length of a line. Because this is now the main purpose of that element, I want to rename it as stretch. This element allows to define a start and / or end of a line, relative to some reference point. Currently this only works if a line is horizontal, but this limiting is needed for any angle of a line. Just as it is currently the case, an optional border line can be drawn connecting the lines in a line group.
• The new stack element shall limit the stacking of lines. Instead of an endless stack, it can be specified that it ends at some point, again relative to some reference point. Also this feature shall work independent of the angle of the line group.

My understanding is that the current Seyes issue should be managed by the new Extend parameter. Is not it ?

Yes, or better a combination of stretch and stack, as I would propose to call them. These two elements now make it possible to create patterns which resemble a piece of paper: it is not endless.

The windows clipping is also an good idea.

I'm thinking about use cases. Currently I see that it is necessary if we use lines which are neither horizontal nor vertical and want to create a rectangular area for such a pattern. For other pattern stretch and stack can also do the job.

[letsfindaway]

With my latest push I modified the XML schema as indicated above. Also the definitions of the patters are updated. @sebojolais could you please check whether Seyes is now what you expect?

[sebojolais]

Thank you for your modifications. Now I am able to set up the Seyes background as I need it. Below is the arguments for the Seyes modifications:

• The background is also useful outside the screen size if we want to add information outside.
• I need the red margin visible for the pupils. But I do not want to lose to much space. So the second vertical line is the red margin.
• It is now equivalent to the Seyes feature of OB 1.7.0.

With this PR #168 , I got something like this:

[letsfindaway]

Thanks for this PR! Merged #168, closing this for now.