Skip to content

支持动态增删天体输入行 #14

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

Merged
cheanus merged 1 commit into from
May 8, 2026
Merged

支持动态增删天体输入行 #14

Show file tree
Hide file tree
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
10 changes: 5 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

124 changes: 119 additions & 5 deletions src/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,31 @@ td:hover {
background-color: #1d2430;
}

.inputTable .col-seq {
width: 5%;
}

.inputTable .col-name {
width: 17%;
}

.inputTable .col-hour-angle {
width: 23%;
}

.inputTable .col-declination {
width: 18%;
}

.inputTable .col-x,
.inputTable .col-y {
width: 13%;
}

.inputTable .col-action {
width: 10%;
}

h1 {
font-size: 24px;
padding-left: 5px;
Expand All @@ -37,7 +62,7 @@ input.table {
text-align: center;
background-color: #1d2d46;
border: 0px;
color: white
color: white;
}

input.table:hover {
Expand All @@ -52,7 +77,7 @@ input[type=text] {
text-align: center;
background-color: #1d2d46;
border: 0px;
color: white
color: white;
}

a:link {
Expand Down Expand Up @@ -191,6 +216,48 @@ a:visited {
outline-offset: -8px;
}

.canvasInfoBar {
display: flex;
flex-direction: column;
gap: 2px;
min-height: 44px;
margin-bottom: 30px;
}

.canvasMetaBar,
.canvasStatusBar {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}

.canvasMetaBar {
justify-content: space-between;
width: 100%;
}

.canvasStatusBar {
flex-wrap: wrap;
}

#picInfo,
#canvasStatus,
#celeStatus {
min-height: 20px;
}

#picInfo {
flex: 1;
}

#cursorCrd {
flex: 0 0 150px;
min-height: 20px;
text-align: right;
white-space: nowrap;
}

