woongbeee

{
  "name": "wincc-oa-web-migration",
  "version": "1.0.0",
  "description": "WinCC OA SCADA XML to Web (Vue.js + Canvas) Migration Tool",
  "main": "build/optimize-xml.js",
  "scripts": {
    "build": "node build/optimize-xml.js",
    "dev": "vite",
    "serve": "vite preview"
  },

woongbeee

// canvas-partial-update-example.js
// Canvas 부분 업데이트 데모 (순수 JavaScript)

/**
 * Canvas 부분 업데이트 데모
 * Vue, React 등 프레임워크 없이 순수 JS만으로 동작
 */

// 1. Canvas 설정
const canvas = document.createElement('canvas');

woongbeee

<!-- ScreenManager.vue -->
<!-- 런타임에 최적화된 JSON을 로드하고 Canvas로 렌더링 -->

<template>
  <div class="screen-container">
    <!-- 배경 이미지 -->
    <img 
      v-if="background" 
      :src="background" 
      class="background-image"

woongbeee

// build/optimize-xml.js
// WinCC OA XML을 웹 최적화 JSON으로 변환하는 빌드 스크립트

const fs = require('fs');
const xml2js = require('xml2js');
const path = require('path');

/**
 * XML 파일을 최적화된 JSON으로 변환
 * - Reference 체인 flatten

woongbeee

WinCC OA to Web Migration

WinCC OA SCADA 시스템의 XML 그래픽 파일을 웹 기반 Vue.js 애플리케이션으로 마이그레이션하는 프로젝트

📋 프로젝트 개요

문제점

• WinCC OA 프로그램을 더 이상 사용할 수 없음
• 800개의 XML 화면 파일 존재 (각 파일당 약 2000개 shapes)
• 복잡한 Reference 체인 구조 (최대 5단계 중첩)

woongbeee

# WinCC OA to Web Migration - 파일 목록

이 프로젝트는 WinCC OA XML 파일을 웹 기반 Vue.js + Canvas 애플리케이션으로 마이그레이션하는 코드입니다.

## 📦 포함된 파일

### 1. README.md
- 프로젝트 전체 개요
- 아키텍처 설명
- 사용법 및 설치 가이드