ODF specification regarding multistop/-color gradients

classic Classic list List threaded Threaded
5 messages Options
Heiko Tietze-2 Heiko Tietze-2
Reply | Threaded
Open this post in threaded view
|

ODF specification regarding multistop/-color gradients

Hello all,

the LibreOffice conference gave me the chance to present some ideas regarding Draw and shapes in general. One of the most wanted features is the multistop gradient. Today we can define gradients between two colors, either linear, radial, or whatever. It would be nice to have a) non-linear multistop gradients, for example to illustrate a sundown with a small red and a larger yellow section, and b) a gradient over more than two colors, e.g. in order to add blue sky to the sundown.

Since Calligra offers multicolor gradients, Armin and me checked how it is saved (the rendering is build-in right now). And it turns out that they hack SVG into the ODF. For the (predefined) rainbow-like gradient the style.xml looks like this:

<svg:linearGradient draw:name="gradient1" svg:spreadMethod="pad" svg:x1="0.000000%" svg:x2="100.000000%" svg:y1="0.000000%" svg:y2="100.000000%">
<svg:stop svg:offset="0" svg:stop-color="#ff0000"/><svg:stop svg:offset="0.183575" svg:stop-color="#ffe100"/><svg:stop svg:offset="0.347826" svg:stop-color="#00ff00"/><svg:stop svg:offset="0.516908" svg:stop-color="#00ffff"/><svg:stop svg:offset="0.68599" svg:stop-color="#0000ff"/><svg:stop svg:offset="0.845411" svg:stop-color="#ff00fb"/><svg:stop svg:offset="1" svg:stop-color="#ff0004"/>
</svg:linearGradient>

As an UX evangelist I don't care too much about the implementation and have rather the workflow and interactions in mind. Ideally the multi-gradient works with all features, and not as another type next to linear, radial etc. (There might be a problem that result in this sub-optimal solution).
 
And finally we have to take interoperability into account as well as the conformity to the ODF specs (no idea if and how it is defined).
 
So how do we make multistop/multicolor gradients possible?
 
Cheers,
Heiko

PS: Suggestions on how to implement this feature in the UI are existing.
--
Dr. Heiko Tietze
UX Designer
Tel. +49 (0)179/1268509


_______________________________________________
LibreOffice mailing list
[hidden email]
https://lists.freedesktop.org/mailman/listinfo/libreoffice

signature.asc (465 bytes) Download Attachment
Regina Henschel Regina Henschel
Reply | Threaded
Open this post in threaded view
|

Re: ODF specification regarding multistop/-color gradients

Hi Heiko,

Heiko Tietze schrieb:
> Hello all,
>
> the LibreOffice conference gave me the chance to present some ideas regarding Draw and shapes in general. One of the most wanted features is the multistop gradient. Today we can define gradients between two colors, either linear, radial, or whatever. It would be nice to have a) non-linear multistop gradients, for example to illustrate a sundown with a small red and a larger yellow section, and b) a gradient over more than two colors, e.g. in order to add blue sky to the sundown.
>
> Since Calligra offers multicolor gradients, Armin and me checked how it is saved (the rendering is build-in right now). And it turns out that they hack SVG into the ODF.

That is no "hack SVG into ODF ". The feature "svg-gradient is in ODF
from the beginning. In ODF 1.1 it is in "14.14.2 SVG Gradients", and in
ODF 1.2 it is in 16.40.2<svg:linearGradient>,
16.40.3<svg:radialGradient> and 16.40.4<svg:stop> and its attributes in
chapter 19. Only OpenOffice.org had no implementation for it.

The request for LO is in
https://bugs.documentfoundation.org/show_bug.cgi?id=94588

  For the (predefined) rainbow-like gradient the style.xml looks like this:
