Is there a way to make an iBooks widget Not reload when closing/opening book?

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 :slight_smile:

1 Like

It seems possible to accomplish my goal with some javascripting - localStorage - but I can’t seem to wrap my head around it. But I only have about 1 hour of experience with javascript, so… :slight_smile:

Cookies...

Local Storage...
https://discussions.apple.com/thread/3686472

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.

localStorage.stars=stars;

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.

Would it be doable for someone like me with hardly any javascript-experience and very little html-experience (I can read and understand some of it, but writing - not so much) to get a localstorage-script-thing working through trial and error and tutorials or is it a task that demands having solid javascript experience?

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:

<script language="javascript" type="text/javascript">
		var $input = $("input#studentName");
		if(localStorage.studentName) {
			$('span#lastSaved').html('(last saved: ' + localStorage.studentName + ")")
		}
		$('#btn-save').click(function () {
		 var studentName =  $input.val();
		 localStorage.studentName=studentName;
		 localStorage.completedActivity1=true;
		});
	</script>

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.

Like I mentioned before, this is an opportunity to expand your expertise. It's actually a pretty good first project in JavaScript. I was surprised at how easy it was to add High Score saving to my project.

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 :slight_smile: 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 :slight_smile:

No offense to @Daniel :smiley: but I think jQuery should be avoided when possible.

Here's a list of what will be helpful in figuring it out...

Conditionals...

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...

localStorage.stars

That stores your value. Learning about variables is important.

Then, by combining those two, you can move around the Hype Timeline or switch scenes. That involves the Hype JavaScript API...

hypeDocument.goToTimeInTimelineNamed(0, 'timelineName')

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 think that's a good starting point. By figuring out some of the basics in JavaScript and how to use that to leverage the Hype API, you should be able to do a lot more than what's available with the no-coding part of Hype.

Great, thanks!!
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 :slight_smile:

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?

1 Like

Hey @anton

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 :slight_smile: 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 :smile:

1 Like

Ok. So, my four weeks of 170% work load is over and I’m ready to do this. :slight_smile:

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:
hypeDocument.goToTimeInTimelineNamed(0, ‘timelineName’)

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 :wink:

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 :slight_smile:

So then, instead of:
hypeDocument.showSceneNamed(‘1’)
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?

Hi

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

http://www.w3schools.com/html/html5_webstorage.asp

2 Likes