[tw] Random background image

[Duarte Farrajota Ramos]

Hello guys, once again come to ask for your expertise in Tiddlywiki, is it
possible at all to assign a random background image to tiddlywiki using
some sort of javascript and css trickery?

My coding skills are very lacking at best, but I found here on the forum
that I can assing a background image using
html body.tc-body { background: url("path/to/image.jpg") no-repeat center
center fixed; background-size: cover; height: 100%;}

in a tiddler tagged with $:/tags/Stylesheet which I managed to accomplish
successfully.

Now I fund out a few methods online (like this one
<http://stackoverflow.com/questions/21754798/random-background-image-through-external-css-file>)
that can randomize i using java script or jquery, is there a way to adapt
this or use it inside tiddlywiki?
I tried to adapt that but my basic copy-pasting techniques are insufficient
here.


Thanks for the help

[Jed Carty]

I like this idea so in exchange for showing you how to implement it I am
using it on my site.

This should bring you to my site with all of the needed tiddlers open.
<http://ooktech.com/jed/externalbrain/#%24%3A%2FImport:%24%3A%2FImport%20%24%3A%2Fplugins%2Finmysocks%2FrandVal%20%5B%5B%24%3A%2Fdata%2FRandom%20Background%20URL%20List%5D%5D%20%5B%5BMenu%20Icon%20-%20Update%20Random%20Background%5D%5D%20%5B%5B%24%3A%2Fstate%2FRandom%20Background%5D%5D%20%5B%5BRandom%20Background%20Stylesheet%5D%5D>

This would be a lot simpler using the choose random widget
<http://ng110.tiddlyspot.com/#Choose%20Random%20Demo%202> Neil made rather
than the randval widget I made, but his choose random widget returns
results with [[ and ]] around them, which breaks what I am doing. There may
be a way around this but nothing immediately comes to mind. (So, Neil, if
you want to add an option to not have the [[ and ]] that would help in this
one very narrow case.)

To add more images just add them to the '$:/data/Random Background URL
List' tiddler. The 1s are there because something has to be, but it doesn't
matter what.

[Jed Carty]

If you wanted to have the image change every time the wiki is loaded you
could use the startup actions plugin
<http://ooktech.com/jed/ExampleWikis/StartupActions/>. The trigger actions
plugin <http://ooktech.com/jed/ExampleWikis/TriggerActions/> could update
the background on other events.

['Stephen Kimmel' via TiddlyWiki]

Now that is seriously cute.

[Duarte Nuno de Paiva Farrajota Ramos]

Sorry for the delay in replying.
Well this sounds very interesting, have to give it a try myself when I'm
back at the computer.
My main interest in this would be to have it randomly change the background
on each page load, so I will probably have to check that plugin too

Thanks a lot for the tips I'll have a look at them

Sent from Nokia 3210
On Mar 11, 2015 12:46 PM, "'Stephen Kimmel' via TiddlyWiki" <

Post by 'Stephen Kimmel' via TiddlyWiki
Now that is seriously cute.
--
You received this message because you are subscribed to a topic in the
Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit
https://groups.google.com/d/topic/tiddlywiki/QKBoH-71384/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Jed Carty]

Here is a better explanation of how to do it
<http://inmysocks.tiddlyspot.com/#Randomly%20Change%20the%20Background%20Image>.
I haven't come up with a way to make this work with the startup actions in
the current tiddlywiki version. The changes to how invokeActions works in
the next version makes a lot of things much easier.

And of course as soon as I say that I realize that what I could do to make
it work. I will post it when I have it set up. It isn't a very good
solution but it should work.

[Duarte Farrajota Ramos]

Hahah those random moments of enlightenment are really satisfying, a deep
thanks for your time and patience.

In the meantime I've been struggling to get this working properly on my
(non-tiddlywiki) home page first, and managed to make it work in my fairly
simple landing page albeit with a slightly different solution I found here
<http://stackoverflow.com/a/15231912/4660873>.
Check it out at www.duarteramos.pt/ I find this code a bit cleaner to use
because it is easier to maintain and add more images to, since all you have
to do is change the "totalCount" number:

<html>
<head>
<script type="text/javascript">
var totalCount = 10;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
// Number padding
function pad(n) {
return (n < 10) ? ("0" + n) : n;
};
var pnum = pad(num)
document.body.background = 'path/to/image'+pnum+'.jpg';
}
</script>

