spatialillusions / milsymbol

Military Symbols in JavaScript
www.spatialillusions.com/milsymbol
MIT License
544 stars 133 forks source link

Trying to create a text at the buttom of the symbol #209

Closed YahavTheKing123 closed 5 years ago

YahavTheKing123 commented 5 years ago

Hi Mans,

I am trying to find a way to add a text to the button of the symbol. I saw all the modifiers options in the documentation and the most close to what I need is the speed which is on the left coner, and the iffSif which is on the right corner so they are not good for me,

This is what i am trying to achieve: image

I saw the textfields.js file and tryed to do it by my self but without success... Thanks in advance!

spatialillusions commented 5 years ago

I think the easiest thing would be to create a new symbol function that adds the possibility to add a custom text label, that way you don't need to modify the built in text fields function.

When you have loaded milsymbol, do this:

ms.addSymbolPart(function (ms) {
        var drawArray1 = [];
        var drawArray2 = [];
        var gbbox = new ms.BBox();

        if (!this.options.hasOwnProperty("bottomText")) { return { pre: drawArray1, post: drawArray2, bbox: gbbox }; }

        var str = this.options.bottomText;

        var fontColor =
          (typeof this.style.infoColor === "object"
            ? this.style.infoColor[this.metadata.affiliation]
            : this.style.infoColor) ||
          this.colors.iconColor[this.metadata.affiliation] ||
          this.colors.iconColor["Friend"];
        var fontFamily = this.style.fontfamily;
        var fontSize = this.style.infoSize;

        var strWidth = str.length * (fontSize / 30) * 28.5 / 2;
        var y = this.bbox.y2 + fontSize;
        gbbox.y2 = y;
        gbbox.x1 = 100 - strWidth;
        gbbox.x2 = 100 + strWidth;

        drawArray2.push({
          type: "text",
          text: str,
          x: 100,
          y: y,
          textanchor: "middle",
          fontsize: fontSize,
          fontfamily: fontFamily,
          fill: fontColor,
          stroke: false,
          fontweight: "bold"
        });

        if (this.style.outlineWidth > 0)
          drawArray1.push(
            ms.outline(
              drawArray2,
              this.style.outlineWidth,
              this.style.strokeWidth,
              typeof this.style.outlineColor === "object"
                ? this.style.outlineColor[this.metadata.affiliation]
                : this.style.outlineColor
            )
          );
        return { pre: drawArray1, post: drawArray2, bbox: gbbox };
      })

And now you can set the option bottomText when you create a symbol, like this:

new ms.Symbol("shgp", {
        bottomText: 'some text',
        size: 35
      })

And that will render:

screenshot 2018-10-24 at 18 39 49

Just so you know, if you appreciate milsymbol, this is on my Christmas wish list. 😉https://www.indiegogo.com/projects/e-ink-monitor-with-touch

YahavTheKing123 commented 5 years ago

It worked perffectly. Thanks alot for your support!!