Skip to content
Snippets Groups Projects
Commit bfe7d0aa authored by Michael Leuschel's avatar Michael Leuschel
Browse files

add Jars example with HTML usage

parent 24475738
No related branches found
No related tags found
No related merge requests found
{
"svg":"Jars_with_html.svg",
"comment": "VisB Visualization for Jars by Jonas Erdmann",
"items": [
{
"id": "jar_%0_full",
"attr": "height",
"value": "level(j%0) * 20",
"repeat": [
["3"], ["5"]
]
},
{
"id": "jar_%0_text",
"attr": "text",
"value": "level(j%0)",
"repeat": [
["3"], ["5"]
]
},
{
"id": "jar_%0_svg",
"attr": "height",
"value": "maxf(j%0) * 20",
"repeat": [
["3"], ["5"]
]
},
{
"id": "jar_%0_svg",
"attr": "y",
"value": "0 -(max({maxf(j3), maxf(j5)}) * 20 - 100)",
"repeat": [
["3"], ["5"]
]
},
{
"id": "jar_%0_empty",
"attr": "height",
"value": "maxf(j%0) * 20",
"repeat": [
["3"], ["5"]
]
},
{
"id": "left_%0",
"attr": "y2",
"value": "maxf(j%0) * 20",
"repeat": [
["3"], ["5"]
]
},
{
"id": "right_%0",
"attr": "y2",
"value": "maxf(j%0) * 20",
"repeat": [
["3"], ["5"]
]
},
{
"id": "goal_achieved",
"attr": "opacity",
"value": "IF max({level(j3), level(j5)}) = max({maxf(j3), maxf(j5)}) -1 THEN 1 ELSE 0 END"
},
{
"id": "transfer_left",
"attr": "opacity",
"value": "IF level(j3) = maxf(j3) THEN 0 ELSE IF level(j5) = 0 THEN 0 ELSE 1 END END"
},
{
"id": "transfer_right",
"attr": "opacity",
"value": "IF level(j5) = maxf(j5) THEN 0 ELSE IF level(j3) = 0 THEN 0 ELSE 1 END END"
},
{
"id": "transfer_sym3",
"attr": "opacity",
"value": "IF level(j3) = 0 & level(j5) = 0 THEN 0 ELSE IF level(j3) = maxf(j3) & level(j5) = maxf(j5) THEN 0 ELSE 1 END END"
},
{
"id": "goal",
"attr": "x1",
"value": "IF maxf(j3) > maxf(j5) THEN 2 ELSE 107 END"
},
{
"id": "goal",
"attr": "x2",
"value": "IF maxf(j3) > maxf(j5) THEN 48 ELSE 153 END"
},
{
"id": "j%0_span",
"attr": "text",
"value": "level(j%0)",
"comment": "this is an HTML element",
"repeat": [
["3"], ["5"]
]
}
],
"events": [
{
"id": "fill_%0",
"event": "FillJar",
"predicates": ["j=j%0"],
"hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
{ "attr":"opacity", "enter":"0.8", "leave":"1.0"}],
"repeat": [
["3"], ["5"]
]
},
{
"id": "fill_%0_sym",
"event": "FillJar",
"predicates": ["j=j%0"],
"repeat": [
["3"], ["5"]
]
},
{
"id": "empty_%0",
"event": "EmptyJar",
"predicates": ["j=j%0"],
"repeat": [
["3"], ["5"]
],
"hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
{ "attr":"opacity", "enter":"0.8", "leave":"1.0"}]
},
{
"id": "empty_%0_sym",
"event": "EmptyJar",
"predicates": ["j=j%0"],
"repeat": [
["3"], ["5"]
]
},
{
"id": "transfer",
"event": "Transfer",
"hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
{ "attr":"opacity", "enter":"0.8", "leave":"1.0"}]
},
{
"id": "transfer_left",
"event": "Transfer"
},
{
"id": "transfer_right",
"event": "Transfer"
},
{
"id": "transfer_sym3",
"event": "Transfer"
}
]
}
<!--svg for Jars by Jonas Erdmann-->
<svg width="360" height="260"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="jar_3" transform="rotate(180 25 100)">
<svg id ="jar_3_svg" width="50" height="60" X="0" y="00">
<g id="leer_3" opacity="1">
<rect id="jar_3_empty" x="0" y="0" width="50" height="60" style="fill:#DDEEFF"/>
<rect id="jar_3_full" x="0" y="0" width="50" height="60" style="fill:#267CEB"/>
<line id="left_3" x1="50" y1="0" x2="50" y2="60" style="stroke:#000000;stroke-width:4"/>
<line id="right_3" x1="0" y1="0" x2="0" y2="60" style="stroke:#000000;stroke-width:4"/>
<line x1="50" y1="0" x2="0" y2="0" style="stroke:#000000;stroke-width:4"/>
</svg>
</g>
<text id="jar_3_text" opacity="1" x="20" y="95">0</text>
<g id="jar_5" transform="rotate(180 130 100)">
<svg id="jar_5_svg" width="50" height="100" x="105" y="0">
<g id="leer_5" opacity="1" >
<rect id="jar_5_empty" x="0" y="0" width="50" height="100" style="fill:#DDEEFF"/>
<rect id ="jar_5_full" x="0" y="0" width="50" height="100" style="fill:#267CEB"/>
<line id="left_5" x1="50" y1="0" x2="50" y2="100" style="stroke:#000000;stroke-width:4"/>
<line id="right_5" x1="0" y1="0" x2="0" y2="100" style="stroke:#000000;stroke-width:4"/>
<line x1="50" y1="0" x2="0" y2="0" style="stroke:#000000;stroke-width:4"/>
</svg>
</g>
<text id="jar_5_text" opacity="1" x="125" y="95">0</text>
<line id="goal" x1="107" y1="120" x2="153" y2="120" stroke-width="2" stroke="#FF7777"/>
<circle id="fill_3" cx="25" cy="25" r="15" fill="#BBBBBB"/>
<rect id="fill_3_sym" x="20" y="20" width="10" height="12" style="fill:#267CEB"/>
<circle id="fill_5" cx="130" cy="25" r="15" fill="#BBBBBB"/>
<rect id="fill_5_sym" x="125" y="20" width="10" height="12" style="fill:#267CEB"/>
<circle id="empty_3" cx="25" cy="65" r="15" fill="#BBBBBB"/>
<rect id="empty_3_sym" x="20" y="60" width="10" height="12" style="fill:#DDEEFF"/>
<circle id="empty_5" cx="130" cy="65" r="15" fill="#BBBBBB"/>
<rect id="empty_5_sym" x="125" y="60" width="10" height="12" style="fill:#DDEEFF"/>
<circle id="transfer" cx="77.5" cy="45" r="15" fill="#BBBBBB"/>
<polyline id="transfer_left" points="70,45 76,41 76,49" fill="#00000"/>
<polyline id="transfer_right" points="85,45 79,41 79,49" fill="#00000"/>
<rect id="transfer_sym3" x="76" y="43.5" height="3" width="3"/>
<text id="goal_achieved" opacity="0" x="160" y="125" fill="#FF4444" font-weight="bold">Goal achieved!</text>
</svg>
<ul>
<li>Jar3: <b><span id=j3_span>XX</span></b> Gallons
</li>
<li>Jar5: <b><span id=j5_span>XX</span></b> Gallons
</li>
</ul>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment