worm_timeline2.html

<!DOCTYPE html>
<html>


<head>
    <meta charset="UTF-8">
    <meta name="description" content="Draw a timeline of C. elegans development">
    <meta name="author" content="A. Weinreb">
    <title>Worm Timeline</title>
    
    
    <style>
        .box{
            background-color: #eaf8f9;
            float: left;
            margin: 0.5%;
        }
        .miniBox{
            background-color: #95dee3;
            padding: 5px;
            margin: 3px;
            float: left;
            clear: left;
        }
        .durationField{
            width: 50px;
        }
    </style>

</head>


<body onload="computeDRF()">

<script>
// This is the full help text
helpText=`
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Self-contained application for drawing a timeline of C. elegans development">
    <meta name="author" content="A Weinreb">
    <title>Worm Timeline</title>
    
    <style>
      table{
        border: 1px solid black;
        display:inline-block;
      }
      tr:nth-child(even) {
        background-color: #dddddd;
      }
      p, h1,h2,h3 {
        margin-left:10%;
        width:80ch;
      }
    </style>
</head>

<h1> Documentation</h1>
<p>Reload the page to come back to timeline computations.</p>
<h2>Principle</h2>
<p>This script has a built-in description of worm development, with stage names and durations. It will draw a timeline predicting what stage the worms have at a given time.</p>

<h3>Synchronization method</h3>
<p>Three methods to synchronize worms are available: via an egg-lay, L1 arrest, or mesh synchronization. For an egg-lay, gravid adults are placed on plates and allowed to lay eggs for a defined period of time (typically 1h), then removed. That way, all the eggs on the plate will have approximately the same age. Another way to synchronize larger populations of worms is to bleach a large population of gravid adults. The bleach kills all larvae and adults, while embryo survive. The eggs are then placed in a liquid medium without food and allowed to hatch. The larval population becomes L1 arrested due to the lack of food, and will resume their development once plated on food. For mesh synchronization, gravid worms are bleached, the eggs placed on a mesh of appropriate size, and hatching larvae are allowed to crawl through. Protocols for egg-lay and bleach/L1 arrest have been described elsewhere (e.g. <a href="https://dx.doi.org/10.3791/4019">Porta-de-la-Riva <em>et al.</em>, JoVE, 2012</a>).</p>

<h3>Stage durations</h3>
<p>In "egg-lay" synchronization, the developmental timing is defined based on the description by <a href="https://doi.org/10.1016/0012-1606(76)90119-6">Byerly, Cassada and Russel (Dev. Biol. 1976)</a>. In "L1 arrest" synchronization, the developmental timing is the one defined in <a href="https://dx.doi.org/10.3791/4019">Porta-de-la-Riva <em>et al.</em>, JoVE, 2012</a>. In "mesh" synchronization, the developmental timing is that described by <a href="https://doi.org/10.1016/0012-1606(76)90119-6">Byerly, Cassada and Russel (Dev. Biol. 1976)</a>, but with L1 stage starting immediately.</p>

<div style="margin-left:20%">
<table>
<caption>Egg lay <br>(Byerly <em>et al.</em>, 1976)</caption>
  <tr>
    <th>Stage</th>
    <th>Beginning (h)</th>
    <th>Duration (h)</th>
  </tr>
  <tr>
    <td>L1</td>
    <td>11</td>
    <td>15</td>
  </tr>
  <tr>
    <td>L2</td>
    <td>26</td>
    <td>7</td>
  </tr>
  <tr>
    <td>L3</td>
    <td>33</td>
    <td>8</td>
  </tr>
  <tr>
    <td>L4</td>
    <td>41</td>
    <td>12</td>
  </tr>
</table>

<table>
<caption>Bleached <br>(Porta-de-la-Riva <em>et al.</em>, 2012)</caption>
  <tr>
    <th>Stage</th>
    <th>Beginning (h)</th>
    <th>Duration (h)</th>
  </tr>
  <tr>
    <td>L1</td>
    <td>0</td>
    <td>15</td>
  </tr>
  <tr>
    <td>L2</td>
    <td>15</td>
    <td>9</td>
  </tr>
  <tr>
    <td>L3</td>
    <td>24</td>
    <td>10</td>
  </tr>
  <tr>
    <td>L4</td>
    <td>34</td>
    <td>14</td>
  </tr>
</table>
</div>

<p>Worm development may change depending on the temperature conditions, the density of L1 arrested in suspension (<a href="https://doi.org/10.1534/g3.118.200056">Chan, Rando and Conine, G3, 2018</a>), the density of worms on the plates (<a href="https://doi.org/10.1371/journal.pgen.1006717">Ludewig <em>et al.</em>, PLoS Genet., 2017</a>), the bacterial food, the worms genetic background, and other factors. These factors can be accounted for by adjusting the DRF.</p>


<h3>Developmental Rate Factor model</h3>

<p>Assuming the changes in developmental growth are linear (i.e. all stage durations are affected by the same factor), this can be corrected by estimating a Developmental Rate Factor (DRF, as defined by Byerly <em>et al.</em>). In particular, the temperature empirically affects the DRF (between 15 and 25°C) as:</p>

<p style="text-align:center">DRF(T°C) = 0.08 * T°C - 0.52</p>

<p>For experiments in non-standard conditions (e.g. with mutant worms or alternative food source), the DRF can be estimated empirically and used as a parameter in this page. This only works if the assumption of linearity holds, otherwise more in-depth customization is required.</p>

<h3>Custom changes</h3>

<p>The box on the right side can be used to define custom periods. Each period has a name, starting point (in hours) and duration (in hours). The other periods automatically update. You can also add or remove periods. This can be useful to add a period (e.g. a Young Adult stage following L4, or a chemical treatment to be represented alongside the stages), or to customize the durations of some stages in a non-linear way.</p>

<p>For now the easiest way to customize the appearance of the final figure is to generate it with defaults parameters, download the result as SVG, and modify it using Inkscape or Adobe Illustrator. The default parameters for the appearance of the figure can be modified by downloading the source code and changing the "Theme" object.</p>

<h2>Issues and improvements</h2>
<p>Issues or Pull Requests can be submitted at <a href="https://github.com/AlexWeinreb/worm_timeline">https://github.com/AlexWeinreb/worm_timeline</a>.</p>

<br>
<br>
<br>
`;


