Using Hype Reactive Content in combination with Hype StateKit

1

Hi @MaxZieb

I'm making progress with the project. I want to use StateKit to remember variable values, but I don't know how to write it within the HypeStateKit extension using one of your examples of changing the background picture.

I'm attaching a project that uses the logic I chose for the task. It is the dedicated-content example you created.

Thank you for looking at it.
H
changeImg-dedicated-content_StateKit.hype.zip (64.6 KB)

2

Great to hear, the error you have is that you are setting the values in a static fashion while preparing the scene. That is something you would need to remove:

CleanShot 2022-09-27 at 12.34.55@2x
CleanShot 2022-09-27 at 12.34.55@2x1250×548 123 KB

You have also wired up Hype StateKit save on customDataUpdate (smart!):

Your code for updates:

// add a global save callback on updates
HypeReactiveContent.setDefault('customDataUpdate', function(key, val){
	hypeDocument.saveState('customData', hypeDocument.customData);
})

Explanation: This combination of approaches has the consequence that setting defaults to prepare scene will always reset them to the static wired defaults and store them in local storage through the update handler, overwriting any previous values found in local storage.

Solution: We keep the smart auto-updates and find a compatible way to define the defaults. So after removing the hard-wired defaults we layer them using Object.assign as that gives you a combined object with a hierarchy. Hence, defaults will be overlayed by the data loaded from local storage. This approach is already in your code as a myDefaults object (could have any name). So, just move your defaults there:

var myDefaults = {
	note1: "notePlaceholder",
	note2: "quaver",
	note3: "quaver",
}

The defaults are then applied to customData and made reactive using the Object.assign:

Your code for assignment:

// assign
hypeDocument.enableReactiveCustomData(Object.assign(
	myDefaults,
	hypeDocument.loadState('customData')
));

Explanation: Object.assign combines the two object myDefaults and hypeDocument.loadState('customData') into a single object before making it reactive. The dominant data in this merge is the one last in the list. For example, Object.assign (obj1, obj2, obj3…) would have obj3 keys be dominant. One thing to keep in mind is that Object.assign only merges objects a single layer deep, but that is a topic for another day.

In the following example, I made the changes discussed and also added a reset function.
changeImg-dedicated-content-StateKit-max1.hype.zip (67,8 KB)

2 Likes