diff --git a/dist/assets/index-502e27ba.css b/dist/assets/index-502e27ba.css
deleted file mode 100644
index 1e90894..0000000
--- a/dist/assets/index-502e27ba.css
+++ /dev/null
@@ -1 +0,0 @@
-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@font-face{font-family:Oxanium;src:url(/assets/Oxanium-Regular-56ca0e9f.ttf) format("truetype");src:url(/assets/Oxanium-Bold-98932927.ttf) format("truetype")}@font-face{font-family:Noto Sans JP;src:url(/assets/NotoSansJP-Light-02615606.ttf) format("truetype")}.App{text-align:center;font-family:Oxanium!important}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
diff --git a/dist/assets/index-5a1fcabc.css b/dist/assets/index-5a1fcabc.css
new file mode 100644
index 0000000..760e12a
--- /dev/null
+++ b/dist/assets/index-5a1fcabc.css
@@ -0,0 +1 @@
+body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@font-face{font-family:Oxanium;src:url(/hi_gui_app/assets/Oxanium-Regular-56ca0e9f.ttf) format("truetype");src:url(/hi_gui_app/assets/Oxanium-Bold-98932927.ttf) format("truetype")}@font-face{font-family:Noto Sans JP;src:url(/hi_gui_app/assets/NotoSansJP-Light-02615606.ttf) format("truetype")}.App{text-align:center;font-family:Oxanium!important}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
diff --git a/dist/assets/index-579c7cee.js b/dist/assets/index-f879ff1d.js
similarity index 93%
rename from dist/assets/index-579c7cee.js
rename to dist/assets/index-f879ff1d.js
index b4a1077..287e673 100644
--- a/dist/assets/index-579c7cee.js
+++ b/dist/assets/index-f879ff1d.js
@@ -161,4 +161,4 @@ object-assign
     animation-iteration-count: infinite;
     animation-delay: 200ms;
   }
