First login?
Lost password?
 
 
cellml-tools-developers AT lists.cellml.org 
A list for the developers of CellML tools

Text archives Help


[cellml-dev] r1826 - in pce/trunk/chrome: content/controls content/util skin


Chronological Thread 
  • From: ak.miller at auckland.ac.nz (Andrew Miller)
  • Subject: [cellml-dev] r1826 - in pce/trunk/chrome: content/controls content/util skin
  • Date: Fri, 12 Oct 2007 17:26:06 +1300
Hi,

I will wait until this change is complete before reviewing the
implementation in any more detail, but a few comments on the UI design.
These are issues which we can perhaps fix over time when the support for
this is established:

1) The 'I' icon is perhaps not very intuitive, because we don't
necessarily expect our users to know what 'identity' means in this
context. Perhaps we want to come up with a more understandable visual
metaphor that is sufficiently simple to unambiguosly represent in a
16x16 image. One option would be log-linear and linear-linear graph paper.
2) Three-way cycling toolbuttons are not ideal from a UI perspective
because they are not discoverable - when you are looking for how to do
something like get a log axis or a percent transform, you don't expect
to click on a button which looks like an 'I'. I would suggest instead
having all three buttons appear alongside each other with only one
depressed at a time (alternatively, they may not be mutually exclusive -
perhaps it makes sense to do a log transform but only plot percentages
of the maximum log-transformed value, so then there would be two
buttons, with the possibility of having none, one, or two buttons
depressed at once).

Best regards,
Andrew


