233 lines
11 KiB
Plaintext
233 lines
11 KiB
Plaintext
//-/////////////////////////////////////////////////////////////////////////////
|
|
//- //
|
|
//- This file is part of the Buildbotics firmware. //
|
|
//- //
|
|
//- Copyright (c) 2015 - 2018, Buildbotics LLC //
|
|
//- All rights reserved. //
|
|
//- //
|
|
//- This file ("the software") is free software: you can redistribute it //
|
|
//- and/or modify it under the terms of the GNU General Public License, //
|
|
//- version 2 as published by the Free Software Foundation. You should //
|
|
//- have received a copy of the GNU General Public License, version 2 //
|
|
//- along with the software. If not, see <http://www.gnu.org/licenses/>. //
|
|
//- //
|
|
//- The software is distributed in the hope that it will be useful, but //
|
|
//- WITHOUT ANY WARRANTY; without even the implied warranty of //
|
|
//- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU //
|
|
//- Lesser General Public License for more details. //
|
|
//- //
|
|
//- You should have received a copy of the GNU Lesser General Public //
|
|
//- License along with the software. If not, see //
|
|
//- <http://www.gnu.org/licenses/>. //
|
|
//- //
|
|
//- For information regarding this software email: //
|
|
//- "Joseph Coffland" <joseph@buildbotics.com> //
|
|
//- //
|
|
//-/////////////////////////////////////////////////////////////////////////////
|
|
|
|
script#axis-control-template(type="text/x-template")
|
|
svg(xmlns="http://www.w3.org/2000/svg",
|
|
xmlns:xlink="http://www.w3.org/1999/xlink",
|
|
width="100%", viewBox="0 0 300 300")
|
|
defs
|
|
lineargradient#red
|
|
stop(offset="0", stop-color="#d26969")
|
|
stop(offset="1", stop-color="#ff7f7f")
|
|
|
|
lineargradient#green
|
|
stop(offset="0", stop-color="#69d269")
|
|
stop(offset="1", stop-color="#7fff7f")
|
|
|
|
lineargradient#blue
|
|
stop(offset="0", stop-color="#6969d2")
|
|
stop(offset="1", stop-color="#7f7fff")
|
|
|
|
lineargradient#orange
|
|
stop(offset="0", stop-color="#d29d69")
|
|
stop(offset="1", stop-color="#ffbf7f")
|
|
|
|
lineargradient#cyan
|
|
stop(offset="0", stop-color="#69d2d2")
|
|
stop(offset="1", stop-color="#7fffff")
|
|
|
|
lineargradient#purple
|
|
stop(offset="0", stop-color="#d269d2")
|
|
stop(offset="1", stop-color="#ff7fff")
|
|
|
|
|
|
each color in 'red green blue orange cyan purple'.split(' ')
|
|
lineargradient(xlink:href="#" + color, id=color + "-1",
|
|
gradientunits="userSpaceOnUse", gradienttransform="rotate(180 7 5)",
|
|
x1="0", y1="0", x2="15", y2="10")
|
|
|
|
lineargradient(xlink:href="#" + color, id=color + "-2",
|
|
gradientunits="userSpaceOnUse", x1="10", y1="10", x2="40", y2="40")
|
|
|
|
|
|
filter#shadow(x="-50%" y="-50%" width="200%" height="200%")
|
|
feOffset(in="SourceAlpha", dx="3", dy="3")
|
|
feComponentTransfer
|
|
feFuncR(type="discrete", tableValues="0.05")
|
|
feFuncG(type="discrete", tableValues="0.05")
|
|
feFuncB(type="discrete", tableValues="0.05")
|
|
feGaussianBlur(result="shadow", stdDeviation="5")
|
|
feBlend(in="SourceGraphic", in2="shadow", mode="normal")
|
|
|
|
path#pie-1(d="M107,0 83,0 0,83 0,107A107,107 0 0 0 107,0Z")
|
|
path#pie-2(d="M83,0 59,0 0,59 0,83A83,83 0 0 0 83,0Z")
|
|
path#pie-3(d="M59,0 35,0 0,35 0,59A59,59 0 0 0 59,0Z")
|
|
path#pie-4(d="M35,0 0,0 0,35A35,35 0 0 0 35,0Z")
|
|
|
|
path#arrow(d="M-16,9 0,9 0,17 17,0 0,-17 0,-9 -16,-9 -16,9Z")
|
|
|
|
circle#centrebutton(cx="0",cy="0",r="15",fill="green")
|
|
|
|
|
|
g(transform="scale(1.0, 1.0)")
|
|
// 100% ring
|
|
g.ring(fill="#9f9f9f", filter="url(#shadow)")
|
|
use.button(xlink:href="#pie-1", v-if="enabled[0]",
|
|
transform="translate(134 121) rotate(-45)",
|
|
@mousedown="jog(0, 3, 1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)")
|
|
|
|
use.button(xlink:href="#pie-1", v-if="enabled[0]",
|
|
transform="translate(115 121) rotate(135)",
|
|
@mousedown="jog(0, 3, -1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)")
|
|
|
|
g.button(v-if="enabled[1]",
|
|
@mousedown="jog(1, 3, 1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)")
|
|
use.button(xlink:href="#pie-1",
|
|
transform="translate(124 111) rotate(-135)")
|
|
text(x="125", y="21", transform="rotate(22 125 125)") {{text(3)}}
|
|
text(x="125", y="21", transform="rotate(-22 125 125)") {{text(3)}}
|
|
use.button(xlink:href="#pie-1", fill="transparent",
|
|
transform="translate(124 111) rotate(-135)")
|
|
|
|
use.button(xlink:href="#pie-1", v-if="enabled[1]",
|
|
transform="translate(124 130) rotate(45)",
|
|
@mousedown="jog(1, 3, -1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)")
|
|
|
|
// 50% ring
|
|
g.ring(fill="#c5c5c5", filter="url(#shadow)")
|
|
use.button(xlink:href="#pie-2", v-if="enabled[0]",
|
|
transform="translate(134 121) rotate(-45)",
|
|
@mousedown="jog(0, 2, 1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 2, 1)", @touchend.prevent="release(0)")
|
|
|
|
use.button(xlink:href="#pie-2", v-if="enabled[0]",
|
|
transform="translate(115 121) rotate(135)",
|
|
@mousedown="jog(0, 2, -1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 2, -1)", @touchend.prevent="release(0)")
|
|
|
|
g.button(v-if="enabled[1]",
|
|
@mousedown="jog(1, 2, 1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 2, 1)", @touchend.prevent="release(1)")
|
|
use.button(xlink:href="#pie-2",
|
|
transform="translate(124 111) rotate(-135)")
|
|
text(x="125", y="48") {{text(2)}}
|
|
use.button(xlink:href="#pie-2", fill="transparent",
|
|
transform="translate(124 111) rotate(-135)")
|
|
|
|
use.button(xlink:href="#pie-2", v-if="enabled[1]",
|
|
transform="translate(124 130) rotate(45)",
|
|
@mousedown="jog(1, 2, -1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 2, -1)", @touchend.prevent="release(1)")
|
|
|
|
|
|
// 25% ring
|
|
g.ring(fill="#e2e2e2", filter="url(#shadow)")
|
|
use.button(xlink:href="#pie-3", v-if="enabled[0]",
|
|
transform="translate(134 121) rotate(-45)",
|
|
@mousedown="jog(0, 1, 1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 1, 1)", @touchend.prevent="release(0)")
|
|
|
|
use.button(xlink:href="#pie-3", v-if="enabled[0]",
|
|
transform="translate(115 121) rotate(135)",
|
|
@mousedown="jog(0, 1, -1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 1, -1)", @touchend.prevent="release(0)")
|
|
|
|
g.button(v-if="enabled[1]",
|
|
@mousedown="jog(1, 1, 1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 1, 1)", @touchend.prevent="release(1)")
|
|
use.button(xlink:href="#pie-3",
|
|
transform="translate(124 111) rotate(-135)")
|
|
text(x="125", y="69") {{text(1)}}
|
|
use.button(xlink:href="#pie-3", fill="transparent",
|
|
transform="translate(124 111) rotate(-135)")
|
|
|
|
use.button(xlink:href="#pie-3", v-if="enabled[1]",
|
|
transform="translate(124 130) rotate(45)",
|
|
@mousedown="jog(1, 1, -1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 1, -1)", @touchend.prevent="release(1)")
|
|
|
|
|
|
// 10% ring
|
|
g.ring(fill="#f7f7f7", filter="url(#shadow)")
|
|
use.button(xlink:href="#pie-4", v-if="enabled[0]",
|
|
transform="translate(134 121) rotate(-45)",
|
|
@mousedown="jog(0, 0, 1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 0, 1)", @touchend.prevent="release(0)")
|
|
|
|
use.button(xlink:href="#pie-4", v-if="enabled[0]",
|
|
transform="translate(115 121) rotate(135)",
|
|
@mousedown="jog(0, 0, -1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 0, -1)", @touchend.prevent="release(0)")
|
|
|
|
g.button(v-if="enabled[1]",
|
|
@mousedown="jog(1, 0, 1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 0, 1)", @touchend.prevent="release(1)")
|
|
use.button(xlink:href="#pie-4",
|
|
transform="translate(124 111) rotate(-135)")
|
|
text(x="125", y="91") {{text(0)}}
|
|
use.button(xlink:href="#pie-4", fill="transparent",
|
|
transform="translate(124 111) rotate(-135)")
|
|
|
|
use.button(xlink:href="#pie-4", v-if="enabled[1]",
|
|
transform="translate(124 130) rotate(45)",
|
|
@mousedown="jog(1, 0, -1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 0, -1)", @touchend.prevent="release(1)")
|
|
|
|
|
|
// +A
|
|
g.button.arrow(v-if="enabled[0]", transform="translate(230 120)",
|
|
@mousedown="jog(0, 3, 1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 3, 1)", @touchend.prevent="release(0)")
|
|
use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)")
|
|
text(x="-12", y="5", font-size="14", textLength="21") +{{axes[0]}}
|
|
|
|
|
|
// -A
|
|
g.button.arrow(v-if="enabled[0]", transform="translate(20 120)",
|
|
@mousedown="jog(0, 3, -1)", @mouseup="release(0)",
|
|
@touchstart.prevent="jog(0, 3, -1)", @touchend.prevent="release(0)")
|
|
use(xlink:href="#arrow", fill="url(#{{colors[0]}}-1)",
|
|
transform="rotate(180)")
|
|
text(x="-8", y="5", font-size="14", textLength="16") -{{axes[0]}}
|
|
|
|
|
|
// +B
|
|
g.button.arrow(v-if="enabled[1]", transform="translate(125, 18)",
|
|
@mousedown="jog(1, 3, 1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 3, 1)", @touchend.prevent="release(1)")
|
|
use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
|
|
transform="rotate(-90)")
|
|
text(x="-8", y="5", font-size="12", textLength="16") +{{axes[1]}}
|
|
|
|
|
|
// -B
|
|
g.button.arrow(v-if="enabled[1]", transform="translate(125, 225)",
|
|
@mousedown="jog(1, 3, -1)", @mouseup="release(1)",
|
|
@touchstart.prevent="jog(1, 3, -1)", @touchend.prevent="release(1)")
|
|
use(xlink:href="#arrow", fill="url(#{{colors[1]}}-1)",
|
|
transform="rotate(90)")
|
|
text(x="-7", y="5", font-size="12", textLength="14") -{{axes[1]}}
|
|
|
|
// Return to zero button
|
|
g.button.cicle(@mouseup="back2zero(0,1)",transform="translate(124,121)")
|
|
use(xlink:href="#centrebutton")
|
|
text(x="-12",y="3",font-size="9") {{axes[0]}}0{{axes[1]}}0
|