{"id":3622,"date":"2025-10-03T22:34:13","date_gmt":"2025-10-03T20:34:13","guid":{"rendered":"https:\/\/ru.davidka.net\/ru\/?p=3622"},"modified":"2025-10-04T01:33:47","modified_gmt":"2025-10-03T23:33:47","slug":"lezione-6-icone-e-aspetto-visivo","status":"publish","type":"post","link":"https:\/\/it.davidka.net\/it\/lezione-6-icone-e-aspetto-visivo\/","title":{"rendered":"Lezione 6. Icone e aspetto visivo"},"content":{"rendered":"\n<p class=\"has-medium-font-size wp-block-paragraph\"><em>\ud83d\udcd8 Corso di formazione: Creazione di addon per FreeCAD<\/em><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Obiettivo della lezione<\/strong>: aggiungere icone ai pulsanti e all&#8217;ambiente di lavoro per rendere l&#8217;addon professionale.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div id=\"rtoc-mokuji-wrapper\" class=\"rtoc-mokuji-content frame2 preset1 animation-fade rtoc_open default\" data-id=\"3622\" data-theme=\"Neve - Davidka\">\n\t\t\t<div id=\"rtoc-mokuji-title\" class=\"rtoc_btn_none rtoc_left\">\n\t\t\t\n\t\t\t<span>In Questo Articolo<\/span>\n\t\t\t<\/div><ol class=\"rtoc-mokuji decimal_ol level-1\"><li class=\"rtoc-item\"><a href=\"#rtoc-1\">\ud83d\uddbc Parte 1. Formati di icone supportati<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-2\">\ud83d\udcc1 Parte 2. Struttura della cartella delle icone<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-3\">\ud83c\udfa8 Parte 3. Dove trovare le icone?<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-4\">Opzione 1: Usa le icone integrate di FreeCAD<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-5\">Opzione 2: Crea un&#8217;icona semplice manualmente<\/a><ul class=\"rtoc-mokuji mokuji_none level-3\"><li class=\"rtoc-item\"><a href=\"#rtoc-6\">Esempio: <code class=\"\" data-line=\"\">create_box.svg<\/code><\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-7\">\ud83d\udee0 Parte 4. Collegamento delle icone nel codice<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-8\">Passaggio 1. Aggiorna <code class=\"\" data-line=\"\">box_builder_workbench.py<\/code><\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-9\">Passaggio 2. Aggiungi un&#8217;icona per l&#8217;ambiente di lavoro<\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-10\">\ud83e\uddea Passaggio 5. Verifica del funzionamento<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-11\">\ud83d\udca1 Consigli sulle icone<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-12\">\ud83e\uddea Esercizio pratico<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-13\">\ud83c\udf10 Dove trovare icone pronte?<\/a><\/li><li class=\"rtoc-item\"><a href=\"#rtoc-14\">\u25b6\ufe0f Cosa c&#8217;\u00e8 dopo?<\/a><\/li><\/ol><\/div><h2 id=\"rtoc-1\"  class=\"wp-block-heading\">\ud83d\uddbc Parte 1. Formati di icone supportati<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">FreeCAD supporta:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>SVG<\/strong> (consigliato) \u2014 scalabile senza perdite<\/li>\n\n\n\n<li><strong>PNG<\/strong> \u2014 raster, ma facile da usare<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Le icone devono essere <strong>semplici<\/strong>, <strong>contrastanti<\/strong> e <strong>riconoscibili<\/strong> anche in piccole dimensioni (16\u00d716 o 24\u00d724 pixel).<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-2\"  class=\"wp-block-heading\">\ud83d\udcc1 Parte 2. Struttura della cartella delle icone<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una sottocartella all&#8217;interno della cartella dell&#8217;addon:<\/p>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">BoxBuilderAddon\/\n\u251c\u2500\u2500 Resources\/\n\u2502   \u2514\u2500\u2500 icons\/\n\u2502       \u251c\u2500\u2500 box_builder.svg   \u2190 icona dell&#039;ambiente di lavoro\n\u2502       \u2514\u2500\u2500 create_box.svg    \u2190 icona del comando\n\u251c\u2500\u2500 InitGui.py\n\u2514\u2500\u2500 box_builder_workbench.py<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Il percorso <code class=\"\" data-line=\"\">Resources\/icons\/<\/code> \u00e8 una <strong>convenzione standard<\/strong> nell&#8217;ecosistema FreeCAD.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-3\"  class=\"wp-block-heading\">\ud83c\udfa8 Parte 3. Dove trovare le icone?<\/h2>\n\n\n\n<h3 id=\"rtoc-4\"  class=\"wp-block-heading\">Opzione 1: Usa le icone integrate di FreeCAD<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">FreeCAD viene fornito con centinaia di icone. Ad esempio:<\/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\">Ma \u00e8 meglio crearne di proprie \u2014 per non dipendere dai percorsi interni.<\/p>\n\n\n\n<h3 id=\"rtoc-5\"  class=\"wp-block-heading\">Opzione 2: Crea un&#8217;icona semplice manualmente<\/h3>\n\n\n\n<h4 id=\"rtoc-6\"  class=\"wp-block-heading\">Esempio: <code class=\"\" data-line=\"\">create_box.svg<\/code><\/h4>\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\">Salva questo codice nel file <code class=\"\" data-line=\"\">create_box.svg<\/code> all&#8217;interno di <code class=\"\" data-line=\"\">Resources\/icons\/<\/code>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Puoi aprire l&#8217;SVG nel browser per vedere il risultato.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-7\"  class=\"wp-block-heading\">\ud83d\udee0 Parte 4. Collegamento delle icone nel codice<\/h2>\n\n\n\n<h3 id=\"rtoc-8\"  class=\"wp-block-heading\">Passaggio 1. Aggiorna <code class=\"\" data-line=\"\">box_builder_workbench.py<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aggiungi all&#8217;inizio del file (dopo gli import):<\/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\">Quindi trova la classe <code class=\"\" data-line=\"\">BoxBuilderCommand<\/code> e aggiorna il metodo <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        # Percorso dell&#039;icona\n        icon_path = os.path.join(\n            os.path.dirname(__file__),\n            &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 collega l&#039;icona\n        }\n    # ... il resto senza modifiche<\/code><\/pre>\n\n\n\n<h3 id=\"rtoc-9\"  class=\"wp-block-heading\">Passaggio 2. Aggiungi un&#8217;icona per l&#8217;ambiente di lavoro<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nella classe <code class=\"\" data-line=\"\">BoxBuilderWorkbench<\/code> aggiungi la propriet\u00e0 <code class=\"\" data-line=\"\">Icon<\/code>:<\/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    # Percorso dell&#039;icona dell&#039;ambiente di lavoro\n    def __init__(self):\n        self.Icon = os.path.join(\n            os.path.dirname(__file__),\n            &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<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">\u26a0\ufe0f Se non hai creato <code class=\"\" data-line=\"\">box_builder.svg<\/code> \u2014 copia semplicemente <code class=\"\" data-line=\"\">create_box.svg<\/code> e rinominalo.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-10\"  class=\"wp-block-heading\">\ud83e\uddea Passaggio 5. Verifica del funzionamento<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Assicurati che la struttura delle cartelle sia corretta:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code line-numbers\"><code class=\" language-python\" data-line=\"\">   BoxBuilderAddon\/Resources\/icons\/create_box.svg\n   BoxBuilderAddon\/Resources\/icons\/box_builder.svg<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Riavvia FreeCAD<\/li>\n\n\n\n<li>Seleziona l&#8217;ambiente di lavoro <strong>Box Builder<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Dovresti vedere:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un&#8217;icona accanto al nome dell&#8217;ambiente di lavoro (nell&#8217;elenco)<\/li>\n\n\n\n<li>Un&#8217;icona sul pulsante della barra degli strumenti<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-11\"  class=\"wp-block-heading\">\ud83d\udca1 Consigli sulle icone<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Usa il <strong>nero su sfondo trasparente<\/strong> \u2014 FreeCAD si adatter\u00e0 automaticamente al tema (chiaro\/scuro)<\/li>\n\n\n\n<li>La dimensione dell&#8217;SVG non \u00e8 importante \u2014 l&#8217;importante \u00e8 che sia <strong>vettoriale<\/strong><\/li>\n\n\n\n<li>Per il PNG usa uno <strong>sfondo trasparente<\/strong> e una dimensione di <strong>64\u00d764<\/strong> o <strong>128\u00d7128<\/strong><\/li>\n\n\n\n<li>Non usare colori \u2014 le icone in FreeCAD sono solitamente monocromatiche<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-12\"  class=\"wp-block-heading\">\ud83e\uddea Esercizio pratico<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Crea l&#8217;icona <code class=\"\" data-line=\"\">box_builder.svg<\/code> (puoi copiare <code class=\"\" data-line=\"\">create_box.svg<\/code>)<\/li>\n\n\n\n<li>Trova su internet un&#8217;<strong>icona SVG gratuita di una scatola<\/strong> (ad esempio, su <a href=\"https:\/\/flaticon.com\">Flaticon<\/a> o <a href=\"https:\/\/fonts.google.com\/icons\">Material Icons<\/a>) e adattala<\/li>\n\n\n\n<li>Prova a usare il <strong>PNG<\/strong> invece dell&#8217;SVG \u2014 assicurati che lo sfondo sia trasparente<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-13\"  class=\"wp-block-heading\">\ud83c\udf10 Dove trovare icone pronte?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fonts.google.com\/icons\">Material Design Icons<\/a> \u2192 scarica come SVG<\/li>\n\n\n\n<li><a href=\"https:\/\/feathericons.com\/\">Feather Icons<\/a> \u2192 semplici e pulite<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/FreeCAD\/FreeCAD\/tree\/main\/src\/Gui\/Icons\">Codice sorgente di FreeCAD<\/a> \u2192 centinaia di icone in formato <code class=\"\" data-line=\"\">.svg<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 id=\"rtoc-14\"  class=\"wp-block-heading\">\u25b6\ufe0f Cosa c&#8217;\u00e8 dopo?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nella <strong>Lezione 7<\/strong> impareremo a:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pubblicare l&#8217;addon<\/strong> tramite l&#8217;Addon Manager ufficiale<\/li>\n\n\n\n<li>Creare il file <code class=\"\" data-line=\"\">package.xml<\/code><\/li>\n\n\n\n<li>Preparare il repository su GitHub<\/li>\n\n\n\n<li>Fare in modo che altri utenti possano installare facilmente il tuo addon<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcd8 Corso di formazione: Creazione di addon per FreeCAD Obiettivo della lezione: aggiungere icone ai pulsanti e all&#8217;ambiente di lavoro per rendere l&#8217;addon professionale. In Questo Articolo \ud83d\uddbc Parte 1. Formati di icone supportati \ud83d\udcc1 Parte 2. Struttura della cartella delle icone \ud83c\udfa8 Parte 3. Dove trovare le icone? Opzione 1: Usa le icone integrate&hellip;&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"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":[948],"tags":[],"class_list":["post-3622","post","type-post","status-publish","format-standard","hentry","category-creazione-di-addon-per-freecad"],"acf":[],"_links":{"self":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts\/3622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/comments?post=3622"}],"version-history":[{"count":0,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/posts\/3622\/revisions"}],"wp:attachment":[{"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/media?parent=3622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/categories?post=3622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/it.davidka.net\/it\/wp-json\/wp\/v2\/tags?post=3622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}