{"id":459,"date":"2014-06-26T14:15:53","date_gmt":"2014-06-26T12:15:53","guid":{"rendered":"http:\/\/blogs.igalia.com\/jaragunde\/?p=459"},"modified":"2014-07-31T20:54:33","modified_gmt":"2014-07-31T18:54:33","slug":"tales-of-libreoffice-interoperability-shape-effects","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/jaragunde\/2014\/06\/tales-of-libreoffice-interoperability-shape-effects\/","title":{"rendered":"Tales of LibreOffice interoperability: shape effects"},"content":{"rendered":"

We continue introducing features that will be part of the 4.3.0 release<\/a> of LibreOffice, which is coming soon. After having worked in the preservation of color in shapes<\/a>, we worked on the different effects that can be applied to shapes and bitmaps.<\/p>\n

There are three types of effects that are managed separately in the DrawingML specification.<\/p>\n

General shape effects<\/h3>\n

Examples of these effects are inner or outer shadows, reflections, glow… They can be applied both to vectorial shapes or bitmaps, and several of them can be applied at the same time.<\/p>\n

\"Shape<\/a><\/p>\n

These effects are indicated with the a:effectLst<\/em> tag inside the shape properties tag spPr<\/em>. I won’t explain their specification in detail because you can find a very good description in this website<\/a>, but you can get an idea by taking a look at the following example where three effects are applied: glow, inner shadow and reflection:<\/p>\n

[code language=”xml”]
\n<a:effectLst>
\n <a:glow rad="63500">
\n <a:schemeClr val="accent2">
\n <a:satMod val="175000" \/>
\n <a:alpha val="40000" \/>
\n <\/a:schemeClr>
\n <\/a:glow>
\n <a:innerShdw blurRad="63500" dist="50800"
\n dir="2700000">
\n <a:prstClr val="black">
\n <a:alpha val="50000" \/>
\n <\/a:prstClr>
\n <\/a:innerShdw>
\n <a:reflection blurRad="6350" stA="52000"
\n endA="300" endPos="35000" dir="5400000"
\n sy="-100000" algn="bl"
\n rotWithShape="0" \/>
\n<\/a:effectLst>
\n[\/code]<\/p>\n

Notice that some effects only have some attributes while others contain color specifications as child elements like the ones explained in the previous post<\/a>.<\/p>\n

3D effects<\/h3>\n

Shapes and bitmaps can be transformed into 3D objects and get lighting and camera modifications applied to them.<\/p>\n

\"Shape<\/a><\/p>\n

These effects are basically controlled by two children tags of spPr<\/em>. One of them is a:scene3d<\/em> and controls the camera and lighting, and the other one is a:sp3d<\/em> which controls the transformation of the shape in a 3D object adding extrusion, bevels and a material effect to the surface. In the same website I linked before, you can read a description of scene3d<\/a> and sp3d<\/a> tags and their children. Find an example of their combined use below:<\/p>\n

[code language=”xml”]
\n<a:scene3d>
\n <a:camera prst="perspectiveRelaxedModerately"
\n zoom="150000">
\n <a:rot lat="19490639" lon="0"
\n rev="12900001" \/>
\n <\/a:camera>
\n <a:lightRig rig="threePt" dir="t">
\n <a:rot lat="0" lon="0" rev="4800000" \/>
\n <\/a:lightRig>
\n<\/a:scene3d>
\n<a:sp3d z="488950" extrusionH="63500"
\nprstMaterial="metal">
\n <a:bevelT w="165100" prst="coolSlant" \/>
\n <a:extrusionClr>
\n <a:schemeClr val="tx2" \/>
\n <\/a:extrusionClr>
\n<\/a:sp3d>
\n[\/code]<\/p>\n

Artistic effects<\/h3>\n

Effects from the last category act like the filters found in image manipulation programs (blur, grain or background removal among others) and that’s why they only can be applied to bitmaps. This is actually not a part of DrawingML spec but an extension<\/a> over it.<\/p>\n

There is an important difference with other filters; these ones come pre-calculated in the document. The bitmap linked by the DrawingML shape already comes with the effect, and the effect specification links a second bitmap that contains the original picture so the effect can be undone. This second bitmap is saved in the relatively new loss-less Windows Media Photo format<\/a>.<\/p>\n

\"Writer<\/a><\/p>\n

Check the following example of a blip-filled shape; the actual filling comes from the file linked as rId6<\/em>, while the effect definition is linked to rId7<\/em> which is a copy of the original image before the filter was applied:<\/p>\n

[code language=”xml”]
\n<a:blip r:embed="rId6" cstate="print">
\n <a:extLst>
\n <a:ext uri="{BEBA8EAE-BF5A-486C-A8C5-ECC9F3942E4B}">
\n <a14:imgProps xmlns:a14="http:\/\/schemas.microsoft.com\/office\/drawing\/2010\/main">
\n <a14:imgLayer r:embed="rId7">
\n <a14:imgEffect>
\n <a14:artisticLightScreen trans="10000" gridSize="6" \/>
\n <\/a14:imgEffect>
\n <\/a14:imgLayer>
\n <\/a14:imgProps>
\n <\/a:ext>
\n <\/a:extLst>
\n<\/a:blip>
\n[\/code]<\/p>\n

These are the relations between the ids and the files contained in the document, as specified at document.xml.rels<\/em>:<\/p>\n

[code language=”xml”]
\n<Relationship Id="rId6"
\n Type="http:\/\/schemas.openxmlformats.org\/officeDocument\/2006\/relationships\/image"
\n Target="media\/image2.png" \/>
\n<Relationship Id="rId7"
\n Type="http:\/\/schemas.microsoft.com\/office\/2007\/relationships\/hdphoto"
\n Target="media\/hdphoto1.wdp" \/>
\n[\/code]<\/p>\n

The funny thing of this approach is that LO was able to render these effects with no effort, although the program was not aware of the effect parameters or the original bitmap and these were being lost on save.<\/p>\n

Preservation<\/h3>\n

We use again the grab bag<\/em> technique to save all the tags and attributes related with the effects as a hidden property that will be used later in the export phase to re-build the effect definitions. In the case of artistic effects, we additionally need to make sure that the original bitmap is preserved; LibreOffice doesn’t support the Windows Media Photo format yet, but we can keep the raw stream of data and output it to a properly named file in the exported document. A small cache table is maintained by the exporter code to prevent that the same original file is saved more than once when two or more pictures apply effects to the same image.<\/p>\n

We have finished with the improvements related to shapes and pictures, but there are a few interoperability features not yet mentioned which will be covered in a future post. Like the current and previous ones, they were developed by Igalia<\/a> and sponsored by CloudOn<\/a>.<\/p>\n

Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"

We continue introducing features that will be part of the 4.3.0 release of LibreOffice, which is coming soon. After having worked in the preservation of color in shapes, we worked on the different effects that can be applied to shapes … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17],"tags":[20],"class_list":["post-459","post","type-post","status-publish","format-standard","hentry","category-igalia","category-libreoffice","tag-lo-4-3-interoperability"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts\/459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/comments?post=459"}],"version-history":[{"count":7,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts\/459\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts\/459\/revisions\/469"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/media?parent=459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/categories?post=459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/tags?post=459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}