Multilanguage possible on textboxes or buttons?

Feature Requests
1

Hi there,

im just testing Hype. So far im quiet impressed. And now im wondering if there is a possibility to setup text and buttons multilanguage. Like adding countryflags somewhere on stage which lets the user choose the language.

Is this possible to be done without putting any different language stuff into another scene but just by replacing the text on textboxes and buttons?

Thanks inadvance!

cheers,
Tomi

1 Like
2

This would need to be handled with JavaScript, or by creating pairs of scenes that each has its own language.

There’s no built in functionality for this, but someone here might have accomplished this with JavaScript. (If so, please chime in!)

1 Like
3

And it would be even helpful if I could enter several different text versions and somehow select which version to use in the export step. It doesn’t has to be dynamic.

But I want to avoid, duplicating animations just to have different texts, which will become a maintenance hell.

4

It’s very easy to accomplish, for example a button: just duplicate it and put another language in it. Group all these buttons with different languages and use this group for the onclick event and animations. Set all buttons to invisible and use a JavaScript to make the selected language visible on scene load. I would recommend not to use the unique id, but use the classname instead.
You can use a script which detects the browser language.

I can upload an example if you need to…

2 Likes
5

I am thinking that making duplicates of elements will be a pain to layout and could bog down the page load.
You would also have to hide and show them with javascript. So my take on this is to:

To have a function run on scene load that sets up some global variables that represent the language text for each element.

i.e:

//-- Main Text		
window.english_mainText  = "Is this possible to be done without putting any different language stuff into another scene but just by replacing the text on textboxes and buttons"
window.spanish_mainText  = "¿Es esto posible por hacer sin poner ningún diferente material idioma a otro lugar, pero simplemente reemplazando el texto en cuadros de texto y botones"



//-- Buttons

window.english_eleButtOne  = "Element 1"
window.spanish_eleButtOne  = "Elemento 1"

We will give every element that needs to change a class name and a unique id.
i.e

langIsChosen for the element 's class name
mainText for the element’s id

When a language button is clicked:

Each language button uses the language name as it’s unique id.

i.e spanish, english are used as ids

When clicked a javascript function is called and the buttons id is obtained.

We than get an array of all the elements with the class name (langIsChosen) that an element has if it’s text should change.

We combine the language button id and the element ids and change the innerHTML.

i.e

thisElement.innerHTML = window[langChosen + "_" + thisElementID]

I think something like this will be easier to work with.

Here is an example, noteI have just put this together as such and it can be improved upon.

lang_v1.1.hype.zip (44.9 KB)

6

I have updated this example to show local storage use. And put the language text strings into object arrays.

The language text strings all have a key using the language code. i.e

en = english
es = spanish.

This just makes things a little bit simpler in the code for choosing the language and we can expand the codes use as shown with the language badge which shows the current users choice.

I have just used the text code in the badge but now it is simplified gives possibility of using JS conditional coding to display a language image.

lang_v2.1.hypetemplate.zip (49.8 KB)

7

I have set the example projects to the current version of Hype.

8

Well, as said, I don’t think that doing it dynamic makes any sense.

This is a fundamental feature Hype needs to support. I prefer a way where I can generate static versions for the different languages with one click. “Export to HTML5” and than get back X versions. No coding to keep in sync with my animation changes etc.

The JS solution works, sure, but it’s way to complicated for the problem.

9

Hi @robby,

My understanding of the original question is , it is about having an easy way to build a setup where the end user not the developer can select a language from a button on the site… This has to be a dynamic process

Although what you refer to is similar It may be better if you create a separate request RE: static language export.

10

Thanks for your feature request. We don't get many requests for multilingual element support, so for now @MarkHunte's example is a great way to accomplish your and @Tomi's goal.

@rene used a similar method for several of his interactive children's books for sale: https://itunes.apple.com/au/developer/hanneke-van-der-meer/id566976952

11

Hi Guys, I was able to do this with Edge… I did some tests and was able to port over the code to Hype and it works. You store translations in a text file and based on the URL parameters you show the correct text version… For example,

English
http://www.flushdigital.com/spinata/spinata.html?brand=redslots&lang=en&affid=12345

Spanish
http://www.flushdigital.com/spinata/spinata.html?brand=redslots&lang=es&affid=12345

1 Like
12

Awesome, do you have a sample/simple document to share with your specific technique?

13

One issue you may run into with this approach is that some languages take up a lot more space than others, which will impact on the look of the final product. Depending on the languages you need to translate for, creating separate scenes might be a better approach.

1 Like
14

Yep. But there are ways to handle that..

Also Just had a thought that you can use the anchor hash in a link for language selection.

First Example is a stripped version of the version above ( Buttons & storage stripped )

If you enter the normal url you will get the first scene as normal. But if you use:
../langTest2.html#es

or

../langTest2.html#en

You will get the language chosen. This still uses the global variables that represent the language text for each element.

We just get the window.hash to get the anchor and use that to pick the language. ( in Head )

Since we still have a single scene we can just run the other javascript functions in the normal way using the inspector.

langTest2.hype.zip (40.9 KB)

You can also use the same method if you want to have multiple language scenes .

Since we have a multiple scenes we run the other javascript functions from the head.

<script type="text/javascript"> 
 window.langChosen = window.location.hash.substring(1); 
 
	
	function sceneTitleCallback(hypeDocument, element, event) {
console.log( "call");
 hypeDocument.functions().lang(hypeDocument);
 
}

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":sceneTitleCallback});

 
</script>

The lang() function will then load the correct scene corresponding with window.langChosen

langTest3.hype.zip (19.9 KB)

Note: Initially thought of this and wrote my code but then did a search on the forum for hash to see if it had been discussed before. It had in @Daniel 's excellent thread where I nicked the .substring(1); bit :smile:

1 Like
15

Why doesn't that surprise me! Thanks Mark.

1 Like
16

Mmm, thought I had this working but not quite. Will show what I did in Edge Animate that works.
If anyone can help port it to Hype I think it would be a tremendous help for everyone.

So the way I had it setup was keep all my translated in a separate javascript file to separate content from design.
The files looks something like this:

var Localize = {
		"es": {
			"Hello": "Hola",
			"Goodbye": "Adios",
        	},	
    	"fr": {
			"Hello": "Bonjour",
			"Goodbye": "Au Revoir"
		}
};

In my document I would create corresponding labels that would contain the translations.
Then when my Edge document would load (compositionReady) I would do the following.

First, I would run a script that to create a variable from the the URL parameter.

sym.getParameter = function(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null)
        return "";
    else
        return results[1];
}

var Lang = sym.getParameter('lang');

Then lastly, I would easily tell Edge what I wanted translated by the following:

sym.$(“Hello”).html(eval("Localize."+Lang+”.Hello”));
sym.$(“Goodbye”).html(eval("Localize."+Lang+”.Goodbye”));

That was it. To view the correct language all you would have to do is customize the url, for example…

index.html?lang=es
index.html”lang=en

My problem seems to be the eval() portion of my solution.
Can anyone help?

17

OK, got it working. See attached source files. You can use this method to localize any text and keep content separate from design. Localize.zip (23.6 KB)

18

Instead of eval(). You can use,

hypeDocument.getElementById('Hello').innerHTML = window['Localize'][lang]["Hello"];
hypeDocument.getElementById('Goodbye').innerHTML =  window['Localize'][lang]["Goodbye"];
1 Like
19

nice, thanks mate.

20

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: