I’m not sure if it works in iBooks, but did you try using cookies?
I ate cookies yesterday, that’s about as far as my competence stretches
Local Storage seems like a good place to start expanding your expertise. It seems that this is a common issue with iBooks and Local Storage might be the solution.
I am a bit pessimistic though - since the widget-“icon” in my ibook serves as my first star and the other stars are inside the widget - but replaces the Icon. I guess that even if I could manage to get local storage working, I would probably have to click on the widget icon to get the “latest” star I was on…
I’m confused. How are you displaying the widget icon in iBooks? Do you mean the default image? If that’s what you mean, then you can just set the Widget to play automatically.
It sounds like you’re building a level select. The first scene in Hype can be the level select – which is automatically updated by the local storage value.
So if “stars” equals 1, then it goes to frame 1 or scene 1. If it equals 2, then it goes to frame 2 or scene two.
I tested it out in A Book About Hype. It’s an iBook that uses widgets created with Hype. Now one of my examples should have savable high scores.
That is very true, I didn’t think of the play automatically-setting! Then it should definitely be doable.
Here’s an example of storing local storage data within a Widget: https://github.com/widged/iBook-widgets/blob/master/widgets/localStorage.wdgt/main.html
And here is the finished widget: localStorage.wdgt.zip (113.4 KB).
It uses jQuery to make this a bit easier, but here is the core code for storing / retrieving data:
It keeps track of whether an activity has been completed and the student’s name.
You could periodically run
hypeDocument.currentSceneName(); to get the current scene, and write that to local storage, but there are many ways to do this. I’ll put together a demo soon.
It does take patience and determination, as there are issue that appear. I call this “Grinding” in my book. It’s hard to be a developer because of the constant problem solving. It’s like lifting weights with your mind. Yet, by powering through it, you can become much better at web development.
I don’t want to give the answer away, as solving problems is how to learn, but it’s certainly much easier than what Daniel just posted. jQuery isn’t necessary. Don’t let that example scare you.
Allright! Well, I’ve have spent alot of time grinding before and the problem solver in me loves it. And hates it But yeah, I’m up for it. But would Daniels example be a good start or do you have somewhere you can point me that doesn’t include jquery? I feel like googling localstorage might be a bit ungraspable
No offense to @Daniel but I think jQuery should be avoided when possible.
Here’s a list of what will be helpful in figuring it out…
If something is true, then run code. In your example, you’re switching the scene or frame position based on the number of stars.
We’ve already established the main part of the code…
That stores your value. Learning about variables is important.
A major hint – line up the keyframes with the number of stars… If localStorage.stars is greater than zero, then go to frame localStorage.stars.
I’m gonna start the grind in a few hours, gotta go to the piano and write some music for next weekends gigs first before I start writing code
So, should I write the code into the _hype_generated_script.js-file in the widget or in the html-file? Or is there some way to code inside Hype?
Did you figure it out?
Hey! Thanks for the check up!
Honestly, the last two weeks I’ve been working in an office full time and on my free time I’ve been preparing and playing on a lot of church music-gigs. So if I grind on my almost non-existing free free time I’m gonna hit the wall But next week my schedule should start clearing up a bit, and then I’ll start. I have this page always open in a tab so I don’t forget it. And when I start I’ll definitely fill this page with new questions
Ok. So, my four weeks of 170% work load is over and I’m ready to do this.
Just to be clear about how my simple widget works. It’s about 120x120px. I have four scenes, the first is just blank/ a white rectangle on a white background, the next scene has a bronze star in it. Next scene has a silver star, and the last scene a gold star. You go to the next scene by clicking the rectangle or star.
Now to the coding. (I feel like I have no idea what I’m doing)
I understand that by writing localStorage.stars i create a variable that will be able to store info about the last visited star in my widget. I’m guessing I just named the variable ‘stars’, right?
Ok, so logically, I guess I somehow need to tell localStorage.stars to store the name of the scene I’m at every time a new scene is visited. Should there be js-code in each scene then, telling localStorage that this scene has just been visited?
Secondly I need to have some kind of code in the first scene saying that IF there is any data pointing to a scene in localStorage.stars then I will go there. And if localStorage.stars is empty or filled with “1” then I’ll just stay on scene 1. I guess I could assign value 1 to the variable right away.
But if I’m using scenes, can I move to another scene using this code:
Isn’t this only for moving within a scene?
I feel like I kind of know what I need to do, but I have no idea where to start.
You can navigate the scenes using the Scenes functions in the API
You could then name your scenes 1, 2, 3, etc… and go to the scene with the value of localStorage.stars perhaps
Ah, of course
So then, instead of:
could i instead write something like:
hypeDocument.showSceneNamed(‘stars’) or something to make it go to the scene contained in the stars-variable?
And, how do i declare the localStorage.stars? As a variable? var localStorage.stars?
storing something in localStorage is as simple as
localStorage.stars = “some value”;
You do not need the “var” before it as it is already globally accessible. (It’s built in to most browsers)
You would use it something like this.
to set it -> localStorage.stars = “gold”;
to get it (and use in Hype) -> hypeDocument.showSceneNamed(localStorage.stars, kSceneTransitionCrossfade, 1.1);
Here something that may help you understand a bit better. The above method is a shorthand way of getting and setting localStorage