Use inline css styles for SVG
- read css from file
- insert <style/> as second position of <svg/>
Issue-Id: OAM-257
Change-Id: I8655f7ee5f77664dfb2d468a3502f3eaf265de99
Signed-off-by: demx8as6 <martin.skorupski@highstreet-technologies.com>
diff --git a/code/network-topology-instance-generator/view/network_viewer.py b/code/network-topology-instance-generator/view/network_viewer.py
index dc6037a..f68ee48 100644
--- a/code/network-topology-instance-generator/view/network_viewer.py
+++ b/code/network-topology-instance-generator/view/network_viewer.py
@@ -17,7 +17,6 @@
Provides functions to convert the Network into different formats
"""
-import encodings
import json
from lxml import etree
from model.python.tapi_common_context import TapiCommonContext
@@ -72,6 +71,15 @@
)
print("File '" + filename + "' saved!")
+ def readStylesFromFile(self) -> str:
+ """
+ Method reading the css styles from known file
+ return: content of the file as string
+ """
+ with open('view/svg.style.css') as styles:
+ content = styles.read()
+ return content
+
def svg(self, filename: str):
"""
Method saving the class content to a file in xml/svg format.
@@ -80,10 +88,14 @@
:type filename: string
"""
root = self.__network.svg(0, 0)
- root.addprevious(
- etree.ProcessingInstruction("xml-stylesheet",
- 'href="svg.style.css" type="text/css"')
- )
+ # not preferred see OAM-257
+ # root.addprevious(
+ # etree.ProcessingInstruction("xml-stylesheet",
+ # 'href="svg.style.css" type="text/css"')
+ # )
+ style = etree.Element("style")
+ style.text = self.readStylesFromFile()
+ root.getchildren()[0].addnext(style)
etree.ElementTree(root).write(filename,
encoding="utf-8",
xml_declaration=True,
diff --git a/code/network-topology-instance-generator/view/svg.style.css b/code/network-topology-instance-generator/view/svg.style.css
new file mode 100644
index 0000000..679ee5e
--- /dev/null
+++ b/code/network-topology-instance-generator/view/svg.style.css
@@ -0,0 +1,221 @@
+circle {
+ fill: red;
+ stroke: blue;
+ stroke-width: 2;
+}
+
+circle.dot {
+ fill: rgb(165, 163, 164);
+ stroke: blue;
+ stroke-width: 0;
+}
+
+ellipse {
+ fill: red;
+ stroke: blue;
+ stroke-width: 2;
+}
+
+ellipse.TapiConnectionEdgePoint {
+ fill: #dddddd;
+ stroke: #444444;
+ stroke-width: 1;
+}
+
+g.TapiConnectionEdgePoint>text {
+ fill: #444444;
+}
+
+g.TapiNodeFronthaulGateway>text {
+ fill: #444444;
+}
+
+g.node:hover>rect {
+ fill: #44aa44;
+ fill-opacity: .75;
+ stroke: #008800;
+ stroke-width: 4;
+}
+
+g.TapiNodeEdgePoint:hover>rect {
+ fill: #44aa44;
+ fill-opacity: .75;
+ stroke: #008800;
+ stroke-width: 4;
+}
+
+g.node:hover>text {
+ fill: #ffff88;
+ font-weight: bold;
+ cursor: default;
+}
+
+g.TapiNodeEdgePoint:hover>text {
+ fill: #ffff88;
+ font-weight: bold;
+ cursor: default;
+}
+
+g.TapiConnectionEdgePoint:hover>ellipse {
+ fill: #44aa44;
+ fill-opacity: .75;
+ stroke: #008800;
+ stroke-width: 4;
+}
+
+g.TapiConnectionEdgePoint:hover>text {
+ fill: #ffff88;
+ font-weight: bold;
+ cursor: default;
+}
+
+
+/* 3GPP defined interface links */
+
+g.e1>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 1;
+}
+
+g.f1>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 1;
+}
+
+g.n1>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 1;
+}
+
+g.n2>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 1;
+}
+
+g.n3>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 1;
+}
+
+g.uu>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 1;
+}
+
+g.link:hover>path {
+ fill: none;
+ stroke: #008800;
+ stroke-width: 6;
+}
+
+rect {
+ fill: red;
+ stroke: blue;
+ stroke-width: 2;
+}
+
+rect.node {
+ fill: lightcoral;
+ fill-opacity: .75;
+ stroke: darkred;
+}
+
+rect.TapiNodeEdgePoint {
+ fill: #888888;
+ stroke: #444444;
+ stroke-width: 1;
+}
+
+rect.smo {
+ fill: gold;
+ stroke: goldenrod;
+}
+
+rect.o2-controller {
+ fill: greenyellow;
+ stroke: green;
+}
+
+rect.o-cloud {
+ fill: greenyellow;
+ stroke: green;
+}
+
+rect.amf {
+ fill: green;
+ stroke: lightgreen;
+}
+
+rect.upf {
+ fill: green;
+ stroke: lightgreen;
+}
+
+rect.fhgw {
+ fill: #dddddd;
+ stroke: #444444;
+}
+
+rect.ue {
+ fill: skyblue;
+ stroke: lightskyblue;
+}
+
+path {
+ fill: red;
+ stroke: blue;
+ stroke-width: 2;
+}
+
+path.link {
+ fill: none;
+ stroke: #444444;
+}
+
+title {
+ background-color: #44aa44;
+ font-size: 100pt;
+}
+
+text {
+ fill: white;
+ stroke: none;
+ text-anchor: middle;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 10px;
+ font-weight: normal;
+}
+
+text.amf {
+ fill: lightgreen;
+}
+
+text.upf {
+ fill: lightgreen;
+}
+
+text.smo {
+ fill: #444444;
+}
+
+text.o2-controller {
+ fill: #444444;
+}
+
+g.TapiNodeOCloud>text {
+ fill: #444444;
+}
+
+text.fhgw {
+ fill: #444444;
+}
+
+text.ue {
+ fill: #444444;
+}
\ No newline at end of file