CellML Automated Notifications wrote:
> Author: jmar150
> Date: 2007-10-12 16:35:41 +1300 (Fri, 12 Oct 2007)
> New Revision: 1826
>
> Added:
> pce/trunk/chrome/skin/identity.png
> pce/trunk/chrome/skin/log.png
> Modified:
> pce/trunk/chrome/content/controls/graph.xml
> pce/trunk/chrome/content/controls/integrationsettings.xml
> pce/trunk/chrome/content/util/GraphSupport.js
> Log:
>
>
> Modified: pce/trunk/chrome/content/controls/graph.xml
> ===================================================================
> --- pce/trunk/chrome/content/controls/graph.xml 2007-10-12 01:36:30
> UTC (rev 1825)
> +++ pce/trunk/chrome/content/controls/graph.xml 2007-10-12 03:35:41
> UTC (rev 1826)
> @@ -52,7 +52,7 @@
> </xul:popup>
> <xul:popup anonid="actionpopup">
> <xul:menuitem label="New Trace" oncommand="newGraphEntry();"/>
> - <xul:menuitem label="Disable" oncommand="selectDrawType('I');"/>
> + <xul:menuitem anonid="toggletrace" label="Disable"
> oncommand="toggleTrace()"/>
> <xul:menuitem label="Delete" oncommand="deleteTrace();"/>
> </xul:popup>
> <xul:popup anonid="variablepopup"
> oncommand="VariableSelected(event);" />
> @@ -457,6 +457,30 @@
> this.grapharea.changeEnd();
> </body>
> </method>
> + <method name="toggleTrace">
> + <body>
> + var treei = this.popupItem;
> + var p = treei.getAttribute("properties");
> + var i;
> + var gli;
> + for (i in this.selector.axis.lines)
> + {
> + gli = this.selector.axis.lines[i];
> + if (gli.properties == p)
> + break;
> + }
> + if (gli.properties != p)
> + return;
> + if (gli.drawType == "I")
> + {
> + this.selectDrawType("L");
> + }
> + else
> + {
> + this.selectDrawType("I");
> + }
> + </body>
> + </method>
> <method name="selectDrawType">
> <parameter name="type" />
> <body>
> @@ -475,6 +499,7 @@
> }
> if (gli.properties != p)
> return;
> +
> var changesVisibility = (gli.drawType == "I") || (type == "I");
> gli.setDrawType(type);
> this.grapharea.changeBegin();
> @@ -743,6 +768,21 @@
> }
>
> this.popupItem = this.maintree.view.getItemAtIndex(row);
> +
> + var treei = this.popupItem;
> + var p = treei.getAttribute("properties");
> + var i;
> + var gli;
> + for (i in this.selector.axis.lines)
> + {
> + gli = this.selector.axis.lines[i];
> + if (gli.properties == p)
> + break;
> + }
> + if (gli.properties != p)
> + return;
> + document.getAnonymousElementByAttribute(this, "anonid",
> "toggletrace").setAttribute("label",
> + (gli.drawType=='I') ? "Enable" : "Disable");
> this.actionpopup.showPopup(this, event.clientX, event.clientY,
> "context", null, null);
> </handler>
> @@ -950,9 +990,9 @@
> <xul:hbox>
> <xul:graphselector anonid="graphselector" flex="1"
> tooltiptext="Choose a graph to display from the list, or type
> into the box to rename this graph." />
> - <xul:toolbarbutton checked="false" anonid="normaliseButton"
> - style="list-style-image: url(chrome://pcenv/skin/percent.png)"
> - oncommand="toggleNormaliseMode();" tooltiptext="Normalise Y
> axis to percentages of the maximum" />
> + <xul:toolbarbutton anonid="normaliseButton"
> + style="list-style-image: url(chrome://pcenv/skin/identity.png)"
> + oncommand="toggleNormaliseMode();" tooltiptext="Toggle
> Normalisation Method: None selected" />
> <xul:toolbarbutton checked="true" anonid="viewKeyButton"
> style="list-style-image: url(chrome://pcenv/skin/key.png)"
> oncommand="toggleKeyVisibility();" tooltiptext="Show key" />
> @@ -998,14 +1038,28 @@
> </constructor>
> <method name="toggleNormaliseMode">
> <body>
> - var norm = this.normbutton.hasAttribute("checked");
> - norm = !norm;
> - if (norm)
> - this.normbutton.setAttribute("checked", "true");
> - else
> - this.normbutton.removeAttribute("checked");
> -
> - this.grapharea.setNormaliseMode(norm);
> + // get the image styling in normbutton; this corresponds to its
> state
> + var norm =
> this.normbutton.style.getPropertyValue("list-style-image");
> + if (norm == "url(chrome://pcenv/skin/identity.png)")
> + {
> + this.normbutton.style.setProperty("list-style-image",
> "url(chrome://pcenv/skin/percent.png)", "");
> + this.normbutton.setAttribute("tooltiptext", "Toggle
> Normalisation Method: Normalised to percentage of maximum");
> + this.grapharea.setNormaliseMode("%");
> + } else if (norm == "url(chrome://pcenv/skin/percent.png)")
> + {
> + this.normbutton.style.setProperty("list-style-image",
> "url(chrome://pcenv/skin/log.png)", "");
> + this.normbutton.setAttribute("tooltiptext", "Toggle
> Normalisation Method: Logarithmic scale");
> + this.grapharea.setNormaliseMode("L");
> + } else if (norm == "url(chrome://pcenv/skin/log.png)")
> + {
> + this.normbutton.style.setProperty("list-style-image",
> "url(chrome://pcenv/skin/identity.png)", "");
> + this.normbutton.setAttribute("tooltiptext", "Toggle
> Normalisation Method: None selected");
> + this.grapharea.setNormaliseMode("I");
> + }
> + this.grapharea.changeBegin();
> + this.grapharea.pendingRescale = true;
> + this.grapharea.pendingRerender = true;
> + this.grapharea.changeEnd();
> </body>
> </method>
> <method name="toggleKeyVisibility">
> @@ -1162,7 +1216,7 @@
> var ga = this;
> this.isDestroyed = false;
>
> - this.normalise = false;
> + this.normalise = "I";
>
> // This is the distance between the left/bottom edge of the canvas
> and
> // the lines bordering the graph drawable region. Note that this
> margin
> @@ -1402,7 +1456,7 @@
> }
> }
>
> - if (this.normalise)
> + if (this.normalise == "%")
> {
> this.yMin = 0;
> this.yMax = 100;
> @@ -1419,9 +1473,17 @@
> </method>
> <method name="setupLabelsForGraph">
> <body><![CDATA[
> - this.yAxisSpec = computeAxisSpecification(this.yMin, this.yMax);
> - this.xAxisSpec = computeAxisSpecification(this.xMin, this.xMax);
> -
> + if (this.normalise == "L")
> + {
> + this.yAxisSpec = computeAxisSpecification(Math.pow(Math.E,
> this.yMin), Math.pow(Math.E, this.yMax), this.normalise);
> + this.xAxisSpec = computeAxisSpecification(Math.pow(Math.E,
> this.xMin), Math.pow(Math.E, this.xMax), this.normalise);
> + }
> + else
> + {
> + this.yAxisSpec = computeAxisSpecification(this.yMin,
> this.yMax, this.normalise);
> + this.xAxisSpec = computeAxisSpecification(this.xMin,
> this.xMax, "I"); // At present, only Log transforms both axes
> + }
> +
> var i;
> var x = this.graphmarginleft - this.ticksize - this.ytextxoffset;
> for (i in this.yAxisSpec.points)
> @@ -1504,15 +1566,22 @@
> <method name="computeNormalisedYTransformation">
> <parameter name="l" />
> <body>
> - var tyMin = l.datacollector.getNotifiedMinimum(l.yVariable);
> - var tyMax = l.datacollector.getNotifiedMaximum(l.yVariable);
> - this.my = (this.cheight - this.graphmargintop -
> this.graphmarginbottom) /
> - (tyMax - tyMin) * 100.0 / (this.yMax - this.yMin);
> - this.cy = this.cheight - this.graphmarginbottom + tyMin *
> this.my;
> - this.my = -this.my;
> - var range = (tyMax - tyMin);
> - this.yMaxClip = this.yMax / range + tyMin;
> - this.yMinClip = this.yMin / range + tyMin;
> + // Thus far, only % and log normalisation are implemented
> + if (this.normalise == "%")
> + {
> + var tyMin = l.datacollector.getNotifiedMinimum(l.yVariable);
> + var tyMax = l.datacollector.getNotifiedMaximum(l.yVariable);
> + this.my = (this.cheight - this.graphmargintop -
> this.graphmarginbottom) /
> + (tyMax - tyMin) * 100.0 / (this.yMax - this.yMin);
> + this.cy = this.cheight - this.graphmarginbottom + tyMin *
> this.my;
> + this.my = -this.my;
> + var range = (tyMax - tyMin);
> + this.yMaxClip = this.yMax / range + tyMin;
> + this.yMinClip = this.yMin / range + tyMin;
> + } else if (this.normalise == "L")
> + {
> +
> + }
> </body>
> </method>
> <method name="drawGraphTicks">
> @@ -1572,9 +1641,9 @@
> for (i in this.selector.axis.lines)
> {
> var l = this.selector.axis.lines[i];
> - if (rescale || (this.normalise && l.yChanged))
> + if (rescale || ((this.normalise != "I") && l.yChanged))
> {
> - if (this.normalise)
> + if (this.normalise != "I")
> this.computeNormalisedYTransformation(l);
> l.SetScale(this.xMin, this.xMax,
> this.yMinClip, this.yMaxClip,
>
> Modified: pce/trunk/chrome/content/controls/integrationsettings.xml
> ===================================================================
> --- pce/trunk/chrome/content/controls/integrationsettings.xml 2007-10-12
> 01:36:30 UTC (rev 1825)
> +++ pce/trunk/chrome/content/controls/integrationsettings.xml 2007-10-12
> 03:35:41 UTC (rev 1826)
> @@ -186,7 +186,7 @@
> "Generation Service are not activated, but this control " +
> "needs them. Disabling everything.");
> this.disableAllControls("This function is disabled because the "
> +
> - "required the CellML C Code Generation
> and " +
> + "required CellML C Code Generation and "
> +
> "CellML Integration services aren't " +
> "available");
> }
>
> Modified: pce/trunk/chrome/content/util/GraphSupport.js
> ===================================================================
> --- pce/trunk/chrome/content/util/GraphSupport.js 2007-10-12 01:36:30
> UTC (rev 1825)
> +++ pce/trunk/chrome/content/util/GraphSupport.js 2007-10-12 03:35:41
> UTC (rev 1826)
> @@ -154,7 +154,7 @@
> gli.drawType = 'SQ';
> else if (glyph.EqualsNode(circleR))
> gli.drawType = 'C';
> - else if (glpyh.EqualsNode(diamondR))
> + else if (glyph.EqualsNode(diamondR))
> gli.drawType = 'DI';
> else if (glyph.EqualsNode(noneR))
> gli.drawType = 'I';
> @@ -423,7 +423,7 @@
> this.integrationStarted(0, 0, 0, cm);
> },
>
> - // External must call before abandaning this GraphLineInformation...
> + // External must call before abandoning this GraphLineInformation...
> deregister: function()
> {
> var i;
> @@ -901,7 +901,7 @@
>
> window.log10 = Math.log(10);
>
> -function computeAxisSpecification(dataLowest, dataHighest)
> +function computeAxisSpecification(dataLowest, dataHighest, normaliseType)
> {
> var spec = {};
>
> @@ -952,14 +952,40 @@
> spec.points = [];
>
> var val = spec.firstPoint;
> - while (val <= dataHighest)
> + if (normaliseType == "L")
> {
> - spec.points.push({value: val,
> - label: roundToDecimalPoint(val *
> spec.sciCorrectionFactor,
> - spec.displayDecimalPlaces)
> - });
> - val += spec.tickSpacing;
> + while (val <= dataHighest)
> + {
> + spec.points.push({value: Math.log(val),
> + label: roundToDecimalPoint(val *
> spec.sciCorrectionFactor,
> +
> spec.displayDecimalPlaces)
> + });
> + val += spec.tickSpacing;
> + }
> }
> + else if (normaliseType == "%")
> + {
> + while (val <= dataHighest)
> + {
> + spec.points.push({value: val,
> + label: roundToDecimalPoint(val *
> spec.sciCorrectionFactor,
> +
> spec.displayDecimalPlaces) + "%"
> + });
> + val += spec.tickSpacing;
> + }
> + }
> + else /* normaliseType == I */
> + {
> + while (val <= dataHighest)
> + {
> + spec.points.push({value: val,
> + label: roundToDecimalPoint(val *
> spec.sciCorrectionFactor,
> +
> spec.displayDecimalPlaces)
> + });
> + val += spec.tickSpacing;
> + }
> + }
> +
>
> return spec;
> }
>
> Added: pce/trunk/chrome/skin/identity.png
> ===================================================================
> (Binary files differ)
>
>
> Property changes on: pce/trunk/chrome/skin/identity.png
> ___________________________________________________________________
> Name: svn:mime-type
> + application/octet-stream
>
> Added: pce/trunk/chrome/skin/log.png
> ===================================================================
> (Binary files differ)
>
>
> Property changes on: pce/trunk/chrome/skin/log.png
> ___________________________________________________________________
> Name: svn:mime-type
> + application/octet-stream
>
> _______________________________________________
> automated-notifications mailing list
> automated-notifications at cellml.org
> http://www.cellml.org/mailman/listinfo/automated-notifications
>




Archive powered by MHonArc 2.6.18.

Top of page