Fixed color encoding. Fixed initial textbox sizing with window.dispatch

Author: lpython

back/src/server.ts

@@ -38,7 +38,7 @@ app.get('/gen.bmp', (req, res) => {
   const rayTracer = new RayTracer();
   rayTracer.renderToImage(defaultScene(), img);
 
-  ABGRtoRGBA(img.data);
+  RGBAtoABGR(img.data);
 
   res.contentType('image/bmp');
   res.send(bmp.encode(img).data);
@@ -59,7 +59,7 @@ app.post('/gen_xml', (req, res) => {
   const scene = xmlToScene(req.body.scene);
   rayTracer.renderToImage(scene, img);
 
-  ABGRtoRGBA(img.data);
+  RGBAtoABGR(img.data);
 
   res.contentType('image/bmp');
   res.send(bmp.encode(img).data);
@@ -68,7 +68,7 @@ app.post('/gen_xml', (req, res) => {
 
 app.listen(PORT, () => console.log(`Listening on ${PORT}`))
 
-function ABGRtoRGBA(imageData: Uint8ClampedArray) {
+function RGBAtoABGR(imageData: Uint8ClampedArray) {
   for (let i = 0; i < imageData.length; i += 4) {
     let r = imageData[i]; let g = imageData[i + 1]; let b = imageData[i + 2]; let a = imageData[i + 3];
     imageData[i] = a; imageData[i + 1] = b; imageData[i + 2] = g; imageData[i + 3] = r;

build.sh

@@ -42,6 +42,6 @@ cd ..
 
 # copy frontend bundles to public folder
 cp -r -v front/build/* back/public/
-cp -r -v react-client/build/* back/public/
+cp -r -v react-client/build/* back/public/react-client
 
 echo 'Finished build'

front/src/app.ts

@@ -153,7 +153,7 @@ function onLoad() {
         height: size
       });
 
-      fetch("gen_xml", {
+      fetch("http://localhost:1234/gen_xml", {
         "headers": {
           "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
           "accept-language": "en-US,en;q=0.9",

raytrace/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@python36/raytrace", 
+  "name": "@python36/raytrace",
   "version": "1.3.1",
   "description": "Raytracer from typescript samples, broken up into modules",
   "keywords": [],
@@ -10,7 +10,6 @@
     "build-cjs": "tsc",
     "build-es6": "tsc -p tsconfig.es6.json"
   },
- 
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "lib/esm/index.js",

raytrace/package.json

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { samples } from '@python36/scene-xml';
 
 import { sceneProcessors } from './processors';
@@ -13,7 +13,7 @@ const App: React.FC = () => {
   const renderingEl = useRef(null);
 
   const setScene = (e: any) => setXmlInput(samples[e.target.value]);
-  const setHeight = ():void  => {
+  const setHeight = useCallback(():void  => {
     console.log('setHeight():', {renderingEl})
     if (renderingEl && renderingEl.current) {
       const elm = renderingEl.current as any;
@@ -22,7 +22,7 @@ const App: React.FC = () => {
         setTextareaHeight(elm.clientHeight);
       }
     }
-  };
+  }, [renderingEl, textareaHeight]);
 
   const render = () => {
     const selectedProcessor = sceneProcessors[processor];
@@ -45,15 +45,16 @@ const App: React.FC = () => {
     return () => window.removeEventListener('resize', setHeight);
   }, [setHeight]);
 
-  useEffect(() => void setTimeout(setHeight, 1000));
-
+  useLayoutEffect(() => void setTimeout(() => 
+    window.dispatchEvent(new Event('resize')), 1)
+  , [imageURL]);
+  
   return (
     <div className="container">
       <hr />
 
       <div className="row">
         <div className="col-md-6">
-          {/* {imageURL && (<img src={imageURL} ref={renderingEl} className="rendering" />)} */}
           <img src={imageURL} ref={renderingEl} className="rendering" />
         </div>
         <div className="col-md-6 visible-md-inline visible-lg-inline">

react-client/src/App.tsx

@@ -49,13 +49,13 @@ export const sceneProcessors: SceneProcessors = {
     const imageData = new ImageData(size, size);
 
     raytracer.renderToImage(scene, imageData);
+    RGBAtoABGR(imageData.data);
     const { data: buffer } = bmp.encode(imageData);
     let newBlob = new Blob([buffer], {type: 'image/bmp'});
-    console.log({newBlob})
     let url = URL.createObjectURL(newBlob);
     return Promise.resolve(url);
-
   },
+  
   // 'golang-back': (xml, size) => {
   //   fetch("http://localhost:5600/gen_xml.png?" + "xml-scene=" + encodeURI(xml), {
   //     "headers": {
@@ -87,4 +87,11 @@ export const sceneProcessors: SceneProcessors = {
   //       console.log({ err });
   //     });
   // }
-};
+};
+
+function RGBAtoABGR(imageData: Uint8ClampedArray) {
+  for (let i = 0; i < imageData.length; i += 4) {
+    let r = imageData[i]; let g = imageData[i + 1]; let b = imageData[i + 2]; let a = imageData[i + 3];
+    imageData[i] = a; imageData[i + 1] = b; imageData[i + 2] = g; imageData[i + 3] = r;
+  }
+}