Skip to content
Snippets Groups Projects
Commit a88766c5 authored by Nicolas Pope's avatar Nicolas Pope
Browse files

Add additional channels and components

parent da2bcfb1
Branches
Tags
1 merge request!10Add additional channels and components
Show whitespace changes
Inline Side-by-side
packages/client/package.json
+ 2
− 0
View file @ a88766c5
......@@ -17,6 +17,7 @@
"@types/plotly.js": "^1.54.14",
"@types/plotly.js-dist-min": "^2.3.0",
"@types/react": "^17.0.15",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8",
"@types/styled-components": "^5.1.11",
......@@ -42,6 +43,7 @@
"pupa": "^3.0.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router": "^5.2.0",
......
packages/client/src/components/ChannelComponent/components.tsx
+ 42
− 5
View file @ a88766c5
......@@ -5,6 +5,7 @@ import Plotly from 'plotly.js-dist-min';
import {useRecoilState} from 'recoil';
import {pinnedData} from '../../recoil/atoms';
import {FaMapPin} from 'react-icons/fa';
import {SketchPicker} from 'react-color';
const Name = styled.div`
font-size: 0.8rem;
......@@ -52,6 +53,7 @@ interface IManifest {
component: string;
type: string;
enum?: string[];
labels?: string[];
}
interface DataItemProps {
......@@ -175,7 +177,10 @@ function EditableValue({data, config, channel, onChange}: IDataComponentProps) {
setValue(JSON.stringify(data));
}, [data]);
const input = <input type="text" value={value} onChange={e=> setValue(e.target.value)} onBlur={e => {
let input: JSX.Element = null;
if (config.type === 'number') {
input = <input type="number" value={value} onChange={e=> setValue(e.target.value)} onBlur={e => {
// setValue(e.target.value);
try {
const newValue = JSON.parse(e.target.value);
......@@ -184,19 +189,50 @@ function EditableValue({data, config, channel, onChange}: IDataComponentProps) {
}
}} />;
} else if (config.type === 'boolean') {
input = <input type="checkbox" checked={value === 'true'} onChange={e => {
setValue(e.target.checked ? 'true' : 'false');
try {
const newValue = e.target.checked;
onChange(channel, newValue);
} catch (e) {
}
}} />;
} else {
input = <input type="text" value={value} onChange={e=> setValue(e.target.value)} onBlur={e => {
// setValue(e.target.value);
try {
const newValue = JSON.parse(e.target.value);
onChange(channel, newValue);
} catch (e) {
}
}} />;
}
return <DataItem channel={channel} name={pupa(config.title, {channel})} value={input} />;
}
function Enumerated({data, config, channel, onChange}: IDataComponentProps) {
if (typeof data !== 'string') {
if (typeof data !== 'string' && typeof data !== 'number') {
return null;
}
const input = <select value={data} onChange={e => onChange && onChange(channel, e.target.value)}>
{config.enum.map((option, key) => <option key={key} value={option}>{option}</option>)}
const input = <select value={data} onChange={e => onChange && onChange(channel, config.type === 'number' ? parseInt(e.target.value) : e.target.value)}>
{config.enum.map((option, key) => <option key={key} value={option}>{config.labels?.[key] || option}</option>)}
</select>;
return <DataItem channel={channel} name={pupa(config.title, {channel})} value={input} />;
}
function ColourPicker({data, config, channel, onChange}: IDataComponentProps) {
const [value, setValue] = useState<string>(`${data}`);
const input = <SketchPicker color={value} onChangeComplete={(color: any) => {
setValue(color.hex);
onChange(channel, color.hex);
}}/>
return <DataItem channel={channel} name={pupa(config.title, {channel})} value={input} />;
}
interface IDataComponentProps {
data: unknown;
config?: IManifest;
......@@ -214,4 +250,5 @@ export const components: Record<string, React.FunctionComponent<IDataComponentPr
EditableValue,
Histogram,
TemporalHistogram,
ColourPicker,
};
packages/protocol/src/channels.schema.json
+ 33
− 1
View file @ a88766c5
......@@ -135,6 +135,14 @@
"type": "string",
"title": "Visualisation",
"enum": ["mesh", "pointcloud"],
"labels": ["Mesh", "Point Cloud"],
"editable": "virtual",
"component": "Enumerated"
},
"402": {
"type": "string",
"title": "Render Engine",
"enum": ["CUDA", "GL", "SKR"],
"editable": "virtual",
"component": "Enumerated"
},
......@@ -144,7 +152,9 @@
"maximum": 31,
"default": 0,
"title": "Renderer Overlay Channel",
"component": "EditableValue",
"component": "Enumerated",
"enum": [0, 1],
"labels": ["None", "Depth"],
"editable": "virtual"
},
"407": {
......@@ -155,6 +165,28 @@
},
"component": "SourceMenu",
"editable": "virtual"
},
"408": {
"type": "number",
"title": "Projection",
"enum": [0, 1, 2],
"default": 0,
"component": "Enumerated",
"editable": "virtual"
},
"409": {
"type": "string",
"title": "Background",
"default": "#4c4c4c",
"component": "ColourPicker",
"editable": "virtual"
},
"420": {
"type": "boolean",
"title": "Show Bad Colours",
"default": false,
"component": "EditableValue",
"editable": "virtual"
}
}
}
\ No newline at end of file
yarn.lock
+ 53
− 3
View file @ a88766c5
......@@ -441,6 +441,11 @@
resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
"@icons/material@^0.2.4":
version "0.2.4"
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
"@istanbuljs/load-nyc-config@^1.0.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
......@@ -1913,6 +1918,14 @@
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
"@types/react-color@^3.0.6":
version "3.0.6"
resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
dependencies:
"@types/react" "*"
"@types/reactcss" "*"
"@types/react-dom@^17.0.9":
version "17.0.9"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
......@@ -1946,6 +1959,13 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/reactcss@*":
version "1.2.6"
resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
dependencies:
"@types/react" "*"
"@types/readable-stream@*":
version "2.3.11"
resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-2.3.11.tgz#942bc4574a1d7ca4368cb9cb4352e3d2b4b51dea"
......@@ -7044,7 +7064,7 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
lodash-es@^4.17.21:
lodash-es@^4.17.15, lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
......@@ -7089,7 +7109,7 @@ lodash.truncate@^4.4.2:
resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
......@@ -7212,6 +7232,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-colors@^1.2.1:
version "1.2.6"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
media-typer@0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
......@@ -8571,7 +8596,7 @@ promzard@^0.3.0:
dependencies:
read "1"
prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -8722,6 +8747,19 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
react-color@^2.19.3:
version "2.19.3"
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
dependencies:
"@icons/material" "^0.2.4"
lodash "^4.17.15"
lodash-es "^4.17.15"
material-colors "^1.2.1"
prop-types "^15.5.10"
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-dom@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
......@@ -8788,6 +8826,13 @@ react@^17.0.2:
loose-envify "^1.1.0"
object-assign "^4.1.1"
reactcss@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
dependencies:
lodash "^4.0.1"
read-cmd-shim@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
......@@ -10134,6 +10179,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
tinycolor2@^1.4.1:
version "1.4.2"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment