Scrapbook position-altering buttons

[Clayburn]

Can someone explain how I can create buttons, like arrows or any png,
that control the view position on scrapbook? I'd like something that
can be done completely inside the content textboxes. I want to know
how to move a certain amont left, right, up and down and be able to go
to a specific position once a button or png is clicked.

[Jonathan A. Marshall]

Clayburn,

Check out the wedding invitation scrapbook in the PartySites section.  Click on the arrow -- I think it does what you want, and of course you can copy that code.  Scrapbook.js contains some animation code that lets you specify a path and speed for panning.

Thanks,
--Jonathan

[Ted]

here's another little example, with 4 way panning and distance based
on viewport:

http://ted.limebits.com/scrapbook-introduction3/?bar



On Jun 19, 10:51 am, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Clayburn]

I had that 4-way panning and centering one. I haven't looked
extensively at it, but I thought it seemed complicated. I know I had
made copies of it, but then something fell apart. The copies (or
actually one of the copies, but not the original) stopped working.
Nothing happened on clicking. Once I deleted all but one, it worked.
However, centering took me to a specific point rather than the control
itself. Basically, I want that, but an unlimited number of them that
will require altering as little code as possible.

[Clayburn]

Also, it seems that the locations it moves to does not change with the
movement of the controls. The center takes me back to where it was
originally. I'd like lots of them that I can scatter around and
people can move and they all work no matter where they're put.

On Jun 19, 11:10 am, Ted <t...@limebits.com> wrote:

[Jonathan A. Marshall]

Hmmm, the 4-arrows control is supposed to stay stationary (class="fixed"), while the rest of the scrapbook slides below.  That feature seems not to be working -- a bug.  And using Edit to set it to Fixed (instead of Float) causes it to disappear -- another bug.

If you (or anyone) develop a fix, please post it here.

Thanks again,
--Jonathan

Clayburn wrote:

Also, it seems that the locations it moves to does not change with the
movement of the controls. The center takes me back to where it was
originally. I'd like lots of them that I can scatter around and
people can move and they all work no matter where they're put.

On Jun 19, 11:10 am, Ted wrote:

here's another little example, with 4 way panning and distance based
on viewport:
http://ted.limebits.com/scrapbook-introduction3/?bar

[Clayburn]

What about fixing its position on the scrapbook, rather than on the
screen? Is that a possibility? Is it possible to set where on the
scrapbook grid the content will be at from inside the textbox coding
for it? Also, would you know how to create duplicates of the 4-arrow
control without having them mess up?



On Jun 19, 4:36 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Jonathan A. Marshall]

Clayburn,

The 4-arrows control is fixed to the scrapbook, rather than on the screen.  If that's the behavior you want, it's working that way now.  Or you can edit the content/controls-fixed.html file to have class="float" instead of class="fixed".

If you look at the <script> inside the content/controls-fixed.html file, you'll see how the 4-arrows control is implemented.   The JavaScript looks pretty simple, and you can customize it to behave however you want.

In what way does duplicating the 4-arrows control mess up?  If you're having trouble with the Duplicate button in edit mode, here's an alternative:  click the Source button in the top bar, navigate into your scrapbook's content/ folder, and click the Duplicate link on controls-fixed.html.  Go to your scrapbook and refresh/reload your browser window.  That should give you two working controls on the scrapbook.

Thanks,
--Jonathan

Clayburn wrote:

What about fixing its position on the scrapbook, rather than on the
screen? Is that a possibility? Is it possible to set where on the
scrapbook grid the content will be at from inside the textbox coding
for it? Also, would you know how to create duplicates of the 4-arrow
control without having them mess up?

[Clayburn]

If I duplicate it, then it stops working. I click on it and nothing
happens. Also, the other one still has a problem with centering to
the wrong spot. I don't know where it's centering to. At first I
thought it was just where it was originally. But now it's centering
to a spot above and to the left of it. I don't know why it messes up
on duplication. Nothing happens, though, when the copy is clicked on.

On Jun 19, 6:37 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Clayburn]

Also, the class is set to fixed but it still is movable. I'd like to
be able to do both, have it at a fixed position on the scrapbook, or
have it movable. But I got to get the centering working correctly
first. Also, how would I set its position in the controls-fixed.html
file? Is that possible?


