Skip to content

Export keyframes and create quickTip. #710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheJeran merged 1 commit into from
Aug 3, 2026
Merged

Export keyframes and create quickTip. #710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/BrowZarrPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@ export function BrowZarrPopover() {
>
Jeran Poehls
</a>{" "}
&{" "}
{/* &{" "}
<a
href="https://lazarusa.github.io/"
target="_blank"
rel="noreferrer"
className="underline underline-offset-2"
>
Lazaro Alonso
</a>
</a> */}
</p>

<div className="space-y-2">
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/Elements/AboutInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const AboutInfo = () => {

<div>
<span>
<a href="https://lazarusa.github.io/" target="_blank" rel="noreferrer"><strong>Lazaro Alonso</strong></a> &
{/* <a href="https://lazarusa.github.io/" target="_blank" rel="noreferrer"><strong>Lazaro Alonso</strong></a> & */}
<a href="https://www.bgc-jena.mpg.de/person/jpoehls/2206" target="_blank" rel="noreferrer"><strong> Jeran Poehls</strong></a>
</span>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ui/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ const Footer = () => {
</a>
</div>
<div className="expandable-text">
<span>Ⓒ <a href="https://www.bgc-jena.mpg.de/person/jpoehls/2206" target='_blank' rel="noreferrer">Jeran Poehls</a>&<a href="https://lazarusa.github.io/" target='_blank' rel="noreferrer">Lazaro Alonso</a>
<span>Ⓒ <a href="https://www.bgc-jena.mpg.de/person/jpoehls/2206" target='_blank' rel="noreferrer">Jeran Poehls</a>
{/* &<a href="https://lazarusa.github.io/" target='_blank' rel="noreferrer">Lazaro Alonso</a> */}
</span>

</div>
Expand Down
83 changes: 64 additions & 19 deletions src/components/ui/NavBar/ExportImageSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@
import React, {useEffect, useState} from 'react'
import { IoImage } from "react-icons/io5";
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
import { Input, Switch, Hider, Button, Switcher } from "@/components/ui";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { Input, Switch, Hider, Button, Switcher, QuickTip } from "@/components/ui";
import { useImageExportStore } from '@/GlobalStates/ImageExportStore';
import { useGlobalStore } from '@/GlobalStates/GlobalStore';
import { usePlotStore } from '@/GlobalStates/PlotStore';
Expand All @@ -23,15 +18,17 @@ import {
} from "@/components/ui/select"
import { BsBoxArrowRight } from "react-icons/bs";
import { FaLongArrowAltRight } from "react-icons/fa";
import { FiCopy } from "react-icons/fi";
import { BiExport } from 'react-icons/bi'


const ExportImageSettings = () => {
const {
includeBackground, includeColorbar, doubleSize, cbarLoc, cbarNum,
includeBackground, includeColorbar, doubleSize, cbarLoc, cbarNum, keyFrames,
useCustomRes, customRes, includeAxis, mainTitle, cbarLabel, cbarUnits, animate, timeRate,
frames, frameRate, orbit, useTime, loopTime, orbitDeg, orbitDir, preview, pingpong
} = useImageExportStore(useShallow(state => ({
includeBackground: state.includeBackground, includeColorbar: state.includeColorbar,
includeBackground: state.includeBackground, includeColorbar: state.includeColorbar, keyFrames: state.keyFrames,
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,
Expand Down Expand Up @@ -61,6 +58,7 @@ const ExportImageSettings = () => {
const [showAnimation, setShowAnimation] = useState(false)
const [showSettings, setShowSettings] = useState(true)
const [previewState, setPreviewState] = useState(false)
const [copied, setCopied] = useState(false);

const { axisMapping } = useZarrStore(useShallow(state => ({
axisMapping: state.axisMapping
Expand All @@ -75,27 +73,46 @@ const ExportImageSettings = () => {
setFrames(sliceDist);
},[zSlice, dimArrays, axisMapping])

const keyFramesJSON = (): string => {
const {keyFrames} = useImageExportStore.getState()
if (!keyFrames) return '';
const obj = Object.fromEntries(keyFrames)
return JSON.stringify(obj)
}

const copyToClipboard = async () => {
const keyFramesJson = keyFramesJSON()
await navigator.clipboard.writeText(JSON.stringify(keyFramesJson));
setCopied(true);
setTimeout(() => setCopied(false), 1500); //Use for a pop-up that fades away
};

const exportToJson = async () => {
const keyFramesJson = keyFramesJSON()
const blob = new Blob([keyFramesJson], { type: "application/json" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "keyframes.json";

link.click();
URL.revokeObjectURL(url)

}

return (
<Popover>
<PopoverTrigger asChild>
<div>
<Tooltip delayDuration={500} >
<TooltipTrigger asChild>
<Button
<QuickTip message='Export view as Image'>
<Button
variant="ghost"
size="icon"
className="cursor-pointer"
onClick={e=>EnableExport()} // This just allows exporting to prevent the export module from firing when its loaded
>
<IoImage className="size-8"/>
</Button>
</TooltipTrigger>
<TooltipContent side="right" align="start">
Export view as Image
</TooltipContent>
</Tooltip>
</div>
</QuickTip>
</PopoverTrigger>
<PopoverContent
side="right"
Expand Down Expand Up @@ -277,7 +294,35 @@ const ExportImageSettings = () => {
>
Keyframe Editor <BsBoxArrowRight/>
</Button>

{keyFrames &&
<div className='col-span-2 text-center'>
<b>Export Keyframes</b>
<div className='grid grid-cols-2 items-center'>
<div>
<QuickTip message='Copy the current keyframes to JSON for use in a coding environment'>
<Button
className='p-2'
variant='ghost'
onClick={copyToClipboard}
>
<FiCopy className='size-4'/><span className='text-xs'>Copy</span>
</Button>
</QuickTip>
</div>
<div>
<QuickTip message='Export the current keyframes to JSON for use in a coding environment'>
<Button
className='p-2'
variant='ghost'
onClick={exportToJson}
>
<BiExport className='size-4'/><span className='text-xs'>Export</span>
</Button>
</QuickTip>
</div>
</div>
</div>
}
</div>
<div className='my-2'/>
<Switcher leftText='Preview' rightText='Final' state={preview} onClick={()=> setPreview(!preview)} />
Expand Down
82 changes: 36 additions & 46 deletions src/components/ui/NavBar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import {
ExportImageSettings,
PlotLineButton,
QuickTip,
useCSSVariable,
} from "@/components/ui";
import "../css/Navbar.css";
Expand All @@ -11,11 +12,6 @@
import { RiCloseLargeLine, RiMenu2Line } from "react-icons/ri";
import { useShallow } from "zustand/shallow";
import { Button, AxisBars } from "@/components/ui";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { useGlobalStore } from '@/GlobalStates/GlobalStore';
import { usePlotStore } from '@/GlobalStates/PlotStore';
Expand Down Expand Up @@ -43,36 +39,30 @@
const [isOpen, setIsOpen] = useState<boolean>(true);
const navRef = useRef<HTMLElement | null>(null);
const iconCol = useCSSVariable("--text-plot");

{isOpen ? "Close navigation" : "Open navigation"}

Check warning on line 42 in src/components/ui/NavBar/Navbar.tsx

View workflow job for this annotation

GitHub Actions / core 

Expected an assignment or function call and instead saw an expression
return (
<nav className="navbar" ref={navRef}>
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
{plotOn && (
<Button
variant="ghost"
size="icon"
className="navbar-trigger size-10"
aria-expanded={isOpen}
onClick={() => setIsOpen((prev) => !prev)}
>
{isOpen ? (
<RiCloseLargeLine className="size-4" />
) : (
<RiMenu2Line className="size-6" />
)}
</Button>
)}
</TooltipTrigger>
<TooltipContent side="right" align="start">
{isOpen ? "Close navigation" : "Open navigation"}
</TooltipContent>
</Tooltip>
<QuickTip message={isOpen ? "Close navigation" : "Open navigation"}>
{plotOn && (
<Button
variant="ghost"
size="icon"
className="navbar-trigger size-10"
aria-expanded={isOpen}
onClick={() => setIsOpen((prev) => !prev)}
>
{isOpen ? (
<RiCloseLargeLine className="size-4" />
) : (
<RiMenu2Line className="size-6" />
)}
</Button>
)}
</QuickTip>
<div className={cn("navbar-content", isOpen ? "open" : "closed")}>
{/* <LogoDrawer /> */}
<div className="navbar-left">
<Tooltip delayDuration={500}>
<TooltipTrigger asChild>
<QuickTip message='Reset camera view'>
<Button
variant="ghost"
size="icon"
Expand All @@ -84,28 +74,28 @@
>
<MdFlipCameraIos className="size-8" />
</Button>
</TooltipTrigger>
<TooltipContent side="right" align="start">
<span>Reset camera view</span>
</TooltipContent>
</Tooltip>
</QuickTip>
<Button
variant="ghost"
size="icon"
className="cursor-pointer"
onClick={() => setUseOrtho(!useOrtho)}
>
{useOrtho ? (
<Orthographic
color={iconCol}
className="size-8"
/>
) : (
<Perspective
color={iconCol}
className="size-8"
/>
)}
<QuickTip message={`Change camera to use ${useOrtho ? "Perspective" : "Orthographic"} view`}>
<div>
{useOrtho ? (
<Orthographic
color={iconCol}
className="size-8"
/>
) : (
<Perspective
color={iconCol}
className="size-8"
/>
)}
</div>
</QuickTip>
</Button>
<PlotLineButton />
<ExportImageSettings />
Expand Down
Loading
Loading