team4909 / 2018-Core

2018 Scouting Platform
MIT License
10 stars 3 forks source link

SVG Button Maps for More Intuitive Input #18

Closed roshanr10 closed 6 years ago

roshanr10 commented 6 years ago

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

roshanr10 commented 6 years ago

This might be helpful: https://stackoverflow.com/a/10210322

roshanr10 commented 6 years ago

@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:

ashwinc12 commented 6 years ago
<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>
roshanr10 commented 6 years ago
boiler

Attached is a thumbnail of the above SVG

shashjar commented 6 years ago
<!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>