hi,
I am playing with this frontpage for a while now.
I customized it to all my needs, and it's fun, now i am learnig a little javascripting

The camera in the middle of the page is very nice, but i have two, and i didn't want to sacrifice the "buienradar" and it would be nice to rotate the camera's in the same window.
After a lot of searching i found his little gem :
http://trendmedia.com/news/infinite-rot ... avascript/.
I implemented it in my frontpage, and it is working, not as satisfying as i want, but maybe with the help from fellow (experienced) javascripters it would be more stable.
The code i used in the html head:
Code: Select all
<script type="text/javascript" src="js/infinite-rotator.js"></script>
The code i used in the html div to show the camera's:
Code: Select all
<div id="frame">
<div id="cell8">
<img src="http://username:[email protected]:8080/axis-cgi/mjpg/video.cgi?streamprofile=Mobile&idx=1&t=" alt="camera01" height="216px" width="292px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 100)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' class="rotating-item" />
<img src="http://xyx.xxx.xxx.yyy:8080/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password&t=" alt="camera02" height="216px" width="292px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 8000)' class="rotating-item"/>
<img src="http://api.buienradar.nl/image/1.0/RadarMapNL?sb&t=" alt="buienrader" height="216px" width="292px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 15000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='camera' />
</div>
</div>
As you can see the camera's are using the class="rotatingitem" as defined in the css, and the "buienradar" is using class="camera" for the static image.
At start of the page it takes a little while to load the video stream (especially for the axis camera).
But when it is loaded, the left winddow is showing the camera's one by one (time of rotating is adjustable in the infinite-rotator.js, just play around with the itemInterval and initialFadeIn).
It's working on my windows10 laptop, on Ios and android i can't get the second camera working (it connect's but it stay's black), so maybe someone has a tip to overcome this problem.
Have fun with it.
Peer