Inspired by the Viewscreen from Star Trek & the Stellar Cartography scene from Star Trek: Generations, this web app was created to provide some interesting 3D visuals of
Besides being interactive,
Feel free to drop me a message via email or on
Join my Patreon community to support my projects
Or considering buy-a-Ko-Fi to support this app at
*accepts PayPal too
Thanks!!... built with by meWho • Rob
Main Control Panel
NAV. This multi-command button will engage or disengage the navigational system. Auto Nav system can be toggled in the following manor:
Disabled <<->> Idle <-> AutoEngaged <<->> AutoLocked
<-> denotes a single-tap
<<->> denotes a double-tap
WARP SPEED BAR STOP Use these buttons to adjust the warp speed factor.
CC. / Cruise Control When CC is on, warp speed will not be changed during the engagement of Auto Nav.
VECTOR Changes the heading (or view point) between the center origin & a random location. A double-tap will reset various on-screen parameters.
OPS. Starts Course Analysis. A double tap will reverse the course direction.
REF. MK STARS Reveals the Reference Markers or the Stars Markers. *When traveling in high warp, the Star Markers will likely get turned off automatically. Double tap on REF. MK button will show the star marker lines. Double tap on STARS button to zoom to a random big star.
FILTER Enables the Subspace Emission filter. A double tap will enable the viewscreen's lens distortion filter (lens blur & vignette).
R&D Activates the Tachyon Sweep. When traveling in high warp, a double tap will "freeze" the star light trails.
FULLSCREEN Toggles the fullscreen mode -- not available on some mobile devices.
AUDIO Toggles the audio. Double tap to modify audio settings.
SETTINGS Brings up the app's settings. Settings will be stored locally & auto applied on your future visits.
Mini-LCARS Display Windows
Each mini-LCARS display has 3 functional buttons on the left side of its frame. When the buttons are single- or double-clicked, they can update the graph, change the color scheme, or minimize/close the display. To reset the graph, click on the display's text title.
Each display can be moved around, resized, or minimized to the main Control Panel's mini-LCARS Display area. Long-pressing on a mini-LCARS activates the "free positioning" of that LCARS display. Alternative method: press the Alt key while dragging the mini-LCARS (or press Alt+Shift+dragging to disable it).
From the main Control Panel, a new mini-LCARS can be created until the maximum number of displays is reached. All mini-LCARS can also be minimized or closed at once via buttons from the main Control Panel. The area for minimized mini-LCARS can be clicked to cycle through several predefined display layouts for the mini-LCARS.
The glowing effect of mini-LCARS displays is only activated when the user setting "Graphics Intensity Level" is set to HIGH.
* When too many mini-LCARS displays are opened in large sizes, the overall performance may degrade *
System47 YouTube Display This display is located in the lower left corner of the screen. It is minimized by default. When this display is activated, data bandwidth WILL BE actively consumed to stream a System47 video from YouTube. **AdBlockers may prevent this YouTube Display from loading properly. Please adjust your AdBlocker settings accordingly if necessary.
Direct URLs for "Auto Nav Locked" mode
https://www.mewho.com/starfield47/?AutoNavLockedhttps://www.mewho.com/starfield47/?AutoNavLocked_LensFilter
Ideal when used as an animated desktop wallpaper with Lively Wallpaper (GitHub)
KEYBOARD INTERFACE SHOW ALL SHORTCUTS
- ? key shows a list of Shortcut Keys directly
- + − keys increases/decreases warp speed
- 1, 2, 3, ..., 9 keys jumps to warp factor #
- 0 or ` or Delete key or Spacebar full stop
- Q key full stop. Resets view, all effects & Auto Nav
- Escape key exits fullscreen.
Or full stop & resets to center view if not in fullscreen mode
- N key enables/disables the Auto Nav system
- G key engages/disengages Auto Nav immediately
- L key locks/unlocks Auto Nav (lock = limited user interface function)
- W A S D keys pans camera view
- Shift + W A S D keys panning in larger step
- Alt•Opt + W A S D keys changes view in angular directions
- Arrow keys changes view in angular directions with smaller step
- Z X keys zooms camera view in/out (+Shift for larger step)
- V key randomizes/resets viewing direction [Vector]
- U key toggles ship icon | Alt•Opt + U random ship
Shift + U random color | Ctrl + U cycle through target/shield - O key toggles [Ops] scan; +Shift to switch Ops scan
- R key toggles [Ref.Mk] reference markers
- T key toggles [Stars] star markers; +Shift to reveal star links
- Y key focuses view on a random BIG star / or double-click on [Stars]
- P key toggles [R&D] tachyon sweep
- C key toggles [Color Filter] subspace emission filter
- B key toggles [Blur Filter] lens distortion effect (blur+vignette) * a bit more GPU intensive, could be sluggish on older machines
- Alt•Opt + B key cycles through Viewscreen Exposure setting
- . (period) key shows/hides Control Panel; +Shift to bypass animation
- Shift + N toggles Event Notification display
- Shift + L toggles Big Logs
- Alt•Opt + L toggles Big Logs color style
- Ctrl + Shift + Y toggles System 47 YouTube Video display
- [ key creates a new mini-LCARS
- ] key minimizes all mini-LCARS displays
- \ key closes all mini-LCARS displays
- Alt•Opt + \ key closes earliest opened mini-LCARS
- Alt•Opt + [ key closes newly opened mini-LCARS
- Ctrl + Shift + [ sets to next color style on all lcars
- Ctrl + Shift + ] toggles outline style on all lcars
- Ctrl + Shift + \ sets random style on all lcars
- Ctrl + \ sets random style on some lcars
- ; key sets all lcars to the same graph
- Alt•Opt + ; key sets each lcars to a random graph
- Shift + [ toggles highlight on all lcars
- Alt•Opt + dragging enables free positioning mode
- Alt•Opt + Shift + dragging disables free positioning mode
- pointer press & hold toggles free positioning mode
- change layout on all non-minimized mini-LCARS:
- Shift + ' cycles through all predefined layouts
- Shift + ; sets to random layout
- Ctrl + Shift + L toggles left-edge layout
- Ctrl + Shift + ; toggles side-edges layout
- Ctrl + Shift + ' toggles right-edge layout
- Ctrl + Shift + , toggles 3x3 grid layout
- Ctrl + Shift + . toggles bottom-edge layout
- Ctrl + Shift + / toggles absolute bottom layout
- M key toggles audio • mute/unmute
- F key toggles fullscreen mode
- Shift + F toggles Frame Rate (FPS) display
- Ctrl + Shift + Alt•Opt + C toggles User Setting: [Change mini-LCARS Displays while Engaging Auto Nav]
- Ctrl + Shift + Alt•Opt + B force refresh background nebulas
- Ctrl + Shift + S shows User Settings
- i key shows this Info page
- ? key shows a list of Shortcut Keys
CAPTAIN’S LOGS
* Detailed logs can be found at mewho.com/logs
2024.SEPTEMBER.17
- Motion blur effect added, set to on by default. Can be disabled in User Settings, or set to a stronger strength.
- High Anti-Aliasing option added, mainly for high pixel-density display.
- Several new User Settings added for finer controls:
Warp Effect Amplifier |Viewscreen Exposure |Star Streaks Brightness |Motion Blur Effect |High Anti-Aliasing |AutoNav mini-LCARS Random Style |System47 YouTube on AutoNav |Show/Hide AutoNav Tab UI - New predefined layouts added for mini-LCARS:
left-edge layout |right-edge layout |side-edges layout |bottom-edge layout |control-panel-edge layout |3x3 grid layout
>> See keyboard shortcut list for layout direct access. Additionally clicking on the area in Control Panel for the minimized mini-LCARS can cycle through the layouts
- a solo mini-LCARS can now be closed via keyboard shortcuts: Alt•Opt + [ (latest opened) and Alt•Opt + \ (earliest opened)
or by double-clicking the red Close button in the Control Panel - refined AutoNav's task algorithm
- improved click-detection on star markers
- additional keyboard shortcuts added
- fixed space background texture compression artifacts & stars speed calculation
- Many bug fixes & overall app+animation improvements
2023.JULY.24
- 3D Big Star added. When warp speed is at zero, first turn on the Star Markers from the Control Panel (shortcut key T). Then click on any one of the star markers floating in the space to toggle the 3D star. Double-click on the 3D star or the text marker to change the camera's zoom level. Or hit the shortcut key Y to focus on a random big star. Oh, black holes are out there too!
- A bunch of keyboard shortcuts got added, including keys to control the mini-LCARS display, etc. Check out the info page for a complete list. Or hit the Question Mark / ? key directly
- The Event Notification text is now hidden by default. This can be changed in the Settings. It can also be toggled via Shift + N shortcut key
- Several more "tiny ship" graphics were added (Enterprise-F, Enterprise-G, USS Cerritos, USS Protostar)
- Maximum number of mini-LCARS displays has been bumped up from 7 to 9. Though too many opened displays can still impact on the overall performance
- General app improvements so that it can be integrated into my other LCARS project, Titan.DS
- bug fixes for LCARS text graph animation
2022.SEPTEMBER.6
- Cruise Control (CC.) added in the Control Panel. When CC is on, warp speed will not be changed during the engagement of AutoNav.
- general app improvements (best experience on modern desktop browsers)
- feel free to send in any bug reports or feedbacks :-)
2022.AUGUST.23
- added graph selection for mini-LCARS display - click the display's text title to reveal
- logs in the Control Panel can now be enlarged
- bug fixes for Safari browser & general app improvements (best experience on modern desktop browsers)
2022.AUGUST.16
- AUDIO added, finally!
Click on the "audio" button in the Control Panel to activate the sound effects. Double-click on the button to change the audio settings. - "tiny ship" is now clickable when visible - to change to another ship
- Cartwheel Galaxy added to the Space Images mini-LCARS display
- sliding on WarpBar was 'jumpy' on Firefox (thx @LordVegan)
2022.AUGUST.2
- various ship icons added for STAR MARKERS (the STARS button) with new orbiting animations. Can also be activated by clicking the orbit icon within the VECTOR section in the Control Panel, or via keyboard shortcut U
- general app improvements
2022.JULY.26
- Safari fullscreen mode was not functioning correctly
2022.JULY.24
- added a circular Proximity Scan to the OPS. Double-tap on its icon in Control Panel to change the scan color. The small shifting square near the center of the circular scan is clickable!
>> This circular scan is inspired by designer Timothy Peel's work on Star Trek: Strange New Worlds
>> The original circular shader material was shared by Patrick from Babylon.js team
>> STARFIELD 47 devLog on YouTube - double-tapping on Control Panel's VECTOR button will reset most of the on-screen effect parameters
- tiny ship icon has a label now -- odd for being visible at 67%
- setup a Discord server to chat about STARFIELD 47 & System47
- Renamed "Spatial Grid Analysis Scan" [navBrackets animation] to Course Analysis
- Renamed R&D effect from "short range sensor array" to Tachyon Sweep. Effect style updated for better performance
- general app improvements
2022.JULY.12
- a new NASA Space Images graph style added to the mini-LCARS display, including some newly released photos from NASA's James Webb Space Telescope. Go Webb!
>> STARFIELD 47 devLog on YouTube - fixed mini-LCARS display frame animation for iOS/iPadOS
- general app improvements
2022.JULY.10
- on iOS/iPadOS's Safari browser, if you export STARFIELD-47 site bookmark to Home Screen, this Home Screen bookmark will now launch SF47 in fullscreen mode
- fixed css transform issues when viewed on iOS/iPadOS 14
- general app improvements
2022.JULY.5
- a new graph style added to the mini-LCARS display - the new ClipArt style shows random Star Trek related line arts
>> STARFIELD 47 devLog on YouTube - keyboard shortcut [. period] to toggle Control Panel's visibility; Period+Shift to bypass animation
- tweaked random display parameters used during engaging of auto nav; misc performance improvements
- fixed minor issue when changing lcars displays on Settings page
2022.JUNE.28
- OPS. button: activates Spatial Grid Analysis Scan [nav brackets animation]
>> STARFIELD 47 devLog on YouTube - FILTER button: single-click turns on a random Subspace Emission Filter [color filter]; double-click toggles the lens distortion effect
- double clicking on Control Panel's command button to minimize/restore the whole panel without transitioning animation (the COMMAND button is the box next to the text "STARFIELD 47")
- R&D button: more randomized effects
- STARS button: double-click to toggle the new star marker links + 1 little ship
- added & changed some keyboard shortcuts
- fixed to reduce browser dark mode conflicts (thanks LV!)
- Misc bug fixes & app improvements
2022.JUNE.21 - HAPPY SUMMER SOLSTICE!
- 24-hour clock option added to the settings
- control panel blur effect when it's dimmed. Not applicable when graphics intensity level is set to "low"
- adjusted the area where a mini-LCARS display can be positioned to. *To place a mini-LCARS Display to any position, turn on the "free positioning" first by long-pressing on the display.
- user setting of the System47 YouTube Player caused the app to freeze in some cases
- Misc bug fixes & app improvements
2022.JUNE.18
- Control Panel UI big overhaul
- light bar at the bottom of the viewscreen
- viewscreen styles for R&D & filter commands
- base font size
- Misc bug fixes & app improvements
2022.JUNE.2
- mini-LCARS Displays!... contains a few hidden button functions :-) scroll up a bit to read about its features
- Misc bug fixes & app improvements
2022.MAY.19
- clock display added
- App Settings allow fine-tuning several aspects of the overall experience
2022.APRIL.27
- fullscreen option on loading screen
- dynamically loading of YouTube API for SYSTEM 47 video display
- star markers were visible in high warp when auto nav was engaged
2022.APRIL.24
- nebula dust added
- SYSTEM 47 YouTube video display added -- **consumes network bandwidth while the YouTube video is playing
- refinement on Star Markers
- keyboard shortcuts E & F now require additional Ctrl+Shift keys
- Misc bug fixes; app & UI improvements
2022.APRIL.18
- "Star Markers" added as a part of the reference markers -- can be activated by double-clicking the R.M. button, or by tapping the T key
- more random styles for reference markers
- idle animation countdown in Auto Nav UI (a tiny dot)
- rotation of distant background added
- warp speed travel distance recalibrated with an exponential curve
- Auto Nav speed -- now less frequently to jump into high warps
- updated algorithm for the frequency graph
- UI refresh issues
- reference marker was not completely cleared
- unnecessary over spinning of the view point when the spin angle is greater 180°
- EXPERIMENTAL: lens effect added -- a bit more GPU intensive, could be sluggish on older machines -- the effect can be activated by a double tapping on E key, or by double clicking on the "Revision Date" at lower-right corner of the screen
2022.APRIL.7
- alert notification system added -- clicking on a note will dismiss it immediately. Two manual dismissals will disable the notification system.
- frequency graph added to the lower right screen -- frequency animation is influenced by current warp speed
- additional keyboard controls
- big update on Auto Nav's interface & process. It can now be disabled or locked manually
- warp speed acceleration/deceleration time duration lengthened
- mouse & keyboard inputs made less sensitive
- occasional jerky animations during view point changing
- Misc bug fixes & app improvements
2022.MARCH.31
- "Auto Nav Locked" mode added
- This "Info Update Logs" added
- nebula animation improvement
2022.MARCH.27
- incorrect screen resizing & buttons layout when viewed on mobile. For best experience, please view it on a desktop :-)
2022.MARCH.25
- STARFIELD 47 released to public!
CREDITS
- UI elements inspired by Star Trek's LCARS/Okudagram, originally created by
Michael Okuda! - This app utilizes the wonderful & powerful Babylon.js, an open-source Web 3D Engine 3D Star referenced from this Babylon.js Playground
- D3.js open-source library used to manipulate random graphical data in mini-LCARS displays
- Space images: NASA • Go Webb!
www.meWho.com
[email protected]
*Not endorsed, sponsored or affiliated with CBS Studios Inc. or the Star Trek franchise. All STAR TREK trademarks & logos are owned by CBS Studios Inc.