RouterOS – Dude Network Map – extract SVG map

Posted bybjorn Leave a comment on RouterOS – Dude Network Map – extract SVG map

RouterOS

MikroTik

TheDude

How to extract SVG map element from RouterOS and Dude Network Maps using C# and Selenium WebDriver.
Also replace width and height element in SVG tag to fit the DIV tag for display.

You might also consider adding Timer component in order to display several maps.

1. In Visual Studio launch Manage Nuget Packages, and browse/search for Selenium, install latest 3.11 to your solution

RouterOS - Manage Nuget Packages
RouterOS – Manage Nuget Packages

2. Download ChromeDriver, extract chromedriver.exe and put it in path or in solution directory.

C#

using System;
using System.Web.UI;
using System.Configuration;
using System.Data;
using System.Text;
using System.Threading;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

        if (!Page.IsPostBack)
        {
            IWebDriver driver = new ChromeDriver(@"path to chromdriver.exe");
            driver.Navigate().GoToUrl("http://server/webfig/#Dude:Network_Maps.Network_Map.31565");

            //delay in order for webdriver to load page
            Thread.Sleep(5000);

            //find username input in webdriver page send username
            IWebElement element = driver.FindElement(By.Id("name"));
            element.SendKeys("username");

            //find password input in webdriver page and send password
            element = driver.FindElement(By.Id("password"));
            element.SendKeys("password");

            //find login button i webdriver page and send click command
            element = driver.FindElement(By.Id("dologin"));
            element.Click();

            //delay in order for webdriver to load networkmap
            Thread.Sleep(10000);

            string sourceStr = driver.PageSource.ToString();

            driver.Quit();
            driver.Dispose();

            //extract svg element from webdriver source
            //TO DO : fix this with Regex
            try
            {
                int start = sourceStr.IndexOf("<svg", 0);
                int slutt = sourceStr.IndexOf("/svg", start + 4);
                int lengde = (slutt + 6) - (start);

                string svgStr = sourceStr.Substring(start, lengde);

                //set width and height of svg element
                StringBuilder aStringBuilder = new StringBuilder(svgStr);

                int startB = svgStr.IndexOf("width=", 0);
                int sluttB = svgStr.IndexOf("\"", startB + 8);

                aStringBuilder.Remove(startB, sluttB + 1 - startB);
                aStringBuilder.Insert(startB, "width=\"100%\"");

                svgStr = aStringBuilder.ToString();

                int startH = svgStr.IndexOf("height=", 0);
                int sluttH = svgStr.IndexOf("\"", startH + 9);

                aStringBuilder = new StringBuilder(svgStr);
                aStringBuilder.Remove(startH, sluttH + 1 - startH);
                aStringBuilder.Insert(startH, "height=\"100%\"");

                svgStr = aStringBuilder.ToString();

                //fill div tag with svg element
                myTest.InnerHtml = svgStr;

            }
            catch (Exception) {
                myTest.InnerHtml = "Error, timeout while loading Dude Network Map.";
            }
        }
    }
}



ASPX


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" />;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>

<form id="form1" runat="server">

<div runat="server" style="width:100%;height:1080px;margin:0px;padding:0px;">

<div id="myTest" runat="server" style="width:80%;margin:0px;padding:0px;"></div>

</div>

</form>
</body>
</html>

Leave a comment