The items pane is split into two pieces:
- Main items
- sevenbysix.html (the actual default these days)
- default.html (the legacy default)
- notrade.html
- Dungeon items
Start by downloading the section(s) you want to change. For changes like adding, removing or moving items, you can work with whole lines without having to dig into how they work.
To force a group of items to be on their own row, wrap them in a new div, like this:
<div class="row item-width">
{{ item("OCARINA", max="1") }}
{{ item("SONG1", max="1") }}
{{ item("SONG2", max="1") }}
{{ item("SONG3", max="1") }}
</div>
For more complicated changes, you may need to look at how the item macro works.
Once you have something you want to try, click the 'Pick Custom' button that matches the template you edited (main or dungeon) and select your edited file:
Most of the layout definition happens in Jinja templates. Simple changes can be done purely in the templates, but more complicated changes may involve JavaScript or the item macro. Improvements and updates are always welcome.
The item layouts are defined in templates/mainitems and templates/dungeonitems. Each file is selectable from a dropdown in the settings pane. Contributions are welcome - send me a new template or make a pull request and I'll get it added!
templates/item.html contains a macro that abstracts away most of the details.
Note that the broadcast and event views can have their own layouts that differ from the main Magpie UI.
Items associated with buttons are automatically passed to LADXR for use in logic. Items that LADXR doesn't know about are ignored in logic but still work in the UI.
Item images must be in the form {ITEM_NAME}_{COUNT}.png, e.g. SWORD_2.png for the L2 sword.
Additional items can be added without code changes. Either the associated images must be placed in static/images/, or the src parameter must be specified in the item macro.
List of items that already have images
SWORDFEATHERHOOKSHOTBOWBOMBMAGIC_POWDERMAGIC_RODOCARINAPEGASUS_BOOTSPOWER_BRACELETBOOMERANGSHIELDSHOVELTOADSTOOLTAIL_KEYSLIME_KEYANGLER_KEYFACE_KEYBIRD_KEYFLIPPERSBOWWOWSONG1SONG2SONG3BLUE_TUNICRED_TUNICMAX_ARROWS_UPGRADEMAX_BOMBS_UPGRADEMAX_POWDER_UPGRADESEASHELLHEART_CONTAINERHEART_PIECERUPEES_100RUPEES_20RUPEES_200RUPEES_50RUPEES_500MEDICINEGELMESSAGEGOLD_LEAF,MEDICINE2CASTLE_BUTTONSINGLE_ARROWARROWS_10ANGLER_KEYHOLERAFTROOSTER,MAP1MAP2MAP3MAP4MAP5MAP6MAP7MAP8MAP0,COMPASS1COMPASS2COMPASS3COMPASS4COMPASS5COMPASS6COMPASS7COMPASS8COMPASS0,KEY1KEY2KEY3KEY4KEY5KEY6KEY7KEY8KEY0ITEM1(the dungeon item counters)ITEM2ITEM3ITEM4ITEM5ITEM6ITEM7ITEM8ITEM0REQ1(the required instrument indicators)REQ2REQ3REQ4REQ5REQ6REQ7REQ8REQ0NIGHTMARE_KEY1NIGHTMARE_KEY2NIGHTMARE_KEY3NIGHTMARE_KEY4NIGHTMARE_KEY5NIGHTMARE_KEY6NIGHTMARE_KEY7NIGHTMARE_KEY8NIGHTMARE_KEY0STONE_BEAK1STONE_BEAK2STONE_BEAK3STONE_BEAK4STONE_BEAK5STONE_BEAK6STONE_BEAK7STONE_BEAK8STONE_BEAK0INSTRUMENT1INSTRUMENT2INSTRUMENT3INSTRUMENT4INSTRUMENT5INSTRUMENT6INSTRUMENT7INSTRUMENT8INSTRUMENT0TRADING_ITEM_YOSHI_DOLLTRADING_ITEM_RIBBONTRADING_ITEM_DOG_FOODTRADING_ITEM_BANANASTRADING_ITEM_STICKTRADING_ITEM_HONEYCOMBTRADING_ITEM_PINEAPPLETRADING_ITEM_HIBISCUSTRADING_ITEM_LETTERTRADING_ITEM_BROOMTRADING_ITEM_FISHING_HOOKTRADING_ITEM_NECKLACETRADING_ITEM_SCALETRADING_ITEM_MAGNIFYING_GLASSTRADING_ITEM_YOSHI_DOLL_CHECKEDTRADING_ITEM_RIBBON_CHECKEDTRADING_ITEM_DOG_FOOD_CHECKEDTRADING_ITEM_BANANAS_CHECKEDTRADING_ITEM_STICK_CHECKEDTRADING_ITEM_HONEYCOMB_CHECKEDTRADING_ITEM_PINEAPPLE_CHECKEDTRADING_ITEM_HIBISCUS_CHECKEDTRADING_ITEM_LETTER_CHECKEDTRADING_ITEM_BROOM_CHECKEDTRADING_ITEM_FISHING_HOOK_CHECKEDTRADING_ITEM_NECKLACE_CHECKEDTRADING_ITEM_SCALE_CHECKEDTRADING_ITEM_MAGNIFYING_GLASS_CHECKEDTOADSTOOL_CHECKEDHAMMER
The item macro is a Jinja macro that creates HTML for a single item button from a simpler set of parameters:
| Parameter | Default | Description |
|---|---|---|
primary |
The name of the item linked to the left mouse button. The item name is case sensitive and must match LADXR's internal item name, e.g. MAGIC_POWDER |
|
secondary |
The name of the item linked to the right mouse button. The item name is case sensitive and must match LADXR's internal item name, e.g. MAX_POWDER_UPGRADE |
|
classes |
pt-2 px-1 col text-center |
Custom CSS classes to assign to the button |
max |
Overrides the automatic maximum count detection. If omitted, the maximum count for this item will be automatically determined based on the current settings. | |
secondaryMax |
Same as max, but for the secondary item |
|
src |
A JavaScript function that dynamically overrides the default image | |
max_image |
Caps the maximum count used for retrieving images without capping the numeric max. Useful e.g. for seashells and keys where the image shouldn't change as the count goes over 1. | |
width |
32px |
Width of the button, inserted as an embedded style |
height |
32px |
Height of the button, inserted as an embedded style |
top |
style="top: applied to the button, useful for specifying position outside of the grid (e.g. the GO_MODE button) |
|
left |
style="left: applied to the button, useful for specifying position outside of the grid (e.g. the GO_MODE button) |
|
overlay_count |
Displays a numeric count of the specified item, e.g. overlay_count="SEASHELL" |
|
invert_count |
False |
If True, the number displayed by overlay_count will start at max (whether manual or automatic) and count down to 0 as the actual count of the item increases. Used for major dungeon items, e.g. overlay_count="ITEM8", invert_count=True. |
hideIfZero |
False |
Whether the entire button should be hidden if the automatically determined maximum count for this item is 0 |
condition |
True |
A condition that must be true for the button to be shown, e.g. condition=allItems['ROOSTER'] == 0) allItems is a dictionary of item name: automatically determined maximum count |
gfx |
True |
Whether graphics packs are allowed to change this button's images |
highlightOwnedSecondary |
False |
Whether the Highlight owned items indicator (Bar or Square) is shown when the secondary is owned. By default, this indicator only appears when the button's primary item is owned |