>
> <svg:linearGradient draw:name="gradient1" svg:spreadMethod="pad" svg:x1="0.000000%" svg:x2="100.000000%" svg:y1="0.000000%" svg:y2="100.000000%">
> <svg:stop svg:offset="0" svg:stop-color="#ff0000"/><svg:stop svg:offset="0.183575" svg:stop-color="#ffe100"/><svg:stop svg:offset="0.347826" svg:stop-color="#00ff00"/><svg:stop svg:offset="0.516908" svg:stop-color="#00ffff"/><svg:stop svg:offset="0.68599" svg:stop-color="#0000ff"/><svg:stop svg:offset="0.845411" svg:stop-color="#ff00fb"/><svg:stop svg:offset="1" svg:stop-color="#ff0004"/>
> </svg:linearGradient>

A true "rainbow" is not possible, because that needs a HSB color model.
So using stops is the only way to do it as SVG gradient. The quoted
snippet is all valid ODF.

ODF has some restrictions compared to SVG. But starting with that, what
is currently possible in ODF, would help a lot. And I personally see no
problem in getting further SVG features into ODF1.3 if needed and an
implementation exists.

>
> As an UX evangelist I don't care too much about the implementation

But I do. I prefer a solution with clean ODF.

Therefore I do not want an isolated, workaround solution for OOXML
import as touched upon in
https://bugs.documentfoundation.org/show_bug.cgi?id=76682 and was
proposed in https://gerrit.libreoffice.org/#/c/12056/

  and have rather the workflow and interactions in mind.

It needs another UI. The linear bar as in PowerPoint is not the only
possible solution. I like more the two dimensional way, where you define
a way in a color area. (I just don't remember, where I saw it.)

  Ideally the multi-gradient works with all features, and not as another
type next to linear, radial etc. (There might be a problem that result
in this sub-optimal solution).

It is another kind of gradient. The <draw:gradient> kind 'rectangle' and
'square' are not possible with SVG.

>
> And finally we have to take interoperability into account as well as the conformity to the ODF specs (no idea if and how it is defined).

See above.

>
> So how do we make multistop/multicolor gradients possible?

There exists already rendering solutions in rendering SVG-images.


>
> Cheers,
> Heiko
>
> PS: Suggestions on how to implement this feature in the UI are existing.

Where?

Kind regards
Regina

_______________________________________________
LibreOffice mailing list
[hidden email]
https://lists.freedesktop.org/mailman/listinfo/libreoffice
Jos van den Oever-4 Jos van den Oever-4
Reply | Threaded
Open this post in threaded view
|

Re: ODF specification regarding multistop/-color gradients

In reply to this post by Heiko Tietze-2
Hello Heiko,

<svg:linearGradient/> is not a hack. It has been in the ODF specification since
1.0.

Cheers,
Jos


On Saturday 10 September 2016 11:11:40 Heiko Tietze wrote:

> Hello all,
>
> the LibreOffice conference gave me the chance to present some ideas
> regarding Draw and shapes in general. One of the most wanted features is
> the multistop gradient. Today we can define gradients between two colors,
> either linear, radial, or whatever. It would be nice to have a) non-linear
> multistop gradients, for example to illustrate a sundown with a small red
> and a larger yellow section, and b) a gradient over more than two colors,
> e.g. in order to add blue sky to the sundown.
>
> Since Calligra offers multicolor gradients, Armin and me checked how it is
> saved (the rendering is build-in right now). And it turns out that they
> hack SVG into the ODF. For the (predefined) rainbow-like gradient the
> style.xml looks like this:
>
> <svg:linearGradient draw:name="gradient1" svg:spreadMethod="pad"
> svg:x1="0.000000%" svg:x2="100.000000%" svg:y1="0.000000%"
> svg:y2="100.000000%"> <svg:stop svg:offset="0"
> svg:stop-color="#ff0000"/><svg:stop svg:offset="0.183575"
> svg:stop-color="#ffe100"/><svg:stop svg:offset="0.347826"
> svg:stop-color="#00ff00"/><svg:stop svg:offset="0.516908"
> svg:stop-color="#00ffff"/><svg:stop svg:offset="0.68599"
> svg:stop-color="#0000ff"/><svg:stop svg:offset="0.845411"
> svg:stop-color="#ff00fb"/><svg:stop svg:offset="1"
> svg:stop-color="#ff0004"/> </svg:linearGradient>
>
> As an UX evangelist I don't care too much about the implementation and have
> rather the workflow and interactions in mind. Ideally the multi-gradient
> works with all features, and not as another type next to linear, radial
> etc. (There might be a problem that result in this sub-optimal solution).
>
> And finally we have to take interoperability into account as well as the
> conformity to the ODF specs (no idea if and how it is defined).
>
> So how do we make multistop/multicolor gradients possible?
>
> Cheers,
> Heiko
>
> PS: Suggestions on how to implement this feature in the UI are existing.

