Updated orbiter and some UI

TheJeran · TheJeran · commit 6156e5a392b5 · 2025-12-12T12:18:43.000+01:00
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -56,6 +56,7 @@
   --glass-bg: rgba(255, 255, 255, 0.1);
   --glass-border: rgba(255, 255, 255, 0.2);
   --glass-shadow: rgba(0, 0, 0, 0.1);
+  --warning-area: rgb(255, 205, 67);
 }
 
 /* Light Theme */
@@ -83,6 +84,7 @@
   --glass-shadow: rgba(0, 0, 0, 0.15);
   --play-background: rgba(200, 200, 200, 0.8);
   --notice-shadow: rgb(230, 230, 230);
+  --warning-area: rgba(255, 205, 67, 0.616);
 }
 
 /* Dark Theme */
@@ -141,6 +143,7 @@
   --glass-shadow: rgba(0, 0, 0, 0.3);
   --play-background: rgba(200, 200, 200, 0.8);
   --notice-shadow: rgb(70, 70, 70);
+  --warning-area: rgba(255, 183, 49, 0.555);
 }
 
 @layer utilities {
diff --git a/src/components/plots/KeyFramePreviewer.tsx b/src/components/plots/KeyFramePreviewer.tsx
@@ -5,14 +5,14 @@ import React, { useEffect, useMemo, useRef } from 'react'
 import { useShallow } from 'zustand/shallow'
 import * as THREE from 'three'
 import { lerp } from 'three/src/math/MathUtils.js';
-
+import { deg2rad } from '@/utils/HelperFuncs';
 
 export const KeyFramePreviewer = () => {
     const {keyFrames, currentFrame, previewKeyFrames, frames, 
-        frameRate, useTime, timeRate, orbit, loopTime,} = useImageExportStore(useShallow(state => ({
+        frameRate, useTime, timeRate, orbit, orbitDeg, orbitDir, loopTime,} = useImageExportStore(useShallow(state => ({
         keyFrames:state.keyFrames, currentFrame:state.currentFrame, previewKeyFrames:state.previewKeyFrames,
         frames:state.frames, frameRate:state.frameRate, useTime:state.useTime, timeRate:state.timeRate, 
-        orbit:state.orbit, loopTime:state.loopTime
+        orbit:state.orbit, orbitDeg:state.orbitDeg, orbitDir:state.orbitDir, loopTime:state.loopTime
     })))
 
     const {camera} = useThree();
@@ -121,8 +121,8 @@ export const KeyFramePreviewer = () => {
             }
         }   
         if (orbit){
-            const angle = (currentFrame / (frames+1)) * Math.PI * 2;
-            const newAngle = originalAngle + angle;
+            const angle = (currentFrame / (frames+1)) * deg2rad(orbitDeg);
+            const newAngle = originalAngle + (orbitDir ? -angle : angle);
             camera.position.x = radius * Math.sin(newAngle);
             camera.position.z = radius * Math.cos(newAngle);
             camera.lookAt(0, 0, 0);
@@ -177,8 +177,8 @@ export const KeyFramePreviewer = () => {
                 }
             }
             if (orbit){
-                const angle = (frame / (frames+1)) * Math.PI * 2;
-                const newAngle = originalAngle + angle;
+                const angle = (frame / (frames+1)) * deg2rad(orbitDeg);
+                const newAngle = originalAngle + (orbitDir ? -angle : angle);
                 camera.position.x = radius * Math.sin(newAngle);
                 camera.position.z = radius * Math.cos(newAngle);
                 camera.lookAt(0, 0, 0);
diff --git a/src/components/ui/ExportImageSettings.tsx b/src/components/ui/ExportImageSettings.tsx
@@ -22,26 +22,29 @@ import { Switch } from './switch';
 import Hider from './Hider';
 import { Button } from './button';
 import { BsBoxArrowRight } from "react-icons/bs";
+import { Switcher } from './Switcher';
+import { FaLongArrowAltRight } from "react-icons/fa";
+
 
 const ExportImageSettings = () => {
     const {
         includeBackground, includeColorbar, doubleSize, cbarLoc, cbarNum,
         useCustomRes, customRes, includeAxis, mainTitle, cbarLabel, cbarUnits, animate, timeRate,
-        frames, frameRate, orbit, useTime, loopTime, keyFrameEditor, preview, pingpong  
+        frames, frameRate, orbit, useTime, loopTime, orbitDeg, orbitDir, preview, pingpong  
     } = useImageExportStore(useShallow(state => ({
           includeBackground: state.includeBackground, includeColorbar: state.includeColorbar,
           doubleSize: state.doubleSize, cbarLoc: state.cbarLoc, cbarNum: state.cbarNum, useCustomRes: state.useCustomRes,
           customRes: state.customRes, includeAxis: state.includeAxis, mainTitle: state.mainTitle, cbarLabel: state.cbarLabel,
           cbarUnits:state.cbarUnits, animate: state.animate, timeRate:state.timeRate, frames: state.frames, frameRate: state.frameRate, 
-          orbit: state.orbit, useTime:state.useTime, loopTime: state.loopTime, keyFrameEditor:state.keyFrameEditor, 
+          orbit: state.orbit, useTime:state.useTime, loopTime: state.loopTime, orbitDeg:state.orbitDeg, orbitDir:state.orbitDir,
           preview:state.preview, pingpong:state.pingpong
       })))
 
     const {ExportImg, EnableExport, setIncludeBackground, setIncludeColorbar, 
         setDoubleSize, setCbarLoc, setCbarNum, setUseCustomRes, setCustomRes, setIncludeAxis, 
         setHideAxis, setHideAxisControls, setMainTitle, setCbarLabel, setAnimate, 
         setFrames, setFrameRate, setTimeRate, setOrbit, setUseTime, setLoopTime, setKeyFrameEditor, 
-        setCbarUnits, setPingpong, setPreview, setPreviewExtent} = useImageExportStore.getState()
+        setCbarUnits, setPingpong, setPreview, setPreviewExtent, setOrbitDeg} = useImageExportStore.getState()
 
     interface CapitalizeFn {
         (str: string): string;
@@ -131,7 +134,7 @@ const ExportImageSettings = () => {
                 />
             </button>
             <Hider show={showSettings} className='col-span-2'>
-                <div className="grid grid-cols-[auto_60px] items-center gap-2">
+                <div className="grid grid-cols-[auto_60px] items-center gap-1">
                     <label htmlFor="includeBG">Include Background</label>
                     <Switch id='includeBG' checked={includeBackground} onCheckedChange={e => setIncludeBackground(e)}/>
                     {plotType != 'sphere' &&
@@ -147,8 +150,8 @@ const ExportImageSettings = () => {
                         <div  className='col-span-2 flex justify-between'>
                             <label htmlFor="colorbar-loc ">Colorbar <br/> Location</label>
                             <div id='colorbar-loc'>
-                                <Select value={cbarLoc} onValueChange={e=>setCbarLoc(e)}>
-                                    <SelectTrigger >
+                                <Select  value={cbarLoc} onValueChange={e=>setCbarLoc(e)}>
+                                    <SelectTrigger  >
                                         <SelectValue placeholder={cbarLoc}/>
                                     </SelectTrigger>
                                     <SelectContent>
@@ -161,7 +164,7 @@ const ExportImageSettings = () => {
                         </div>  
                         <div className="grid grid-cols-[auto_60px] items-center gap-2">
                             <label htmlFor="cbarNum" >Number of Ticks</label>
-                            <Input id='cbarNum' type="number" min={0} max={20} step={1} value={cbarNum} onChange={e => setCbarNum(parseInt(e.target.value))}/>    
+                            <Input className='h-[26px]' id='cbarNum' type="number" min={0} max={20} step={1} value={cbarNum} onChange={e => setCbarNum(parseInt(e.target.value))}/>    
                         </div>    
                         <div className='border-b my-2' />
                     </Hider>
@@ -173,11 +176,11 @@ const ExportImageSettings = () => {
                         <div className='grid grid-cols-[50%_50%] col-span-2 '>
                             <div className='flex flex-col items-center'>
                                 <h1>Width</h1>
-                                <Input id='cbarNum' type="number"  value={customRes[0]} onChange={e => setCustomRes([parseInt(e.target.value), customRes[1]])}/>
+                                <Input className='h-[26px]' id='cbarNum' type="number"  value={customRes[0]} onChange={e => setCustomRes([parseInt(e.target.value), customRes[1]])}/>
                             </div>
                             <div className='flex flex-col items-center'>
                                 <h1>Height</h1>
-                                <Input id='cbarNum' type="number"  value={customRes[1]} onChange={e => setCustomRes([customRes[0], parseInt(e.target.value)])}/>
+                                <Input className='h-[26px]' id='cbarNum' type="number"  value={customRes[1]} onChange={e => setCustomRes([customRes[0], parseInt(e.target.value)])}/>
                             </div>
 							<Button className={`col-span-2 ${previewState ? 'bg-red-600' : ''}`}
 								variant='outline'
@@ -216,24 +219,37 @@ const ExportImageSettings = () => {
                     <Switch id='useAnimate' checked={animate} onCheckedChange={e => setAnimate(e)}/>
                     {/* Animation Settings */}
                     <Hider show={animate} className='col-span-2 '>
-                        <div className="grid grid-cols-[auto_80px] items-center gap-2 mb-2">
+                        <div className="grid grid-cols-[auto_80px] items-center gap-1 mb-2">
                             <label htmlFor="frames">Frames</label>
-                            <Input id="frames" type='number' step={1} value={frames} onChange={e => setFrames(parseInt(e.target.value))} />
-
+                            <Input className='h-[26px]' id="frames" type='number' step={1} value={frames} onChange={e => setFrames(parseInt(e.target.value))} />
                             <label htmlFor="fps">FPS</label>
-                            <Input id="fps" type='number' step={1} value={frameRate} onChange={e => setFrameRate(parseInt(e.target.value))} />
+                            <Input className='h-[26px]' id="fps" type='number' step={1} value={frameRate} onChange={e => setFrameRate(parseInt(e.target.value))} />
                         </div>
                         <div className="grid grid-cols-[auto_60px] items-center gap-2">
                             
-
                             <label htmlFor="useOrbit">Orbit</label>
                             <Switch id="useOrbit" checked={orbit} onCheckedChange={e=> setOrbit(e)} />
 							
 							<Hider show={orbit} className='col-span-2'>
-								<div className="grid grid-cols-[auto_60px] items-center gap-2 mb-2">
+                                <div className="grid grid-cols-[auto_80px] items-center gap-2 mb-2">
+                                    <label htmlFor="orbitDeg">Orbit Degrees</label>
+                                    <Input id="orbitDeg" type='number' step={1} value={orbitDeg} onChange={e => setOrbitDeg(parseInt(e.target.value))} />
+                                </div>
+                                <div className="grid grid-cols-[auto_60px] items-center gap-2 mb-2">
+                                    <label htmlFor="orbitDir">Direction</label>
+                                    <FaLongArrowAltRight id='orbitDir' onClick={()=>useImageExportStore.getState().flipOrbitDir()}
+                                        style={{
+                                            transform: `${orbitDir ? "rotate(180deg)" : ""}`,
+                                            transition: ".25s",
+                                            cursor:"pointer"
+                                        }}      
+                                        size={26}
+                                    />
 									<label htmlFor="useOrbit">Ping-Pong</label>
 									<Switch id="useOrbit" checked={pingpong} onCheckedChange={e=> setPingpong(e)} />
 								</div>
+
+                                <div className='border-b my-2' />
 							</Hider>
                             
                             <label htmlFor="useTime">Animate Time</label>
@@ -258,11 +274,8 @@ const ExportImageSettings = () => {
 							</Button>
 
                         </div>
-                        <div className="grid grid-cols-[auto_60px] items-center gap-2 my-2">
-                            <label htmlFor="usePreview">Export Preview</label>
-                            <Switch id="usePreview" checked={preview} onCheckedChange={e=> setPreview(e)} />
-                        </div>
-                        
+                        <div className='my-2'/>
+                        <Switcher leftText='Preview' rightText='Final' state={preview} onClick={()=> setPreview(!preview)} />
                     </Hider>
                 </div>
             </Hider>
diff --git a/src/components/ui/KeyFrames.tsx b/src/components/ui/KeyFrames.tsx
@@ -8,6 +8,7 @@ import './css/KeyFrames.css'
 import { TbDiamondsFilled } from "react-icons/tb";
 import { Input } from './input';
 import { IoCloseCircleSharp } from "react-icons/io5";
+import { CiWarning } from "react-icons/ci";
 
 function pick<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
   return keys.reduce((acc, key) => {
@@ -93,10 +94,18 @@ const KeyFrames = () => {
 		/>
         <div className='flex justify-between items-center'>
 			{/* Information */}
-			<div className='ml-4'>
-				<div style={{visibility: orbit? "visible" : "hidden"}}>
-					<b>Camera Motion overwriten by orbit</b>
+			<div className={`ml-4 bg-[var(--warning-area)] min-w-[20%] px-4 py-2 rounded-md`}
+                style={{
+                    visibility:(orbit || useTime) ? "visible" : "hidden"
+                }}
+            >
+				<div style={{display: orbit? "flex" : "none", alignItems:"center", width:"100%", justifyContent:"space-between"}}>
+					<CiWarning /><b> Camera Motion overwriten by orbit</b><CiWarning />
+				</div>
+                <div style={{display: (orbit && !keyFrames)? "flex" : "none", alignItems:"center", width:"100%", justifyContent:"space-between"}}>
+					<CiWarning /><b>Keyframe required to preview orbit</b><CiWarning />
 				</div>
+
 			</div>
 
 			{/* Buttons */}
diff --git a/src/components/ui/Switcher.tsx b/src/components/ui/Switcher.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export const Switcher = ({leftText, rightText, state, onClick} : {leftText: string, rightText: string, state: boolean, onClick: () => void}) => {
+
+  return (
+    <div 
+        className='relative w-full text-center h-10 bg-primary rounded-full cursor-pointer mb-2 flex items-center justify-between px-4'
+        onClick={onClick}  
+    >
+        <span className={`z-10 font-semibold transition-colors ${state ? 'text-primary' : 'text-secondary'}`}>
+        {leftText}
+        </span>
+        <span className={`z-10 font-semibold transition-colors ${!state ? 'text-primary' : 'text-secondary'}`}>
+        {rightText}
+        </span>
+        <div 
+        className={`absolute top-1 h-8 w-[calc(50%-8px)] bg-secondary shadow-xs hover:bg-secondary/80 rounded-full transition-all duration-300 ${
+            state ? 'left-1' : 'left-[calc(50%+4px)]'
+        }`}
+        />
+    </div>
+  )
+}
+
diff --git a/src/components/ui/css/KeyFrames.css b/src/components/ui/css/KeyFrames.css
@@ -1,6 +1,7 @@
 .keyframes-container{
     position: fixed;
     width: 80%;
+    max-width: 1200px;
     left: 50%;
     transform: translateX(-50%);
     bottom: 10%;
diff --git a/src/utils/ExportCanvas.tsx b/src/utils/ExportCanvas.tsx
@@ -8,7 +8,7 @@ import * as THREE from 'three'
 import { useShallow } from 'zustand/shallow';
 import { lerp } from 'three/src/math/MathUtils.js';
 import { FFmpeg } from '@ffmpeg/ffmpeg';
-
+import { deg2rad } from './HelperFuncs';
 const DrawComposite = (
     compositeCanvas: HTMLCanvasElement,
     gl: THREE.WebGLRenderer,
@@ -27,7 +27,7 @@ const DrawComposite = (
 
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
-    if (includeBackground) {
+    if (includeBackground || animate) {
         ctx.fillStyle = bgColor;
         ctx.fillRect(0, 0, width, height);
     } else {
@@ -238,13 +238,14 @@ async function DrawTextOverlay(
 
 
 const ExportCanvas = ({show}:{show: boolean}) => {
-    const {exportImg, enableExport, animate, frames, frameRate, useTime, timeRate, orbit, loopTime,
+    const {exportImg, enableExport, animate, frames, frameRate, useTime, timeRate, orbit, orbitDeg, orbitDir, loopTime,
         preview, useCustomRes, customRes, doubleSize, setHideAxis, setHideAxisControls
     } = useImageExportStore(useShallow(state => ({
         exportImg: state.exportImg, enableExport:state.enableExport, animate:state.animate,
         frames:state.frames, frameRate:state.frameRate, useTime:state.useTime, timeRate:state.timeRate,
-        orbit:state.orbit, loopTime:state.loopTime, preview:state.preview, useCustomRes:state.useCustomRes,
-        customRes:state.customRes, doubleSize:state.doubleSize, setHideAxis:state.setHideAxis, setHideAxisControls:state.setHideAxisControls
+        orbit:state.orbit, orbitDeg:state.orbitDeg, orbitDir:state.orbitDir, loopTime:state.loopTime, preview:state.preview, 
+        useCustomRes:state.useCustomRes, customRes:state.customRes, doubleSize:state.doubleSize, 
+        setHideAxis:state.setHideAxis, setHideAxisControls:state.setHideAxisControls
     })))
     const {setAnimProg, setQuality} = usePlotStore.getState()
     const {setStatus, setProgress} = useGlobalStore.getState()
@@ -330,7 +331,7 @@ const ExportCanvas = ({show}:{show: boolean}) => {
 
                 ffmpeg.on('progress', ({ progress, time }) => {
                     // progress is a value between 0 and 1
-                    setProgress(Math.round(progress * 100));
+                    setProgress(Math.min(Math.round(progress * 100), 100));
                 });
 
                 setStatus("Rendering Frames")
@@ -348,8 +349,8 @@ const ExportCanvas = ({show}:{show: boolean}) => {
                 for (let frame=0; frame<frames; frame++){
                     // ----- UPDATE VISUALS ---- //
                     if (orbit){
-                        const angle = (frame / (frames+1)) * Math.PI * 2;
-                        const newAngle = originalAngle + angle;
+                        const angle = (frame / (frames+1)) * deg2rad(orbitDeg);
+                        const newAngle = originalAngle + (orbitDir ? -angle : angle);
                         camera.position.x = radius * Math.sin(newAngle);
                         camera.position.z = radius * Math.cos(newAngle);
                         camera.lookAt(0, 0, 0);
diff --git a/src/utils/GlobalStates.ts b/src/utils/GlobalStates.ts
@@ -540,6 +540,8 @@ type ImageExportState = {
   frames: number;
   frameRate: number;
   orbit: boolean;
+  orbitDeg: number;
+  orbitDir: boolean;
   pingpong: boolean;
   useTime: boolean;
   timeRate: number;
@@ -576,6 +578,8 @@ type ImageExportState = {
   setFrames: (frames: number) => void;
   setFrameRate: (frameRate: number) => void;
   setOrbit: (orbit: boolean) => void;
+  setOrbitDeg: (orbitDeg: number) => void;
+  flipOrbitDir: () => void;
   setPingpong: (pingpong: boolean) => void;
   setUseTime: (useTime: boolean) => void;
   setTimeRate: (timeRate: number) => void;
@@ -610,6 +614,8 @@ export const useImageExportStore = create<ImageExportState>((set, get) => ({
   frames: 60,
   frameRate: 12,
   orbit: false,
+  orbitDeg: 360,
+  orbitDir: false,
   pingpong: false,
   useTime: false,
   timeRate: 12,
@@ -648,6 +654,8 @@ export const useImageExportStore = create<ImageExportState>((set, get) => ({
   setFrames: (frames) => set({ frames }),
   setFrameRate: (frameRate) => set({ frameRate }),
   setOrbit: (orbit) => set({ orbit }),
+  setOrbitDeg: (orbitDeg) => set({ orbitDeg }),
+  flipOrbitDir: () => set({ orbitDir: !get().orbitDir }),
   setPingpong: (pingpong) => set({ pingpong }),
   setUseTime: (useTime) => set({ useTime }),
   setTimeRate: (timeRate) => set({ timeRate }),

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,7 @@`
`56`	`56`	`--glass-bg: rgba(255, 255, 255, 0.1);`
`57`	`57`	`--glass-border: rgba(255, 255, 255, 0.2);`
`58`	`58`	`--glass-shadow: rgba(0, 0, 0, 0.1);`
	`59`	`+ --warning-area: rgb(255, 205, 67);`
`59`	`60`	`}`
`60`	`61`
`61`	`62`	`/* Light Theme */`
`@@ -83,6 +84,7 @@`
`83`	`84`	`--glass-shadow: rgba(0, 0, 0, 0.15);`
`84`	`85`	`--play-background: rgba(200, 200, 200, 0.8);`
`85`	`86`	`--notice-shadow: rgb(230, 230, 230);`
	`87`	`+ --warning-area: rgba(255, 205, 67, 0.616);`
`86`	`88`	`}`
`87`	`89`
`88`	`90`	`/* Dark Theme */`
`@@ -141,6 +143,7 @@`
`141`	`143`	`--glass-shadow: rgba(0, 0, 0, 0.3);`
`142`	`144`	`--play-background: rgba(200, 200, 200, 0.8);`
`143`	`145`	`--notice-shadow: rgb(70, 70, 70);`
	`146`	`+ --warning-area: rgba(255, 183, 49, 0.555);`
`144`	`147`	`}`
`145`	`148`
`146`	`149`	`@layer utilities {`