Hi,
A little lost understanding what you want.
Are you asking how to just change the text of a text box without the typing effect?
Hi,
sorry for my english.
I like to use the typing effect.
But I try to change the text at the hype scene (hype.element) and not inside the javascript.
In the sample the text is written inside the js at the point "var charArray =…"
But I can not use the hype.element “text” to change the text with typing effect.
Hope you understand what I mean.
Kind regards
Jonas
If understand you, you do not want to use JS to do the typing.
Then you just need to use timeline properties. innerHTML.
Have a look at how the original poster of this post did it. The example project they posted does this. Ignore my input about JS later on and what the thread is originally about
Hi Mark,
I was looking to your typewriter Javascript function. One question: can I extract the text to be typed from a (hidden) text field on the active scene instead of having the text inside the Javascript function (to fill the charS variable with data extracted from a text field)?
Thank you!
Do you mean a form text input. You should just be able to get the forms value. There are plenty of examples of retrieving form input on the site. This should be pretty simple. And you would for example set var charArray to the value returned.
Yes of course, Mark… This was not a very clever question. Thank you for the reply.
Hi DBear, I have tried to rebuild your solution to this but am unable to get it working. Could you have a look at the file for me please?
texttype.zip (19.0 KB)
You have the latest version of Matt Boldt’s script which unfortunately uses ECMAScript which is not natively accepted in browsers yet so you would have to compile it with Babel (others are available) to make it compatible in browsers.
Here is the copy that I used back with the original post. When the script was in a compatible form.
typed.js.zip (4.4 KB)
2 Likes
Well, I don’t know what’s going on here (well nothing actually!) I copied your document but cannot get it working. Could you cast an eye over it please?
Typewriter.zip (23.5 KB)
1 Like
If I used this code for init I can get it mostly working:
var typed = new Typed(".typed", {
strings: ["Some text should appear here"],
typeSpeed: 1
});
This is what I found on the typed.js site
The cursor isn’t positioned correctly though, I don’t know why that is.
Thank yo Jonathon. I have noticed that when using the downloaded .js file it is 36kb and doesn’t work but when I copy the .js file in the example document it is 14kb and does work!
Ian
I suspect the code you had before might have been from a different (older?) version, so it probably was correct at some point!
Hi @ianben
Apologies for the delay as I have been away for a few months.
As mentioned before and when I posted the original examples I was using an older version which has a slightly different syntax as to the now “updated” typed.js which is now in a newer version to when this example was written. This is why the code that Jonathan has posted would work as the syntax has changed. This, unfortunately can happen when threads are quite old. 
The newer version of typed.js looks to be incorporating the new trend of using installers to install it into an environment that would probably use it as a module and would have a compiler and such to transform the ECMAScript into the Javascript equivalent. Not to say it can’t be used standalone but it would mean a change in approach to making it work in Hype.
cc @jonathan
I will put this up on the extensions page shortly .
This combines my codes for Typing text in Auto or on keydown, including iOS.
I am unable to test other devices.
Here is an example template with it in use.
TypeTextExtension_v110.hypetemplate.zip (48.8 KB)
Construtor Examples
var textElement = document.getElementById('textRect');
hypeDocument.TypeTextExtension({
textElement:textElement,
typeType:"auto",
autoSpeed:200,
hasCursor: true,
cursor:"|",
cursorColor:"red",
typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
})
var textElement = document.getElementById('textRect');
hypeDocument.TypeTextExtension({
textElement:textElement,
typeType:"auto",
autoSpeed:200,
typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
})
var textElement = document.getElementById(‘textRect’);
hypeDocument.TypeTextExtension({
textElement:textElement,
typeType:"keydown",
hasCursor: true,
cursor:"✍️",
typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
}
var textElement = document.getElementById('textRect');
hypeDocument.TypeTextExtension({
textElement:textElement,
typeType:"keydown",
typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
}
Construtor object break down
-
textElement: = {Element} : The {Element} that is the typed text target. Must be entered
-
typeType: = {String } : {{“auto”/“keydown”} The type of typing behaviour. Auto type or on Key down. If not entered default will be ‘auto’
-
autoSpeed: = {Number} : {Number} The speed of the auto typing text. If not entered default will be 200
-
hasCursor: true: = {BOOL} : only really need true bool
-
cursor: = {String} : {String} The characture you want to use asthe Blinking cursor symbol, can be emojis also. If not entered default will default will be ‘|’
-
cursorColor: = {String} : {String} The colour of the cursor. If not entered default will default will be ‘white’
-
typeString: = {String} to be typed. Use
<br>as break points/newlines
3 Likes
really cool!
1 Like
The Extension and latest Version with New Options can be found now on the
1 Like
Thanks for the wonderful script. I’m a complete amateur, but do you have any suggestions on how I can indent the first line of the type string? Maybe by 5 to 10 px?
You made the line break code extremely easy to execute. Does indentation have a simple code too that I’m not aware of?
Just for you.. 
And a very quick look at it..
See last edit in
@MarkHunte thank you so much for your help. It really helped me a lot and helped me create the following. Again, I’m learning this all from scratch and I spent days learning how to make this based on your work. Dialogue Example.zip (19.8 KB)
I have two quick questions for you. My current method requires me to create a new java script function (type text1, typetext2, etc.) for every dialogue box and then to link it with a Unique Element ID (textBox1, textBox2, etc.). That’s fine for now, but when I want to have 30 pieces of dialogue in one scene it can get quite cumbersome.
Question 1: Is there a way to create new dialogue lines in one (typeText) java script function? Currently it only references one set of dialogue.
Question 2: Is there a way to link multiple dialogue lines in one Unique Element ID (TextBox)?
For example, PERSON #1 (textbox1) would talk. They would then wait for person 2 and maybe person 3 to talk and then PERSON #1 would talk again, all from the same (textBox1)
Before I messaged you, I earnestly tried to do it myself and failed multiple times. Let me know your thoughts or if you need more clarification. I appreciate your thoughts.
Thanks!
2 Likes
Of the top of my head maybe something like this.
Have each timeline action call this as you are doing in you example. But all of them calling this single code.
I have commented in the code…
//- Set up a call counter to use as an index
if(typeof window.speakIndex == "undefined") {window.speakIndex = 0 }
//-- list the conversation in the order you want it in an Array which holds Associated Array objects. ( key /value objects)
//-- boxID = the box elements id
var boxPeopleConversation = [
{boxID:"textBox1",speed:50,ttext:"Hello, how are you"},
{boxID:"textBox2",speed:50,ttext:"<indent>I'm fine, you?"},
{boxID:"textBox3",speed:50,ttext:"The weather is nice"},
{boxID:"textBox4",speed:50,ttext:"Yes it is"},
{boxID:"textBox5",speed:50,ttext:"See you later"},
{boxID:"textBox6",speed:80,ttext:"<indent>Take Care"}]
//-- use the index number to get the Array object at that index in boxPeopleConversation.
//-- An Array item index starts at 0 not 1. i.e index 0,1,2,3,4,5 would be six items
//-- Then we use the keys to get their values. i.e boxID, speed, ttext are keys. their values folloews after the ":"
var textElementID = boxPeopleConversation[window.speakIndex].boxID
var txtString = boxPeopleConversation[window.speakIndex].ttext
var speed = boxPeopleConversation[window.speakIndex].speed
//-- we don't want outof bounds error. i.e the calls may exceed the number of objects in the boxPeopleConversation Array.
//-- So we put a condition in to to counter going beyond the number of items in the Array.
if (window.speakIndex <= boxPeopleConversation.length){
//-- we call the function that will pass on the latest arguments to the TypeText function.
coversation(textElementID,txtString,speed)
}
function coversation(textElement,txtString,speed){
var textElement = document.getElementById(textElementID);
hypeDocument.TypeTextExtension({
textElement:textElement,
autoTypingSpeed:speed,
typeString:txtString,
hasCursor: {
cursor:"" ,
cursorFontSize:28},
})
//-- increase index count by 1
window.speakIndex++
}
TypeText_Dialogue Example.hypetemplate.zip (20.1 KB)
If you wanted just two boxes for example you would have you Array like this.
var boxPeopleConversation = [
{boxID:"textBox1",speed:50,ttext:"Hello, how are you"},
{boxID:"textBox2",speed:50,ttext:"<indent>I'm fine, you?"},
{boxID:"textBox1",speed:50,ttext:"The weather is nice"},
{boxID:"textBox2",speed:50,ttext:"Yes it is"},
{boxID:"textBox1",speed:50,ttext:"See you later"},
{boxID:"textBox2",speed:80,ttext:"<indent>Take Care"}]
TypeText_Dialogue Example_just twoBoxes.hypetemplate.zip (16.7 KB)
2 Likes