Multilanguage possible on textboxes or buttons?

nice, thanks mate.

Just been making a personalised Christmas card to people. Yes one card to fit all. I’m lazy and find this more fun than writing out cards. Oh and help save the trees…

But this whole idea is really great for them.

Using a version of the langTest2.hype.zip posted above, I am able to change the creating using the above methods, love it. :smiley:

Looking at this again, and I think it’s way to complicated. I still want a way to do alternatives (content, sizes, etc.) in Hype and switch between them with on click: EN verison, DE version and have elements shown / hidden.

Then I want to export EN version (using all EN flagged elements) or DE version etc.

It could be that simple…

(BTW: I can hack JS back and forth, etc. but it’s not the KISS way to do it)

I think thats called Scenes.. :sunglasses:

No, it’s not. To make it more clear:

Below you see the _EN and _DE element names. Depending on what I want, I turn them on or off. I have enabled one EN and one DE so you see the effect.

The thing is, I keep the animation which is in big parts the same between EN and DE only once. With scenes I would have a copy and need to duplicate changes… not very efficient.

What I want is a way that I can switch to all *_EN elements or all *_DE elements. It’s pretty simple…

with applescriptsupport you would be able to for instance switch on/off elements with equal nameparts!!!

@hype so this would be a nice usecase … :slight_smile:

1 Like

@robby,

I must admit I am not convinced with your argument and would much prefer an Applescript solution.
( Which if we had I am pretty sure Applescriptors like my self would offer up code)

But a suggestion (simplified ) of how the Hype team may do this is to offer a new type of Group.

These groups would be called Advanced Export Groups.

If you create a Advanced Export Group, a new Advanced Export Group icon appears at the top of the element tree.
Advanced Export Groups will always be at the Top of the element tree.

Elements added to a Advanced Export Group do not show as moved in the element tree. This is because we do not want to change the layer index. But opening an Advanced Export Group will reveal a reference to any elements added to it.

Advanced Export Groups could also have the hidden/display eye next to it.
If set to hide, all referenced elements would be hidden. Overriding the original elements hidden/display.
If set to display then the referenced elements original setting is honoured, which would be either hidden or display

When using Advanced Export, the Advanced Export Groups will be listed with a check box to include or not include.

The trick with the name part was just done so I can distinguish the different things fast. Overall it’s not the way to go. It’s a messy hack because of missing alternatives. And I don’t like the AS approach… but this is purely emotional based as it smells like a messy hack on top of a messy approach :wink:

@MarkHunte While I can understand your idea, I’m not a fan of grouping or mapping of information to trees. It’s a categorization, and mostly needs to be MECE. Which is often not the case.

I would like to be able to hack in tags on wich I can then filter (inlcude / exclude) prior an action. That would be most flexible.

Not sure what these are ( ok, I know what a kiss is, think I had one once but pretty sure it's not what you mean) can you elaborate ?

It may be that the tree is the wrong place to display them but in essence the type of group I mention are Tags.

MECE principle: mutually exclusive, collectively exhaustive (see wikipedia)
KISS = Keep it simple stupid :wink:

I think that may apply to the use of acronyms. Or not ...:grinning:

What about iOS? How can we make language detection and then show one or another language?

window.gLanguage = (navigator.language).substr(0, 2);

give all the elements classname their corresponding language.
then use a script like this to show or hide these elements:

var i;
var vElements = document.getElementsByClassName(gLanguage);
for (i = 0; i < vElements.length; i++) {vElements[i].style.display = 'block';};
3 Likes

Good idea @rene

Although if you give the language elements two class names for example : lang and en

You could do it like this

window.gLanguage = (navigator.language).substr(0, 2);

var i;
//-- gather all elements with class name 'lang'
var vElements = document.getElementsByClassName('lang');

for (i = 0; i < vElements.length; i++) {
 
//-- filter using second class name which matches the language 
vElements[i].style.display  =  ( vElements[i].classList.contains(window.gLanguage) ? 'inline'  :  'none');;

}
1 Like

Maybe the "Multilingual" template is helpful...

how can we change undefined text? this may occur for other languages, that not defined in code, I think…
can we make en_us basic for all other languages?

I will be honest, not tracked back through any of this but one way of handling undefined is detect it and then do something.

if (typeof foo == "undefined") {
    // do stuff
}
1 Like

Is this a question in regards to the Multilingual template?

If you wanted to auto-detect the language code, the JavaScript could look something like this...

if (data[0].indexOf(nl) > 0) {
console.log("Language Found: " + data[0].indexOf(nl));
} else {
	console.log("Language Not Found");
}

The "nl" variable is already in use. That's storing the "Navigator Language" / "Browser Language". So, it's just a matter of searching the data[0] or "ID" array to see if there's a match. I use greater than zero because it can never be zero. That's reserved for the array header, which is called "ID"...

var data = [
["ID","en-US","en-GB","en-AU"],

So, since I'm in the United States of America :us: ...pause for the sounds of fireworks... my browser's language is "en-US". That's stored as the "nl" variable. Since "en-US" is a value in the data[0] array, the "indexOf" method, returns the number 1. If it wasn't there, it would return -1.

More info on indexOf here...

I use a conditional of greater than zero because it can't be zero. My arrays have headers... "ID" is the header of country code array. If -1 is returned from the search, it means the "data" two-dimensional array doesn't have a language match. That's where the "else" can be used to do something else.


So, the Multilingual template assumed one of the three languages was in use. It now defaults to "en-US" if the user language doesn't match the available language data.

1 Like

If anyone has new techniques for creating multilanguage / translated Hype documents, please share here!

I found this topic very interesting. I successfully tested the Mark solution here:

I'm close to the end of creating a Hype project with 10 separate hype documents linked with Go to URL actions and because I need this project to be an multilingual now I'm wondering wich approach will be the best:

  1. The first scenario will be to use @MarkHunte's solution – 10 projects with IDs translation but I need to change images and videos too, not only texts. Is it possible? Something like:
 window.title = {
   "bg" : "ЕПИЗОД 6",    
   "en"   : "EPISODE 6"
};

 window.logo = {
   "bg" : "${resourcesFolderName}/bg-full-g.png",    
   "en"   : "${resourcesFolderName}/en-full-g.png"
};

I tried it but without success.

  1. The second scenario is to make this 10 hype documents for every language – this will give me easy way to replace the images and videos with correct language but in the end I will have 30 documents (if I have make three languages).

I also wonder if I decide to make the second scenario and separate the documents for each language and put them into separate directories in the FTP like /bg; /en; /es; how can I set to load the right language for each user by their system default language?

Is there an easier way? How would you advise me?
Thank you!