Localization

[jumpjack]

Could you please move text strings to a single file for easier localization to other languages?

[TrystanLea]

Hello @jumpjack Your very welcome to make a fork of this repository and develop localization functionality but it's not something I want to add into this repository/version. My preference is to keep this implementation as simple as possible with the objective of maintainability, it can all get very complicated fast with localization.

[jumpjack]

This is why I was talking about a "single file": if all user interface strings are collected inside one single file, it's easier both to maintain a project and localize it; but I know that the initial effort is quite big.

For a project of mine, I used an array like this:

messages["Input your name"] = "Input your name";
messages["Input your age"]  = "Input your age";

Source code remains readable, but localization is just a matter of loading an array. And if a translated string is not available, the original string remains available, if original language array is always loaded first:

///// Defined in external file:
var localizedMessages= [];   
localizedMessages["one"] = "uno"; 
localizedMessages["two"] = "due"; 
localizedMessages["four"] = "quattro"; 
/////

///// Defined inside the main script:
var originalMessages = []; 
originalMessages["one"] = "one"; 
originalMessages["two"] = "two"; 
originalMessages["three"] = "three"; 

var finalMessages = [];   
/////


for (var messageIndex in originalMessages) { 
    if ((localizedMessages[messageIndex]) && (localizedMessages[messageIndex] != "")) {
        finalMessages[originalMessages[messageIndex]] = localizedMessages[messageIndex]; // localize if available
    } else {
        finalMessages[originalMessages[messageIndex]] = originalMessages[messageIndex]; // else use original language
}
}; 
console.log(originalMessages,localizedMessages, finalMessages);

Result:

finalMessages["one"] = "uno"; 
finalMessages["two"] = "due"; 
finalMessages["three"] = "three";   // <<<<=== unchanged because not available

The original script should be changed from:

document.getElementById("output").innerHTML = "This is a message";

to

document.getElementById("output").innerHTML = finalMessages["This is a message"];

I'll try to implement all of this in my fork.

[TrystanLea]

Thanks @jumpjack the issue for me is more that every text string location in https://github.com/TrystanLea/SAPjs/blob/main/index.html#L12 needs to be encapsulated in some way to make it possible to switch languages. How would you approach that out of interest?

[jumpjack]

Thanks @jumpjack the issue for me is more that every text string location in https://github.com/TrystanLea/SAPjs/blob/main/index.html#L12 needs to be encapsulated in some way to make it possible to switch languages. How would you approach that out of interest?

I am studying how to extract all strings from an HTML file, but as of now with no much success: something weird happens in element 24 of template.html...

I added this script at the end of the file:

var initElement = document.getElementById("heatloss");
counter = 0;
tblOutput = document.createElement("table");
tblOutput.border = 1;


btn1 = document.createElement("button");
btn1.innerHTML = "Read";
btn1.addEventListener("click", re);

btn2 = document.createElement("button");
btn2.innerHTML = "Write";
btn2.addEventListener("click", wr);



function re() {
  counter = 0;
  printLeafs(initElement,'read');
  tableFilled = true;
}

function wr() {
  counter = 0;
  printLeafs(initElement,'write');
}


document.body.appendChild(btn1);
document.body.appendChild(btn2);
document.body.appendChild(tblOutput);
tableFilled = false;

function printLeafs(el,operation) {
  if(el.childNodes != null) {
//console.log(counter, el, el.childNodes.length);
    if ((el.childNodes.length > 0) && (counter < 1000)){
      var chil = el.childNodes;
      for (var i = 0; i < chil.length; i ++) {
        printLeafs(chil[i],operation)
      }
    }   else {
    if (el.wholeText != null) {
      str = el.wholeText.trim();
      if (str.length > 6) {
        //console.log(el);
        
        if (operation === "read") {
          if (!tableFilled) { 
            el.parentElement.setAttribute("id","counter" + counter);
            console.log("Riassegno  ", el.parentElement);
            myRow = document.createElement("TR");
            myCell = document.createElement("TD");
            myCell.innerHTML = counter;
            myRow.appendChild(myCell);
            
            myCell = document.createElement("TD");
            myCell.innerHTML = str;
            myCell.id = "oldText" + counter;
            myRow.appendChild(myCell);
    
            myCell = document.createElement("TD");
            myInput = document.createElement("input");
            myInput.type = "text";
            myInput.id = "newText" + counter;
            myInput.value = str;
            myInput.size = 100;
            myRow.appendChild(myInput);
    
            tblOutput.appendChild(myRow);
          } else {
            if (document.getElementById("oldText" + counter)  != null) {
              document.getElementById("oldText" + counter).innerHTML = str;
            }
          }
          console.log("n." + counter + ":", str.length,str, el);
          counter++;
        }
        
        if (operation === "write") {
          if (document.getElementById("counter" + counter) != null) {
            console.log("scrivo ", counter);
            document.getElementById("counter" + counter).innerHTML = document.getElementById("newText" + counter).value; 
            document.getElementById("oldText" + counter).innerHTML = document.getElementById("newText" + counter).value; 
          } else {
            console.log("????", "counter" + counter);
            //counter--;
          }
          counter++;
        }
        
      } else {
        //console.log("(FINE)", str.length, el);
      }
    }
    return    
       
    }
    }
}

Apart from this, what do you mean by "Heating demand degree days"?

[TrystanLea]

Apart from this, what do you mean by "Heating demand degree days"?

Could you remind me where this is?

Here's one example of localization using vue.js but as you can see every text string needs to be encapsulated:
https://blog.logrocket.com/advanced-localization-techniques-vue-js/

another example here:
https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy

strings have to be set like this:

<h1>{{$t('hello')}}</h1>

so an additional {{$t('....')}} for each text string, I wish there was a better way

[jumpjack]

Apart from this, what do you mean by "Heating demand degree days"?

Could you remind me where this is?

It looks a lot more complex than I thought; anyway I am in the meantime translating headers of tables, and implementing a method to get the script working also locally, which is currently prevented by dynamic loading of the "heatloss" DIV. I an trying with this: https://github.com/jumpjack/ReadWriteJS/blob/main/readwrite.html

[jumpjack]

Did you remember what "Heating demand degree days" means?

I also have another question; "Set point":

How would you describe it? It appears to be both input and output, so I don't know how to call it. "Target temperature" or "Start temperature"?

[TrystanLea]

Hello @jumpjack I see you are refering to HeatLossJS github.com/trystanLea/heatlossjs, heating demand degree days is as described, your best bet is probably to read up on https://www.degreedays.net

Set point is the target temperature for the room.

I'd be interested to hear more about how you are using these tools, is it for a personal project, learning? or are you planning to use professionally? Where in the world are you based?

[TrystanLea]

I should say, you might find that Im a bit resistant to changing things on both SAPjs and HeatLossJS. On the whole Im happy with how they are working and want to keep them as minimal as possible.

I worked on a couple of other related open source tools (e.g MyHomeEnergyPlanner) trying to cater for a wider set of project goals, it's really easy to expand the project and make the code base harder and sometimes impossible to maintain. The goal with sapjs and heatlossjs is to keep things simple even at the expense of functionality..

These are also both projects I only work on in my spare time :)

[jumpjack]

I am located in Italy, and upcoming enormous increase in energy costs led me to start understanding my power consumption and losses, but I am not a professional on this topic.

[TrystanLea]

Thanks @jumpjack let me know if you do adapt this and I will add a link to your work on the main readme. I've just added Julian's work there, he's doing nice work with lidar