Hype StateKit (LocalStorage Extension)


(Loves Hype) #1

This extension is a Hype specific interface to LocalStorage and allows for local persistent user data (browser specific). It also extends on the capability of the regular LocalStorage to store complex and nested data. This is a quick first release and more examples will follow on demand.

Demonstration:
https://playground.maxziebell.de/Hype/StateKit/

Hype-file for demonstration
https://playground.maxziebell.de/Hype/StateKit/quickTestStateKit.hype.zip

Runtime:
HypeStateKit.js
HypeStateKit.min.js

Updates:
1.0 Initial release with simple example


Offline cache - keeping current position of app
Best way to manage data into hype web page animation project
Retaining symbol scale and accurate boundaries across scenes
#2

Thanks for the reply! I’m having a look at your demo files, thanks for sharing them.

I get the principle, but I think it is a shade beyond me in terms of code (I’m more UI/UX visual design - with a relatively good understanding of code, but I don’t do much myself).

Looking at your files and I’ll give it a shot.

I was hoping there would be an easy (or less code biased!) way to ‘save state’. I just need to reopen the app in the same spot of the timeline. No other info is required because it is essentially just a presentation.

Good luck with your project too!


(Jonathan Deutsch) #3

This is a cool project. I wonder if there’d be value in transparently listening to the Hype load event and calling loadState then. And/or using getter/setter to do this transparently on a customData object so it can be treated like normal JS.


(Loves Hype) #4

Thought about this too but discharged it for now as I didn’t want to have a fixed mapping. But it certainly is easier for newbies. I’ll look into it (at the least as an option).

Thanks for the suggestion°


(Loves Hype) #5

Well, there is at least one downside to using getters and setters … they only fire if you directly set them. So if one would assign an object to hypeDocument.customData = {}; and later set a key on the customData like hypeDocument.customData.name="tom"; it won’t fire the setter on customData only hypeDocument.customData = {name:'tom'} will do that. This can lead to the false sense that something has been saved and would demand some recursive Object.observe/watch logic to ensure that everything works as expected. If there are no suggestions about something I overlooked I will rather not go down this path. At least with function calls one knows that an intended action was triggered.


(Loves Hype) #6

I just realized even though I am not putting the code for a getter/setter version in there (just yet) you can use it if your aware of the limitations. Here is what I was playing around with:

This would be a setter/getter you can play around with

Object.defineProperty(hypeDocument, 'customData', { 
	get: function() { 
		return loadState('customData');
	},
	set: function(stateData) { 
		saveState('customData', stateData);
	}
});

or the following for a pageState

Object.defineProperty(hypeDocument, 'customPageData', { 
	get: function() { 
		return loadPageState('customData');
	},
	set: function(stateData) { 
		savePageState('customData', stateData);
	}
});

Usage is the mentioned ‘regular’ JS variable interface instead of calling JS functions:

/* if the object as never been set before init some data */
if (hypeDocument.customData==null) { 
	hypeDocument.customData = {
		name : 'tom',
		nested : {hello : 'world'}
	}
}
/* DO YOUR STUFF with the data*/

/* LATER the limitation of setter require to triggering the setter */
hypeDocument.customData = hypeDocument.customData;
/* OR define it as a whole object again hypeDocument.customData = {…} */

Although I prefer using saveState(), loadState() functions directly!

As that isn’t that much more work. Actually it’s ruffly the same amount of code without having to think about the limitations of getter/setter and defining them in the first place.

Update:
see below for an example just using Hype StateKit


Further investigation into a “simple” interface:
I am actually thinking of maybe going another route for the “simple” interface based on something like a string based setter/getter allowing for nested objects and default values.


(Loves Hype) #7

Here is the same without using setter/getter:

Update 12 days later
REMOVED CODE HERE SEE EXAMPLE BELOW!


(Loves Hype) #8

Here is a quick function example to make customData a persistent value across page reloads

/* RETRIEVE the data  */
hypeDocument.customData = hypeDocument.loadState('customData');

/* INIT (optional) set to object for pre 612 build */
if (hypeDocument.customData==null) {
	hypeDocument.customData = {}
} 

/* DEFAULTS (optional) set to inital app/animation data*/
if (Object.keys(hypeDocument.customData).length==0) { 
	hypeDocument.customData = {
		name : 'tom',
		nested : {hello : 'world'}
	}
}

/* DO YOUR STUFF with the data in hypeDocument.customData (interaction) */

/* SAVE it when appropriate */
hypeDocument.saveState('customData', hypeDocument.customData);