_______________________________________________
LibreOffice mailing list
[hidden email]
https://lists.freedesktop.org/mailman/listinfo/libreoffice
Heiko Tietze-2 Heiko Tietze-2
Reply | Threaded
Open this post in threaded view
|

Re: ODF specification regarding multistop/-color gradients

So taking all together we have means to save the multistop/multicolor
gradient and we can render it correctly. Sounds great.

The preliminary mockup can be found in
https://design.blog.documentfoundation.org/2015/12/22/area-fill-options-made-consistent.
When the type cannot be chosen freely (in Powerpoint I can define
multistop gradients for radial, linear, rectangular, and path(?)
types) we should still implement it as scribbled in the mockup,
meaning the multistop feature is integrated into the properties
instead of becoming a new type. But when the user defines more than
two stops the type changes to linear and the dropdown will be
disabled.

How to proceed now? Should I file an enhancement ticket?

2016-09-10 15:24 GMT+02:00 Jos van den Oever <[hidden email]>:

> Hello Heiko,
>
> <svg:linearGradient/> is not a hack. It has been in the ODF specification since
> 1.0.
>
> Cheers,
> Jos
>
>
> On Saturday 10 September 2016 11:11:40 Heiko Tietze wrote:
>> Hello all,
>>
>> the LibreOffice conference gave me the chance to present some ideas
>> regarding Draw and shapes in general. One of the most wanted features is
>> the multistop gradient. Today we can define gradients between two colors,
>> either linear, radial, or whatever. It would be nice to have a) non-linear
>> multistop gradients, for example to illustrate a sundown with a small red
>> and a larger yellow section, and b) a gradient over more than two colors,
>> e.g. in order to add blue sky to the sundown.
>>
>> Since Calligra offers multicolor gradients, Armin and me checked how it is
>> saved (the rendering is build-in right now). And it turns out that they
>> hack SVG into the ODF. For the (predefined) rainbow-like gradient the
>> style.xml looks like this:
>>
>> <svg:linearGradient draw:name="gradient1" svg:spreadMethod="pad"
>> svg:x1="0.000000%" svg:x2="100.000000%" svg:y1="0.000000%"
>> svg:y2="100.000000%"> <svg:stop svg:offset="0"
>> svg:stop-color="#ff0000"/><svg:stop svg:offset="0.183575"
>> svg:stop-color="#ffe100"/><svg:stop svg:offset="0.347826"
>> svg:stop-color="#00ff00"/><svg:stop svg:offset="0.516908"
>> svg:stop-color="#00ffff"/><svg:stop svg:offset="0.68599"
>> svg:stop-color="#0000ff"/><svg:stop svg:offset="0.845411"
>> svg:stop-color="#ff00fb"/><svg:stop svg:offset="1"
>> svg:stop-color="#ff0004"/> </svg:linearGradient>
>>
>> As an UX evangelist I don't care too much about the implementation and have
>> rather the workflow and interactions in mind. Ideally the multi-gradient
>> works with all features, and not as another type next to linear, radial
>> etc. (There might be a problem that result in this sub-optimal solution).
>>
>> And finally we have to take interoperability into account as well as the
>> conformity to the ODF specs (no idea if and how it is defined).
>>
>> So how do we make multistop/multicolor gradients possible?
>>
>> Cheers,
>> Heiko
>>
>> PS: Suggestions on how to implement this feature in the UI are existing.
>
_______________________________________________
LibreOffice mailing list
[hidden email]
https://lists.freedesktop.org/mailman/listinfo/libreoffice
Armin Le Grand-2 Armin Le Grand-2
Reply | Threaded
Open this post in threaded view
|

