2 Replies Latest reply on Mar 28, 2017 7:14 AM by MarcoB

    Button Bar Customized Icons

    PieroF

      Title

      Button Bar Customized Icons

      Post

      Since I spent some time trying to create new icons for the new Button Bars object in FMP14 let me share my findings; hope this might save some time to other developers.

       

      I find the new button bar feature quite good since it allows to prepare clean sets of buttons in any easy way, but since I didn’t find what I needed among the built-in icon for buttons I decided to build my owns.

       

      First, the vector graphic image in SVG format must be used to prepare a customized icon.

      As my main finding the SVG image must match the following criteria:

      a.    the inner area of each polygon in SVG behaves as a placeholder: it will be filled with the color that will be chosen later for the icons applied to the button

      b.    the outer area of all polygons in the SVG image behaves as if it were transparent; so it will show the button color behind the image

      c.    however the above is true only if no color is defined in the SVG code for the icon. (like fill=“#0F0F0F”) Otherwise these colors are forced to the icon in place of those defined in the button settings

       

      Example of SVG code for a “Pause” button:

      <?xml version="1.0" encoding="UTF-8"?>

      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="22" height="24" viewBox="0, 0, 22, 24">

        <g id="Livello_1">

          <path d="M0,0 L8,0 L8,24 L0,24 L0,0 z" />

          <path d="M14,0 L22,0 L22,24 L14,24 L14,0 z" />

        </g>

      </svg>

       

      In the above example the <path d=“…”/> lines describe the 2 portions of the icon. Note that NO fill=“…” clause is present in the <path> definition.

       

      The procedure I use is the following (but obviously many other ways exist):

      1.    I use iDraw to create the icon as a vector graphics. I decided to make 24x24 pixel documents, that iDraw can easily export as an .SVC. Note that a color is associated by iDraw to the created polygon; in the following example a white color is coded:

          …

          <path d="M0,0 L8,0 L8,24 L0,24 L0,0 z" fill=“#FFFFFF”/>

          <path d="M14,0 L22,0 L22,24 L14,24 L14,0 z" fill=“#FFFFFF”/>

          …

      NB:    If the resulting SVG is imported as is into FMP, its icon will appear always white, whatever color is chosen in the button icon settings.

      2.    To make the icon color customizable by the button icon settings the color must be removed.

      I use TextWrangler (but probably also TextEdit will do) to open SVC as a text and remove all unwanted fill=“…” clauses.

      Now the SVG file is ready for import into FMP.

       

      One more warning: all built-in icons in FMP14 are offered in two versions: standard and outline. The latter has basically the same shape as the standard icon but each polygon is just outlined (not filled up).

      Caution: drawing a polygon with transparent filling does not do what you expect: according to criteria a. above in any case the closed line will be fully colored by FMP… Happily iDraw provides a solution: it has a “profile” tool that transforms a line of any thickness into a polygon, thus allowing to prepare a SVG behaving as expected.

        • 1. Re: Button Bar Customized Icons
          lijnbach

          Hello,

          Thanks for your post, it helped me out by creating customized SVG Icons.

          But I am not an expert in creating SVG icons. I also use iDraw and removed the fill colors. The only problem is, I still have a white background all the time. If I also remove the background fill color, I just get one colored square. Could you help me out with this issue?

          Thanks in advance for your time and effort.

          Hans Lijnbach

           

          • 2. Re: Button Bar Customized Icons
            MarcoB

            I did what you told and it almost work. My problems is that the icon has no color and I can't see it in the selection box. It is there, but doesn't show up.

            I used Sketch to make my SVG. Here is an example:

             

            Here is how Sketch created it:

            <?xml version="1.0" encoding="UTF-8"?>

            <svg width="226px" height="458px" viewBox="0 0 226 458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

                <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->

                <title>se2 copy</title>

                <desc>Created with Sketch.</desc>

                <defs></defs>

                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

                    <g id="dir" transform="translate(-194.000000, 0.000000)" fill="#0F0F0F">

                        <g id="se2-copy" transform="translate(307.000000, 229.000000) scale(-1, 1) translate(-307.000000, -229.000000) translate(194.000000, 0.000000)">

                            <rect id="Rectangle" transform="translate(113.000000, 137.500000) rotate(35.000000) translate(-113.000000, -137.500000) " x="73" y="-2" width="80" height="279"></rect>

                            <rect id="Rectangle-Copy" transform="translate(112.779995, 320.214768) scale(-1, 1) rotate(35.000000) translate(-112.779995, -320.214768) " x="72.7799946" y="180.714768" width="80" height="279"></rect>

                        </g>

                    </g>

                </g>

            </svg>

             

            Here is how I changed with TextWrangler to delete the fill:

             

            <?xml version="1.0" encoding="UTF-8"?>

            <svg width="226px" height="458px" viewBox="0 0 226 458" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

                <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->

                <title>se2 copy</title>

                <desc>Created with Sketch.</desc>

                <defs></defs>

                <g id="Page-1" stroke="none" stroke-width="1">

                    <g id="dir" transform="translate(-194.000000, 0.000000)">

                        <g id="se2-copy" transform="translate(307.000000, 229.000000) scale(-1, 1) translate(-307.000000, -229.000000) translate(194.000000, 0.000000)">

                            <rect id="Rectangle" transform="translate(113.000000, 137.500000) rotate(35.000000) translate(-113.000000, -137.500000) " x="73" y="-2" width="80" height="279"></rect>

                            <rect id="Rectangle-Copy" transform="translate(112.779995, 320.214768) scale(-1, 1) rotate(35.000000) translate(-112.779995, -320.214768) " x="72.7799946" y="180.714768" width="80" height="279"></rect>

                        </g>

                    </g>

                </g>

            </svg>

             

            It only doesn't show the icon in the selection box, after I select the icon, it shows OK in the bar. I even can change the color of the icon and it works well.