function displayHelp(){
	document.write(helpText);
}


</script>

<h1>Worm timeline</h1>

<p>
<button type="button" onclick="displayHelp()">Display help</button>
</p>

<form id="inputForm" class="box"
        oninput="computeDRF()"
        style="width: 40%">
    
    <div class="miniBox">
    <label for="title">Title or comment:<br></label>
    <input type="text" id="title">
    </div>
    <br>
    
    <div class="miniBox">
    <label for="synchType">Type of synchronization:<br></label>
     <select id="synchType" onchange="checkSynchType()">
	   <option value="eggLay">Egg-lay</option>
	   <option value="bleach">L1 arrested</option>
	   <option value="mesh">Mesh synchronization</option>
	 </select><br>
    </div>
    <br>

    
    <div class="miniBox">
    <label for="beginning" id="labelBeginning">Beginning of egg-lay:</label>
    <input type="time" id="beginning">
    <br>
    </div>
    
    <div class="miniBox" style="clear: none">
    <div id="formEggLay">
    <label for="end">End of egg-lay:</label>
    <input type="time" id="end">
    </div>
    </div>
    <br>
    
    <div class="miniBox">
    <label for="DRF20">Experimental Development Rate Factor:<br></label>
    <input type="number" id="DRF20" value="1">
    </div>
    <br>
    
    <div class="miniBox">
    <label for="temperature">Temperature (°C):<br></label>
    <input type="range" name="tempRange" min="15" max="25" value="20"
         oninput="temperature.value=parseFloat(tempRange.value)">
    <input type="number" name="temperature" min="15" max="25" value="20"
         style="width: 50px;"
         oninput="tempRange.value=parseFloat(temperature.value)">
    <br>
    </div>
    
    <div class="miniBox">
    <label for="DRF">DRF = </label>
    <output name="DRF" for="DRF20 temperature"></output>
    <br>
    </div>
    
    <div style="float:right; padding:5px">
    <button type="button" onclick="drawTimeline()">Draw</button>
    </div>
</form>


<div class="box" style="width: 30%">
    <p onclick="document.getElementById('periods').style.display='block'">Click to change periods beginnings and durations at 20°C.</p>
    <form id="periods" style="display: none;">
        <!-- periods get added here -->
        
        <button type="button" onclick="addPeriod()">Add period</button>
    </form>
</div>


<p id="drawHere"></p>


<script>

// Define all javascript here

//global
var version = 2.8;

/* ##############################################################################
############################     Default values     #############################
############################################################################## */