</head>
<body>
Content
</body>
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>

I changed it a bit from the original to account for numbers padding since I
plan to have more than ten images.
I wonder if something similar could be achieved inside tiddlywiki

Post by Jed Carty
Here is a better explanation of how to do it
<http://inmysocks.tiddlyspot.com/#Randomly%20Change%20the%20Background%20Image>.
I haven't come up with a way to make this work with the startup actions in
the current tiddlywiki version. The changes to how invokeActions works in
the next version makes a lot of things much easier.
And of course as soon as I say that I realize that what I could do to make
it work. I will post it when I have it set up. It isn't a very good
solution but it should work.

[Jed Carty]

The version I made counts the them, so it can work with an arbitrary set of
urls. It picks a number between 1 and the total number of images and takes
the image with that index out of the list of images. All you have to do is
manually add the image urls. If you wanted to have all of the images in a
single location with names 01.jpg, 02.jpg and so on you could give the
total number and have it pick from them without having to add the new url.
It may be a bit simpler to do that, but I like the flexibility of being
able to use arbitrary image names and urls.

[Eric Shulman]

That looks like a good way to do it. It may be possible to include those
scripts in a tiddlywiki using the $:/tags/RawMarkup tag. I am not sure if
it would run the script when loading the page or not though.

I'm not certain what happens when using nodejs with separate .tid files,
but when TW5 writes a standalone (single file) copy of your TiddlyWiki,
everything tagged with $:/tags/RawMarkup is automatically "injected"
directly into the "head" of the file just before the closing </head>
marker. If you put <script>...</script> in a tiddler with that tag is will
be invoked at load time... and because it's in the head of the file, it
runs before anything else, even the TWCore initialization.

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

"Inside TiddlyWiki: The Missing Manual"
https://www.indiegogo.com/projects/inside-tiddlywiki-the-missing-manual/x/8816263
Note: the IndieGogo funding campaign has ended,
but direct fundraising continues below...

YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact

[Duarte Farrajota Ramos]

Hi Eric, that sounds really interesting, and on the right way to accomplish
what I set out to, so if I were to place this in a tiddler tagged with
$:/tags/RawMarkup

<script type="text/javascript">
var totalCount = 10;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
// Number padding
function pad(n) {
return (n < 10) ? ("0" + n) : n;
};
var pnum = pad(num)
document.body.background = 'path/to/image'+pnum+'.jpg';
}
</script>

where would I need to place this part to run in on every load?
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>

That's the part that is probably only possible in 5.1.8, right?
Also the document.body.background = 'path/to/image'+pnum+'.jpg'; would
probably need some adjustments too, like
replacing with html body.tc-body and the rest of the background image
style, right?

Post by Eric Shulman

That looks like a good way to do it. It may be possible to include those
scripts in a tiddlywiki using the $:/tags/RawMarkup tag. I am not sure if
it would run the script when loading the page or not though.

I'm not certain what happens when using nodejs with separate .tid files,
but when TW5 writes a standalone (single file) copy of your TiddlyWiki,
everything tagged with $:/tags/RawMarkup is automatically "injected"
directly into the "head" of the file just before the closing </head>
marker. If you put <script>...</script> in a tiddler with that tag is will
be invoked at load time... and because it's in the head of the file, it
runs before anything else, even the TWCore initialization.
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
"Inside TiddlyWiki: The Missing Manual"
https://www.indiegogo.com/projects/inside-tiddlywiki-the-missing-manual/x/8816263
Note: the IndieGogo funding campaign has ended,
but direct fundraising continues below...
YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation
Professional TiddlyWiki Consulting Services...
http://www.TiddlyTools.com/#Contact

[Jed Carty]

If you are going to use javascript there shouldn't be any trouble with the
current version. The only place you can put raw javascript is in the head
using $:/tags/RawMarkup, so just try making a tiddler with both scripts and
tag it with $:/tags/RawMarkup and see what happens.

The only reason that my version doesn't work in 5.1.7 is because I am just
using wikitext.

[Eric Shulman]

Post by Jed Carty
If you are going to use javascript there shouldn't be any trouble with the
current version. The only place you can put raw javascript is in the head
using $:/tags/RawMarkup, so just try making a tiddler with both scripts and
tag it with $:/tags/RawMarkup and see what happens.

