Menu screenshots on the homepage

Started by a1ex, March 19, 2018, 12:25:53 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

a1ex

Quote from: dmilligan on April 11, 2015, 06:37:29 PM
[...] photos on the homepage do not necessarily reflect the latest development.

Solved. Sorry it took so long - have fun browsing the menus on the home page :)



Now the screenshots can be auto-updated every time a new build arrives.




Under the hood:
- a script that navigates the entire ML menu and saves screenshots (it runs on Jenkins, here's a GIF)
  - the following modes are simulated: photo, photo LiveView, movie
  - for each top-level ML menu option: you can toggle the option (SET), navigate the submenu (Q) or do both
  - nothing can be changed in submenus (yet)
  - anything you have changed is discarded as soon as you go away from that menu item (to keep the number of screenshots manageable)
  - extras: Canon menu, Q menus (just navigation, without changing any option)
  - result: some pre-rendered screenshots (about 3000 images at the time of writing)
- some hardcoded navigation logic (that runs on the server)
  - simulation state is completely given by the key sequence you see in the URL
  - screenshots are served as static images like this (will be cached by your browser)
  - each screenshot has about 10K (LiveView screenshots are larger)
  - URL grows with each click (but you can start over from the power button)
- front-end (interpreted by the browser)
  - button overlays (the red circles) are SVG elements on top of the camera image
  - works with or without JS (looks nicer with JS, e.g. flips the movie button, LED activity, nicer transitions)
  - LED shows network activity (querying the next state, loading a screenshot)
  - keyboard works too if JS is enabled (same buttons as in QEMU); ESC to disable keybindings, ENTER to re-enable
  - browser back button works too

Walter Schulz

Yes!
Didn't dare to ask for something like that. But you started it ...  si on lui donne le petit doigt, il prend le bras  .... how about switching between different cam models?

a1ex

That works, although each model needs some manual tuning (finding a suitable image, positioning buttons on top of it, working around model-specific quirks in the emulation...)

The old buttons (left/right) could be used for that. Adding this simulation to the download page, for each build, should be also useful (alongside with screenshot diffs to make it easier to identify the changes).

Walter Schulz

Suggestion: Add something to point users to trashcan button after loading page/restarting simulation.

Try breaking the simulation? Does
- Switch to movie mode or enable LiveView in photo mode
- Press play button -> No image screen
- Press play button again -> Canon screen
count?

a1ex


Walter Schulz

That is a good one, QEMU rules!
Focus tab -> Read lens info!
Debug tab -> Lens info
:P

a1ex

Lens info looks OK to me (matches the actual camera screen).

I had that lens mounted when getting the startup log for emulation.

Walter Schulz

You got me!

Better go preparing myself for April, 1st ...

g3gg0

Quote from: Walter Schulz on March 19, 2018, 09:32:20 PM
Better go preparing myself for April, 1st ...

"x86 emulation on Canon DSLRs..."
...oh wait.

what now?
booting windows 10? ;)
Help us with datasheets - Help us with register dumps
magic lantern: 1Magic9991E1eWbGvrsx186GovYCXFbppY, server expenses: [email protected]
ONLY donate for things we have done, not for things you expect!

Walter Schulz

Minor issue:
1) Startup/restart simulation
2) Press trashcan button -> ML startup screen appears telling to press any key to enter ML settings
3) Press Liveview or Q button -> ML menu shows up in simulation. Real world cam doesn't leave this screen with these buttons.

a1ex

That sounds like a bug that needs to be fixed in ML, rather than in the simulation. The navigation logic in the simulation is hardcoded from scratch (without reusing ML or Canon code), and it's just an approximation.

Found another one: double-clicking the power button twice causes the delete button (the red circle around it) to disappear (it can no longer be clicked, but works from the keyboard). Refreshing the page after ~ 10 minutes should fix it (I hope).