Tao Plugin wordpress nhu jamboard google

 Dưới đây là một phiên bản plugin WordPress đã được cập nhật, tích hợp thêm các chế độ “vẽ tự do”, “vẽ hình chữ nhật” và “vẽ hình tròn”. Khi kích hoạt plugin và chèn shortcode [jamboard_canvas] vào trang, người dùng sẽ thấy các nút điều khiển cho phép chuyển đổi giữa các chế độ vẽ. Bạn có thể thay đổi mã CSS, màu sắc hay logic vẽ theo nhu cầu của mình.

Lưu ý: Nếu bạn có server để nhận ảnh gửi qua AJAX, hãy cập nhật URL ở phần gửi ảnh (YOUR_SERVER_URL).

---

php
<?php
/*
Plugin Name: Jamboard Canvas Plus
Plugin URI: https://example.com/
Description: Plugin tạo bảng vẽ tương tự Google Jamboard với các chế độ vẽ tự do, vẽ hình chữ nhật và vẽ hình tròn. Hỗ trợ chuyển slide, tải ảnh từ thiết bị, xóa canvas, chụp ảnh xem trước và gửi ảnh lên server qua AJAX.
Version: 1.1
Author: Your Name
Author URI: https://example.com/
*/

function jbc_enqueue_scripts() {
    // Nếu cần thêm CSS/JS riêng, enqueue ở đây.
}
add_action('wp_enqueue_scripts', 'jbc_enqueue_scripts');

