dune-weaver/templates/table_control.html

{% extends "base.html" %}
{% block title %}Table Control - Kinetic Sand Table{% endblock %}

{% block additional_styles %}
/* Dark mode styles for table control page */
.dark .bg-white {
  background-color: #262626;
}
.dark .text-slate-900 {
  color: #e5e5e5;
}
.dark .text-slate-800 {
  color: #e5e5e5;
}
.dark .text-slate-700 {
  color: #d1d5db;
}
.dark .border-slate-200 {
  border-color: #404040;
}
.dark .border-slate-300 {
  border-color: #404040;
}
.dark .bg-slate-50 {
  background-color: #262626;
}
.dark .hover\:bg-slate-50:hover {
  background-color: #404040;
}
.dark .form-input {
  background-color: #262626;
  border-color: #404040;
  color: #e5e5e5;
}
.dark .form-input::placeholder {
  color: #9ca3af;
}
.dark .form-input:focus {
  border-color: #0c7ff2;
  ring-color: #0c7ff2;
}
.dark .focus\:ring-sky-500:focus {
  ring-color: #0c7ff2;
}
.dark .focus\:border-sky-500:focus {
  border-color: #0c7ff2;
}
.dark .focus\:ring-blue-400:focus {
  ring-color: #0c7ff2;
}
.dark .focus\:ring-red-400:focus {
  ring-color: #ef4444;
}
.dark .focus\:ring-slate-400:focus {
  ring-color: #525252;
}
.dark .focus\:ring-offset-2 {
  ring-offset-color: #262626;
}
{% endblock %}

{% block content %}
<div class="layout-content-container flex flex-col w-full max-w-4xl gap-8 pt-2 pb-[75px]">
  <div class="flex flex-wrap justify-between items-center gap-4 p-4 bg-white rounded-xl shadow-sm mt-2 sm:mt-8">
    <h1 class="text-slate-900 tracking-tight text-2xl sm:text-3xl font-bold leading-tight">
      Table Control
    </h1>
  </div>

  <section class="bg-white p-6 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold text-slate-800 mb-5 border-b border-slate-200 pb-3">
      Movement Controls
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <button
        id="homeButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-blue-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">home</span>
        Home
      </button>
      <button
        id="stopButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-red-500 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-red-600 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">stop_circle</span>
        Stop
      </button>
      <button
        id="centerButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-slate-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-slate-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">filter_center_focus</span>
        Move to Center
      </button>
      <button
        id="perimeterButton"
        class="flex items-center justify-center gap-2 rounded-lg bg-slate-600 px-4 py-3 text-sm font-semibold text-white shadow-md hover:bg-slate-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2"
      >
        <span class="material-icons-outlined text-lg">all_out</span>
        Move to Perimeter
      </button>
    </div>
    <div class="flex items-center justify-center mt-4">
      <button
        id="orientationHelpButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">help_outline</span>
        How to Align Pattern Orientation
      </button>
    </div>
  </section>

  <section class="bg-white p-6 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold text-slate-800 mb-5 border-b border-slate-200 pb-3">
      Speed Control
    </h2>
    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
      <div class="flex items-center gap-2 bg-slate-50 rounded-lg px-3 py-2 w-full sm:w-auto">
        <span class="text-sm font-medium text-slate-700">Current:</span>
        <span id="currentSpeedDisplay" class="text-sm font-semibold text-slate-900">-- mm/s</span>
      </div>
      
      <div class="flex flex-col sm:flex-row gap-3 w-full sm:flex-1">
        <div class="flex-1">
          <input
            type="number"
            id="speedInput"
            class="form-input flex w-full min-w-0 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-3 text-sm font-normal leading-normal transition-colors"
            placeholder="Enter new speed..."
            min="1"
            step="1"
          />
        </div>
        <button
          id="setSpeedButton"
          class="flex items-center justify-center gap-2 rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-semibold text-white shadow-md hover:bg-sky-700 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-offset-2 h-10 w-full sm:w-auto whitespace-nowrap"
        >
          <span class="material-icons-outlined text-lg">speed</span>
          Set Speed
        </button>
      </div>
    </div>
  </section>

  <section class="bg-white p-6 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold text-slate-800 mb-5 border-b border-slate-200 pb-3">
      Clear Patterns
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <button
        id="clearCenterButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">center_focus_strong</span>
        Clear from Center
      </button>
      <button
        id="clearPerimeterButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">all_out</span>
        Clear from Perimeter
      </button>
      <button
        id="clearSidewaysButton"
        class="flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
      >
        <span class="material-icons-outlined text-lg">swap_horiz</span>
        Clear Sideway
      </button>
    </div>
  </section>
</div>

<!-- Pattern Orientation Help Modal -->
<div id="orientationHelpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md">
    <div class="p-6">
      <div class="text-center mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Pattern Orientation Alignment</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm">
          Follow these steps to align your patterns with their previews:
        </p>
      </div>
      
      <ol class="text-gray-700 dark:text-gray-300 text-sm space-y-3 mb-6">
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">1.</span>
          <span><strong>Home the table</strong> then select move to perimeter. Look at your pattern preview and decide where the "bottom" of the pattern should be.</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">2.</span>
          <span><strong>Manually</strong> move the radial arm or <strong>use the rotation buttons below</strong> to point 90° to the right of where you want the pattern bottom to be.</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">3.</span>
          <span>Click the <strong>"Home"</strong> button to establish this as the reference position.</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="font-semibold text-blue-600 dark:text-blue-400 min-w-[20px]">4.</span>
          <span>All patterns will now be oriented according to their previews!</span>
        </li>
      </ol>
      
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4 mb-4">
        <p class="text-amber-600 dark:text-amber-400 text-sm">
          <strong>Important:</strong> Only perform this alignment when you want to change the orientation reference. Once set, this becomes your new "home" position.
        </p>
      </div>
      
      <!-- Fine Adjustment Controls -->
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4 mb-4">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-3 text-center">
          <strong>Fine Adjustment:</strong> Use these buttons to rotate the ball precisely
        </p>
        <div class="flex justify-center gap-3">
          <button
            id="rotateCCW"
            class="flex items-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors"
            title="Rotate Counter-Clockwise 10°"
          >
            <span class="material-icons text-lg">rotate_left</span>
            <span class="text-sm">CCW 10°</span>
          </button>
          <button
            id="rotateCW"
            class="flex items-center gap-2 px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors"
            title="Rotate Clockwise 10°"
          >
            <span class="text-sm">CW 10°</span>
            <span class="material-icons text-lg">rotate_right</span>
          </button>
        </div>
        <p class="text-gray-500 dark:text-gray-400 text-xs text-center mt-2">
          Each click rotates 10 degrees for fine adjustment
        </p>
      </div>
      
      <div class="flex justify-center">
        <button
          id="closeOrientationHelpModal"
          class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
        >
          Got it
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/table_control.js"></script>
<script>
// Pattern orientation help modal functionality
document.addEventListener('DOMContentLoaded', function() {
  const helpButton = document.getElementById('orientationHelpButton');
  const modal = document.getElementById('orientationHelpModal');
  const closeButton = document.getElementById('closeOrientationHelpModal');
  const rotateCWButton = document.getElementById('rotateCW');
  const rotateCCWButton = document.getElementById('rotateCCW');
  
  // Track current position (theta, rho)
  let currentTheta = 0;
  let currentRho = 1; // Always at perimeter for rotation adjustments
  
  helpButton.addEventListener('click', () => {
    modal.classList.remove('hidden');
  });
  
  closeButton.addEventListener('click', () => {
    modal.classList.add('hidden');
  });
  
  // Close modal when clicking outside
  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.classList.add('hidden');
    }
  });
  
  // Rotation button handlers
  async function rotateByDegrees(degrees) {
    try {
      // Convert degrees to radians
      const radians = degrees * (Math.PI / 180);
      
      // Calculate new theta position
      const newTheta = currentTheta + radians;
      
      // Send coordinate to move to new position (always at perimeter, rho = 1)
      const response = await fetch('/send_coordinate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          theta: newTheta,
          rho: 1
        })
      });
      
      if (response.ok) {
        // Update tracked position
        currentTheta = newTheta;
        console.log(`Rotated ${degrees}°. New theta: ${(currentTheta * 180 / Math.PI).toFixed(1)}°`);
      } else {
        throw new Error('Failed to send coordinate');
      }
    } catch (error) {
      console.error('Error rotating:', error);
      alert('Failed to rotate. Please check connection.');
    }
  }
  
  // Clockwise rotation (positive angle)
  rotateCWButton.addEventListener('click', async () => {
    await rotateByDegrees(10);
  });
  
  // Counter-clockwise rotation (negative angle)  
  rotateCCWButton.addEventListener('click', async () => {
    await rotateByDegrees(-10);
  });
  
  // Try to get current position from WebSocket status
  // This assumes you have a WebSocket connection for status updates
  if (typeof ws !== 'undefined' && ws) {
    const originalOnMessage = ws.onmessage;
    ws.onmessage = function(event) {
      try {
        const data = JSON.parse(event.data);
        if (data.type === 'status_update' && data.data) {
          // Update current theta position if available in status
          if (data.data.current_theta !== undefined) {
            currentTheta = data.data.current_theta;
          }
          // Keep rho at 1 for rotation adjustments
          currentRho = 1;
        }
      } catch (error) {
        // Ignore parsing errors
      }
      // Call original handler if it exists
      if (originalOnMessage) {
        originalOnMessage.call(ws, event);
      }
    };
  }
});
</script>
{% endblock %}