From d0119a3c3d57851d49ea298b8cf55e9b34fc1bca Mon Sep 17 00:00:00 2001 From: Ariel Noyman Date: Mon, 6 Mar 2023 14:16:57 -0500 Subject: [PATCH] remove rendered view --- src/App.js | 3 - src/views/CityScopeJS/index.js | 2 - src/views/RenderedView/RenderedViewMap.js | 355 ---------------------- src/views/RenderedView/index.js | 35 --- 4 files changed, 395 deletions(-) delete mode 100644 src/views/RenderedView/RenderedViewMap.js delete mode 100644 src/views/RenderedView/index.js diff --git a/src/App.js b/src/App.js index 67152619..7906abb6 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,6 @@ import theme from "./theme"; // views import CityScopeJS from "./views/CityScopeJS"; import CityIOviewer from "./views/CityIOviewer"; -import RenderedView from "./views/RenderedView"; import ProjectionMapping from "./views/ProjectionMapping"; import GridEditor from "./views/GridEditor"; @@ -71,8 +70,6 @@ const App = () => { {viewSelectorState === "cityio" && } {/* otherwise, show the projection */} {viewSelectorState === "projection" && } - {/* otherwise, show the projection */} - {viewSelectorState === "render" && } ); diff --git a/src/views/CityScopeJS/index.js b/src/views/CityScopeJS/index.js index d17b5827..7dc9fc1e 100644 --- a/src/views/CityScopeJS/index.js +++ b/src/views/CityScopeJS/index.js @@ -3,7 +3,6 @@ import { useSelector } from "react-redux"; import MenuContainer from "./MenuContainer"; import DeckGLMap from "./DeckglMap/index"; import VisContainer from "./VisContainer"; -import RenderedView from "../RenderedView"; export default function CityScopeJS() { const cityIOisDone = useSelector( @@ -23,7 +22,6 @@ export default function CityScopeJS() { - )} diff --git a/src/views/RenderedView/RenderedViewMap.js b/src/views/RenderedView/RenderedViewMap.js deleted file mode 100644 index 7327ef62..00000000 --- a/src/views/RenderedView/RenderedViewMap.js +++ /dev/null @@ -1,355 +0,0 @@ -/** - * How to save a screenshot from deck.gl map to a file? - // https://codesandbox.io/s/export-react-component-as-image-tgqmq?file=/src/App.js:169-175 - // https://github.com/xap5xap/image-export-deckgl-rect/blob/master/src/App.js -// https://gist.github.com/adamilyas/88445938af94b2d29723f92272123f43 - * - */ - -import { useState, useRef, useEffect } from "react"; -import { useSelector } from "react-redux"; -import DeckGL from "deck.gl"; -import { SimpleMeshLayer } from "@deck.gl/mesh-layers"; -import { OBJLoader } from "@loaders.gl/obj"; -import { processGridData } from "../CityScopeJS/DeckglMap/deckglLayers/GridLayer"; -import { CubeGeometry } from "@luma.gl/engine"; -import { mapSettings } from "../../settings/settings"; -import Map from "react-map-gl"; -import LoadingProgressBar from "../../Components/LoadingProgressBar"; -import "mapbox-gl/dist/mapbox-gl.css"; -import Alert from "@mui/material/Alert"; -import { Buffer } from "buffer"; - -import { - Button, - CircularProgress, - TextField, - Box, - Typography, - Grid, - Paper, - Stack, -} from "@mui/material"; - -import axios from "axios"; - -const cube = new CubeGeometry({ type: "x,z", xlen: 0, ylen: 0, zlen: 0 }); - -export default function RenderedViewMap() { - // fix deck view rotate - useEffect(() => { - document.addEventListener("contextmenu", (evt) => evt.preventDefault()); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const refMap = useRef(); - const refDeckgl = useRef(); - const renderDivRef = useRef(); - - const [renderedImage, setRenderedImage] = useState(null); - const [isLoading, setIsLoading] = useState(); - const [prompt, setPrompt] = useState( - "Aerial view of the MIT Campus in Cambridge, Massachusetts. Realistic. Accurate. Sunset with long shadows. Beautiful." - ); - const [userSeed, setUserSeed] = useState(1024); - const [errorMessage, setErrorMessage] = useState(null); - const serverURL = "https://virtualscope.media.mit.edu/"; - - const cityIOdata = useSelector((state) => state.cityIOdataState.cityIOdata); - const GEOGRID = processGridData(cityIOdata); - const header = GEOGRID.properties.header; - - const midGrid = () => { - const lastCell = - cityIOdata.GEOGRID.features[cityIOdata.GEOGRID.features.length - 1] - .geometry.coordinates[0][0]; - const firstCell = cityIOdata.GEOGRID.features[0].geometry.coordinates[0][0]; - const midGrid = [ - (firstCell[0] + lastCell[0]) / 2, - (firstCell[1] + lastCell[1]) / 2, - ]; - return midGrid; - }; - - const midGridCoordinates = midGrid(); - const [viewState, setViewState] = useState({ - longitude: midGridCoordinates[0], - latitude: midGridCoordinates[1], - zoom: 15, - bearing: 360 - header.rotation, - pitch: 45, - }); - - const [mergeCanvas] = useState(document.createElement("canvas")); - - const handleCaptureButton = () => { - if (!refMap.current || !refDeckgl.current) { - return; - } - setIsLoading(true); - setErrorMessage(null); - const mapGL = refMap.current.getMap(); - const deck = refDeckgl.current.deck; - const mapboxCanvas = mapGL.getCanvas(); - deck.redraw(true); - const deckglCanvas = deck.canvas; - mergeCanvas.width = mapboxCanvas.width; - mergeCanvas.height = mapboxCanvas.height; - var context = mergeCanvas.getContext("2d"); - context.globalAlpha = 1.0; - context.drawImage(mapboxCanvas, 0, 0); - context.globalAlpha = 1.0; - context.drawImage(deckglCanvas, 0, 0); - const jpegFile = mergeCanvas.toDataURL("image/jpeg"); - setRenderedImage(jpegFile); - renderDivRef.current?.scrollIntoView({ behavior: "smooth" }); - - mergeCanvas.toBlob(async (blob) => { - var formData = new FormData(); - formData.append("image", blob, "image.jpg"); - formData.append("prompt", prompt); - formData.append("user_seed", userSeed); - formData.append("from", "frontend"); - - const config = { - method: "POST", - url: serverURL, - data: formData, - responseType: "arraybuffer", - }; - await axios(config) - .then(async (res) => { - console.log(res.data); - const buffer = Buffer.from(res.data, "base64"); - const im = await blobToDataUrl(new Blob([buffer])); - setRenderedImage(im); - setIsLoading(false); - }) - .catch((error) => { - setIsLoading(false); - console.log(error); - setRenderedImage(null); - setErrorMessage(error); - }); - }); - }; - - const blobToDataUrl = (data) => { - return new Promise((r) => { - let a = new FileReader(); - a.onload = r; - a.readAsDataURL(data); - }).then((e) => e.target.result); - }; - - return ( - <> - {isLoading && ( - - )} - - - {errorMessage && ( - - {errorMessage.message && - `DeepScope cannot load [${errorMessage.message}]`} - - )} - {/* TEXT */} - - - DeepScope uses a machine learning model to generate urban scenes - in real-time, based on designs preform in the CitySCcope platform. - By implementing 'Stable diffusion', an open-source Transformer - model, this tool allows for real-time prototyping and - visualizations of urban design proposals, bypassing the need for - expensive and time-consuming rendering. - - - - - setPrompt(e.target.value)} - /> - - - setUserSeed(e.target.value)} - /> - - - - - - {/* Deck Map */} - - - - CityScope Model View - - - setViewState(viewState) - } - controller={ - isLoading - ? false - : { - touchZoom: true, - touchRotate: true, - keyboard: false, - } - } - layers={[ - new SimpleMeshLayer({ - id: "mesh-layer", - data: GEOGRID.features, - loaders: [OBJLoader], - mesh: cube, - - getPosition: (d) => { - const pntArr = d.geometry.coordinates[0]; - const first = pntArr[1]; - const last = pntArr[pntArr.length - 2]; - const center = [ - (first[0] + last[0]) / 2, - (first[1] + last[1]) / 2, - // add the height of the grid cell - d.properties.height.length > 1 - ? d.properties.height[1] > 1 - ? d.properties.height[1] / 2 - : 1 - : d.properties.height > 1 - ? d.properties.height / 2 - : 1, - ]; - return center; - }, - getColor: (d) => - d.properties.interactive - ? d.properties.color - : [0, 0, 0, 0], - opacity: 0.75, - getOrientation: (d) => [-180, header.rotation, -90], - getScale: (d) => [ - GEOGRID.properties.header.cellSize / 2, - d.properties.height.length > 1 - ? d.properties.height[1] > 1 - ? d.properties.height[1] / 2 - : 1 - : d.properties.height > 1 - ? d.properties.height / 2 - : 1, - GEOGRID.properties.header.cellSize / 2, - ], - - updateTriggers: { - getScale: GEOGRID, - }, - }), - ]} - > - - - - - - - {/* Result IMG */} - - - - Captured & Rendered View - {renderedImage && ( -
- screenshot -
- )} - - - - - - - ); -} diff --git a/src/views/RenderedView/index.js b/src/views/RenderedView/index.js deleted file mode 100644 index abf54b92..00000000 --- a/src/views/RenderedView/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import { useSelector } from "react-redux"; -import RenderedViewMap from "./RenderedViewMap"; -import ResizableDrawer from "../../Components/ResizableDrawer"; -import { Grid, Box, Container } from "@mui/material"; -import CollapsableCard from "../../Components/CollapsableCard"; - -export default function RenderedView() { - const cityIOisDone = useSelector( - (state) => state.cityIOdataState.cityIOisDone - ); - - return ( - <> - - - - - - - {cityIOisDone && } - - - - - - - - - ); -}