-`),wt.rippleVisible,qk,Mu,({theme:e})=>e.transitions.easing.easeInOut,wt.ripplePulsate,({theme:e})=>e.transitions.duration.shorter,wt.child,wt.childLeaving,Qk,Mu,({theme:e})=>e.transitions.easing.easeInOut,wt.childPulsate,Yk,({theme:e})=>e.transitions.easing.easeInOut),Zk=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiTouchRipple"}),{center:i=!1,classes:o={},className:s}=r,l=Ae(r,Hk),[a,u]=T.useState([]),c=T.useRef(0),f=T.useRef(null);T.useEffect(()=>{f.current&&(f.current(),f.current=null)},[a]);const d=T.useRef(!1),v=T.useRef(0),w=T.useRef(null),x=T.useRef(null);T.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const b=T.useCallback(k=>{const{pulsate:R,rippleX:P,rippleY:O,rippleSize:B,cb:G}=k;u(U=>[...U,C.jsx(Jk,{classes:{ripple:Be(o.ripple,wt.ripple),rippleVisible:Be(o.rippleVisible,wt.rippleVisible),ripplePulsate:Be(o.ripplePulsate,wt.ripplePulsate),child:Be(o.child,wt.child),childLeaving:Be(o.childLeaving,wt.childLeaving),childPulsate:Be(o.childPulsate,wt.childPulsate)},timeout:Mu,pulsate:R,rippleX:P,rippleY:O,rippleSize:B},c.current)]),c.current+=1,f.current=G},[o]),m=T.useCallback((k={},R={},P=()=>{})=>{const{pulsate:O=!1,center:B=i||R.pulsate,fakeElement:G=!1}=R;if((k==null?void 0:k.type)==="mousedown"&&d.current){d.current=!1;return}(k==null?void 0:k.type)==="touchstart"&&(d.current=!0);const U=G?null:x.current,L=U?U.getBoundingClientRect():{width:0,height:0,left:0,top:0};let H,W,V;if(B||k===void 0||k.clientX===0&&k.clientY===0||!k.clientX&&!k.touches)H=Math.round(L.width/2),W=Math.round(L.height/2);else{const{clientX:I,clientY:q}=k.touches&&k.touches.length>0?k.touches[0]:k;H=Math.round(I-L.left),W=Math.round(q-L.top)}if(B)V=Math.sqrt((2*L.width**2+L.height**2)/3),V%2===0&&(V+=1);else{const I=Math.max(Math.abs((U?U.clientWidth:0)-H),H)*2+2,q=Math.max(Math.abs((U?U.clientHeight:0)-W),W)*2+2;V=Math.sqrt(I**2+q**2)}k!=null&&k.touches?w.current===null&&(w.current=()=>{b({pulsate:O,rippleX:H,rippleY:W,rippleSize:V,cb:P})},v.current=setTimeout(()=>{w.current&&(w.current(),w.current=null)},Kk)):b({pulsate:O,rippleX:H,rippleY:W,rippleSize:V,cb:P})},[i,b]),h=T.useCallback(()=>{m({},{pulsate:!0})},[m]),y=T.useCallback((k,R)=>{if(clearTimeout(v.current),(k==null?void 0:k.type)==="touchend"&&w.current){w.current(),w.current=null,v.current=setTimeout(()=>{y(k,R)});return}w.current=null,u(P=>P.length>0?P.slice(1):P),f.current=R},[]);return T.useImperativeHandle(n,()=>({pulsate:h,start:m,stop:y}),[h,m,y]),C.jsx(Xk,D({className:Be(wt.root,o.root,s),ref:x},l,{children:C.jsx(Wk,{component:null,exit:!0,children:a})}))}),e2=Zk;function t2(e){return bn("MuiButtonBase",e)}const n2=En("MuiButtonBase",["root","disabled","focusVisible"]),r2=n2,i2=["action","centerRipple","children","className","component","disabled","disableRipple","disableTouchRipple","focusRipple","focusVisibleClassName","LinkComponent","onBlur","onClick","onContextMenu","onDragLeave","onFocus","onFocusVisible","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","tabIndex","TouchRippleProps","touchRippleRef","type"],o2=e=>{const{disabled:t,focusVisible:n,focusVisibleClassName:r,classes:i}=e,s=Qn({root:["root",t&&"disabled",n&&"focusVisible"]},t2,i);return n&&r&&(s.root+=` ${r}`),s},s2=nt("button",{name:"MuiButtonBase",slot:"Root",overridesResolver:(e,t)=>t.root})({display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",boxSizing:"border-box",WebkitTapHighlightColor:"transparent",backgroundColor:"transparent",outline:0,border:0,margin:0,borderRadius:0,padding:0,cursor:"pointer",userSelect:"none",verticalAlign:"middle",MozAppearance:"none",WebkitAppearance:"none",textDecoration:"none",color:"inherit","&::-moz-focus-inner":{borderStyle:"none"},[`&.${r2.disabled}`]:{pointerEvents:"none",cursor:"default"},"@media print":{colorAdjust:"exact"}}),l2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiButtonBase"}),{action:i,centerRipple:o=!1,children:s,className:l,component:a="button",disabled:u=!1,disableRipple:c=!1,disableTouchRipple:f=!1,focusRipple:d=!1,LinkComponent:v="a",onBlur:w,onClick:x,onContextMenu:b,onDragLeave:m,onFocus:h,onFocusVisible:y,onKeyDown:k,onKeyUp:R,onMouseDown:P,onMouseLeave:O,onMouseUp:B,onTouchEnd:G,onTouchMove:U,onTouchStart:L,tabIndex:H=0,TouchRippleProps:W,touchRippleRef:V,type:I}=r,q=Ae(r,i2),Y=T.useRef(null),p=T.useRef(null),g=cp(p,V),{isFocusVisibleRef:S,onFocus:_,onBlur:E,ref:M}=fw(),[A,N]=T.useState(!1);u&&A&&N(!1),T.useImperativeHandle(i,()=>({focusVisible:()=>{N(!0),Y.current.focus()}}),[]);const[j,z]=T.useState(!1);T.useEffect(()=>{z(!0)},[]);const Q=j&&!c&&!u;T.useEffect(()=>{A&&d&&!c&&j&&p.current.pulsate()},[c,d,A,j]);function ce(J,Zc,g0=f){return wo(ef=>(Zc&&Zc(ef),!g0&&p.current&&p.current[J](ef),!0))}const te=ce("start",P),ne=ce("stop",b),me=ce("stop",m),Fe=ce("stop",B),Br=ce("stop",J=>{A&&J.preventDefault(),O&&O(J)}),Dr=ce("start",L),Rn=ce("stop",G),Wr=ce("stop",U),Et=ce("stop",J=>{E(J),S.current===!1&&N(!1),w&&w(J)},!1),Ve=wo(J=>{Y.current||(Y.current=J.currentTarget),_(J),S.current===!0&&(N(!0),y&&y(J)),h&&h(J)}),ol=()=>{const J=Y.current;return a&&a!=="button"&&!(J.tagName==="A"&&J.href)},sl=T.useRef(!1),p0=wo(J=>{d&&!sl.current&&A&&p.current&&J.key===" "&&(sl.current=!0,p.current.stop(J,()=>{p.current.start(J)})),J.target===J.currentTarget&&ol()&&J.key===" "&&J.preventDefault(),k&&k(J),J.target===J.currentTarget&&ol()&&J.key==="Enter"&&!u&&(J.preventDefault(),x&&x(J))}),h0=wo(J=>{d&&J.key===" "&&p.current&&A&&!J.defaultPrevented&&(sl.current=!1,p.current.stop(J,()=>{p.current.pulsate(J)})),R&&R(J),x&&J.target===J.currentTarget&&ol()&&J.key===" "&&!J.defaultPrevented&&x(J)});let Zi=a;Zi==="button"&&(q.href||q.to)&&(Zi=v);const Vr={};Zi==="button"?(Vr.type=I===void 0?"button":I,Vr.disabled=u):(!q.href&&!q.to&&(Vr.role="button"),u&&(Vr["aria-disabled"]=u));const m0=cp(n,M,Y),Jc=D({},r,{centerRipple:o,component:a,disabled:u,disableRipple:c,disableTouchRipple:f,focusRipple:d,tabIndex:H,focusVisible:A}),v0=o2(Jc);return C.jsxs(s2,D({as:Zi,className:Be(v0.root,l),ownerState:Jc,onBlur:Et,onClick:x,onContextMenu:ne,onFocus:Ve,onKeyDown:p0,onKeyUp:h0,onMouseDown:te,onMouseLeave:Br,onMouseUp:Fe,onDragLeave:me,onTouchEnd:Rn,onTouchMove:Wr,onTouchStart:Dr,ref:m0,tabIndex:u?-1:H,type:I},Vr,q,{children:[s,Q?C.jsx(e2,D({ref:g,center:o},W)):null]}))}),l0=l2;function a2(e){return bn("MuiButton",e)}const u2=En("MuiButton",["root","text","textInherit","textPrimary","textSecondary","textSuccess","textError","textInfo","textWarning","outlined","outlinedInherit","outlinedPrimary","outlinedSecondary","outlinedSuccess","outlinedError","outlinedInfo","outlinedWarning","contained","containedInherit","containedPrimary","containedSecondary","containedSuccess","containedError","containedInfo","containedWarning","disableElevation","focusVisible","disabled","colorInherit","textSizeSmall","textSizeMedium","textSizeLarge","outlinedSizeSmall","outlinedSizeMedium","outlinedSizeLarge","containedSizeSmall","containedSizeMedium","containedSizeLarge","sizeMedium","sizeSmall","sizeLarge","fullWidth","startIcon","endIcon","iconSizeSmall","iconSizeMedium","iconSizeLarge"]),So=u2,c2=T.createContext({}),f2=c2,d2=["children","color","component","className","disabled","disableElevation","disableFocusRipple","endIcon","focusVisibleClassName","fullWidth","size","startIcon","type","variant"],p2=e=>{const{color:t,disableElevation:n,fullWidth:r,size:i,variant:o,classes:s}=e,l={root:["root",o,`${o}${de(t)}`,`size${de(i)}`,`${o}Size${de(i)}`,t==="inherit"&&"colorInherit",n&&"disableElevation",r&&"fullWidth"],label:["label"],startIcon:["startIcon",`iconSize${de(i)}`],endIcon:["endIcon",`iconSize${de(i)}`]},a=Qn(l,a2,s);return D({},s,a)},a0=e=>D({},e.size==="small"&&{"& > *:nth-of-type(1)":{fontSize:18}},e.size==="medium"&&{"& > *:nth-of-type(1)":{fontSize:20}},e.size==="large"&&{"& > *:nth-of-type(1)":{fontSize:22}}),h2=nt(l0,{shouldForwardProp:e=>o0(e)||e==="classes",name:"MuiButton",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[n.variant],t[`${n.variant}${de(n.color)}`],t[`size${de(n.size)}`],t[`${n.variant}Size${de(n.size)}`],n.color==="inherit"&&t.colorInherit,n.disableElevation&&t.disableElevation,n.fullWidth&&t.fullWidth]}})(({theme:e,ownerState:t})=>{var n,r;const i=e.palette.mode==="light"?e.palette.grey[300]:e.palette.grey[800],o=e.palette.mode==="light"?e.palette.grey.A100:e.palette.grey[700];return D({},e.typography.button,{minWidth:64,padding:"6px 16px",borderRadius:(e.vars||e).shape.borderRadius,transition:e.transitions.create(["background-color","box-shadow","border-color","color"],{duration:e.transitions.duration.short}),"&:hover":D({textDecoration:"none",backgroundColor:e.vars?`rgba(${e.vars.palette.text.primaryChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette.text.primary,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},t.variant==="text"&&t.color!=="inherit"&&{backgroundColor:e.vars?`rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette[t.color].main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},t.variant==="outlined"&&t.color!=="inherit"&&{border:`1px solid ${(e.vars||e).palette[t.color].main}`,backgroundColor:e.vars?`rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette[t.color].main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},t.variant==="contained"&&{backgroundColor:e.vars?e.vars.palette.Button.inheritContainedHoverBg:o,boxShadow:(e.vars||e).shadows[4],"@media (hover: none)":{boxShadow:(e.vars||e).shadows[2],backgroundColor:(e.vars||e).palette.grey[300]}},t.variant==="contained"&&t.color!=="inherit"&&{backgroundColor:(e.vars||e).palette[t.color].dark,"@media (hover: none)":{backgroundColor:(e.vars||e).palette[t.color].main}}),"&:active":D({},t.variant==="contained"&&{boxShadow:(e.vars||e).shadows[8]}),[`&.${So.focusVisible}`]:D({},t.variant==="contained"&&{boxShadow:(e.vars||e).shadows[6]}),[`&.${So.disabled}`]:D({color:(e.vars||e).palette.action.disabled},t.variant==="outlined"&&{border:`1px solid ${(e.vars||e).palette.action.disabledBackground}`},t.variant==="contained"&&{color:(e.vars||e).palette.action.disabled,boxShadow:(e.vars||e).shadows[0],backgroundColor:(e.vars||e).palette.action.disabledBackground})},t.variant==="text"&&{padding:"6px 8px"},t.variant==="text"&&t.color!=="inherit"&&{color:(e.vars||e).palette[t.color].main},t.variant==="outlined"&&{padding:"5px 15px",border:"1px solid currentColor"},t.variant==="outlined"&&t.color!=="inherit"&&{color:(e.vars||e).palette[t.color].main,border:e.vars?`1px solid rgba(${e.vars.palette[t.color].mainChannel} / 0.5)`:`1px solid ${fn(e.palette[t.color].main,.5)}`},t.variant==="contained"&&{color:e.vars?e.vars.palette.text.primary:(n=(r=e.palette).getContrastText)==null?void 0:n.call(r,e.palette.grey[300]),backgroundColor:e.vars?e.vars.palette.Button.inheritContainedBg:i,boxShadow:(e.vars||e).shadows[2]},t.variant==="contained"&&t.color!=="inherit"&&{color:(e.vars||e).palette[t.color].contrastText,backgroundColor:(e.vars||e).palette[t.color].main},t.color==="inherit"&&{color:"inherit",borderColor:"currentColor"},t.size==="small"&&t.variant==="text"&&{padding:"4px 5px",fontSize:e.typography.pxToRem(13)},t.size==="large"&&t.variant==="text"&&{padding:"8px 11px",fontSize:e.typography.pxToRem(15)},t.size==="small"&&t.variant==="outlined"&&{padding:"3px 9px",fontSize:e.typography.pxToRem(13)},t.size==="large"&&t.variant==="outlined"&&{padding:"7px 21px",fontSize:e.typography.pxToRem(15)},t.size==="small"&&t.variant==="contained"&&{padding:"4px 10px",fontSize:e.typography.pxToRem(13)},t.size==="large"&&t.variant==="contained"&&{padding:"8px 22px",fontSize:e.typography.pxToRem(15)},t.fullWidth&&{width:"100%"})},({ownerState:e})=>e.disableElevation&&{boxShadow:"none","&:hover":{boxShadow:"none"},[`&.${So.focusVisible}`]:{boxShadow:"none"},"&:active":{boxShadow:"none"},[`&.${So.disabled}`]:{boxShadow:"none"}}),m2=nt("span",{name:"MuiButton",slot:"StartIcon",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.startIcon,t[`iconSize${de(n.size)}`]]}})(({ownerState:e})=>D({display:"inherit",marginRight:8,marginLeft:-4},e.size==="small"&&{marginLeft:-2},a0(e))),v2=nt("span",{name:"MuiButton",slot:"EndIcon",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.endIcon,t[`iconSize${de(n.size)}`]]}})(({ownerState:e})=>D({display:"inherit",marginRight:-4,marginLeft:8},e.size==="small"&&{marginRight:-2},a0(e))),g2=T.forwardRef(function(t,n){const r=T.useContext(f2),i=Pc(r,t),o=Tn({props:i,name:"MuiButton"}),{children:s,color:l="primary",component:a="button",className:u,disabled:c=!1,disableElevation:f=!1,disableFocusRipple:d=!1,endIcon:v,focusVisibleClassName:w,fullWidth:x=!1,size:b="medium",startIcon:m,type:h,variant:y="text"}=o,k=Ae(o,d2),R=D({},o,{color:l,component:a,disabled:c,disableElevation:f,disableFocusRipple:d,fullWidth:x,size:b,type:h,variant:y}),P=p2(R),O=m&&C.jsx(m2,{className:P.startIcon,ownerState:R,children:m}),B=v&&C.jsx(v2,{className:P.endIcon,ownerState:R,children:v});return C.jsxs(h2,D({ownerState:R,className:Be(r.className,P.root,u),component:a,disabled:c,focusRipple:!d,focusVisibleClassName:Be(P.focusVisible,w),ref:n,type:h},k,{classes:P,children:[O,s,B]}))}),Yn=g2;function Ip(e){return e!=null&&!(Array.isArray(e)&&e.length===0)}function Up(e,t=!1){return e&&(Ip(e.value)&&e.value!==""||t&&Ip(e.defaultValue)&&e.defaultValue!=="")}function y2(e){return e.startAdornment}const w2=T.createContext(void 0),u0=w2;function x2(e){return bn("MuiFormControl",e)}En("MuiFormControl",["root","marginNone","marginNormal","marginDense","fullWidth","disabled"]);const S2=["children","className","color","component","disabled","error","focused","fullWidth","hiddenLabel","margin","required","size","variant"],k2=e=>{const{classes:t,margin:n,fullWidth:r}=e,i={root:["root",n!=="none"&&`margin${de(n)}`,r&&"fullWidth"]};return Qn(i,x2,t)},_2=nt("div",{name:"MuiFormControl",slot:"Root",overridesResolver:({ownerState:e},t)=>D({},t.root,t[`margin${de(e.margin)}`],e.fullWidth&&t.fullWidth)})(({ownerState:e})=>D({display:"inline-flex",flexDirection:"column",position:"relative",minWidth:0,padding:0,margin:0,border:0,verticalAlign:"top"},e.margin==="normal"&&{marginTop:16,marginBottom:8},e.margin==="dense"&&{marginTop:8,marginBottom:4},e.fullWidth&&{width:"100%"})),C2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiFormControl"}),{children:i,className:o,color:s="primary",component:l="div",disabled:a=!1,error:u=!1,focused:c,fullWidth:f=!1,hiddenLabel:d=!1,margin:v="none",required:w=!1,size:x="medium",variant:b="outlined"}=r,m=Ae(r,S2),h=D({},r,{color:s,component:l,disabled:a,error:u,fullWidth:f,hiddenLabel:d,margin:v,required:w,size:x,variant:b}),y=k2(h),[k,R]=T.useState(()=>{let W=!1;return i&&T.Children.forEach(i,V=>{if(!_a(V,["Input","Select"]))return;const I=_a(V,["Select"])?V.props.input:V;I&&y2(I.props)&&(W=!0)}),W}),[P,O]=T.useState(()=>{let W=!1;return i&&T.Children.forEach(i,V=>{_a(V,["Input","Select"])&&(Up(V.props,!0)||Up(V.props.inputProps,!0))&&(W=!0)}),W}),[B,G]=T.useState(!1);a&&B&&G(!1);const U=c!==void 0&&!a?c:B;let L;const H=T.useMemo(()=>({adornedStart:k,setAdornedStart:R,color:s,disabled:a,error:u,filled:P,focused:U,fullWidth:f,hiddenLabel:d,size:x,onBlur:()=>{G(!1)},onEmpty:()=>{O(!1)},onFilled:()=>{O(!0)},onFocus:()=>{G(!0)},registerEffect:L,required:w,variant:b}),[k,s,a,u,P,U,f,d,L,w,x,b]);return C.jsx(u0.Provider,{value:H,children:C.jsx(_2,D({as:l,ownerState:h,className:Be(y.root,o),ref:n},m,{children:i}))})}),b2=C2;function E2(){return T.useContext(u0)}function T2(e){return bn("MuiTypography",e)}En("MuiTypography",["root","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","inherit","button","caption","overline","alignLeft","alignRight","alignCenter","alignJustify","noWrap","gutterBottom","paragraph"]);const R2=["align","className","component","gutterBottom","noWrap","paragraph","variant","variantMapping"],M2=e=>{const{align:t,gutterBottom:n,noWrap:r,paragraph:i,variant:o,classes:s}=e,l={root:["root",o,e.align!=="inherit"&&`align${de(t)}`,n&&"gutterBottom",r&&"noWrap",i&&"paragraph"]};return Qn(l,T2,s)},P2=nt("span",{name:"MuiTypography",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,n.variant&&t[n.variant],n.align!=="inherit"&&t[`align${de(n.align)}`],n.noWrap&&t.noWrap,n.gutterBottom&&t.gutterBottom,n.paragraph&&t.paragraph]}})(({theme:e,ownerState:t})=>D({margin:0},t.variant==="inherit"&&{font:"inherit"},t.variant!=="inherit"&&e.typography[t.variant],t.align!=="inherit"&&{textAlign:t.align},t.noWrap&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},t.gutterBottom&&{marginBottom:"0.35em"},t.paragraph&&{marginBottom:16})),Bp={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",inherit:"p"},O2={primary:"primary.main",textPrimary:"text.primary",secondary:"secondary.main",textSecondary:"text.secondary",error:"error.main"},A2=e=>O2[e]||e,L2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiTypography"}),i=A2(r.color),o=wS(D({},r,{color:i})),{align:s="inherit",className:l,component:a,gutterBottom:u=!1,noWrap:c=!1,paragraph:f=!1,variant:d="body1",variantMapping:v=Bp}=o,w=Ae(o,R2),x=D({},o,{align:s,color:i,className:l,component:a,gutterBottom:u,noWrap:c,paragraph:f,variant:d,variantMapping:v}),b=a||(f?"p":v[d]||Bp[d])||"span",m=M2(x);return C.jsx(P2,D({as:b,ref:n,ownerState:x,className:Be(m.root,l)},w))}),j2=L2,c0=Ji("div")(({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",background:"linear-gradient(to bottom, #211f20, #11283b)"}));Ji(qc)(({theme:e})=>({padding:e.spacing(8),color:"#FFFFFF",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"transform 0.2s ease-in-out",backgroundColor:"rgba(255,255, 255, 0.0)",transform:"scale(0)"}));Ji(b2)(({theme:e})=>({margin:e.spacing(4),width:"400px"}));Ji(Yn)(({theme:e})=>({margin:e.spacing(1),width:"150px"}));Ji(j2)(({theme:e})=>({marginBottom:"16px",textAlign:"center"}));function $2(e){return bn("PrivateSwitchBase",e)}En("PrivateSwitchBase",["root","checked","disabled","input","edgeStart","edgeEnd"]);const N2=["autoFocus","checked","checkedIcon","className","defaultChecked","disabled","disableFocusRipple","edge","icon","id","inputProps","inputRef","name","onBlur","onChange","onFocus","readOnly","required","tabIndex","type","value"],z2=e=>{const{classes:t,checked:n,disabled:r,edge:i}=e,o={root:["root",n&&"checked",r&&"disabled",i&&`edge${de(i)}`],input:["input"]};return Qn(o,$2,t)},F2=nt(l0)(({ownerState:e})=>D({padding:9,borderRadius:"50%"},e.edge==="start"&&{marginLeft:e.size==="small"?-3:-12},e.edge==="end"&&{marginRight:e.size==="small"?-3:-12})),I2=nt("input")({cursor:"inherit",position:"absolute",opacity:0,width:"100%",height:"100%",top:0,left:0,margin:0,padding:0,zIndex:1}),U2=T.forwardRef(function(t,n){const{autoFocus:r,checked:i,checkedIcon:o,className:s,defaultChecked:l,disabled:a,disableFocusRipple:u=!1,edge:c=!1,icon:f,id:d,inputProps:v,inputRef:w,name:x,onBlur:b,onChange:m,onFocus:h,readOnly:y,required:k=!1,tabIndex:R,type:P,value:O}=t,B=Ae(t,N2),[G,U]=iw({controlled:i,default:!!l,name:"SwitchBase",state:"checked"}),L=E2(),H=g=>{h&&h(g),L&&L.onFocus&&L.onFocus(g)},W=g=>{b&&b(g),L&&L.onBlur&&L.onBlur(g)},V=g=>{if(g.nativeEvent.defaultPrevented)return;const S=g.target.checked;U(S),m&&m(g,S)};let I=a;L&&typeof I>"u"&&(I=L.disabled);const q=P==="checkbox"||P==="radio",Y=D({},t,{checked:G,disabled:I,disableFocusRipple:u,edge:c}),p=z2(Y);return C.jsxs(F2,D({component:"span",className:Be(p.root,s),centerRipple:!0,focusRipple:!u,disabled:I,tabIndex:null,role:void 0,onFocus:H,onBlur:W,ownerState:Y,ref:n},B,{children:[C.jsx(I2,D({autoFocus:r,checked:i,defaultChecked:l,className:p.input,disabled:I,id:q?d:void 0,name:x,onChange:V,readOnly:y,ref:w,required:k,ownerState:Y,tabIndex:R,type:P},P==="checkbox"&&O===void 0?{}:{value:O},v)),G?o:f]}))}),B2=U2;function D2(e){return bn("MuiSwitch",e)}const W2=En("MuiSwitch",["root","edgeStart","edgeEnd","switchBase","colorPrimary","colorSecondary","sizeSmall","sizeMedium","checked","disabled","input","thumb","track"]),Xe=W2,V2=["className","color","edge","size","sx"],G2=e=>{const{classes:t,edge:n,size:r,color:i,checked:o,disabled:s}=e,l={root:["root",n&&`edge${de(n)}`,`size${de(r)}`],switchBase:["switchBase",`color${de(i)}`,o&&"checked",s&&"disabled"],thumb:["thumb"],track:["track"],input:["input"]},a=Qn(l,D2,t);return D({},t,a)},H2=nt("span",{name:"MuiSwitch",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,n.edge&&t[`edge${de(n.edge)}`],t[`size${de(n.size)}`]]}})(({ownerState:e})=>D({display:"inline-flex",width:34+12*2,height:14+12*2,overflow:"hidden",padding:12,boxSizing:"border-box",position:"relative",flexShrink:0,zIndex:0,verticalAlign:"middle","@media print":{colorAdjust:"exact"}},e.edge==="start"&&{marginLeft:-8},e.edge==="end"&&{marginRight:-8},e.size==="small"&&{width:40,height:24,padding:7,[`& .${Xe.thumb}`]:{width:16,height:16},[`& .${Xe.switchBase}`]:{padding:4,[`&.${Xe.checked}`]:{transform:"translateX(16px)"}}})),K2=nt(B2,{name:"MuiSwitch",slot:"SwitchBase",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.switchBase,{[`& .${Xe.input}`]:t.input},n.color!=="default"&&t[`color${de(n.color)}`]]}})(({theme:e})=>({position:"absolute",top:0,left:0,zIndex:1,color:e.vars?e.vars.palette.Switch.defaultColor:`${e.palette.mode==="light"?e.palette.common.white:e.palette.grey[300]}`,transition:e.transitions.create(["left","transform"],{duration:e.transitions.duration.shortest}),[`&.${Xe.checked}`]:{transform:"translateX(20px)"},[`&.${Xe.disabled}`]:{color:e.vars?e.vars.palette.Switch.defaultDisabledColor:`${e.palette.mode==="light"?e.palette.grey[100]:e.palette.grey[600]}`},[`&.${Xe.checked} + .${Xe.track}`]:{opacity:.5},[`&.${Xe.disabled} + .${Xe.track}`]:{opacity:e.vars?e.vars.opacity.switchTrackDisabled:`${e.palette.mode==="light"?.12:.2}`},[`& .${Xe.input}`]:{left:"-100%",width:"300%"}}),({theme:e,ownerState:t})=>D({"&:hover":{backgroundColor:e.vars?`rgba(${e.vars.palette.action.activeChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette.action.active,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},t.color!=="default"&&{[`&.${Xe.checked}`]:{color:(e.vars||e).palette[t.color].main,"&:hover":{backgroundColor:e.vars?`rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette[t.color].main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},[`&.${Xe.disabled}`]:{color:e.vars?e.vars.palette.Switch[`${t.color}DisabledColor`]:`${e.palette.mode==="light"?t0(e.palette[t.color].main,.62):e0(e.palette[t.color].main,.55)}`}},[`&.${Xe.checked} + .${Xe.track}`]:{backgroundColor:(e.vars||e).palette[t.color].main}})),q2=nt("span",{name:"MuiSwitch",slot:"Track",overridesResolver:(e,t)=>t.track})(({theme:e})=>({height:"100%",width:"100%",borderRadius:14/2,zIndex:-1,transition:e.transitions.create(["opacity","background-color"],{duration:e.transitions.duration.shortest}),backgroundColor:e.vars?e.vars.palette.common.onBackground:`${e.palette.mode==="light"?e.palette.common.black:e.palette.common.white}`,opacity:e.vars?e.vars.opacity.switchTrack:`${e.palette.mode==="light"?.38:.3}`})),Q2=nt("span",{name:"MuiSwitch",slot:"Thumb",overridesResolver:(e,t)=>t.thumb})(({theme:e})=>({boxShadow:(e.vars||e).shadows[1],backgroundColor:"currentColor",width:20,height:20,borderRadius:"50%"})),Y2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiSwitch"}),{className:i,color:o="primary",edge:s=!1,size:l="medium",sx:a}=r,u=Ae(r,V2),c=D({},r,{color:o,edge:s,size:l}),f=G2(c),d=C.jsx(Q2,{className:f.thumb,ownerState:c});return C.jsxs(H2,{className:Be(f.root,i),sx:a,ownerState:c,children:[C.jsx(K2,D({type:"checkbox",icon:d,checkedIcon:d,ref:n,ownerState:c},u,{classes:D({},f,{root:f.switchBase})})),C.jsx(q2,{className:f.track,ownerState:c})]})}),f0=Y2,X2="/assets/img-blue-5917a43f.svg",J2="/assets/img-red-db717ad4.svg",ko="/assets/next-6cb64f42.mp3",re="/assets/pos-fecba1f0.mp3",Ee="/assets/pecho-06628ff4.mp3",Ke="/assets/next-6cb64f42.mp3",Dp=Ne.div(({theme:e})=>({height:"100%",padding:"1%",position:"relative"})),X=Ne(Yn)(({theme:e})=>({position:"absolute",borderRadius:"100%",fontSize:"20px",fontWeight:"Bold",width:"5%!important"})),_o=Ne(Yn)(({theme:e})=>({position:"absolute",borderRadius:"100%",fontSize:"40px"})),Se=Ne(Yn)(({theme:e})=>({position:"absolute",fontSize:"30px"})),Wp=Ne(f0)(({theme:e})=>({padding:8,transform:"scale(2.5)",position:"absolute",zIndex:1,top:"57%",left:"7%","& .MuiSwitch-track":{borderRadius:22/2,"&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%) scale(4)",width:16,height:16},"&:before":{},"&:after":{}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2}})),Ir=new $.Ros({url:"ws://moyuboo.local:9090"}),ue=new $.Topic({ros:Ir,name:"/index",messageType:"std_msgs/Int8"}),Le=new $.Topic({ros:Ir,name:"/shooting_index",messageType:"std_msgs/Int8"}),Vp=new $.Topic({ros:Ir,name:"/is_manual",messageType:"std_msgs/Bool"}),ke=new $.Topic({ros:Ir,name:"/cmd_state",messageType:"std_msgs/String"}),Gp=new $.Topic({ros:Ir,name:"/emergency",messageType:"std_msgs/Bool"}),Hp=new $.Topic({ros:Ir,name:"/stp_homing",messageType:"std_msgs/Bool"});function Z2({color:e}){const[t,n]=T.useState(!1);return e?C.jsxs("div",{style:{width:"100%",height:"100%",position:"relative"},children:[C.jsxs(Dp,{style:{width:"60%",margin:"auto"},children:[C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"12.6%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:5});ue.publish(i)},children:"5"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"26.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:4});ue.publish(i)},children:"4"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"40.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:3});ue.publish(i)},children:"3"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"53.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:2});ue.publish(i)},children:"2"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"67.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:1});ue.publish(i)},children:"1"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"80.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:0});ue.publish(i)},children:"0"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"18.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:13});ue.publish(i)},children:"13"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"27.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:12});ue.publish(i)},children:"12"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"37.2%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:11});ue.publish(i)},children:"11"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"46.9%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:10});ue.publish(i)},children:"10"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"56.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:9});ue.publish(i)},children:"9"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"66.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:8});ue.publish(i)},children:"8"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"75.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});ue.publish(i)},children:"7"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"70%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:15});ue.publish(i)},children:"15"}),C.jsx(X,{variant:"outlined",style:{top:"61%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:0});Le.publish(i)},children:"A"}),C.jsx(X,{variant:"outlined",style:{top:"66%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:1});Le.publish(i)},children:"B"}),C.jsx(X,{variant:"outlined",style:{top:"74%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:2});Le.publish(i)},children:"C"}),C.jsx(X,{variant:"outlined",style:{top:"79%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:3});Le.publish(i)},children:"D"}),C.jsx(X,{variant:"outlined",style:{top:"88%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:4});Le.publish(i)},children:"E"}),C.jsx(X,{variant:"outlined",style:{top:"93%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:5});Le.publish(i)},children:"F"}),C.jsx(X,{variant:"outlined",style:{top:"72.5%",left:"80%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:6});Le.publish(i)},children:"G0"}),C.jsx(X,{variant:"outlined",style:{top:"82.5%",left:"80%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:8});Le.publish(i)},children:"G1"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"62%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});Le.publish(i)},children:"7"}),C.jsx("img",{src:X2,alt:"blue image",style:{height:"100%",margin:"auto"}})]}),C.jsx(Wp,{onChange:()=>{n(!t);const r=new $.Message({data:!t});Vp.publish(r)}}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"86%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"n"});ke.publish(i)},children:"NEXT"}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"2%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"b"});ke.publish(i)},children:"BACK"}),C.jsx(Se,{variant:"contained",style:{top:"65%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c"});ke.publish(i)},children:"CATCH"}),C.jsx(Se,{variant:"contained",style:{top:"75%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r"});ke.publish(i)},children:"RELEASE"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c0"});ke.publish(i)},children:"C0"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r0"});ke.publish(i)},children:"R0"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c1"});ke.publish(i)},children:"C1"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r1"});ke.publish(i)},children:"R1"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c2"});ke.publish(i)},children:"C2"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r2"});ke.publish(i)},children:"R2"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"i"});ke.publish(i)},children:"INIT"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:!0});Hp.publish(i)},children:"STP"}),C.jsx(Se,{variant:"contained",color:"error",style:{top:"5%",left:"86%",width:"160px",height:"160px",borderRadius:"100%"},onClick:()=>{const r=new $.Message({data:!0});Gp.publish(r)},children:"STOP"})]}):C.jsxs("div",{style:{width:"100%",height:"100%",position:"relative"},children:[C.jsxs(Dp,{style:{width:"60%",margin:"auto"},children:[C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"12.6%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:0});ue.publish(i)},children:"0"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"26.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:1});ue.publish(i)},children:"1"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"40.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:2});ue.publish(i)},children:"2"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"53.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:3});ue.publish(i)},children:"3"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"67.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:4});ue.publish(i)},children:"4"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"80.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:5});ue.publish(i)},children:"5"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"18.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});ue.publish(i)},children:"7"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"27.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:8});ue.publish(i)},children:"8"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"37.2%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:9});ue.publish(i)},children:"9"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"46.9%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:10});ue.publish(i)},children:"10"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"56.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:11});ue.publish(i)},children:"11"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"66.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:12});ue.publish(i)},children:"12"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"75.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:13});ue.publish(i)},children:"13"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"21%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:15});ue.publish(i)},children:"15"}),C.jsx(X,{variant:"outlined",style:{top:"61%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:0});Le.publish(i)},children:"A"}),C.jsx(X,{variant:"outlined",style:{top:"66%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:1});Le.publish(i)},children:"B"}),C.jsx(X,{variant:"outlined",style:{top:"74%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:2});Le.publish(i)},children:"C"}),C.jsx(X,{variant:"outlined",style:{top:"79%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:3});Le.publish(i)},children:"D"}),C.jsx(X,{variant:"outlined",style:{top:"88%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:4});Le.publish(i)},children:"E"}),C.jsx(X,{variant:"outlined",style:{top:"93%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:5});Le.publish(i)},children:"F"}),C.jsx(X,{variant:"outlined",style:{top:"72.5%",left:"13.5%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:6});Le.publish(i)},children:"G0"}),C.jsx(X,{variant:"outlined",style:{top:"82.5%",left:"13.5%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:8});Le.publish(i)},children:"G1"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"30%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});Le.publish(i)},children:"7"}),C.jsx("img",{src:J2,alt:"red image",style:{height:"100%",margin:"auto"}})]}),C.jsx(Wp,{onChange:()=>{n(!t);const r=new $.Message({data:!t});Vp.publish(r)}}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"86%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"n"});ke.publish(i)},children:"NEXT"}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"2%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"b"});ke.publish(i)},children:"BACK"}),C.jsx(Se,{variant:"contained",style:{top:"65%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c"});ke.publish(i)},children:"CATCH"}),C.jsx(Se,{variant:"contained",style:{top:"75%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r"});ke.publish(i)},children:"RELEASE"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c0"});ke.publish(i)},children:"C0"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r0"});ke.publish(i)},children:"R0"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c1"});ke.publish(i)},children:"C1"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r1"});ke.publish(i)},children:"R1"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c2"});ke.publish(i)},children:"C2"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r2"});ke.publish(i)},children:"R2"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"i"});ke.publish(i)},children:"INIT"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:!0});Hp.publish(i)},children:"STP"}),C.jsx(Se,{variant:"contained",color:"error",style:{top:"5%",left:"86%",width:"160px",height:"160px",borderRadius:"100%"},onClick:()=>{const r=new $.Message({data:!0});Gp.publish(r)},children:"STOP"})]})}const e_=Ne(qc)(({theme:e})=>({color:"#FFFFFF",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"transform 0.2s ease-in-out",backgroundColor:"rgba(255,255, 255, 0.1)",width:"95%",height:"95vh",position:"absolute",borderRadius:"40px"})),t_=Ne.div(({theme:e})=>({position:"absolute",top:"20px",left:"40px",fontSize:"40pt",zIndex:1})),n_=Ne.div(({theme:e})=>({position:"absolute",width:"auto",top:"65%",left:"5%"})),r_=Ne(f0)(({theme:e})=>({padding:8,transform:"scale(2)",position:"absolute",zIndex:1,top:"18%",left:"4%",opacity:1,"& .Mui-checked":{"& + .MuiSwitch-track":{borderRadius:22/2,backgroundColor:"#8682ff","&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%) scale(4)",width:16,height:16}},"&:before":{},"&:after":{}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2},"& .MuiSwitch-track":{borderRadius:22/2,backgroundColor:"#ff0000","&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%) scale(4)",width:16,height:16}}})),i_=Ne(Yn)(({theme:e})=>({position:"absolute",fontSize:"30px"})),d0=new $.Ros({url:"ws://moyuboo.local:9090"});function o_(){const[e,t]=T.useState(0),[n,r]=T.useState(!1);T.useEffect(()=>{t(180)},[]);const i=()=>{if(!n){r(!0);const o=setInterval(()=>{t(s=>(s===0&&(r(!0),clearInterval(o),t(180)),s-1))},1e3);return()=>clearInterval(o)}};return C.jsxs(t_,{onClick:i,children:[("0"+Math.floor(e/60)).slice(-2),":",("0"+Math.floor(e%60)).slice(-2)]})}const s_=new $.Topic({ros:d0,name:"/connect",messageType:"std_msgs/Bool"});function l_(){const[e,t]=T.useState(0);return T.useEffect(()=>{new $.Topic({ros:d0,name:"/state_data",messageType:"std_msgs/Int32MultiArray"}).subscribe(r=>{t(r.data[0])})},[]),C.jsxs(n_,{children:[C.jsx("p",{style:{fontStyle:"italic",fontSize:"25pt",margin:"5%",textAlign:"right",right:"30px"},children:"State"}),C.jsx("p",{style:{fontSize:"55pt",margin:"5%",textAlign:"right",right:"0"},children:e})]})}function a_(){T.useState("");const[e,t]=T.useState(!1);T.useEffect(()=>{},[]);const[n,r]=T.useState(!0),i=()=>{r(!n)};return C.jsx(c0,{children:C.jsxs(e_,{children:[C.jsx(o_,{}),C.jsx(r_,{onChange:i}),C.jsx(l_,{}),C.jsx(i_,{variant:"contained",color:"success",style:{top:"28%",left:"3%",width:"160px",zIndex:1},onClick:()=>{const o=new $.Message({data:!0});s_.publish(o),t(!0)},children:"TURN ON"}),C.jsx(Z2,{color:!n})]})})}const u_=Ne(Yn)(({theme:e})=>({position:"relative",fontSize:"30px"})),c_=new $.Ros({url:"ws://moyuboo.local:9090"}),f_=new $.Topic({ros:c_,name:"/emergency",messageType:"std_msgs/Bool"});function d_(){return C.jsx("div",{style:{width:"100%",height:"100vh",position:"relative"},children:C.jsx("div",{style:{margin:"auto",width:"320px",height:"320px",marginTop:"200px"},children:C.jsx(u_,{variant:"contained",color:"error",style:{margin:"auto",width:"320px",height:"320px",borderRadius:"100%",fontSize:"80px"},onClick:()=>{new Audio(re).play();const t=new $.Message({data:!0});f_.publish(t)},children:"STOP"})})})}const p_=Ne(qc)(({theme:e})=>({color:"#FFFFFF",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"transform 0.2s ease-in-out",backgroundColor:"rgba(255,255, 255, 0.1)",width:"95%",height:"95vh",position:"absolute",borderRadius:"40px",fontFamily:"'Oxanium','Noto Sans JP'"})),h_=Ne.div(({theme:e})=>({position:"absolute",top:"20px",left:"40px",fontSize:"40pt",zIndex:1,fontFamily:"Oxanium"})),m_=Ne.div(({theme:e})=>({position:"absolute",width:"auto",top:"65%",left:"5%"})),Co=Ne(Yn)(({theme:e})=>({position:"absolute",fontSize:"30px"})),Ur=new $.Ros({url:"ws://moyuboo.local:9090"}),v_=new $.Topic({ros:Ur,name:"/connect",messageType:"std_msgs/Bool"}),g_=new $.Topic({ros:Ur,name:"/emergency",messageType:"std_msgs/Bool"}),y_=new $.Topic({ros:Ur,name:"/cmd_state",messageType:"std_msgs/String"}),w_=new $.Topic({ros:Ur,name:"/auto_start",messageType:"std_msgs/Bool"});function x_(){const[e,t]=T.useState(0);return T.useEffect(()=>{new $.Topic({ros:Ur,name:"/state_data",messageType:"std_msgs/Int32MultiArray"}).subscribe(r=>{t(r.data[0])})},[]),C.jsxs(m_,{children:[C.jsx("p",{style:{fontStyle:"italic",fontSize:"25pt",margin:"5%",textAlign:"right",right:"30px"},children:"State"}),C.jsx("p",{style:{fontSize:"55pt",margin:"5%",textAlign:"right",right:"0"},children:e})]})}function S_(){T.useState("");const[e,t]=T.useState(!1),n=["待機中","運転中"],[r,i]=T.useState(0),[o,s]=T.useState(!1);T.useEffect(()=>{i(180)},[]);let l;const a=()=>{if(!o)return s(!0),l=setInterval(()=>{i(u=>(u===0&&(s(!0),clearInterval(l),i(180)),u-1))},1e3),()=>clearInterval(l)};return T.useEffect(()=>{},[]),T.useState(!0),T.useEffect(()=>{new $.Topic({ros:Ur,name:"/auto_finish",messageType:"std_msgs/Bool"}).subscribe(c=>{t(c.data),i(0)})},[]),C.jsx(c0,{children:C.jsxs(p_,{children:[C.jsxs(h_,{onClick:a,children:[("0"+Math.floor(r/60)).slice(-2),":",("0"+Math.floor(r%60)).slice(-2)]}),C.jsx(x_,{}),C.jsx(Co,{variant:"contained",color:"success",style:{top:"25%",left:"86%",width:"70px"},onClick:()=>{const u=new $.Message({data:!0});v_.publish(u)},children:"ON"}),C.jsx(Co,{variant:"contained",color:"error",style:{top:"5%",left:"86%",width:"160px",height:"160px",borderRadius:"100%"},onClick:()=>{const u=new $.Message({data:!0});g_.publish(u),i(0)},children:"STOP"}),C.jsx(Co,{variant:"contained",style:{top:"25%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const c=new $.Message({data:"i"});y_.publish(c)},children:"INIT"}),C.jsx(Co,{variant:"contained",color:"success",style:{top:"60%",left:"41%",width:"240px",height:"120px",zIndex:1,fontSize:60},onClick:()=>{const u=new $.Message({data:!0});w_.publish(u),t(!0),a()},disabled:e,children:"START"}),C.jsx("div",{style:{position:"absolute",top:"30%",fontSize:120},children:n[Number(e)]})]})})}const k_=new $.Ros({url:"ws://moyuboo.local:9090"});new $.Topic({ros:k_,name:"/hello",messageType:"std_msgs/String"});const Xc=i0({palette:{mode:"dark"},typography:{fontFamily:["Oxanium","sans-serif"].join(",")}});function __(){return T.useState(""),C.jsx("div",{children:C.jsxs(E1,{children:[C.jsx(zo,{path:"/",element:C.jsx(C_,{})}),C.jsx(zo,{path:"/em",element:C.jsx(b_,{})}),C.jsx(zo,{path:"/auto",element:C.jsx(E_,{})})]})})}function C_(){return C.jsx("div",{children:C.jsxs(Kc,{theme:Xc,children:[C.jsx(a_,{}),C.jsx(Pk,{}),C.jsx(s0,{})]})})}function b_(){return C.jsx("div",{children:C.jsx(Kc,{theme:Xc,children:C.jsx(d_,{})})})}function E_(){return C.jsx("div",{children:C.jsxs(Kc,{theme:Xc,children:[C.jsx(S_,{}),C.jsx(s0,{})]})})}Ra.createRoot(document.getElementById("root")).render(C.jsx(ln.StrictMode,{children:C.jsx(R1,{children:C.jsx(__,{})})}));
+`),wt.rippleVisible,qk,Mu,({theme:e})=>e.transitions.easing.easeInOut,wt.ripplePulsate,({theme:e})=>e.transitions.duration.shorter,wt.child,wt.childLeaving,Qk,Mu,({theme:e})=>e.transitions.easing.easeInOut,wt.childPulsate,Yk,({theme:e})=>e.transitions.easing.easeInOut),Zk=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiTouchRipple"}),{center:i=!1,classes:o={},className:s}=r,l=Ae(r,Hk),[a,u]=T.useState([]),c=T.useRef(0),f=T.useRef(null);T.useEffect(()=>{f.current&&(f.current(),f.current=null)},[a]);const d=T.useRef(!1),v=T.useRef(0),w=T.useRef(null),x=T.useRef(null);T.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]);const b=T.useCallback(k=>{const{pulsate:R,rippleX:P,rippleY:O,rippleSize:B,cb:G}=k;u(U=>[...U,C.jsx(Jk,{classes:{ripple:Be(o.ripple,wt.ripple),rippleVisible:Be(o.rippleVisible,wt.rippleVisible),ripplePulsate:Be(o.ripplePulsate,wt.ripplePulsate),child:Be(o.child,wt.child),childLeaving:Be(o.childLeaving,wt.childLeaving),childPulsate:Be(o.childPulsate,wt.childPulsate)},timeout:Mu,pulsate:R,rippleX:P,rippleY:O,rippleSize:B},c.current)]),c.current+=1,f.current=G},[o]),m=T.useCallback((k={},R={},P=()=>{})=>{const{pulsate:O=!1,center:B=i||R.pulsate,fakeElement:G=!1}=R;if((k==null?void 0:k.type)==="mousedown"&&d.current){d.current=!1;return}(k==null?void 0:k.type)==="touchstart"&&(d.current=!0);const U=G?null:x.current,L=U?U.getBoundingClientRect():{width:0,height:0,left:0,top:0};let H,W,V;if(B||k===void 0||k.clientX===0&&k.clientY===0||!k.clientX&&!k.touches)H=Math.round(L.width/2),W=Math.round(L.height/2);else{const{clientX:I,clientY:q}=k.touches&&k.touches.length>0?k.touches[0]:k;H=Math.round(I-L.left),W=Math.round(q-L.top)}if(B)V=Math.sqrt((2*L.width**2+L.height**2)/3),V%2===0&&(V+=1);else{const I=Math.max(Math.abs((U?U.clientWidth:0)-H),H)*2+2,q=Math.max(Math.abs((U?U.clientHeight:0)-W),W)*2+2;V=Math.sqrt(I**2+q**2)}k!=null&&k.touches?w.current===null&&(w.current=()=>{b({pulsate:O,rippleX:H,rippleY:W,rippleSize:V,cb:P})},v.current=setTimeout(()=>{w.current&&(w.current(),w.current=null)},Kk)):b({pulsate:O,rippleX:H,rippleY:W,rippleSize:V,cb:P})},[i,b]),h=T.useCallback(()=>{m({},{pulsate:!0})},[m]),y=T.useCallback((k,R)=>{if(clearTimeout(v.current),(k==null?void 0:k.type)==="touchend"&&w.current){w.current(),w.current=null,v.current=setTimeout(()=>{y(k,R)});return}w.current=null,u(P=>P.length>0?P.slice(1):P),f.current=R},[]);return T.useImperativeHandle(n,()=>({pulsate:h,start:m,stop:y}),[h,m,y]),C.jsx(Xk,D({className:Be(wt.root,o.root,s),ref:x},l,{children:C.jsx(Wk,{component:null,exit:!0,children:a})}))}),e2=Zk;function t2(e){return bn("MuiButtonBase",e)}const n2=En("MuiButtonBase",["root","disabled","focusVisible"]),r2=n2,i2=["action","centerRipple","children","className","component","disabled","disableRipple","disableTouchRipple","focusRipple","focusVisibleClassName","LinkComponent","onBlur","onClick","onContextMenu","onDragLeave","onFocus","onFocusVisible","onKeyDown","onKeyUp","onMouseDown","onMouseLeave","onMouseUp","onTouchEnd","onTouchMove","onTouchStart","tabIndex","TouchRippleProps","touchRippleRef","type"],o2=e=>{const{disabled:t,focusVisible:n,focusVisibleClassName:r,classes:i}=e,s=Qn({root:["root",t&&"disabled",n&&"focusVisible"]},t2,i);return n&&r&&(s.root+=` ${r}`),s},s2=nt("button",{name:"MuiButtonBase",slot:"Root",overridesResolver:(e,t)=>t.root})({display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",boxSizing:"border-box",WebkitTapHighlightColor:"transparent",backgroundColor:"transparent",outline:0,border:0,margin:0,borderRadius:0,padding:0,cursor:"pointer",userSelect:"none",verticalAlign:"middle",MozAppearance:"none",WebkitAppearance:"none",textDecoration:"none",color:"inherit","&::-moz-focus-inner":{borderStyle:"none"},[`&.${r2.disabled}`]:{pointerEvents:"none",cursor:"default"},"@media print":{colorAdjust:"exact"}}),l2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiButtonBase"}),{action:i,centerRipple:o=!1,children:s,className:l,component:a="button",disabled:u=!1,disableRipple:c=!1,disableTouchRipple:f=!1,focusRipple:d=!1,LinkComponent:v="a",onBlur:w,onClick:x,onContextMenu:b,onDragLeave:m,onFocus:h,onFocusVisible:y,onKeyDown:k,onKeyUp:R,onMouseDown:P,onMouseLeave:O,onMouseUp:B,onTouchEnd:G,onTouchMove:U,onTouchStart:L,tabIndex:H=0,TouchRippleProps:W,touchRippleRef:V,type:I}=r,q=Ae(r,i2),Y=T.useRef(null),p=T.useRef(null),g=cp(p,V),{isFocusVisibleRef:S,onFocus:_,onBlur:E,ref:M}=fw(),[A,N]=T.useState(!1);u&&A&&N(!1),T.useImperativeHandle(i,()=>({focusVisible:()=>{N(!0),Y.current.focus()}}),[]);const[j,z]=T.useState(!1);T.useEffect(()=>{z(!0)},[]);const Q=j&&!c&&!u;T.useEffect(()=>{A&&d&&!c&&j&&p.current.pulsate()},[c,d,A,j]);function ce(J,Zc,g0=f){return wo(ef=>(Zc&&Zc(ef),!g0&&p.current&&p.current[J](ef),!0))}const te=ce("start",P),ne=ce("stop",b),me=ce("stop",m),Fe=ce("stop",B),Br=ce("stop",J=>{A&&J.preventDefault(),O&&O(J)}),Dr=ce("start",L),Rn=ce("stop",G),Wr=ce("stop",U),Et=ce("stop",J=>{E(J),S.current===!1&&N(!1),w&&w(J)},!1),Ve=wo(J=>{Y.current||(Y.current=J.currentTarget),_(J),S.current===!0&&(N(!0),y&&y(J)),h&&h(J)}),ol=()=>{const J=Y.current;return a&&a!=="button"&&!(J.tagName==="A"&&J.href)},sl=T.useRef(!1),p0=wo(J=>{d&&!sl.current&&A&&p.current&&J.key===" "&&(sl.current=!0,p.current.stop(J,()=>{p.current.start(J)})),J.target===J.currentTarget&&ol()&&J.key===" "&&J.preventDefault(),k&&k(J),J.target===J.currentTarget&&ol()&&J.key==="Enter"&&!u&&(J.preventDefault(),x&&x(J))}),h0=wo(J=>{d&&J.key===" "&&p.current&&A&&!J.defaultPrevented&&(sl.current=!1,p.current.stop(J,()=>{p.current.pulsate(J)})),R&&R(J),x&&J.target===J.currentTarget&&ol()&&J.key===" "&&!J.defaultPrevented&&x(J)});let Zi=a;Zi==="button"&&(q.href||q.to)&&(Zi=v);const Vr={};Zi==="button"?(Vr.type=I===void 0?"button":I,Vr.disabled=u):(!q.href&&!q.to&&(Vr.role="button"),u&&(Vr["aria-disabled"]=u));const m0=cp(n,M,Y),Jc=D({},r,{centerRipple:o,component:a,disabled:u,disableRipple:c,disableTouchRipple:f,focusRipple:d,tabIndex:H,focusVisible:A}),v0=o2(Jc);return C.jsxs(s2,D({as:Zi,className:Be(v0.root,l),ownerState:Jc,onBlur:Et,onClick:x,onContextMenu:ne,onFocus:Ve,onKeyDown:p0,onKeyUp:h0,onMouseDown:te,onMouseLeave:Br,onMouseUp:Fe,onDragLeave:me,onTouchEnd:Rn,onTouchMove:Wr,onTouchStart:Dr,ref:m0,tabIndex:u?-1:H,type:I},Vr,q,{children:[s,Q?C.jsx(e2,D({ref:g,center:o},W)):null]}))}),l0=l2;function a2(e){return bn("MuiButton",e)}const u2=En("MuiButton",["root","text","textInherit","textPrimary","textSecondary","textSuccess","textError","textInfo","textWarning","outlined","outlinedInherit","outlinedPrimary","outlinedSecondary","outlinedSuccess","outlinedError","outlinedInfo","outlinedWarning","contained","containedInherit","containedPrimary","containedSecondary","containedSuccess","containedError","containedInfo","containedWarning","disableElevation","focusVisible","disabled","colorInherit","textSizeSmall","textSizeMedium","textSizeLarge","outlinedSizeSmall","outlinedSizeMedium","outlinedSizeLarge","containedSizeSmall","containedSizeMedium","containedSizeLarge","sizeMedium","sizeSmall","sizeLarge","fullWidth","startIcon","endIcon","iconSizeSmall","iconSizeMedium","iconSizeLarge"]),So=u2,c2=T.createContext({}),f2=c2,d2=["children","color","component","className","disabled","disableElevation","disableFocusRipple","endIcon","focusVisibleClassName","fullWidth","size","startIcon","type","variant"],p2=e=>{const{color:t,disableElevation:n,fullWidth:r,size:i,variant:o,classes:s}=e,l={root:["root",o,`${o}${de(t)}`,`size${de(i)}`,`${o}Size${de(i)}`,t==="inherit"&&"colorInherit",n&&"disableElevation",r&&"fullWidth"],label:["label"],startIcon:["startIcon",`iconSize${de(i)}`],endIcon:["endIcon",`iconSize${de(i)}`]},a=Qn(l,a2,s);return D({},s,a)},a0=e=>D({},e.size==="small"&&{"& > *:nth-of-type(1)":{fontSize:18}},e.size==="medium"&&{"& > *:nth-of-type(1)":{fontSize:20}},e.size==="large"&&{"& > *:nth-of-type(1)":{fontSize:22}}),h2=nt(l0,{shouldForwardProp:e=>o0(e)||e==="classes",name:"MuiButton",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,t[n.variant],t[`${n.variant}${de(n.color)}`],t[`size${de(n.size)}`],t[`${n.variant}Size${de(n.size)}`],n.color==="inherit"&&t.colorInherit,n.disableElevation&&t.disableElevation,n.fullWidth&&t.fullWidth]}})(({theme:e,ownerState:t})=>{var n,r;const i=e.palette.mode==="light"?e.palette.grey[300]:e.palette.grey[800],o=e.palette.mode==="light"?e.palette.grey.A100:e.palette.grey[700];return D({},e.typography.button,{minWidth:64,padding:"6px 16px",borderRadius:(e.vars||e).shape.borderRadius,transition:e.transitions.create(["background-color","box-shadow","border-color","color"],{duration:e.transitions.duration.short}),"&:hover":D({textDecoration:"none",backgroundColor:e.vars?`rgba(${e.vars.palette.text.primaryChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette.text.primary,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},t.variant==="text"&&t.color!=="inherit"&&{backgroundColor:e.vars?`rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette[t.color].main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},t.variant==="outlined"&&t.color!=="inherit"&&{border:`1px solid ${(e.vars||e).palette[t.color].main}`,backgroundColor:e.vars?`rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette[t.color].main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},t.variant==="contained"&&{backgroundColor:e.vars?e.vars.palette.Button.inheritContainedHoverBg:o,boxShadow:(e.vars||e).shadows[4],"@media (hover: none)":{boxShadow:(e.vars||e).shadows[2],backgroundColor:(e.vars||e).palette.grey[300]}},t.variant==="contained"&&t.color!=="inherit"&&{backgroundColor:(e.vars||e).palette[t.color].dark,"@media (hover: none)":{backgroundColor:(e.vars||e).palette[t.color].main}}),"&:active":D({},t.variant==="contained"&&{boxShadow:(e.vars||e).shadows[8]}),[`&.${So.focusVisible}`]:D({},t.variant==="contained"&&{boxShadow:(e.vars||e).shadows[6]}),[`&.${So.disabled}`]:D({color:(e.vars||e).palette.action.disabled},t.variant==="outlined"&&{border:`1px solid ${(e.vars||e).palette.action.disabledBackground}`},t.variant==="contained"&&{color:(e.vars||e).palette.action.disabled,boxShadow:(e.vars||e).shadows[0],backgroundColor:(e.vars||e).palette.action.disabledBackground})},t.variant==="text"&&{padding:"6px 8px"},t.variant==="text"&&t.color!=="inherit"&&{color:(e.vars||e).palette[t.color].main},t.variant==="outlined"&&{padding:"5px 15px",border:"1px solid currentColor"},t.variant==="outlined"&&t.color!=="inherit"&&{color:(e.vars||e).palette[t.color].main,border:e.vars?`1px solid rgba(${e.vars.palette[t.color].mainChannel} / 0.5)`:`1px solid ${fn(e.palette[t.color].main,.5)}`},t.variant==="contained"&&{color:e.vars?e.vars.palette.text.primary:(n=(r=e.palette).getContrastText)==null?void 0:n.call(r,e.palette.grey[300]),backgroundColor:e.vars?e.vars.palette.Button.inheritContainedBg:i,boxShadow:(e.vars||e).shadows[2]},t.variant==="contained"&&t.color!=="inherit"&&{color:(e.vars||e).palette[t.color].contrastText,backgroundColor:(e.vars||e).palette[t.color].main},t.color==="inherit"&&{color:"inherit",borderColor:"currentColor"},t.size==="small"&&t.variant==="text"&&{padding:"4px 5px",fontSize:e.typography.pxToRem(13)},t.size==="large"&&t.variant==="text"&&{padding:"8px 11px",fontSize:e.typography.pxToRem(15)},t.size==="small"&&t.variant==="outlined"&&{padding:"3px 9px",fontSize:e.typography.pxToRem(13)},t.size==="large"&&t.variant==="outlined"&&{padding:"7px 21px",fontSize:e.typography.pxToRem(15)},t.size==="small"&&t.variant==="contained"&&{padding:"4px 10px",fontSize:e.typography.pxToRem(13)},t.size==="large"&&t.variant==="contained"&&{padding:"8px 22px",fontSize:e.typography.pxToRem(15)},t.fullWidth&&{width:"100%"})},({ownerState:e})=>e.disableElevation&&{boxShadow:"none","&:hover":{boxShadow:"none"},[`&.${So.focusVisible}`]:{boxShadow:"none"},"&:active":{boxShadow:"none"},[`&.${So.disabled}`]:{boxShadow:"none"}}),m2=nt("span",{name:"MuiButton",slot:"StartIcon",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.startIcon,t[`iconSize${de(n.size)}`]]}})(({ownerState:e})=>D({display:"inherit",marginRight:8,marginLeft:-4},e.size==="small"&&{marginLeft:-2},a0(e))),v2=nt("span",{name:"MuiButton",slot:"EndIcon",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.endIcon,t[`iconSize${de(n.size)}`]]}})(({ownerState:e})=>D({display:"inherit",marginRight:-4,marginLeft:8},e.size==="small"&&{marginRight:-2},a0(e))),g2=T.forwardRef(function(t,n){const r=T.useContext(f2),i=Pc(r,t),o=Tn({props:i,name:"MuiButton"}),{children:s,color:l="primary",component:a="button",className:u,disabled:c=!1,disableElevation:f=!1,disableFocusRipple:d=!1,endIcon:v,focusVisibleClassName:w,fullWidth:x=!1,size:b="medium",startIcon:m,type:h,variant:y="text"}=o,k=Ae(o,d2),R=D({},o,{color:l,component:a,disabled:c,disableElevation:f,disableFocusRipple:d,fullWidth:x,size:b,type:h,variant:y}),P=p2(R),O=m&&C.jsx(m2,{className:P.startIcon,ownerState:R,children:m}),B=v&&C.jsx(v2,{className:P.endIcon,ownerState:R,children:v});return C.jsxs(h2,D({ownerState:R,className:Be(r.className,P.root,u),component:a,disabled:c,focusRipple:!d,focusVisibleClassName:Be(P.focusVisible,w),ref:n,type:h},k,{classes:P,children:[O,s,B]}))}),Yn=g2;function Ip(e){return e!=null&&!(Array.isArray(e)&&e.length===0)}function Up(e,t=!1){return e&&(Ip(e.value)&&e.value!==""||t&&Ip(e.defaultValue)&&e.defaultValue!=="")}function y2(e){return e.startAdornment}const w2=T.createContext(void 0),u0=w2;function x2(e){return bn("MuiFormControl",e)}En("MuiFormControl",["root","marginNone","marginNormal","marginDense","fullWidth","disabled"]);const S2=["children","className","color","component","disabled","error","focused","fullWidth","hiddenLabel","margin","required","size","variant"],k2=e=>{const{classes:t,margin:n,fullWidth:r}=e,i={root:["root",n!=="none"&&`margin${de(n)}`,r&&"fullWidth"]};return Qn(i,x2,t)},_2=nt("div",{name:"MuiFormControl",slot:"Root",overridesResolver:({ownerState:e},t)=>D({},t.root,t[`margin${de(e.margin)}`],e.fullWidth&&t.fullWidth)})(({ownerState:e})=>D({display:"inline-flex",flexDirection:"column",position:"relative",minWidth:0,padding:0,margin:0,border:0,verticalAlign:"top"},e.margin==="normal"&&{marginTop:16,marginBottom:8},e.margin==="dense"&&{marginTop:8,marginBottom:4},e.fullWidth&&{width:"100%"})),C2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiFormControl"}),{children:i,className:o,color:s="primary",component:l="div",disabled:a=!1,error:u=!1,focused:c,fullWidth:f=!1,hiddenLabel:d=!1,margin:v="none",required:w=!1,size:x="medium",variant:b="outlined"}=r,m=Ae(r,S2),h=D({},r,{color:s,component:l,disabled:a,error:u,fullWidth:f,hiddenLabel:d,margin:v,required:w,size:x,variant:b}),y=k2(h),[k,R]=T.useState(()=>{let W=!1;return i&&T.Children.forEach(i,V=>{if(!_a(V,["Input","Select"]))return;const I=_a(V,["Select"])?V.props.input:V;I&&y2(I.props)&&(W=!0)}),W}),[P,O]=T.useState(()=>{let W=!1;return i&&T.Children.forEach(i,V=>{_a(V,["Input","Select"])&&(Up(V.props,!0)||Up(V.props.inputProps,!0))&&(W=!0)}),W}),[B,G]=T.useState(!1);a&&B&&G(!1);const U=c!==void 0&&!a?c:B;let L;const H=T.useMemo(()=>({adornedStart:k,setAdornedStart:R,color:s,disabled:a,error:u,filled:P,focused:U,fullWidth:f,hiddenLabel:d,size:x,onBlur:()=>{G(!1)},onEmpty:()=>{O(!1)},onFilled:()=>{O(!0)},onFocus:()=>{G(!0)},registerEffect:L,required:w,variant:b}),[k,s,a,u,P,U,f,d,L,w,x,b]);return C.jsx(u0.Provider,{value:H,children:C.jsx(_2,D({as:l,ownerState:h,className:Be(y.root,o),ref:n},m,{children:i}))})}),b2=C2;function E2(){return T.useContext(u0)}function T2(e){return bn("MuiTypography",e)}En("MuiTypography",["root","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","inherit","button","caption","overline","alignLeft","alignRight","alignCenter","alignJustify","noWrap","gutterBottom","paragraph"]);const R2=["align","className","component","gutterBottom","noWrap","paragraph","variant","variantMapping"],M2=e=>{const{align:t,gutterBottom:n,noWrap:r,paragraph:i,variant:o,classes:s}=e,l={root:["root",o,e.align!=="inherit"&&`align${de(t)}`,n&&"gutterBottom",r&&"noWrap",i&&"paragraph"]};return Qn(l,T2,s)},P2=nt("span",{name:"MuiTypography",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,n.variant&&t[n.variant],n.align!=="inherit"&&t[`align${de(n.align)}`],n.noWrap&&t.noWrap,n.gutterBottom&&t.gutterBottom,n.paragraph&&t.paragraph]}})(({theme:e,ownerState:t})=>D({margin:0},t.variant==="inherit"&&{font:"inherit"},t.variant!=="inherit"&&e.typography[t.variant],t.align!=="inherit"&&{textAlign:t.align},t.noWrap&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},t.gutterBottom&&{marginBottom:"0.35em"},t.paragraph&&{marginBottom:16})),Bp={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",inherit:"p"},O2={primary:"primary.main",textPrimary:"text.primary",secondary:"secondary.main",textSecondary:"text.secondary",error:"error.main"},A2=e=>O2[e]||e,L2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiTypography"}),i=A2(r.color),o=wS(D({},r,{color:i})),{align:s="inherit",className:l,component:a,gutterBottom:u=!1,noWrap:c=!1,paragraph:f=!1,variant:d="body1",variantMapping:v=Bp}=o,w=Ae(o,R2),x=D({},o,{align:s,color:i,className:l,component:a,gutterBottom:u,noWrap:c,paragraph:f,variant:d,variantMapping:v}),b=a||(f?"p":v[d]||Bp[d])||"span",m=M2(x);return C.jsx(P2,D({as:b,ref:n,ownerState:x,className:Be(m.root,l)},w))}),j2=L2,c0=Ji("div")(({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",height:"100vh",background:"linear-gradient(to bottom, #211f20, #11283b)"}));Ji(qc)(({theme:e})=>({padding:e.spacing(8),color:"#FFFFFF",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"transform 0.2s ease-in-out",backgroundColor:"rgba(255,255, 255, 0.0)",transform:"scale(0)"}));Ji(b2)(({theme:e})=>({margin:e.spacing(4),width:"400px"}));Ji(Yn)(({theme:e})=>({margin:e.spacing(1),width:"150px"}));Ji(j2)(({theme:e})=>({marginBottom:"16px",textAlign:"center"}));function $2(e){return bn("PrivateSwitchBase",e)}En("PrivateSwitchBase",["root","checked","disabled","input","edgeStart","edgeEnd"]);const N2=["autoFocus","checked","checkedIcon","className","defaultChecked","disabled","disableFocusRipple","edge","icon","id","inputProps","inputRef","name","onBlur","onChange","onFocus","readOnly","required","tabIndex","type","value"],z2=e=>{const{classes:t,checked:n,disabled:r,edge:i}=e,o={root:["root",n&&"checked",r&&"disabled",i&&`edge${de(i)}`],input:["input"]};return Qn(o,$2,t)},F2=nt(l0)(({ownerState:e})=>D({padding:9,borderRadius:"50%"},e.edge==="start"&&{marginLeft:e.size==="small"?-3:-12},e.edge==="end"&&{marginRight:e.size==="small"?-3:-12})),I2=nt("input")({cursor:"inherit",position:"absolute",opacity:0,width:"100%",height:"100%",top:0,left:0,margin:0,padding:0,zIndex:1}),U2=T.forwardRef(function(t,n){const{autoFocus:r,checked:i,checkedIcon:o,className:s,defaultChecked:l,disabled:a,disableFocusRipple:u=!1,edge:c=!1,icon:f,id:d,inputProps:v,inputRef:w,name:x,onBlur:b,onChange:m,onFocus:h,readOnly:y,required:k=!1,tabIndex:R,type:P,value:O}=t,B=Ae(t,N2),[G,U]=iw({controlled:i,default:!!l,name:"SwitchBase",state:"checked"}),L=E2(),H=g=>{h&&h(g),L&&L.onFocus&&L.onFocus(g)},W=g=>{b&&b(g),L&&L.onBlur&&L.onBlur(g)},V=g=>{if(g.nativeEvent.defaultPrevented)return;const S=g.target.checked;U(S),m&&m(g,S)};let I=a;L&&typeof I>"u"&&(I=L.disabled);const q=P==="checkbox"||P==="radio",Y=D({},t,{checked:G,disabled:I,disableFocusRipple:u,edge:c}),p=z2(Y);return C.jsxs(F2,D({component:"span",className:Be(p.root,s),centerRipple:!0,focusRipple:!u,disabled:I,tabIndex:null,role:void 0,onFocus:H,onBlur:W,ownerState:Y,ref:n},B,{children:[C.jsx(I2,D({autoFocus:r,checked:i,defaultChecked:l,className:p.input,disabled:I,id:q?d:void 0,name:x,onChange:V,readOnly:y,ref:w,required:k,ownerState:Y,tabIndex:R,type:P},P==="checkbox"&&O===void 0?{}:{value:O},v)),G?o:f]}))}),B2=U2;function D2(e){return bn("MuiSwitch",e)}const W2=En("MuiSwitch",["root","edgeStart","edgeEnd","switchBase","colorPrimary","colorSecondary","sizeSmall","sizeMedium","checked","disabled","input","thumb","track"]),Xe=W2,V2=["className","color","edge","size","sx"],G2=e=>{const{classes:t,edge:n,size:r,color:i,checked:o,disabled:s}=e,l={root:["root",n&&`edge${de(n)}`,`size${de(r)}`],switchBase:["switchBase",`color${de(i)}`,o&&"checked",s&&"disabled"],thumb:["thumb"],track:["track"],input:["input"]},a=Qn(l,D2,t);return D({},t,a)},H2=nt("span",{name:"MuiSwitch",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,n.edge&&t[`edge${de(n.edge)}`],t[`size${de(n.size)}`]]}})(({ownerState:e})=>D({display:"inline-flex",width:34+12*2,height:14+12*2,overflow:"hidden",padding:12,boxSizing:"border-box",position:"relative",flexShrink:0,zIndex:0,verticalAlign:"middle","@media print":{colorAdjust:"exact"}},e.edge==="start"&&{marginLeft:-8},e.edge==="end"&&{marginRight:-8},e.size==="small"&&{width:40,height:24,padding:7,[`& .${Xe.thumb}`]:{width:16,height:16},[`& .${Xe.switchBase}`]:{padding:4,[`&.${Xe.checked}`]:{transform:"translateX(16px)"}}})),K2=nt(B2,{name:"MuiSwitch",slot:"SwitchBase",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.switchBase,{[`& .${Xe.input}`]:t.input},n.color!=="default"&&t[`color${de(n.color)}`]]}})(({theme:e})=>({position:"absolute",top:0,left:0,zIndex:1,color:e.vars?e.vars.palette.Switch.defaultColor:`${e.palette.mode==="light"?e.palette.common.white:e.palette.grey[300]}`,transition:e.transitions.create(["left","transform"],{duration:e.transitions.duration.shortest}),[`&.${Xe.checked}`]:{transform:"translateX(20px)"},[`&.${Xe.disabled}`]:{color:e.vars?e.vars.palette.Switch.defaultDisabledColor:`${e.palette.mode==="light"?e.palette.grey[100]:e.palette.grey[600]}`},[`&.${Xe.checked} + .${Xe.track}`]:{opacity:.5},[`&.${Xe.disabled} + .${Xe.track}`]:{opacity:e.vars?e.vars.opacity.switchTrackDisabled:`${e.palette.mode==="light"?.12:.2}`},[`& .${Xe.input}`]:{left:"-100%",width:"300%"}}),({theme:e,ownerState:t})=>D({"&:hover":{backgroundColor:e.vars?`rgba(${e.vars.palette.action.activeChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette.action.active,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},t.color!=="default"&&{[`&.${Xe.checked}`]:{color:(e.vars||e).palette[t.color].main,"&:hover":{backgroundColor:e.vars?`rgba(${e.vars.palette[t.color].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:fn(e.palette[t.color].main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}},[`&.${Xe.disabled}`]:{color:e.vars?e.vars.palette.Switch[`${t.color}DisabledColor`]:`${e.palette.mode==="light"?t0(e.palette[t.color].main,.62):e0(e.palette[t.color].main,.55)}`}},[`&.${Xe.checked} + .${Xe.track}`]:{backgroundColor:(e.vars||e).palette[t.color].main}})),q2=nt("span",{name:"MuiSwitch",slot:"Track",overridesResolver:(e,t)=>t.track})(({theme:e})=>({height:"100%",width:"100%",borderRadius:14/2,zIndex:-1,transition:e.transitions.create(["opacity","background-color"],{duration:e.transitions.duration.shortest}),backgroundColor:e.vars?e.vars.palette.common.onBackground:`${e.palette.mode==="light"?e.palette.common.black:e.palette.common.white}`,opacity:e.vars?e.vars.opacity.switchTrack:`${e.palette.mode==="light"?.38:.3}`})),Q2=nt("span",{name:"MuiSwitch",slot:"Thumb",overridesResolver:(e,t)=>t.thumb})(({theme:e})=>({boxShadow:(e.vars||e).shadows[1],backgroundColor:"currentColor",width:20,height:20,borderRadius:"50%"})),Y2=T.forwardRef(function(t,n){const r=Tn({props:t,name:"MuiSwitch"}),{className:i,color:o="primary",edge:s=!1,size:l="medium",sx:a}=r,u=Ae(r,V2),c=D({},r,{color:o,edge:s,size:l}),f=G2(c),d=C.jsx(Q2,{className:f.thumb,ownerState:c});return C.jsxs(H2,{className:Be(f.root,i),sx:a,ownerState:c,children:[C.jsx(K2,D({type:"checkbox",icon:d,checkedIcon:d,ref:n,ownerState:c},u,{classes:D({},f,{root:f.switchBase})})),C.jsx(q2,{className:f.track,ownerState:c})]})}),f0=Y2,X2="/hi_gui_app/assets/img-blue-5917a43f.svg",J2="/hi_gui_app/assets/img-red-db717ad4.svg",ko="/hi_gui_app/assets/next-6cb64f42.mp3",re="/hi_gui_app/assets/pos-fecba1f0.mp3",Ee="/hi_gui_app/assets/pecho-06628ff4.mp3",Ke="/hi_gui_app/assets/next-6cb64f42.mp3",Dp=Ne.div(({theme:e})=>({height:"100%",padding:"1%",position:"relative"})),X=Ne(Yn)(({theme:e})=>({position:"absolute",borderRadius:"100%",fontSize:"20px",fontWeight:"Bold",width:"5%!important"})),_o=Ne(Yn)(({theme:e})=>({position:"absolute",borderRadius:"100%",fontSize:"40px"})),Se=Ne(Yn)(({theme:e})=>({position:"absolute",fontSize:"30px"})),Wp=Ne(f0)(({theme:e})=>({padding:8,transform:"scale(2.5)",position:"absolute",zIndex:1,top:"57%",left:"7%","& .MuiSwitch-track":{borderRadius:22/2,"&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%) scale(4)",width:16,height:16},"&:before":{},"&:after":{}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2}})),Ir=new $.Ros({url:"ws://moyuboo.local:9090"}),ue=new $.Topic({ros:Ir,name:"/index",messageType:"std_msgs/Int8"}),Le=new $.Topic({ros:Ir,name:"/shooting_index",messageType:"std_msgs/Int8"}),Vp=new $.Topic({ros:Ir,name:"/is_manual",messageType:"std_msgs/Bool"}),ke=new $.Topic({ros:Ir,name:"/cmd_state",messageType:"std_msgs/String"}),Gp=new $.Topic({ros:Ir,name:"/emergency",messageType:"std_msgs/Bool"}),Hp=new $.Topic({ros:Ir,name:"/stp_homing",messageType:"std_msgs/Bool"});function Z2({color:e}){const[t,n]=T.useState(!1);return e?C.jsxs("div",{style:{width:"100%",height:"100%",position:"relative"},children:[C.jsxs(Dp,{style:{width:"60%",margin:"auto"},children:[C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"12.6%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:5});ue.publish(i)},children:"5"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"26.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:4});ue.publish(i)},children:"4"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"40.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:3});ue.publish(i)},children:"3"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"53.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:2});ue.publish(i)},children:"2"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"67.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:1});ue.publish(i)},children:"1"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"80.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:0});ue.publish(i)},children:"0"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"18.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:13});ue.publish(i)},children:"13"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"27.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:12});ue.publish(i)},children:"12"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"37.2%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:11});ue.publish(i)},children:"11"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"46.9%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:10});ue.publish(i)},children:"10"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"56.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:9});ue.publish(i)},children:"9"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"66.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:8});ue.publish(i)},children:"8"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"75.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});ue.publish(i)},children:"7"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"70%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:15});ue.publish(i)},children:"15"}),C.jsx(X,{variant:"outlined",style:{top:"61%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:0});Le.publish(i)},children:"A"}),C.jsx(X,{variant:"outlined",style:{top:"66%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:1});Le.publish(i)},children:"B"}),C.jsx(X,{variant:"outlined",style:{top:"74%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:2});Le.publish(i)},children:"C"}),C.jsx(X,{variant:"outlined",style:{top:"79%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:3});Le.publish(i)},children:"D"}),C.jsx(X,{variant:"outlined",style:{top:"88%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:4});Le.publish(i)},children:"E"}),C.jsx(X,{variant:"outlined",style:{top:"93%",left:"91%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:5});Le.publish(i)},children:"F"}),C.jsx(X,{variant:"outlined",style:{top:"72.5%",left:"80%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:6});Le.publish(i)},children:"G0"}),C.jsx(X,{variant:"outlined",style:{top:"82.5%",left:"80%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:8});Le.publish(i)},children:"G1"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"62%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});Le.publish(i)},children:"7"}),C.jsx("img",{src:X2,alt:"blue image",style:{height:"100%",margin:"auto"}})]}),C.jsx(Wp,{onChange:()=>{n(!t);const r=new $.Message({data:!t});Vp.publish(r)}}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"86%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"n"});ke.publish(i)},children:"NEXT"}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"2%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"b"});ke.publish(i)},children:"BACK"}),C.jsx(Se,{variant:"contained",style:{top:"65%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c"});ke.publish(i)},children:"CATCH"}),C.jsx(Se,{variant:"contained",style:{top:"75%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r"});ke.publish(i)},children:"RELEASE"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c0"});ke.publish(i)},children:"C0"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r0"});ke.publish(i)},children:"R0"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c1"});ke.publish(i)},children:"C1"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r1"});ke.publish(i)},children:"R1"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c2"});ke.publish(i)},children:"C2"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r2"});ke.publish(i)},children:"R2"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"i"});ke.publish(i)},children:"INIT"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:!0});Hp.publish(i)},children:"STP"}),C.jsx(Se,{variant:"contained",color:"error",style:{top:"5%",left:"86%",width:"160px",height:"160px",borderRadius:"100%"},onClick:()=>{const r=new $.Message({data:!0});Gp.publish(r)},children:"STOP"})]}):C.jsxs("div",{style:{width:"100%",height:"100%",position:"relative"},children:[C.jsxs(Dp,{style:{width:"60%",margin:"auto"},children:[C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"12.6%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:0});ue.publish(i)},children:"0"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"26.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:1});ue.publish(i)},children:"1"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"40.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:2});ue.publish(i)},children:"2"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"53.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:3});ue.publish(i)},children:"3"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"67.4%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:4});ue.publish(i)},children:"4"}),C.jsx(X,{variant:"outlined",style:{top:"35.9%",left:"80.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:5});ue.publish(i)},children:"5"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"18.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});ue.publish(i)},children:"7"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"27.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:8});ue.publish(i)},children:"8"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"37.2%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:9});ue.publish(i)},children:"9"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"46.9%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:10});ue.publish(i)},children:"10"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"56.5%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:11});ue.publish(i)},children:"11"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"66.1%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:12});ue.publish(i)},children:"12"}),C.jsx(X,{variant:"outlined",style:{top:"8.8%",left:"75.7%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:13});ue.publish(i)},children:"13"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"21%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:15});ue.publish(i)},children:"15"}),C.jsx(X,{variant:"outlined",style:{top:"61%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:0});Le.publish(i)},children:"A"}),C.jsx(X,{variant:"outlined",style:{top:"66%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:1});Le.publish(i)},children:"B"}),C.jsx(X,{variant:"outlined",style:{top:"74%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:2});Le.publish(i)},children:"C"}),C.jsx(X,{variant:"outlined",style:{top:"79%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:3});Le.publish(i)},children:"D"}),C.jsx(X,{variant:"outlined",style:{top:"88%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:4});Le.publish(i)},children:"E"}),C.jsx(X,{variant:"outlined",style:{top:"93%",left:"3%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:5});Le.publish(i)},children:"F"}),C.jsx(X,{variant:"outlined",style:{top:"72.5%",left:"13.5%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:6});Le.publish(i)},children:"G0"}),C.jsx(X,{variant:"outlined",style:{top:"82.5%",left:"13.5%"},onClick:()=>{new Audio(Ke).play();const i=new $.Message({data:8});Le.publish(i)},children:"G1"}),C.jsx(X,{variant:"outlined",style:{top:"23%",left:"30%"},onClick:()=>{new Audio(re).play();const i=new $.Message({data:7});Le.publish(i)},children:"7"}),C.jsx("img",{src:J2,alt:"red image",style:{height:"100%",margin:"auto"}})]}),C.jsx(Wp,{onChange:()=>{n(!t);const r=new $.Message({data:!t});Vp.publish(r)}}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"86%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"n"});ke.publish(i)},children:"NEXT"}),C.jsx(_o,{variant:"outlined",style:{top:"88%",left:"2%",width:"160px"},onClick:()=>{new Audio(ko).play();const i=new $.Message({data:"b"});ke.publish(i)},children:"BACK"}),C.jsx(Se,{variant:"contained",style:{top:"65%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c"});ke.publish(i)},children:"CATCH"}),C.jsx(Se,{variant:"contained",style:{top:"75%",left:"86%",width:"160px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r"});ke.publish(i)},children:"RELEASE"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c0"});ke.publish(i)},children:"C0"}),C.jsx(Se,{variant:"contained",color:"success",style:{top:"55%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r0"});ke.publish(i)},children:"R0"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c1"});ke.publish(i)},children:"C1"}),C.jsx(Se,{variant:"contained",style:{top:"46%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r1"});ke.publish(i)},children:"R1"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"c2"});ke.publish(i)},children:"C2"}),C.jsx(Se,{variant:"contained",style:{top:"37%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"r2"});ke.publish(i)},children:"R2"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"86%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:"i"});ke.publish(i)},children:"INIT"}),C.jsx(Se,{variant:"contained",style:{top:"25%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const i=new $.Message({data:!0});Hp.publish(i)},children:"STP"}),C.jsx(Se,{variant:"contained",color:"error",style:{top:"5%",left:"86%",width:"160px",height:"160px",borderRadius:"100%"},onClick:()=>{const r=new $.Message({data:!0});Gp.publish(r)},children:"STOP"})]})}const e_=Ne(qc)(({theme:e})=>({color:"#FFFFFF",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"transform 0.2s ease-in-out",backgroundColor:"rgba(255,255, 255, 0.1)",width:"95%",height:"95vh",position:"absolute",borderRadius:"40px"})),t_=Ne.div(({theme:e})=>({position:"absolute",top:"20px",left:"40px",fontSize:"40pt",zIndex:1})),n_=Ne.div(({theme:e})=>({position:"absolute",width:"auto",top:"65%",left:"5%"})),r_=Ne(f0)(({theme:e})=>({padding:8,transform:"scale(2)",position:"absolute",zIndex:1,top:"18%",left:"4%",opacity:1,"& .Mui-checked":{"& + .MuiSwitch-track":{borderRadius:22/2,backgroundColor:"#8682ff","&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%) scale(4)",width:16,height:16}},"&:before":{},"&:after":{}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2},"& .MuiSwitch-track":{borderRadius:22/2,backgroundColor:"#ff0000","&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%) scale(4)",width:16,height:16}}})),i_=Ne(Yn)(({theme:e})=>({position:"absolute",fontSize:"30px"})),d0=new $.Ros({url:"ws://moyuboo.local:9090"});function o_(){const[e,t]=T.useState(0),[n,r]=T.useState(!1);T.useEffect(()=>{t(180)},[]);const i=()=>{if(!n){r(!0);const o=setInterval(()=>{t(s=>(s===0&&(r(!0),clearInterval(o),t(180)),s-1))},1e3);return()=>clearInterval(o)}};return C.jsxs(t_,{onClick:i,children:[("0"+Math.floor(e/60)).slice(-2),":",("0"+Math.floor(e%60)).slice(-2)]})}const s_=new $.Topic({ros:d0,name:"/connect",messageType:"std_msgs/Bool"});function l_(){const[e,t]=T.useState(0);return T.useEffect(()=>{new $.Topic({ros:d0,name:"/state_data",messageType:"std_msgs/Int32MultiArray"}).subscribe(r=>{t(r.data[0])})},[]),C.jsxs(n_,{children:[C.jsx("p",{style:{fontStyle:"italic",fontSize:"25pt",margin:"5%",textAlign:"right",right:"30px"},children:"State"}),C.jsx("p",{style:{fontSize:"55pt",margin:"5%",textAlign:"right",right:"0"},children:e})]})}function a_(){T.useState("");const[e,t]=T.useState(!1);T.useEffect(()=>{},[]);const[n,r]=T.useState(!0),i=()=>{r(!n)};return C.jsx(c0,{children:C.jsxs(e_,{children:[C.jsx(o_,{}),C.jsx(r_,{onChange:i}),C.jsx(l_,{}),C.jsx(i_,{variant:"contained",color:"success",style:{top:"28%",left:"3%",width:"160px",zIndex:1},onClick:()=>{const o=new $.Message({data:!0});s_.publish(o),t(!0)},children:"TURN ON"}),C.jsx(Z2,{color:!n})]})})}const u_=Ne(Yn)(({theme:e})=>({position:"relative",fontSize:"30px"})),c_=new $.Ros({url:"ws://moyuboo.local:9090"}),f_=new $.Topic({ros:c_,name:"/emergency",messageType:"std_msgs/Bool"});function d_(){return C.jsx("div",{style:{width:"100%",height:"100vh",position:"relative"},children:C.jsx("div",{style:{margin:"auto",width:"320px",height:"320px",marginTop:"200px"},children:C.jsx(u_,{variant:"contained",color:"error",style:{margin:"auto",width:"320px",height:"320px",borderRadius:"100%",fontSize:"80px"},onClick:()=>{new Audio(re).play();const t=new $.Message({data:!0});f_.publish(t)},children:"STOP"})})})}const p_=Ne(qc)(({theme:e})=>({color:"#FFFFFF",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"transform 0.2s ease-in-out",backgroundColor:"rgba(255,255, 255, 0.1)",width:"95%",height:"95vh",position:"absolute",borderRadius:"40px",fontFamily:"'Oxanium','Noto Sans JP'"})),h_=Ne.div(({theme:e})=>({position:"absolute",top:"20px",left:"40px",fontSize:"40pt",zIndex:1,fontFamily:"Oxanium"})),m_=Ne.div(({theme:e})=>({position:"absolute",width:"auto",top:"65%",left:"5%"})),Co=Ne(Yn)(({theme:e})=>({position:"absolute",fontSize:"30px"})),Ur=new $.Ros({url:"ws://moyuboo.local:9090"}),v_=new $.Topic({ros:Ur,name:"/connect",messageType:"std_msgs/Bool"}),g_=new $.Topic({ros:Ur,name:"/emergency",messageType:"std_msgs/Bool"}),y_=new $.Topic({ros:Ur,name:"/cmd_state",messageType:"std_msgs/String"}),w_=new $.Topic({ros:Ur,name:"/auto_start",messageType:"std_msgs/Bool"});function x_(){const[e,t]=T.useState(0);return T.useEffect(()=>{new $.Topic({ros:Ur,name:"/state_data",messageType:"std_msgs/Int32MultiArray"}).subscribe(r=>{t(r.data[0])})},[]),C.jsxs(m_,{children:[C.jsx("p",{style:{fontStyle:"italic",fontSize:"25pt",margin:"5%",textAlign:"right",right:"30px"},children:"State"}),C.jsx("p",{style:{fontSize:"55pt",margin:"5%",textAlign:"right",right:"0"},children:e})]})}function S_(){T.useState("");const[e,t]=T.useState(!1),n=["待機中","運転中"],[r,i]=T.useState(0),[o,s]=T.useState(!1);T.useEffect(()=>{i(180)},[]);let l;const a=()=>{if(!o)return s(!0),l=setInterval(()=>{i(u=>(u===0&&(s(!0),clearInterval(l),i(180)),u-1))},1e3),()=>clearInterval(l)};return T.useEffect(()=>{},[]),T.useState(!0),T.useEffect(()=>{new $.Topic({ros:Ur,name:"/auto_finish",messageType:"std_msgs/Bool"}).subscribe(c=>{t(c.data),i(0)})},[]),C.jsx(c0,{children:C.jsxs(p_,{children:[C.jsxs(h_,{onClick:a,children:[("0"+Math.floor(r/60)).slice(-2),":",("0"+Math.floor(r%60)).slice(-2)]}),C.jsx(x_,{}),C.jsx(Co,{variant:"contained",color:"success",style:{top:"25%",left:"86%",width:"70px"},onClick:()=>{const u=new $.Message({data:!0});v_.publish(u)},children:"ON"}),C.jsx(Co,{variant:"contained",color:"error",style:{top:"5%",left:"86%",width:"160px",height:"160px",borderRadius:"100%"},onClick:()=>{const u=new $.Message({data:!0});g_.publish(u),i(0)},children:"STOP"}),C.jsx(Co,{variant:"contained",style:{top:"25%",left:"92.8%",width:"70px"},onClick:()=>{new Audio(Ee).play();const c=new $.Message({data:"i"});y_.publish(c)},children:"INIT"}),C.jsx(Co,{variant:"contained",color:"success",style:{top:"60%",left:"41%",width:"240px",height:"120px",zIndex:1,fontSize:60},onClick:()=>{const u=new $.Message({data:!0});w_.publish(u),t(!0),a()},disabled:e,children:"START"}),C.jsx("div",{style:{position:"absolute",top:"30%",fontSize:120},children:n[Number(e)]})]})})}const k_=new $.Ros({url:"ws://moyuboo.local:9090"});new $.Topic({ros:k_,name:"/hello",messageType:"std_msgs/String"});const Xc=i0({palette:{mode:"dark"},typography:{fontFamily:["Oxanium","sans-serif"].join(",")}});function __(){return T.useState(""),C.jsx("div",{children:C.jsxs(E1,{children:[C.jsx(zo,{path:"/",element:C.jsx(C_,{})}),C.jsx(zo,{path:"/em",element:C.jsx(b_,{})}),C.jsx(zo,{path:"/auto",element:C.jsx(E_,{})})]})})}function C_(){return C.jsx("div",{children:C.jsxs(Kc,{theme:Xc,children:[C.jsx(a_,{}),C.jsx(Pk,{}),C.jsx(s0,{})]})})}function b_(){return C.jsx("div",{children:C.jsx(Kc,{theme:Xc,children:C.jsx(d_,{})})})}function E_(){return C.jsx("div",{children:C.jsxs(Kc,{theme:Xc,children:[C.jsx(S_,{}),C.jsx(s0,{})]})})}Ra.createRoot(document.getElementById("root")).render(C.jsx(ln.StrictMode,{children:C.jsx(R1,{basename:"/hi_gui_app/",children:C.jsx(__,{})})}));
diff --git a/dist/index.html b/dist/index.html
index 75e4c1d..7b0bd8f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -2,15 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/icon.png" />
+    <link rel="icon" type="image/svg+xml" href="/hi_gui_app/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HiGUI</title>
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="HiGUI">
-    <link rel="apple-touch-icon" href="/icon.png">
-    <script type="module" crossorigin src="/assets/index-579c7cee.js"></script>
-    <link rel="stylesheet" href="/assets/index-502e27ba.css">
+    <link rel="apple-touch-icon" href="/hi_gui_app/icon.png">
+    <script type="module" crossorigin src="/hi_gui_app/assets/index-f879ff1d.js"></script>
+    <link rel="stylesheet" href="/hi_gui_app/assets/index-5a1fcabc.css">
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/main.tsx b/src/main.tsx
index f2ed6cb..2ba92ce 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,7 +6,7 @@ import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename='/hi_gui_app/'>
       <App />
     </BrowserRouter>
   </React.StrictMode>