Merge pull request #2472 from FarmBot/staging

v15.10.2

Author: gabrielburnworth

app/views/dashboard/promo.html.erb

@@ -5,5 +5,7 @@
   }
   body {
     margin: 0;
+    background-image: url("/placeholder_farmbot.jpg");
   }
 </style>
+<h1 class="initial-loading-text">Loading...</h1>

example.env

@@ -13,6 +13,7 @@
 # If your server is on a domain (eg=my-own-farmbot.com), put it here.
 # DONT USE `localhost`, `127.0.0.1`, or `0.0.0.0`.
 # Use a real IP address or domain name.
+# For a local install, find your IP with `hostname -I` on Linux or `ipconfig getifaddr en0` on Mac.
 API_HOST=
 
 # 3000 for local development. 443 is using SSL.
@@ -51,6 +52,7 @@ NO_EMAILS=TRUE
 # If you wish to opt out of https, delete this line.
 # NOTE: By not using SSL, passwords will be transmitted without encryption,
 # making it very easy for attackers to see them.
+# Comment out or delete for local installs.
 FORCE_SSL=TRUE
 
 

frontend/css/farm_designer/farm_designer.scss

@@ -1268,6 +1268,7 @@
       padding: 1rem;
       overflow-x: scroll;
       background: linear-gradient(0deg, $translucent5, transparent);
