Hype_Symbol_Override

Quick Start

Rocket image by : Business psd created by rawpixel.com - www.freepik.com

Hype Symbol Override Extension

Sirlon Butt

D - Rump

Round

Advanced

This extension gives you a way to easily override many of a Symbol instance's child element's perameters/properties

The Same Four instances running with the Extension.

As you have seen in the Quick Start or The Video, Individual Symbol instance properties can be overriden to allow each instance of the symbol to be displayed differently and behave differently from each other at load time. Each Symbol's child elements can be assigned a target property type.

The Extension can be downloaded from the GitHub Read Me Page > here

Four instances of a single Symbol on a Scene

fig1

hypeDocument.setElementProperty() API Property Names

Example Values set on a Symbol Instance

By Default for these Property names, in fig 1 the Extension will try and use The hypeDocument.setElementProperty() API to override

Property Names can be for: hypeDocument.setElementProperty() API property Names, css property Names, element HTML property Names.

fig2

data-bindingName: Properties ( hypeDocument.setElementProperty())

You can add duration timmings to any of the hypeDocument.setElementProperty() API that take them value : The property value to pass in for the override.

Values set on a Symbol Instance with duration

duration : The duration value for a hype API setElementProperty. (optional) This comes after the value and is separated by a comma. The duration value is here for completeness in reflection of the setElementProperty API usage. In most cases you will do any animaions on elements using the normal means within hype. But adding a duration here will also allow for the same type of animations afforded to using the setElementProperty in an Hype function. (see the Hype zipped example 2)

value, duration ( hypeDocument.setElementProperty())

data-bindingName | value, duration

Docs

data-bindingName: Properties ( css )

Here we we set a text shadow and font size in percent

Remember that many css numbers are followed by ‘px’ in some cases you may need to enter a px. i.e 10px

When using css properties, In some cases if you are not getting the expected results, you may need to turn off Protect from external styles and/or set the Position with CSS left/top. Both of which can be found in the Document Inspector.

Here we we set the background image of an Rect and some image properties

There are too many css Poroperties to show here but many of them can be used.

The extension will try and test for valid css properties and values entered as overrides. If they are found to be ok then they will be overriden as css properties

Original

New Text

As shown in the Quick Start pages, The data-bindingName and Value are entered into the Symbol’ instance Additionl HTML AttributesJust select the Symbol, taking care not to enter into it and go to the Identity Inspector. Click the + button and add a new data-BindingName and the corresponding property value.

data-bindingName override Values and Property names - Entry

The data-bindingName and Property names we want to override are entered into the Additional HTML Attributes of an Element inside a Symbol

Just select the Symbol and enter into it. Select the Element and go to it's Identity Inspector. Click the + button and add the new data-BindingName and the corresponding property

Here we have a Hype video dropped onto the scene. We use the src property to change its video src and innerHTML to show its Title anc copyright url. The innnerHTML can be simple plain text like ‘ some foo bunny text’ It does not have to be complex or HTML code.

For example, innerHTML, innerText, src (Hype Audio/video object), borders etc..

Elements Properties can directly be overriden

data-bindingName: Properties ( element )

Video Title

The Property Name: The property Name to pass in for the override.

bindingName : Matching name on a Symbol’s child element

Construction of data-bindingName, Propertyname and Values

data-bindingName | Property value

The data-bindingName data- : All names must start with this.

bindingName : The arbitrary name you give to reference an element. this does not have to match any real id you have given to the element. But should reflect in some part the symbols target child element and real world property name so its intent is clear.

data-bindingName | Property Name

Property Value: The property value to pass in for the override.

The data-bindingName and Property names we want to override are entered into the Additional HTML Attributes of an Element inside a Symbol Just select the Symbol and enter into it. Select the Element and go to it's Identity Inspector. Click the + button and add the new data-BindingName and the corresponding property

You can add duration timmings to any of the hypeDocument.setElementProperty() API that take them

value : The property value to pass in for the override.

data-bindingName | value, duration

When using css properties, In some cases if you are not getting the expected results, you may need to turn off Protect from external styles and set the Position with CSS left/top. Both of which can be found in the Document Inspector.

Here we have a Hype video dropped onto the scene. We use the src property to change its video src and innerHTML to show its Title anc copyright url.

For example, innerHTML, innerText, src (Hype Audio/video object), borders etc..

The innnerHTML can be simple plain text like ‘ some foo bunny text’ It does not have to be complex or HTML code.

Docs

But on the Symbol Instance we have it as data-text1_innerText1

Here we have a the dataBindingName spelt wrong. On the Symbol’s Child Element in the Symbol override. It is data-text1_innerText.

Error Logging.An error will occur if there is a mismatch in the data-bindingName being used. An error will be thrown in the console giving details and info to help find the mismatch. Data for each error overide in a Symbol instance will be shown. Symbol ID Mismatched data-bindingName Symbol Instance Overrides Expected sent from the Symbol to the children elementsCompleted overrides data-bindingnames and values accepted by the children elements

Error Logging

On the Symbol’s Child Element in the Symbol override. It is data-text1_innerText.

Here we have a the dataBindingName spelt wrong.

Printing a debug log You can add the single javascript line hypeDocument.printDebugList() to normal Hype Javascript function and run it on the first scene’s onload. This will enable debug logs and print to the console. It will give the following data. This is handy if you are not getting the values where you expect. Data for each fully Completed overide for a Symbol instance will be shown.Symbol IDSymbol Instance Overrides Expected sent from the Symbol to the children elementsCompleted overrides data-bindingnames and values accepted by the children elements, including the property type the extension has used : Hype Api, css, Element , General property types

Debug Logging

The data-bindingNamedata- : All names must start with this. bindingName : The arbitrary name you give to reference an element. this does not have to match any real id you have given to the element. But should reflect in some part the symbols target child element and real world property name so its intent is clear. The Property Name: The property Name to pass in for the override.

The data-bindingName data- : All names must start with this. bindingName : Matching name on a Symbol’s child element The Value: The property value to pass in for the override.

data-bindingName | Property Name

data-bindingName | value

GitHub

Implicit Typecasting for CSS properties

For background-image , contain the url inside a css url container as you normally would if using these as a css property in a style . This should then let the extension treat the override as a css property override instead of Hype override. Example: url("https://avatars.githubusercontent.com/u/6317734?s=60&v=4”) or Image layering linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("https://avatars.githubusercontent.com/u/6317734?s=60&v=4")

For : top , left , width , height Remember to place px after the number as you normally would if using these css properties in a style. Example: 10px

As mentioned, There are properties that will default to the Hype API to override them. top , left , width , height , background-image and opacity It is recommended that you let this happen. But there may be an occasion where you want to use a css override rather than the Hype API. When you wish to override any of the properties that are the same as the Hype api named properties. You must use the implicit naming of css: in the override. i.e css:top , css:left, css:width, css:height, css:opacity , css:background-image

Implicit Typecasting for CSS properties

For : top , left , width , height Remember to place px after the number as you normally would if using these css properties in a style. Example: 10px