luci-app-olsr-viz: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js fix tag Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js fix var name Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js use load for script & fix bugs Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js fix script Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js fix bugs Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js fix view Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js fix script Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js fix view luci-app-olsr-viz: migrate to js luci-app-olsr-viz: migrate to js fix script Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com> luci-app-olsr-viz: migrate to js
2023-07-13 11:49:43 +05:30 · 2023-07-13 11:49:43 +05:30 · 00cfca13b5
commit 00cfca13b5
parent ff166c6a06
8 changed files with 439 additions and 346 deletions
--- a/applications/luci-app-olsr-viz/htdocs/cgi-bin/olsr-viz.sh
+++ b/applications/luci-app-olsr-viz/htdocs/cgi-bin/olsr-viz.sh
@ -1,40 +0,0 @@
-#!/bin/sh
-echo Content-type: text/html
-echo
-
-cat << EOF
-<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
-var css=document.styleSheets[0];
-if (null!=css.insertRule) {
-css.insertRule(".label {color:black;background-color:white}", css.cssRules.length);
-}
-else {
-css.addRule(".label", "color:black");
-css.addRule(".label", "background-color:white");
-}
-</SCRIPT>
-<SCRIPT SRC="/luci-static/resources/olsr-viz.js" LANGUAGE="JavaScript1.2" TYPE="text/javascript"></SCRIPT>
-<DIV ID="main"
-STYLE="width: 100%; height: 93%; border: 1px solid #ccc; margin-left:auto; margin-right:auto; text-align:center; overflow: scroll">
-<DIV ID="edges" STYLE="width: 1px; height: 1px; position: relative; z-index:2"></DIV>
-<DIV ID="nodes" STYLE="width: 1px; height: 1px; position: relative; z-index:4"></DIV>
-</DIV>
-<DIV STYLE="z-index:99">
-<FORM ACTION="">
-<P><B TITLE="Bestimmt die Vergrößerungsstufe.">Zoom</B>&#160;<A HREF="javascript:set_scale(scale+0.1)">+</A>&#160;<A HREF="javascript:set_scale(scale-0.1)">&ndash;</A>&#160;<INPUT ID="zoom" NAME="zoom" TYPE="text" VALUE="2.0" SIZE="5" ONCHANGE="set_scale()">&#160;
-| &#160;<B TITLE="Beschränkt die Anzeige auf eine maximale Hop-Entfernung.">Metrik</B>&#160;<A HREF="javascript:set_maxmetric(maxmetric+1)">+</A>&#160;<A HREF="javascript:if(0<maxmetric)set_maxmetric(maxmetric-1)">&ndash;</A>&#160;<INPUT ID="maxmetric" NAME="maxmetric" TYPE="text" VALUE="3" SIZE="4" ONCHANGE="set_maxmetric(this.value)">&#160;
-| &#160;<B TITLE="Schaltet die automatischen Layout-Optimierung ein.">Optimierung</B><INPUT ID="auto_declump" NAME="auto_declump" TYPE="checkbox" ONCHANGE="set_autodeclump(this.checked)" CHECKED="CHECKED">&#160;
-| &#160;<B TITLE="Zeige Hostnamen an.">Hostnamen</B><INPUT ID="show_hostnames" NAME="show_hostnames" TYPE="checkbox" ONCHANGE="set_showdesc(this.checked)" CHECKED="CHECKED">&#160;
-| &#160;<A HREF="javascript:viz_save()" TITLE="Speichert die aktuellen Einstellungen in einem Cookie.">Speichern</A>&#160;
-| &#160;<A HREF="javascript:viz_reset()" TITLE="Startet das Viz-Skriptprogramm neu.">Zur&uuml;cksetzen</A></P>
-</FORM></DIV>
-<SPAN ID="debug" STYLE="visibility:hidden;"></SPAN>
-<IFRAME ID="RSIFrame" NAME="RSIFrame" STYLE="border:0px; width:0px; height:0px; visibility:hidden;">
-</IFRAME>
-<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
-
-viz_setup("RSIFrame","main","nodes","edges");
-viz_update();
-
-</SCRIPT>
-EOF
--- a/applications/luci-app-olsr-viz/htdocs/cgi-bin/vizdata.sh
+++ b/applications/luci-app-olsr-viz/htdocs/cgi-bin/vizdata.sh
@ -1,48 +0,0 @@
-#!/bin/sh
-echo Content-type: text/html
-echo
-
-cat<<EOF
-<HTML>
-<HEAD>
-	<TITLE>OLSR-VIZ Data</TITLE>
-	<META CONTENT="text/html; charset=iso-8859-1" HTTP-EQUIV="Content-Type">
-	<META CONTENT="no-cache" HTTP-EQUIV="cache-control">
-</HEAD>
-<BODY>
-
-<script language='JavaScript1.2' type='text/javascript'>
-EOF
-
-# sed + txtinfo plugin
-re_ip='[0-9]\{1,\}\.[0-9]\{1,\}\.[0-9]\{1,\}\.[0-9]\{1,\}'
-re_sep='[[:space:]]\{1,\}'
-re_nosep='[^[:space:]]\{1,\}'
-wget http://127.0.0.1:2006/all -qO - | sed -n "
-/^Table: Links$/,/^$/ {
-s#		#	-	#g
-s#\($re_ip\)$re_sep\($re_ip\)\($re_sep$re_nosep\)\{3\}$re_sep\($re_nosep\)#parent.touch_edge(parent.touch_node('\1').set_metric(1).update(),parent.touch_node('\2').set_metric(1).update(),'\4');#p
-}
-/^Table: Topology$/,/^$/ {
-s#\($re_ip\)$re_sep\($re_ip\)\($re_sep$re_nosep\)\{2\}$re_sep\($re_nosep\)#parent.touch_edge(parent.touch_node('\1').update(),parent.touch_node('\2').update(),'\4');#p
-}
-/^Table: HNA$/,/^$/ {
-s#\($re_ip\)/\([0-9]\{1,\}\)$re_sep\($re_ip\)#parent.touch_hna(parent.touch_node('\3'),'\1','\2');#p
-}
-/^Table: Routes$/,/^$/ {
-s#\($re_ip\)/32$re_sep$re_nosep$re_sep\($re_nosep\).*#parent.touch_node('\1').set_metric('\2').update();#p
-}
-"
-
-hosts=$(uci show olsrd|grep hosts_file|cut -d "=" -f 2)
-if [ -n $hosts ]; then
-sed -n "
-s#\($re_ip\)$re_sep\($re_nosep\)$re_sep.*#parent.touch_node('\1').set_desc('\2');#p
-" < $hosts
-fi
-
-cat<<EOF
-	parent.viz_callback();
-</script>
-</BODY></HTML>
-EOF
--- a/applications/luci-app-olsr-viz/htdocs/luci-static/resources/olsr-viz.js
+++ b/applications/luci-app-olsr-viz/htdocs/luci-static/resources/olsr-viz.js
@ -34,8 +34,6 @@ Changes:
 2010-12-11: Changed some paths to make it work with Kamikaze and Luci -- soma
 */

