Page Comparison

In Signifikant Manager it is possible to set 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.

...

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

   Code Block

   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

...

Related articles

...