Skip to content

change bitmap editor HTML, cleaner comapare like the prev #600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

change bitmap editor HTML, cleaner comapare like the prev #600

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 100 additions & 147 deletions web/public/bitmap_editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@
console.log(error);
Reset();
}
ChangeCodeType();
}

function createGrid() {
Expand Down Expand Up @@ -586,17 +587,10 @@
}

generateCode = document.getElementById("generatedCode");
let subroutineName = document.getElementById("subroutineName").value;
if (document.getElementById("changeNameOnShift").checked) {
subroutineName =
subroutineName +
(Math.abs(currentJShift) / marginSaveFrames).toString();
}
let subroutineName = "draw";

if (document.getElementById("jackCode").checked) {
if (currentCodeMode === "jack") {
let subroutineType = "function";
if (document.getElementById("methodSubroutine").checked)
subroutineType = "method";

generateCode.value =
subroutineType +
Expand Down Expand Up @@ -863,24 +857,28 @@
}
}

function ChangeName() {
if (document.getElementById("subroutineName").value == "")
document.getElementById("subroutineName").value = "draw";
GenerateCode(true);
}
function ChangeCodeType() {
if (document.getElementById("hackAssemblyCode").checked) {
document.getElementById("baseTopLeft").click();
document.getElementById("baseBottomLeft").disabled = true;
document.getElementById("codeTypeHeader").textContent =
"Generated Hack Assembly";
if (currentCodeMode === "hack") {
document.getElementById("hackTab").classList.add("active");
document.getElementById("jackTab").classList.remove("active");
} else {
document.getElementById("baseBottomLeft").disabled = false;
document.getElementById("codeTypeHeader").textContent =
"Generated Jack Code";
document.getElementById("jackTab").classList.add("active");
document.getElementById("hackTab").classList.remove("active");
}
GenerateCode();
}
// I made this global for ezier...
var currentCodeMode = "jack";

// convenience helpers for toggle controls
function SwitchToHack() {
currentCodeMode = "hack";
ChangeCodeType();
}
function SwitchToJack() {
currentCodeMode = "jack";
ChangeCodeType();
}
function UpdateMarginType() {
if (document.getElementById("fitToDrawing").checked) {
document.getElementById("marginSaveFramestd").hidden = false;
Expand All @@ -898,25 +896,97 @@
GenerateCode();
}
</script>
<style>
.tab-button {
padding: 5px 10px;
border: 1px solid #ccc;
background-color: #f0f0f0;
cursor: pointer;
margin-bottom: -1px;
position: relative;
border-radius: 5px 5px 0 0;
}
.tab-button.active {
background-color: white;
border-bottom: 1px solid white;
}
</style>

<!--
SPDX-FileCopyrightText: 2013 Golan Parashi
SPDX-FileCopyrightText: 2023 Erik Umble, <[email protected]>
SPDX-License-Identifier: MIT
--></head>
-->
</head>
<body onload="onLoad();">
<h1>Jack Bitmap Editor v2.9</h1>
<p>
See <a href="https://github.com/ErikUmble/JackBitmapEditor">here</a> for
updates, feature documentation, and contributions.
Use this tool for drawing bitmap images and generating Hack or Jack code.
<br />
Then copy-paste the generated code into your Hack or Jack program. Change
the generated label / function name, as needed.
</p>
<p></p>
<table>
<thead>
<tr>
<th align="left">Bitmap</th>
<th align="left">
<span id="codeTypeHeader">Generated Jack Code</span>
<div>
<label for="inputWidth">Canvas Size:</label>
<input
id="inputWidth"
placeholder="width"
maxlength="3"
size="3"
type="text"
value="48"
/>
x
<input
id="inputHeight"
placeholder="height"
maxlength="3"
size="3"
type="text"
value="32"
/>

<label for="pixelSize">Canvas pixel size: </label>
<input
id="pixelSize"
placeholder="px"
maxlength="2"
size="1"
type="text"
value="16"
/>

<button
title="Resize Canvas Preserving Upper-left Contents"
onclick="SetSize()"
>
Resize
</button>
<button
title="Reset Canvas Size, Settings, and Clear Contents"
onclick="Reset()"
>
Reset
</button>
</div>
</th>
<th align="left">
<div class="tab-container">
<button
id="jackTab"
class="tab-button active"
onclick="SwitchToJack()"
>
Generated Jack Code
</button>
<button id="hackTab" class="tab-button" onclick="SwitchToHack()">
Generated Hack Assembly
</button>
</div>
</th>
</tr>
<div id="style_stuff"></div>
Expand Down Expand Up @@ -1024,57 +1094,6 @@ <h1>Jack Bitmap Editor v2.9</h1>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td>
<form action="javascript:ResetSize()">
<label for="inputWidth">Canvase Size: </label>
<input
id="inputWidth"
placeholder="width"
maxlength="3"
size="3"
type="text"
value="48"
/>
x
<input
id="inputHeight"
placeholder="height"
maxlength="3"
size="3"
type="text"
value="32"
/>

<label for="pixelSize">Canvas pixel size: </label>
<input
id="pixelSize"
placeholder="px"
maxlength="2"
size="1"
type="text"
value="16"
/>

<button
title="Resize Canvas Preserving Upper-left Contents"
formaction="javascript:SetSize()"
>
Resize
</button>
<button
title="Reset Canvas Size, Settings, and Clear Contents"
formaction="javascript:Reset()"
>
Reset
</button>
</form>
</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
Expand Down Expand Up @@ -1121,6 +1140,7 @@ <h1>Jack Bitmap Editor v2.9</h1>
</tr>
</table>
</tr>

<tr>
<table>
<tr>
Expand All @@ -1134,7 +1154,6 @@ <h1>Jack Bitmap Editor v2.9</h1>
type="radio"
/>
<label for="baseTopLeft">Top Left</label>

<input
id="baseBottomLeft"
name="baseRowFrom"
Expand All @@ -1146,74 +1165,8 @@ <h1>Jack Bitmap Editor v2.9</h1>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td align="center">
<form action="javascript:ChangeName()">
<label for="subroutineName">Subroutine Name: </label>
<input
id="subroutineName"
placeholder="name"
type="text"
value="draw"
/>
<button>Generate Code</button>
</form>
</td>
<td align="center">
<input
checked
id="functionSubroutine"
name="subroutineType"
onclick="GenerateCode()"
type="radio"
/>
<label for="functionSubroutine">function</label>

<input
id="methodSubroutine"
name="subroutineType"
onclick="GenerateCode()"
type="radio"
/>
<label for="methodSubroutine">method</label>
</td>
<td align="center">
<input
id="changeNameOnShift"
onclick="GenerateCode()"
type="checkbox"
/><label for="pauseCode">Change name with horizontal shift</label>
</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td align="center">
<input
checked
id="jackCode"
name="codeType"
onclick="ChangeCodeType()"
type="radio"
/>
<label for="jackCode">Jack</label>

<input
id="hackAssemblyCode"
name="codeType"
onclick="ChangeCodeType()"
type="radio"
/>
<label for="hackAssemblyCode">Hack Assembly</label>
</td>
</tr>
</table>
</tr>
</table>

<style>
.fileButton label {
display: block;
Expand Down