On Jun 19, 6:37 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Jonathan A. Marshall]

OK, the problem was that the 4-arrows control was being referenced by "ID=control", and there can be only one element with a given ID.  I've changed it to use "CLASS=arrow4", and now both controls work: http://jam.limebits.com/scrapbook-introduction3/

The changes are in content/controls-fixed.txt and configuration/scrapbook.css.

Thanks,
--Jonathan

Clayburn wrote:

If I duplicate it, then it stops working. I click on it and nothing
happens. Also, the other one still has a problem with centering to
the wrong spot. I don't know where it's centering to. At first I
thought it was just where it was originally. But now it's centering
to a spot above and to the left of it. I don't know why it messes up
on duplication. Nothing happens, though, when the copy is clicked on.

[Clayburn]

Okay, that works. However, it's still not centering right. Actually,
I'm not sure what clicking the middle button does. I would like it to
center on the current position of the control, but it seems to go
somewhere else.


On Jun 19, 7:23 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Clayburn]

Centering apparently takes it from -x, -y to x, y.


On Jun 19, 7:23 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Jonathan A. Marshall]

Clayburn wrote:

Also, the class is set to fixed but it still is movable. I'd like to
be able to do both, have it at a fixed position on the scrapbook, or
have it movable.

There seems to be a bug in the fixed/float mechanism.  I'll look into that next week.

But I got to get the centering working correctly
first. Also, how would I set its position in the controls-fixed.html
file? Is that possible?

Currently there's no way to set the x-y position from inside a file.  Instead, the x-y coordinates are set as WebDAV property values on the object.  This allows a uniform positioning mechanism on all objects, including image files, which can't be edited to add coordinates as part of the file contents.

You can use mouse drag to manually position each object on the scrapbook.  On the LimeBits roadmap is a positioning-grid feature for scrapbook, to make alignment easier.  But maybe a LimeBits member will implement it first.

Alternatively, you can directly set the x-y coordinate properties using AXIS.WebDAV functions -- see how this is done in scrapbook.js.

Thanks,
--J

[Jonathan A. Marshall]

Fixed in http://jam.limebits.com/scrapbook-introduction3/ .

The problem was that each instance of the content/controls-fixed*.txt file contains its own <script>, which causes a click handler to be registered for all of the arrow4 controls.  So if there are three arrow4 controls in the scrapbook, the panning was invoked three times -- triple the distance.

I modified the <script> to ensure that it gets run only once.

There are probably better fixes.

• Change the script to register the click handler only for the particular arrow4 instance;  or

• Move the script into index.html as a { load: function(){} } option for the jQuery invocation of the scrapbook.

Thanks,
--Jonathan

Thanks,
--Jonathan

[Clayburn]

I edited the controls to allow for sending to a specific location.
I'm sure it can be cleaned up, for instance the centering is left on
there even though it may not be used. I did away with the conditional
statements for top, down, right and left since this is just for one
button that goes to one location.

<script type="text/javascript" charset="utf-8">
if ( ! jQuery("#scrapbook").data("tolocation") ) {
jQuery("#scrapbook").data("tolocation", 1);
jQuery("#scrapbook").bind("load.scrapbook", function(e, scrapbook)
{
jQuery(".tolocation a").bind("click.scrapbook", function() {
var cn = this.className;
var duration = 1;
var center = scrapbook.center;
if (cn == "center") {
scrapbook.animate(scrapbook.offset[0], scrapbook.offset
[1], duration);
return false;
}
var x = 1200 + scrapbook.offset[0];
var y = 1200 + scrapbook.offset[1];
scrapbook.animate(x, y, duration);
return false;
});
});
}
</script>

On Jun 19, 10:58 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:
> Fixed inhttp://jam.limebits.com/scrapbook-introduction3/.

>
> The problem was that each instance of the content/controls-fixed*.txt
> file contains its own <script>, which causes a click handler to be

> registered for /all/ of the arrow4 controls.  So if there are three

> arrow4 controls in the scrapbook, the panning was invoked three times --
> triple the distance.
>
> I modified the <script> to ensure that it gets run only once.
>
> There are probably better fixes.
>

>     *

>
>       Change the script to register the click handler only for the
>       particular arrow4 instance;  or
>

>     *

