Put a selection-box around an item if we clicked on something

for making language translation work.

Web/index.html

@@ -31,6 +31,7 @@
 <script src="selectmenu.js"></script>
 <script src="network.js"></script>
 <script src="textwindow.js"></script>
+<script src="language.js"></script>
 <script src="ui.js"></script>
 </body>
 </html>

Web/scripts/BuildLanguage.pl

@@ -0,0 +1,40 @@
+#!/usr/bin/perl
+opendir(Dir, "Resources") || die "Can't open Resources directory: $!\n";
+@files = grep(/edustrings/,readdir(Dir));
+closedir(Dir);
+
+open ($outfile, '>', "language.js") or die $!;
+
+print($outfile  "language = {\n");
+foreach $file (@files) {
+    $lang = $file;
+    $lang =~ s/edustrings.//;
+    $lang =~ s/.json//;
+    print($outfile  "  $lang : {\n");
+
+    open my $info, "Resources/$file" or die "Could not open $file: $!";
+
+    while( my $line = <$info>)  {   
+	chomp($line);
+	if ( $line =~ /name": "(.*)",$/)
+	{
+	    print($outfile  "    $1 : {");
+	}
+	if ( $line =~ /value": "(.*)",$/)
+	{
+	    print($outfile  "$line\n");
+	}
+	if ( $line =~ /value": "(.*)"$/) #if there is no comment
+	{
+	    print($outfile  "$line\n    },\n");
+	}
+	if ( $line =~ /comment": "(.*)"$/)
+	{
+	    print($outfile  "  $line\n    },\n");
+	}
+    }
+    print($outfile  "  },\n"); #End the language file;
+}
+print($outfile  "];\n"); #End the language variable definition
+close($outfile);
+

Web/scripts/ConvertResx2Json.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+#
+# Convert the EduNetworkBuilder language files into json
+# Run this from the web directory, and make sure to have xq installed
+if which xq >/dev/null; then
+    if [ -d Resources -a -d EduResources/languages ]; then
+	for a in EduResources/languages/*.resx; do 
+	    c=$a;
+	    if [ $a = "EduResources/languages/edustrings.resx" ]; then
+		c="edustrings.en.resx"
+	    fi
+	    b=$(basename $c | sed 's/.resx/\.json/'); 
+	    #if [ ! -e Resources/languages/$b ]; then
+		echo $b
+		xq '.root.data' $a |sed 's/\@name/name/' | grep -v 'xml:space' > Resources/$b
+	    #fi
+	done
+    else
+	echo "You must be in the web directory of the EduNetworkBuilder git repo for this to work"
+    fi
+else
+    echo "xq must be installed.  This comes with the jq program"
+    echo "jq is used for working with json files and xq is the counterpart"
+    echo "that converts xml to json."
+fi

Web/ui.js

@@ -12,10 +12,12 @@ var small_button_size = 25;
 var uiDeviceInfoLevel = 1; //What do we display when we look at the network
 var uiActions = [];//a list of things on the screen we can click on or process.
 var ui_highlightRect = null;
+var ui_selectRect = null;
 var ui_HadHighlight = false;
 var ui_status_height = 25;
 var ui_StatusText = "";
 var ui_HighlightArray = [];
+var translator = new Language('en');
 
 //The user interface mode.  0=network, 1=network information, 2=puzzle-selection menu
 var uiMode=1;
@@ -175,6 +177,13 @@ function PrintScreen(WhatPassedIn=-1)
 
 		MainCanvas_ctx.strokeStyle = "black";
 
+		if (ui_selectRect == null) { }
+		else {
+			//console.log("We have something selected.");
+			var tmp_select = returnHighlightShape("selectbox", ui_selectRect, "green", "none", 0.8);
+			drawshape(tmp_select);
+        }
+
 		drawSelectMenu();
 		PrintAllNetworkLinks();
 		PrintAllNetworkDevices();
@@ -302,7 +311,7 @@ function distance(x1, y1, x2, y2) {
 function handleMouseUp(evt)
 {
 	//evt.preventDefault();
-	mouseIsDown=false;
+	mouseIsDown = false;
 	//See if we have a mouse click
 	let deltaX = Math.abs(evt.pageX - mouseDownLocation.pageX);
 	let deltaY = Math.abs(evt.pageY - mouseDownLocation.pageY);
@@ -319,10 +328,17 @@ function handleMouseUp(evt)
 		if(!mouseDidMovement)
 		{ //If we are not dragging, it is a click
 			var myevt = copyLocation(evt);
+			var needsrefresh = true;;
+			if (ui_selectRect == null) needsrefresh = false;
+			ui_selectRect = null; //remove any previous selected marker
 			//console.log("evt:" + JSON.stringify(myevt));
 			if (CheckForActions(myevt, "leftclick")) return; //If we did this, do not do anything else.
 			if(uiMode==1) TextWindow_handleMouseUp(evt);
-			else if(uiMode==2) TextWindow_handleMouseUp(evt);
+			else if (uiMode == 2) TextWindow_handleMouseUp(evt);
+			if (needsrefresh) {
+				if (ui_selectRect == null) setStatus(""); //we clicked on nothing
+				PrintScreen();
+			}
 		}
 		
 	}
@@ -719,10 +735,11 @@ function printHighlights(countof="mouseover") {
 function drawshape(highlight) {
 	MainCanvas_ctx.fillStyle = highlight.shapeColor;
 	MainCanvas_ctx.globalAlpha = highlight.opaciticy; //mostly transparent
+	var oldWidth;
 	if (highlight.shapeText == "square")
 		MainCanvas_ctx.fillRect(highlight.shapePoints.sx, highlight.shapePoints.sy, highlight.shapePoints.deltax, highlight.shapePoints.deltay);
 	else if (highlight.shapeText == "line") {
-		var oldWidth = MainCanvas_ctx.lineWidth;
+		oldWidth = MainCanvas_ctx.lineWidth;
 		MainCanvas_ctx.lineWidth += 6;
 		MainCanvas_ctx.strokeStyle = highlight.shapeColor;
 		MainCanvas_ctx.beginPath();
@@ -732,6 +749,22 @@ function drawshape(highlight) {
 		MainCanvas_ctx.lineWidth = oldWidth;
 		MainCanvas_ctx.strokeStyle = "black";
 	}
+	else if (highlight.shapeText == "selectbox") {
+		//console.log("Printing a selectbox");
+		MainCanvas_ctx.fillStyle = "green";
+		oldWidth = MainCanvas_ctx.lineWidth;
+		MainCanvas_ctx.lineWidth += 2;
+		MainCanvas_ctx.strokeStyle = "green";
+		MainCanvas_ctx.beginPath();
+		MainCanvas_ctx.moveTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.sy);
+		MainCanvas_ctx.lineTo(highlight.shapePoints.dx, highlight.shapePoints.dy);
+		MainCanvas_ctx.lineTo(highlight.shapePoints.sx, highlight.shapePoints.dy);
+		MainCanvas_ctx.lineTo(highlight.shapePoints.sx, highlight.shapePoints.sy);
+		MainCanvas_ctx.stroke();
+		MainCanvas_ctx.lineWidth = oldWidth;
+		MainCanvas_ctx.strokeStyle = "black";
+	}
 	MainCanvas_ctx.globalAlpha = 1.0; //reset
 	MainCanvas_ctx.fillStyle = "black"; //reset
 }
@@ -823,8 +856,33 @@ function generic_mouseoverHighlight(point, actionrec) {
 
 function device_clickOn(point, actionrec) {
 	if (actionrec.theObject !== null && actionrec.theObject.name !== null) {
+		ui_selectRect = structuredClone(actionrec.shapePoints);
+		//console.log("Setting select rect:" + JSON.stringify(ui_selectRect));
 		setStatus(actionrec.theObject.hostname);
 		//We probably do not want to do printecreen here, but we are doing it here now...
 		PrintScreen();
 	}
 }
+
+function Language(lang) {
+	var __construct = function () {
+		if (eval('typeof ' + lang) == 'undefined') {
+			lang = "en";
+		}
+		ui_language = 'language.' + lang;
+		return;
+	}()
+
+	this.getStr = function (str, defaultStr) {
+		var retStr = eval('eval(ui_language).' + str);
+		if (typeof retStr != 'undefined') {
+			return retStr;
+		} else {
+			if (typeof defaultStr != 'undefined') {
+				return defaultStr;
+			} else {
+				return eval('ui_language.' + str);
+			}
+		}
+	}
+}