function Theme() {
    // Describe the theme as an object
    this.imLength = 1300;
    this.strokeWidth = this.imLength / 500;
    this.imHeight = this.imLength / 5;
    this.xPositionTimeAxis = this.imLength * 0.08;
    this.yPositionTimeAxis = this.imHeight * 2/6;
    this.lenTimeAxis = this.imLength * 0.92;
    this.heightTimeAxis = 1.5 * this.strokeWidth;
    this.lenTimeArrow = 0.1 * this.lenTimeAxis;
    this.grad1Height = 3 * this.strokeWidth;
    this.grad12Height = 7 * this.strokeWidth;
    this.grad24Height = 12 * this.strokeWidth;
    this.fontSize = 3.5 * this.strokeWidth;
    this.fontSizeDay = 2 * this.fontSize;
    this.timekeeping = 24;
    this.yPositionDayAboveAxis = 20 * this.strokeWidth;
    this.heightPeriod = 2 * this.strokeWidth;
    this.egglayCol = "red";
    // https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=8
    this.colScheme = ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f", "#ff7f00"];
    this.periodNameSpacing = 0 * this.strokeWidth;
    this.linesEggLayBeginsEnds = 2;
    this.linesSpacingEggLayBeginsEnds = 5 * this.strokeWidth;
}

function Periods_default_egglay() {
	this.stageName = ["L1", "L2", "L3", "L4"];
	this.stageDuration = [15, 7, 8, 12];
	this.stageBeginning = [11, 15, 7, 8];
	this.totalDuration = getTotalDuration(this.stageDuration); //in hours
}

function Periods_default_bleach() {
	this.stageName = ["L1", "L2", "L3", "L4"];
	this.stageDuration = [15, 9, 10, 14];
	this.stageBeginning = [0, 15, 9, 10];
	this.totalDuration = getTotalDuration(this.stageDuration); //in hours
}

function Periods_default_mesh() {
	this.stageName = ["L1", "L2", "L3", "L4"];
	this.stageDuration = [15, 7, 8, 12];
	this.stageBeginning = [0, 15, 9, 10];
	this.totalDuration = getTotalDuration(this.stageDuration); //in hours
}


function updateInputEnd(){
	startTime = document.getElementById('beginning').value;
	console.log(startTime);
	//set egg-lay end 2h later
	let hours = parseInt(startTime.split(":")[0]) + 2;
	if(hours > 23) hours = hours - 24 ;
	if(hours < 10) hours = "0" + hours ;
	console.log(hours);
	document.getElementById('end').value = hours + ":" + startTime.split(":")[1]
}


// Use defaults
var Periods = new Periods_default_egglay();
var theme = new Theme();

var totalDuration;

/* ##############################################################################
###################### Javascript for input form management #####################
#################################################################################
############################################################################## */


function checkSynchType(){
    // Actions to perform upon choosing between egg-lay or arrested
    //document.getElementById('drawHere').innerHTML = document.getElementById('arrest').checked;
    if(document.getElementById('synchType').value == "bleach"){
        document.getElementById('formEggLay').innerHTML = "";
        document.getElementById('labelBeginning').innerHTML = "On food at:";
		Periods = new Periods_default_bleach();
		populatePeriods(Periods);
		console.log("Populated with bleach.");
		
    } else if(document.getElementById('synchType').value == "eggLay"){
        document.getElementById('formEggLay').innerHTML = 'End of egg-lay:<br>\
<input type="time" id="end">';
        document.getElementById('labelBeginning').innerHTML = "Beginning of egg-lay:";
		Periods = new Periods_default_egglay();
		populatePeriods(Periods);
		updateInputEnd();
		console.log("Populated with egg-lay.");
		
    } else if(document.getElementById('synchType').value == "mesh"){
	    document.getElementById('formEggLay').innerHTML = 'End of hatching:<br>\
<input type="time" id="end">';
        document.getElementById('labelBeginning').innerHTML = "Beginning of hatching:";
		Periods = new Periods_default_mesh();
		populatePeriods(Periods);
		updateInputEnd();
		console.log("Populated with hatching.");
		
	} else{
	    console.log("Synchronization method unknown: " + document.getElementById('synchType').value);
	    throw "Unknown synchronization method";
	}
}

var DRF; //keep it as global variable, so no need to retrieve toFixed value later
function computeDRF(){
    var iForm = document.getElementById('inputForm');
    DRF = (parseFloat(iForm.DRF20.value) * (0.07639583564892 *
         parseFloat(iForm.temperature.value) - 0.5279167129784));
    iForm.DRF.value = DRF.toFixed(3);
}

