Introducing Hype Symbol Override Extension - Override Symbol Instance properties -v1.1.4

[MarkHunte]

Introducing Hype Symbol Override Extension

---

Although Hype Symbol instances share all the same HTML properties, child elements , timelines etc of the Symbol.

It is often the case that you want each Symbol's instance to use different parameters when they appear on scene.

For example you may be using a Symbol to display images and text but want different Images , Text or Colours for each instance.

Hype at present does not have this as a built feature. But this extension allows you to go some way in doing this.

The extension lets you override each Instance using the Hype API, css and HTML Element Properties

Here is a quick guide video that @jonathan has put together that shows it's usage and walks you through how simple the Extension is to use and to add to your Hype Projects.

This extension imho is very powerful and I am sure will become very handy to many of your Projects.

Symbol Override Extension to Tumult Hype

The video is also listed on the Hype Tutorial Page.

The Extension is Hosted on GitHub and is Simple to download.

GitHub - markhunte/Hype_Symbol_Override_Extension: Symbol Instance Properties

You can also add the Extension by its CDN.

Current Version:

<script src="https://cdn.jsdelivr.net/gh/markhunte/Hype_Symbol_Override_Extension@main/symbolOverride.min.js"></script>

---

All Versions released are also held here:

Releases · markhunte/Hype_Symbol_Override_Extension

---

The Read me Page on GitHub has links to a Quick Start Page as well as some documentation.
Both also here

Quick Start page
which includes a guided example.

Documentation.
Extra stuff that may be helpful to know.

Demo Page showing four instances of a Symbol and different Property overrides.

Starting version is v1.1.3p

---

I have setup a GumRoad account,

The Extension is free but if you find it useful please consider going to it and downloading again and using it to make a one off donation

Which may help me one day to replace this old MacBook I am using to help out on the forums .. many thanks.

Mark Hunte

( hopefully I have set it up right, first time ever asking for donations etc.. )

---

I took @Photics advice and set up Github Sponsor , buttons which will show on the Github pages.
I am not used to this concept of donations or sponsorship, a big thanks anyone to any one who does.

Have fun

---

---

Thank You for your £donation

---

---

History

updated to Versions: 1.1.4 - 5 March 2021

v1.1.4 changes. Put all Hype API properties in the exclude check. Must use css:propertyName when overriding css properties of same name.
This Fixed an issue with a bug in the CSS.support method. The use of a 0 as a value for left,top returns true when it should return false.
This result in top/left 0 values being resolved as valid css and bypassing the Hype API. a valid css should 0px. Using anything above 0 with no px returns false as expect.

[Photics]

@MarkHunte

hopefully I have set it up right, first time ever asking for donations etc

Since the project is on GitHub, maybe GitHub Sponsors · GitHub is a better way to go?

[MarkHunte]

Thanks will look at that.

[Photics]

@MarkHunte

The video

Who's speaking there? I'm not sure if it's @jonathan, @Daniel, or someone else.

I think this is another example of why Tumult needs a content creator store. It sounds like a lot of excitement here, so why not build on it?

[MarkHunte]

@Photics

Who's speaking there? I'm not sure if it's @jonathan, @Daniel, or someone else.

jonathan

[MaxZieb (Loves Hype)]

Congrats! It's like DataFill but with backwards mapping (elements telling parent what they want to listen for) instead of global mapping like in DataFill. Also, I never added a custom callback it was only a hard coded innerHTML (hence data fill). This code inspires to rectify this oversight.

Nice work!

[Djon]

This is a great tool Mark! It especially becomes handy to be able to change the look of a symbol on different layouts (phones, pads).

[MarkHunte]

Thanks,
Yep. I will be finding myself using this a lot.
Just very convenient.

[jonathan (Jonathan Deutsch)]

@Djon

to change the look of a symbol on different layouts (phones, pads).

Oh absolutely right! I now wish I had demo'd changes in layouts in the demo video.

One other thought about this is that it gives extra incentive to making reusable components to share with others. You can document which properties are available for override, and so symbols will be much more valuable.

[MarkHunte]

@Djon

This is a great tool Mark! It especially becomes handy to be able to change the look of a symbol on different layouts (phones, pads).

@jonathan

I now wish I had demo'd changes in layouts in the demo video

Would be interesting to see both your takes on this and Layouts.

[Djon]

Like this:

iPad:

iPhone6:

[MarkHunte]

updated to Versions: 1.1.4 - 5 March 2021
Fixed an issue with a css.supports bug. .
See Above for links for GitHub downloads

