Closed roshanr10 closed 6 years ago
This might be helpful: https://stackoverflow.com/a/10210322
@ashwinc12 Could you create a mockup of the top section of the boiler for @TyHansen00 to experiment with adding click events?
I'd like for the SVG to be as realistic as possible, to better understand how such input would work on a tablet and laptop. I've made a list of criteria:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.45 314.96">
<defs>
<style>.cls-1{fill:#8b5e3c;stroke:#8b5e3c;}.cls-1,.cls-2{stroke-miterlimit:10;}.cls-2{fill:#939598;stroke:#754c29;}.cls-3{fill:#6d6e71;}.cls-4{fill:none;}.cls-5{font-size:36.13px;fill:#fff;font-family:Myriad Pro;}.cls-6{fill:#231f20;opacity:0.52;}</style>
</defs>
<title>Boiler</title>
<polygon class="cls-1" points="133.56 314.46 194.31 217.65 315.8 217.65 376.55 314.46 133.56 314.46" />
<polygon class="cls-1" points="176.27 31.21 214.69 80.11 291.52 80.11 329.94 31.21 176.27 31.21" />
<path class="cls-1" d="M284.11,372.77a79.12,79.12,0,0,1-79.65,0V216.54h79.65V372.77Z" transform="translate(8.37 -136.81)" />
<rect class="cls-2" x="212.83" y="80.11" width="79.65" height="21.45" />
<rect class="cls-2" x="212.83" y="123.11" width="79.65" height="10.73" />
<rect class="cls-3" x="185.9" y="87.55" width="41.93" height="41.93" />
<rect class="cls-3" x="276.9" y="87.55" width="41.93" height="41.93" />
<rect class="cls-4" width="292.47" height="160.22" />
<text class="cls-5" transform="translate(189.33 120.45) scale(0.87 1)">+1</text>
<text class="cls-5" transform="translate(280.47 120.45) scale(0.87 1)">+5</text>
<rect class="cls-6" x="179.27" y="199.41" width="153.67" height="59.78" />
<text class="cls-5" transform="translate(185.61 238.8) scale(0.87 1)">0</text>
</svg>
Attached is a thumbnail of the above SVG
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
.cls-1 {
fill: #8b5e3c;
stroke: #8b5e3c;
}
.cls-1,
.cls-2 {
stroke-miterlimit: 10;
}
.cls-2 {
fill: #939598;
stroke: #754c29;
}
.cls-4 {
fill: none;
}
.cls-5 {
font-size: 36.13px;
fill: #fff;
font-family: Myriad Pro;
}
.cls-6 {
fill: #231f20;
opacity: 0.52;
}
</style>
</head>
<body>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.45 314.96">
<title>Boiler</title>
<polygon class="cls-1" points="133.56 314.46 194.31 217.65 315.8 217.65 376.55 314.46 133.56 314.46" />
<polygon class="cls-1" points="176.27 31.21 214.69 80.11 291.52 80.11 329.94 31.21 176.27 31.21" />
<path class="cls-1" d="M284.11,372.77a79.12,79.12,0,0,1-79.65,0V216.54h79.65V372.77Z" transform="translate(8.37 -136.81)" />
<rect class="cls-2" x="212.83" y="80.11" width="79.65" height="21.45" />
<rect class="cls-2" x="212.83" y="123.11" width="79.65" height="10.73" />
<rect class="cls-6 one-button" x="185.9" y="87.55" width="41.93" height="41.93" />
<rect class="cls-6 five-button" x="276.9" y="87.55" width="41.93" height="41.93" />
<rect class="cls-4" width="292.47" height="160.22" />
<rect class="cls-6" x="179.27" y="199.41" width="153.67" height="59.78" />
<text class="cls-5 one-button" transform="translate(189.33 120.45) scale(0.87 1)">+1</text>
<text class="cls-5 five-button" transform="translate(280.47 120.45) scale(0.87 1)">+5</text>
<text id="total" class="cls-5" transform="translate(185.61 238.8) scale(0.87 1)">0</text>
</svg>
<script>
$(document).ready(function() {
var count = 0;
$("#total").text(count);
$(".one-button").click(function() {
count += 1;
$("#total").text(count);
});
$(".five-button").click(function() {
count += 5;
$("#total").text(count);
});
});
</script>
</body>
</html>
I would like to investigate if we can take SVGs created with Illustrator and map buttons/labels to given regions. This could really make the user interface much more intuitive than traditional data entry.
Ref: FRC Scouting