Render occlusions
Table of contents
Render occlusions
Occlusions can be defined by using the position of the origin (top left), and the width and height of the rectangle.
/** Make occlusions */
filterManager.install(
closet.browser.recipes.occlusionEditor(),
closet.browser.recipes.rect.show({ tagname: 'rect' }),
closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)
<img src="/assets/images/cranial-bones.png" />
<!-- [[recth1::326,78,587,144]]
[[recth2::117,283,574,274]]
[[recth3::78,666,500,265]]
[[recth4::1656,48,617,165]]
[[recth5::1973,391,495,252]]
[[recth6::1952,1179,509,283]] -->
Similar to clozes, there are three subtypes of occlusions:
- showing occlusions
- hiding occlusions
- revealing occlusions
/** Make occlusions */
filterManager.install(
closet.browser.recipes.occlusionEditor(),
closet.browser.recipes.rect.show({ tagname: 'rect' }),
closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)
<img src="/assets/images/cell.png" />
<!-- [[rect1::182,60,157,46]]
[[rect1::190,114,141,54]]
[[rect2::87,190,258,60]]
[[rectr2::52,271,315,41]]
[[recth2::448,114,195,41]]
[[rect3::633,30,187,41]]
[[rectr3::866,11,176,54]]
[[recth3::1233,95,323,54]] -->
To be more exact, occlusions also react to the flashcard interface. This means, they can be used with the flashcard specific commands.
/** Make occlusions */
filterManager.install(
closet.browser.recipes.occlusionEditor(),
closet.browser.recipes.rect.show({ tagname: 'rect' }),
closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)
/** Flashcard features */
filterManager.install(
closet.recipes.activate({ tagname: 'on', storeId: 'flashcardActive' }),
closet.recipes.deactivate({ tagname: 'off', storeId: 'flashcardActive' }),
closet.wrappers.product(closet.recipes.setNumber, closet.recipes.setNumber)({
tagname: 'around',
optionsFirst: { storeId: 'flashcardActiveTop' },
optionsSecond: { storeId: 'flashcardActiveBottom' },
}),
closet.recipes.setNumber({ tagname: 'up', storeId: 'flashcardActiveTop' }),
closet.recipes.setNumber({ tagname: 'down', storeId: 'flashcardActiveBottom' }),
closet.recipes.activate({ tagname: 'show', storeId: 'flashcardShow' }),
closet.recipes.activate({ tagname: 'hide', storeId: 'flashcardHide' }),
closet.recipes.setNumber({ tagname: 'top', storeId: 'flashcardShowTop' }),
closet.recipes.setNumber({ tagname: 'bottom', storeId: 'flashcardShowBottom' }),
closet.wrappers.product(closet.recipes.setNumber, closet.recipes.setNumber)({
tagname: 'ctxt',
optionsFirst: { storeId: 'flashcardShowTop' },
optionsSecond: { storeId: 'flashcardShowBottom' },
}),
)
<img src="/assets/images/wikipedia.png" />
<!-- [[on::recth1]] [[ctxt::recth*=1]]
[[recth1::582,303,703,114]]
[[recth2::189,817,510,214]]
[[recth3::1056,828,503,200]]
[[recth4::114,1367,321,268]]
[[recth5::746,1352,332,282]]
[[recth6::1488,1335,328,310]] -->