issie
Autumn-Spring 2024-2025
ISSIE (통합 편집기와의 대화식 회로도 시뮬레이터)는 디지털 회로 설계 및 시뮬레이션 애플리케이션입니다. 단순하고 재미있는 방식으로 디지털 전자 컨셉을 이해하려는 학생과 애호가를 대상으로합니다. ISSIE는 초보자 친화적 인 것이며 명확한 오류 메시지 및 시각적 단서를 통해 사용자를 목표로 안내하도록 설계되었습니다. ISSIE는 Imperial College London에서 가르치는 데 개발되고 적극적으로 사용됩니다.
프로젝트에 대한 더 많은 기술 정보를 보려면 계속 읽으십시오. 이 문서는 부분적으로 사용 된 기술 스택의 유사성을 고려할 때 우수한 Visual2 문서를 기반으로합니다.
ISSIE 웹 사이트는 여기로 이동하십시오.
응용 프로그램은 주로 F#로 작성되며 Fable 컴파일러를 통해 JavaScript로 변환됩니다. 그런 다음 전자는 개발 된 웹 애플을 크로스 플랫폼 응용 프로그램으로 변환하는 데 사용됩니다. Electron은 바닐라 브라우저 웹 앱에서 사용할 수없는 플랫폼 레벨 API (예 : 파일 시스템 액세스)에 대한 액세스를 제공합니다.
Webpack 5는 JavaScript 연결 및 자동 건물 프로세스를 담당하는 Bundler입니다. Electron-Webpack 빌드는 스크립트 디렉토리의 기존 스크립트를 사용하여 자동화됩니다.
드로잉 기능은 F#에 구현 된 맞춤형 회로 편집기 라이브러리에 의해 (현재) 제공되며 디지털 구성 요소에 특화되어 있습니다.
앱의 주요 프로그래밍 언어로서 F#의 선택은 몇 가지 요인으로 결정되었습니다.
앱을 실행하려면 릴리스 페이지로 이동하여 플랫폼 (Windows 또는 MacOS)의 최신 사전 제작 된 바이너리를 다운로드하여 실행하십시오. ISSIE는 총 약 200m의 디스크 공간이 필요합니다.
Issie.exe ISSIE는 시스템 변경없이 설치 및 실행됩니다. 모든 코드는 다운로드 한 디렉토리 내부에 있습니다. 이것을 삭제하고 이후 버전의 ISSIE로 바꿀 수 있습니다. 각 설계 시트는 프로젝트 디렉토리 아래에서 유사하게 명명 된 파일에 저장됩니다. 서브 디렉토리 backup 에는 설계 복구를위한 많은 백업 스냅 샷이 포함되어 있습니다. ISSIE 작업에는 필요하지 않으므로 원하는 경우 전체 백업 디렉토리 또는 전체 backup 디렉토리도 삭제할 수 있습니다.
ISSIE BINARIES는 네트워크 파일 위치 (많은 클러스터 시스템에서 찾을 수 있음)에서 (경우에 따라) 실행되지 않습니다. 이 문제가있는 경우 명령 창에 ISSIE BINARIES가 포함 된 최상위 디렉토리로 이동하고 issie.exe --no-sandbox 입력하십시오. 자세한 내용은 #125를 참조하십시오.
ISSIE를 열고 갈 준비가되면 시작 창에서 데모 프로젝트 중 하나를 열어주십시오. 이들은 완전한 ISSIE 프로젝트의 모습을 보여주고 처음부터 디자인하고 만들지 않고도 재미있게 즐길 수 있습니다. 데모 프로젝트를 다시 열 때마다 초기 상태로 재설정됩니다.
개발자로 시작하려면 다음 단계를 따르십시오.
다운로드 및 설치 (이미이 도구가 설치된 경우 버전 제약 조건을 확인하십시오).
npm 패키지 관리자가 포함되어 있으므로 별도로 설치할 필요가 없습니다.ISSIE REPO를 다운로드하여 압축하거나 로컬로 복제하거나 GitHub에서 포크 한 다음 로컬로 복제하십시오.
.NET 8.X SDK, 노드 V20.X를 확인하십시오 : 이진을 만드는 것 이상을하려면 : vs 2022 (또는 최신 대 코드 + 이오 나이드 또는 라이더)가 설치되어 있습니다.
node -v 노드 버전을 보여줍니다. dotnet --version dotnet 버전을 보여줍니다.명령 줄 통역사에서 Repo Mas
Windows 또는 build.sh 아래에서 run build.cmd linux 또는 macOS ( chmod 755 build.sh 스크립트 실행 권한을 부여합니다). 이렇게하면 모든 종속성을 다운로드하여 설치 한 다음 HMR을 사용하여 DEV 모드에서 응용 프로그램을 시작합니다.
File -> reload pagenpm run dev 다시 실행하십시오. Debug 모드에서 npm run debug 실행하십시오 (DEV보다 훨씬 느리게됩니다).npm run dist 용 분포 가능한 바이너리를 생성합니다.packet.json 변경 한 경우 잠금 파일 paket-lock.json 리메이크 해야하는 경우 npm install 사용하십시오.build killzombies 비정상적인 종료 후이 빌드 체인을 사용하여 때때로 발생하는 고아 노드 및 도트 넷 프로세스를 종료합니다 (더 이상 필요하지 않습니까?).npm run dist 실행하여 .dist 디렉토리 아래에서 바이너리를 생성합니다. MACOS의 경우 기본 바이너리를 컴파일하려면 Python 3을 설치해야합니다.이 작업을 수행 할 수 있도록 자동 승인되지만 npm run dist 다시 실행해야합니다.NB- 위의 컴파일과 병행하여 ISSIE 코드는 예를 들어 Visual Studio에서 빌드하여 DOTNET에서 오류없이 (실행되지 않음) 항상 컴파일됩니다. 컴파일은 동일해야하지만 오류가 있는지 확실하지 않은 경우 .NET에서 VS 또는 VSC를 사용하여 현재 코드를 빌드하고 오류 메시지를 더 쉽게 찾는 것이 매우 도움이 됩니다. 마찬가지로 VS 또는 VSC는 컴파일로 테스트하는 리팩터 코드에 자신감을 가지고 사용될 수 있습니다. Code가 작동하는 전자 및 노드 API에 의존하기 때문에 VS 또는 VSC 아래에 건물이 작동 할 수 없습니다.
package-lock.json 에는 정확한 패키지 버전이 포함되어 있으며 Repo에서 다운로드됩니다. 일반적으로 이것을 변경할 필요가 없습니다. 위의 표준 빌드는 패키지를 확인하고 감사하지만 잠금 파일을 변경하지 않는 npm ci 실행합니다.package.json1 )를 추가 해야하는 경우 npm install 사용하여 잠금 파일을 재현하여 repo로 푸시 할 수 있습니다.npm upgrade name 또는 npm [-D] install name package.json 을 사용하여 단일 패키지를 편리하게 변경하거나 추가 할 수 있습니다.npm ls name 사용하여 필요한 패키지를 사용하는 경우 (일반적으로 업그레이드하거나 교체하면 문제가 제거됩니다). 깨끗한 빌드는 MacOS에서 똑같이 잘 작동하지만 이전에 충돌하는 패키지를 설치 한 경우 상황이 잘못 될 가능성이 높습니다.
레거시 버전의 dotnet 필요한 경우 여기에서 제거 할 수 있습니다.
curl -O https://raw.githubusercontent.com/dotnet/sdk/main/scripts/obtain/uninstall/dotnet-uninstall-pkgs.sh
chmod u+x dotnet-uninstall-pkgs.sh
sudo ./dotnet-uninstall-pkgs.sh 개발자 파일의 루트 권한. Dev가 원활하게 작동하려면 모든 구성 파일을 자신의 사용자 이름으로 설치해야하므로 R/W에 액세스해야합니다. sudo 에 루트 설치 소프트웨어를 사용하거나 과거 에이 시간을 한 경우 자신이 자신을 발견하면이 작업이 중단됩니다. 이 경우 sudo 사용하여 관리자 권한으로 개발 (또는 생성 된 앱)을 실행하여 일시적으로 라운드 문제를 해결할 수 있습니다. 이것은 잘못된 일입니다. 대신 사용해야합니다
chown -R `whoami` dir . 일반적으로 DEV 디렉토리 . 및 /usr/local .DotNet이 잘못 설치된 경우 최신 DOTNET을 제거하고 다시 설치하면 도움이됩니다.
Apple Silicon Mac 사용자의 경우 최상의 결과를 얻으려면 ARM64 버전의 .NET을 사용해야합니다. 설치 프로그램을 사용하여 공식 Microsoft 웹 사이트에서 얻을 수 있습니다.
DEV 체인은 복잡하지만 이제는 모든 플랫폼에서 매우 매끄럽고 동일합니다. 이러한 각 단계는 필요에 따라 수행 할 수 있습니다.
Dotnet SDK 및 Node 설치가 필요합니다. dotnet sdk는 당신에게 f#을 제공합니다.dotnet tool restore Dev 도구를 제공합니다 : Fable 컴파일러, Fake 빌드 자동화, paket Dotnet 패키지 관리자. (노드 패키지 관리는 노드와 함께 제공되는 npm 통해입니다).dotnet paket install 필요한 모든 도트 넷 사이드 패키지를 설치합니다.npm ci 모든 NPM 패키지의 올바른 버전을 다운로드하고 감사합니다. npm install 버전이 변경된 경우 버전을 다시 만들고 업데이트 된 잠금 파일을 생성합니다.npm run dev , npm run dist , npm run debug : package.json 에 정의 된 스크립트는 개발 (HMR 포함) 또는 우화를 사용한 생산 편집 및 WebPack 5를 사용한 포장을 제어합니다.build.cmd 및 build.sh 스크립트 패키지 위의 단계는 일반적으로 필요한 디렉토리 청소를 추가하는 위의 단계입니다. 문제가있는 경우 순서대로 개별적으로 실행할 수 있습니다.dotnet-tools.json 편집하십시오.paket.dependencies 최상위 레벨 및 paket.references 관련 .fsproj 파일의 디렉토리에서 변경합니다. 현재 DotNet 패키지는 버전에 고정되어 있지 않으므로 최신 호환 버전이 항상 사용됩니다. 이것은 아마도 잘못되었지만 잘 작동하는 것 같습니다..d 파일에서 f# 인터페이스를 생성하는 훌륭한 자동 변환기 TS2Fable이 있습니다. 이것은 잘 작동하지만 수동 조정은 복잡한 것에 대해 필요합니다. 게시 된 Electron API .d 파일에서 이러한 방식으로 생성 된 ISSIE의 Electron API 인터페이스를 참조하십시오.이 경우 전자 API가 매우 복잡하기 때문에 수동 조정은 상당히 불쾌했습니다. Electron은 Chromium (View) 및 Node.js (Engine)를 번들이므로 모든 Node.js 프로젝트에서와 같이 package.json 파일은 (노드) 모듈 종속성을 지정합니다.
또한 "scripts" 섹션 :
"scripts": {
"clean-dev-mac": "sudo killall -9 node && sudo killall -9 dotnet && sudo killall -9 issie",
"clean-dev-win": "taskkill /f /im node.exe && taskkill /f /im dotnet.exe && taskkill /f /im issie.exe",
"compile": "dotnet fable src/Main -s && dotnet fable src/Renderer -s --define PRODUCTION",
"debug": "dotnet fable watch src/Main -s --run npm run debugrenderer",
"debugrenderer": "dotnet fable watch src/Renderer -s --define ASSERTS --run npm run start",
"dev": "dotnet fable watch src/Main -s --run npm run devrenderer",
"devrenderer": "dotnet fable watch src/Renderer -s --run npm run start",
"start": "cross-env NODE_ENV=development node scripts/start.js",
"build": "cross-env NODE_ENV=production node scripts/build.js",
"pack": "npm run compile && npm run build && electron-builder --dir",
"dist": "npm run compile && npm run build && electron-builder",
"buildonly": "electron-builder",
"compile-sass": "cd src/renderer/scss && node-sass main.scss main.css",
"testcompiler": "cd src/Renderer/VerilogComponent/test && dotnet fable --noCache && node testParser.fs.js"
}
프로젝트 내 바로 가기 명령을 <key> : <value line 세트로 정의하여 npm run <stript_key> 사용할 때 <script_value> 호출하는 것과 같습니다. 예를 들어, 프로젝트의 루트에서 터미널 npm run dev 에서 실행되는 것은 명령 줄과 동일합니다.
dotnet fable watch src/Main -s --run npm run devrenderer
이것은 기본 프로세스를 트랜스 파일하기 위해 Fable 4를 실행합니다. ( --run 다른 명령을 실행하기위한 우화 옵션입니다) 스크립트 devrenderer 실행하여 JavaScript로 변환하고 렌더러 프로세스에서 f# 파일을 시청합니다. 렌더러 변환이 완료되면 start.js 스크립트가 실행됩니다. 이로 인해 webpack 전자 아래에서 JavaScript 코드를 포장하고 lauch로 호출하고 JavaScript 코드의 변경 사항을 보며 실행중인 응용 프로그램에이를 로드합니다.
그 결과, 언제든지 편집 된 F# 렌더러 프로젝트 파일을 저장하면 즉시 (거의) 즉시 원인이됩니다.
빌드 시스템은 Fake 파일 build.fsx 에 따라 다릅니다. 가짜는 빌드 작업을 자동화하기 위해 전문화 된 F#로 작성된 DSL입니다. build.fsx는 빌드 작업을 나타내는 대상이 있으며 일반적으로 dotnet fake 직접 사용하는 대신 build.cmd 또는 build.sh 통해 실행됩니다.
build <target> ==> dotnet fake build -t <target> 소스 코드는 완전한 전자 적용을 만들기 위해 JavaScript로 별도로 변환 된 두 개의 별개의 섹션으로 구성됩니다.
따라서 Electron을 사용하면 브라우저 (HTML + CSS + JavaScript) 용으로 작성된 코드가 두 프로세스 간의 통신을 통해 데스크탑 파일 시스템 액세스 기능을 갖춘 데스크탑 앱으로 실행할 수 있습니다.
두 프로세스 모두 노드에서 JavaScript를 실행합니다.
src/Main/Main.fs 소스는 전자 시작을 구성하고 보일러 플레이트입니다. 루트 프로젝트 디렉토리로 변환되므로 전자에 의해 자동으로 픽업 될 수 있습니다.
나머지 앱 코드 (in)
F# 프로젝트 소스를 renderer.js 로 바꾸는 코드는 Fable 컴파일러와 Node Webpack Bundler가 여러 JavaScript 파일을 단일 renderer.js .
컴파일 프로세스는 .fsproj 파일 (f# 소스 정의) 및 webpack.additions.main.js , webpack.additions.renderer.js 에 의해 제어됩니다. Webpack이 전자 메인 및 전자 앱 프로세스와 실행 가능한 코드가 제시되는 위치를 결합한 방법을 정의하는 방법을 정의하는. 이것은 변경할 필요가없는 상용구입니다. 일반적으로 F# 프로젝트 파일은 수정해야 할 전부입니다.
저장소의 루트에는 build_docs.sh 의 스크립트가 있으며 FSDOC를 사용하여 프로젝트의 문서를 작성합니다. 문서를 생성하기 전에 프로젝트를 컴파일 준비해야합니다.
/docs 의 마크 다운 파일은 문서 사이트의 정적 페이지로 바뀝니다. 코드의 XML 주석은 코드베이스의 모든 기능에 대한 문서 주석으로 바뀝니다.
업데이트를 추가하려면 /docs/updates 폴더로 이동하여 다음 헤더가있는 새 Markdown 파일을 만듭니다.
---
layout : post
title : [title here]
date : [ ISO 8601 UTC datetime, etc 2021-07-04 15:52:01 +0100]
category : Updates
index : [index that decides the order of the update. later updates have greater indexes]
---
# your markdown content below 예제는 /docs/updates 폴더의 다른 문서를 참조하십시오.
모든 모듈 및 함수 선언에서 모든 XML 주석 ( /// 부터 시작)은 문서 웹 사이트의 API 참조 섹션에서 문서로 바뀝니다.
코드에서 문서 주석을 만들 때 XML 규칙을 따르십시오. 즉, 태그가 아닌 삼각형 브래킷의 사용이 없습니다. 이중 인용문도 사용하지 마십시오!
build_docs.sh 또한 dotnet fsdocs watch 호출하여 http : // localhost : 8901/에서 문서를 호스팅하는 로컬 서버를 시작합니다. 코드에 대한 생성 된 문서는 "API 참조"섹션 아래에 있습니다.
문서를 구축하고 서버에 다시 액세스하려면 터미널에서 dotnet fsdocs watch 실행할 수 있습니다.
참고 사항 : 일반적인
dotnet fsdocs build대신 스크립트는 컴파일러가 익명 레코드가 포함 된 함수에 대한 잘못된 XML 코드를 작성하여 이름에 "<>"을 할당하는 문서화되지 않은 버그로 인해 사용됩니다. 이로 인해 세대가 실패합니다.<exclude/>사용하면 문제가 해결되지 않으므로 해결 방법은 Regex를 사용하여 문서를 작성하기 전에 XML 문서에서 이러한 잘못된 속성을 제거하는 스크립트를 호출하는 것입니다.
여기에서 비슷한 오류를 던지는 Github에서 유사한 문제를 참조하십시오.
src 폴더| 하위 폴더 또는 파일 | 설명 |
|---|---|
Main/main.fs | 모든 것을 설정하는 주요 전자 프로세스에 대한 코드 - 정상적으로 변경되지 않았습니다. |
Renderer/Common/* | 라이브러리 API 및 사용자 정의 라이브러리에 대한 인터페이스뿐만 아니라 몇 가지 공통 유형 및 유틸리티를 제공합니다. |
Renderer/Interface/* | 낮은 수준의 인터페이스 함수와 모든 저수준 파일 관리가 포함됩니다. |
Renderer/DrawBlock/* | F#에 모든 SVG 기반 회로도 코드가 포함되어 있습니다. |
Renderer/Simulator/* | 회로 시트를 분석하고 시뮬레이션하는 논리가 포함되어 있습니다. |
Renderer/UI/* | UI 논리가 포함되어 있습니다 |
./renderer.fs | 렌더러 코드를 구동하는 최상위 파일 : ELMISH MVU 루프 및 전자 메뉴 코드 포함 |
Tests현재 테스트는 매우 오래되었으며 작동하지 않습니다. 그것들은 f# expecto 테스트 라이브러리를 기반으로하며 원칙적으로 widthinferrer 및 시뮬레이터 코드 (Dotnet에서 실행)를 여기에서 테스트 할 수 있습니다.
Static 폴더응용 프로그램에 사용 된 정적 파일이 포함되어 있습니다.
Docs 폴더프로젝트 문서 웹 사이트 https://tomcl.github.io/issie/를 제어하는 소스 정보가 포함되어 있습니다.
ISSIE를 통해 사용자는 해당 프로젝트 내에서 프로젝트 및 파일을 만들 수 있습니다. issie 프로젝트는 단순히 <project-name> <project_name>.dprj 라는 빈 파일이 포함 된 폴더입니다 (DPRJ는 다이어그램 프로젝트의 표시). 프로젝트 폴더는 0이 아닌 디자인 파일의 수를 폴더로, 각각 <component_name>.dgm (dgm은 다이어그램을 나타냅니다). 각 설계 파일은 계층 적 하드웨어 설계의 하나의 설계 시트를 나타냅니다. 시트에는 구성 요소, 다른 시트로 포함 할 수 있습니다.
프로젝트를 열 때, Issie는 처음에 주어진 저장소를 .dgm 파일에 검색하고 컨텐츠를 구문 분석하고로드하고 사용자가 ISSIE로 열거 나 다른 디자인의 구성 요소로 사용할 수 있도록합니다.
프로젝트 코드를 변경하지 않고 빌드 환경을 다시 설치하려면 build.cmd (Windows) 또는 build.sh (Linux 및 MacOS)를 다시 실행하십시오.
npm run dist /dist 에 대한 올바른 바이너리를 생성합니다.
