User:Jeran Renz/Sandbox
Proof of concept
[edit]
Eyeglasses parts
This annotated image is created as a proof of concept, and shows that wikicode lends itself well to creating such diagrams. Here, I hardcode everything, which yields numerous unwieldy divs.
A code excerpt is shown below:
<div style="border: 1px solid #c8ccd1; background-color:#f8f9fa; float: right; padding: 3px; margin: 0.5em 0 1.3em 1.4em;"> <div style="width: 400px; height: 200px; background-color: white; border: 1px solid #c8ccd1; padding-top: 80px; float: right; position: relative;"> <div style="height: 0px; border-bottom: 2px dotted cornflowerblue; position: absolute; transform:rotate(54.86deg); left: 68.06px;top: 81.93px;width: 56.85px;"></div> <div style="height: 0px; border-bottom: 2px dotted cornflowerblue; position: absolute; transform:rotate(-49.87deg); left: 200.61px;top: 141.6px;width: 82.13px;"></div> ... <div style="position: absolute; font-size: smaller; left: 38.15px; top: 44.27px;">[[temple#English|temple]]</div> <div style="position: absolute; font-size: smaller; left: 21.78px; top: 229px;">[[nose pad#English|nose pad]]</div> [[File:Reading-Glasses.jpg|300px||center|link=]] </div> <p style="clear: both; font-size: smaller; max-width: 400px; padding: 0.5em 0 0 2px;">Eyeglasses parts</p> </div>
Module visual-dict
[edit]
Eyeglasses parts. Adapted from.[1]
Here, the same diagram is created with a module that allows to specify the image and the annotations coordinates. The wikicode code invocation for this diagram is shown below. The invocation converts the annotations into wikicode, which is then expanded.
{{#invoke:visual-dict|labeled_image|image=Reading-Glasses.jpg|
caption=Eyeglasses parts. Adapted from.<ref>{{cite-web|url=https://www.readers.com/blog/glasses/eyeglass-frame-diagram/|work=Readers.com|title=Parts of an Eyeglasses Frame [Glasses Diagram]|date=2020}}</ref>|
width=300px|
annotations=
sta from 62.8 25.2 to 30.1 -21.3 [[temple]],
sta from 165.2 93 to 218.1 30.2 [[screw]],
sta from 75.4 89.8 to 25.4 152 [[nose pad]],
sta from 33.6 90.3 to 2.5 110.3 [[rim]] or [[eyewire]],
sta from 128.8 100.2 to 143.2 161.2 [[lens#English|(left) lens]],
sta from 178.4 95.2 to 247.9 121.8 [[hinge]],
sta from 164.8 99.3 to 228.4 154.2 [[endpiece]],
sta from 106.2 11.8 to 73.1 -49.7 [[temple tip]],
sta from 84.7 78.4 to 84.7 56.1 [[nose bridge]],
}}
Test - Points of a horse
[edit]
Bird morphology
[edit]
Car
[edit]
Additional future features for the module
[edit]- Specify more than just a label, but also html snippets
- Provide a link to the image used on wikimedia (for attribution), e.g.
- Highlight a given term when on its page, e.g. highligh the term "nose pad" if the diagram is on the page for nose pad.
- Find a way to transclude a single diagram specification on multiple pages. See for instance Wikipedia transclusion
- Create an external annotation tool that would generate the annotations, and house it somewhere on wikimedia. A first step would be an online converter svg -> module specs. See for instance https://svgtranslate.toolforge.org/ .
- Double pointing leader lines, e.g. V-shaped.
References
[edit]- ^ “Parts of an Eyeglasses Frame [Glasses Diagram]”, in Readers.com[1], 2020
- ^ Green, John (2006 July 1) Horse Anatomy[2], Courier Corporation, →ISBN
- ^ Encyclopaedia Britannica, Inc (2023 October 3 (last accessed)) Comptons by Britannica 2007, Encyclopaedia Britannica, Inc, →ISBN
- ^ Corbeil, Jean-Claude (2014) Le dictionnaire visuel multilingue (in French), →ISBN, retrieved 3 October 2023
- ^ Lua error in Module:quote at line 2678: |site= and |work= are aliases; cannot specify a value for both