function jbc_shortcode() {
    ob_start();
    ?>
    <div class="jamboard-container" style="text-align:center; margin:20px;">
      <!-- Các nút điều khiển chế độ vẽ -->
      <div class="controls" style="margin-bottom:10px;">
        <button id="freeDraw">Vẽ Tự Do</button>
        <button id="drawRect">Hình Chữ Nhật</button>
        <button id="drawCircle">Hình Tròn</button>
      </div>
      <!-- Điều khiển slide -->
      <div class="controls" style="margin-bottom:10px;">
        <button id="prevSlide">← Slide Trước</button>
        <span id="slideIndicator">Slide 1/2</span>
        <button id="nextSlide">Slide Sau →</button>
      </div>
      <!-- Công cụ chung -->
      <div class="controls" style="margin-bottom:10px;">
        <input type="color" id="colorPicker" value="#000000">
        <input type="file" id="uploadImage" accept="image/*">
        <button id="clearCanvas">Xóa Canvas</button>
      </div>
      <!-- Các slide (mỗi slide là một canvas) -->
      <div id="canvasContainer">
        <canvas class="jbc-canvas" id="canvas1" width="800" height="600" style="border:1px solid #ccc; margin-bottom:10px;"></canvas>
        <canvas class="jbc-canvas" id="canvas2" width="800" height="600" style="border:1px solid #ccc; margin-bottom:10px; display:none;"></canvas>
      </div>
      <!-- Nút chức năng chụp và gửi -->
      <div class="controls" style="margin-bottom:10px;">
        <button id="captureButton">Chụp Hình Ảnh</button>
        <button id="sendButton">Gửi Lên Server</button>
      </div>
      <!-- Phần xem trước ảnh đã chụp -->
      <div id="preview"></div>
    </div>
    <script>
    (function(){
      // Chuyển đổi giữa các chế độ vẽ: free, rectangle, circle
      let mode = 'free';
      document.getElementById('freeDraw').addEventListener('click', function(){ mode = 'free'; });
      document.getElementById('drawRect').addEventListener('click', function(){ mode = 'rectangle'; });
      document.getElementById('drawCircle').addEventListener('click', function(){ mode = 'circle'; });
      
      // Slide setup
      const totalSlides = 2;
      let currentSlide = 1;
      const canvases = [];
      const contexts = [];
      for (let i = 1; i <= totalSlides; i++) {
        const canvas = document.getElementById('canvas' + i);
        canvases.push(canvas);
        contexts.push(canvas.getContext('2d'));
      }
      let currentContext = contexts[currentSlide - 1];
      function updateSlideIndicator() {
        document.getElementById('slideIndicator').textContent = "Slide " + currentSlide + "/" + totalSlides;
      }
      updateSlideIndicator();
      function switchSlide(slide) {
        currentSlide = slide;
        canvases.forEach((canvas, index) => {
          canvas.style.display = (index === (currentSlide - 1)) ? "block" : "none";
        });
        currentContext = contexts[currentSlide - 1];
        updateSlideIndicator();
      }
      document.getElementById('prevSlide').addEventListener('click', function() {
        if (currentSlide > 1) switchSlide(currentSlide - 1);
      });
      document.getElementById('nextSlide').addEventListener('click', function() {
        if (currentSlide < totalSlides) switchSlide(currentSlide + 1);
      });
      
      // Vẽ trên canvas
      let drawing = false;
      let lastX = 0, lastY = 0;
      let shapeStartX = 0, shapeStartY = 0;
      const colorPicker = document.getElementById('colorPicker');

      // Dành cho vẽ tự do
      function startFreeDraw(x, y) {
        drawing = true;
        lastX = x;
        lastY = y;
      }
      function freeDraw(x, y) {
        if (!drawing) return;
        currentContext.strokeStyle = colorPicker.value;
        currentContext.lineWidth = 2;
        currentContext.beginPath();
        currentContext.moveTo(lastX, lastY);
        currentContext.lineTo(x, y);
        currentContext.stroke();
        lastX = x;
        lastY = y;
      }
      function stopFreeDraw() { drawing = false; }

      // Gán sự kiện cho từng canvas
      canvases.forEach(function(canvas){
        // Sự kiện chuột
        canvas.addEventListener('mousedown', function(e) {
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          if (mode === 'free') {
            startFreeDraw(x, y);
          } else {
            drawing = true;
            shapeStartX = x;
            shapeStartY = y;
          }
        });
        canvas.addEventListener('mousemove', function(e) {
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          if (mode === 'free') {
            freeDraw(x, y);
          }
        });
        canvas.addEventListener('mouseup', function(e) {
          const rect = canvas.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          if (mode === 'free') {
            stopFreeDraw();
          } else if (drawing) {
            currentContext.strokeStyle = colorPicker.value;
            currentContext.lineWidth = 2;
            if (mode === 'rectangle') {
              const width = x - shapeStartX;
              const height = y - shapeStartY;
              currentContext.strokeRect(shapeStartX, shapeStartY, width, height);
            } else if (mode === 'circle') {
              const dx = x - shapeStartX;
              const dy = y - shapeStartY;
              const radius = Math.sqrt(dx*dx + dy*dy);
              currentContext.beginPath();
              currentContext.arc(shapeStartX, shapeStartY, radius, 0, Math.PI * 2);
              currentContext.stroke();
            }
            drawing = false;
          }
        });
        canvas.addEventListener('mouseout', function(){
          if (mode === 'free') stopFreeDraw();
          drawing = false;
        });
        // Sự kiện cảm ứng
        canvas.addEventListener('touchstart', function(e) {
          e.preventDefault();
          const rect = canvas.getBoundingClientRect();
          const touch = e.touches[0];
          const x = touch.clientX - rect.left;
          const y = touch.clientY - rect.top;
          if (mode === 'free') {
            startFreeDraw(x, y);
          } else {
            drawing = true;
            shapeStartX = x;
            shapeStartY = y;
          }
        });
        canvas.addEventListener('touchmove', function(e) {
          e.preventDefault();
          const rect = canvas.getBoundingClientRect();
          const touch = e.touches[0];
          const x = touch.clientX - rect.left;
          const y = touch.clientY - rect.top;
          if (mode === 'free') {
            freeDraw(x, y);
          }
        });
        canvas.addEventListener('touchend', function(e) {
          e.preventDefault();
          if (mode === 'free') {
            stopFreeDraw();
          } else if (drawing) {
            // Dùng touchend không cung cấp vị trí, bạn có thể cải tiến nếu cần
            drawing = false;
          }
        });
      });
      
      // Tải ảnh từ điện thoại và vẽ lên canvas hiện tại
      document.getElementById('uploadImage').addEventListener('change', function(e) {
          const file = e.target.files[0];
          if (!file) return;
          const reader = new FileReader();
          reader.onload = function(event) {
              const img = new Image();
              img.onload = function() {
                  currentContext.clearRect(0, 0, canvases[currentSlide - 1].width, canvases[currentSlide - 1].height);
                  currentContext.drawImage(img, 0, 0, canvases[currentSlide - 1].width, canvases[currentSlide - 1].height);
              };
              img.src = event.target.result;
          };
          reader.readAsDataURL(file);
      });
      
      // Xóa canvas hiện tại
      document.getElementById('clearCanvas').addEventListener('click', function(){
         currentContext.clearRect(0, 0, canvases[currentSlide - 1].width, canvases[currentSlide - 1].height);
      });
      
      // Chụp hình: hiển thị preview ảnh của canvas hiện tại
      document.getElementById('captureButton').addEventListener('click', function(){
         const imageData = canvases[currentSlide - 1].toDataURL("image/png");
         const imgPreview = document.createElement('img');
         imgPreview.src = imageData;
         document.getElementById('preview').innerHTML = "";
         document.getElementById('preview').appendChild(imgPreview);
      });
      
      // Gửi ảnh lên server qua AJAX (cập nhật YOUR_SERVER_URL nếu có endpoint)
      document.getElementById('sendButton').addEventListener('click', function(){
         const imageData = canvases[currentSlide - 1].toDataURL("image/png");
         const serverUrl = "YOUR_SERVER_URL"; // Thay bằng URL server thật của bạn
         const xhr = new XMLHttpRequest();
         xhr.open("POST", serverUrl, true);
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         xhr.onreadystatechange = function(){
             if(xhr.readyState === 4){
                if(xhr.status === 200){
                   alert("Hình ảnh đã được gửi thành công!");
                } else {
                   alert("Lỗi khi gửi ảnh: " + xhr.status);
                }
             }
         };
         xhr.send("image=" + encodeURIComponent(imageData));
      });
    })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('jamboard_canvas', 'jbc_shortcode');
?>

---

Hướng dẫn sử dụng:

1. Cài đặt Plugin:

   • Lưu file mã trên (ví dụ “jamboard-canvas-plus.php”) vào thư mục wp-content/plugins/.
   • Vào trang quản trị WordPress, kích hoạt plugin “Jamboard Canvas Plus”.

2. Chèn Shortcode:

   • Tạo trang mới hoặc chỉnh sửa trang hiện có, sau đó chèn shortcode:

     csharp
     [jamboard_canvas]
     

3. Sử dụng:

   • Trên giao diện trang, người dùng có thể chọn chế độ vẽ bằng các nút “Vẽ Tự Do”, “Hình Chữ Nhật” hoặc “Hình Tròn”.
   • Các chức năng khác như chuyển slide, tải ảnh từ thiết bị, xóa canvas, chụp ảnh xem trước và gửi ảnh qua AJAX cũng được tích hợp sẵn.

Nếu cần thêm tùy chỉnh hoặc tích hợp chức năng mới, bạn có thể chỉnh sửa file plugin theo yêu cầu.