var nPeriods = 0;
function addPeriod(name, dur, beg){
    // Add a period
    var perBox;
    var newElement;

    //create a box for this period
    perBox = document.createElement("div");
    perBox.id = "perBox"+(nPeriods+1);
    perBox.className = "miniBox";
    document.getElementById('periods').appendChild(perBox);

    //the name of the period
    newElement = document.createElement("label");
    newElement.innerHTML = 'Period '+(nPeriods+1);
    newElement.htmlFor = "name"+(nPeriods+1);
    perBox.appendChild(newElement);

    newElement = document.createElement("input");
    newElement.type="text";
    newElement.id="name"+(nPeriods+1);
    newElement.value="period "+(nPeriods+1);
    if(name) newElement.value = name;
    perBox.appendChild(newElement);
    perBox.appendChild(document.createElement('br'));

    //beginning of the period
    newElement = document.createElement("input");
    newElement.type="number";
    newElement.id="begPeriod"+(nPeriods+1);
    newElement.min=0;
    newElement.className = "durationField";
    newElement.setAttribute("oninput","updatePeriodDuration(this)");
    if(beg) newElement.value = beg;
    perBox.appendChild(newElement);

    //duration of the period
    newElement = document.createElement("input");
    newElement.type="number";
    newElement.id="durPeriod"+(nPeriods+1);
    newElement.min=0;
    newElement.className = "durationField";
    newElement.setAttribute("oninput","updatePeriodBeginning(this)");
    if(dur) newElement.value = dur;
    perBox.appendChild(newElement);

    //button to delete the period
    newElement = document.createElement("button");
    newElement.type="button";
    newElement.name="delButton"+(nPeriods+1);
    newElement.onclick="delPeriod("+(nPeriods+1)+")";
    newElement.innerHTML = "Delete period";
    newElement.setAttribute("onclick", "deletePeriod(this)");
    perBox.appendChild(newElement);
    
    perBox.appendChild(document.createElement('br'));
    

    nPeriods += 1;
}

function updatePeriodDuration(per){
    // Update previous period duration upon input of beginning
    var i = parseInt(per.id.substring(9));
    if(i < 2 ){
        console.log("Can't update duration, too few periods.");
    } else{
        document.getElementById("durPeriod"+(i-1)).value =
            Number(document.getElementById("begPeriod"+i).value) - Number(document.getElementById("begPeriod"+(i-1)).value);
    }
}

function updatePeriodBeginning(per){
    // Update next period begin time upon input of duration
    var i = parseInt(per.id.substring(9));
    if(i > nPeriods - 1){
        console.log("Can't update beginning, it's the last period.");
        console.log("i="+i+" ; nPeriods = "+nPeriods);
    } else{
        document.getElementById("begPeriod"+ (i+1)).value =
            Number(document.getElementById("begPeriod"+i).value) + Number(document.getElementById("durPeriod"+i).value);
    }
}

function deletePeriod(per){
    // Delete period
    var i = per.name.substring(9);
    if(i<1 | i>nPeriods){
        console.log("Error for deletion: can't delete period "+i);
    } else{
        var child = document.getElementById("perBox"+i);
        var parent = document.getElementById("periods");
        parent.removeChild(child);
		nPeriods -= 1;
    }
}


function deleteAllPeriods(){
	while (nPeriods > 0) {
        deletePeriod(document.getElementById("perBox"+nPeriods).childNodes[5]);
    }
}

// Populate periods form with default parameters (name and duration)
function populatePeriods(Periods){
	// remove all existing
	deleteAllPeriods();
	
	// add new ones
	for(stage=0; stage < Periods.stageName.length; stage++){
		addPeriod(Periods.stageName[stage], Periods.stageDuration[stage], Periods.stageBeginning[stage]);
	}

	// Set beginning times
	for(stage=0; stage < Periods.stageName.length-1; stage++){
		updatePeriodBeginning(document.getElementById('durPeriod'+(stage+1)));
	}
}

function getTotalDuration(perList){
	totDur = 0;
	for(i = 5; i < perList.length; i ++){
		totDur += parseInt(perList[i].childNodes[4].value);
	}
	return(Math.max(4*24, totDur));
}

/* ##############################################################################
################## Populate input forms with default parameters ##################
#################################################################################
############################################################################## */

// Populate main input form
let currDt = new Date();
//use current date as title
document.getElementById('title').value = currDt.toISOString().slice(0,10);
//use current time as egg-lay start
document.getElementById('beginning').value = currDt.toTimeString().slice(0,5);

updateInputEnd()
populatePeriods(Periods);


