Merge pull request #75 from yushiang-demo/dev

v2.1.0

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_DULA_NET_ADMIN_TASKS=/api/admin/tasks
+NEXT_PUBLIC_DULA_NET_TASK=/api/task/

CHANGELOG.md

@@ -13,6 +13,22 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 
 ### Removed
 
+## [2.1.0] - 2024-02-18
+
+### Added
+
+- Dula-net demo page. (https://github.com/yushiang-demo/pano-to-mesh/pull/73)
+
+### Changed
+
+- Remove 2d layout coords sorting to support occluded wall. (https://github.com/yushiang-demo/pano-to-mesh/pull/73)
+
+### Fixed
+
+### Removed
+
+- Remove MIT license. (https://github.com/yushiang-demo/pano-to-mesh/pull/74)
+
 ## [2.0.1] - 2023-12-17
 
 ### Added
@@ -197,7 +213,8 @@ Codes without pull requests won't be recorded.
 
 ### Removed
 
-[unreleased]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.0.1...HEAD
+[unreleased]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.1.0...HEAD
+[2.1.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.0.1...v2.1.0
 [2.0.1]: https://github.com/yushiang-demo/PanoToMesh/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.4.1...v2.0.0
 [1.4.1]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.4.0...v1.4.1

apps/admin.js

@@ -0,0 +1,108 @@
+import Upload from "../components/Upload";
+import GridLayout from "../components/GridLayout";
+import PageContainer from "../components/PageContainer";
+import Image from "../components/Image";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Core } from "@pano-to-mesh/three";
+import { encodeString } from "@pano-to-mesh/base64";
+
+const fetchAll = (callback) => {
+  fetch(process.env.NEXT_PUBLIC_DULA_NET_ADMIN_TASKS)
+    .then((data) => data.json())
+    .then((data) => callback(data.tasks))
+    .catch((e) => console.error(e));
+};
+
+const postImage = (formData, callback) => {
+  const api = process.env.NEXT_PUBLIC_DULA_NET_TASK;
+  const method = "POST";
+  const xhr = new XMLHttpRequest();
+  xhr.open(method, api, true);
+  xhr.onload = callback;
+  xhr.send(formData);
+};
+
+const getTask = (uuid, callback) => {
+  fetch(`${process.env.NEXT_PUBLIC_DULA_NET_TASK}?id=${uuid}`)
+    .then((data) => data.json())
+    .then((data) => {
+      if (data.output) {
+        const {
+          layout,
+          images: { aligned },
+        } = data.output;
+
+        const { cameraHeight, layoutHeight } = layout;
+
+        const point3dToCoords = (point) => {
+          const { longitude, latitude } =
+            Core.Math.coordinates.cartesian2Spherical(
+              point[0] - 0,
+              point[1] - cameraHeight,
+              point[2] - 0
+            );
+          const { x, y } = Core.Math.coordinates.spherical2NormalizedXY(
+            longitude,
+            latitude
+          );
+          return [1 - x, y];
+        };
+
+        const coords = layout.layoutPoints.points.map(({ xyz }) =>
+          point3dToCoords(xyz)
+        );
+
+        const viewer = {
+          ceilingY: layoutHeight,
+          floorY: 0,
+          layout2D: coords,
+          panorama: aligned,
+          panoramaOrigin: [0, cameraHeight, 0],
+        };
+
+        callback(viewer);
+      }
+    })
+    .catch((e) => console.error(e));
+};
+
+const Admin = () => {
+  const router = useRouter();
+  const [tasks, setTasks] = useState([]);
+  useEffect(() => {
+    fetchAll(setTasks);
+  }, []);
+
+  const onFileChange = (formData) => {
+    postImage(formData, () => {
+      fetchAll(setTasks);
+    });
+  };
+
+  const onClickFactory = (uuid) => {
+    return () => {
+      getTask(uuid, (data) => {
+        const hash = encodeString(JSON.stringify(data));
+        router.push(`/editors/layout2d#${hash}`);
+      });
+    };
+  };
+
+  return (
+    <PageContainer>
+      <GridLayout>
+        <Upload onFileChange={onFileChange} />
+        {tasks.map((data) => (
+          <Image
+            key={data.uuid}
+            url={data.input}
+            onClick={onClickFactory(data.uuid)}
+          />
+        ))}
+      </GridLayout>
+    </PageContainer>
+  );
+};
+
+export default Admin;

components/GridLayout/index.js

@@ -0,0 +1,7 @@
+import { Wrapper } from "./styled";
+
+const GridLayout = ({ children }) => {
+  return <Wrapper>{children}</Wrapper>;
+};
+
+export default GridLayout;

components/GridLayout/styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px;
+  width: 50%;
+  max-height: 80dvh;
+  overflow: auto;
+`;

components/Icon/index.js

@@ -38,6 +38,7 @@ const Icon = ({ src, onClick, ...props }) => {
 // all svg resources is download from https://www.svgrepo.com/vectors/cursor/
 const IconFolder = `/icons`;
 const files = {
+  add: `${IconFolder}/add.svg`,
   arrowToDown: `${IconFolder}/arrowToDown.svg`,
   arrowToTop: `${IconFolder}/arrowToTop.svg`,
   download: `${IconFolder}/download.svg`,
@@ -56,6 +57,8 @@ const files = {
   trash: `${IconFolder}/trash.svg`,
   arrange: `${IconFolder}/arrange.svg`,
   preview: `${IconFolder}/preview.svg`,
+  github: `${IconFolder}/github-mark.svg`,
+  user: `${IconFolder}/user.svg`,
 };
 
 const Icons = Object.keys(files).reduce((acc, key) => {

components/Image/index.js

@@ -0,0 +1,13 @@
+import { Wrapper, Content, Container } from "./styled";
+
+const Image = ({ url, onClick }) => {
+  return (
+    <Wrapper onClick={onClick}>
+      <Container>
+        <Content src={url} />
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default Image;

components/Image/styled.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  width: 95%;
+
+  // Small devices (landscape phones, 576px and up)
+  @media (min-width: 576px) {
+    width: 48%;
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @media (min-width: 768px) {
+    width: 31%;
+  }
+
+  // Large devices (desktops, 992px and up)
+  @media (min-width: 992px) {
+    width: 23%;
+  }
+
+  // Extra large devices (large desktops, 1200px and up)
+  @media (min-width: 1200px) {
+    width: 18%;
+  }
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.05);
+  }
+`;
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+  padding-top: 56%;
+`;
+
+export const Content = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  border-radius: 5px;
+
+  background-image: url("${(props) => props.src}");
+`;

components/RouteSwitch/index.js

@@ -38,6 +38,14 @@ const DataWrapper = () => {
 
   useEffect(() => {
     setData([
+      {
+        link: "https://github.com/yushiang-demo/pano-to-mesh",
+        Icon: Icons.github,
+      },
+      {
+        link: "/admin",
+        Icon: Icons.user,
+      },
       {
         link: "/editors/layout2d",
         Icon: Icons.panorama,

components/Upload/index.js

@@ -0,0 +1,31 @@
+import Icons from "../Icon";
+import { Input, Wrapper, Label } from "./styled";
+const Upload = ({ onFileChange }) => {
+  const onChange = (e) => {
+    const { files } = e.target;
+    const length = files.length;
+    Array.from({ length }).forEach((_, index) => {
+      const file = files[index];
+      const formData = new FormData();
+      formData.append("file", file);
+      onFileChange(formData);
+    });
+  };
+
+  return (
+    <Wrapper>
+      <Label htmlFor="file-upload">
+        <Icons.add />
+      </Label>
+      <Input
+        multiple
+        id="file-upload"
+        type="file"
+        onChange={onChange}
+        accept=".png, .jpg, .jpeg"
+      />
+    </Wrapper>
+  );
+};
+
+export default Upload;

components/Upload/styled.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const Input = styled.input`
+  display: none;
+`;
+
+export const Label = styled.label`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Wrapper = styled.div`
+  border: 1px solid;
+  border-radius: 5px;
+
+  width: 95%;
+
+  // Small devices (landscape phones, 576px and up)
+  @media (min-width: 576px) {
+    width: 48%;
+  }
+
+  // Medium devices (tablets, 768px and up)
+  @media (min-width: 768px) {
+    width: 31%;
+  }
+
+  // Large devices (desktops, 992px and up)
+  @media (min-width: 992px) {
+    width: 23%;
+  }
+
+  // Extra large devices (large desktops, 1200px and up)
+  @media (min-width: 1200px) {
+    width: 18%;
+  }
+`;