5. Pixel Streaming - Interactive Website Elements

Introduction

In this section, William Orving introduces himself and the topic of the tutorial series.

• William Orving is a Technical Artist for Epic Games.

• The tutorial series is about pixel streaming.

Adding Interactive Elements to Your Website

In this section, William explains how to add interactive elements to your website using HTML sliders as an example.

Searching for HTML Sliders

• To find HTML sliders, search for "HTML slider" on Google.

• A useful website for examples is "w3schools.com".

Using an Example Slider

• Copy the HTML code from the example slider on w3schools.com.

• Paste it into your own ".html" file under the "player" div tag.

• Save the file and refresh your website to see the slider.

Styling the Slider

• Copy the CSS code from the example slider on w3schools.com.

• Paste it into your own ".css" file at the bottom of the document.

• Save and refresh your website to see a styled slider.

Changing the Slider Icon

In this section, the speaker explains how to change the slider icon on a website using a useful website called "Iconify".

Using Iconify to Change Slider Icon

• The current slider icon is based on a local link to a file on your computer called "contrasticon.png".

• To change the icon, use "iconify.design" which is useful for copying icons and using them in your own website.

• Search for an appropriate icon such as "camera" and select one that looks good.

• Copy the CSS code from Iconify and paste it into your website's CSS file.

• Repeat this process for "-webkit-slider-thumb" as well.

Updating Slider Value with Javascript

In this section, the speaker explains how to update the slider value with Javascript.

Creating Variables in Javascript

• Create a variable called "slider" which refers to the slider element with id "myRange".

• Create another variable called "output" later referred to as "demo", which will be used after the value here in HTML.

Sending Input Value Using emitUIInteraction()

• Similar to buttons in an earlier tutorial, create an input whenever we change this value and send it using emitUIInteraction() function to Unreal.

• Create a new function similar to onConfigButton() that sends descriptor values.

Creating an Event Value

In this section, the speaker explains how to create an event value using a category and descriptor data.

Creating an Event Value

• An event value is created by receiving a "category" and an "event" value.

• The event can be named "e" and enclosed in curly brackets.

• The descriptor data can be pasted into the curly brackets.

• To get the ".getElementById("myRange");", copy it from the website where the slider is located.

• Add this part to the beginning of the event value.

Using Oninput Function

In this section, the speaker explains how to use oninput function in HTML file.

Using Oninput Function

• Use "oninput" function whenever a value is changed in HTML file.

• Call on the "onsliderinput" event by typing "document.onSliderInput()".

• Feed it with two values - a category value (let's use 4) and an item value (the slider's target value).

Sending Values to Unreal Engine

In this section, the speaker explains how to send category and item values from JavaScript to Unreal Engine.

Sending Values to Unreal Engine

• Use "emitUIInteraction();" as with buttons to send category and item values from JavaScript to Unreal Engine.

• This should send both values which are displayed as Category and Item in Unreal Engine.

Changing Control Rotation Based on Slider Value

In this section, the speaker explains how to change control rotation based on slider value in Unreal Engine.

Changing Control Rotation Based on Slider Value

• Create a function to change control rotation based on slider value in Unreal Engine.

• Use "SetControlRotation" node to reset the control rotation when button 1 is pressed.

Interactive Elements in Websites

In this section, the speaker demonstrates how to create interactive elements in a website that can change the application itself. The focus is on getting the value from a slider and setting the "New Rotation Z" or the "Yaw Rotation" of the camera.

Creating Interactive Elements

• To get the value from a slider, use "OnJSONEvent" to get the "Descriptor" from here.

• If the "Descriptor" has a field name "Category," it goes to "Change Config Option."

• Get the string value of the "Descriptor" using "GetJsonStringValue."

• Use "SetControlRotation" to change control rotation instead of changing environment.

Changing Slider Values

• Change values in ".html" file by modifying min, max, and default values.

• Use "Map Range Clamped" to convert values from 1 to 100 into 1 to 360 degrees.

Interactivity Between Website and Application

• Changes made in application do not reflect on website.

• To show changes made in application on website, use JavaScript or other web technologies.

This section does not have many bullet points as it is mostly demonstration-based rather than step-by-step instructions-based.