Merge pull request #2472 from FarmBot/staging

v15.10.2

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} />}

frontend/three_d_garden/index.tsx

@@ -12,7 +12,7 @@ export const ThreeDGarden = (props: ThreeDGardenProps) => {
   return <div className={"three-d-garden"}>
     <div className={"garden-bed-3d-model"}>
       <Canvas shadows={true}>
-        <GardenModel config={props.config} showBeacons={false}
+        <GardenModel config={props.config}
           activeFocus={""} setActiveFocus={noop} />
       </Canvas>
     </div>

local_setup_instructions.sh

@@ -1,18 +1,15 @@
-# How to install FarmBot Web API on a local machine
+# How to install the FarmBot Web App on a local machine
 
 # IMPORTANT NOTE: Resources are limited and FarmBot Inc cannot provide
 # longterm support to self-hosted users. If you have never administered a
-# Ruby on Rails application, we highly advise stopping now. This presents an
-# extremely high risk of data loss. Free hosting is provided at
+# Ruby on Rails/Javascript application, we highly advise stopping now. This
+# presents an extremely high risk of data loss. Free hosting is provided at
 # https://my.farm.bot and eliminates the risks and troubles of self-hosting.
-#
-# You are highly encouraged to use the my.farm.bot servers. Self-hosted
-# documentation is provided with the assumption that you have experience with
-# Ruby/Javascript development.
-#
-# Self-hosting a FarmBot server is not a simple task.
+# Self-hosting a FarmBot server is not a simple task!
 
-# Linux (Debian/Ubuntu): Install docker and docker compose
+# Install docker and docker compose
+# =================================
+# Linux (Debian/Ubuntu):
 sudo apt update
 sudo apt install ca-certificates curl gnupg -y
 source /etc/os-release
@@ -23,37 +20,41 @@ echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.
 sudo apt update
 sudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y
 
-# Mac: Install docker and docker compose
+# Mac:
 # Install Homebrew
 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 # Install Docker Desktop from https://www.docker.com/products/docker-desktop/
 # Open the Docker Desktop app
 # Install docker-compose
 brew install docker-compose
-# From here on out, all commands are the same for both Linux and Mac, but `sudo` is not required for Mac.
+
+#####################################################################
+# From here on out, all commands are the same for both Linux and Mac,
+# but `sudo` is not required for Mac.
+#####################################################################
 
 # Verify docker installation
+# ==========================
 sudo docker run hello-world
 sudo docker compose version
 
-# Install FarmBot Web App
+# Clone the FarmBot Web App repository
+# ====================================
 # ⚠ SKIP THIS STEP IF UPGRADING!
 git clone https://github.com/FarmBot/Farmbot-Web-App --depth=5 --branch=main
-
+# Change directory to the project
 cd Farmbot-Web-App
 
-cp example.env .env # ⚠ SKIP THIS STEP IF UPGRADING!
-
-# == This is a very important step!!! ==
-#
+# Set your ENVs
+# =============
+# ⚠ SKIP THIS IF UPGRADING!
+cp example.env .env
 # Open `.env` in a text editor and change all the values.
-#
-# == Nothing will work if you skip this step!!! ==
-
-nano .env          # ⚠ SKIP THIS STEP IF UPGRADING!
-# ^ This is the most important step
-# READ NOTE ABOVE. Very important!
+# ⚠ SKIP THIS STEP IF UPGRADING!
+nano .env
 
+# Install project dependencies
+# ============================
 # Install the correct version of bundler for the project
 sudo docker compose run web gem install bundler
 # Install application specific Ruby dependencies
@@ -63,32 +64,37 @@ sudo docker compose run web npm install
 # Create a database in PostgreSQL
 sudo docker compose run web bundle exec rails db:create db:migrate
 # Generate a set of *.pem files for data encryption
-sudo docker compose run web rake keys:generate # ⚠ SKIP THIS STEP IF UPGRADING!
-# Run the server! ٩(^‿^)۶
+# ⚠ SKIP THIS STEP IF UPGRADING!
+sudo docker compose run web rake keys:generate
+
+# Run the server! 🌱
+# ==================
 # Note: You won't be able to log in until you see a message similar to this:
 #   "✨  Built in 44.92s"
 # You will just get an empty screen otherwise.
 # This only happens during initialization and may take a long time on slow machines.
 sudo docker compose up
 # If you get an MQTT authentication error, it could be a config file issue.
-# Verify that you've used your computer's real IP address (`hostname -I`)
+# Verify that you've used your computer's real IP address
+# (`hostname -I` on Linux or `ipconfig getifaddr en0` on Mac)
 # for the values of `API_HOST` and `MQTT_HOST` in the `.env` file, and then:
 # Stop the server with `Ctrl + C` and
 sudo docker compose down
 # Start the server again with
 sudo docker compose up
-
 # At this point, setup is complete.
-# Content should be visible at http://YOUR_HOST:3000/.
+# Content should be visible at http://API_HOST:3000/.
+
+# Verify installation (optional)
+# ==============================
+# You can optionally verify installation by running unit tests.
+# Create the database for the app to use
+sudo docker compose run -e RAILS_ENV=test web bundle exec rails db:setup
+# Run the tests in the "test" RAILS_ENV
+sudo docker compose run -e RAILS_ENV=test web rspec spec
+# Run user-interface unit tests (requires a large amount of RAM)
+sudo docker compose run web npm run test
 
-# --- You can optionally verify installation by running unit tests. ---
-  # Create the database for the app to use
-  sudo docker compose run -e RAILS_ENV=test web bundle exec rails db:setup
-  # Run the tests in the "test" RAILS_ENV
-  sudo docker compose run -e RAILS_ENV=test web rspec spec
-  # Run user-interface unit tests (requires a large amount of RAM)
-  sudo docker compose run web npm run test
-# --- end of optional tests ---
 
 # === BEGIN OPTIONAL UPGRADES to later versions of the FarmBot Web App ===
   # Shut down the server