Add padding around text in rectangles

Visualization 🇬🇧
carohe
2022-11-25
2022-12-16

  • carohe - 2022-11-25

    Hi,

    I am currently working on a visualization project in CODESYS 3.5.18.30. Is there a way to set a padding in a rectangle, so when the text's horizontal alignment is set to "left", the text doesn't start at the left edge of the rectangle but a specific amount of points right of the edge?

    Regards,
    carohe

     
    Thumbnail
    Padding.png

    • j-zauner - 2022-11-29

      Hi together,

      I was missing some information.

      The padding-Feature will only work if:

      • the element has "Text properties" "Horizontal alignment" and "Vertical alignment"
      • Horizontal Text alignment is not centered or
      • Vertical Text alignment is not centered

      It could work for each element if you place the additional styles under it, but I'm not sure about this.
      If you use it like in the attached style, then it will be applied to all elements I guess.

       
      👍
      1

      Last edit: j-zauner 2022-11-29
      styledef.visustyle.xml

      • carohe - 2022-11-29

        Hi Julian,

        thank you very much, this works, but it only works on the side of the alignment. So there is no way to have it on both sides?

        Regards,
        carohe

         

        Last edit: carohe 2022-11-29
        Thumbnail
        Alignment.png

        • j-zauner - 2022-11-29

          Hi carohe,

          I'm glad it helped you.

          Currently there is no other way with these style entries.
          As a workaround you could put 2 rectangles into a group and the inner rectangle contains the text and the alignment and is a bit smaller than the outer one. Then the line break would occur not exactly on the right edge.

          I will create an improvement in our system for this.

          And I found some more documentation regarding this topic: https://content.helpme-codesys.com/en/CODESYS%20Visualization/_visu_aligning_text_with_spacing_to_the_element_frame.html

          Regards,
          Julian

           

          • carohe - 2022-11-30

            Hi Julian,

            thank you for creating the improvement.
            Your suggestion with the workaround sounds good, but I also wanted to use the padding in a table. So I won't be able to use the workaround there. But on the rectangles I will use your workaround.

            Thank you again for your help!

            Regards,
            carohe

             

  • j-zauner - 2022-11-28

    Hi carohe,

    The only possibility to do this, is to create your own style with the following entries:

    <AdditionalStyles>
<Value type="dint" name="Text-Margin-Horizontal">2</Value>
<Value type="dint" name="Text-Margin-Vertical">2</Value>
</AdditionalStyles>

    Regards,
    Julian

     

    • carohe - 2022-11-28

      Hi Julian,

      thank you very much for you answer! Do you mean edit the style in the style editor of the visualization manager?
      Do you have a manual or tutorial how to edit styles? I have already tried to edit something there but I do not know how to work with the style editor, so a manual or tutorial would be very helpful.

      Regards,
      carohe

       

      • j-zauner - 2022-11-28

        Hi,

        Yes, you can use the style editor (Copy derived style) or edit the XML file directly and reinstall it into the repository (Tools-> Visu Style Repository).

        More information is here: https://content.helpme-codesys.com/en/CODESYS%20Visualization/_visu_edit_style_in_the_style_editor.html

        And I forgot, for the style entries to work, you'll need the Visualization Addon in version 4.2.0.0 or higher.

        Regards,
        Julian

         

        • carohe - 2022-11-28

          Hi Julian,

          thank you very much, I will try it!

          Regards,
          carohe

           

        • carohe - 2022-11-29

          Hi Julian,

          I have tried what you wrote, but it does not change anything. I am using the Visualization Version 4.2.0.0. I also do not understand how a textfield or rectangle would know where to use this entry.

          Regards,
          carohe

           
          Thumbnail
          Styleeditor.png

    • surikan - 2022-12-15

      Hi j-zauner,
      Do you know if there is manual describing the style names and value limits for each visual component?

       

      • j-zauner - 2022-12-16

        Hi surikan,

        Currently, there is not much information about the style entries available.
        But we're working on creating a documentation for this. I don't know of an exact date but I could imagine that it will be online in the next few months.

         
        👍
        3

        • surikan - 2022-12-16

          Thanks for the update! Glad to hear there will be a manual!
          In the mean time could you please describe how to set the Scroll bar default width please? (The one that appears when "Scroll elements with scrollbar" option is enabled)

           

          • j-zauner - 2022-12-16

            Hi,

            you're welcome :)

            I can ask a collegue on monday, because I couldn't find anything for this in the code. Normally, the width depends on the element's scrollbar settings or it is a fixed default width. The Table element for example contains a property "Scroll bar size".

            Regards
            Julian

             

  • ignat - 2022-11-29

    Hi, I've never tried it, so only suggestion:

    • maybe you could try to add the entry inside the 'Element' or e.g. 'TextField'.
      So the full path will be like TextField -> Text -> Margin - Horizontal.
     

    • carohe - 2022-11-29

      Hi,
      thank you very much! I have tried several options, but nothing worked. I feel like I am missing the information how to link the entry in the style editor with the actual element. I am trying to understand how the style editor works and how these elements are linked but I haven't understood it yet.

      Regards,
      carohe

       

Log in to post a comment.