Since the project is on GitHub, maybe GitHub Sponsors · GitHub is a better way to go?
1 Like
Thanks will look at that.
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?
1 Like
jonathan
1 Like
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! 
1 Like
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).
2 Likes
Thanks,
Yep. I will be finding myself using this a lot.
Just very convenient.
1 Like
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.
4 Likes
Would be interesting to see both your takes on this and Layouts.
1 Like
Like this:
iPad:
iPhone6:
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.
3 Likes
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
--
1 Like
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)
1 Like
I assume you mean for vectors/svgs properties. That would be great.
1 Like
Slight update to docs.
Realised I had some instructions back to front on the third page for dataBinding Names & Values .
Corrected.
1 Like
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
can you post a small example project of what you want to do, so I can may be understand better.
The intent of the extension is to setup multiples of a symbol with different properties at run time.
All changes take place at run time.
If you hit a button to change one of these attributes/properties after that time, it is to late. The extension has already run.
Saying that, back when I first published the extension v1.1.4, I already had extended it to create and run custom events in a inhouse version 1.1.5 - 6.
The intent of this is you would be able to populate the attributes with special custom data-binding-names that signified it will be using an event listener so do not run until that is fired.
You would add code ( a couple of lines ) to have the extension build your custom events.
And use the stem() function to catch the events and either run on the attributes or do something else. ( more code)
This allowed for the extension to become interactive, i.e events triggered by timeline or buttons.
The later versions are still in house only I am afraid. They work well but took the extension to an advanced level which I honestly have not gotten around to deploying or documenting as well having a really good use case for throwing it in the mix.
So the v1.1.4 will not do what you want where as v.1.5-6 will.
But as I said the intent of the main extension is initial set up. Even with the custom Events.
So even if you did have v1.1.5-6 I feel it would be overkill in your use case.
For the level of dynamic interaction you intend I think it would best if you use the extension for the initial setup.
And then much simpler to use the normal Hype API to do the interactions after.
i.e just change the image using normal hype code or keyframes.
1 Like