<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Thu Apr 19 2012 18:14:14 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: The Noun Project
Description:
Url: http://thenounproject.com/
InternalName:
YoutubeId:
Keywords:
My Notes
--------
The Noun Project offers simple SVG symbols that represent specific nouns. Their goal is a visual language "that can be understood by all cultures and people". The images are all the same size, are black and white, and are public domain or use a Creative Commons license.
In this workbook, I combine and adapt several Noun Project symbols into a single image.
How to see the result of this experiment ::
Click the Run button above.
Click the Step button in the overlay.
Click a node in the overlay to show or hide the corresponding symbol in the image.
For example, if you click the "Tree" node, you will show or hide a tree symbol.
How to modify the image ::
Scroll down to the SVG editor at the end of this page.
Change whatever you want.
Click the Refresh button in the overlay, or the Run button above.
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
print "I see a big blue house on a sunny day ..."
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
print("\n with a wind farm behind it.");
]]></script>
<_-.XholonClass>
<!-- types of domain objects -->
<PhysicalSystem/>
<Sun/>
<House/>
<WindFarm/>
<Tree/>
</_-.XholonClass>
<xholonClassDetails>
</xholonClassDetails>
<PhysicalSystem>
<Sun/>
<House/>
<Tree/>
<WindFarm roleName="Wind Farm"/>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
]]></Blockbehavior>
<PhysicalSystembehavior implName="lang:webEditionjs:inline:"><![CDATA[
if (this.application("getTimeStep") == 0) {
var svg = $($('div#mySVGDiv > object')[0].contentDocument.getElementsByTagNameNS(svgns, 'svg')[0]);
var g = svg.children("g").eq(1);
this.siblings().each( function() {
var $this = $(this);
var symbol = g.children("g#" + $this.attr("class"));
$this.bind("click", function() {
if (symbol.attr("style") == null) {
symbol.attr("style", "display:none;");
}
else {
symbol.removeAttr("style");
}
});
});
}
]]></PhysicalSystembehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="231" height="140" xmlns="http://www.w3.org/2000/svg">
<!-- House adapted from "House" symbol by The Noun Project, from thenounproject.com collection. -->
<!-- Tree adapted from "Tree" symbol by Valentina Piccione, from thenounproject.com collection. -->
<!-- Sun adapted from "Sun" symbol by National Park Service, from thenounproject.com collection. -->
<!-- Wind Farm adapted from "Wind Farm" symbol by Iconathon Cree, from thenounproject.com collection. -->
<g>
<g id="House" style="display:none;">
<title>House</title>
<polygon points="137.5399932861328,54.0130615234375 137.5399932861328,14.89285659790039 116.95999145507812,14.89285659790039 116.95999145507812,30.379791259765625 90.5,0 17,84.39286041259766 34.63999938964844,84.39286041259766 34.63999938964844,139 80.20999908447266,139 80.20999908447266,94.32142639160156 100.79000091552734,94.32142639160156 100.79000091552734,139 146.36000061035156,139 146.36000061035156,84.39286041259766 164,84.39286041259766 " id="svg_1" fill="#aad4ff" stroke="#0000ff"/>
</g>
<g id="WindFarm" style="display:none;">
<title>Wind Farm</title>
<circle fill="#00FF00" cx="195.98155" cy="91.50018" r="2.40625" id="svg_2"/>
<path fill="#231F20" d="m200.41374,89.07288c7.05965,-11.92422 8.26649,-16.68021 7.58812,-17.04678c-0.67776,-0.36597 -4.47122,2.987 -11.96703,14.66357c1.86789,0.01855 3.49358,0.97208 4.37891,2.38322l0,-0.00001z" id="svg_3"/>
<path fill="#231F20" d="m190.84061,91.50018c0,-0.86189 0.24597,-1.66983 0.6716,-2.37048c-14.52696,0.24072 -19.51984,1.6385 -19.51984,2.37048c0,0.73138 4.99225,2.12975 19.51984,2.36987c-0.42563,-0.70006 -0.6716,-1.50742 -0.6716,-2.36987z" id="svg_4"/>
<path fill="#231F20" d="m200.41869,93.92052c-0.88098,1.4129 -2.50665,2.36816 -4.37393,2.38902c7.49022,11.66264 11.27995,15.01273 11.95836,14.64731c0.67712,-0.36655 -0.52849,-5.11966 -7.58443,-17.03633z" id="svg_5"/>
<path fill="#231F20" d="m193.41109,96.87561l0,1.04111l0,32.08328l5.14032,0l0,-25.4794c-1.47327,-2.04044 -3.17453,-4.55301 -5.14032,-7.64499z" id="svg_6"/>
<circle fill="#00FF00" cx="216.56637" cy="106.7536" r="1.60156" id="svg_7"/>
<path fill="#231F20" d="m213.71155,104.98343c-4.03754,-6.86893 -4.74506,-9.64191 -4.34732,-9.85825c0.39835,-0.21402 2.60641,1.74347 6.9407,8.44537c-1.08173,0.07773 -2.02591,0.61249 -2.59338,1.41287l0,0.00001z" id="svg_8"/>
<path fill="#231F20" d="m219.99365,106.7536c0,-0.50403 -0.13568,-0.97498 -0.35684,-1.39896c8.33218,0.16415 11.24094,0.9744 11.24094,1.40475c0,0.42862 -2.90814,1.23947 -11.24405,1.40361c0.22244,-0.42688 0.35995,-0.90132 0.35995,-1.40941l0,0l0,0.00001z" id="svg_9"/>
<path fill="#231F20" d="m213.71091,108.52434c0.56813,0.80098 1.51108,1.33574 2.59465,1.41405c-4.33308,6.7019 -6.54298,8.65997 -6.94067,8.44537c-0.39838,-0.21808 0.30914,-2.99048 4.34605,-9.85942l-0.00003,0z" id="svg_10"/>
<path fill="#231F20" d="m218.28003,109.98303l-0.01428,20.01697l-3.42664,0l0.01422,-14.94659c0.96155,-1.30908 2.09653,-2.97424 3.4267,-5.07037l0,-0.00001z" id="svg_11"/>
<circle fill="#00FF00" cx="176.29941" cy="106.7536" r="1.60156" id="svg_12"/>
<path fill="#231F20" d="m173.44456,104.98343c-4.03752,-6.86893 -4.74565,-9.64191 -4.34732,-9.85825c0.39839,-0.21402 2.60704,1.74347 6.94069,8.44537c-1.08234,0.07773 -2.02649,0.61249 -2.5934,1.41287l0.00003,0.00001z" id="svg_13"/>
<path fill="#231F20" d="m179.72609,106.7536c0,-0.50403 -0.1357,-0.97498 -0.35748,-1.39896c8.33218,0.16415 11.2397,0.9744 11.2397,1.40475c0,0.42862 -2.90875,1.23947 -11.24464,1.40361c0.22552,-0.42688 0.36244,-0.90132 0.36244,-1.40941l0,0l-0.00002,0.00001z" id="svg_14"/>
<path fill="#231F20" d="m173.44333,108.52434c0.56813,0.80098 1.51169,1.33574 2.59464,1.41405c-4.33368,6.70013 -6.54233,8.65823 -6.94069,8.44305c-0.39836,-0.21576 0.30977,-2.98816 4.34607,-9.8571l-0.00002,0z" id="svg_15"/>
<path fill="#231F20" d="m178.01244,109.98303l-0.01424,20.01697l-3.42668,0l0.01425,-14.94659c0.96214,-1.30908 2.09651,-2.97424 3.42667,-5.07037l0,-0.00001z" id="svg_16"/>
</g>
<g id="Sun" style="display:none;">
<title>Sun</title>
<path fill="#ffff00" d="m23.422,3l2.19177,0l0,8.81198l-2.19177,0l0,-8.81198z" id="path2638"/>
<path fill="#ffff00" d="m23.29264,45.85102l2.19128,0l0,8.8125l-2.19128,0l0,-8.8125z" id="path2640"/>
<path fill="#ffff00" d="m40.67147,27.12861l8.32853,0l0,2.31147l-8.32853,0l0,-2.31147z" id="path2642"/>
<path fill="#ffff00" d="m0,26.98502l8.32951,0l0,2.31872l-8.32951,0l0,-2.31872z" id="path2644"/>
<path fill="#ffff00" d="m3.17177,16.1669l1.0633,-2.0248l7.27797,4.26888l-1.06379,2.03102l-7.27748,-4.2751z" id="path2646"/>
<path fill="#ffff00" d="m11.90896,6.74376l1.85465,-1.23168l4.41882,7.47455l-1.85514,1.22494l-4.41833,-7.46781z" id="path2648"/>
<path fill="#ffff00" d="m31.71672,43.90864l1.88944,-1.15029l4.16451,7.6311l-1.88993,1.15548l-4.16402,-7.63629z" id="path2650"/>
<path fill="#ffff00" d="m38.08427,37.74611l1.0633,-2.02428l7.28924,4.26888l-1.06918,2.03102l-7.28336,-4.27562z" id="path2652"/>
<path fill="#ffff00" d="m13.279,51.65119l-1.91345,-1.12489l4.03515,-7.71145l1.91982,1.11919l-4.04152,7.71715z" id="path2654"/>
<path fill="#ffff00" d="m3.59758,41.85896l-1.15248,-1.96207l7.05943,-4.67529l1.15787,1.96311l-7.06482,4.67425z" id="path2656"/>
<path fill="#ffff00" d="m38.86876,21.17914l-1.09809,-2.01184l7.21231,-4.40625l1.09907,2.01236l-7.21329,4.40573z" id="path2658"/>
<path fill="#ffff00" d="m33.29844,14.57392l-1.91982,-1.13059l4.04053,-7.69953l1.91443,1.12541l-4.03515,7.70471l0.00001,0z" id="path2660"/>
<path fill="#ffff00" d="m10.99364,28.8035c0,-7.90533 6.06081,-14.31771 13.53331,-14.31771c7.46662,0 13.52253,6.41239 13.52253,14.31771c0,7.90533 -6.05542,14.30994 -13.52253,14.30994c-7.4725,0.00155 -13.53331,-6.40461 -13.53331,-14.30994" id="path2662"/>
</g>
<g id="Tree" style="display:none;">
<title>Tree</title>
<path id="svg_17" fill="#007f00" d="m161.87241,92.94215c2.70886,-2.31498 4.43492,-5.78501 4.43492,-9.67059c0,-6.97086 -5.54982,-12.62061 -12.39836,-12.62061c-0.25148,0 -0.4958,0.02267 -0.74487,0.03888c-2.46378,-8.14132 -8.97331,-13.97007 -16.64473,-13.97007c-9.7834,0 -17.71344,9.46484 -17.71344,21.14342c0,0.03079 0.0032,0.06237 0.0032,0.09235c-6.16498,0.72981 -10.95323,6.05718 -10.95323,12.52826c0,5.25529 3.15529,9.75565 7.64273,11.6551c-0.76236,1.63701 -1.20084,3.46032 -1.20084,5.39137c0,6.97004 5.55142,12.62061 12.39919,12.62061c1.5327,0 2.99295,-0.29565 4.34818,-0.81324l0,18.38215l10.30466,0l0,-18.48421c2.79005,-1.01088 5.28642,-2.81799 7.30693,-5.20264c1.59795,0.76221 3.37415,1.20042 5.2538,1.20042c6.84854,0 12.39836,-5.65055 12.39836,-12.62061c-0.00078,-3.88476 -1.72685,-7.3548 -4.43649,-9.67059z"/>
</g>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>