.outputColumn {
margin-top: 15px;
margin-bottom: 15px;
Expand Down Expand Up @@ -245,6 +312,39 @@ a:visited {
background-color: #194837;
}

.actionButton.is-disabled {
opacity: 0.45;
filter: grayscale(65%);
}

.actionButton.is-disabled:hover {
background-color: #187C54;
}

.tableActionButton,
.addCeleRowButton {
border: 1px solid #189c65;
border-radius: 4px;
background-color: #187C54;
color: white;
cursor: pointer;
}

.tableActionButton {
padding: 2px 6px;
font-size: 12px;
}

.tableActionButton:hover,
.addCeleRowButton:hover {
background-color: #189c65;
}

.addCeleRowButton {
margin-top: 6px;
padding: 4px 12px;
}

.helpButton {
color: white;
border: 2px solid #2150B7;
Expand Down Expand Up @@ -318,12 +418,26 @@ a:visited {
width: 90%;
}

.celesNameInput {
display: block;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
padding: 2px 4px;
}

.formatedInput {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
height: 100%;
white-space: nowrap;
}

.formatedInput div {
flex: 1;
min-width: 22px;
text-align: center;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
Expand Down Expand Up @@ -443,14 +557,14 @@ a:visited {
-ms-flex: 0 0 90%;
flex: 0 0 90%;
max-width: 90%;
margin-left: -1px
margin-left: -1px;
}

.col-calcul {
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
margin: 0px
margin: 0px;
}

.col-acknow {
Expand Down
112 changes: 37 additions & 75 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,25 +78,40 @@ <h2>测量</h2>
<div id="box" style="min-width:450px; height: 600px; width:100%">
<canvas id="canvas"></canvas>
</div>
<div style="margin-bottom: 30px;">
<div id="picInfo" style="float: left;"></div>
<div id="canvasStatus" style="float: left;"></div>
<div id="cursorCrd" style="float: right;"></div>
<div class="canvasInfoBar">
<div class="canvasMetaBar">
<div id="picInfo"></div>
<div id="cursorCrd"></div>
</div>
<div class="canvasStatusBar">
<div id="canvasStatus"></div>
<div id="celeStatus"></div>
</div>
</div>
<div style="margin-top: 15px;">
<div class="row">
<div class="col-input">
<table class="inputTable" id="inputTable">
<colgroup>
<col class="col-seq">
<col class="col-name">
<col class="col-hour-angle">
<col class="col-declination">
<col class="col-x">
<col class="col-y">
<col class="col-action">
</colgroup>
<tr>
<th style="width: 8%" class="tooltip">序号<span class="tooltiptext">天体的序号</span></th>
<th style="width: 20%" class="tooltip">天体名称<span
<th class="tooltip">序号<span class="tooltiptext">天体的序号</span></th>
<th class="tooltip">天体名称<span
class="tooltiptext">天体的名称，中英文皆可；中文在星座名和希腊字母之间需要加上空格</span></th>
<th style="width: 25%" class="tooltip">参考时角<span
<th class="tooltip">参考时角<span
class="tooltiptext">在0°经线读取的天体时角，可以用于计算GP点经度</span></th>
<th style="width: 20%" class="tooltip">赤纬<span class="tooltiptext">天体的赤纬，即GP点的纬度</span>
<th class="tooltip">赤纬<span class="tooltiptext">天体的赤纬，即GP点的纬度</span>
</th>
<th style="width: 12%" class="tooltip">x<span class="tooltiptext">天体在照片中的横坐标</span></th>
<th style="width: 12%" class="tooltip">y<span class="tooltiptext">天体在照片中的纵坐标</span></th>
<th class="tooltip">x<span class="tooltiptext">天体在照片中的横坐标</span></th>
<th class="tooltip">y<span class="tooltiptext">天体在照片中的纵坐标</span></th>
<th class="tooltip">操作<span class="tooltiptext">添加或删除天体行</span></th>
</tr>
<tr>
<td class="zenith">0</td>
Expand All @@ -107,11 +122,12 @@ <h2>测量</h2>
</td>
<td><input type="number" class="coordsInput zenith table" id="zenY" aria-label="天顶y" />
</td>
<td class="zenith">N/A</td>
</tr>
<tr>
<td>1</td>
<td>
<input type="text" autocomplete="new-password" style="flex: 1;" id="name1"
<input type="text" autocomplete="new-password" class="celesNameInput table" id="name1"
aria-label="name">
</td>
<td>
Expand All @@ -136,11 +152,12 @@ <h2>测量</h2>
</td>
<td><input type="number" class="coordsInput table" id="coordX1" aria-label="x" /></td>
<td><input type="number" class="coordsInput table" id="coordY1" aria-label="y" /></td>
<td><button type="button" class="tableActionButton removeCeleRow" data-star-id="1">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" autocomplete="new-password" style="flex: 1;" id="name2"
<input type="text" autocomplete="new-password" class="celesNameInput table" id="name2"
aria-label="name">
</td>
<td>
Expand All @@ -165,11 +182,12 @@ <h2>测量</h2>
</td>
<td><input type="number" class="coordsInput table" id="coordX2" aria-label="x" /></td>
<td><input type="number" class="coordsInput table" id="coordY2" aria-label="y" /></td>
<td><button type="button" class="tableActionButton removeCeleRow" data-star-id="2">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" autocomplete="new-password" style="flex: 1;" id="name3"
<input type="text" autocomplete="new-password" class="celesNameInput table" id="name3"
aria-label="name">
</td>
<td>
Expand All @@ -194,66 +212,10 @@ <h2>测量</h2>
</td>
<td><input type="number" class="coordsInput table" id="coordX3" aria-label="x" /></td>
<td><input type="number" class="coordsInput table" id="coordY3" aria-label="y" /></td>
</tr>
<tr>
<td>4</td>
<td>
<input type="text" autocomplete="new-password" style="flex: 1;" id="name4"
aria-label="name">
</td>
<td>
<div class="formatedInput">
<div contenteditable="true" id="hAngleH4"></div>
h
<div contenteditable="true" id="hAngleM4"></div>
m
<div contenteditable="true" id="hAngleS4"></div>
s
</div>
</td>
<td>
<div class="formatedInput">
<div contenteditable="true" id="declinD4"></div>
°
<div contenteditable="true" id="declinM4"></div>
′
<div contenteditable="true" id="declinS4"></div>
″
</div>
</td>
<td><input type="number" class="coordsInput table" id="coordX4" aria-label="x" /></td>
<td><input type="number" class="coordsInput table" id="coordY4" aria-label="y" /></td>
</tr>
<tr>
<td>5</td>
<td>
<input type="text" autocomplete="new-password" style="flex: 1;" id="name5"
aria-label="name">
</td>
<td>
<div class="formatedInput">
<div contenteditable="true" id="hAngleH5"></div>
h
<div contenteditable="true" id="hAngleM5"></div>
m
<div contenteditable="true" id="hAngleS5"></div>
s
</div>
</td>
<td>
<div class="formatedInput">
<div contenteditable="true" id="declinD5"></div>
°
<div contenteditable="true" id="declinM5"></div>
′
<div contenteditable="true" id="declinS5"></div>
″
</div>
</td>
<td><input type="number" class="coordsInput table" id="coordX5" aria-label="x" /></td>
<td><input type="number" class="coordsInput table" id="coordY5" aria-label="y" /></td>
<td><button type="button" class="tableActionButton removeCeleRow" data-star-id="3">删除</button></td>
</tr>
</table>
<button type="button" class="addCeleRowButton" id="addCeleRow">添加天体</button>
</div>
<div class="col-calcul">
<button type="button" class="calculButton" id="actionCalcul" title="计算">
Expand Down Expand Up @@ -318,10 +280,10 @@ <h2>关于</h2>
<div class="col-acknow">
感谢开源项目（完整名单见<a href="https://github.com/BengbuGuards/StarLocator/blob/main/NOTICE.md">NOTICE</a>）：
<ul>
<li><a href="https://stellarium.org">Stellarium</a>：一款强大的开源天文馆软件</li>
<li><a href="https://github.com/cosinekitty/astronomy">Astronomy</a>：一个支持多编程语言的天文计算库</li>
<li><a href="https://github.com/fabricjs/fabric.js">Fabric.js</a>：一个简单而强大的 JavaScript HTML5 画布库。</li>
<li><a href="https://simbad.cds.unistra.fr/simbad">SIMBAD</a>：一个天体数据库</li>
<li><a href="https://stellarium.org">Stellarium</a>：开源天文馆软件</li>
<li><a href="https://github.com/cosinekitty/astronomy">Astronomy</a>：支持多编程语言的天文计算库</li>
<li><a href="https://github.com/fabricjs/fabric.js">Fabric.js</a>：JavaScript HTML5 画布库</li>
<li><a href="https://simbad.cds.unistra.fr/simbad">SIMBAD</a>：天体数据库</li>
</ul>
</div>
<div class="col-logo">
Expand Down
Loading
Loading