This issue mainly occurred if you used left or top with a value of 0 (zero)
The css.support has bug that returns this as a valid css value for left or top . And therefore bypassing using the HYPE api ( Which is preferable ) and instead would use css methods which would fail due to a 0 without px for left, top is actually invalid. ( The bug is not the extension's but the browser css.supports method )

This is in the Docs - Implicit Typecatsing for css #Typecasting , but is more important now.

When you wish to override any of the properties that are the same as the Hype api named properties.

top , left, width, height, opacity , background-image

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

---

---

Credit to @Djon for initially spotting there was an issue with 0 values.

[MarkHunte]

In the thread Repeatable animations
@CheeseDeluxe was trying to change a svg colour fill's color.
But could not get the extension to do this.
The answers given are correct in regards to how svgs work.
But not exactly true that the extension cannot be used to do it.

I have spoken to @CheeseDeluxe in relation to what this extension can do.
I mentioned to CheeseDeluxe that I have not detailed the below yet as I have not written the documentation nor put together complete examples also I wanted the extension to soak in a bit..

But I kept feeling that his thread was not complete and have decided to give everyone a sneak peek at what is buried in the extension for future advance usage.

I will try and be brief here and only explain in regards to this example, so I am not sure how well this will come across. And hopefully I can get the docs and examples together that will help.

The extension has all ways had a special function which can be used to customise your own
property typecasting, Similar to what we do for the css property types mentioned in the doc Implicit Typecasting

But special case overrides for symbols elements that are not included in the Hype_Symbol_Override_Extension itself.

I call this a stemming function.

The use of the stemming function is optional.

Meaning the Hype_Symbol_Override_Extension can run without the stemming function being used.

•If you do want to use it. Then you must create a Hype function and name it stem

•You do not need to call this function via a Hype action ( like on scene load)

•If the stem() function exists as an hype function, the Hype_Symbol_Override_Extension will find it.

The stem() function arguments contain data on the
•datasets,
•target element,
•target property,
•case condition ( the property type to use in a switch statement condition )

Thes args are passed into the stem() hype function via element object in the (hypeDocument, element , event) of the function as a key/value object.

You can console.log(element) in the function to see what is being passed.

The stem() function will run during the same time as the Hype_Symbol_Override_Extension runs.
which is at symbol load.

The override in this example was originally written for hypes vectors ( an experiment example) to change the fill colours rather than a svg directly but there was little to no code change.
The example below actually includes svg and vectors to show this.

we use our own custom Implicit Typecasting with our own arbitrary type name.

For example here we use then type name vector:
And target the fill property.

vector :fill

---

In the stem() function we use a switch statement condition to filter the targets by the _property typecast

and use our own construction to target the correct property and change it.

try {
	 var caseCondition = element.property_string.split(':')[0]
	 var _property = element.property_string.split(':')[1]
	
  
	if (_property){
	 
			
	 	 switch( caseCondition) {
 
      	case 'vector':
      	
      	var svg =element.thisElement.querySelector('svg') 
         
      	 
      	 //-- CHANGE VECTOR/SVG FILL COLOURS   (vector:fill)
      	  if ( _property ==  'fill'){
       
        svg.querySelector('path').style[_property] = element.theDataSet[element.key] //-- element.key = value for the override
          		
      }
       
      
         
       	break
       	 }
	} 
	
	}
	catch (err){
	console.log(err)
	}

This is just one example of what you can custom, fo example you can a custom typecast to override video src. ( will be included in the examples )

Any way as I say I will get around to adding the examples and docs hopefully soon.

svg fill.hype.zip (26.7 KB)

p.s, the svg code is in the innerText of the rectangles.

---

A vector

--

---

[jonathan (Jonathan Deutsch)]

Nice! (I've also filed a bug for the getter/setter API to provided more background options, since it does seem like the API should probably handle this)

[MarkHunte]

@jonathan

(I've also filed a bug for the getter/setter API to provided more background options, since it does seem like the API should probably handle this)

I assume you mean for vectors/svgs properties. That would be great.

[MarkHunte]

Slight update to docs.
Realised I had some instructions back to front on the third page for dataBinding Names & Values .
Corrected.

[theron_hp (Herman)]

Hi @MarkHunte

I'm exploring using this extension in a game I'm wanting to develop. Is there a way that one can add a variable in the value field of an html attribute whereby a user can dynamically change the value depending on what they select. My use case is for the background-image value. So instead of ${resource folder......} I add hypeDocument.customData.selectOne.

Is that possible? Thanks.

Herman

[MarkHunte]

can you post a small example project of what you want to do, so I can may be understand better.