Priority goes as follows: Schedule (top-left menu) → Layers (left sidebar) → Inplace editing (on the canvas itself).
Schedule menu is supposed to be the main way to edit the plan. It has:
Week selector (by default it starts from the next Monday)
Day editor, 7 items having:
Color pickers (main and for second activity if any)
Text inputs (main and either second line or second activity)
Time selectors (main and for second activity if any); time in sub timezones are calculated automatically
Checkboxes:
First controls if there is activity at all, uncheck to clear
Second controls if there is second activity with separate time
Layers are listed in left sidebar. 0th layer is background: it's immovable and has nothing but one image (pref. 1920x1080). At the bottom of the list, there are buttons to add new layer, either blank one or from any image.
Clicking on any layer opens a menu:
Position: and , offsets from topleft corner.
File selector: sets background image.
Size: width and height.
Select: marks the layer as selected for custom export.
Delete: removes layer.
Opacity.
Rotation.
Rounding (border radius).
Color pickers:
Text color.
Background color: right click to set transparent.
Outline color: text outline, right click to remove.
Font size.
Font style:
Bold.
Italic.
Underline.
Stacking index: a rough way to control layer order. Layers with higher index are drawn above.
Text align:
Left.
Center.
Right.
Vertical align:
Top.
Center.
Bottom.
Text input: can have multiple lines.
Inplace editing can be used as finishing touches, as it doesn't change internal data (e.g. timezones will not be recalculated).
Top menu controls
Schedule: menu with main controls
Settings:
Export format
PNG: supports transparency, good for simple shapes
JPG: no transparency, no good
WEBP: supports transparency, good for pictures
Timezone editor (to be implemented properly)
Fullscreen: shows canvas in fullscreen
Debug: button to print debug data to console, ignore that
Help: shows this page
undo & unundo: Ctrl+Z and Ctrl+Y (hotkeys also work)
render: renders zoomed canvas as preview image
export schedule: exports schedule-related elements as transparent png
export selected: exports selected elements (by default, everything except schedule-related) as transparent png
export everything: export everything as 1920x1080 png, including background
Useful trivia
Layers can be moved on the canvas with mouse while holding Ctrl key.
Layer menu can be opened by clicking Ctrl + RMB on the canvas
Undo history is unlimited. If there are too many (thousands) entries, you can right click on it to free some memory. The amount of actions is reduced to first iteration of digital root calculation (example: 11037 → 12 → 3 → 0).
"Choose File" fields support drag&drop directly from file explorers.
Trivia
Known issues
Layer reordering is wonky. Considering more convenient ways.
Export might produce different results in different browsers. I'm testing stuff in Chrome and Firefox, they render shadows and outlines differently.
Accidental Ctrl+R are intercepted, but Ctrl+W/T/N are not. This is browser limitation.
Mobile support. Things should work more or less, but convenience isn't guaranteed.
Planned features
Everything is feasible. However, I need feedback to know what is actually needed in the first place.
Offline support. Right now everything should work if the page is cached, but standalone installation is more robust.
Save/load. Saving current state and all uploaded images.
Autosave.
Save-to-file so the state can be restored from that file (e.g. on another PC).
Import from calendar. For example, from Google Calendar directly.
Collision estimation. Predict upcoming events and estimate durations (e.g. holomem streams by using statistical data).
Time customization. Timezones, formatting rules, etc.
QoL improvements. Assorted.
Additional layer customization. Zoom, clip, borders, gradients, effects, etc.