+      scrollbar-width: none;
 
       @media screen and (max-width: 768px) {
         justify-content: left;

frontend/farm_designer/three_d_garden_map.tsx

@@ -17,6 +17,7 @@ export const ThreeDGardenMap = (props: ThreeDGardenMapProps) => {
   config.botSizeY = gridSize.y;
   config.bedWidthOuter = gridSize.y + 160;
   config.bedLengthOuter = gridSize.x + 160;
+  config.zoomBeacons = false;
 
   return <ThreeDGarden config={config} />;
 };

frontend/promo/promo.tsx

@@ -18,7 +18,6 @@ export const Promo = () => {
     config, setConfig,
     toolTip, setToolTip,
     activeFocus, setActiveFocus,
-    showBeacons: true,
   };
 
   React.useEffect(() => {

frontend/three_d_garden/__tests__/garden_test.tsx

@@ -14,7 +14,6 @@ describe("<GardenModel />", () => {
     config: clone(INITIAL),
     activeFocus: "",
     setActiveFocus: jest.fn(),
-    showBeacons: true,
   });
 
   it("renders", () => {

frontend/three_d_garden/config.ts

@@ -54,6 +54,8 @@ export interface Config {
   xyDimensions: boolean;
   zDimension: boolean;
   promoInfo: boolean;
+  settingsBar: boolean;
+  zoomBeacons: boolean;
   solar: boolean;
   utilitiesPost: boolean;
   packaging: boolean;
@@ -123,6 +125,8 @@ export const INITIAL: Config = {
   xyDimensions: false,
   zDimension: false,
   promoInfo: true,
+  settingsBar: true,
+  zoomBeacons: true,
   solar: false,
   utilitiesPost: true,
   packaging: false,
@@ -152,9 +156,9 @@ export const BOOLEAN_KEYS = [
   "legsFlush", "labels", "labelsOnHover", "ground", "grid", "axes", "trail",
   "tracks", "clouds", "perspective", "bot", "laser", "cableCarriers",
   "viewCube", "stats", "config", "zoom", "pan", "bounds", "threeAxes",
-  "xyDimensions", "zDimension", "promoInfo", "solar", "utilitiesPost",
-  "packaging", "lab", "people", "lowDetail", "eventDebug", "cableDebug",
-  "zoomBeaconDebug", "animate",
+  "xyDimensions", "zDimension", "promoInfo", "settingsBar", "zoomBeacons",
+  "solar", "utilitiesPost", "packaging", "lab", "people", "lowDetail",
+  "eventDebug", "cableDebug", "zoomBeaconDebug", "animate",
 ];
 
 export const PRESETS: Record<string, Config> = {
@@ -259,6 +263,8 @@ export const PRESETS: Record<string, Config> = {
     xyDimensions: false,
     zDimension: false,
     promoInfo: false,
+    settingsBar: false,
+    zoomBeacons: false,
     solar: false,
     utilitiesPost: false,
     packaging: false,
@@ -308,6 +314,8 @@ export const PRESETS: Record<string, Config> = {
     xyDimensions: true,
     zDimension: true,
     promoInfo: true,
+    settingsBar: true,
+    zoomBeacons: true,
     solar: true,
     utilitiesPost: true,
     packaging: true,
@@ -335,9 +343,10 @@ const OTHER_CONFIG_KEYS: (keyof Config)[] = [
   "bedBrightness", "soilBrightness", "plants", "labels", "ground", "grid", "axes",
   "trail", "clouds", "sunInclination", "sunAzimuth", "perspective", "bot", "laser",
   "tool", "cableCarriers", "viewCube", "stats", "config", "zoom", "bounds",
-  "threeAxes", "xyDimensions", "zDimension", "labelsOnHover", "promoInfo", "pan",
-  "solar", "utilitiesPost", "packaging", "lab", "people", "scene", "lowDetail",
-  "eventDebug", "cableDebug", "zoomBeaconDebug", "animate",
+  "threeAxes", "xyDimensions", "zDimension", "labelsOnHover", "promoInfo",
+  "settingsBar", "zoomBeacons", "pan", "solar", "utilitiesPost", "packaging", "lab",
+  "people", "scene", "lowDetail", "eventDebug", "cableDebug", "zoomBeaconDebug",
+  "animate",
 ];
 
 export const modifyConfig = (config: Config, update: Partial<Config>) => {

frontend/three_d_garden/config_overlays.tsx

@@ -64,7 +64,7 @@ export const PublicOverlay = (props: OverlayProps) => {
   };
 
   return <div className={"overlay"}>
-    {!props.activeFocus &&
+    {config.settingsBar && !props.activeFocus &&
       <div className={"settings-bar"}>
         <Section
           title={"FarmBot"}
@@ -271,6 +271,8 @@ export const PrivateOverlay = (props: OverlayProps) => {
           onChange={e => setParamAdd(e.target.checked)} />
       </div>
       <Toggle {...common} configKey={"promoInfo"} />
+      <Toggle {...common} configKey={"settingsBar"} />
+      <Toggle {...common} configKey={"zoomBeacons"} />
       <label>{"Presets"}</label>
       <Radio {...common} configKey={"sizePreset"}
         options={["Jr", "Genesis", "Genesis XL"]} />

frontend/three_d_garden/distance_indicator.tsx

@@ -4,6 +4,27 @@ import { ASSETS } from "./constants";
 import { Arrow } from "./arrow";
 import { Group, MeshPhongMaterial } from "./components";
 
+enum BoxDimension {
+  width = 300,
+  height = 100,
+  depth = 75,
+}
+
+const depthOffset = BoxDimension.depth / 2 + 0.5;
+const heightOffset = BoxDimension.height / 2 + 0.5;
+
+interface Label {
+  position: [number, number, number];
+  rotation: [number, number, number];
+}
+
+const LABELS: Label[] = [
+  { position: [0, 0, depthOffset], rotation: [0 * Math.PI / 2, 0, 0] },
+  { position: [0, -heightOffset, 0], rotation: [1 * Math.PI / 2, 0, 0] },
+  { position: [0, 0, -depthOffset], rotation: [2 * Math.PI / 2, 0, 0] },
+  { position: [0, heightOffset, 0], rotation: [3 * Math.PI / 2, 0, 0] },
+];
+
 export interface DistanceIndicatorProps {
   start: Record<"x" | "y" | "z", number>;
   end: Record<"x" | "y" | "z", number>;
@@ -28,20 +49,22 @@ export const DistanceIndicator = (props: DistanceIndicatorProps) => {
     <Arrow length={distance / 2} width={25} rotation={[0, 0, Math.PI]} />
     <Group rotation={[Math.PI / 6, 0, 0]}>
       <Box
-        args={[300, 100, 75]}
+        args={[BoxDimension.width, BoxDimension.height, BoxDimension.depth]}
         receiveShadow={true}>
         <MeshPhongMaterial color={"#c49f7a"} />
       </Box>
-      <Text name={"distance-label"}
-        fontSize={50}
-        font={ASSETS.fonts.cabinBold}
-        color={"black"}
-        strokeColor={"black"}
-        strokeWidth={7}
-        fontWeight={"bold"}
-        position={[0, 0, 38]}>
-        {distance.toFixed(0)}mm
-      </Text>
+      {LABELS.map(({ position, rotation }) =>
+        <Text name={"distance-label"}
+          fontSize={50}
+          font={ASSETS.fonts.cabinBold}
+          color={"black"}
+          strokeColor={"black"}
+          strokeWidth={7}
+          fontWeight={"bold"}
+          rotation={rotation}
+          position={position}>
+          {distance.toFixed(0)}mm
+        </Text>)}
     </Group>
   </Group>;
 };

frontend/three_d_garden/garden.tsx

@@ -29,7 +29,6 @@ export interface GardenModelProps {
   config: Config;
   activeFocus: string;
   setActiveFocus(focus: string): void;
-  showBeacons: boolean;
 }
 
 interface Plant {
@@ -176,7 +175,7 @@ export const GardenModel = (props: GardenModelProps) => {
       ? e => console.log(e.intersections.map(x => x.object.name))
       : undefined}>
     {config.stats && <Stats />}
-    {props.showBeacons && <ZoomBeacons
+    {config.zoomBeacons && <ZoomBeacons
       config={config}
       activeFocus={props.activeFocus}
       setActiveFocus={props.setActiveFocus} />}