Frontend test

backend/main.py

@@ -20,10 +20,8 @@ GPIO.setup(EN, GPIO.OUT)
 
 GPIO.output(EN, GPIO.LOW)
 
-motor_running = False
 motor_thread = None
 
-
 def step_motor(steps, direction, delay=0.001):
     GPIO.output(DIR, direction)
 
@@ -33,22 +31,13 @@ def step_motor(steps, direction, delay=0.001):
         GPIO.output(STEP, GPIO.LOW)
         time.sleep(delay)
 
+def motor_step():
+    GPIO.output(EN, GPIO.LOW)  # enable driver
 
-def motor_loop():
+    print("Motor running...")
-    global motor_running
+    step_motor(400, GPIO.HIGH, 0.001)
 
-    while True:
+    GPIO.output(EN, GPIO.HIGH)  # disable driver
-        if not motor_running:
-            time.sleep(0.1)
-            print("Waiting for motor to start...")
-            continue
-
-        print("Motor running...")
-        step_motor(200, GPIO.HIGH, 0.001)
-        time.sleep(1)
-
-        step_motor(200, GPIO.LOW, 0.001)
-        time.sleep(1)
 
 
 # -------------------------
@@ -65,10 +54,6 @@ COMMANDS = {
 # API ENDPOINTS
 # -------------------------
 
-motor_thread = threading.Thread(target=motor_loop, daemon=True)
-motor_thread.start()
-print("Motor thread initialized")
-
 @app.post("/run")
 def run_task(task: str, token: str):
     if token != "MY_SECRET_TOKEN":
@@ -84,7 +69,7 @@ def run_task(task: str, token: str):
         return {"error": e.output}
 
 
-@app.post("/motor/start")
+@app.post("/motor/step")
 def start_motor(token: str):
     global motor_running, motor_thread
 
@@ -94,8 +79,9 @@ def start_motor(token: str):
     if motor_running:
         return {"status": "already running"}
 
-    motor_running = True
+
-    GPIO.output(EN, GPIO.LOW)  # disable driver
+    motor_thread = threading.Thread(target=motor_step, daemon=True)
+    motor_thread.start()
 
     return {"status": "motor started"}
 

quibot-web/app/app.vue

@@ -1,3 +1,116 @@
 <template>
-  <h1>Test</h1>
+  <main class="panel">
-</template>
+    <h1>Quibot Motor Control</h1>
+
+    <div class="actions">
+      <button :disabled="pending" @click="callMotor('step')">
+        {{ pending && action === 'step' ? 'Starting...' : 'Step' }}
+      </button>
+
+      <button :disabled="pending" class="stop" @click="callMotor('stop')">
+        {{ pending && action === 'stop' ? 'Stopping...' : 'Stop' }}
+      </button>
+    </div>
+
+    <p v-if="message" class="message">
+      {{ message }}
+    </p>
+
+    <p v-if="error" class="error">
+      {{ error }}
+    </p>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type MotorAction = 'step' | 'stop'
+
+const pending = ref(false)
+const action = ref<MotorAction | null>(null)
+const message = ref('')
+const error = ref('')
+
+async function callMotor(nextAction: MotorAction) {
+  pending.value = true
+  action.value = nextAction
+  message.value = ''
+  error.value = ''
+
+  try {
+    const response = await $fetch<{ status?: string }>(`/api/motor/${nextAction}`, {
+      method: 'POST',
+    })
+
+    message.value = response.status || `${nextAction} request sent`
+  } catch (err: any) {
+    error.value = err?.data?.statusMessage || err?.data?.message || err?.message || 'Request failed'
+  } finally {
+    pending.value = false
+    action.value = null
+  }
+}
+</script>
+
+<style scoped>
+:global(body) {
+  margin: 0;
+  font-family: Helvetica, Arial, sans-serif;
+  background: #f3f4f6;
+}
+
+.panel {
+  min-height: 100vh;
+  display: grid;
+  place-content: center;
+  gap: 1rem;
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  margin: 0;
+  color: #111827;
+}
+
+.actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+button {
+  border: 0;
+  border-radius: 0.75rem;
+  padding: 0.9rem 1.4rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #fff;
+  background: #2563eb;
+  cursor: pointer;
+}
+
+button.stop {
+  background: #dc2626;
+}
+
+button:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+
+.message,
+.error {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.message {
+  color: #166534;
+}
+
+.error {
+  color: #b91c1c;
+}
+</style>

quibot-web/nuxt.config.ts

@@ -2,6 +2,10 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
+  runtimeConfig: {
+    quibotBaseUrl: process.env.QUIBOT_BASE_URL || 'http://quibot:8000',
+    quibotToken: process.env.QUIBOT_TOKEN || 'MY_SECRET_TOKEN',
+  },
   vite: {
     optimizeDeps: {
       include: [

quibot-web/server/api/motor/step.post.ts

@@ -0,0 +1,10 @@
+export default defineEventHandler(async () => {
+  const config = useRuntimeConfig()
+
+  return await $fetch(`${config.quibotBaseUrl}/motor/step`, {
+    method: 'POST',
+    query: {
+      token: config.quibotToken,
+    },
+  })
+})

quibot-web/server/api/motor/stop.post.ts

@@ -0,0 +1,10 @@
+export default defineEventHandler(async () => {
+  const config = useRuntimeConfig()
+
+  return await $fetch(`${config.quibotBaseUrl}/motor/stop`, {
+    method: 'POST',
+    query: {
+      token: config.quibotToken,
+    },
+  })
+})