Skip navigation

Raspberry Pi Projects

1 Post authored by: jan.knapp

I wanted to use my new Pi2 as a "random picture display", but I didn't want to install the "media center"
I was very frustrated with using python and the pygame "resources" (whatever they call it)
Ultimately, I decided to try a different approach; html with javascript!

Here's the html/javascript solution, which works perfectly!

copy everything below!  and have fun!!

 

 

// this is a "random picture display" javascript
// you open it with your browser and the browser does all the work
// well, aside from your having to put the image informtion in
// I will the datadable on my windows machine, using a visual basic program that i wrote
// hope this works for you as well as it does for me!

// I'm running it on a Raspberyy Pi 2, with the standard installation (not the media install)
// the display is set to portrait orientation on the Pi in the config file
// by using sudo nano boot/config.txt
// adding the line
// display_rotate=3
// which results in a clock wise 270 degree screen rotation

// if you added instead
// display_rotate=1
// it would result in a clock wise90 degree screen rotation

 

<form id="newwindow" name="newwindow">
</form>
<>
<html>
<head>

<title>Awesome Images</title>
<meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000" text="#000000">

</body>

<table width="100%" height="97%" border="0">

<tr>

<td>
<p align="center" valign="center">
<img name="SlideC">

</td>
</tr>

</table>

 

 

</html>

 

 

<script language="JavaScript1.2" >

var newimg;
var wid;
var hit;
var currentdate = 0;
var theranlink = " ";
var core = 0;
var created = 0;
var imgstrt = 0;
var imgstp = 0;
var imgcnt = 0;
var imgary = 0;
var chk = 0;
var hrat = 0;
var wrat = 0;
var intvl=15000;

// maxwid is the width of your Pi's display in pixels
// maxhit is the heigth of your Pi's display in pixels
// this is set up for a monitor rotated to a Portrait orientation
var maxwid=728;
var maxhit=1266;
// if you wanted a landscape orientation you would comment the two line above (use leading //)
// and uncomment the two lines below
//var maxwid=1266;
//var maxhit=728;

 

// picpath points to the "root directory" of your images
// this way you can copy this file to your desktop once filled with the picture array
var picpath="/media/pi/Transcend/pics/";

 

 

g_iimg = 0;
g_imax = 0;
g_ImageTable = new Array();

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

function ChangeImage(fFwd)
{
g_iimg=Math.floor((Math.random()*g_imax));
Update();
}

function Update()
{
mag=1;

//centimg=picpath + g_ImageTable[g_iimg][0];

centimg=g_ImageTable[g_iimg][0];
newWindow2(centimg);
}

function Next()
{
mag=1;
ChangeImage(true);
}

function main()
{
if(new Date().getTime() - time >= intvl){

ChangeImage();
}else{
      
}
}

 

 

function newWindow2(newimg)
{
wid=g_ImageTable[g_iimg][1];
hit=g_ImageTable[g_iimg][2];
wwid=(wid);
whit=(hit);
wrat=wwid/maxwid;
hrat=whit/maxhit;

chk=0;
if (hrat>1){
chk=1}
if (wrat>1){
chk=1}

irat=hrat/wrat;
if (chk=1){
if (hrat>wrat) {

SlideC.src=newimg;
SlideC.width=wwid/hrat;
slideC.height=whit/hrat;

} else {

SlideC.src=newimg;
SlideC.width=wwid/wrat;
slideC.height=whit/wrat;

}

}
}

// ********************************************************** insert data table here ***********************************************************************************
// the data table must follow this format, and the quotation marks must remain
// g_ImageTable[g_imax++] = new Array ("imge name","image width in pixels","image heigth in pixels");
// an example of the array where it is used directly iin the directoy is below
// g_ImageTable[g_imax++] = new Array ("flower.jpg","768","1024");

// if you have multiple directories under the root that you want it to access then the array is this format
// g_ImageTable[g_imax++] = new Array ("directory name/image name","image width in pixels","image heigth in pixels");
// an example of the array where it is used from a root directoy is below
// g_ImageTable[g_imax++] = new Array ("garden_pictures/flower.jpg","768","1024");

 

 

 

//******************************************** end of data table *************************************btw, it is unlimited in the number of images you can insert bove

 

 

 

 

// dely makes a 0 to 20 second pause
dely=Math.floor((Math.random()*20000));

// the variable dely above is added to a "standard delay" of 20 seconds
// this yields a variable refresh time of 20 to 40 seconds
intvl=20000+dely;

 

//do not add anything below this line
setInterval(main, intvl);

Next();

mag=1;
g_iimg=Math.floor((Math.random()*g_imax));

</script>

Filter Blog

By date: By tag: