add text to hpgl tab

webui/static/app.js

@@ -22,8 +22,17 @@
     centralize: document.getElementById('btnCentralize'),
     scaleToBounds: document.getElementById('btnScaleToBounds'),
     print: document.getElementById('btnPrint'),
-    checkPlotter: document.getElementById('btnCheckPlotter')
+    checkPlotter: document.getElementById('btnCheckPlotter'),
+    generateHpgl: document.getElementById('btnGenerateHpgl')
   };
+  const tabFile = document.getElementById('tabFile');
+  const tabText = document.getElementById('tabText');
+  const panelFile = document.getElementById('panelFile');
+  const panelText = document.getElementById('panelText');
+  const textInput = document.getElementById('textInput');
+  const fontSelect = document.getElementById('fontSelect');
+  const textSize = document.getElementById('textSize');
+  const textMessage = document.getElementById('textMessage');
 
   function setMessage(el, text, type) {
     el.textContent = text || '';
@@ -84,11 +93,13 @@
       });
   }
 
+  var transformPrintButtons = ['flip', 'rotate90', 'rotate180', 'scaleUp', 'scaleDown', 'centralize', 'scaleToBounds', 'print'];
+
   function setLoaded(loaded) {
     if (loaded) {
       preview.classList.add('loaded');
       previewPlaceholder.classList.add('hidden');
-      Object.keys(buttons).forEach(function (k) {
+      transformPrintButtons.forEach(function (k) {
         var b = buttons[k];
         if (b) b.disabled = false;
       });
@@ -96,7 +107,7 @@
       preview.classList.remove('loaded');
       previewPlaceholder.classList.remove('hidden');
       preview.src = '';
-      Object.keys(buttons).forEach(function (k) {
+      transformPrintButtons.forEach(function (k) {
         var b = buttons[k];
         if (b) b.disabled = true;
       });
@@ -247,6 +258,71 @@
     previewPlaceholder.classList.add('hidden');
   });
 
+  function showTab(name) {
+    var isFile = (name === 'file');
+    tabFile.classList.toggle('active', isFile);
+    tabText.classList.toggle('active', !isFile);
+    if (panelFile) panelFile.classList.toggle('hidden', !isFile);
+    if (panelText) panelText.classList.toggle('hidden', isFile);
+    if (!isFile && fontSelect && fontSelect.options.length <= 1) loadFonts();
+  }
+
+  function loadFonts() {
+    if (!fontSelect) return;
+    fetch('/api/fonts')
+      .then(function (r) { return r.json(); })
+      .then(function (d) {
+        var opts = fontSelect.querySelectorAll('option');
+        for (var i = opts.length - 1; i >= 1; i--) opts[i].remove();
+        (d.fonts || []).forEach(function (f) {
+          var o = document.createElement('option');
+          o.value = f;
+          o.textContent = f;
+          fontSelect.appendChild(o);
+        });
+      })
+      .catch(function () {});
+  }
+
+  if (tabFile) tabFile.addEventListener('click', function () { showTab('file'); });
+  if (tabText) tabText.addEventListener('click', function () { showTab('text'); });
+
+  if (buttons.generateHpgl && textInput && fontSelect) {
+    buttons.generateHpgl.addEventListener('click', function () {
+      var text = (textInput.value || '').trim();
+      var font = (fontSelect.value || '').trim();
+      var size = parseInt(textSize.value, 10) || 72;
+      setMessage(textMessage, '');
+      if (!text) {
+        setMessage(textMessage, 'Enter some text.', 'error');
+        return;
+      }
+      if (!font) {
+        setMessage(textMessage, 'Select a font.', 'error');
+        return;
+      }
+      setMessage(textMessage, 'Generating…');
+      fetch('/api/text_to_hpgl', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: text, font: font, size_pt: size })
+      })
+        .then(function (r) {
+          return r.json().then(function (d) {
+            if (!r.ok) throw new Error(d.error || 'Generate failed');
+            return d;
+          });
+        })
+        .then(function () {
+          setMessage(textMessage, 'Generated.', 'success');
+          refreshStatus();
+        })
+        .catch(function (e) {
+          setMessage(textMessage, e.message || 'Generate failed', 'error');
+        });
+    });
+  }
+
   refreshStatus();
   updatePlotterInfo();
   setInterval(updatePlotterInfo, 10000);

webui/static/style.css

@@ -48,6 +48,113 @@ body {
   font-weight: 600;
 }
 
+.header .tabs {
+  display: flex;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.header .tabs .tab {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: var(--surface);
+  border: none;
+  border-right: 1px solid var(--border);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.header .tabs .tab:last-child {
+  border-right: none;
+}
+
+.header .tabs .tab:hover {
+  color: var(--text);
+  background: var(--border);
+}
+
+.header .tabs .tab.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+.tab-panel {
+  display: block;
+}
+
+.tab-panel.hidden {
+  display: none;
+}
+
+.text-section {
+  padding: 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+}
+
+.text-input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  resize: vertical;
+  margin-bottom: 0.5rem;
+}
+
+.font-select {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+.text-size {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+.btn-generate {
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: var(--accent);
+  border: none;
+  border-radius: 6px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.btn-generate:hover {
+  background: var(--accent-hover);
+}
+
 .status {
   display: flex;
   gap: 1rem;