15 |
16 | 
14 |
15 | **Inside Pyra Core's main loop:**
16 |
17 | - The Core will infinitely loop over the modules `MeasurementConditions`, `EnclosureControl`, `SunTracking`, `OpusMeasurements`, and `SystemChecks`
18 | - The Core will start the Upload- and Helios-Thread when they should be running but are not
19 | - The threads will stop themselves based on the config
20 |
21 | **The communication via the `state.json` file:**
22 |
23 | 
27 |
28 |
27 | PYRA has not been found on your system.{' '}
28 |
30 |
31 | 
11 |
12 | Pyra bridges the gap between the components required to automate your EM27/SUN setup. Based on certain conditions - time, sun angle, or sun condition (see [User Guide > TUM PLC and Helios](/docs/user-guide/tum-enclosure-and-helios)) - Pyra decides whether to perform measurements or not. This decision can also be outsourced to your own logic and passed to Pyra via CLI commands or done manually with a button in the UI (see [User Guide > Measurement Modes](/docs/user-guide/measurement-modes)).
13 |
14 | 
15 |
16 | Pyra monitors the measurement process and operating system stability (disk space, CPU usage, etc.), permanently logs its activity, and sends emails when errors occur/have been resolved.
17 |
--------------------------------------------------------------------------------
/packages/docs/docs/user-guide/measurement-modes.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 4
3 | sidebar_label: Measurement Modes
4 | hide_table_of_contents: true
5 | ---
6 |
7 | # Measurement Modes
8 |
9 | The **"measurement decision"** (whether measurements should run or not) depends on the **"measurement mode"**:
10 |
11 | - **Automatic mode:** Measurement decision is made based on defined triggers (see below)
12 | - **Manual mode:** A start/stop button for manual control
13 | - **CLI mode:** The config contains a field where the CLI can add a decision result
14 |
15 | Pyra's measurement mode can be selected in the overview tab. In the logs and the codebase, this system of determining whether to measure or not is called **Condition Assessment System (CAS)**.
16 |
17 | 
18 |
19 | ## Automatic Mode
20 |
21 | In automatic mode, Pyra does measurements when certain conditions are met:
22 |
23 | - start/stop time
24 | - minimum sun elevation
25 | - Helios
26 |
27 | In the configuration tab, you can select measurement triggers that should be considered in automatic mode. When multiple triggers are set, all triggers must be positive to start measurements (e.g., "above a certain sun elevation AND between start and end time").
28 |
29 | 
30 |
31 | **Helios** is our module to determine whether direct sunlight (required by the EM27/SUN) is present. Please read about it [here](/docs/user-guide/tum-enclosure-and-helios).
32 |
33 | ## Manual Mode
34 |
35 | In manual mode, the system will always measure when the sun is about the value configured at `config.general.min_sun_elevation` (you can set this to negative values too).
36 |
37 | ## CLI Mode
38 |
39 | CLI mode can be used when you have already built a system that evaluates measurement conditions and want to tell Pyra when to start and stop measurements from an external source. Respective CLI commands are in the [next section](#cli-command-line-interface).
40 |
--------------------------------------------------------------------------------
/packages/docs/docs/user-guide/tum-enclosure-and-helios.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 8
3 | hide_table_of_contents: true
4 | ---
5 |
6 | # TUM Enclosure & Helios
7 |
8 | The TUM weather protection enclosure and Helios setup hardware are not available to buy off the shelf yet. Please [contact us](/docs/intro/contact) if you want to acquire our hardware.
9 |
10 | 
11 |
12 | The TUM hardware used by [MUCCnet](https://atmosphere.ei.tum.de/) has been described in [Dietrich et al. 2021 (doi.org/10.5194/amt-14-1111-2021)](https://doi.org/10.5194/amt-14-1111-2021) and [Heinle et al. 2018 (doi.org/10.5194/amt-11-2173-2018)](https://doi.org/10.5194/amt-11-2173-2018).
13 |
14 | :::tip
15 |
16 | Pyra does not have power over the PLC concerning safety-related functions. When the PLC is in the "rain was detected" state, the cover will move to its parking position at 0°. Pyra (or any other process on the PC) cannot change that state or move the cover out of the parking position.
17 |
18 | :::
19 |
20 | ## What does Helios do?
21 |
22 | Helios evaluates the current sun state - whether direct or diffuse sunlight exists. EM27/SUN applications require direct sunlight for measurement data to be useful. Additionally, CamTracker will lose track of the sun with very diffuse light conditions and requires a restart.
23 |
24 | The Helios hardware comprises a transparent globe with black stripes glued to it and a translucent milky glass with a camera pointing upwards attached below.
25 |
26 |
27 | 
31 |
32 |
33 | Helios will periodically take images with that camera, process them, and evaluate shadow conditions. The processing will detect the lens circle and cut off the outer 10% of the radius - a lot of unwanted shadows can occur on the edges due to dirt from the outside. Finally, it will use a canny edge filter and count the pixels where "fast transitions between light and dark" can be found. If the pixel count is above a certain threshold (configurable), the sunlight conditions are categorized as "good".
34 |
35 | Example images in **bad** conditions:
36 |
37 |
31 |
38 | 
42 | 
46 |
47 |
48 | Example images in **good** conditions:
49 |
50 |
42 |
46 |
51 | 
55 | 
59 |
60 |
--------------------------------------------------------------------------------
/packages/docs/docs/user-guide/upload.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 7
3 | sidebar_label: Upload
4 | hide_table_of_contents: true
5 | ---
6 |
7 | # Upload
8 |
9 | You can use this upload to transfer your interferograms, local pressure files, Pyra logs, helios images, or any other data generated day by day.
10 |
11 | You can upload daily directories like this:
12 |
13 | ```
14 | 📁 data-directory-1
15 | ├── 📁 20190101
16 | │ ├── 📄 file1.txt
17 | │ ├── 📄 file2.txt
18 | │ └── 📄 file3.txt
19 | └── 📁 20190102
20 | ├── 📄 file1.txt
21 | ├── 📄 file2.txt
22 | └── 📄 file3.txt
23 | ```
24 |
25 | Or daily files like this:
26 |
27 | ```
28 | 📁 data-directory-2
29 | ├── 📄 20190101.txt
30 | ├── 📄 20190102-a.txt
31 | ├── 📄 20190102-b.txt
32 | └── 📄 20190103.txt
33 | ```
34 |
35 | You just have to point the upload to one or more directories and specify a "date regex" - i.e., a regex that contains the symbols `%Y`, `%m`, and `%d` that matches your file/directory naming scheme.
36 |
37 | As long as the upload runs, there will be a file `data-directory-1/20190101/.do-not-touch` or `data-directory-2/.do-not-touch` that indicates that the upload is not finished yet. This file will be deleted after the checksum of the local and remote directory matches.
38 |
39 | Optionally, you can remove the local data, once the upload is done.
40 |
41 | You can read more about the `circadian-scp-upload` library [here](https://github.com/dostuffthatmatters/circadian-scp-upload). We have already uploaded about 8TB of data using this upload code and use it since 2022. The library has CI tests for all kinds of file system layouts - feel free to use it for your own projects :)
42 |
--------------------------------------------------------------------------------
/packages/docs/docs/user-guide/usage-overview.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | sidebar_position: 3
3 | sidebar_label: Usage Overview
4 | hide_table_of_contents: true
5 | ---
6 |
7 | # Usage Overview
8 |
9 | :::tip
10 |
11 | Starting and stopping measurements and controlling PYRA from another system/automation will be covered in the next section [Measurement Modes](/docs/user-guide/measurement-modes).
12 |
13 | :::
14 |
15 | ## Parts of Pyra
16 |
17 | The three parts of Pyra are:
18 |
19 | - **Pyra Core:** Running in the background, looping over all automation steps infinitely in a defined interval.
20 | - **Pyra CLI:** Command Line Interface (CLI) used to interact with Pyra Core
21 | - **Pyra UI:** Graphical user Interface (GUI) used to interact with Pyra Core and send Pyra CLI commands
22 |
23 | ## Pyra Core
24 |
25 | Please read the [Developer Guide](/docs/developer-guide/architecture) for an overview of how the core is implemented.
26 |
27 | ## GUI (Graphical User Interface)
28 |
29 | This is how the GUI looks. The tab "PLC Controls" only appears when you have configured the [TUM PLC](/docs/user-guide/tum-enclosure-and-helios).
30 |
31 |
55 |
59 |
32 |
33 | When changes are made to the `config.json` file directly (not from the GUI), a popup will appear, telling you to reload the window:
34 |
35 | 
36 |
37 | :::note
38 |
39 | We are currently experiencing a bug on some systems that the "config has changed, reload required" popup shows up when changes were made through the GUI. Also, the popup appears multiple times. This should be resolved in the future.
40 |
41 | The issue progress can be tracked here: https://github.com/tum-esm/pyra/issues/106
42 |
43 | :::
44 |
45 | ## Logs
46 |
47 | Pyra will store all of its activity in log files. The files `info.log` and `debug.log` will only contain logs from the past hour. Older log lines will be archived periodically to keep the main log files easy to parse.
48 |
49 | ```
50 | 📁 
65 |
66 | ## Error Emails
67 |
68 | Whenever Pyra encounters any errors, it sends out emails to a list of recipients. An "error resolved" email helps with self-resolving issues and team communication - so that others get notified when the problem is not present anymore.
69 |
70 | **When errors occur:**
71 |
72 | 
76 |
77 | **When errors are resolved:**
78 |
79 | 
83 |
84 | :::note
85 |
86 | The "CoverError" comes from the TUM PLC Module controlling our weather protection enclosure.
87 |
88 | :::
89 |
--------------------------------------------------------------------------------
/packages/docs/docusaurus.config.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | // Note: type annotations allow type checking and IDEs autocompletion
3 |
4 | const lightCodeTheme = require("prism-react-renderer/themes/github");
5 | const darkCodeTheme = require("prism-react-renderer/themes/dracula");
6 |
7 | async function createConfig() {
8 | const mdxMermaid = await import("mdx-mermaid");
9 |
10 | /** @type {import('@docusaurus/types').Config} */
11 | return {
12 | title: "PYRA 4",
13 | tagline: "operate an EM27 station autonomously",
14 | staticDirectories: ["static"],
15 | url: "https://your-docusaurus-test-site.com",
16 | baseUrl: "/",
17 | onBrokenLinks: "throw",
18 | onBrokenMarkdownLinks: "throw",
19 | favicon: "img/favicon.ico",
20 |
21 | // GitHub pages deployment config.
22 | organizationName: "tum-esm",
23 | projectName: "pyra",
24 |
25 | // Even if you don't use internalization, you can use this field to set useful
26 | // metadata like html lang.
27 | i18n: {
28 | defaultLocale: "en",
29 | locales: ["en"],
30 | },
31 |
32 | plugins: ["docusaurus-plugin-sass"],
33 |
34 | presets: [
35 | [
36 | "classic",
37 | /** @type {import('@docusaurus/preset-classic').Options} */
38 | ({
39 | docs: {
40 | sidebarPath: require.resolve("./sidebars.js"),
41 | // Remove this to remove the "edit this page" links.
42 | editUrl: "https://github.com/tum-esm/pyra/tree/main/website/",
43 | remarkPlugins: [mdxMermaid.default],
44 | },
45 | theme: {
46 | customCss: [
47 | require.resolve("./src/css/fonts.css"),
48 | require.resolve("./src/css/custom.scss"),
49 | ],
50 | },
51 | }),
52 | ],
53 | ],
54 |
55 | themeConfig:
56 | /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
57 | ({
58 | colorMode: {
59 | defaultMode: "light",
60 | disableSwitch: true,
61 | respectPrefersColorScheme: false,
62 | },
63 | navbar: {
64 | title: "PYRA 4",
65 | logo: {
66 | alt: "PYRA 4 Logo",
67 | src: "img/logo.svg",
68 | width: 32,
69 | height: 32,
70 | },
71 | items: [
72 | {
73 | href: "https://github.com/tum-esm/pyra",
74 | position: "right",
75 | className: "header-github-link",
76 | },
77 | ],
78 | hideOnScroll: true,
79 | },
80 | footer: {
81 | style: "dark",
82 | copyright: `© ${new Date().getFullYear()} - Associate Professorship of Environmental Sensing and Modeling - Technical University of Munich`,
83 | },
84 | prism: {
85 | theme: require("prism-react-renderer/themes/github"),
86 | additionalLanguages: ["python"],
87 | },
88 | algolia: {
89 | appId: "HVYNW5V940",
90 | apiKey: "6f156c973f748938883016d17df0fbf7", // public API key
91 | indexName: "pyra-4",
92 | searchPagePath: false,
93 | },
94 | }),
95 | };
96 | }
97 |
98 | module.exports = createConfig;
99 |
--------------------------------------------------------------------------------
/packages/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docs",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "docusaurus": "docusaurus",
7 | "dev": "docusaurus start",
8 | "build": "docusaurus build",
9 | "swizzle": "docusaurus swizzle",
10 | "deploy": "docusaurus deploy",
11 | "clear": "docusaurus clear",
12 | "serve": "docusaurus serve",
13 | "write-translations": "docusaurus write-translations",
14 | "write-heading-ids": "docusaurus write-heading-ids",
15 | "typecheck": "tsc"
16 | },
17 | "dependencies": {
18 | "@docusaurus/core": "^2.4.0",
19 | "@docusaurus/preset-classic": "^2.4.0",
20 | "@mdx-js/react": "^1.6.22",
21 | "@reduxjs/toolkit": "^1.9.3",
22 | "@tabler/icons-react": "^3.31.0",
23 | "@tauri-apps/api": "^1.2.0",
24 | "clsx": "^1.2.1",
25 | "deep-diff": "^1.0.2",
26 | "docusaurus-plugin-sass": "^0.2.3",
27 | "lodash": "^4.17.21",
28 | "mdx-mermaid": "^1.3.2",
29 | "mermaid": "^9.1.6",
30 | "moment": "^2.29.4",
31 | "prism-react-renderer": "^1.3.5",
32 | "react": "^18.2.0",
33 | "react-dom": "^18.2.0",
34 | "react-hot-toast": "^2.4.0",
35 | "react-redux": "^8.0.5",
36 | "sass": "^1.59.3",
37 | "socket.io-client": "^4.6.1",
38 | "typedoc": "^0.23.28",
39 | "typedoc-plugin-markdown": "^3.14.0"
40 | },
41 | "devDependencies": {
42 | "@docusaurus/module-type-aliases": "^2.4.0",
43 | "@tsconfig/docusaurus": "^1.0.5",
44 | "autoprefixer": "^10.4.8",
45 | "docusaurus-plugin-typedoc": "^0.18.0",
46 | "postcss": "^8.4.16",
47 | "tailwindcss": "^3.1.8",
48 | "typescript": "^4.7.4"
49 | },
50 | "browserslist": {
51 | "production": [
52 | ">0.5%",
53 | "not dead",
54 | "not op_mini all"
55 | ],
56 | "development": [
57 | "last 1 chrome version",
58 | "last 1 firefox version",
59 | "last 1 safari version"
60 | ]
61 | },
62 | "engines": {
63 | "node": ">=20.13"
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/packages/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/packages/docs/sidebars.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
4 | const sidebars = {
5 | tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
6 | };
7 |
8 | module.exports = sidebars;
9 |
--------------------------------------------------------------------------------
/packages/docs/src/components/github-label.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default function GitHubLabel(props: { text: string }): JSX.Element {
4 | return (
5 |
6 | {props.text}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/packages/docs/src/components/track-on-github.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import GitHubLabel from '@site/src/components/github-label';
4 |
5 | export default function TrackOnGitHub(props: {
6 | url: string;
7 | text: string;
8 | releaseDate?: string;
9 | }): JSX.Element {
10 | return (
11 |
12 |
16 | Track
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/packages/docs/src/css/components/navbar.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tum-esm/pyra/d24724f1c50b66db4f482426bf16515b5adffcae/packages/docs/src/css/components/navbar.scss
--------------------------------------------------------------------------------
/packages/docs/src/pages/index.module.css:
--------------------------------------------------------------------------------
1 | /**
2 | * CSS files with the .module.css suffix will be treated as CSS modules
3 | * and scoped locally.
4 | */
5 |
6 | .heroBanner {
7 | padding: 4rem 0;
8 | text-align: center;
9 | position: relative;
10 | overflow: hidden;
11 | }
12 |
13 | @media screen and (max-width: 996px) {
14 | .heroBanner {
15 | padding: 2rem;
16 | }
17 | }
18 |
19 | .buttons {
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
--------------------------------------------------------------------------------
/packages/docs/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Redirect } from 'react-router-dom';
3 |
4 | export default function Home() {
5 | return
3 | {props.children}
4 |
5 | );
6 |
7 | export default ConfigElementNote;
8 |
--------------------------------------------------------------------------------
/packages/ui/src/components/configuration/rows/config-element-text.tsx:
--------------------------------------------------------------------------------
1 | import { configurationComponents, essentialComponents } from '../..';
2 | import toast from 'react-hot-toast';
3 | import * as dialog from '@tauri-apps/plugin-dialog';
4 | import * as shell from '@tauri-apps/plugin-shell';
5 |
6 | export default function ConfigElementText(props: {
7 | title: string;
8 | value: string | number;
9 | oldValue: string | number | undefined;
10 | setValue(v: string | number): void;
11 | disabled?: boolean;
12 | numeric?: boolean;
13 | postfix?: string;
14 | showSelector?: 'file' | 'directory';
15 | }) {
16 | const { title, value, oldValue, setValue, disabled, numeric, postfix, showSelector } = props;
17 |
18 | async function triggerSelection() {
19 | const result: any = await dialog.open({
20 | title: 'PyRa 4 UI',
21 | multiple: false,
22 | directory: showSelector === 'directory',
23 | });
24 | if (result !== null) {
25 | setValue(result);
26 | }
27 | }
28 |
29 | function parseNumericValue(v: string): string {
30 | const parsedValue = `${v}`.replace(/[^\d\.\+\-]/g, '');
31 | if (parsedValue === '') {
32 | return '0';
33 | }
34 | return parsedValue;
35 | }
36 |
37 | async function openDirectory() {
38 | if (typeof value === 'string') {
39 | let path: string;
40 | if (value.includes('\\')) {
41 | path = value.split('\\').slice(0, -1).join('\\');
42 | } else {
43 | path = value.split('/').slice(0, -1).join('/');
44 | }
45 | await shell.open(path).catch(() => toast.error('Could not open directory'));
46 | }
47 | }
48 |
49 | let hasBeenModified: boolean;
50 | if (numeric) {
51 | hasBeenModified = oldValue !== (typeof value === 'string' ? parseFloat(value) : value);
52 | } else {
53 | hasBeenModified = oldValue !== value;
54 | }
55 |
56 | return (
57 |
59 | setValue(numeric ? parseNumericValue(v) : v)}
62 | postfix={postfix}
63 | />
64 | {showSelector && !disabled && (
65 | <>
66 |
67 | select
68 |
69 |
70 | show in explorer
71 |
72 |
73 | )}
74 |
75 |
25 | setValue({ ...value, hour: parseNumericValue(v) })}
28 | disabled={disabled}
29 | />
30 | :
31 | setValue({ ...value, minute: parseNumericValue(v) })}
34 | disabled={disabled}
35 | />
36 | :
37 | setValue({ ...value, second: parseNumericValue(v) })}
40 | disabled={disabled}
41 | />
42 |
43 |
12 |
22 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/packages/ui/src/components/configuration/saving-overlay.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '../ui/button';
2 |
3 | export default function SavingOverlay(props: {
4 | errorMessage: undefined | string;
5 | onSave(): void;
6 | onRevert(): void;
7 | isSaving: boolean;
8 | }) {
9 | return (
10 | {children}
23 |
11 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/packages/ui/src/components/configuration/sections/config-section-general.tsx:
--------------------------------------------------------------------------------
1 | import { configurationComponents } from '../..';
2 | import { useConfigStore } from '../../../utils/zustand-utils/config-zustand';
3 |
4 | export default function ConfigSectionGeneral() {
5 | const { centralConfig, localConfig, setLocalConfigItem } = useConfigStore();
6 |
7 | const centralSectionConfig = centralConfig?.general;
8 | const localSectionConfig = localConfig?.general;
9 |
10 | if (localSectionConfig === undefined || centralSectionConfig === undefined) {
11 | return <>;
12 | }
13 | return (
14 | <>
15 |
12 |
18 |
19 |
22 |
25 |
13 | {props.errorMessage === undefined && 'Save your changes now!'}
14 | {props.errorMessage !== undefined &&
15 | props.errorMessage.replaceAll('Error in ', '')}
16 |
17 |
30 |
31 |
44 | );
45 | }
46 |
47 | return (
48 | <>
49 |
50 |
51 |
52 |
23 | setValue(isNaN(parseInt(v)) ? 0 : parseInt(v))}
26 | postfix={postfix}
27 | disabled={props.disabled}
28 | className="!h-8"
29 | />
30 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/packages/ui/src/components/essential/ping.tsx:
--------------------------------------------------------------------------------
1 | export default function Ping(props: { state: boolean | undefined }) {
2 | let color = 'bg-gray-500';
3 | if (props.state === true) {
4 | color = 'bg-green-500';
5 | }
6 | if (props.state === false) {
7 | color = 'bg-red-500';
8 | }
9 | return (
10 |
11 | {props.state === true && (
12 |
13 | )}
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/packages/ui/src/components/essential/previous-value.tsx:
--------------------------------------------------------------------------------
1 | export default function PreviousValue(props: { previousValue?: string | number | any }) {
2 | const { previousValue } = props;
3 | const sharedClasses1 = 'ml-1 text-xs font-normal flex-row-left opacity-80 gap-x-1';
4 | const sharedClasses2 =
5 | 'rounded-md bg-blue-100 border border-blue-300 px-1.5 py-0.5 text-blue-950 text-xs break-all';
6 |
7 | if (typeof previousValue === 'string' || typeof previousValue === 'number') {
8 | return (
9 |
10 | previous value:
11 | {previousValue}
12 |
13 | );
14 | } else if (typeof previousValue === 'object' && previousValue.length !== undefined) {
15 | return (
16 |
17 | previous value:
18 | {previousValue.map((v: any, i: number) => (
19 |
20 | {v}
21 |
22 | ))}
23 |
24 | );
25 | } else {
26 | return <>;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/ui/src/components/essential/spinner.tsx:
--------------------------------------------------------------------------------
1 | import { ICONS } from '../../assets';
2 |
3 | export default function Spinner() {
4 | return {ICONS.spinner}
;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/ui/src/components/essential/text-input.tsx:
--------------------------------------------------------------------------------
1 | export default function TextInput(props: {
2 | value: string;
3 | setValue(v: string): void;
4 | disabled?: boolean;
5 | postfix?: string | undefined;
6 | className?: string;
7 | }) {
8 | return (
9 |
14 | props.setValue(e.target.value)}
18 | className={
19 | 'shadow-sm rounded-lg border-slate-300 text-sm w-full ' +
20 | 'focus:ring-blue-100 focus:border-blue-300 focus:ring ' +
21 | 'flex-grow h-9 ' +
22 | (props.disabled ? 'cursor-not-allowed bg-gray-100 ' : ' ') +
23 | (props.className ? props.className : '')
24 | }
25 | disabled={props.disabled}
26 | />
27 | {props.postfix !== undefined && (
28 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/packages/ui/src/components/essential/toggle.tsx:
--------------------------------------------------------------------------------
1 | export default function Toggle(props: {
2 | value: string;
3 | setValue(v: string): void;
4 | values: string[];
5 | className?: string;
6 | }) {
7 | const { value, setValue, values, className } = props;
8 |
9 | return (
10 |
33 | {props.value} {props.postfix}
34 |
35 | )}
36 |
11 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/packages/ui/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as configurationComponents } from './configuration';
2 | export { default as essentialComponents } from './essential';
3 | export { default as overviewComponents } from './overview';
4 | export { default as structuralComponents } from './structural';
5 |
--------------------------------------------------------------------------------
/packages/ui/src/components/overview/index.ts:
--------------------------------------------------------------------------------
1 | import ActivityPlot from './activity-plot';
2 | import MeasurementDecision from './measurement-decision';
3 | import PyraCoreStatus from './pyra-core-status';
4 | import { SystemState, TumEnclosureState } from './system-state';
5 |
6 | export default {
7 | ActivityPlot,
8 | PyraCoreStatus,
9 | MeasurementDecision,
10 | SystemState,
11 | TumEnclosureState,
12 | };
13 |
--------------------------------------------------------------------------------
/packages/ui/src/components/structural/disconnected-screen.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { fetchUtils } from '../../utils';
3 | import { Button } from '../ui/button';
4 |
5 | const LinkToInstallationInstructions = (props: { projectDirPath: string }) => (
6 | <>
7 | Please follow the installation instructions on{' '}
8 | https://github.com/tum-esm/pyra.
9 | PYRA 4 should be located at "{props.projectDirPath}"
10 |
11 | );
12 |
13 | export default function DisconnectedScreen(props: { retry: () => void }) {
14 | const [projectDirPath, setProjectDirPath] = useState('');
15 |
16 | useEffect(() => {
17 | async function init() {
18 | setProjectDirPath(await fetchUtils.getProjectDirPath());
19 | }
20 |
21 | init();
22 | }, []);
23 |
24 | return (
25 |
12 | {values.map((v) => (
13 |
28 | ))}
29 |
30 |
31 |
35 | {backendIntegrity === undefined && (
36 | <>
37 |
39 |
41 |
42 | )}
43 | {backendIntegrity === 'cli is missing' && (
44 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/packages/ui/src/styles/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .svg-green-button path {
6 | @apply fill-slate-800;
7 | }
8 |
9 | .svg-toggle-true .primary {
10 | @apply fill-blue-300;
11 | }
12 |
13 | .svg-toggle-true .secondary {
14 | @apply fill-blue-900;
15 | }
16 |
17 | .svg-toggle-false .primary {
18 | @apply fill-gray-200;
19 | }
20 |
21 | .svg-toggle-false .secondary {
22 | @apply fill-transparent;
23 | }
24 |
25 | .flex-row-center {
26 | @apply flex flex-row items-center justify-center;
27 | }
28 |
29 | .flex-col-center {
30 | @apply flex flex-col items-center justify-center;
31 | }
32 |
33 | .flex-col-left {
34 | @apply flex flex-col items-start justify-center;
35 | }
36 |
37 | .flex-col-right {
38 | @apply flex flex-col items-end justify-center;
39 | }
40 |
41 | .flex-row-left {
42 | @apply flex flex-row items-center justify-start;
43 | }
44 |
45 | .flex-row-right {
46 | @apply flex flex-row items-center justify-end;
47 | }
48 |
49 | .flex-row-left-top {
50 | @apply flex flex-row items-start justify-start;
51 | }
52 |
53 | .elevated-panel {
54 | @apply shadow-sm rounded-lg bg-white border-gray-250 border;
55 | }
56 |
57 | @layer base {
58 | :root {
59 | --background: 0 0% 100%;
60 | --foreground: 222.2 84% 4.9%;
61 |
62 | --card: 0 0% 100%;
63 | --card-foreground: 222.2 84% 4.9%;
64 |
65 | --popover: 0 0% 100%;
66 | --popover-foreground: 222.2 84% 4.9%;
67 |
68 | --primary: 222.2 47.4% 11.2%;
69 | --primary-foreground: 210 40% 98%;
70 |
71 | --secondary: 210 40% 96.1%;
72 | --secondary-foreground: 222.2 47.4% 11.2%;
73 |
74 | --muted: 210 40% 96.1%;
75 | --muted-foreground: 215.4 16.3% 46.9%;
76 |
77 | --accent: 210 40% 96.1%;
78 | --accent-foreground: 222.2 47.4% 11.2%;
79 |
80 | --destructive: 0 84.2% 60.2%;
81 | --destructive-foreground: 210 40% 98%;
82 |
83 | --border: 214.3 31.8% 91.4%;
84 | --input: 214.3 31.8% 91.4%;
85 | --ring: 222.2 84% 4.9%;
86 |
87 | --radius: 0.5rem;
88 | }
89 |
90 | .dark {
91 | --background: 222.2 84% 4.9%;
92 | --foreground: 210 40% 98%;
93 |
94 | --card: 222.2 84% 4.9%;
95 | --card-foreground: 210 40% 98%;
96 |
97 | --popover: 222.2 84% 4.9%;
98 | --popover-foreground: 210 40% 98%;
99 |
100 | --primary: 210 40% 98%;
101 | --primary-foreground: 222.2 47.4% 11.2%;
102 |
103 | --secondary: 217.2 32.6% 17.5%;
104 | --secondary-foreground: 210 40% 98%;
105 |
106 | --muted: 217.2 32.6% 17.5%;
107 | --muted-foreground: 215 20.2% 65.1%;
108 |
109 | --accent: 217.2 32.6% 17.5%;
110 | --accent-foreground: 210 40% 98%;
111 |
112 | --destructive: 0 62.8% 30.6%;
113 | --destructive-foreground: 210 40% 98%;
114 |
115 | --border: 217.2 32.6% 17.5%;
116 | --input: 217.2 32.6% 17.5%;
117 | --ring: 212.7 26.8% 83.9%;
118 | }
119 | }
120 |
121 | @layer base {
122 | * {
123 | @apply border-border;
124 | }
125 | body {
126 | @apply bg-background text-foreground;
127 | }
128 | }
129 |
--------------------------------------------------------------------------------
/packages/ui/src/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export { default as OverviewTab } from './overview-tab';
2 | export { default as ConfigurationTab } from './configuration-tab';
3 | export { default as LogTab } from './log-tab';
4 | export { default as ControlTab } from './control-tab';
5 |
--------------------------------------------------------------------------------
/packages/ui/src/tabs/overview-tab.tsx:
--------------------------------------------------------------------------------
1 | import { fetchUtils } from '../utils';
2 | import { essentialComponents, overviewComponents } from '../components';
3 | import { useLogsStore } from '../utils/zustand-utils/logs-zustand';
4 | import { useConfigStore } from '../utils/zustand-utils/config-zustand';
5 | import { Button } from '../components/ui/button';
6 |
7 | export default function OverviewTab() {
8 | const { coreLogs } = useLogsStore();
9 | const { runPromisingCommand } = fetchUtils.useCommand();
10 | const { centralConfig } = useConfigStore();
11 |
12 | function closeCover() {
13 | runPromisingCommand({
14 | command: () => fetchUtils.backend.writeToTUMEnclosure(['close-cover']),
15 | label: 'closing cover',
16 | successLabel: 'successfully closed cover',
17 | });
18 | }
19 |
20 | return (
21 | {ICONS.spinner}
40 |
22 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/packages/ui/src/utils/fetch-utils/backend.ts:
--------------------------------------------------------------------------------
1 | import { Command, ChildProcess } from '@tauri-apps/plugin-shell';
2 | import { join } from '@tauri-apps/api/path';
3 | import fetchUtils from '.';
4 |
5 | async function callCLI(args: string[]): Promise
23 |
26 |
27 |
29 |
30 |
38 | System State
31 |
32 | {centralConfig?.tum_enclosure && (
33 |
36 | )}
37 |
40 | Recent Logs
41 |
42 |
43 | {(coreLogs.all === undefined || coreLogs.all.length === 0) && (
44 |
60 |
45 |
47 | )}
48 | {coreLogs.all !== undefined &&
49 | coreLogs.all
50 | .filter((l) => !l.includes(' - DEBUG - '))
51 | .slice(-15)
52 | .map((l, i) => (
53 |