تقنيات الويب في الصناعة: لوحات المراقبة الحديثة

لماذا تقنيات الويب في المصنع؟

قبل سنوات، كانت لوحات التحكم الصناعية تعمل بتطبيقات مكتبية ثقيلة — تحتاج تثبيتاً على كل جهاز، ولا تعمل إلا على Windows، وتحديثها كابوس. اليوم، لوحات المراقبة المبنية على الويب غيّرت كل شيء: تفتحها من أي متصفح، على أي جهاز، من أي مكان.

تخيّل أن مدير المصنع يفتح هاتفه ويرى حالة كل الماكينات لحظياً — درجات الحرارة، الإنذارات، كفاءة الإنتاج. هذا بالضبط ما تبنيه بتقنيات الويب.

HTML: هيكل الصفحة

HTML (HyperText Markup Language) هو الهيكل العظمي لأي صفحة ويب. يُحدد ماذا يوجد في الصفحة: عناوين، جداول، أزرار، حاويات بيانات.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>لوحة مراقبة المصنع</title>
  <link rel="stylesheet" href="dashboard.css">
</head>
<body>
  <header>
    <h1>لوحة مراقبة خط الإنتاج 3</h1>
    <span id="clock">--:--:--</span>
  </header>

  <main>
    <!-- بطاقات حالة الماكينات -->
    <section class="machine-cards">
      <div class="card" id="machine-42">
        <h2>CNC Lathe #42</h2>
        <div class="status running">يعمل</div>
        <div class="readings">
          <div class="reading">
            <span class="label">الحرارة</span>
            <span class="value" id="temp-42">--</span>
            <span class="unit">°C</span>
          </div>
          <div class="reading">
            <span class="label">الاهتزاز</span>
            <span class="value" id="vib-42">--</span>
            <span class="unit">mm/s</span>
          </div>
          <div class="reading">
            <span class="label">الطاقة</span>
            <span class="value" id="power-42">--</span>
            <span class="unit">kW</span>
          </div>
        </div>
      </div>
    </section>

    <!-- جدول الإنذارات -->
    <section class="alarms">
      <h2>الإنذارات النشطة</h2>
      <table>
        <thead>
          <tr>
            <th>الوقت</th>
            <th>الماكينة</th>
            <th>النوع</th>
            <th>الرسالة</th>
          </tr>
        </thead>
        <tbody id="alarm-table">
          <!-- تُملأ تلقائياً بـ JavaScript -->
        </tbody>
      </table>
    </section>
  </main>

  <script src="dashboard.js"></script>
</body>
</html>

عناصر HTML المهمة للوحات التحكم

العنصر	الاستخدام
`<div>`	حاوية عامة لتجميع العناصر
`<span>`	نص داخل سطر (قيمة حساس)
`<table>`	عرض بيانات مجدولة (إنذارات، سجلات)
`<canvas>`	رسم بياني مخصص (Charts)
`<progress>`	شريط تقدم (نسبة إنتاج)
`<meter>`	مقياس (مستوى خزان)

CSS: المظهر والتنسيق

CSS (Cascading Style Sheets) يتحكم بشكل الصفحة: الألوان، الأحجام، التخطيط، الحركات.

/* dashboard.css */

/* متغيرات الألوان - سهلة التعديل */
:root {
  --bg-primary: #0f172a;
  --bg-card: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --status-running: #22c55e;
  --status-stopped: #ef4444;
  --status-warning: #f59e0b;
  --accent: #3b82f6;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  direction: rtl;
}