-var cgi_url = "/cgi-bin/vizdata.sh";
-
 var maxmetric = 3;
 var iconvariant = "-mini";
 var nodes = new Array();
@ -63,40 +61,17 @@ var now_secs = 5;

 // dom elements
 var IFrameObj;
-var maindiv;
-var nodediv;
-var edgediv;
-
-/******* CALL TO SERVER ********/
-function callToServer(URL) {
-	var IFrameDoc;
-
-	if (IFrameObj.document) {
-		// For IE5 + opera
-		IFrameDoc = IFrameObj.document;
-	}
-	else if (IFrameObj.contentDocument) {
-		// For NS6
-		IFrameDoc = IFrameObj.contentDocument;
-	}
-	else if (IFrameObj.contentWindow) {
-		// For IE5.5 and IE6
-		IFrameDoc = IFrameObj.contentWindow.document;
-	}
- 	else {
-		// opera? hmmmm
-		return true;
-	}
-
-	IFrameDoc.location.replace(URL);
-	return false;
-}
+var mainDiv;
+var nodeDiv;
+var edgeDiv;
+var zoomInput;
+var maxmetricInput;
+var debugSpan;


 /******** EDGE CLASS ********/
 function edge(n1, n2) {
-	this.getHTML = function()
-	{
+	this.getHTML = function () {
 		var nh = "";

 		if (this.n1.metric > maxmetric || this.n2.metric > maxmetric) {
@ -144,18 +119,15 @@ function edge(n1,n2){
 		return nh;
 	}

-	this.isIdle = function()
-	{
+	this.isIdle = function () {
 		return (now_secs - this.lastseen > idle_timeout);
 	}

-	this.isDead = function()
-	{
+	this.isDead = function () {
 		return (now_secs - this.lastseen > erase_timeout);
 	}

-	this.cleanup = function()
-	{
+	this.cleanup = function () {
 		if (this.n1 && this.n1.weight) {
 			this.n1.weight--;
 		}
@ -180,8 +152,7 @@ function edge(n1,n2){
 	return this;
 }

-function getEdgeKey(ip1,ip2)
-{
+function getEdgeKey(ip1, ip2) {
 	var key = "";
 	if (ip1 > ip2) {
 		key = ip2 + "-" + ip1;
@ -192,8 +163,7 @@ function getEdgeKey(ip1,ip2)
 	return key;
 }

-function touch_edge(n1,n2,etx)
-{
+function touch_edge(n1, n2, etx) {
 	var key = getEdgeKey(n1.ip, n2.ip);
 	var e = edges[key];
 	if (!e) {
@ -207,8 +177,7 @@ function touch_edge(n1,n2,etx)

 /******** NODE CLASS ********/
 function node(ip) {
-	this.getHTML = function()
-	{
+	this.getHTML = function () {
 		var nh;

 		if (this.metric > maxmetric) {
@ -237,18 +206,15 @@ function node(ip) {
 		return nh;
 	}

-	this.isIdle = function()
-	{
+	this.isIdle = function () {
 		return (now_secs - this.lastseen > idle_timeout);
 	}

-	this.isDead = function()
-	{
+	this.isDead = function () {
 		return (now_secs - this.lastseen > erase_timeout);
 	}

-	this.cleanup = function()
-	{
+	this.cleanup = function () {
 		ncount--;
 	}

@ -304,7 +270,7 @@ function place_new_nodes() {
 		var sp;
 		if (sp = getCookie("node_" + n.ip)) {
 			var xy = sp.split("x");
-			debug_writeln("sp: "+sp+" xy[0]: "+xy[0]+" xy[1]: "+xy[1]);
+			debug_writeln(("sp: " + sp + " xy[0]: " + xy[0] + " xy[1]: " + xy[1]));
 			n.x = parseFloat(xy[0]);
 			n.y = parseFloat(xy[1]);
 		}
@ -363,23 +329,19 @@ function touch_hna(node,net,mask) {
 }

 /******** VIZ SETUP AND SETTINGS ********/
-function viz_setup(iframeid,maindivid,nodedivid,edgedivid) {
+function viz_setup(iframe, maindiv, nodediv, edgediv, debugspan, zoominput, maxmetricinput) {
 	// assign a reference to the
 	// object to our global variable IFrameObj.
-	IFrameObj=document.getElementById(iframeid);
-	if (document.frames) {
-		// this is for IE5 Mac, because it will only
-		// allow access to the document object
-		// of the IFrame if we access it through
-		// the document.frames array
-		IFrameObj = document.frames[iframeid];
-	}
+	IFrameObj = iframe;

 	draginit();

-	maindiv=document.getElementById(maindivid);
-	nodediv=document.getElementById(nodedivid);
-	edgediv=document.getElementById(edgedivid);
+	mainDiv = maindiv;
+	nodeDiv = nodediv;
+	edgeDiv = edgediv;
+	debugSpan = debugspan;
+	zoomInput = zoominput;
+	maxmetricInput = maxmetricinput;

 	// autosave on exit?
 	var autosave;
@ -389,10 +351,8 @@ function viz_setup(iframeid,maindivid,nodedivid,edgedivid) {
 	viz_autosave(auto_save);

 	// maximum metric of surrounding nodes
-	var mmx;
-	if(mmx = getCookie("prefs_maxmetric")) {
+	var mmx = (getCookie("prefs_maxmetric"))||3; 
 	set_maxmetric(mmx, true, true);
-	}

 	// scale of view
 	var savescale;
@ -400,6 +360,9 @@ function viz_setup(iframeid,maindivid,nodedivid,edgedivid) {
 		(savescale = parseFloat(savescale))) {
 		set_scale(savescale, true);
 	}
+	else {
+		set_scale(2.0, true);
+	}

 	// scroll - FIXME
 	/*
@ -417,18 +380,16 @@ function viz_setup(iframeid,maindivid,nodedivid,edgedivid) {
 	*/
 }

-function viz_save()
-{
+function viz_save() {
 	// let cookie survive a month
 	var exp = new Date();
 	exp.setTime(exp.getTime() + 2592000000);
 	// save node positions
-	for(var ip in nodes)
-	{
+	for (var ip in nodes) {
 		if (nodes[ip].metric > maxmetric) {
 			continue;
 		}
-		setCookie("node_"+ip,nodes[ip].x+"x"+nodes[ip].y,exp);
+		// setCookie("node_"+ip,nodes[ip].x+"x"+nodes[ip].y,exp);
 	}

 	// save maxmetric
@ -439,12 +400,11 @@ function viz_save()

 	// save scroll - FIXME
 	setCookie("prefs_innerview",
-		parseInt(maindiv.scrollLeft)+"x"+parseInt(maindiv.scrollTop)+"x"+
+		parseInt(mainDiv.scrollLeft) + "x" + parseInt(mainDiv.scrollTop) + "x" +
 		parseInt(vwidth * scale) + "x" + parseInt(vheight * scale), exp);
 }

-function viz_autosave(autosave)
-{
+function viz_autosave(autosave) {
 	auto_save = autosave;
 	if (auto_save) {
 		document.body.onunload = viz_save;
@ -454,8 +414,7 @@ function viz_autosave(autosave)
 	}
 }

-function viz_reset()
-{
+function viz_reset() {
 	deleteAllCookies();
 	for (var ip in nodes) {
 		delete nodes[ip];
@ -463,7 +422,7 @@ function viz_reset()
 	for (var e in edges) {
 		delete edges[e];
 	}
-	viz_update();
+	window.location.reload();
 }

 var updateTimer = 0;
@ -472,7 +431,6 @@ function viz_update() {
 		clearTimeout(updateTimer);
 	}
 	now_secs = new Date().getTime() / 1000;
-	callToServer(cgi_url);
 }

 function viz_callback() {
@ -507,7 +465,7 @@ function refresh() {
 			nh += nodes[n].getHTML();
 		}
 	}
-	nodediv.innerHTML = nh;
+	nodeDiv.innerHTML = nh;

 	// refresh edges

@ -521,18 +479,16 @@ function refresh() {
 			nh += edges[e].getHTML();
 		}
 	}
-	edgediv.innerHTML = nh;
+	edgeDiv.innerHTML = nh;
 	refresh_running = false;
 }

-function set_showdesc(doit)
-{
+function set_showdesc(doit) {
 	showdesc = doit;
 	if (!noupdate) refresh();
 }

-function set_autodeclump(doit)
-{
+function set_autodeclump(doit) {
 	auto_declump = doit;
 	if (doit) {
 		declump();
@ -542,26 +498,24 @@ function set_autodeclump(doit)
 	}
 }

-function set_scale(inscale,noupdate)
-{
+function set_scale(inscale, noupdate) {
 	if (!inscale) {
-		inscale = parseFloat(document.getElementById("zoom").value/2);
+		inscale = parseFloat(zoomInput.value / 2);
 	}
 	scale = Math.round(inscale * 100) / 100;
 	if (!scale || scale < 0.1) {
 		scale = 0.1;
 	}
-	document.getElementById("zoom").value = scale*2;
+	zoomInput.value = scale * 2;
 	if (!noupdate) refresh();
 }

-function set_maxmetric(inmetric,noupdate,noconfirm)
-{
+function set_maxmetric(inmetric, noupdate, noconfirm) {
 	inmetric = parseInt(inmetric);
 	if (inmetric > 0 || !noconfirm || confirm("warning. setting the maximum metric to zero can lead to expensive calculations if you are connected to a network with many nodes. do you want to proceed?")) {
 		maxmetric = inmetric;
 	}
-	document.getElementById("maxmetric").value = maxmetric;
+	maxmetricInput.value = maxmetric;
 	if (!noupdate) refresh();
 }

@ -763,9 +717,8 @@ function drag(ereignis) {
 	}
 }

-function debug_writeln(line)
-{
-	document.getElementById('debug').innerHTML = line + "<br />" + document.getElementById('debug').innerHTML;
+function debug_writeln(line) {
+	debugSpan.innerHTML = line + "<br />" + debugSpan.innerHTML;
 }

 /**
@ -798,8 +751,7 @@ function setCookie(name, value, expires, path, domain, secure) {
 *	 or null if cookie does not exist.
 */

-function getCookie(name)
-{
+function getCookie(name) {
 	var results = document.cookie.match(name + '=(.*?)(;|$)');
 	if (results) {
 		return unescape(results[1]);
--- a/applications/luci-app-olsr-viz/htdocs/luci-static/resources/view/olsr-viz/olsr-viz-view.js
+++ b/applications/luci-app-olsr-viz/htdocs/luci-static/resources/view/olsr-viz/olsr-viz-view.js
@ -0,0 +1,166 @@
+'use strict';
+'require uci';
+'require view';
+'require poll';
+'require ui';
+'require rpc';
+
+
+return view.extend({
+	callGetOlsrVizData: rpc.declare({
+		object: 'olsrvizinfo',
+		method: 'getolsrvizdata'
+	}),
+
+	fetch_jsoninfo: function () {
+		var jsonreq4 = '';
+		var json;
+		var data;
+		var self = this;
+		return new Promise(function (resolve, reject) {
+			L.resolveDefault(self.callGetOlsrVizData(), {})
+				.then(function (res) {
+					json = res;
+					data = json.jsonreq4;
+					resolve([data]);
+				})
+				.catch(function (err) {
+					console.error(err);
+					reject([null]);
+				});
+		});
+	},
+
+	action_olsr_viz: function () {
+		var self = this;
+		return new Promise(function (resolve, reject) {
+			self
+				.fetch_jsoninfo()
+				.then(function ([data]) {
+					var result = { viz_data: data };
+					resolve(result);
+				})
+				.catch(function (err) {
+					reject(err);
+				});
+		});
+	},
+
+	load: function () {
+		var self = this;
+		document.querySelector('head').appendChild(E('style', { 'type': 'text/css' }, [
+			'.label {color:black;background-color:white}',
+			'.olsr_viz_main {width: 100%; height: 93%; border: 1px solid #ccc; margin-left:auto; margin-right:auto; text-align:center; overflow: scroll}'
+		]));
+		return new Promise(function (resolve, reject) {
+			var script = E('script', { 'type': 'text/javascript' });
+			script.onload = resolve;
+			script.onerror = reject;
+			script.src = L.resource('olsr-viz.js');
+			document.querySelector('head').appendChild(script);
+		});
+	},
+	render: function () {
+		var viz_res;
+		var self = this;
+		return this.action_olsr_viz()
+			.then(function (result) {
+				viz_res = result.viz_data;
+
+				var nodeDiv = E('div', { 'id': 'nodes', 'style': 'width: 1px; height: 1px; position: relative; z-index:4' });
+				var edgeDiv = E('div', { 'id': 'edges', 'style': 'width: 1px; height: 1px; position: relative; z-index:2' });
+				
+				var mainDiv = E('div', {
+					'id': 'main',
+					'class': 'olsr_viz_main'
+				}, [nodeDiv, edgeDiv]);
+
+				var zoomInput = E('input', {
+					'id': 'zoom',
+					'name': 'zoom',
+					'type': 'text',
+					'value': '2.0',
+					'size': '5',
+					'style': 'min-width: unset !important;',
+					'onchange': 'set_scale()'
+				});
+				var metricInput = E('input', {
+					'id': 'maxmetric',
+					'name': 'maxmetric',
+					'type': 'text',
+					'value': '3',
+					'size': '4',
+					'style': 'min-width: unset !important;',
+					'change': (ev)=>set_maxmetric(ev.target.value)
+				});
+				var autoOptimizationCheckbox = E('input', {
+					'id': 'auto_declump',
+					'name': 'auto_declump',
+					'type': 'checkbox',
+					'change': (ev) => set_autodeclump(ev.target.checked),
+					'checked': 'checked'
+				});
+				var hostnamesCheckbox = E('input', {
+					'id': 'show_hostnames',
+					'name': 'show_hostnames',
+					'type': 'checkbox',
+					'change': (ev) => set_showdesc(ev.target.checked),
+					'checked': 'checked'
+				});
+
+				var form = E('form', { 'action': '' }, [
+					E('p', {}, [
+						E('b', { 'title': 'Bestimmt die Vergrößerungsstufe.' }, 'Zoom '),
+						E('a', { 'href': '#', 'click': () =>set_scale(scale+0.1) }, '+ '),
+						E('a', { 'href': '#', 'click': () =>set_scale(scale-0.1) },  '\u2212 '),
+						zoomInput,
+						E('b', { 'title': 'Beschränkt die Anzeige auf eine maximale Hop-Entfernung.' }, '&nbsp;&nbsp;Metrik'),
+						E('a', { 'href': '#', 'click': () => set_maxmetric(maxmetric+1) }, '+ '),
+						E('a', { 'href': '#', 'click': () => set_maxmetric(Math.max(maxmetric, 1) - 1) }, '\u2212'),
+						metricInput,
+						E('b', { 'title': 'Schaltet die automatischen Layout-Optimierung ein.' }, '&nbsp;&nbsp;Optimierung'),
+						autoOptimizationCheckbox,
+						E('b', { 'title': 'Zeige Hostnamen an.' }, ' |  Hostnamen'),
+						hostnamesCheckbox,
+						E('a', { 'href': '#', 'click': viz_save, 'title': 'Speichert die aktuellen Einstellungen in einem Cookie.', 'style': 'font-weight:700;' }, '&nbsp;|&nbsp;&nbsp;Speichern'),
+						E('a', { 'href': '#', 'click': viz_reset, 'title': 'Startet das Viz-Skriptprogramm neu.', 'style': 'font-weight:700;' }, '&nbsp;|&nbsp;&nbsp;Zur&uuml;cksetzen')
+					])
+				]);
+
+				var debugSpan = E('span', { 'id': 'debug', 'style': 'visibility:hidden;' });
+				var vizDiv = E('div', { 'id': 'RSIFrame', 'name': 'RSIFrame', 'style': 'border:0px; width:0px; height:0px; visibility:hidden;' });
+				viz_setup(vizDiv, mainDiv, nodeDiv, edgeDiv, debugSpan, zoomInput, metricInput); viz_update();
+				
+				function setInnerHTML(elm, html) {
+					elm.innerHTML = html;
+
+					Array.from(elm.querySelectorAll("script"))
+						.forEach(oldScriptEl => {
+							const newScriptEl = document.createElement("script");
+
+							Array.from(oldScriptEl.attributes).forEach(attr => {
+								newScriptEl.setAttribute(attr.name, attr.value)
+							});
+
+							const scriptText = document.createTextNode(oldScriptEl.innerHTML);
+							newScriptEl.appendChild(scriptText);
+
+							oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
+						});
+				};
+
+				setInnerHTML(vizDiv, viz_res);
+
+				var renderDiv = E('div', { 'style': 'width:100%; height:640px; border:none', 'scrolling': 'no' }, [mainDiv]);
+				var result = E([], {}, [form, debugSpan, renderDiv, vizDiv]);
+				return result;
+			})
+			.catch(function (error) {
+				console.error(error);
+			});
+	},
+	handleSaveApply: null,
+	handleSave: null,
+	handleReset: null,
+});
+
--- a/applications/luci-app-olsr-viz/luasrc/view/olsr-viz/olsr-viz.htm
+++ b/applications/luci-app-olsr-viz/luasrc/view/olsr-viz/olsr-viz.htm
@ -1,10 +0,0 @@
-<%+header%>
-<noscript>
-	<div class="warning">
-		<%:You need to allow javascript in your browser to show this page.%>
-	</div>
-</noscript>
-
-<iframe style="width:100%; height:640px; border:none" scrolling="no" src="/cgi-bin/olsr-viz.sh"></iframe>
-
-<%+footer%>
--- a/applications/luci-app-olsr-viz/root/usr/libexec/rpcd/olsrvizinfo
+++ b/applications/luci-app-olsr-viz/root/usr/libexec/rpcd/olsrvizinfo
@ -0,0 +1,59 @@
+#!/bin/sh
+. /usr/share/libubox/jshn.sh
+
+case "$1" in
+list)
+	json_init
+	json_add_object "getolsrvizdata"
+	json_close_object
+	json_dump
+	;;
+call)
+	case "$2" in
+	getolsrvizdata)
+
+		jsonreq4=$(
+			cat <<EOF
+<script language='JavaScript1.2' type='text/javascript'>
+EOF
+
+			# sed + txtinfo plugin
+			re_ip='[0-9]\{1,\}\.[0-9]\{1,\}\.[0-9]\{1,\}\.[0-9]\{1,\}'
+			re_sep='[[:space:]]\{1,\}'
+			re_nosep='[^[:space:]]\{1,\}'
+			wget http://127.0.0.1:2006/all -qO - | sed -n "
+/^Table: Links$/,/^$/ {
+s#		#	-	#g
+s#\($re_ip\)$re_sep\($re_ip\)\($re_sep$re_nosep\)\{3\}$re_sep\($re_nosep\)#touch_edge(touch_node('\1').set_metric(1).update(),touch_node('\2').set_metric(1).update(),'\4');#p
+}
+/^Table: Topology$/,/^$/ {
+s#\($re_ip\)$re_sep\($re_ip\)\($re_sep$re_nosep\)\{2\}$re_sep\($re_nosep\)#touch_edge(touch_node('\1').update(),touch_node('\2').update(),'\4');#p
+}
+/^Table: HNA$/,/^$/ {
+s#\($re_ip\)/\([0-9]\{1,\}\)$re_sep\($re_ip\)#touch_hna(touch_node('\3'),'\1','\2');#p
+}
+/^Table: Routes$/,/^$/ {
+s#\($re_ip\)/32$re_sep$re_nosep$re_sep\($re_nosep\).*#touch_node('\1').set_metric('\2').update();#p
+}
+"
+
+			hosts=$(uci show olsrd | grep hosts_file | cut -d "=" -f 2)
+			if [ -n $hosts ]; then
+				sed -n "
+s#\($re_ip\)$re_sep\($re_nosep\)$re_sep.*#touch_node('\1').set_desc('\2');#p
+" <$hosts
+			fi
+
+			cat <<EOF
+	viz_callback();
+</script>
+EOF
+		)
+
+		json_init
+		json_add_string "jsonreq4" "$jsonreq4"
+		json_dump
+		;;
+	esac
+	;;
+esac
--- a/applications/luci-app-olsr-viz/root/usr/share/luci/menu.d/luci-app-olsr-viz.json
+++ b/applications/luci-app-olsr-viz/root/usr/share/luci/menu.d/luci-app-olsr-viz.json
@ -1,10 +1,12 @@
 {
-	"admin/status/olsr/olsr-viz": {
-		"title": "OLSR-Viz",
-		"order": 90,
+
+	"olsr/olsr-viz": {
+		"title": "OLSR Visualization",
+		"order": 100,
 		"action": {
-			"type": "template",
-			"path": "olsr-viz/olsr-viz"
+			"type": "view",
+			"path": "olsr-viz/olsr-viz-view"
 		}
 	}
+
 }
--- a/applications/luci-app-olsr-viz/root/usr/share/rpcd/acl.d/luci-app-olsr-viz-unauthenticated.json
+++ b/applications/luci-app-olsr-viz/root/usr/share/rpcd/acl.d/luci-app-olsr-viz-unauthenticated.json
@ -0,0 +1,12 @@
+{
+	"unauthenticated": {
+		"description": "Grant read access for luci-app-olsr-viz",
+		"read": {
+			"ubus": {
+				"olsrvizinfo": [
+					"getolsrvizdata"
+				]
+			}
+		}
+	}
+}