diff --git a/public/locales/en/panel-skybrowser.json b/public/locales/en/panel-skybrowser.json
index 8027e0cf..3be71ac4 100644
--- a/public/locales/en/panel-skybrowser.json
+++ b/public/locales/en/panel-skybrowser.json
@@ -88,7 +88,12 @@
},
"general": {
"tooltip": "General settings for all browsers",
- "tab-title": "General"
+ "tab-title": "General",
+ "show-hover-indicator": {
+ "label": "Show image position on hover",
+ "info": "Show an indicator on the sky in OpenSpace when hovering or focusing images in the SkyBrowser lists. The position of the indicator matches the position of the image interacted with.",
+ "disabled-tooltip": "No scene graph node for the hover indicator was found. Make sure that the SkyBrowser is properly configured and that the hover indicator asset is loaded."
+ }
}
},
"tab-content": {
diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx
index d9f78149..577eb5a9 100644
--- a/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx
+++ b/src/panels/SkyBrowserPanel/BrowserTabs/AddedImageCard.tsx
@@ -60,6 +60,8 @@ export function AddedImageCard({ image, opacity }: Props) {
luaApi?.skybrowser.selectImage(image.url);
setActiveImage(image.url);
}}
+ onHover={() => luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)}
+ onLeave={() => luaApi?.skybrowser.disableHoverIndicator()}
bd={'1px solid var(--mantine-color-gray-7)'}
radius={'sm'}
/>
diff --git a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx
index 01671f87..6bbcae0a 100644
--- a/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx
+++ b/src/panels/SkyBrowserPanel/BrowserTabs/Settings.tsx
@@ -12,10 +12,13 @@ import {
} from '@mantine/core';
import { useOpenSpaceApi } from '@/api/hooks';
+import { BoolInput } from '@/components/Input/BoolInput';
import { NumericInput } from '@/components/Input/NumericInput/NumericInput';
import { NumericSlider } from '@/components/Input/NumericInput/NumericSlider/NumericSlider';
import { LoadingBlocks } from '@/components/LoadingBlocks/LoadingBlocks';
+import { MaybeTooltip } from '@/components/MaybeTooltip/MaybeTooltip';
import { Property } from '@/components/Property/Property';
+import { useProperty } from '@/hooks/properties';
import { useAppSelector } from '@/redux/hooks';
import {
SkyBrowserAllowCameraRotationKey,
@@ -46,6 +49,11 @@ export function Settings({ id }: Props) {
const imageList = useAppSelector((state) => state.skybrowser.imageList);
const targetId = useAppSelector((state) => state.skybrowser.browsers[id]?.targetId);
+ const [hoverIndicatorEnabled, setHoverIndicatorEnabled] = useProperty(
+ 'BoolProperty',
+ 'Scene.HoverIndicator.Renderable.Enabled'
+ );
+
const luaApi = useOpenSpaceApi();
const color = useBrowserColorString(id);
@@ -196,6 +204,19 @@ export function Settings({ id }: Props) {
+
+
+
diff --git a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx
index 581877f3..841253a6 100644
--- a/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx
+++ b/src/panels/SkyBrowserPanel/ImageList/ImageCard.tsx
@@ -31,6 +31,8 @@ export function ImageCard({ image }: Props) {
luaApi?.skybrowser.moveIndicatorToHoverImage(image.url)}
+ onLeave={() => luaApi?.skybrowser.disableHoverIndicator()}
icon={}
h={'100%'}
w={'100%'}
diff --git a/src/panels/SkyBrowserPanel/components/IconImage.module.css b/src/panels/SkyBrowserPanel/components/IconImage.module.css
index 74263de9..e284ab6b 100644
--- a/src/panels/SkyBrowserPanel/components/IconImage.module.css
+++ b/src/panels/SkyBrowserPanel/components/IconImage.module.css
@@ -1,3 +1,9 @@
.iconImage:hover {
filter: brightness(1.3);
}
+
+.iconImage:focus {
+ filter: brightness(1.3);
+ border-style: solid;
+ border-width: 2px;
+}
diff --git a/src/panels/SkyBrowserPanel/components/IconImage.tsx b/src/panels/SkyBrowserPanel/components/IconImage.tsx
index 0501d76d..782105f8 100644
--- a/src/panels/SkyBrowserPanel/components/IconImage.tsx
+++ b/src/panels/SkyBrowserPanel/components/IconImage.tsx
@@ -5,15 +5,35 @@ import styles from './IconImage.module.css';
interface Props extends ImageProps {
onClick: () => void;
+ onHover?: () => void;
+ onLeave?: () => void;
icon: React.JSX.Element;
url: string;
h?: number | string;
w?: number | string;
}
-export function IconImage({ url, onClick, icon, h, w, ...props }: Props) {
+export function IconImage({
+ url,
+ onClick,
+ onHover,
+ onLeave,
+ icon,
+ h,
+ w,
+ ...props
+}: Props) {
return (
-
+