/* ##############################################################################
############################ Javascript for drawing #############################
#################################################################################
############################################################################## */

// helper functions
function tCoord(t){
	// converts time (h) in x coordinate
	return theme.xPositionTimeAxis + t * theme.lenTimeAxis / totalDuration;
}

function drawGrad(t, strokeHeight, text){
	//draw a graduation at time t
	var xCoord = tCoord(t);
	var im = '<line x1="'+ xCoord +'" y1="'+ (theme.yPositionTimeAxis - strokeHeight) +
		'" x2="'+ xCoord +'" y2="'+ theme.yPositionTimeAxis +
		'" style="stroke:black ;stroke-width:'+ theme.strokeWidth +'" />';
	
	var writtenTime; //to define the way we write time
	switch(theme.timekeeping){
		case 24:
			writtenTime = t%24;
			break;
		case 12:
			writtenTime = t%12;
			break;
		default:
			console.log("Error when reading timekeeping");
	}
	
	var xCenter = xCoord - t.toString().length * theme.fontSize /4;
	im += '<text x="'+ xCenter +'" y="'+ (theme.yPositionTimeAxis - 1.5 * strokeHeight) +
		'" style="font-size:'+ theme.fontSize +'px">'+
		writtenTime +'</text>';

	return im;
}

function drawPeriod(tBeg, tEnd, yPos, periodName, color){
	// draws a period of time
	xBeg = tCoord(tBeg);
	xEnd = tCoord(tEnd);
	yy = theme.yPositionTimeAxis + theme.heightTimeAxis + yPos;
	
	im = '<rect x="'+ xBeg +'" y="'+ yy +
		'" width="'+ (xEnd - xBeg) +
		'" height="'+ theme.heightPeriod +
		'" style="fill:'+ color +';stroke-width:'+ theme.strokeWidth +
		';stroke:'+ color +'" />'
	if(periodName != ""){
		im += '<text x="'+ (xBeg + (xEnd - xBeg) / 2 - theme.fontSizeDay * periodName.length /4) +
			'" y="'+ (yy + theme.heightPeriod + theme.periodNameSpacing + theme.fontSizeDay) +
			'" style="font-size:'+ theme.fontSizeDay +'px">'+ periodName +'</text>';
	}
	return im;
}

function download(filename, text) {
	// listener for download button
	var element = document.createElement('a');
	element.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text));
	element.setAttribute('download', filename);

	element.style.display = 'none';
	document.body.appendChild(element);

	element.click();

	document.body.removeChild(element);
}

function time_in_hours(time){
    return parseInt(time.split(":")[0]) + time.split(":")[1] /60;
}

