blob support

src/App.js

@@ -40,9 +40,13 @@ const theme = deepMerge(grommet, {
     },
   },
   tab: {
+    active: {
+      weight: "bold",
+    },
     margin: {
       vertical: "xsmall",
     },
+    border: undefined,
   },
   layer: {
     background: "#00000000",

src/apolloclient.js

@@ -55,7 +55,7 @@ const client = new ApolloClient({
   ]),
   cache: new InMemoryCache({
     possibleTypes: {
-      IndiVector: ["NumberVector", "SwitchVector", "TextVector", "LightVector"],
+      IndiVector: ["NumberVector", "SwitchVector", "TextVector", "LightVector", "BLOBVector"],
     },
     typePolicies: {
       Query: {
@@ -116,6 +116,8 @@ client
     query: NEW_PROPERTY,
   })
   .subscribe(({ data }) => {
+    console.log(data.newIndiProp.id);
+    console.log(data.newIndiProp.vector)
     const res = client.readQuery({
       query: GETDEVICE,
       variables: { id: data.newIndiProp.device.id },
@@ -126,10 +128,6 @@ client
       data: {
         device: {
           ...res.device,
-          /*drivers:
-            data.newProperty.name === "DRIVER_INFO"
-              ? data.newProperty.vector.values[3].text
-              : res.device.drivers,*/
           connected:
             data.newIndiProp.name === "CONNECTION"
               ? data.newIndiProp.vector.values[0].switch

src/components/indi/blob.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Box, Text } from "grommet";
+import { Camera } from "grommet-icons";
+
+import { stateToColor } from "../../utils/indi";
+
+const BLOBVector = ({ vector }) => {
+  return (
+    <Box gap="xsmall">
+      {vector.values.map((v) => (
+        <Box key={v.name} direction="row" align="center" gap="small">
+          <Box width="small"><Text>{v.label ? `${v.label} (${v.name})` : v.name}</Text></Box>
+          <Box width="medium" direction="row" gap="small"><Camera /><Text>Binary data</Text></Box>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default BLOBVector;

src/components/indi/device.js

@@ -36,6 +36,7 @@ const Device = ({ device, messages, onMessagesClosed }) => {
     setCurrentTab(selectedTabs[device.id] || 0);
   }, [device, selectedTabs]);
 
+
   return (
     <Box>
       <Tabs

src/components/indi/panel.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+
+import { useQuery } from "@apollo/client";
+import gql from "graphql-tag";
+import { deviceInfoFragment, propertyVectorFragment } from "../../graphql/fragment";
+import Device from "./device";
+import { Box, Button, Tabs, Tab } from "grommet";
+import { Contact, StatusGood, StatusCritical } from "grommet-icons";
+
+const GETDEVICES = gql`
+  query devices {
+    devices {
+      id
+      ...DeviceInfo
+      messages @client
+      properties {
+        id
+        name
+        ...PropertyVector
+      }
+    }
+  }
+
+  ${propertyVectorFragment}
+  ${deviceInfoFragment}
+`;
+
+export const IndiPanel = () => {
+  const { data } = useQuery(GETDEVICES);
+  const [openMsg, setOpenMsg] = useState(false);
+
+  return (
+    <Box overflow="auto">
+      {data ? (
+        <Tabs justify="start">
+          {data && data.devices ? (
+            data.devices.map((d) => (
+              <Tab
+                icon={d.connected ? <StatusGood /> : <StatusCritical />}
+                title={d.name}
+                key={d.id}
+              >
+                <Device
+                  device={d}
+                  messages={openMsg}
+                  onMessagesClosed={() => setOpenMsg(false)}
+                />
+              </Tab>
+            ))
+          ) : (
+            <div>no devices</div>
+          )}
+        </Tabs>
+      ) : null}
+      <Button icon={<Contact />} onClick={() => setOpenMsg(true)} />
+    </Box>
+  );
+};

src/components/indi/property.js

@@ -7,6 +7,7 @@ import LightVector from "./light";
 import NumberVector from "./number";
 import SwitchVector from "./switch";
 import TextVector from "./text";
+import BLOBVector from "./blob";
 
 const Property = ({ property }) => {
   return (
@@ -30,6 +31,9 @@ const Property = ({ property }) => {
       {property.vector.__typename === "LightVector" && (
         <LightVector vector={property.vector} />
       )}
+      {property.vector.__typename === "BLOBVector" && (
+        <BLOBVector vector={property.vector} />
+      )}
     </Box>
   );
 };

src/devices.js

@@ -3,11 +3,10 @@ import React, { useEffect, useState } from "react";
 import { useQuery, useMutation } from "@apollo/client";
 import gql from "graphql-tag";
 import { deviceInfoFragment, propertyVectorFragment } from "./graphql/fragment";
-import Device from "./components/indi/device";
+import { Box, Button, Header, Heading, Layer } from "grommet";
-import { Box, Tabs, Tab, Button, Header, Heading, Layer } from "grommet";
 import { Contact } from "grommet-icons";
 import { isConnectedQuery } from "./graphql/query";
-import { StatusGood, StatusDisabled } from "grommet-icons";
+import { IndiPanel } from "./components/indi/panel";
 
 const GETDEVICES = gql`
   query devices {
@@ -55,7 +54,6 @@ const Devices = () => {
   const { data } = useQuery(GETDEVICES);
   const [connect] = useMutation(CONNECT);
   const [disconnect] = useMutation(DISCONNECT);
-  const [openMsg, setOpenMsg] = useState(false);
 
   if (!data || !data.devices) {
     return <div>No data</div>;
@@ -74,7 +72,7 @@ const Devices = () => {
           <Button label="INDI panel" onClick={() => {}} />
           {true ? (
             <Button
-              label="Connect"
+              label="Start"
               onClick={() => {
                 connect();
               }}
@@ -87,7 +85,6 @@ const Devices = () => {
               }}
             />
           )}
-          <Button icon={<Contact />} onClick={() => setOpenMsg(true)} />
         </Box>
       </Header>
 
@@ -99,29 +96,7 @@ const Devices = () => {
         </Layer>
       )}
 
-      <Box overflow="auto">
+      <IndiPanel />
-        {data ? (
-          <Tabs justify="start">
-            {data && data.devices ? (
-              data.devices.map((d) => (
-                <Tab
-                  icon={d.connected ? <StatusGood /> : <StatusDisabled />}
-                  title={d.name}
-                  key={d.id}
-                >
-                  <Device
-                    device={d}
-                    messages={openMsg}
-                    onMessagesClosed={() => setOpenMsg(false)}
-                  />
-                </Tab>
-              ))
-            ) : (
-              <div>no devices</div>
-            )}
-          </Tabs>
-        ) : null}
-      </Box>
     </Box>
   );
 };

src/graphql/fragment.js

@@ -48,6 +48,12 @@ const vectorFragment = gql`
         light:value
       }
     }
+    ... on BLOBVector {
+      values {
+        name
+        label
+      }
+    }
   }
 `;