feat: add rtsp snapshot calibrator

2026-04-27 11:12:00 +08:00
parent 36dc3548e6
commit b3672c564a
8 changed files with 715 additions and 0 deletions
--- a/tools/calibrator/style.css
+++ b/tools/calibrator/style.css
@@ -0,0 +1,186 @@
+:root {
+  color-scheme: light;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #f4f6f8;
+  color: #17202a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 1px solid #9aa7b3;
+  background: #ffffff;
+  color: #17202a;
+  border-radius: 6px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #edf2f7;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+  padding: 16px 20px;
+  background: #ffffff;
+  border-bottom: 1px solid #d9e0e7;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 20px;
+}
+
+h2 {
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.topbar p,
+.hint,
+#status {
+  color: #5d6b78;
+  font-size: 13px;
+}
+
+.capture {
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) auto minmax(180px, auto);
+  gap: 12px;
+  align-items: end;
+  padding: 14px 20px;
+  background: #ffffff;
+  border-bottom: 1px solid #d9e0e7;
+}
+
+.capture label {
+  display: grid;
+  gap: 6px;
+  font-size: 13px;
+  color: #344454;
+}
+
+.capture input {
+  width: 100%;
+  border: 1px solid #9aa7b3;
+  border-radius: 6px;
+  padding: 9px 10px;
+}
+
+.workspace {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 220px minmax(420px, 1fr) 340px;
+  gap: 12px;
+  padding: 12px;
+}
+
+.panel {
+  background: #ffffff;
+  border: 1px solid #d9e0e7;
+  border-radius: 8px;
+  padding: 12px;
+  min-height: 0;
+}
+
+.zone-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.zone-button {
+  min-height: 36px;
+}
+
+.zone-button.active {
+  background: #1f6feb;
+  border-color: #1f6feb;
+  color: #ffffff;
+}
+
+.zone-button.done::after {
+  content: " ✓";
+}
+
+.actions {
+  display: grid;
+  gap: 8px;
+  margin: 14px 0;
+}
+
+.canvas-wrap {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #202832;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+canvas {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #111820;
+  cursor: crosshair;
+}
+
+.output-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+textarea {
+  flex: 1;
+  width: 100%;
+  min-height: 420px;
+  resize: none;
+  border: 1px solid #9aa7b3;
+  border-radius: 6px;
+  padding: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+@media (max-width: 1100px) {
+  .workspace {
+    grid-template-columns: 190px minmax(360px, 1fr);
+  }
+
+  .output-panel {
+    grid-column: 1 / -1;
+    min-height: 260px;
+  }
+}