1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to use Fahmon Webtemplates

Discussion in 'bit-tech Folding Team' started by Votick, 12 Jun 2009.

  1. Votick

    Votick My CPU's hot but my core runs cold.

    Joined:
    21 May 2009
    Posts:
    2,320
    Likes Received:
    109
    This a quick guide on how to set up the webtemplates in fahmon and get them wroking correctly and how to add our CPC/bit-tech skin.


    1) Firstly you will need a webhost, with ftp. You should have the username, password and the directory or the folder where your f@h page will be located.

    If you do not own your own website but would like to have a go at this I can recomend using (http://awardspace.co.uk) as im currently hosting my f@h page on there free webhsoting service.


    2) Setting up Fahmon to export webpages.

    In Fahmon go to Fahmon > Preferences.

    The Fahmon settings will pop up.
    Scroll along the tabs untill you get to Web App 1.

    Tick the export webapplication.

    Next set the directory to a folder on your desktop.

    Go to clients and reload all.
    This creates your webtemplate.

    Connect to your webserver on ftp and upload all the files. (if you want it to load like mine rename the html file to index.hml).

    This makes sure the images are on your webserver.

    Once done head back to Fahmon and to the web export 1 window.

    Next step is setting fahmon to upload to your webserver.
    Use this line and change your username, password, server address and directory to suite your needs.

    [​IMG]

    Code:
    ftp://USERNAME:PASSWORD@WEBSITE.COM:21/DIRECTORY/index.html
    Once done hit ok and reload your clients.
    Check your website for the page.

    If its there well done would got your stats updating to your website.


    3) Configureing Fahmon.
    On the monitoring page you can set the HTML/FTP upload timings.
    I have mine set to every 5mins.
    Bear in mind bandwidth and how much you want to use.
    You will want it frequent but not using too much bandwidth of your site up.


    4) Show your colours!

    You may of seen that I and Unicorn have a lovely CustomPC/Bit-tech webapp template.
    You can also show your team colours and use this template.
    We ask that you leave the links in tact at the bottom.
    And a big shout out gose to Mitsimonsta the original author.

    To use the template browse to your fahmon folder.
    You will see a folder called templates.
    Rename the fancy_template to somthing like OLD fancy_template.

    [​IMG]

    Creat a new .htm file and call it fancy_template.htm

    Open it with note pad and copy the following code into it.

    Code:
    <!-- This comment is a little trick to keep IE6/7 in quirks mode rather than trying to use it's incompetent standards compliant mode -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Pragma" content="no-cache" />
    	<meta http-equiv="refresh" content="300" />
    	<title>Unicorn's Folding @ Home Farm Stats</title>
    	<script type="text/javascript">
    <!--
    pdata = new Array(<!--tpl_loop ['@CORE@','@PRCG@','@POINTS@','@USER_TEAM@','@DOWNLOAD_DATE@','@PREFERRED_DATE@','@FINAL_DATE@'], tpl//-->[]);
    function removeClassName (elem, className) {
    	elem.className = elem.className.replace(className, "").trim();
    }
    
    function addCSSClass (elem, className) {
    	removeClassName (elem, className);
    	elem.className = (elem.className + " " + className).trim();
    }
    
    String.prototype.trim = function() {
    	return this.replace( /^\s+|\s+$/, "" );
    }
    
    function ChangeColor(tableRow, highLight){
    	if (highLight){
    		var objbranch
    		stripedTable();
    		removeClassName(tableRow, 'alternateRow');
    		removeClassName(tableRow, 'normalRow');
    		addCSSClass(tableRow, 'clickedRow');
    		objbranch = document.getElementById('core');
    		objbranch.innerHTML = pdata[tableRow.id - 1][0];
    		objbranch = document.getElementById('project');
    		objbranch.innerHTML = pdata[tableRow.id - 1][1];
    		objbranch = document.getElementById('credit');
    		objbranch.innerHTML = pdata[tableRow.id - 1][2];
    		objbranch = document.getElementById('username');
    		objbranch.innerHTML = pdata[tableRow.id - 1][3];
    		objbranch = document.getElementById('downloaded');
    		objbranch.innerHTML = pdata[tableRow.id - 1][4];
    		objbranch = document.getElementById('preferred');
    		objbranch.innerHTML = pdata[tableRow.id - 1][5];
    		objbranch = document.getElementById('final');
    		objbranch.innerHTML = pdata[tableRow.id - 1][6];
    	}
    }
    
    function stripedTable() {
    	if (document.getElementById && document.getElementsByTagName) {
    		var allTables = document.getElementsByTagName('table');
    		if (!allTables) { return; }
    
    		for (var i = 0; i < allTables.length; i++) {
    			if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) {
    				var trs = allTables[i].getElementsByTagName("tr");
    				for (var j = 0; j < trs.length; j++) {
    					removeClassName(trs[j], 'alternateRow');
    					removeClassName(trs[j], 'clickedRow');
    					addCSSClass(trs[j], 'normalRow');
    				}
    				for (var k = 0; k < trs.length; k += 2) {
    					removeClassName(trs[k], 'normalRow');
    					removeClassName(trs[k], 'clickedRow');
    					addCSSClass(trs[k], 'alternateRow');
    				}
    			}
    		}
    	}
    }
    
    function addIEonScroll() {
    	var thisContainer = document.getElementById('tableContainer');
    	if (!thisContainer) { return; }
    }
    
    window.onload = function() { stripedTable(); addIEonScroll(); }
    -->
    	</script>
    	<style type="text/css">
    <!--
    table, td, a {
    	color: #ffffff;
    	font: normal normal 12px Tahoma, Verdana, sans-serif;
    }
    
    h1 {
    	font: bold normal 26px Tahoma, Verdana, sans-serif;
    	color: #ff0000;
    	margin: 0 0 2px 2px
    }
    
    h2 {
    	font: bold normal 18px Tahoma, Verdana, sans-serif;
    	color: #ff0000;
    	margin: 0 0 2px 2px
    }
    
    h3 {
    	font: normal normal 13px Tahoma, Verdana, sans-serif;
    	color: #008000;
    	margin: 0 0 15px 0
    }
    div.tableContainer {
    	clear: both;
    	border: 0px solid #161850;
    	overflow: auto;
    	width: 564px;
    	float:left;
    }
    \html div.tableContainer/* */ {
    	padding: 0 16px 0 0;
    	width: 550px;
    }
    html>body div.tableContainer {
    	height: auto;
    	padding: 0;
    }
    head:first-child+body div[class].tableContainer {
    	overflow: hidden;
    	width: 564px
    }
    div.tableContainer table {
    	float: left;
    	width: 100%
    }
    \html div.tableContainer table/* */ {
    	margin: 0 -16px 0 0
    }
    html>body div.tableContainer table {
    	float: none;
    	margin: 0;
    	width: 564px
    }
    head:first-child+body div[class].tableContainer table {
    	width: 564px
    }
    thead.fixedHeader tr {
    	position: relative;
    	top: expression(document.getElementById("tableContainer").scrollTop);
    }
    head:first-child+body thead[class].fixedHeader tr {
    	display: block;
    }
    thead.fixedHeader th {
    	background: #11060a;
    	font-weight: normal;
    	text-decoration: underline;
    	color: #ff0000;
    	width: 564px
    	padding: 4px 3px;
    	text-align: center
    }
    thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    	color: #ff0000;
    	display: block;
    	text-decoration: none;
    	width: 100%
    }
    thead.fixedHeader a:hover {
    	color: #ff0000;
    	display: block;
    	text-decoration: underline;
    	width: 100%
    }
    head:first-child+body tbody[class].scrollContent {
    	display: block;
    	overflow: auto;
    	width: 100%
    }
    tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    	background: #000000;
    	width: 564px
    	padding: 2px 3px 3px 4px
    }
    tbody.scrollContent tr.alternateRow td {
    	background: #11060a;
    	width: 564px
    	padding: 2px 3px 3px 4px
    }
    tbody.scrollContent tr.clickedRow td {
    	background: #ff0000;
    	width: 564px
    	padding: 2px 3px 3px 4px
    }
    head:first-child+body thead[class].fixedHeader th {
    	width: 60px
    }
    head:first-child+body thead[class].fixedHeader th + th {
    	width: 90px
    }
    head:first-child+body thead[class].fixedHeader th + th +th {
    	width: 190px
    }
    head:first-child+body thead[class].fixedHeader th + th +th +th {
    	width: 120px
    }
    head:first-child+body thead[class].fixedHeader th + th + th + th + th {
    	border-right: none;
    	padding: 4px 4px 4px 3px;
    	width: 100px
    }
    head:first-child+body tbody[class].scrollContent td {
    	width: 60px
    }
    head:first-child+body tbody[class].scrollContent td + td {
    	width: 90px
    }
    head:first-child+body tbody[class].scrollContent td + td + td {
    	width: 190px
    }
    head:first-child+body tbody[class].scrollContent td + td + td + td {
    	width: 120px
    }
    head:first-child+body tbody[class].scrollContent td + td + td + td + td {
    	border-right: none;
    	padding: 2px 4px 2px 3px;
    	width: 100px
    }
    body {
    	font-family:Tahoma, Verdana, sans-serif;
    	font-size:10pt;
    	line-height:13pt;
    	background:#11060a;
    	color:#000000;
    	margin-top:10px;
    }
    div.small {
    	font-family:Tahoma, Verdana, sans-serif;
    	font-size:7pt;
    	line-height:10pt;
    	color:#FFFFFF;
    	padding: 4px 0px 5px 0px;
    }
    a.small {
    	font-family:Tahoma, Verdana, sans-serif;
    	font-size:7pt;
    	line-height:10pt;
    	color:#FFFFFF;
    }
    *html body #wuinfopanel/* */{
    	width: 318px;
    }
    #wuinfopanel {
    	float:left;
    	padding-left:4px;
    	height: 224px;
    	width: 330px;
    }
    #fahmon {
    	width: 900px;
    	margin: 0;
    	background: #ffffff;
    }
    header {
    	width: 900px;
    	margin: 0;
    	background: #000000;
    }
    TD {
    	margin-left:2px;
    	margin-right:2px;
    	padding:2px;
    }
    //-->
    	</style>
    </head>
    <body>
    
    <center>
    	<div class="header">
    		<table>
     			<tr>
      				<td height=217px width="900px" bgcolor="#11060a" align="right" valign="center" background="http://images.bit-tech.net/content_images/2009/03/intel-xeon-w5580-nehalem-ep-review/cpc%20and%20bit%20tech%20logo.jpg" style="background-repeat: no-repeat;">
    					<h1>Unicorn's<br>Folding Farm<br>Stats</h1>
      					<b><font color="#efefef" size="-1"><!--tpl_static @_Last_updated:@ @UPDATE_TIME@ tpl//--></font></b>
    				</td>
     			</tr>
    		</table>
    	</div>
    
    
    	<div id="fahmon">
    		<div id="tableContainer" class="tableContainer">
    			<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    				<thead class="fixedHeader" id="fixedHeader">
    					<tr>
    						<th>Status</th>
    						<th>Progress</th>
    						<th>Name</th>
    						<th align="right">ETA</th>
    						<th align="right">PPD</th>
    					</tr>
    				</thead>
    				<tbody class="scrollContent">
    					<!--tpl_loop <tr onclick="ChangeColor(this, true);" id="@CLIENT_ID@">
    						<td align="center"><img src="@STATE_IMAGE@" /></td>
    						<td align="center">@PERCENTAGE@</td>
    						<td align="center">@NAME@</td>
    						<td align="right">@ETA@</td>
    						<td align="right">@PPD@</td>
    					</tr> tpl//-->
    					<tr>
    					<td colspan="5" align="right"><h2>Total PPD: <!--tpl_static @TOTAL_PPD@ tpl//--></h2></td>
    				</tbody>
    			</table>
    		</div>
    		<div id="wuinfopanel">
    			<table style="border-collapse:collapse;background:#11060a;margin:1px;height:100%;width:100%;">
    				<tr>
    					<td colspan="2"><!--tpl_static @_Work_Unit_Information@ tpl//--></td>
    				</tr>
    				<tr>
    					<td align="right" width="50%"><b><!--tpl_static @_Core:@ tpl//--></b></td>
    					<td align="left"><b><font color="#FF0000" id="core"></font></b></td>
    				</tr>
    				<tr>
    					<td align="right"><b><!--tpl_static @_Project:@ tpl//--></b></td>
    					<td align="left" id="project"></td>
    				</tr>
    				<tr>
    					<td align="right"><b><!--tpl_static @_Credit:@ tpl//--></b></td>
    					<td align="left" id="credit"></td>
    				</tr>
    				<tr>
    				<td align="right"><b><!--tpl_static @_Username:@ tpl//--></b></td>
    					<td align="left"><font color="#ff6600" id="username"></font></td>
    				</tr>
    				<tr>
    				<td align="right"><b><!--tpl_static @_Downloaded:@ tpl//--></b></td>
    					<td align="left" id="downloaded"></td>
    				</tr>
    				<tr>
    				<td align="right"><b><!--tpl_static @_Preferred_Deadline:@ tpl//--></b></td>
    					<td align="left" id="preferred"></td>
    				</tr>
    				<tr>
    				<td align="right"><b><!--tpl_static @_Final_Deadline:@ tpl//--></b></td>
    					<td align="left" id="final"></td>
    				</tr>
    			</table>
    		
    			<div style="border-collapse:collapse;border:0px solid #161850;background:#11060a;margin:1px;width:100%;" class="small">
    				Original Template by Mitsimonsta : <a href="http://forums.overclockers.com.au/member.php?u=77979" class="small">OCAU</a> : <a href="mailto:fahmon.template@mitsimonsta.net" class="small">email</a><br>
                                    Custom PC / Bit-Tech Version By Votick : <a href="http://forums.bit-tech.net/member.php?u=44944" class="small">Bit-Tech</a><br>
    				This Page Generated & Uploaded by Unicorn : <a href="http://forums.bit-tech.net/member.php?u=26539" class="small">Bit-Tech</a> : <a href="mailto:matt@unicornsystems.co.uk" class="small">email</a><br>
    				Powered by <!--tpl_static @FAHMON_VERSION@ tpl//--> Web Monitoring Application <a href="http://fahmon.net/download.html" border="0"><img src="dialog_icon.png" border="0" /></a>
    			</div>
    			</table>
    </div>
    </center>
    </body>
    </html>

    You will need to find and replace Unicorn with your name.
    Thanks to him for updating the changes :)

    Mainly the Title tag. H1 tag, and the footer, and change the email to your own if needed.

    Reload all your clients again and ta da you have a lovely CPC template.


    Enjoy.



    Any questions feel free to ask or IM im on MSN most the time at votick@live.co.uk.
    Hope you guys found it useful.
    And I look forward to seeing your pages :)


    ~ Votick
     
    Last edited: 12 Jun 2009
    Keith_Whi likes this.
  2. IwantAbetterPC

    IwantAbetterPC What's a Dremel?

    Joined:
    27 Apr 2009
    Posts:
    130
    Likes Received:
    1
    Cheers for doing that mate, I really appreciate it. Will go and try to set it up now and see if I can get the FTP through the firewall. easier way to see whats going on that VNC/Hamachi etc!

    Craig...
     
  3. coolamasta

    coolamasta Folding@Home CC Captain 2010/11/12

    Joined:
    26 Apr 2009
    Posts:
    2,618
    Likes Received:
    110
    Doesn't work for me :( but I think it is because my username for the ftp site has an '@' in it (meaning there is 2 @ symbols in the code) so its getting confused, I can conenct fine via an FTP clients though.

    Might not be able to do it that way then, will have to export fahmon stats locally and FTP it up using windows scheduler or something!

    Very good guide though mate nice work :D
     
  4. IwantAbetterPC

    IwantAbetterPC What's a Dremel?

    Joined:
    27 Apr 2009
    Posts:
    130
    Likes Received:
    1
    Arrgh,

    Might need a few edits on your post as it's not quite as easy as I'd hoped!

    Got an account set up on awardspace - iwantabetterpc.awardspace.co.uk.
    Got the fancy template sorted no problem.
    Got fahmon to dump it into a folder called fahweb on the desktop, which looks good if I launch index.html
    Can't seem to get the page to FTP to the website. Trying to do it from within command prompt - can ftp to site (so firewall not a problem), input userid, input password, try typing..

    put c:\documents and settings\CR\desktop\fahweb\*.*

    ... to copy it all to the website and dont get any errors (but no confirmation either!), so type "bye"

    go to the website and get nothing?

    the format of my string in the FAHMon web app 1 is...

    ftp://myuserid:mypassword@iwantabetterpc.awardspace.co.uk:21/index.html

    ...but no joy. where am I going wrong (XP 32 user, by the way!)

    Craig...
     
  5. Votick

    Votick My CPU's hot but my core runs cold.

    Joined:
    21 May 2009
    Posts:
    2,320
    Likes Received:
    109
    the files on your website form teh awardspace control pannel?

    delete the default index.html file.

    upload all the files including the index.html page to your site.


    awardsapce has a slighty diffrent layout.

    so i think the problem is your line.

    use this:

    Code:
    ftp://myuserid:*****@iwantabetterpc.awardspace.co.uk:21/iwantabetterpc.awardspace.co.uk/index.html
    If you downlaod filezilla and connect to it by that you can check the directory.

    Hope it works
     
  6. IwantAbetterPC

    IwantAbetterPC What's a Dremel?

    Joined:
    27 Apr 2009
    Posts:
    130
    Likes Received:
    1
    Yay! That works! Used Filezilla to upload it once, then set the extended path in FAHMON as detailed in the last post, hit F6 to refresh and it was up there!

    Nice one - now need to add it to my sig!

    Next trick is how to add the stats from the other Dell into this FAHMon so I can show the other SMP client numbers too, but the PCs are on different domains, one is XP and the other is MS Server 2003. I've tried sharing and got nowhere, and can't get FTP to work between the boxes. Any suggestions? (I'm being lazy as I'm sure it's on the forum somewhere if I could be bothered to search for it!)

    Craig...
     
  7. Votick

    Votick My CPU's hot but my core runs cold.

    Joined:
    21 May 2009
    Posts:
    2,320
    Likes Received:
    109
    hamatchi? thats what i use.
    From the guide in issue 70 i think.

    Gratz on getting that to work :)
     
  8. IwantAbetterPC

    IwantAbetterPC What's a Dremel?

    Joined:
    27 Apr 2009
    Posts:
    130
    Likes Received:
    1
    Yup,

    Works a treat mate! I'll have a look on the Forum - Saspro has answered this loads of times already, so there are loads of threads on this. If all else fails, I'll get Issue 70 out when I get home.

    Cheers again buddy! :thumb::rock:

    Craig...
     
  9. Votick

    Votick My CPU's hot but my core runs cold.

    Joined:
    21 May 2009
    Posts:
    2,320
    Likes Received:
    109
    Do you think we should sticky this thread for future referance?
     
  10. IwantAbetterPC

    IwantAbetterPC What's a Dremel?

    Joined:
    27 Apr 2009
    Posts:
    130
    Likes Received:
    1
    I think so.

    I think it could do with tarting up a bit to flesh out the domain registration part, as well as the FTP/Filezilla part, and the most important bit is getting the FTP:// string explicitly right for embedding into FAHMon. Some of these are assuming a degree of knowledge about how to set them up and use them. Fixing the Fancy template is perfect.

    Rather than another sticky (we'll soon have so many that you can't see any new posts!), could we tack a reply onto one of the existing signature/stats stickies instead?

    I think it is really cool and I can now monitor my folding allotment stats from anywhere on the web - our firewalls at work prevent VNC and LogMeIn etc from working properly, but the plain website is a scoosh!

    Regards,

    Craig...
     
  11. Unicorn

    Unicorn Uniform November India

    Joined:
    25 Jul 2006
    Posts:
    12,726
    Likes Received:
    456
    Aha you beat me to it ;) I had half written a guide and saved it, but meh, it doesn't matter.

    Vote for Stickeh!
     
  12. Unicorn

    Unicorn Uniform November India

    Joined:
    25 Jul 2006
    Posts:
    12,726
    Likes Received:
    456
    I'm bumping this for the benefit of being able to find it again later, need to look at something for Saspro. Also, please sticky this? It's a really useful guide!
     
  13. VinnyVortex

    VinnyVortex Back in the game!

    Joined:
    21 Jul 2009
    Posts:
    19
    Likes Received:
    0
    Ok, i'm having some problems here. I've set up the awardspace account, managed to upload all necessary files and changed the template to CPC one. FAHMon is updating the index.html file via the ftp. But when I click on my web page link nothing happens. All file are in the sub domain directory. any ideas???
     
  14. VinnyVortex

    VinnyVortex Back in the game!

    Joined:
    21 Jul 2009
    Posts:
    19
    Likes Received:
    0
    OK, 'awardspace.co.uk' didn't work for me. I used 'host-ed.net' instead and it all work out alright.
     
  15. chin913

    chin913 忍び So say we all

    Joined:
    26 Apr 2009
    Posts:
    333
    Likes Received:
    2
    Think I am having another blond moment here
     
  16. Keith_Whi

    Keith_Whi What's a Dremel?

    Joined:
    6 May 2009
    Posts:
    228
    Likes Received:
    3
    Got it nearly sorted :sigh: but can anyone tell me why my FAH client status icons on the web page are just a red cross? I.e look like a file that can't be opened.

    Everything else is looking fine and it is updating but would like to iron that out if possible.

    Thanks,

    Keith.

    OOps forgot the link.. http://keithwhi.awardspace.co.uk/
     
  17. saspro

    saspro IT monkey

    Joined:
    23 Apr 2009
    Posts:
    9,606
    Likes Received:
    400
    You need to manually ftp them up there
     
    Keith_Whi likes this.
  18. Keith_Whi

    Keith_Whi What's a Dremel?

    Joined:
    6 May 2009
    Posts:
    228
    Likes Received:
    3
    Have replied in the other post, but thanks again, missed them completely. :D :duh:

    Hopefully this will help others.

    :rock:
     
  19. Unicorn

    Unicorn Uniform November India

    Joined:
    25 Jul 2006
    Posts:
    12,726
    Likes Received:
    456
    +1, can a mod please split this topic?
     
  20. DocJonz

    DocJonz Another CPC refugee .....

    Joined:
    24 Apr 2009
    Posts:
    1,200
    Likes Received:
    94
    *Bump* - Still be great to have this thread as a sticky :D
    Updated my FahMon web template: www.docjonz.net :cooldude:
     

Share This Page