Re: ODF specification regarding multistop/-color gradients

In reply to this post by Heiko Tietze-2
Hi,

checked that ODF1.2 has svg:linearGradient (16.40.2) and
svg:radialGradient (16.40.3) with all needed child elements, so this
would work.

Also checked that draw:gradient (16.40.1) has only the known elements
for the current gradients - thus enhancing the current ones with adding
multistop colors seems difficult, hmmm.

Next question is how to use these backwards-compatible - need to think
about this, but the gradient itself is identified using an ID-String
(aka 'Name') in the file format, so we could e.g. have a current and a
svg one with the same name, prefer the svg one. In that way the older
offices would - at least - load a two-color gradient which hopefully
looks somewhat similar...

Anyways, SVG and current ones will geometrically look different, also
only two types in svg. This means we need somewhere new UI and
Interactions (did I mention that we have interactive controls in the
EditView to edit the current gradients?) and probably more (adapt to
other FileFormats...)

Just my 2ct...

Regards,
ALG


Am 10.09.2016 um 11:11 schrieb Heiko Tietze:

> Hello all,
>
> the LibreOffice conference gave me the chance to present some ideas regarding Draw and shapes in general. One of the most wanted features is the multistop gradient. Today we can define gradients between two colors, either linear, radial, or whatever. It would be nice to have a) non-linear multistop gradients, for example to illustrate a sundown with a small red and a larger yellow section, and b) a gradient over more than two colors, e.g. in order to add blue sky to the sundown.
>
> Since Calligra offers multicolor gradients, Armin and me checked how it is saved (the rendering is build-in right now). And it turns out that they hack SVG into the ODF. For the (predefined) rainbow-like gradient the style.xml looks like this:
>
> <svg:linearGradient draw:name="gradient1" svg:spreadMethod="pad" svg:x1="0.000000%" svg:x2="100.000000%" svg:y1="0.000000%" svg:y2="100.000000%">
> <svg:stop svg:offset="0" svg:stop-color="#ff0000"/><svg:stop svg:offset="0.183575" svg:stop-color="#ffe100"/><svg:stop svg:offset="0.347826" svg:stop-color="#00ff00"/><svg:stop svg:offset="0.516908" svg:stop-color="#00ffff"/><svg:stop svg:offset="0.68599" svg:stop-color="#0000ff"/><svg:stop svg:offset="0.845411" svg:stop-color="#ff00fb"/><svg:stop svg:offset="1" svg:stop-color="#ff0004"/>
> </svg:linearGradient>
>
> As an UX evangelist I don't care too much about the implementation and have rather the workflow and interactions in mind. Ideally the multi-gradient works with all features, and not as another type next to linear, radial etc. (There might be a problem that result in this sub-optimal solution).
>    
> And finally we have to take interoperability into account as well as the conformity to the ODF specs (no idea if and how it is defined).
>    
> So how do we make multistop/multicolor gradients possible?
>    
> Cheers,
> Heiko
>
> PS: Suggestions on how to implement this feature in the UI are existing.

--
--
ALG (PGP Key: EE1C 4B3F E751 D8BC C485 DEC1 3C59 F953 D81C F4A2)

_______________________________________________
LibreOffice mailing list
[hidden email]
https://lists.freedesktop.org/mailman/listinfo/libreoffice