Difference between revisions of "TechDraw TemplateHowTo"

From FreeCAD Documentation
Jump to navigation Jump to search
(Marked this version for translation)
(40 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
<languages/>
 
<translate>
 
<translate>
__NOTOC__
 
<!--T:1-->
 
===How to Make a TechDraw Template===
 
  
This HowTo assumes you are familiar with FreeCAD, Inkscape and Svg.
+
<!--T:25-->
 +
{{TutorialInfo
 +
|Topic=Drafting
 +
|Level=Intermediate
 +
|Time=60 minutes
 +
|Author=[http://freecadweb.org/wiki/index.php?title=User:wandererfan wandererfan]
 +
|FCVersion=0.17
 +
}}
 +
 
 +
== Introduction == <!--T:26-->
 +
 
 +
<!--T:27-->
 +
This tutorial shows you how to create an [[SVG]] file that can be used as the background [[TechDraw Templates|template]] for the [[TechDraw Workbench]] pages.
 +
 
 +
<!--T:21-->
 +
This tutorial assumes you are moderately familiar with [https://en.wikipedia.org/wiki/Inkscape Inkscape] and [[SVG]], as well as FreeCAD and the [[TechDraw Workbench]].
 +
 
 +
<!--T:22-->
 +
We're going to make a simple template for US Letter size paper in landscape orientation.
 +
 
 +
<!--T:28-->
 +
A copy of the result of this tutorial is available in
 +
{{Code|code=
 +
$INSTALL_DIR/Mod/TechDraw/Templates/HowToExample.svg
 +
}}
 +
 
 +
<!--T:29-->
 +
Where {{incode|$INSTALL_DIR}} is the directory where FreeCAD was installed, for example
 +
{{Code|code=
 +
/usr/share/freecad/Mod/TechDraw/Templates/HowToExample.svg
 +
}}
 +
 
 +
== Create base document == <!--T:1-->
 +
 
 +
<!--T:23-->
 +
1. Open a new document in Inkscape.
 +
 
 +
<!--T:30-->
 +
2. In Document Properties
 +
* Select page size "US Letter" and orientation "landscape".
 +
* Set default units to "mm", and the page size to width "279.4" and height "215.9".
 +
[[Image:InkDocProp.png|800px|center]]
 +
{{Caption|align=center|Inskcape: document with page size and orientation}}
 +
{{clear}}
 +
 
 +
<!--T:31-->
 +
3. Use the XML Editor to add a "freecad" namespace clause to the {{incode|<svg>}} item.
 +
* <code>xmlns:freecad="http://www.freecadweb.org/wiki/index.php?title=Svg_Namespace"</code>.
 +
[[File:InkXMLNameSpace.png|800px|center]]
 +
{{Caption|align=center|Inkscape: XML Editor adding the "freecad" namespace clause to the <svg> item}}
 +
{{clear}}
 +
 
 +
== Create template drawing == <!--T:32-->
 +
 
 +
<!--T:33-->
 +
4. Draw outlines, zone numbers, center lines, and other geometry.
 +
 
 +
<!--T:34-->
 +
5. Draw the boxes and lines for the title block.
 +
 
 +
<!--T:35-->
 +
6. Add and position your static text.
  
We're going to make a template for US Letter paper in landscape orientation.
+
<!--T:36-->
 +
7. Add and position the text that will be editable.
  
*open a new document in Inkscape
+
<!--T:37-->
*in Document Properties
+
8. You now have your finished artwork, that should look something like this:
**select a page size (US Letter) & orientation (landscape)
+
[[File:InkFinishedArt.png|800px|center]]
**set default units and page size units to mm (279.4 x 215.9)
+
{{Caption|align=center|Inkscape: tentative template layout}}
*use the XML Editor to add freecad namespace clause to the <svg> item
+
{{clear}}
**xmlns:freecad="http://www.freecadweb.org/wiki/index.php?title=Svg_Namespace "
 
  
Note: don't use Layers until you've mastered template creation without them.  Layers (and Groups) can automatically insert unwanted transforms into your SVG.
+
== Create editable fields == <!--T:38-->
  
*draw outlines, zone numbers, centerlines, etc
+
<!--T:39-->
*draw the boxes and lines for the title block.
+
9. Use the XML Editor to add a {{incode|freecad:editable}} tag to each editable {{incode|<text>}} item.
*add and position your static text
+
* Assign a meaningful field name to each editable text.
*add and position your editable text
+
[[File:InkXMLeditableTag.png|800px|center]]
*use the XML Editor to add "freecad:editable" tag to each editable <text> item
+
{{Caption|align=center|Inkscape: XML Editor adding the "freecad:editable" property to the desired <text> item}}
**assign a meaningful field name to each editable text
+
{{clear}}
  
*use XML editor to adjust viewbox to match your page size in mm
+
== Adjust size of the SVG == <!--T:40-->
**your template will now appear much too big.
 
**Edit>Select All in All Layers (or box select. make sure you select everything)
 
**adjust the W: and H: spinboxes to match your artwork's size in mm
 
***page-size less any applicable margins
 
**use "Align and Distribute" or X/Y spinboxes to position artwork on page if required.
 
**your template should now look right.
 
  
*ensure that all your editable texts are "ungrouped" (shift-ctl-g)
+
<!--T:41-->
*select everything on your page (box select or Edit>SelectAll) and Edit>Copy
+
10. Use the XML editor to adjust the {{incode|viewBox}} attribute to match your page size in millimeters.
*Layer>Delete Current Layer
+
* It is four values, in the format {{incode|"0 0 width height"}}
*Edit>Paste in Place
+
[[File:InkXMLviewBox.png|800px|center]]
 +
{{Caption|align=center|Inkscape: XML Editor adjusting the viewbox to match the page size in millimeters}}
 +
{{clear}}
  
*Your template should now look right and shouldn't have any unwanted transforms
+
<!--T:42-->
*Save your template
+
11. Your template will now appear much bigger than desired.
*try it in FreeCAD.
+
[[File:InkMuchTooBig.png|800px|center]]
 +
{{Caption|align=center|Inkscape: tentative template layout exceeding the page size}}
 +
{{clear}}
  
<!--T:10-->
+
<!--T:43-->
Back to [[TechDraw_Templates|Templates]].
+
12. We need to shrink it.
 +
* {{MenuCommand|Edit → Select All in All Layers}}, or box select and select all.
 +
* Adjust the {{Button|W:}} and {{Button|H:}} spinboxes to match your artwork's size in millimeters.
 +
* Set it to the page size less any applicable margins, for example, {{Button|W: 250}}, and {{Button|H: 200}}.
 +
 
 +
<!--T:44-->
 +
13. Use "Align and Distribute" or the {{Button|X:}} and {{Button|Y:}} spinboxes to position the artwork within the limits of the page if required.
 +
 
 +
<!--T:45-->
 +
14. Your template should now look right, just like it did in the finished artwork picture above.
 +
 
 +
== Remove transformans on the SVG == <!--T:46-->
 +
 
 +
<!--T:47-->
 +
15. Ensure that all your editable texts are "ungrouped" with {{KEY|Shift}}+{{KEY|Ctrl}}+{{KEY|g}}.
 +
 
 +
<!--T:48-->
 +
16. Select everything on your page, {{MenuCommand|Edit → Select All}}, and then {{MenuCommand|Edit → Copy}}.
 +
 
 +
<!--T:49-->
 +
17. Then delete the current layer, {{MenuCommand|Layer → Delete Current Layer}}.
 +
 
 +
<!--T:50-->
 +
18. Then paste, {{MenuCommand|Edit → Paste in Place}}.
 +
 
 +
<!--T:51-->
 +
19. Your template should now look right and shouldn't have any unwanted transforms.
 +
 
 +
<!--T:52-->
 +
20. Save your template.
 +
 
 +
<!--T:53-->
 +
21. Try it in FreeCAD and [[TechDraw Workbench]] with [[TechDraw New Pick]].
 +
[[File:FCTemplateHow.png|center]]
 +
{{Caption|align=center|FreeCAD: finished template with an editable text field being modified}}
 +
{{clear}}
 +
 
 +
== Notes == <!--T:24-->
 +
Don't use Layers in Inkscape until you've mastered template creation without them. Layers and Groups can automatically insert unwanted transforms into your [[SVG]] file.
 +
 
 +
<!--T:54-->
 +
As a final step before using your new template, make sure to remove any transform clauses from the Svg code. Transform clauses '''will cause problems'''.
 +
 
 +
<!--T:57-->
 +
See a Stackoverflow discussion on [https://stackoverflow.com/questions/13329125/removing-transforms-in-svg-files removing transform clauses in SVG files].
  
  
 
<!--T:20-->
 
<!--T:20-->
[[Category:User Documentation]]
+
{{TechDraw Tools navi}}
 +
 
 +
<!--T:55-->
 +
{{Userdocnavi}}
 +
 
 +
<!--T:56-->
 +
[[Category:Tutorials]]
 
</translate>
 
</translate>
<languages/>
 

Revision as of 21:30, 13 February 2020

Other languages:
Deutsch • ‎English • ‎français • ‎italiano
Base ExampleCommandModel.png Tutorial
Topic
Drafting
Level
Intermediate
Time to complete
60 minutes
Authors
wandererfan
FreeCAD version
0.17
Example files
None


Introduction

This tutorial shows you how to create an SVG file that can be used as the background template for the TechDraw Workbench pages.

This tutorial assumes you are moderately familiar with Inkscape and SVG, as well as FreeCAD and the TechDraw Workbench.

We're going to make a simple template for US Letter size paper in landscape orientation.

A copy of the result of this tutorial is available in

$INSTALL_DIR/Mod/TechDraw/Templates/HowToExample.svg

Where $INSTALL_DIR is the directory where FreeCAD was installed, for example

/usr/share/freecad/Mod/TechDraw/Templates/HowToExample.svg

Create base document

1. Open a new document in Inkscape.

2. In Document Properties

  • Select page size "US Letter" and orientation "landscape".
  • Set default units to "mm", and the page size to width "279.4" and height "215.9".
InkDocProp.png

Inskcape: document with page size and orientation


3. Use the XML Editor to add a "freecad" namespace clause to the <svg> item.

InkXMLNameSpace.png

Inkscape: XML Editor adding the "freecad" namespace clause to the <svg> item


Create template drawing

4. Draw outlines, zone numbers, center lines, and other geometry.

5. Draw the boxes and lines for the title block.

6. Add and position your static text.

7. Add and position the text that will be editable.

8. You now have your finished artwork, that should look something like this:

InkFinishedArt.png

Inkscape: tentative template layout


Create editable fields

9. Use the XML Editor to add a freecad:editable tag to each editable <text> item.

  • Assign a meaningful field name to each editable text.
InkXMLeditableTag.png

Inkscape: XML Editor adding the "freecad:editable" property to the desired <text> item


Adjust size of the SVG

10. Use the XML editor to adjust the viewBox attribute to match your page size in millimeters.

  • It is four values, in the format "0 0 width height"
InkXMLviewBox.png

Inkscape: XML Editor adjusting the viewbox to match the page size in millimeters


11. Your template will now appear much bigger than desired.

InkMuchTooBig.png

Inkscape: tentative template layout exceeding the page size


12. We need to shrink it.

  • Edit → Select All in All Layers, or box select and select all.
  • Adjust the W: and H: spinboxes to match your artwork's size in millimeters.
  • Set it to the page size less any applicable margins, for example, W: 250, and H: 200.

13. Use "Align and Distribute" or the X: and Y: spinboxes to position the artwork within the limits of the page if required.

14. Your template should now look right, just like it did in the finished artwork picture above.

Remove transformans on the SVG

15. Ensure that all your editable texts are "ungrouped" with Shift+Ctrl+g.

16. Select everything on your page, Edit → Select All, and then Edit → Copy.

17. Then delete the current layer, Layer → Delete Current Layer.

18. Then paste, Edit → Paste in Place.

19. Your template should now look right and shouldn't have any unwanted transforms.

20. Save your template.

21. Try it in FreeCAD and TechDraw Workbench with TechDraw New Pick.

FCTemplateHow.png

FreeCAD: finished template with an editable text field being modified


Notes

Don't use Layers in Inkscape until you've mastered template creation without them. Layers and Groups can automatically insert unwanted transforms into your SVG file.

As a final step before using your new template, make sure to remove any transform clauses from the Svg code. Transform clauses will cause problems.

See a Stackoverflow discussion on removing transform clauses in SVG files.