Re: [Osmo-pim-friends] Osmo development status

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 454-5900

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" type="text/css" href="jsgantt.css"/>
<script language="javascript" src="jsganttOSMO.js"></script><style type="text/css">
<!--
.style1 {color: #0000FF}

.roundedCorner{display:block}
.roundedCorner *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#0061ce}
.roundedCorner1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #91bbe9;
  border-right:1px solid #91bbe9;
  background:#3f88da}
.roundedCorner2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5effa;
  border-right:1px solid #e5effa;
  background:#307fd7}
.roundedCorner3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #307fd7;
  border-right:1px solid #307fd7;}
.roundedCorner4{
  border-left:1px solid #91bbe9;
  border-right:1px solid #91bbe9}
.roundedCorner5{
  border-left:1px solid #3f88da;
  border-right:1px solid #3f88da}
.roundedCornerfg{
  background:#0061ce;}

-->
</style>
<title>&nbsp;&nbsp;jsGantt - 1.2 + OSMO Personal Information Manager</title></head>
<script>
//THE FOLLOWING 2 FUNCTIONS DO WORK
//TO PRODUCE A DATE THAT COINCIDES WITH
//OSMO
function dateFromDay(year,day){
  var date = new Date(year, 0); // initialize a date in `year-01-01`
  var Dat=new Date(date.setDate(day)); // add the number of days
  var yr=Dat.getFullYear();
  var mnth=Dat.getMonth()+1;
  var day=Dat.getDate();
//  return new Date(date.setDate(day)); // add the number of days
  return mnth+"/"+day+"/"+yr
}
function getTimeStamp(lng) {

	var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
	var dat=lng
	var year=365.061102832
	var datYr=Math.floor(dat/year);
	var day=365*(dat/year-datYr)
	var snc=((datYr-1970)*year+day)*oneDay

	var dat=dateFromDay(datYr,Math.ceil(day))

	return dat;
}

function setChartHeight(){
//	var availWid=window.innerWidth	//-540 //480
	var availHght=window.innerHeight	//-540 //480

//	cont.style.height=window.innerHeight - 350 //-270-80+"px";
//	cont.style.maxHeight=window.innerHeight - 350  //-270-80+"px";
	var elements = document.getElementsByClassName("scroll");
	elements[0].style.height = availHght-100+'px';
	var elements = document.getElementsByClassName("scroll2");
	elements[0].style.height = availHght-100+'px';;
}
function getDepID(str){

var alphaCatID=1000
var haverunCats=false
var taskIDs=""

	var Cats=xmlDoc.getElementsByTagName("name")
	var catsLngth=Cats.length
	var catIDs=""
	var starts=""
	var dues=""
	var Zeroes=0
	var pID=0
	var result=0

	for(var i=0;i<catsLngth;i++) {
		alphaCatID=alphaCatID+1;
		pID = alphaCatID;
//add the cat task
		catIDs=catIDs+"/"+pID
		var pID=String(alphaCatID)
		pID *= 1

		var Task=xmlDoc.getElementsByTagName("entry")
		var incr=0
		for(var j=0;j<Task.length;j++) {

			if(Task[j].getElementsByTagName("category")[0].childNodes[0].nodeValue==Cats[i].childNodes[0].nodeValue){
				incr=incr+1

				pID=String(alphaCatID)+incr
				pID *= 1
				if(Task[j].getElementsByTagName("summary")[0].childNodes[0].nodeValue==str){
				result=pID
				//				return pID
				}
			}			
		}
	}
	return result
}

function convertToHexColor(englishColor) {

    // create a temporary div. 
    var divClr = document.getElementById("clr")
    divClr.style.backgroundColor=englishColor;
    var computedStyle = window.getComputedStyle(divClr);

    // get computed color.
    var computedColor = computedStyle.backgroundColor;

    //alert(computedColor);
    return computedColor;

    // The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
};

function convertRGBDecimalToHex(rgb)
{
    var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
    var values = regex.exec(rgb);
    if(values.length != 4)
    {
        return rgb; // fall back to what was given.              
    }
    var r = Math.round(parseFloat(values[1]));
    var g = Math.round(parseFloat(values[2]));
    var b = Math.round(parseFloat(values[3]));
    return "#" 
        + (r + 0x10000).toString(16).substring(3).toUpperCase() 
        + (g + 0x10000).toString(16).substring(3).toUpperCase()
        + (b + 0x10000).toString(16).substring(3).toUpperCase();
}

function getHex(clr){
		var Hex=convertRGBDecimalToHex(convertToHexColor(clr))
		return Hex.substr(1)
}
</script>
<!--<body onload="getTimeStamp(735042);">-->
<body onload="setChartHeight();">
<div id="clr" name="clr"></div>
    <!-- content goes here -->
	<TABLE width="100%" cellpadding="0" cellspacing="0" style="position:absolute; top:0; left:0;"> 
		<TBODY>
			<TR>
				<TD bgcolor="#298eff" style="height:3px;"></TD>
			</TR>
			<TR>
				<TD bgcolor="#0061ce" style="padding-top:5px; padding-bottom:5px;"><FONT face="Arial,Helvetica" size="3" color="#FFFFFF"><I><STRONG>&nbsp;&nbsp;jsGantt - 1.2 + OSMO Personal Information Manager</STRONG></I></FONT></TD>
			</TR>
			<TR>
				<TD bgcolor="#CFCFCF" style="height:3px;"></TD>
			</TR>
			<TR>
				<TD bgcolor="#ffffff" style="color:#444444;text-decoration:none;"><FONT face="Arial,Helvetica" size="1" color="#FFFFFF"><I><STRONG>&nbsp;&nbsp;<a href="#tExplanation">Explanation</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tFeautures">Features</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tBugs">Bugs/Issues</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tDownload">Download</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tUsage">Usage</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tLicense">License</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#tCredits">Credits</a> </STRONG></I></FONT>
				</TD>
			</TR>
			<TR>
				<TD bgcolor="#FFFFFF" style="height:2px;"></TD>
			</TR>
			<TR>
				<TD bgcolor="#CFCFCF" style="height:1px;"></TD>
			</TR>
	  </TBODY>
	</TABLE>
	<br/>
	<br/>
	<br/>
	<br/>
	<div style="position:relative" class="gantt" id="GanttChartDIV">
	<!--OUTPUTTED GANT CHART GOES HERE-->	
	</div>

<script>
	// here's all the html code neccessary to display the chart object
	// Future idea would be to allow XML file name to be passed in and chart tasks built from file.
	//INSERT TASKS for the Categories
	//Then make the subtasks "pGroup" set to the ID of the Category

	var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
	g.setShowRes(1); // Show/Hide Responsible (0/1)
	g.setShowDur(1); // Show/Hide Duration (0/1)
	g.setShowComp(1); // Show/Hide % Complete(0/1)
	g.setCaptionType('Resource'); //try ID Resource// Set to Show Caption (None,Caption,Resource,Duration,Complete)
	g.setShowStartDate(1); // Show/Hide Start Date(0/1)
	g.setShowEndDate(1); // Show/Hide End Date(0/1)
	g.setDateInputFormat('mm/dd/yyyy')  // Set format of input dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
	g.setDateDisplayFormat('mm/dd/yyyy') // Set format to display dates ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd')
	g.setFormatArr("day","week","month","quarter")
	if( g ) {

		// Parameters
		//(pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes,  pComp, pGroup, pParent, pOpen)
		//plink won't handl spacesvin the name
		// use the XML file parser 
		//THIS IS THE PATH TO YOUR OSMO TASKS FILE
		//If this html, the css and the js are placed in the /root/.osmo directory
		//	then the path can remain as is
		JSGantt.parseXML('tasks_entries.xml',g)

		g.Draw();	
		g.DrawDependencies();
	}else{
		alert("not defined");
	}
</script>
<!--
From S. Vanya
The following section I added after I figured out how to make this work.

I am includding and amendeding it to suit its current context.
-->
	<br/>
	<div id="tFeautures"><FONT face="Arial,Helvetica" size="3">
		<strong>jsGantt/OSMO Extension-Basic Features</strong><br/>
		<ul>
			<li>Dynamically loads OSMO Tasks file into a Gantt Chart View</li>
			<strong>By annotating the Description field of each task you can also add:</strong>
			<ul>
			<li>Start Date (End Date is set within OSMO by setting the Due Date on the task)</li>
			<li>% Complete</li>
			<li>Task Color</li>
			<li>Dependencies-Single and Multiple</li>
			</ul>
			<li>The entire Task Description pops up when you mouse-over the item on the Gantt Task List</li>
		</ul>
		<strong><i>jsGantt-Basic Features</i></strong><br/>
		<ul>
			<li>Tasks & Collapsible Task Groups</li>
			<li>Multiple Dependencies</li>
			<li>Task Completion</li>
			<li>Task Color</li>
			<li>Milestones</li>
			<li>Resources</li>
			<li>No images needed</li>
			<li><font size="3" face="Arial,Helvetica">Dynamic change of format </font>
				<ul>
					<li>Day</li>
					<li>Week</li>
					<li>Month</li>
					<li>Quarter</li>
					<li>Hour</li>
					<li>Minute</li>
				</ul>
		</li>
	</ul>
	</div>
	</FONT>
<FONT face="Arial,Helvetica" size="3"><br/>
</FONT>
<div style="width:600px;">
  <b class="roundedCorner">
  <b class="roundedCorner1"><b></b></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner5"></b></b>
<div class="roundedCornerfg">
<a name="tExplanation" />
	<table width="50%" >
		<tr>
			<td>
				<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b>&nbsp;&nbsp;EXPLANATION</b></i></font>
			</td>
		</tr>
	</table>
</div>

  <b class="roundedCorner">
  <b class="roundedCorner5"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner1"><b></b></b></b>
</div>
<br/>
Explanation:
<p>I have been using OSMO for a while now, but been frustrated by the fact that I can not really plan projects with it since it does not truly have an embedded heirarchy feature. It also has been difficult for me to see the relationships between my tasks.</p>
<p>So I went looking for a Gantt chart tool into which I could pipe the tasks_entries.xml file that holds all of the OSMO tasks.</p>
<p>After some time I found <a target="_blank" href="http://code.google.com/p/jsgantt/">jsGantt</a> which very readily accepts the OSMO task file.</p>
<p>So now I can continue to use OSMO but also see the flow and relaltionships (via dependencies of my tasks) by simply adding some formatted text to the start of my Description field.</p>
<p><b>For Developers:</b><br/>Most of the real work is being done in the "writeXML" function which replaces the jsGantt parseXML function. It reads the tasks_entries.xml file and in particular the Description field and parses them in such a fashion that jsGantt likes.</p>
<p>See <a href="#tUsage">Usage</a> for more details on how to make this work. It's really pretty easy and requires much less work than most other Gantt tools <strong>AND</strong> empowers you to keep using OSMO but add Gantt visualization to your planning.</p>
<br/>
<br/>
<div class="roundedCornerfg">
<a name="tBugs" />
	<table width="50%" >
		<tr>
			<td>
				<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b>&nbsp;&nbsp;BUGS/ISSUES</b></i></font>
			</td>
		</tr>
	</table>
</div>

  <b class="roundedCorner">
  <b class="roundedCorner5"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner1"><b></b></b></b>
</div>
<br/>
Current Issues:
<ol>
<li>I have not yet figured out what the issues are. But I <b><i>feel</i></b> it's good enough for other developers to begin looking at it and extend it even further.</li>
<li>There are only two levels, the Category and the Task. So a true heirarchy has yet to be developed. This is something I have been trying to achieve with OSMO for some time.</li>
<strong>TODOS:</strong>
	<ol>
		<li>Trapping inconsistencies, example Start Dates that occur after End Dates</li>
		<li>Add a Heirachy</li>
		<li>Add Resources (Currently the resource is listed as "self" which in a local environment seems OK.)</li>
		<li>Add Link (So clicking on the item pulls up something real such as a documet or webpage)</li>
		<li>Add Milestones</li>
	</ol>
</ol><br/>
<br/>
<div style="width:600px;">
  <b class="roundedCorner">
  <b class="roundedCorner1"><b></b></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner5"></b></b>

  <div class="roundedCornerfg"> <a name="tDownload" />
  <table width="50%"><tr><td>
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b>&nbsp;&nbsp;DOWNLOAD</b></i></font>
</td></tr></table></div>

  <b class="roundedCorner">
  <b class="roundedCorner5"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner1"><b></b></b></b>
</div><br/>
<a href="">Click here to download the jsganttOSMO.zip file</a><br/>
<p>The zip file contains: the modified jsGantt CSS files (jsgantt.css), the modified javascript backbone (jsGanttOSMO.js), the jsganttOSMO.html file and this ReadMe.html file.</p> 
<br/><br/>
<div style="width:600px;">
  <b class="roundedCorner">
  <b class="roundedCorner1"><b></b></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner5"></b></b>

  <div class="roundedCornerfg"><a name="tUsage" />
  <table width="50%"><tr>
  <td>
<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b>&nbsp;&nbsp;USAGE</b></i></font>
</td>
</tr></table></div>

</div>
1. Extract the contents of the zip file (jsgantt.css, jsganttOSMO.js, jsganttOSMO.html, and ReadMe.html) files into your /root/.osmo folder. (Or for that matter, to just try it out, you can extract the files to any directory where an OSMO "tasks_entries.xml" file is located.
<pre class="style1"></pre>
2. Use OSMO as you normally would.
<pre class="style1"></pre>
3. Open the jsganttOSMO.html file in a browser
3. At this stage a very basic Gantt chart should appear in your browser. The start and end dates however are arbtrary.
4. To add Start Dates (the End Date is the due date as you set it in OSMO), %Complete, Task Colors and Dependencies enter additional items into the Description of each task according to the following format:
<ul>
<li>On the first line of the Description enter the following: "[[]]" (no quotes)</li>
<li>Then in the middle of the brackets you may add (in any order) the following separated by the "|" character (no quotes)</li>
<ul>
<li>"s@=mm/dd/yyyy" (no quotes) for the Start Date of the task, ex. s@=7/22/2013 or s@=12/1/2013</li>
<li>"c@=###" (no quotes) for the %Complete, a number between 0 and 100, ex. c@=55</li>
<li>"o@=colorname" (no quotes) for the task color, in HTML standard color names, ex. o@=teal or o@=yellow</li>
<li>"p@=tasksummary" (no quotes) for the dependent task or tasks where 'tasksummary' is a direct copy from the 'Summary' field of the task(s) that this task depends on. In the case of multiple dependencies, separate the dependents with "{}" (no quotes), ex. p@=Prep for D&D night{}clean up the house</li>
<li>EXAMPLE: [[s@=7/25/2013|c@=0|o@=green|p@=Prep for D&D night{}clean up the house]]</li>
<li>Note:Characters do not need to be escaped as OSMO handles that when it writes the xml file</li>
</ul>
</ul>

<div style="width:600px;">
  <b class="roundedCorner">
  <b class="roundedCorner1"><b></b></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner5"></b></b>

	<div class="roundedCornerfg"><a name="tLicense" />
		<table width="50%">
			<tr>
				<td>
					<font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b>&nbsp;&nbsp;LICENSE</b></i></font>
				</td>
			</tr>
		</table>
	</div>

</div> 
jsganttOSMO is released under BSD license. If you require another license please contact <a href="mailto:slv...@at...">slv...@at...</a> If you plan to use it in a commercial product please consider donating the first sale to a charity.
 
S Vanya-I hope I have done this issuing thing right. As I am new to the (public) development world, I am not sure I did and by all means do not want to step on the toes of Shlomy Gantz/BlueBrick Inc and the other developers who have done such a brilliant job creating a wonderful tool. If this is licensing has been done incorrectly (Shlomy) please contact me and I will change it accordingly. 
<textarea cols="80" rows="5">
* Copyright (c) 2008, Shlomy Gantz/BlueBrick Inc.
* Copyright (c) 2013, Scott Vanya
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* * Neither the name of Shlomy Gantz or BlueBrick Inc. nor the
* names of its contributors may be used to endorse or promote products
* derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY SCOTT VANYA ''AS IS'' AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL SHLOMY GANTZ/BLUEBRICK INC. BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</textarea>

<pre class="style1"></pre>
<div style="width:600px;">
  <b class="roundedCorner">
  <b class="roundedCorner1"><b></b></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner5"></b></b>

<div style="width:600px;">
  <b class="roundedCorner">
  <b class="roundedCorner1"><b></b></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner5"></b></b>

  <div class="roundedCornerfg"><a name="tCredits"/>
  <table width="100%">
  <tr><td><font face="Arial,Helvetica" size="3" color="#FFFFFF"><i><b>&nbsp;&nbsp;CREDITS</b></i></font>
</td></tr></table></div>

  <b class="roundedCorner">
  <b class="roundedCorner5"></b>
  <b class="roundedCorner4"></b>
  <b class="roundedCorner3"></b>
  <b class="roundedCorner2"><b></b></b>
  <b class="roundedCorner1"><b></b></b></b>
</div>

jsGantt-Developed by Shlomy Gantz and Brian Twidt 
Contributed: Paul Labuschagne, Kevin Badgett, Ilan Admon 
jsgantOSMO Personal Information Manager-jsGantt Extension-Developed by Scott Vanya 
 
I (Scott Vanya) want to personally thank Shlomy Gantz, Brian Twidt, Paul Labuschagne, Kevin Badgett, and Ilan Admon for developing such a wonderful tool. It is wonderful to work with and has made my life much easier. Excellent work, and I deeply appreciate it.

</body>

</html>