I've been using Hype for quite a while. Like since version 2 I think. I've made many ads and animations over the years. It's more than paid for itself indeed. So I appreciate Hype quite a lot. But I've recently starting using it to create reactive overlays and alerts for streaming on twitch. Which - as you might imagine has some excellent creative potential.
I'm now at the point on my journey where I find that I need to be able to create more dynamic content. Meaning I need to be able to pass and use variables from Twitch/OBS and a bot. HOWEVER, I'm barely even a beginner when it comes to javascript - and at nearly 54 years of age, i'm sad to report that learning to code is proving to be a bit of a challenge.
None the less - i'm determined to make the most of this awesome software, and plan on figuring this stuff out. With a little help hopefully.
I'm creating a New Follower Alert with some basic simple text boxes moving about on the screen. But one of these boxes needs to be the name of the new follower. I have a bot which runs locally on my PC and can pass a URL to an OBS browser source. So triggering the alert is pretty simple.
The plan is to include the new follower's name within the query string of the URL like this:
Http://...../newfollower.html/?newFollwer=Daniel
Of course, what's (not) so simple in my case - is knowing how to create/use/implement the correct function(s) etc to display the content of the variable (newFollower) in the text box.
I'm hoping there is someone willing and patient enough to help guide me through the steps necessary to accomplish this.
This should be relatively easy to do with something like:
let params = (new URL(document.location)).searchParams;
let name = params.get("newFollwer");
console.log(name)
Not used Twitch so would like to see an example of what you are doing as I am not 100% this is the best way of going about this.
It reads as if you already have this info from your Bot before you make your query url?
Can you post an example project + explain more on the process of getting the new follower info from the bot and how the response is received & what the response is ?
To follow up on @MarkHunte's code, the second part would be putting the name in a text box. Generally the easiest way to do this would be to assign a Unique Element ID to a text element via the Identity Inspector in Hype. Let's say you put in "newFollowerName" there. Then you can add this code (likely to an On Scene Load handler) to do the whole flow:
let params = (new URL(document.location)).searchParams;
let name = params.get("newFollwer");
hypeDocument.getElementById("newFollowerName").innerHTML = name;
It would still be good to get more details on the flow and such with twitch/obs to make sure this is the best advice.
Thanks so much for your responses. I appreciate it a lot.
I'll try to explain better;
I have (attached) a very simple animation involving a few text elements.
One of them is simply a placeholder for the contents of the {{newFollower}} variable.
The bot creates the necessary URL programmatically and refreshes the OBS Browser Source with that URL. The URL will include the query string: ?newFollower=Fredric at the end of it. Which will create a browser side variable that can be accessed directly by the javascript in the hype page. The URL will look like this; http://localhost/folder/notification.htm/?newFollower=Fredric
So unless i'm mistaken, all that needs to happen is; The html in the text element needs to display the contents of the newFollower variable - which should already be available in memory because it was included in the url that called the page.
Also do not use full stops in the file names. "." They are reserved for file extentions and can cause issues when used.
Just to be clear you only have access to the new follower Name via the url and not directly from the Bot
Can you explain the OBS Browser Source.?
Is the url the main pages url or is it some how separate.?
Is the OBS browser source some sort of widget that the hype is embed in?
At the moment our approach is to read the url of the page the hype is embedded in.
If the OBS browser source is a widget with the hype embedded inside it and the widget itself inside another page, this approach may or may not still work.
It will depend on how the widget is made up and if it indeed has a location url object it can access via the normal method we are trying to use.
is there an API for the OBS browser source for javascript ?
It uses an on scene load handler to extract the parameter and if it exists then it will make the replacements. I made a couple changes from what was above mentioned:
Since your screenshot has multiple usages and it is in a sentence, I'm using <span> tags with class names in the Inner HTML of the element
The code then uses a loop through all matching classes (and the code is a bit different than @MarkHunte's original suggestion)
You can add a setInteval to auto detect the change also. Which saves from reloading.
This example uses @jonathan's loop code inside a setInteval of one second. You can set it to what ever you want.
The example also has a button for testing that will change the query each time it is pressed to a different name. Which in turn will be picked up after the setInteval fires.
Thanks so much for everyone responding.
We've managed to get the job done.
Turned out quite well.
Here's the finished result if anyone wants to see or play with it. NewFollowerAlert.zip (110.8 KB)
... just add a query string to the url of the page to see it work. ?newFollower=SomeNameHere