In this particular use-case (i.e, setting the background image at load
time), tagging *both* scripts with RawMarkup has a subtle twist:
"document.body" *does not yet exist* when the <head> of the document is
processed. While you can *define* the ChangeIt(...) function in the head,
but you can't invoke it until document.body has actually been created. To
work around this, while still using RawMarkup for both script pieces, you
can invoke the ChangeIt() function from within an "event listener" that
waits for the "load" event to complete... .like this:

<script>
window.addEventListener("load", ChangeIt, false);
</script>

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

"Inside TiddlyWiki: The Missing Manual"
https://www.indiegogo.com/projects/inside-tiddlywiki-the-missing-manual/x/8816263
Note: the IndieGogo funding campaign has ended,
but direct fundraising continues below...

YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact

[Duarte Farrajota Ramos]

Ok, finally some level of success, I managed to make it work more or less
as intended using Jed Carty's random value plugin but with a slightly
modified workflow.
I imported the mentioned plugin but used it directly in the CSS tiddler
like this:

body.tc-body {background: url("media/backgrounds/background<$view field="
value"/>.jpg") no-repeat center center fixed;
background-size: cover; height: 100%;}

<$button>
<$action-randval $step=01 $field=value $lower=00 $upper=18/>
Change Background
</$button>

Only problem I found is number padding, could your plugin be modified to
account for number padding?
I mean generating numbers like 01 02 03 04 instead of 1 2 3 4?

It still only changes on button press, which is a shame, now if only there
was a method to call <$action-randval> on load...
Is this possible with 5.1.8, or by using any special tag?

Post by Eric Shulman

Post by Jed Carty
If you are going to use javascript there shouldn't be any trouble with
the current version. The only place you can put raw javascript is in the
head using $:/tags/RawMarkup, so just try making a tiddler with both
scripts and tag it with $:/tags/RawMarkup and see what happens.

In this particular use-case (i.e, setting the background image at load
"document.body" *does not yet exist* when the <head> of the document is
processed. While you can *define* the ChangeIt(...) function in the head,
but you can't invoke it until document.body has actually been created. To
work around this, while still using RawMarkup for both script pieces, you
can invoke the ChangeIt() function from within an "event listener" that
<script>
window.addEventListener("load", ChangeIt, false);
</script>
enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
"Inside TiddlyWiki: The Missing Manual"
https://www.indiegogo.com/projects/inside-tiddlywiki-the-missing-manual/x/8816263
Note: the IndieGogo funding campaign has ended,
but direct fundraising continues below...
YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation
Professional TiddlyWiki Consulting Services...
http://www.TiddlyTools.com/#Contact

[Jed Carty]

Yes, that wouldn't be a big change. I have that working in the
action-incement widget so it shouldn't be any trouble. I will see about
doing that now. And the startup actions plugin will work in 5.1.8, and it
may be part of the core, so actions on start up will be easy to do soon.

[Jed Carty]

Ok the plugin is updated so you can add a string prefix or give a length
for zero padding. http://inmysocks.tiddlyspot.com/#RandVal%20Plugin

[Duarte Farrajota Ramos]

Wow, that was quick, works like a charm Jed, many many thanks for all your
trouble, this is really great.
Check it out here www.duarteramos.pt/home.html

Now the website is still really empty, no content actual content yet and
still needs some theme tweaks.
Do you know how to customize/add a background color to the sidebar?

Now I have to look into that startup plugin to see if I can make it
randomize automatically

Again many thanks for this :)

Post by Jed Carty
Ok the plugin is updated so you can add a string prefix or give a length
for zero padding. http://inmysocks.tiddlyspot.com/#RandVal%20Plugin

[Duarte Farrajota Ramos]

Very nice, working like a charm with the tartup actions plugin, now
randomizing with every page load, check it out: www.duarteramos.pt/home.html
Added some preliminary content, now I only need to tweak theme colors and
find a way to add a colored background to the sidebar to improve visibility.

Once again many thanks for all your work, your plugins are wonderful life
savers! :)

Post by Duarte Farrajota Ramos
Wow, that was quick, works like a charm Jed, many many thanks for all your
trouble, this is really great.
Check it out here www.duarteramos.pt/home.html
Now the website is still really empty, no content actual content yet and
still needs some theme tweaks.
Do you know how to customize/add a background color to the sidebar?
Now I have to look into that startup plugin to see if I can make it
randomize automatically
Again many thanks for this :)

