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>
Top Comments