IC5Notice: We have upgraded developerWorks Community to the latest version of IBM Connections. For more information, read our upgrade FAQ.
Topic
  • 13 replies
  • Latest Post - ‏2013-07-25T05:23:11Z by wxyzabc
devil786
devil786
126 Posts

Pinned topic Adding Smileys to the service status icon's

‏2011-06-16T11:33:12Z |
Hi,
I have downloaded a document from IBM Developer's site in which i saw service status (as shown in the attached image). Do any body knows how it can be done, i am so much interested in doing it.

with regards,
Updated on 2013-02-14T10:59:53Z at 2013-02-14T10:59:53Z by SystemAdmin
  • devil786
    devil786
    126 Posts

    Re: Adding Smileys to the service status icon's

    ‏2011-07-12T11:07:24Z  
    I have tried to add some smileys but it the icons changes for all i.e. State,Time and Events, I want to change/add smileys for the State field only, Please check the attachment, if anybody knows please guide.
  • dmcclure
    dmcclure
    54 Posts

    Re: Adding Smileys to the service status icon's

    ‏2011-07-13T19:11:05Z  
    • devil786
    • ‏2011-07-12T11:07:24Z
    I have tried to add some smileys but it the icons changes for all i.e. State,Time and Events, I want to change/add smileys for the State field only, Please check the attachment, if anybody knows please guide.
    Did you customize the policy code so it only changes the specific column name desired (State)?

    Doug
  • devil786
    devil786
    126 Posts

    Re: Adding Smileys to the service status icon's

    ‏2011-07-18T08:46:07Z  
    • dmcclure
    • ‏2011-07-13T19:11:05Z
    Did you customize the policy code so it only changes the specific column name desired (State)?

    Doug
    Hi Doug,
    Thanks for the reply , Sorry but i don,t know how to customize the policy code to only change specific column state.
  • SystemAdmin
    SystemAdmin
    172 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-02-14T10:59:53Z  
    • devil786
    • ‏2011-07-18T08:46:07Z
    Hi Doug,
    Thanks for the reply , Sorry but i don,t know how to customize the policy code to only change specific column state.
    Hello,

    Were you successful in adding smileys for service status icons.

    I am also interested in doing same, kindly provide steps to do it.

    Regards,
    Avinash
  • wxyzabc
    wxyzabc
    29 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-17T11:43:57Z  
    Hello,

    Were you successful in adding smileys for service status icons.

    I am also interested in doing same, kindly provide steps to do it.

    Regards,
    Avinash

    Hi devil1786,

    Can you please provide the steps how to add smilies in service tree,as you are showing here in your post.

    Thanks in advance.

    Regards

    wxyzabc

     

  • randybrown
    randybrown
    59 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-19T12:27:32Z  
    • wxyzabc
    • ‏2013-07-17T11:43:57Z

    Hi devil1786,

    Can you please provide the steps how to add smilies in service tree,as you are showing here in your post.

    Thanks in advance.

    Regards

    wxyzabc

     

    Hi,

    As mentioned in one of the earlier posts, this can be accomplished by editing a policy in TBSM that affects the display of the columns in the service tree. You edit this policy from the Tree Template Editor, which is available from the Services view of the TBSM Service Navigation portlet on the System Configuration page. The attachment illustrates how to navigate to the Edit Policy button that will open the policy editor.

    Code like the following can then be added to the bottom of the policy (note that this example assumes you have TBSM 6.1 or later, though a very similar technique would work for earlier versions).

    if (columnName like '.*State.*')
     {
        if (rawValue < 3) {
          VALUE = "<img src=/ibm/sla/images/EmoticonHappy.gif name=good>";
        }
        if (rawValue < 5 && rawValue >=3 ) {
          VALUE = "<img src=/ibm/sla/images/EmoticonSad.gif name=marginal>";
        }
        if (rawValue = 5) {
          VALUE = "<img src=/ibm/sla/images/EmoticonCrying.gif name=bad>";
        }
    }

    The red highlighted "if" statement is where you decide what column to affect. In this case, any column including the string "State" would be affected, so the standard TBSM State column will show the new images. Normally this "if" would specify a specific column or columns created by the user in a tree template that are to be displayed with special html, like an alternate image.

    Also note that in this example I copied the Emoticon*.gif files to TBSM_DASHBOARD_SERVER_HOME/images. This allowed me to access the images using the URI "/ibm/sla/images" since the images are placed relative to the TBSM root context for WebSphere. That was just a convenience and you should be able to pull images from other locations using a valid <img> tag.

    I hope this helps...

     

    Randy Brown

    Attachments

  • wxyzabc
    wxyzabc
    29 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-19T14:30:02Z  

    Hi,

    As mentioned in one of the earlier posts, this can be accomplished by editing a policy in TBSM that affects the display of the columns in the service tree. You edit this policy from the Tree Template Editor, which is available from the Services view of the TBSM Service Navigation portlet on the System Configuration page. The attachment illustrates how to navigate to the Edit Policy button that will open the policy editor.

    Code like the following can then be added to the bottom of the policy (note that this example assumes you have TBSM 6.1 or later, though a very similar technique would work for earlier versions).

    if (columnName like '.*State.*')
     {
        if (rawValue < 3) {
          VALUE = "<img src=/ibm/sla/images/EmoticonHappy.gif name=good>";
        }
        if (rawValue < 5 && rawValue >=3 ) {
          VALUE = "<img src=/ibm/sla/images/EmoticonSad.gif name=marginal>";
        }
        if (rawValue = 5) {
          VALUE = "<img src=/ibm/sla/images/EmoticonCrying.gif name=bad>";
        }
    }

    The red highlighted "if" statement is where you decide what column to affect. In this case, any column including the string "State" would be affected, so the standard TBSM State column will show the new images. Normally this "if" would specify a specific column or columns created by the user in a tree template that are to be displayed with special html, like an alternate image.

    Also note that in this example I copied the Emoticon*.gif files to TBSM_DASHBOARD_SERVER_HOME/images. This allowed me to access the images using the URI "/ibm/sla/images" since the images are placed relative to the TBSM root context for WebSphere. That was just a convenience and you should be able to pull images from other locations using a valid <img> tag.

    I hope this helps...

     

    Randy Brown

    Hi Randy,

    Thank you so much for your reply its really awesome.

    I want to create a custom canvas using these smilies but not getting how to map these similies in canvas.

    Please help.

     

    Regards

    wxyzabc

    Updated on 2013-07-19T14:30:17Z at 2013-07-19T14:30:17Z by wxyzabc
  • randybrown
    randybrown
    59 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-19T19:20:58Z  
    • wxyzabc
    • ‏2013-07-19T14:30:02Z

    Hi Randy,

    Thank you so much for your reply its really awesome.

    I want to create a custom canvas using these smilies but not getting how to map these similies in canvas.

    Please help.

     

    Regards

    wxyzabc

    Hi,

    Can you explain a little more about how you want to use the custom images (smilies in this case) in the custom canvas?

    The custom canvas indicators, widgets, and gauges that are standard with TBSM incorporate the status color into the control that is displayed, so I am not sure these can be modified.

    On the Decoration tab, there is support for an SVG image to be shown for a service. You can choose instead to show the state, but TBSM ships standard images for each state.

    So please provide a description of what it is you want to see in the custom canvas and perhaps we can come up with an idea.

    Thanks...

     

    Randy Brown

  • wxyzabc
    wxyzabc
    29 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-23T12:12:24Z  

    Hi,

    Can you explain a little more about how you want to use the custom images (smilies in this case) in the custom canvas?

    The custom canvas indicators, widgets, and gauges that are standard with TBSM incorporate the status color into the control that is displayed, so I am not sure these can be modified.

    On the Decoration tab, there is support for an SVG image to be shown for a service. You can choose instead to show the state, but TBSM ships standard images for each state.

    So please provide a description of what it is you want to see in the custom canvas and perhaps we can come up with an idea.

    Thanks...

     

    Randy Brown

    Hi Randy,

    Thanks for your reply.
    Using that decoration tab in custom canvas ,I succcessfully uploaded a jpg image(smple image uploaded here)as a background image that showing the existing services in TBSM.
    Now I want to show the state change of that services as similies as you showed in service tree.But not getting where to upload that similies and where to write policy for the same.
    Also want to show google map for the location information of the services.

    Is there any way to do all these.
    Please help.

    Regards
    wxyzabc

    Attachments

  • sdiering
    sdiering
    16 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-23T12:38:18Z  
    This reply was deleted by wxyzabc 2013-07-25T05:24:00Z. Reason for deletion: deduplication
    1. Google maps are not supported
    2. getting images to change dynamically on the custom canvas is not done via a policy, but rather through writing custom CSS.

    if you are serious about using smileys on the custom canvas, then you must create SVG versions of them.  i will provide instructions about how to use those SVG images and custom CSS to make them work when i return from vacation at the end of this week

    steve

  • wxyzabc
    wxyzabc
    29 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-23T12:49:20Z  
    • sdiering
    • ‏2013-07-23T12:38:18Z
    1. Google maps are not supported
    2. getting images to change dynamically on the custom canvas is not done via a policy, but rather through writing custom CSS.

    if you are serious about using smileys on the custom canvas, then you must create SVG versions of them.  i will provide instructions about how to use those SVG images and custom CSS to make them work when i return from vacation at the end of this week

    steve

    Hi Steve,

    Thanks for your early response.

    I tried with the SVG images but still not able to map them properly, yes but I am very much interested to show the similies.

    Also,instead of Google maps is it possible to show  the location information of services on any map image using longitude and altitude.

    Regards

    wxyzabc

  • sdiering
    sdiering
    16 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-23T20:24:06Z  
    • wxyzabc
    • ‏2013-07-23T12:49:20Z

    Hi Steve,

    Thanks for your early response.

    I tried with the SVG images but still not able to map them properly, yes but I am very much interested to show the similies.

    Also,instead of Google maps is it possible to show  the location information of services on any map image using longitude and altitude.

    Regards

    wxyzabc

    i posted a new document ("Working with Custom Canvases") on the TBSM Advanced Topics page that describes how you can extend the SVG Image widget.  You can follow its steps to get smileys displayed on a custom canvas.

    check out the Customization Guide's Custom Maps section for information on positioning services via their location

    steve

  • wxyzabc
    wxyzabc
    29 Posts

    Re: Adding Smileys to the service status icon's

    ‏2013-07-25T05:23:11Z  
    • sdiering
    • ‏2013-07-23T20:24:06Z

    i posted a new document ("Working with Custom Canvases") on the TBSM Advanced Topics page that describes how you can extend the SVG Image widget.  You can follow its steps to get smileys displayed on a custom canvas.

    check out the Customization Guide's Custom Maps section for information on positioning services via their location

    steve

    Hi Steve,

    Thanks for your post, its really helpful.

    Can we also use other version of images,like jpg or png etc? As I want 3D similies to show on the canvas but not getting the SVG version of the same.

    Please help.

    Regards

    wxyzabc