Show hotspots with colors and shapes in Web Viewer

In Signifikant Manager it is possible to control colors and shapes for hotspots on illustrations. Until version 4.2.2 of Signifikant Web Viewer, these colors and shapes were not visualized in the web viewer. This article describes how to patch earlier versions of Signifikant Web Viewer to be able to show the colors and shapes of hotspots.

Step-by-step guide patching Signifikant Web Viewer 4.2.2 or older

  1. Open the site.css file of your Signifikant Web Viewer installation in an editor (e.g. Notepad++)
    For a default installation this file is located in the following location: C:\inetpub\wwwroot\AssertWeb\Content

  2. Add the following lines at the end of the site.css file

        svg.hotspot-layer .hotspot[data-color-id='1']:hover  { stroke: #20d020; } /* green */
        svg.hotspot-layer .hotspot[data-color-id='1'].selected { stroke: #20d020; }
    
        svg.hotspot-layer .hotspot[data-color-id='2']:hover  { stroke: #f02020; } /* red */
        svg.hotspot-layer .hotspot[data-color-id='2'].selected { stroke: #f02020; }
    
        svg.hotspot-layer .hotspot[data-color-id='3']:hover  { stroke: #d0d020; } /* yellow */
        svg.hotspot-layer .hotspot[data-color-id='3'].selected { stroke: #d0d020; }
    
        svg.hotspot-layer .hotspot[data-color-id='4']:hover  { stroke: #a020f0; } /* purple */
        svg.hotspot-layer .hotspot[data-color-id='4'].selected { stroke: #a020f0; }
    
        svg.hotspot-layer .hotspot[data-color-id='5']:hover  { stroke: #d0d0d0; } /* transparent */
        svg.hotspot-layer .hotspot[data-color-id='5'].selected { stroke: #d0d0d0; }
  3. Save the site.css file

  4. Open the _IllustrationHotSpotLayer.cshtml file in an editor (e.g. Notepad++)
    For a default installation this file is located in the following location: C:\inetpub\wwwroot\AssertWeb\Views\Illustration

  5. Insert the code marked with red in the existing code for the function called GetHotSpotAttributes:

    public string GetHotSpotAttributes(HotSpot hotspot)
      {
        var attributesBuilder = new System.Text.StringBuilder();
           
        attributesBuilder.Append("data-id=").Append(hotspot.Id);
        attributesBuilder.Append(" data-identity=").Append(hotspot.Identity);
        if (hotspot.References.Count == 1)
        {
          attributesBuilder.Append(" data-reference=")
              .Append(ReferenceHelper.Default.GetUrl(hotspot.References.Single(), State.Current));
        }
        if (hotspot.ColorId != 0)
        {
          attributesBuilder.Append(" data-color-id=").Append(hotspot.ColorId);
        }
        //else
        //{
        //    attributesBuilder
        //        .Append(" data-references-url='")
        //        .Append(Url.Action("GetHotSpotReferencesView", "Illustration", new { id = Model.GetId(false), hotspotId = hotspot.Id }, state: State.Current))
        //        .Append("'");
        //}
     
        return attributesBuilder.ToString();
      }
  6. Save the _IllustrationHotSpotLayer.cshtml file

  7. Refresh any illustration you have open in your browser with CTRL-F5