Table of Contents

Controller Page Web Implementation

This document describes the web implementation of the Controller Page in the HiNC-2025-webservice project.

Overview

The Controller Page web implementation consists of:

  • Backend API controller (ControllerController.cs)
  • Frontend HTML, JavaScript, and CSS files
  • Integration with the rendering canvas and toolbar components

Backend Implementation

ControllerController.cs

Located at Controller/ControllerController.cs, this API controller provides endpoints for managing CNC controller settings:

Endpoints

  • GET /api/controller/cnc-brand - Gets the current CNC brand
  • PUT /api/controller/cnc-brand - Updates the CNC brand
  • GET /api/controller/machine-config - Gets machine configuration
  • PUT /api/controller/machine-config - Updates machine configuration
  • GET /api/controller/general-config - Gets general configuration settings
  • PUT /api/controller/general-config - Updates general configuration
  • GET /api/controller/iso-coordinate-table - Gets the ISO coordinate table
  • PUT /api/controller/iso-coordinate-table/{index} - Updates an ISO coordinate entry
  • GET /api/controller/heidenhain-datum-preset-table - Gets the Heidenhain datum preset table
  • PUT /api/controller/heidenhain-datum-preset-table/{index} - Updates a Heidenhain datum preset entry
  • GET /api/controller/heidenhain-datum-shift-table - Gets the Heidenhain datum shift table
  • PUT /api/controller/heidenhain-datum-shift-table/{index} - Updates a Heidenhain datum shift entry
  • GET /api/controller/milling-tool-offset-table - Gets the milling tool offset table
  • PUT /api/controller/milling-tool-offset-table - Updates the milling tool offset table
  • GET /api/controller/ideal-offset-dependent - Gets the ideal offset dependent setting
  • PUT /api/controller/ideal-offset-dependent - Updates the ideal offset dependent setting
  • POST /api/controller/set-ideal-offset-from-toolhouse - Sets ideal offset based on tool house
  • POST /api/controller/initialize-display - Initializes the display engine for rendering

Frontend Implementation

HTML Structure

The main HTML file (wwwroot/controller/controller-panel.html) contains:

  • Management panel with tabs for different configuration sections
  • Viewer panel with rendering canvas for 3D visualization
  • Responsive layout with resizable panels

JavaScript Components

The frontend uses Vue.js framework with ES modules for component-based architecture.

controller-panel.js

Main Vue.js component that orchestrates the controller page:

  • Imports and registers all sub-components (tabs, toolbars, rendering canvas)
  • Manages global state (CNC brand, rendering connection)
  • Handles tab switching and dynamic component loading
  • Initializes display engine and rendering connections

Key features:

  • Component-based architecture using Vue.js
  • Dynamic tab components loaded from separate files
  • Brand-specific UI updates (showing/hiding Heidenhain tabs)
  • Integration with rendering canvas and toolbars

Tab Components

Each configuration tab is implemented as a separate Vue.js component:

  • coordinate-table-tab.js - ISO coordinate table management
  • datum-preset-tab.js - Heidenhain datum preset table (brand-specific)
  • datum-shift-tab.js - Heidenhain datum shift table (brand-specific)
  • offset-table-tab.js - Tool offset table with ideal offset settings
  • machine-tab.js - Machine configuration with axis limits (degrees for rotary axes)
  • brand-tab.js - CNC brand selection
  • config-tab.js - General configuration settings

controller-extended-toolbar.js

Vue.js component for the extended toolbar that provides:

  • Rendering flags dropdown menu (similar to WPF's RenderingFlagSubmenu)
  • Controller-specific rendering options (Machine, Coordinates, ISO, Datum, etc.)
  • Brand-aware rendering flags (Heidenhain-specific options)
  • Integration with display engine for real-time updates

CSS Styling

Two CSS files provide styling:

  • controller-panel.css - Main panel layout and component styles
    • Two-column responsive layout using flexbox
    • Tab navigation and content styling
    • Form controls with special handling for checkboxes
    • Overrides global styles for proper checkbox display
  • controller-extended-toolbar.css - Toolbar-specific styles
    • Dropdown menu styling
    • Button and icon styling
    • Consistent with player toolbar design

Integration Points

With Main Application

The controller page is integrated into the main application through:

  • Navigation menu in index.html
  • Route handling in main.js
  • Iframe embedding for isolated functionality

With Project Service

The controller utilizes the IProjectService to:

With Rendering Engine

The controller page integrates with:

Key Differences from WPF Implementation

  1. Asynchronous Operations: All data operations are asynchronous using fetch API
  2. Component Architecture: Vue.js components instead of WPF UserControls
  3. Web-based Rendering: Uses WebGL-based rendering canvas instead of WPF controls
  4. Responsive Design: Two-column layout with CSS flexbox for better screen utilization
  5. Unit Conversion: Frontend handles degree/radian conversion for rotary axes
  6. Granular API: Split NcEnv into multiple focused endpoints instead of single large DTO
  7. Toolbar Integration: Reuses rendering flag patterns from player section

Implementation Details

Data Transfer Objects (DTOs)

The backend uses several DTOs to simplify complex object serialization:

  • IsoCoordinateTableEntry - For ISO coordinate table entries
  • DatumTableEntry - For Heidenhain datum tables
  • MachineConfigDto - For machine configuration settings
  • GeneralConfigDto - For general configuration settings

Unit Handling

  • Backend stores rotary axis values in radians (following HiAPI conventions)
  • Frontend displays and accepts input in degrees for user-friendliness
  • Conversion happens in the Vue.js components (radToDeg and degToRad functions)

Rendering Flag Management

The controller uses specific rendering flags for visualization:

  • Flag indices follow the RenderingFlag enum structure
  • Controller-specific flags include: Coordinate, HeidenhainDatumPreset, HeidenhainDatumShift, Stock, AxisLimits
  • Flags are synchronized between frontend state and display engine

Future Enhancements

  • Implement ObjectManagementMenuButton component for file management
  • Add undo/redo functionality
  • Implement keyboard shortcuts
  • Add client-side validation for numeric inputs
  • Implement batch updates for better performance
  • Add tooltips for configuration options