{"id":3616,"date":"2025-10-03T22:41:36","date_gmt":"2025-10-03T20:41:36","guid":{"rendered":"https:\/\/davidka.net\/?p=3616"},"modified":"2025-10-24T12:40:29","modified_gmt":"2025-10-24T09:40:29","slug":"lesson-6-icons-and-visual-design","status":"publish","type":"post","link":"http:\/\/de.davidka.net\/de\/lesson-6-icons-and-visual-design\/","title":{"rendered":"Lektion 6. Symbole und visuelles Design"},"content":{"rendered":"\n<p class=\"has-neve-link-color-color has-text-color has-link-color has-medium-font-size wp-elements-a5a432703f86835a1eac9ed981f7b6d5 wp-block-paragraph\"><strong>Lernziel:<\/strong> F\u00fcge Schaltfl\u00e4chen und der Arbeitsumgebung Symbole hinzu, um das Addon professionell aussehen zu lassen.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Teil 1. Unterst\u00fctzte Symbolformate<\/strong><br>FreeCAD unterst\u00fctzt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SVG<\/strong> (empfohlen) \u2014 skaliert verlustfrei<\/li>\n\n\n\n<li><strong>PNG<\/strong> \u2014 Rastergrafik, aber einfach zu verwenden<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Symbole sollten einfach, kontrastreich und selbst in kleiner Gr\u00f6\u00dfe (16\u00d716 oder 24\u00d724 Pixel) erkennbar sein.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Teil 2. Ordnerstruktur f\u00fcr Symbole<\/strong><br>Erstelle innerhalb des Addon-Ordners einen Unterordner:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">BoxBuilderAddon\/  \n\u2514\u2500\u2500 Resources\/  \n    \u2514\u2500\u2500 icons\/  \n        \u251c\u2500\u2500 box_builder.svg  \u2190 Symbol f\u00fcr die Arbeitsumgebung  \n        \u2514\u2500\u2500 create_box.svg   \u2190 Symbol f\u00fcr den Befehl  <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Der Pfad <code class=\"\" data-line=\"\">Resources\/icons\/<\/code> ist eine Standardkonvention im FreeCAD-\u00d6kosystem.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Teil 3. Woher Symbole beziehen?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 1: Integrierte FreeCAD-Symbole verwenden<\/strong><br>FreeCAD enth\u00e4lt Hunderte von Symbolen. Beispiel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-line=\"\">:\/icons\/Part_Box.svg<\/code><\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">:\/icons\/Document-new.svg<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Es ist jedoch besser, eigene Symbole zu erstellen, um Abh\u00e4ngigkeiten von internen Pfaden zu vermeiden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Option 2: Ein einfaches Symbol manuell erstellen<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beispiel: <code class=\"\" data-line=\"\">create_box.svg<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">&lt;!-- create_box.svg --&gt;\n&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; width=&quot;64&quot; height=&quot;64&quot; viewBox=&quot;0 0 64 64&quot;&gt;\n  &lt;rect x=&quot;10&quot; y=&quot;10&quot; width=&quot;44&quot; height=&quot;44&quot; fill=&quot;none&quot; stroke=&quot;black&quot; stroke-width=&quot;4&quot;\/&gt;\n  &lt;line x1=&quot;10&quot; y1=&quot;10&quot; x2=&quot;20&quot; y2=&quot;0&quot; stroke=&quot;black&quot; stroke-width=&quot;4&quot;\/&gt;\n  &lt;line x1=&quot;54&quot; y1=&quot;10&quot; x2=&quot;64&quot; y2=&quot;0&quot; stroke=&quot;black&quot; stroke-width=&quot;4&quot;\/&gt;\n  &lt;line x1=&quot;54&quot; y1=&quot;54&quot; x2=&quot;64&quot; y2=&quot;44&quot; stroke=&quot;black&quot; stroke-width=&quot;4&quot;\/&gt;\n  &lt;line x1=&quot;20&quot; y1=&quot;0&quot; x2=&quot;64&quot; y2=&quot;0&quot; stroke=&quot;black&quot; stroke-width=&quot;4&quot;\/&gt;\n  &lt;line x1=&quot;64&quot; y1=&quot;0&quot; x2=&quot;64&quot; y2=&quot;44&quot; stroke=&quot;black&quot; stroke-width=&quot;4&quot;\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Speichere diesen Code als <code class=\"\" data-line=\"\">create_box.svg<\/code> im Ordner <code class=\"\" data-line=\"\">Resources\/icons\/<\/code>.<br>Du kannst die SVG-Datei in einem Browser \u00f6ffnen, um das Ergebnis zu sehen.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Teil 4. Symbole im Code verkn\u00fcpfen<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Schritt 1. Aktualisiere <code class=\"\" data-line=\"\">box_builder_workbench.py<\/code><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge am Anfang der Datei (nach den Importen) hinzu:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">import os<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Finde dann die Klasse <code class=\"\" data-line=\"\">BoxBuilderCommand<\/code> und aktualisiere die Methode <code class=\"\" data-line=\"\">GetResources<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">class BoxBuilderCommand:\n    def GetResources(self):\n        # Pfad zum Symbol\n        icon_path = os.path.join(\n            os.path.dirname(__file__), &quot;Resources&quot;, &quot;icons&quot;, &quot;create_box.svg&quot;\n        )\n        return {\n            &quot;MenuText&quot;: &quot;Box Builder&quot;,\n            &quot;ToolTip&quot;: &quot;Create a box with custom dimensions&quot;,\n            &quot;Pixmap&quot;: icon_path  # \u2190 Symbol verkn\u00fcpfen\n        }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Schritt 2. Symbol f\u00fcr die Arbeitsumgebung hinzuf\u00fcgen<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge in der Klasse <code class=\"\" data-line=\"\">BoxBuilderWorkbench<\/code> die Eigenschaft <code class=\"\" data-line=\"\">Icon<\/code> hinzu:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">class BoxBuilderWorkbench(FreeCADGui.Workbench):\n    MenuText = &quot;Box Builder&quot;\n    ToolTip = &quot;Create custom boxes with GUI&quot;\n\n    def __init__(self):\n        # Pfad zum Symbol der Arbeitsumgebung\n        self.Icon = os.path.join(\n            os.path.dirname(__file__), &quot;Resources&quot;, &quot;icons&quot;, &quot;box_builder.svg&quot;\n        )\n\n    def Initialize(self):\n        self.list = &#091;&quot;BoxBuilderCommand&quot;]\n        self.appendToolbar(&quot;Box Tools&quot;, self.list)\n        self.appendMenu(&quot;Box Builder&quot;, self.list)\n\n    def GetClassName(self):\n        return &quot;Gui::PythonWorkbench&quot;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Falls du <code class=\"\" data-line=\"\">box_builder.svg<\/code> noch nicht erstellt hast \u2013 kopiere einfach <code class=\"\" data-line=\"\">create_box.svg<\/code> und benenne sie um.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Teil 5. \u00dcberpr\u00fcfung<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stelle sicher, dass die Ordnerstruktur korrekt ist:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code class=\"\" data-line=\"\">BoxBuilderAddon\/Resources\/icons\/create_box.svg<\/code><\/li>\n\n\n\n<li><code class=\"\" data-line=\"\">BoxBuilderAddon\/Resources\/icons\/box_builder.svg<\/code><\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Starte FreeCAD neu.<\/li>\n\n\n\n<li>W\u00e4hle die \u201eBox Builder\u201c-Arbeitsumgebung aus.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Du solltest Folgendes sehen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ein Symbol neben dem Namen der Arbeitsumgebung (in der Liste)<\/li>\n\n\n\n<li>Ein Symbol auf der Symbolleisten-Schaltfl\u00e4che<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tipps f\u00fcr Symbole<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verwende <strong>Schwarz auf transparentem Hintergrund<\/strong> \u2013 FreeCAD passt es automatisch an das Theme (hell\/dunkel) an.<\/li>\n\n\n\n<li>Die SVG-Gr\u00f6\u00dfe spielt keine Rolle \u2013 Hauptsache, es ist eine Vektorgrafik.<\/li>\n\n\n\n<li>F\u00fcr PNG: transparenter Hintergrund und Gr\u00f6\u00dfe von 64\u00d764 oder 128\u00d7128 verwenden.<\/li>\n\n\n\n<li><strong>Verwende keine Farben<\/strong> \u2013 Symbole in FreeCAD sind \u00fcblicherweise monochrom.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Praktische Aufgabe<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Erstelle das Symbol <code class=\"\" data-line=\"\">box_builder.svg<\/code> (du kannst <code class=\"\" data-line=\"\">create_box.svg<\/code> kopieren).<\/li>\n\n\n\n<li>Suche online nach einem freien SVG-Box-Symbol (z.\u202fB. auf Flaticon oder Material Icons) und passe es an.<\/li>\n\n\n\n<li>Versuche, PNG statt SVG zu verwenden \u2013 achte auf transparenten Hintergrund.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Woher fertige Symbole beziehen?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flaticon<\/strong> \u2197 \u2013 als SVG herunterladen<\/li>\n\n\n\n<li><strong>Material Icons<\/strong> \u2197 \u2013 einfach und \u00fcbersichtlich<\/li>\n\n\n\n<li><strong>Material Design Icons<\/strong> \u2197 \u2013 Hunderte von Symbolen im .svg-Format<\/li>\n\n\n\n<li><strong>Feather Icons<\/strong> \u2197<\/li>\n\n\n\n<li><strong>FreeCAD-Quellen<\/strong> \u2197<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Was kommt als N\u00e4chstes?<\/strong><br>In Lektion 7 werden wir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lernen, wie man ein Addon \u00fcber den offiziellen Addon Manager ver\u00f6ffentlicht<\/li>\n\n\n\n<li>Eine <code class=\"\" data-line=\"\">package.xml<\/code>-Datei erstellen<\/li>\n\n\n\n<li>Ein GitHub-Repository vorbereiten<\/li>\n\n\n\n<li>Es anderen Benutzern erm\u00f6glichen, dein Addon einfach zu installieren<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Lernziel: F\u00fcge Schaltfl\u00e4chen und der Arbeitsumgebung Symbole hinzu, um das Addon professionell aussehen zu lassen.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-3616","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts\/3616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/comments?post=3616"}],"version-history":[{"count":0,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/posts\/3616\/revisions"}],"wp:attachment":[{"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/media?parent=3616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/categories?post=3616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/de.davidka.net\/de\/wp-json\/wp\/v2\/tags?post=3616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}