/* شبكة بطاقات الماكينات */
.machine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* حالة الماكينة */
.status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.status.running { background: var(--status-running); color: #000; }
.status.stopped { background: var(--status-stopped); color: #fff; }
.status.warning { background: var(--status-warning); color: #000; }

/* قراءات الحساسات */
.readings {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.reading .value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}

.reading .unit {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* تنبيه قيمة عالية */
.reading .value.high {
  color: var(--status-stopped);
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

التصميم المتجاوب: كل الشاشات

المهندس يراقب من شاشة كبيرة في غرفة التحكم، والمدير من هاتفه. التصميم المتجاوب (Responsive Design) يضمن أن لوحة التحكم تعمل على كل الأحجام.

/* شاشات صغيرة (هواتف) */
@media (max-width: 768px) {
  .machine-cards {
    grid-template-columns: 1fr;
  }

  .readings {
    flex-direction: column;
    gap: 0.5rem;
  }

  .reading .value {
    font-size: 1.5rem;
  }
}

/* شاشات متوسطة (تابلت) */
@media (min-width: 769px) and (max-width: 1024px) {
  .machine-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* شاشات كبيرة (شاشة غرفة التحكم) */
@media (min-width: 1025px) {
  .machine-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

JavaScript: الحياة والتفاعل

JavaScript يُحوّل الصفحة الثابتة إلى لوحة تحكم حية — يجلب البيانات، يُحدّث الأرقام، يُطلق الإنذارات.

تحديث البيانات عبر REST API

// جلب بيانات الماكينات كل 5 ثوانٍ
async function fetchMachineData() {
  try {
    const response = await fetch('/api/machines', {
      headers: { 'X-API-Key': 'sk_prod_abc123' }
    });
    const machines = await response.json();

    machines.forEach(machine => {
      updateCard(machine);
    });
  } catch (error) {
    console.error('فشل جلب البيانات:', error);
    showConnectionError();
  }
}

function updateCard(machine) {
  const tempEl = document.getElementById(`temp-${machine.id}`);
  const vibEl = document.getElementById(`vib-${machine.id}`);
  const powerEl = document.getElementById(`power-${machine.id}`);

  tempEl.textContent = machine.temperature_c.toFixed(1);
  vibEl.textContent = machine.vibration_mm_s.toFixed(1);
  powerEl.textContent = machine.power_kw.toFixed(1);

  // تمييز القيم العالية
  tempEl.classList.toggle('high', machine.temperature_c > 80);
  vibEl.classList.toggle('high', machine.vibration_mm_s > 8);
}

// تحديث كل 5 ثوانٍ
setInterval(fetchMachineData, 5000);
fetchMachineData(); // تحديث فوري عند التحميل

بيانات لحظية عبر WebSocket

// اتصال WebSocket لبيانات حية
const ws = new WebSocket('ws://factory-server:8080/live');

ws.onopen = () => {
  document.getElementById('connection-status').textContent = 'متصل';
  document.getElementById('connection-status').classList.add('connected');
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);

  switch (data.type) {
    case 'sensor_update':
      updateCard(data.payload);
      break;

    case 'alarm':
      addAlarmRow(data.payload);
      playAlarmSound();
      showNotification(data.payload.message);
      break;

    case 'machine_status':
      updateMachineStatus(data.payload.id, data.payload.status);
      break;
  }
};

ws.onclose = () => {
  document.getElementById('connection-status').textContent = 'غير متصل';
  // إعادة الاتصال بعد 3 ثوانٍ
  setTimeout(() => {
    location.reload();
  }, 3000);
};

function addAlarmRow(alarm) {
  const table = document.getElementById('alarm-table');
  const row = table.insertRow(0);
  row.innerHTML = `
    <td>${new Date(alarm.timestamp).toLocaleTimeString('ar-SA')}</td>
    <td>${alarm.machine_name}</td>
    <td class="severity-${alarm.severity}">${alarm.severity}</td>
    <td>${alarm.message}</td>
  `;
}

Canvas: رسوم بيانية حية

HTML <canvas> يسمح لك برسم رسوم بيانية مخصصة بدون مكتبات خارجية:

// رسم بياني بسيط لتاريخ الحرارة
const canvas = document.getElementById('temp-chart');
const ctx = canvas.getContext('2d');
const readings = []; // مصفوفة القراءات
const MAX_POINTS = 60; // آخر 60 قراءة

function addReading(temp) {
  readings.push(temp);
  if (readings.length > MAX_POINTS) readings.shift();
  drawChart();
}

function drawChart() {
  const w = canvas.width;
  const h = canvas.height;
  ctx.clearRect(0, 0, w, h);

  // خط الحد الأقصى
  const maxLine = h - (85 / 100) * h;
  ctx.strokeStyle = '#ef4444';
  ctx.setLineDash([5, 5]);
  ctx.beginPath();
  ctx.moveTo(0, maxLine);
  ctx.lineTo(w, maxLine);
  ctx.stroke();
  ctx.setLineDash([]);

  // رسم القراءات
  ctx.strokeStyle = '#3b82f6';
  ctx.lineWidth = 2;
  ctx.beginPath();
  readings.forEach((temp, i) => {
    const x = (i / MAX_POINTS) * w;
    const y = h - (temp / 100) * h;
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  });
  ctx.stroke();
}

أطر العمل الشائعة للوحات التحكم

لمشاريع أكبر، استخدم أطر عمل جاهزة بدلاً من البناء من الصفر:

الأداة	الاستخدام	المميزات
Chart.js	رسوم بيانية	سهل، تفاعلي، متجاوب
D3.js	تصورات متقدمة	مرن جداً، منحنى تعلم عالٍ
Grafana	لوحات مراقبة جاهزة	يربط بأي قاعدة بيانات
HTMX	تفاعلية بدون JS معقد	خفيف، يعمل مع أي خادم
Tailwind CSS	تنسيق سريع	أصناف جاهزة، متجاوب

خلاصة

التقنية	الدور في لوحة المراقبة
HTML	هيكل الصفحة — بطاقات، جداول، عناصر
CSS	المظهر — ألوان، تخطيط، حركات
JavaScript	المنطق — جلب بيانات، تحديث، إنذارات
WebSocket	اتصال حي — بيانات لحظية بدون تأخير
Canvas	رسوم بيانية — تاريخ القراءات، منحنيات
Responsive	توافق — يعمل على شاشة التحكم والهاتف

تقنيات الويب حوّلت المراقبة الصناعية من تطبيقات مغلقة ومكلفة إلى لوحات تحكم مرنة يمكن لأي مهندس بناؤها. المتصفح أصبح هو لوحة التحكم الجديدة للمصنع الذكي.