PDA

View Full Version : Selecting SlideShow Images From Binary String



TimeTracker
03-28-2007, 11:44 PM
G'day: Having taught myself JavaScript I occasionally need some help. I want to convert a string of binary digits (e.g. 110101) into a series of images for a continuously looping slide show. Each position in the string has a choice of two small images. The slide show must run from right to left. The total range of images (.gif or .jpg) will be preloaded from which the selection is made after random decimal to binary conversion. How do I select each digit in succession and then create an array of images for the slide show?

I know that "String.prototype.reverse = function (){" reverses a string to run right to left. Here I am using CodeLifter's JavaScript Cross-Browser SlideShow Script With Adjustable Timing and Unlimited Images as my basis.
<script>

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// Set speed (milliseconds)
var speed = 1000

// Specify the image files
var Pic = new Array()
Pic[0] = "1stDigit"
Pic[1] = "2ndDigit"
Pic[2] = "3rdDigit"
Pic[3] = "4thDigit"
Pic[4] = "5thDigit"
Pic[5] = "6thDigit"

function 1stDigit(){
if (String.prototype.reverse.1stDigit.value = "1"){
then Pic[0] = "red11.gif";}
else { Pict[0] = red10.gif";}
}
function 2ndDigit(){
if (String.prototype.reverse.2ndDigit.value = "1"){
then Pic[0] = "red21.gif";}
else { Pict[0] = red20.gif";}
}
etc.

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

</script>

jscheuer1
03-29-2007, 05:11 AM
Yuck! There has got to be a better way. What is the point? I mean what do you want to have happen? If you just want to have a random subset of images loaded each time, all you need to do is shuffle an entire array of images and then show only the first x number of them. Say you have 100 images in an array called slides:


slides.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
var theSlides=[];
for (var i_tem = 0; i_tem < 20; i_tem++)
theSlides[i_tem]=slides[i_tem];

Then run your slide show using the 'theSlides' array of 20 images chosen out of the 100 randomized ones in the 'slides' array.

TimeTracker
03-29-2007, 11:09 PM
Thanks, John. Perhaps I should explain the purpose for the code. I can produce my own slide show using gif animation. At the moment I am experimenting with the possibility of mimicking what stem cell therapists hope to achieve, yet without any invasvie technologies. The binary code is linked to the passage of time and every day it advances by 1 digit. By going back to the period when I was still in my mother's womb and targetting the days when my spinal cord and vertabrae started to develop, I am hoping that the body will reactivate those energies and start repairing this part of my body. Each digit is represented by a specific colour or shade of colour. These energies respond to light. Writing a routine in Javascript will make it easier to share it with others who might then be able to benefit. It will also be possible to target other organs in the body simply at the press of a button.
Creating gif animations and the html to use them is time intensive and all I am doing is looking for an easier way. Thank you for showing an interest. If successful maybe you might benefit from it some day. By the way this is my seventh system under development and hopefully my last.

jscheuer1
03-30-2007, 04:25 AM
Benefit from what? Animation or gene therapy? Um, animated slide shows are rather simple compared to your code. Perhaps if you were to forget about the gene therapy angle for a moment and explain in plain English what you would like to have happen with your images, I may be able to really help out.

TimeTracker
03-30-2007, 11:43 PM
John, thanks. I will start with today's binary code: 1011101000010110111010. What I want the script to do is select the first digit on the right and choose its 1stDigit 0 image (there is always a choice of two), then progress to the 2ndDigit's 1 image, then move on to the 3rdDigit and select its 0 image and so on right to the end. Having selected these means a new array will be created from which the slideshow can run continuously. I am current running 10-15 minute sessions.
Something is happening because every arthritic area in my body is feeling tender. Since this research has never been done before, it is completely unknown territory. However, scienctific medicine cannot help me, so I am trying to help myself.

jscheuer1
03-31-2007, 06:40 AM
<script type="text/javascript">
var bin='1011101000010110111010';
var c=bin.length-1;
var cc=1;
var Pic=[];
while(c>-1)
Pic[Pic.length]='red'+[cc++]+bin.charAt(c--)+'.gif';
alert(Pic.join('\n'));
</script>

Notes: The variable bin must be a string, convert it to one first if it isn't one already. To do this, it is easiest to start with the decimal number, ex:


var num=3048890;
var bin=num.toString(2);

The alert is simply to give you visual feedback on the contents of the array generated, it is not required for the code to work.

TimeTracker
03-31-2007, 12:26 PM
Thanks, John. I shall see what I can do with this profound piece of code. Naturally as the script develops other issues are bound to arise, e.g. how to store in memory useful information like the Remember Me tick box in the forum log in. I will let you know how things progress. To date my series of calculators features some great scripts. One is over forty pages long.

TimeTracker
04-02-2007, 01:56 PM
John, I have a successful script with images flowing in sequence and it looks great. However, whenever I try to define the 'bin' string using prior code to manually convert a decimal value to binary I get error messages like "preLoad is undefined" or "preLoad is null and not an object." This is part of the slide show script.
var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

How can I get over these error messages? I have already spent hours trying to get around the problem.

jscheuer1
04-02-2007, 02:41 PM
You should protect your 'i' by formally declaring it:


var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (var i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

But, this has little if anything to do with your question. There could be other problems but, when converting from a decimal value to a binary string you must start with a decimal number not a decimal string. Once you have a decimal number - say by doing:


var dnum=new Date().getTime();

Then you can do:


var bin=dnum.toString(2);

and you should be good to go. BTW, at present the above method used with my prior code gives an array of about 41 images. The only other problems would be if some or all of the images in the generated image array do not exist or if there is some kind of conflict in variables.

jscheuer1
04-03-2007, 06:31 AM
var dnum=new Date().getTime();
var bin=dnum.toString(2);
var c=bin.length-1;
var cc=1;
var Pic=[];
while(cc<23)
Pic[Pic.length]='red'+[cc++]+bin.charAt(c--)+'.gif';

TimeTracker
04-04-2007, 02:28 AM
I have another script which does the decimal to binary conversion and it works perfectly. With this the list of 22 images selected also appears, but it will not go beyond the Alert. When I remove the "onLoad="runSlideShow()" all IE7 says is there is an object missing in the HTML. So close to success, but it continues to evade me. Do I need to insert a Start and Stop button?

jscheuer1
04-04-2007, 04:24 AM
I think I need a link to your problem page to be of any further help.

TimeTracker
04-04-2007, 11:11 PM
Thanks so much, John. I deleted the previous code in order to submit a new version. This one works fine up until starting the slide show. IE7 says an "object is expected" at line 110 char 1. Yet I cannot see anything missing. "onLoad='runSlideShow()'" has been deleted to give the user manual control and a Start button introduced. Could you please give it one more try? Eventually this will form part of a large script.
<html>
<head>
<title>Binary Slide Show</title>
<script type="text/javascript">
<!--

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// Set speed (milliseconds)
var speed = 1000

// Specify full selection of image files
var Pic = new Array()
Pic[0] = "bdn10.jpg"
Pic[0] = "bdn11.jpg"
Pic[1] = "bdn20.jpg"
Pic[1] = "bdn21.jpg"
Pic[2] = "bdn30.jpg"
Pic[2] = "bdn31.jpg"
Pic[3] = "bdn40.jpg"
Pic[3] = "bdn41.jpg"
Pic[4] = "bdn50.jpg"
Pic[4] = "bdn51.jpg"
Pic[5] = "bdn60.jpg"
Pic[5] = "bdn61.jpg"
Pic[6] = "bdn70.jpg"
Pic[6] = "bdn71.jpg"
Pic[7] = "bdn80.jpg"
Pic[7] = "bdn81.jpg"
Pic[8] = "bdn90.jpg"
Pic[8] = "bdn91.jpg"
Pic[9] = "bdn100.jpg"
Pic[9] = "bdn101.jpg"
Pic[10] = "bdn110.jpg"
Pic[10] = "bdn111.jpg"
Pic[11] = "bdn120.jpg"
Pic[11] = "bdn121.jpg"
Pic[12] = "bdn130.jpg"
Pic[12] = "bdn131.jpg"
Pic[13] = "bdn140.jpg"
Pic[13] = "bdn141.jpg"
Pic[14] = "bdn150.jpg"
Pic[14] = "bdn151.jpg"
Pic[15] = "bdn160.jpg"
Pic[15] = "bdn161.jpg"
Pic[16] = "bdn170.jpg"
Pic[16] = "bdn171.jpg"
Pic[17] = "bdn180.jpg"
Pic[17] = "bdn181.jpg"
Pic[18] = "bdn190.jpg"
Pic[18] = "bdn191.jpg"
Pic[19] = "bdn200.jpg"
Pic[19] = "bdn201.jpg"
Pic[20] = "bdn210.jpg"
Pic[20] = "bdn211.jpg"
Pic[21] = "bdn220.jpg"
Pic[21] = "bdn221.jpg"

function toBin(form){
var dnum = Number(form.dnum.value); // dnum is a precalculated decimal value, here given as 3048690.
var bin = Number(form.bin.value);
form.bin.value = dnum.toString(2);

var dnum=new Date().getTime(); // dnum is a decimal derived from a date calculator.
var bin=dnum.toString(2);
var c=bin.length-1;
var cc=1;
var Pic=[];
while(cc<23)
Pic[Pic.length]='bdn'+[cc++]+bin.charAt(c--)+'.jpg';
alert(Pic.join('\n')); // Alert shows selected list of images only -->

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000" >
&nbsp;
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<tr>
<td><form><input type="text" name="dnum" size="10" value="3048690"></td>
</tr>
<tr>
<td><input type="button" value="Convert" onClick="toBin(this.form)"></td>
</tr>
<td><input type="text" name="bin" size="26"></td>
</tr>
<tr>
<td WIDTH="200" HEIGHT="40" id="VU"><img SRC="1.jpg" NAME="SlideShow" height=40 width=200></td>
</tr>
<tr>
<td><input type="button" value="Start" onClick="runSlideShow()"></td></form>
</tr>
</table>

</body>
</html>

jscheuer1
04-05-2007, 04:32 AM
Where are these images? It would be so much simpler for me to debug this code if you just put up a demo somewhere that I could see it. Also, you don't need this:


// Specify full selection of image files
var Pic = new Array()
Pic[0] = "bdn10.jpg"
Pic[0] = "bdn11.jpg"
Pic[1] = "bdn20.jpg"
Pic[1] = "bdn21.jpg"
Pic[2] = "bdn30.jpg"
Pic[2] = "bdn31.jpg"
Pic[3] = "bdn40.jpg"
Pic[3] = "bdn41.jpg"
Pic[4] = "bdn50.jpg"
Pic[4] = "bdn51.jpg"
Pic[5] = "bdn60.jpg"
Pic[5] = "bdn61.jpg"
Pic[6] = "bdn70.jpg"
Pic[6] = "bdn71.jpg"
Pic[7] = "bdn80.jpg"
Pic[7] = "bdn81.jpg"
Pic[8] = "bdn90.jpg"
Pic[8] = "bdn91.jpg"
Pic[9] = "bdn100.jpg"
Pic[9] = "bdn101.jpg"
Pic[10] = "bdn110.jpg"
Pic[10] = "bdn111.jpg"
Pic[11] = "bdn120.jpg"
Pic[11] = "bdn121.jpg"
Pic[12] = "bdn130.jpg"
Pic[12] = "bdn131.jpg"
Pic[13] = "bdn140.jpg"
Pic[13] = "bdn141.jpg"
Pic[14] = "bdn150.jpg"
Pic[14] = "bdn151.jpg"
Pic[15] = "bdn160.jpg"
Pic[15] = "bdn161.jpg"
Pic[16] = "bdn170.jpg"
Pic[16] = "bdn171.jpg"
Pic[17] = "bdn180.jpg"
Pic[17] = "bdn181.jpg"
Pic[18] = "bdn190.jpg"
Pic[18] = "bdn191.jpg"
Pic[19] = "bdn200.jpg"
Pic[19] = "bdn201.jpg"
Pic[20] = "bdn210.jpg"
Pic[20] = "bdn211.jpg"
Pic[21] = "bdn220.jpg"
Pic[21] = "bdn221.jpg"

And, it may be part of the problem.

TimeTracker
04-05-2007, 08:21 AM
Getting used to the second page at last. I have posted my files to web space for you to download and analyze. The first link (slideshowC.html) is the latest attempt. Allow a few moments for the images to load (their format will change). slideshowA is the original. Both links have been tested.
http://users.chariot.net.au/~sacrynom/slideshowC.html
http://users.chariot.net.au/~sacrynom/slideshowA.html
I had a hunch that the image listing might be the problem, but could not work out quite what to do. I have used codelifter's script and did not want to unncessarily interfere.

jscheuer1
04-05-2007, 12:18 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Binary Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color:#ffffff;
background-color:#000000;
}
a:link {
color:#0000ee;
}
a:visited {
color:#551a8b;
}
a:active {
color:#ff0000;
}
</style>
<script type="text/javascript">

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// Set speed (milliseconds)
var speed = 1000

var dnum=new Date().getTime(); // dnum is a decimal derived from a date calculator.
var bin=dnum.toString(2);
var c=bin.length-1;
var cc=1;
var Pic=[];
while(cc<23)
Pic[Pic.length]='bdn'+[cc++]+bin.charAt(c--)+'.jpg';

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

onload=runSlideShow;
</script>
</head>
<body>
<div>&nbsp;<br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<script type="text/javascript">
document.write('<img src="'+Pic[0]+'" name="SlideShow" width="200" height="40">')
</script>
</td>
</tr>
</table>
</div>
</body>
</html>

TimeTracker
04-05-2007, 10:05 PM
Well, it certainly works, John. Thank you. But it does not give me control over input. I am not interested in just random binary strings. Specific dates and decimal values are involved. But at least I have something to work on for a while. A blessed Easter to all the crew.

jscheuer1
04-06-2007, 12:43 AM
Try this one out:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Binary Slide Show</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
color:#ffffff;
background-color:#000000;
}
a:link {
color:#0000ee;
}
a:visited {
color:#551a8b;
}
a:active {
color:#ff0000;
}
input {
padding:0.5ex;
margin:1ex;
}
form div, form div input {
text-align:center;
}
form {
margin-bottom:1ex;
}
</style>
<script type="text/javascript">

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header

// Set speed (milliseconds)
var speed = 1000

var Pic=[];
function bin2Pic(binum){
var dnum=new Date().getTime(); // dnum is a decimal derived from a date calculator.
var bin=binum? binum : dnum.toString(2);
var c=bin.length-1;
var cc=1;
while(cc<23)
Pic[Pic.length]='bdn'+[cc++]+bin.charAt(c--)+'.jpg';
}
bin2Pic();

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
function loadEm(){
for (var i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
}
loadEm();

function runSlideShow(){
document.images.SlideShow.src = preLoad[j].src
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', speed)
}

onload=runSlideShow;

function toBin(form){
form.bin.value=new Number(form.dnum.value).toString(2);
Pic.length=0;
bin2Pic(form.bin.value);
loadEm();
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<form action="#" onsubmit="toBin(this);return false">
<div><input type="text" name="dnum" size="10" value="3048690"><br>
<input type="submit" value="Convert"><br>
<input type="text" readonly name="bin" size="26"></div></form>
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
document.write('<img src="'+Pic[0]+'" name="SlideShow" width="200" height="40">')
</script>
</td>
</tr>
</table>
</body>
</html>

TimeTracker
04-06-2007, 01:31 AM
John, thanks. I will look at the new code. Just for your information click on this link to see the calculator onto which I am trying to integrate the Slide Show. It is the primary calculating engine for five other major energy systems, including binary clusters and prime numbers. All work extremely well. 'Nomi Sacri' is Italian for 'sacred names' and is tied up with the rotating thrones of Rev. 4:4 which largely influence language used worldwide. Each module lasts for one week.
http://users.chariot.net.au/~sacrynom/gcwombEnergy.html
[This link is no longer active.]

TimeTracker
04-06-2007, 01:39 AM
John, the above looks very interesting and encouraging. I will see if I can incorporate it into the above calculator. With my previous effort the calculator never appeared on screen due to the onLoad and document.write, so I could not even select a date. I will get back to you shortly.

TimeTracker
04-08-2007, 07:47 AM
To John and to all the wonderful crew at Dynamic Drive. All bug issues have been resolved. The sequence blip was caused by one image being incorrectly assigned. It was discovered after much earlier dates were selected where the behaviour was different again. So it had to be an image problem and it was. Thank you very, very much for your kind help. I am happy to promote DynamicDrive. You are a great team. John, you are an excellent coder. Now I can get on with the next stage of research and development. When I have some concrete news, then I will let you know.