Post by Jed Carty
Ok the plugin is updated so you can add a string prefix or give a length
for zero padding. http://inmysocks.tiddlyspot.com/#RandVal%20Plugin

[Duarte Farrajota Ramos]

Hey Jed, sorry o bother again, is there any limitation in your random
number generator plugin? There seems to be a some sort of problem when
invoked from a different tiddler where the field is stored.
I decided to put an additional button to manually swap out the background
image in the "Menu" tiddler that shows up in the sidebar tabs, but when
invoked from a button there it only generates one non-random number (always
the same) and then stops working.
The same button works quite well in the "$:/DPFR/Styles" tiddler where the
field it writes to is stored, and from the "$:/DPFR/Randomize background"
where it is invoked by the startup actions plugin.

Did I miss anything, did I do something wrong, or is there some sort of bug
or limitation?
Check it out here, all relevant tiddlers are open
www.duarteramos.pt/home.html
<http://www.duarteramos.pt/home.html#Menu:Menu%20%24%3A%2FDPFR%2FStyles%20[[%24%3A%2FDPFR%2FRandomize%20background]]>

Also on a side note, since the random number plugin writes to a field it
triggers whatever tracks changes in tiddlywiki, prompting the user for
saving when trying to leave or refresh the page.
Is there a way to disable the exit or saving confirmation in tiddlywiki, or
perhaps write the field to some sort of temporary tiddler that doesn't
trigger changes or need for saving?

Thanks again

Post by Jed Carty
Ok the plugin is updated so you can add a string prefix or give a length
for zero padding. http://inmysocks.tiddlyspot.com/#RandVal%20Plugin

[Jed Carty]

As far as the weird non-random behavior I hadn't run into it before. It seems to be writing to the field, but it always picks the same number. There shouldn't be any limitation like that, it works as expected in all the other tests I have tried. I will look into it. It is a straightforward use of the built in javascript random number generator. There may be some conditions where the rng isn't actually random. I will look into it later.

To prevent the wiki from wanting to save you should have the field being changed in a tiddler with a name starting with '$:/state/' or '$:/temp/', tiddlers with names that start with either of those don't trigger the saving reminder stuff.

For people who know javascript:
I really doubt it is the problem, but is there any problem in the prerelease that would affect the rng? or conditions where the rng would always return the same value?

[Duarte Farrajota Ramos]

Thanks, take your time, no rush.
The '$:/state/' works as expected, the wiki no longer prompts the user for
saving on every page refresh, which is great.
That further exposes the weird behavior though, now it only truly
randomizes the field on page refresh via startup actions, or through the
button on the $:/state/ tiddler.
All other buttons generate one single number. If you edit that tiddler the
number generated changes once until page is refreshed or the tiddler edited.

Anyway, for now it works where it matters which is on page load. Many
thanks for your help :)

Post by Jed Carty
As far as the weird non-random behavior I hadn't run into it before. It
seems to be writing to the field, but it always picks the same number.
There shouldn't be any limitation like that, it works as expected in all
the other tests I have tried. I will look into it. It is a straightforward
use of the built in javascript random number generator. There may be some
conditions where the rng isn't actually random. I will look into it later.
To prevent the wiki from wanting to save you should have the field being
changed in a tiddler with a name starting with '$:/state/' or '$:/temp/',
tiddlers with names that start with either of those don't trigger the
saving reminder stuff.
I really doubt it is the problem, but is there any problem in the
prerelease that would affect the rng? or conditions where the rng would
always return the same value?

[Jed Carty]

I believe that the weirdness is at least related to what is discussed in
this other thread
<https://groups.google.com/forum/#!searchin/tiddlywiki/refresh$20tiddler|sort:date/tiddlywiki/vUD67EIJg7w/5TG4vkvwKy4J>.
I am not sure how to prevent it from happening.

[Duarte Farrajota Ramos]

Hum I see, in my ingnoance that sounds like something related to the way
tiddlywiki core itself handles macros and widgets, probably only something
only Jeremy could change, not solvable through plugins alone, no?

Post by Jed Carty
I believe that the weirdness is at least related to what is discussed in
this other thread
<https://groups.google.com/forum/#!searchin/tiddlywiki/refresh$20tiddler%7Csort:date/tiddlywiki/vUD67EIJg7w/5TG4vkvwKy4J>.
I am not sure how to prevent it from happening.