1088 lines
34 KiB
HTML
1088 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
|
|
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link
|
|
href="/external/fontawesome-free-5.15.4-web/css/all.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<title>Hello, world!</title>
|
|
</head>
|
|
<body>
|
|
<div id="exitView"></div>
|
|
<nav class="navbar navbar-expand-lg navbar-dark header">
|
|
<a href="/"><span class="logo"></span></a>
|
|
<button
|
|
class="navbar-toggler collapsed"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#bs-example-navbar-collapse-1"
|
|
aria-controls="collapsedNavbar"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
<ul class="navbar-nav navbar-menu noSelect pointerCursor" id="toolbar">
|
|
<li class="dropdown nav-dropdown">
|
|
<a
|
|
href="#"
|
|
class=""
|
|
data-toggle="dropdown"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>Project<span></span
|
|
></a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="newProject"
|
|
>New Project</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item logixButton text-left pl-1" id="save"
|
|
>Save Online</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="saveOffline"
|
|
>Save Offline</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="createOpenLocalPrompt"
|
|
>Open Offline</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="clearProject"
|
|
>Clear Project</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="recoverProject"
|
|
>Recover Project</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="fullViewOption"
|
|
>Preview Circuit</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
onclick="old_ui_redirect()"
|
|
>View Previous UI</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown nav-dropdown">
|
|
<a
|
|
href="#"
|
|
class=""
|
|
data-toggle="dropdown"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>Circuit<span class="caret"></span
|
|
></a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left logixButton pl-1"
|
|
id="newCircuit"
|
|
>New Circuit +
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left logixButton pl-1"
|
|
id="newVerilogModule"
|
|
>New Verilog <br />
|
|
Module</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item logixButton text-left pl-1"
|
|
id="createSubCircuitPrompt"
|
|
>Insert SubCircuit</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown nav-dropdown">
|
|
<a
|
|
href="#"
|
|
class=""
|
|
data-toggle="dropdown"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>Tools<span class="caret"></span
|
|
></a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1 logixButton"
|
|
id="createCombinationalAnalysisPrompt"
|
|
>Combinational<br />Analysis</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1 logixButton"
|
|
id="bitconverter"
|
|
>Hex-Bin-Dec<br />Converter</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1 logixButton"
|
|
id="createSaveAsImgPrompt"
|
|
>Download Image</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1 logixButton"
|
|
id="colorThemes"
|
|
>Themes</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item text-left pl-1" id="customShortcut"
|
|
>Custom Shortcut</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1 logixButton"
|
|
id="generateVerilog"
|
|
>Export Verilog</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown tour-help nav-dropdown">
|
|
<a
|
|
href="#"
|
|
class=""
|
|
data-toggle="dropdown"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>Help<span class="caret"></span
|
|
></a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1 logixButton"
|
|
id="showTourGuide"
|
|
>Tutorial Guide</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1"
|
|
href="https://docs.circuitverse.org"
|
|
class=""
|
|
target="_blank"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>User Manual</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1"
|
|
href="https://learn.circuitverse.org"
|
|
class=""
|
|
target="_blank"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>Learn Digital Logic</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="dropdown-item text-left pl-1"
|
|
href="https://circuitverse.org/forum"
|
|
class="forum-tab"
|
|
target="_blank"
|
|
role="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>Discussion Forum</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<span
|
|
class="projectName noSelect defaultCursor font-weight-bold"
|
|
id="projectName"
|
|
>
|
|
Untitled
|
|
</span>
|
|
|
|
<div
|
|
ondrag="(() => {$('.quick-btn').css({'box-shadow': 'none', 'background': 'var(--bg-navbar)'})})()"
|
|
class="quick-btn"
|
|
>
|
|
<div id="dragQPanel" class="panel-drag">
|
|
<span
|
|
><svg
|
|
style="height: 20px"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
width="18"
|
|
height="31"
|
|
viewBox="0 0 18 31"
|
|
>
|
|
<defs>
|
|
<clipPath id="clip-path">
|
|
<rect width="18" height="31" fill="none" />
|
|
</clipPath>
|
|
</defs>
|
|
<g
|
|
id="Repeat_Grid_1"
|
|
data-name="Repeat Grid 1"
|
|
clip-path="url(#clip-path)"
|
|
>
|
|
<g transform="translate(-21 -29)">
|
|
<circle
|
|
id="Ellipse_1"
|
|
data-name="Ellipse 1"
|
|
cx="2"
|
|
cy="2"
|
|
r="2"
|
|
transform="translate(22 30)"
|
|
fill="#fff"
|
|
/>
|
|
</g>
|
|
<g transform="translate(-12 -29)">
|
|
<circle
|
|
id="Ellipse_1-2"
|
|
data-name="Ellipse 1"
|
|
cx="2"
|
|
cy="2"
|
|
r="2"
|
|
transform="translate(22 30)"
|
|
fill="#fff"
|
|
/>
|
|
</g>
|
|
<g transform="translate(-21 -18)">
|
|
<circle
|
|
id="Ellipse_1-3"
|
|
data-name="Ellipse 1"
|
|
cx="2"
|
|
cy="2"
|
|
r="2"
|
|
transform="translate(22 30)"
|
|
fill="#fff"
|
|
/>
|
|
</g>
|
|
<g transform="translate(-12 -18)">
|
|
<circle
|
|
id="Ellipse_1-4"
|
|
data-name="Ellipse 1"
|
|
cx="2"
|
|
cy="2"
|
|
r="2"
|
|
transform="translate(22 30)"
|
|
fill="#fff"
|
|
/>
|
|
</g>
|
|
<g transform="translate(-21 -7)">
|
|
<circle
|
|
id="Ellipse_1-5"
|
|
data-name="Ellipse 1"
|
|
cx="2"
|
|
cy="2"
|
|
r="2"
|
|
transform="translate(22 30)"
|
|
fill="#fff"
|
|
/>
|
|
</g>
|
|
<g transform="translate(-12 -7)">
|
|
<circle
|
|
id="Ellipse_1-6"
|
|
data-name="Ellipse 1"
|
|
cx="2"
|
|
cy="2"
|
|
r="2"
|
|
transform="translate(22 30)"
|
|
fill="#fff"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-save-online logixButton"
|
|
id="save"
|
|
title="Save Online"
|
|
onclick=""
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-save logixButton"
|
|
id="saveOffline"
|
|
title="Save Offline"
|
|
onclick=""
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-delete"
|
|
title="Delete Selected"
|
|
id="deleteSelected"
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-download logixButton"
|
|
id="createSaveAsImgPrompt"
|
|
title="Download as Image"
|
|
onclick=""
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-zoom-fit"
|
|
title="Fit to Screen"
|
|
onclick="globalScope.centerFocus(false)"
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-undo"
|
|
title="Undo"
|
|
id="undoButton"
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-redo"
|
|
title="Redo"
|
|
id="redoButton"
|
|
></button>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="quick-btn-view"
|
|
title="Preview Circuit"
|
|
id="viewButton"
|
|
>
|
|
<i style="color: #ddd" class="fas fa-expand-arrows-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<div class="zoom-slider">
|
|
<button class="zoom-slider-decrement" id="decrement">-</button>
|
|
<input
|
|
type="range"
|
|
class="custom-range"
|
|
min="0"
|
|
max="45"
|
|
step="1"
|
|
id="customRange1"
|
|
/>
|
|
<span id="slider_value"></span>
|
|
<button class="zoom-slider-increment" id="increment">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
class="nav navbar-nav noSelect pointerCursor pull-right account-btn"
|
|
>
|
|
<li class="dropdown pull-right">
|
|
<a class="navbar-nav signIn-btn user-field">Sign In</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="tabsBar" class="noSelect pointerCursor">
|
|
<button class="logixButton" id="newCircuit" onclick="">+</button>
|
|
</div>
|
|
<div
|
|
title="Export Verilog"
|
|
id="verilog-export-code-window-div"
|
|
style="display: none"
|
|
>
|
|
<textarea id="verilog-export-code-window"></textarea>
|
|
</div>
|
|
<div id="code-window" class="code-window">
|
|
<textarea id="codeTextArea"></textarea>
|
|
</div>
|
|
|
|
<div
|
|
class="modules noSelect defaultCursor ce-panel elementPanel draggable-panel draggable-panel-css"
|
|
id="guide_1"
|
|
>
|
|
<div class="panel-header">
|
|
Circuit Elements
|
|
<span class="fas fa-minus-square minimize"></span>
|
|
<span class="fas fa-external-link-square-alt maximize"></span>
|
|
</div>
|
|
<div class="panel-body" id="testid">
|
|
<div style="position: relative">
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
value=""
|
|
placeholder="Search.."
|
|
/>
|
|
<span><i class="fas search-close fa-times-circle"></i></span>
|
|
</div>
|
|
<div class="search-results"></div>
|
|
<div class="accordion" id="menu"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="noSelect defaultCursor layoutElementPanel draggable-panel draggable-panel-css"
|
|
>
|
|
<div class="panel-header">
|
|
Layout Elements
|
|
<span class="fas fa-minus-square minimize"></span>
|
|
<span class="fas fa-external-link-square-alt maximize"></span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="search-results"></div>
|
|
<div class="accordion" id="subcircuitMenu"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timing-diagram-panel draggable-panel">
|
|
<div class="panel-header">
|
|
Timing Diagram
|
|
<span class="fas fa-minus-square minimize panel-button"></span>
|
|
<span
|
|
class="fas fa-external-link-square-alt maximize panel-button-icon"
|
|
></span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="timing-diagram-toolbar noSelect">
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Decrease Size"
|
|
>
|
|
<span
|
|
class="fas fa-chevron-left timing-diagram-smaller panel-button-icon"
|
|
></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Increase Size"
|
|
>
|
|
<span
|
|
class="fas fa-chevron-right timing-diagram-larger panel-button-icon"
|
|
></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Decrease Height"
|
|
>
|
|
<span
|
|
class="fas fa-chevron-up timing-diagram-small-height panel-button-icon"
|
|
></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Increase Height"
|
|
>
|
|
<span
|
|
class="fas fa-chevron-down timing-diagram-large-height panel-button-icon"
|
|
></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Download As Image"
|
|
>
|
|
<span class="fas fa-download timing-diagram-download"></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--tertiary panel-button"
|
|
title="Reset Timing Diagram"
|
|
>
|
|
<span class="fas fa-undo timing-diagram-reset"></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--tertiary panel-button"
|
|
title="Autocalibrate Cycle Units"
|
|
>
|
|
<span class="fas fa-magic timing-diagram-calibrate"></span>
|
|
</button>
|
|
<button class="custom-btn--primary panel-button" title="Zoom In">
|
|
<span class="fas fa-search-plus timing-diagram-zoom-in"></span>
|
|
</button>
|
|
<button class="custom-btn--primary panel-button" title="Zoom Out">
|
|
<span class="fas fa-search-minus timing-diagram-zoom-out"></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Resume auto-scroll"
|
|
>
|
|
<span class="fas fa-play timing-diagram-resume"></span>
|
|
</button>
|
|
<button
|
|
class="custom-btn--primary panel-button"
|
|
title="Pause auto-scroll"
|
|
>
|
|
<span class="fas fa-pause timing-diagram-pause"></span>
|
|
</button>
|
|
1 cycle =
|
|
<input
|
|
id="timing-diagram-units"
|
|
type="number"
|
|
min="1"
|
|
autocomplete="off"
|
|
value="1000"
|
|
/>
|
|
Units
|
|
<span id="timing-diagram-log"></span>
|
|
</div>
|
|
<div id="plot">
|
|
<canvas id="plotArea"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="MessageDiv"></div>
|
|
|
|
<div
|
|
class="noSelect defaultCursor draggable-panel draggable-panel-css"
|
|
id="verilogEditorPanel"
|
|
>
|
|
<div class="panel-header">
|
|
Verilog Module
|
|
<span class="fas fa-minus-square minimize"></span>
|
|
<span class="fas fa-external-link-square-alt maximize"></span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="layout-body">
|
|
<button
|
|
class="largeButton btn logixButton btn-xs custom-btn--tertiary"
|
|
id="resetVerilogCode"
|
|
>
|
|
Reset Code
|
|
</button>
|
|
<button
|
|
class="largeButton btn logixButton btn-xs custom-btn--primary"
|
|
id="saveVerilogCode"
|
|
>
|
|
Save Code
|
|
</button>
|
|
<div id="verilogOutput">
|
|
This is an experimental module. The code is not saved unless the
|
|
"Save Code" button is clicked.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="moduleProperty noSelect effect1 properties-panel draggable-panel draggable-panel-css guide_2"
|
|
id="moduleProperty"
|
|
>
|
|
<div id="moduleProperty-title" class="noSelect panel-header">
|
|
Properties
|
|
<span class="fas fa-minus-square minimize"></span>
|
|
<span class="fas fa-external-link-square-alt maximize"></span>
|
|
</div>
|
|
<div class="panel-body"><div id="moduleProperty-inner"></div></div>
|
|
</div>
|
|
<div id="customShortcutDialog" title="Keybinding Preference"></div>
|
|
<div id="layoutDialog" class="draggable-panel draggable-panel-css">
|
|
<div class="panel-header">
|
|
Layout
|
|
<span class="fas fa-minus-square minimize"></span>
|
|
<span class="fas fa-external-link-square-alt maximize"></span>
|
|
</div>
|
|
<div class="layout-body panel-body" id="layout-body">
|
|
<div class="">
|
|
<button
|
|
class="zoomButton btn-lg"
|
|
id="decreaseLayoutWidth"
|
|
title="Decrease Width"
|
|
>
|
|
<span class="fa fa-minus" aria-hidden="true"></span>
|
|
</button>
|
|
<span>Width</span>
|
|
<button
|
|
class="zoomButton btn-lg"
|
|
id="increaseLayoutWidth"
|
|
title="Increase Width"
|
|
>
|
|
<span class="fa fa-plus" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div class="">
|
|
<button
|
|
class="zoomButton btn-lg"
|
|
id="decreaseLayoutHeight"
|
|
title="Decrease Height"
|
|
>
|
|
<span class="fa fa-minus" aria-hidden="true"></span>
|
|
</button>
|
|
<span>Height</span>
|
|
<button
|
|
class="zoomButton btn-lg"
|
|
id="increaseLayoutHeight"
|
|
title="Increase Height"
|
|
>
|
|
<span class="fa fa-plus" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div class="">
|
|
<span>Reset all nodes:</span>
|
|
<button class="zoomButton btn-lg" id="layoutResetNodes">
|
|
<span class="fa fa-sync" aria-hidden="true" title="Reset"></span>
|
|
</button>
|
|
</div>
|
|
<div class="layout-title">
|
|
<span>Title</span>
|
|
<div class="layout--btn-group">
|
|
<button class="zoomButton-up btn-lg no-select" id="layoutTitleUp">
|
|
<svg
|
|
id="Group_304"
|
|
data-name="Group 304"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="30"
|
|
height="30"
|
|
viewBox="0 0 30 30"
|
|
>
|
|
<g
|
|
id="Rectangle_1072"
|
|
data-name="Rectangle 1072"
|
|
fill="none"
|
|
stroke="#f1f9ff"
|
|
stroke-width="2"
|
|
>
|
|
<rect width="30" height="30" rx="10" stroke="none" />
|
|
<rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
|
|
</g>
|
|
<path
|
|
id="Path_36"
|
|
data-name="Path 36"
|
|
d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z"
|
|
transform="translate(19.4 17.755) rotate(180)"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="zoomButton-down btn-lg no-select"
|
|
id="layoutTitleDown"
|
|
>
|
|
<svg
|
|
id="Group_305"
|
|
data-name="Group 305"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="30"
|
|
height="30"
|
|
viewBox="0 0 30 30"
|
|
>
|
|
<g
|
|
id="Rectangle_1072"
|
|
data-name="Rectangle 1072"
|
|
fill="none"
|
|
stroke="#f1f9ff"
|
|
stroke-width="2"
|
|
>
|
|
<rect width="30" height="30" rx="10" stroke="none" />
|
|
<rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
|
|
</g>
|
|
<path
|
|
id="Path_36"
|
|
data-name="Path 36"
|
|
d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z"
|
|
transform="translate(10 11.655)"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="zoomButton-left btn-lg no-select"
|
|
id="layoutTitleLeft"
|
|
>
|
|
<svg
|
|
id="Group_306"
|
|
data-name="Group 306"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="30"
|
|
height="30"
|
|
viewBox="0 0 30 30"
|
|
>
|
|
<g
|
|
id="Rectangle_1072"
|
|
data-name="Rectangle 1072"
|
|
fill="none"
|
|
stroke="#f1f9ff"
|
|
stroke-width="2"
|
|
>
|
|
<rect width="30" height="30" rx="10" stroke="none" />
|
|
<rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
|
|
</g>
|
|
<path
|
|
id="Path_36"
|
|
data-name="Path 36"
|
|
d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z"
|
|
transform="translate(18.1 9.655) rotate(90)"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="zoomButton-right btn-lg no-select"
|
|
id="layoutTitleRight"
|
|
>
|
|
<svg
|
|
id="Group_307"
|
|
data-name="Group 307"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="30"
|
|
height="30"
|
|
viewBox="0 0 30 30"
|
|
>
|
|
<g
|
|
id="Rectangle_1072"
|
|
data-name="Rectangle 1072"
|
|
fill="none"
|
|
stroke="#f1f9ff"
|
|
stroke-width="2"
|
|
>
|
|
<rect width="30" height="30" rx="10" stroke="none" />
|
|
<rect x="1" y="1" width="28" height="28" rx="9" fill="none" />
|
|
</g>
|
|
<path
|
|
id="Path_36"
|
|
data-name="Path 36"
|
|
d="M4.7,6.1,0,1.4,1.4,0,4.7,3.3,8,0,9.4,1.4Z"
|
|
transform="translate(12 19.055) rotate(-90)"
|
|
fill="#fff"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="layout-title--enable">
|
|
<span>Title Enabled:</span>
|
|
<label class="switch">
|
|
<input type="checkbox" checked id="toggleLayoutTitle" />
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="">
|
|
<button class="Layout-btn custom-btn--primary" id="saveLayout">
|
|
Save
|
|
</button>
|
|
|
|
<button class="Layout-btn custom-btn--tertiary" id="cancelLayout">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="saveImageDialog"
|
|
class="noSelect"
|
|
style="display: none"
|
|
title="Render Image"
|
|
>
|
|
<div class="download-dialog-section-1">
|
|
<label class="option custom-radio inline"
|
|
><input
|
|
type="radio"
|
|
name="imgType"
|
|
value="png"
|
|
checked="checked" />PNG<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="imgType" value="jpeg" />JPEG<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="imgType" value="svg" />SVG<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="imgType" value="bmp" />BMP<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="imgType" value="gif" />GIF<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="imgType" value="tiff" />TIFF<span></span
|
|
></label>
|
|
</div>
|
|
<div class="download-dialog-section-2">
|
|
<div
|
|
class="option inline btn-group btn-group-toggle"
|
|
style="border: none"
|
|
data-toggle="buttons"
|
|
>
|
|
<div class="btn" id="radio-full" role="button">
|
|
<input type="radio" name="view" value="full" /> Full Circuit View
|
|
</div>
|
|
<div class="btn active" id="radio-current" role="button">
|
|
<input
|
|
type="radio"
|
|
name="view"
|
|
value="current"
|
|
checked="checked"
|
|
/>Current View
|
|
</div>
|
|
</div>
|
|
<div class="download-dialog-section-2_2">
|
|
<label class="cb-checkbox"
|
|
><input
|
|
type="checkbox"
|
|
name="transparent"
|
|
value="transparent"
|
|
/>Transparent Background</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="download-dialog-section-3">
|
|
<span>Resolution:</span>
|
|
<label class="option custom-radio inline"
|
|
><input
|
|
type="radio"
|
|
name="resolution"
|
|
value="1"
|
|
checked="checked" />1x<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="resolution" value="2" />2x<span></span
|
|
></label>
|
|
<label class="option custom-radio inline"
|
|
><input type="radio" name="resolution" value="4" />4x<span></span
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="colorThemesDialog"
|
|
class="customScroll colorThemesDialog"
|
|
tabindex="0"
|
|
style="display: none"
|
|
title="Select Theme"
|
|
></div>
|
|
|
|
<div class="simulation" id="simulation">
|
|
<div id="restrictedDiv" class="alert alert-danger display--none"></div>
|
|
<div class="canvasArea" id="canvasArea" style="height: 100%">
|
|
<canvas
|
|
id="backgroundArea"
|
|
style="
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
"
|
|
></canvas>
|
|
<canvas
|
|
id="simulationArea"
|
|
style="
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
"
|
|
></canvas>
|
|
<div id="miniMap">
|
|
<canvas
|
|
id="miniMapArea"
|
|
style="position: absolute; left: 0; top: 0; z-index: 3"
|
|
></canvas>
|
|
</div>
|
|
<div id="contextMenu" oncontextmenu="return false;">
|
|
<ul>
|
|
<li onclick="menuItemClicked(2)">Paste</li>
|
|
<li onclick="menuItemClicked(0)">Copy</li>
|
|
<li onclick="menuItemClicked(1)">Cut</li>
|
|
<li onclick="menuItemClicked(3)">Delete</li>
|
|
<li onclick="menuItemClicked(4)">Undo</li>
|
|
<li onclick="menuItemClicked(5)">New Circuit</li>
|
|
<li onclick="menuItemClicked(6)">Insert SubCircuit</li>
|
|
<li onclick="menuItemClicked(7)">Center Focus</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Help"></div>
|
|
<div
|
|
class="sk-folding-cube loadingIcon"
|
|
style="
|
|
display: none;
|
|
position: absolute;
|
|
right: 50%;
|
|
bottom: 50%;
|
|
z-index: 100;
|
|
"
|
|
>
|
|
<div class="sk-cube1 sk-cube"></div>
|
|
<div class="sk-cube2 sk-cube"></div>
|
|
<div class="sk-cube4 sk-cube"></div>
|
|
<div class="sk-cube3 sk-cube"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="combinationalAnalysis"
|
|
style="display: none"
|
|
title="BooleanLogicTable"
|
|
></div>
|
|
|
|
<div
|
|
id="insertSubcircuitDialog"
|
|
class="subcircuitdialog"
|
|
title="Insert SubCircuit"
|
|
></div>
|
|
|
|
<div
|
|
id="openProjectDialog"
|
|
style="display: none"
|
|
title="Open Project"
|
|
></div>
|
|
|
|
<div
|
|
id="bitconverterprompt"
|
|
title="Dec-Bin-Hex-Converter"
|
|
style="display: none"
|
|
>
|
|
<label>Decimal value</label><br /><input
|
|
type="text"
|
|
id="decimalInput"
|
|
value="16"
|
|
label="Decimal"
|
|
name="text1"
|
|
/><br /><br />
|
|
<label>Binary value</label><br /><input
|
|
type="text"
|
|
id="binaryInput"
|
|
value="0b10000"
|
|
label="Binary"
|
|
name="text1"
|
|
/><br /><br />
|
|
<label>Binary-coded decimal value</label><br /><input
|
|
type="text"
|
|
id="bcdInput"
|
|
value="10110"
|
|
label="BCD"
|
|
name="text1"
|
|
/><br /><br />
|
|
<label>Octal value</label><br /><input
|
|
type="text"
|
|
id="octalInput"
|
|
value="020"
|
|
label="Octal"
|
|
name="text1"
|
|
/><br /><br />
|
|
<label>Hexadecimal value</label><br /><input
|
|
type="text"
|
|
id="hexInput"
|
|
value="0x10"
|
|
label="Hex"
|
|
name="text1"
|
|
/><br /><br />
|
|
</div>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/css/restrictedElements.css" />
|
|
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
|
crossorigin="anonymous"
|
|
></script>
|
|
|
|
<script>
|
|
const embed = false;
|
|
const __logix_project_id = "0";
|
|
var projectSaved = true;
|
|
var listenToSimulator = true;
|
|
restrictedElements = [];
|
|
|
|
$(".dropdown-toggle").hover(function () {
|
|
$(".dropdown.open").removeClass("open");
|
|
$(this).parent(".dropdown").addClass("open");
|
|
});
|
|
</script>
|
|
|
|
<script src="/packs/simulator.js"></script>
|
|
<script src="/js/plugins/jquery.twbs-toggle-buttons.min.js"></script>
|
|
<script src="/js/plugins/checkBo.min.js"></script>
|
|
<script src="/js/plugins/bootstrap-input-spinner.js"></script>
|
|
<script type="text/javascript" src="/js/metadata.json"></script>
|
|
|
|
<script>
|
|
$(document).tooltip({
|
|
show: null,
|
|
track: true,
|
|
hide: false,
|
|
tooltipClass: "custom-tooltip-styling"
|
|
});
|
|
|
|
$(function () {
|
|
$(".btn-group-toggle").twbsToggleButtons();
|
|
});
|
|
|
|
$(function () {
|
|
$("#openProjectDialog").checkBo();
|
|
$(".download-dialog-section-2_2").checkBo();
|
|
});
|
|
|
|
function old_ui_redirect() {
|
|
window.location.href = window.location.href.replace(
|
|
"/simulator",
|
|
"/simulator_old"
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<script src="/js/data.js"></script>
|
|
</body>
|
|
</html>
|