5 Replies Latest reply on Aug 30, 2018 3:45 PM by kbobeck

    [Vision] How could I change text color by multistate?




      I'd like to change text color by multistate feature instead of background color


      I have found a thread about customizing Coresight(How to customize the appearance of PI Coresight 2016 )

      , which speaks how to edit script to change text color.

      I tried to apply to Vision server but, can't.

      I think this method doesn't work on PI Vision 2017 R2 (not sure)


      How could I change text color by multistate?(statifc text symbol)


      Thank you

        • Re: [Vision] How could I change text color by multistate?



          The method explained by Kenji is in fact applied to 'Value' Symbol.

          If you wish to change the similar on 'Static text' symbol, you need to open below file instead (in case of 2017 version):



          !! Please note that this change may get overwritten if PI Vision server is updated and OSIsoft do not guarantee the customer-changed base code !!

          Please note the 'background' and 'color:' sections;  changed from original configuration. It is recommended to make a backup before you change.


          <div style="width: 100%; height: 100%; padding-top:5px;">
              <div class="static-text-symbol"
                  style="white-space: nowrap; text-align: left; overflow: visible;"
                  ng-style="{background: (config.Fill), 'font-size': fontSize}"
                  ng-class="{blink: MSBlink}"
                  <span class="text-symbol-sizing-line"
                      ng-class="{link: config.LinkURL}"
                      style="font-family: Arial, Helvetica, sans-serif; display: inline-block;"
                      ng-style="{color: MSColor || config.Stroke, cursor: config.LinkURL && !layoutMode ? 'pointer' : 'inherit' }"


          Hope this helps,


          1 of 1 people found this helpful
          • Re: [Vision] How could I change text color by multistate?

            Hi there,


            Just in case you want to also apply it to the Value symbol, I've modified Kenji's Coresight script to work for PI Vision 2017/2017 R2. I've highlighted the areas I've changed (either adding or removing Fill ||) below. If you only want the actual Value to change colors based on your multi-state settings, modify the two {background:...} instances as well as the {color:...} portion for ShowValue and Show UOM (in red) but not ShowTime or ShowLabel (in orange).


            <div style="overflow:hidden; margin-right:-2px;" ng-style="{background:(config.Fill), height:position.height}" title="{{tooltip}}">

                <div class="value-symbol-portion-text" style="white-space: nowrap; overflow: hidden;"

                     ng-style="{background: (config.Fill), cursor: (isLink && !layoutMode) ? 'pointer' : 'inherit', 'text-align': config.TextAlignment}"

                     ng-class="{'blink': Blink, 'value-symbol-hyperlink' : isLink }"


                    <div class="text-symbol-sizing-line" style="display:table-row" ng-show="config.ShowLabel">

                        <span style="margin-right:2px" ng-style="{color:Fill ||config.Stroke}"></span>


                    <div class="text-symbol-sizing-line" style="display:table-row;" ng-show="config.ShowValue">

                        <span ng-style="{color:Fill ||config.ValueStroke}" style="margin-right:2px"></span><span style="font-size:smaller;margin-left:-1px;margin-right:2px;" ng-style="{color:Fill ||config.Stroke}" ng-show="config.ShowUOM"></span>


                    <div class="text-symbol-sizing-line" style="display:table-row" ng-show="config.ShowTime">

                        <span ng-style="{color:Fill ||config.Stroke}" style="margin-right:2px"></span>




            Hope this helps!


            2 of 2 people found this helpful