>
>       Move the script into index.html as a { load: function(){} } option
>       for the jQuery invocation of the scrapbook.
>
> Thanks,
> --Jonathan
>
> Thanks,
> --Jonathan
>
> Clayburn wrote:
> > Centering apparently takes it from -x, -y to x, y.
>

> * *

[Clayburn]

What about creating a button that goes to the location of something
else? Since people can edit the position, I could have a picture that
is constantly moving. And I'd want a button that says something like
"Go to picture" and it would move too as people move them around. But
if you ever come across the "Go to picture" button and click it, no
matter where it is or where the picture is, it sends you to the
picture. Could someone find out how to do that?

[Clayburn]

I created a div outside the div with the class arrow4, then closed
that div after the script ends. After that, you can set it fixed from
the edit menu and it seems to work.

=====

<div class="fixed">
<div class="arrow4">
<a href="#" class="left">Left</a>
<a href="#" class="up">Up</a>
<a href="#" class="center">Center</a>
<a href="#" class="right">Right</a>
<a href="#" class="down">Down</a>
</div>

<script type="text/javascript" charset="utf-8">

if ( ! jQuery("#scrapbook").data("arrow4") ) {
jQuery("#scrapbook").data("arrow4", 1);

jQuery("#scrapbook").bind("load.scrapbook", function(e, scrapbook)
{

jQuery(".arrow4 a").bind("click.scrapbook", function() {
var cn = this.className;
var duration = 500;

var center = scrapbook.center;
if (cn == "center") {
scrapbook.animate(scrapbook.offset[0], scrapbook.offset
[1], duration);
return false;
}

var x = (cn == "left") ? center[0] : (cn == "right") ? -
center[0] : 0;
var y = (cn == "up") ? center[1] : (cn == "down") ? -
center[1] : 0;

scrapbook.animate(x, y, duration);
return false;
});
});
}
</script>

</div>

========

On Jun 19, 4:36 pm, "Jonathan A. Marshall" <jmarsh...@limebits.com>
wrote:

> * *

[Jonathan A. Marshall]

This should be easy. You'll need the x,y location of the arrow4 control,
which scrapbook loads from WebDAV properties attached to the arrow4 file.
You might also need the current pan offset of the scrapbook. Then just do
scrapbook.animate() with the desired shift.

Thanks,
--Jonathan

-----Original Message-----
From: Clayburn
Sent: Saturday, June 20, 2009 12:52 AM
To: Jonathan A. Marshall
Subject: Re: Scrapbook position-altering buttons

Thanks. That did seem to fix things. Great work.

Now, I'm wondering if there is a way to make the center button center
on the object itself (no matter where its location happens to be).
So, if I move the control, instead of having it center on 0,0 in the
scrapbook, it would center on the button itself. Is that something
easily done? I'd like to create some sort of clickable objects that
would cause the screen to center on them.

On Jun 19, 10:58 pm, Jonathan A. Marshall wrote:
> Fixed in http://jam.limebits.com/scrapbook-introduction3/ .
>

> The problem was that each instance of the content/controls-fixed*.txt
> file contains its own <script>, which causes a click handler to be
> registered for /all/ of the arrow4 controls.  So if there are three
> arrow4 controls in the scrapbook, the panning was invoked three times --
> triple the distance.
>
> I modified the <script> to ensure that it gets run only once.
>
> There are probably better fixes.
>
>     * Change the script to register the click handler only for the
>       particular arrow4 instance;  or
>
>     * Move the script into index.html as a { load: function(){} } option
>       for the jQuery invocation of the scrapbook.
>
> Thanks,
> --Jonathan
>

[Jonathan A. Marshall]

Cool! Thanks.

=====

========

[Jonathan A. Marshall]

Definitely can be done. Scrapbook.js loads this info for each item and
maintains it when the user makes changes.

However, it's not currently implemented to recognize multiple users acting
simultaneously on the same scrapbook items.

For casual use, you can probably modify scrapbook to reload each item
periodically, and again just before writing its position -- and then handle
the case of someone else having moved the item.

Or to do it the "right" way (avoiding race conditions) you can use the
WebDAV locking and eTag features.

Thanks,
--Jonathan

-----Original Message-----
From: Clayburn
Sent: Saturday, June 20, 2009 11:17 PM
To: LimeBits