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 && (
-
-
-