// main drawing
function drawTimeline(){
    // The function that is actually called to make the drawing
    
    
    //Reading the input form
    iForm = document.getElementById("inputForm");
    title = iForm.title.value;
    isEggLay = !(iForm.synchType.value == "bleach");
	console.log("isEgglay: "+ isEggLay);

	if(isEggLay){
	  // the starts are for the beginning and end of egg-lays
	  var starts = [time_in_hours(iForm.beginning.value),
	                time_in_hours(iForm.end.value)];

		if(starts[0] > starts[1]) starts[0] -= 24; //for the edge case when egg-lay around midnight
		
		console.log("starts: "+ starts[0] + ", " + starts[1]);
	
	} else{
	  // for bleach, the only start is the on-food time.
	  var starts = [time_in_hours(iForm.beginning.value)];
	}
  temp = iForm.temperature.value;
  
    // read the period form
	var perName, perDuration,
        perList = document.getElementById('periods').childNodes;
	
	totalDuration = getTotalDuration(perList);
    
    // ----------------------- Create drawing ------------------------------------
    
    // initialize
    image = '<svg width="'+ theme.imLength +'" height="'+ theme.imHeight +'">';
    // Main axis
    image += '<rect x="'+ theme.xPositionTimeAxis +'" y="'+ theme.yPositionTimeAxis +
            '" width="'+ (theme.lenTimeAxis + theme.lenTimeArrow) +
            '" height="'+ theme.heightTimeAxis +
            '" style="fill:black;stroke-width:'+ theme.strokeWidth +';stroke:black" />'

    
    for(t=1; t < totalDuration; t++){
        if(t%24==0) image += drawGrad(t, theme.grad24Height);
        else if(t%12==0) image += drawGrad(t, theme.grad12Height);
        else image += drawGrad(t, theme.grad1Height);
    }
    
    // Write days
    var xx, yy, dayText;
    for(day = 1; day < totalDuration/24+1; day++){
	    dayText = 'Day ' + day;
	    xx = theme.xPositionTimeAxis + (day - 0.5)*24* theme.lenTimeAxis/totalDuration -
	    theme.fontSizeDay * dayText.length / 4;
	    yy = theme.yPositionTimeAxis - theme.yPositionDayAboveAxis;

	    image += '<text x="'+xx+'" y="'+yy+
	    '" style="font-size:'+ theme.fontSizeDay +'px">'+ dayText +'</text>';
        
    }
    yy=undefined; //will reuse


    /* ##############################################################################
    ################################ Adding stages ################################
    #################################################################################
    ############################################################################## */

    var xBeg, xEnd;


    // draw egg lay period
    if(iForm.synchType.value == "eggLay") image += drawPeriod(starts[0], starts[1], 10, "Egg lay", theme.colScheme[0]);
    // case mesh
	if(iForm.synchType.value == "mesh") image += drawPeriod(starts[0], starts[1], 40, "Hatch", theme.colScheme[0]);
	
	
    // Draw other periods
    for(per=5; per<perList.length; per++){ //foreach period
        perName = perList[per].childNodes[1].value;
        perBeg = perList[per].childNodes[3].value / DRF;
        perDuration = perList[per].childNodes[4].value / DRF;

        for(yy_row=0; yy_row<starts.length; yy_row++){  //foreach vertical row (1 if bleach, 2 if egg-lay)
        
            image += drawPeriod(starts[yy_row] + perBeg,   //beginning
                                starts[yy_row] + perBeg + perDuration,  //end
                                10 + theme.linesSpacingEggLayBeginsEnds*yy_row, //y coordinates
                                yy_row==(starts.length -1)? perName: '',  //name (only for last one)
                                theme.colScheme[per-4]);  //color, skip value 0 that can be used for egg-lay
        }
    }
    
    
	/* ##############################################################################
	################################### Last steps ##################################
	#################################################################################
	############################################################################## */
    
    // Add descriptive text on the left
    image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px">'+ title +'</text>';

    if(isEggLay){
	  legnd = (iForm.synchType.value == "eggLay")? "Egg-lay": "Hatch";
      image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 2*theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px"> '+legnd+' began: '+
	             Math.trunc(starts[0]) + "h"+ Math.round(60*(starts[0]%1)) +'</text>';

      image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 3*theme.fontSizeDay) +
  	            '" style="font-size:'+ theme.fontSize +'px"> '+legnd+' ended: '+
  	            Math.trunc(starts[1]) + "h"+ Math.round(60*(starts[1] %1)) +'</text>';
    } else{
      image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 2*theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px"> L1 arrest</text>';
      image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 3*theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px"> On food at: '+
	             Math.trunc(starts[0]) + "h"+ Math.round(60*(starts[0]%1)) +'</text>';
    }
    
    
    image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 4*theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px"> DRF @ 20°C: '+
	             Math.round(100*iForm.DRF20.value)/100 +'</text>';
    
    image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 5*theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px"> T: '+
	             iForm.temperature.value +'°C</text>';
    
    image += '<text x="' + 2 * theme.strokeWidth + '" y="'+ (2*theme.strokeWidth + 6*theme.fontSizeDay) +
	            '" style="font-size:'+ theme.fontSize +'px"> DRF: '+
	             Math.round(1000*DRF)/1000 +'</text>';
    
    var Dt = new Date();
    message = 'Generated by worm_timeline v.'+version+' on '+Dt.toLocaleString() ;
    image += '<text x="' + (theme.imLength - message.length*0.8*theme.fontSize) +
             '" y="'+ (theme.imHeight - 1.5*theme.fontSize) +
	            '" style="font-size:'+ theme.fontSize +'px; fill:LightGray;">'+message+'</text>';
    
    // Generate image
    image += '</svg>';
    document.getElementById('drawHere').innerHTML = image;
    
    
    // Make download button
    var dwdButton = document.createElement("button");
    dwdButton.type = "button";
    dwdButton.innerHTML = "Download SVG";
    dwdButton.id = "dwdButton";
    document.getElementById("drawHere").appendChild(dwdButton);
    
    
    // Start file download.
    document.getElementById("dwdButton").addEventListener("click", function(){
        // Generate download of hello.txt file with some content
        var text = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+image;
        var filename = title.replace(/[^a-z0-9\\-_]/gi, '_') + ".svg";
        download(filename, text);
    },
    false);

}

</script>


</body>
</html>