From 894ee9e11700a684d6d346e11de6a209cc61adcf Mon Sep 17 00:00:00 2001 From: Leon van Kammen Date: Thu, 25 Sep 2025 13:21:22 +0200 Subject: [PATCH] doc: replaced kitchensink with website.glb demo --- index.html | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 4af5234..a721403 100644 --- a/index.html +++ b/index.html @@ -680,6 +680,8 @@ button.sidebar-toggle{
  • $:/state/toc/Reference-๐Ÿ“œ level 1 spec: URL--403145756
    • +
  • $:/state/toc/Reference-๐Ÿ“œ level0: File--403145756
    • +
  • $:/state/toc/Reference-๐Ÿ“œ level1: URL--403145756
  • $:/state/toc/Reference-๐Ÿ“œ level2: explicit hyperlinks--403145756
    • @@ -1021,7 +1023,7 @@ button.sidebar-toggle{ {"created":"20240208125917539","text":"`#` indicates a default fragment to execute during scene-load.\n\n| fragment | type | example value | info |\n|`#`| string (& separated) | `#-cube&t=0` | hide object with name `cube` and start 3D animations (implies `xrf://-cube&t=0`)|\n\n> NOTE: this only gets publish to the [[hashbus]] and does not update the top-Level URL\n\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/12]]\u003Cbr>\n","tags":"[[๐Ÿงช levelX: non-normative metadata]]","title":"# aliases","modified":"20250910095330316","type":"text/vnd.tiddlywiki"}, {"created":"20250910085517140","text":"# Object teleports & imports\n\nPrefixing an object with an exclamation-symbol, will teleport a (local or remote) referenced object from/to its original/usercamera location.\u003Cbr>\n\n[img[objecteleport.png]]\n\nUsecases:\n* show/hide objects/buttons (menu e.g.) in front of user\n* embed remote (object within) 3D file via remote URL\n* instance an interactive object near the user regardless of location\n* instance HUD or semi-transparent-textured-sphere (LUT) around the user \n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#!menu\u003C/span>\n\u003C/div>\n\u003Cbr>\n\nClicking the [[href]]-value above will:\n\n1. **reposition the referenced object** (menu) to the usercamera's-coordinates.\n2. **zoom** in case of (non-empty) mesh/sceneroot-object: rescale to 1 mยณ, and position 1m in front of the camera\n3. toggle behaviour: revert values if 1/2 were already applied\n4. `#+` is always implied (objects are always made visible)\n\nThis tiny but powerful symbol allows incredible interactive possibilities, by carefully positioning re-usable objects outside of a scene (below the floow e.g.).\n\n\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#whiteroom&!explainer&!exitmenu\u003C/span>\n\u003C/div>\n\u003Cbr>\n\nThis will teleport the user to `whiteroom` and moves object `explainer` and `exitmenu` in front of the user.\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">https://my.org/foo.glb\u003C/span>\n\t\u003Cspan class=\"big hi2\">#!\u003C/span>\n\u003C/div>\n\u003Cbr>\n\nClicking the [[href]]-value above will:\n\n1. import `foo.glb` from `my.org`'s webserver\n2. show it in front of the user (because `#!` indicates object teleport)\n\n\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">https://foo.glb\u003C/span>\n\t\u003Cspan class=\"big hi2\">#roomB&!bar\u003C/span>\n\u003C/div>\n\nClicking the [[href]]-value above will:\n\n1. replace the current scene with `foo.glb` \n2. teleport the user to #roomB inside `foo.glb`\n3. **instance the referenced object** (bar inside foo.glb) in front of the user.\n4. it will update the top-Level URL (because `xrf:` was not used)\n5. hide the **instanced object** when clicked again (toggle visibility)\n\n> **NOTE**: [level2](#๐Ÿ“œ%20level2:%20explicit%20links) [teleportation](#teleport%20camera) links, as well as instancing mitigates the 'broken embedded image'-issue of HTML: **always** attaching the href-values to **a 3D (preview) object** (that way broken links will not break the design).\n\n**Example:** clicking a 3D button with title 'menu' and [href](#href)-value `xrf:menu.glb?instance#t=4,5` would instance a 3D menu (`menu.glb`) in front of the user, and loop its animation between from 4-5 seconds (`t=4,5`)\n\n> **NOTE**: combining instance-operators allows dynamic construction of 3D scenes (`#london&!welcomeMenu&!fadeBox` e.g.) \n","tags":"[[๐Ÿ“œ level4: prefix operators]] level4","title":"#!","modified":"20250920083115906","type":"text/markdown"}, {"created":"20250910091840302","text":"# Object multipliers\n\nThe star-prefix will clone a (local or remote) referenced object to the usercamera's location, and make it grabbable.\u003Cbr>\nUsecases:\n* object-picker (build stuff with objects)\n\n> **NOTE**: this is basically the [#! operator](#%23%21) which infinitely **clones** the referenced object (instead of repositioning the object).","tags":"[[๐Ÿ“œ level4: prefix operators]] level4","title":"#*","modified":"20250910100220324","type":"text/markdown"}, -{"created":"20250910093946997","text":"## (De)selectors\n\nClicking href-value below will do:\n\n1. show/hide the target object (and children)\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#-welcome\u003C/span>\n\u003C/div>\n\u003Cbr>\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#+welcome\u003C/span>\n\u003C/div>\n\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">https://foo.glb\u003C/span>\n\t\u003Cspan class=\"big hi2\">#bar\u003C/span>\n\t\u003Cspan class=\"big hi1\">&\u003C/span>\n\t\u003Cspan class=\"big hi3\">-welcome\u003C/span>\n\u003C/div>\n\n> **NOTE:** the latter shows that (de)selectors can also be with regular [href](#href)-values \n","tags":"[[๐Ÿ“œ level4: prefix operators]] level4","title":"#+-","modified":"20250910101236130","type":"text/markdown"}, +{"created":"20250910093946997","text":"## (De)selectors\n\n> How to show/hide/group **material**- or **object**- or **animations** by name?\n\nClicking href-values below will:\n\n1. show/hide the targeted **material**- or **animation** or **object**-name (incl. children)\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#-welcome\u003C/span>\n\u003C/div>\n\u003Cbr>\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#+welcome\u003C/span>\n\u003C/div>\n\u003Cbr>\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#-VR*\u003C/span>\n\u003C/div>\n\u003Cbr>\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">https://foo.glb\u003C/span>\n\t\u003Cspan class=\"big hi2\">#bar\u003C/span>\n\t\u003Cspan class=\"big hi1\">&\u003C/span>\n\t\u003Cspan class=\"big hi3\">-welcome\u003C/span>\n\u003C/div>\n\n**Matching logic:**\n\n1. `-` and `+` prefix for **exact matches** (`welcome` e.g.)\n1. `*` postfix for **match beginning** (`VR_skybox` `VR_skyboxmat` e.g.)\n\n\n\n> **NOTE**: to hide a skybox when importing/loading a 3D file (force **AR**) is possible by linking to `https://my.org/foo.glb#-skybox` or `https://my.org/foo.glb#-skyboxmaterial`","tags":"[[๐Ÿ“œ level4: prefix operators]] level4","title":"#+-","modified":"20250924101134840","type":"text/markdown"}, {"created":"20250910093909237","text":"## Sharing object or file\n\nThe pipe-symbol (`|`) sends a (targeted) object to the OS.\nClicking the href-value below will:\n\n1. share the (targeted object in the) file to a another application\n\n> This URL can be fed straight into [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) or [xdg-open](https://www.freedesktop.org/wiki/Software/xdg-utils/)\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi1\">#\u003C/span>\n\t\u003Cspan class=\"big hi2\">|bar\u003C/span>\n\u003C/div>\n\u003Cbr>\n\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big hi2\">https://foo.glb\u003C/span>\n\t\u003Cspan class=\"big hi1\">#|bar\u003C/span>\n\u003C/div>\n\u003Cbr>\n\n> **NOTE**: sharing is limited to `xrf:` scheme-only \n","tags":"[[๐Ÿ“œ level4: prefix operators]] level4","title":"#|","modified":"20250910101321478","type":"text/markdown"}, {"created":"20240207131001873","text":"!! Specify playback loopmode\n\nThis compensates a missing element from Media Fragments to enable/disable temporal looping. .\n\n| fragment | type | functionality |\n| \u003Cb>#loop\u003C/b> | string | enables animation/video/audio loop |\n| \u003Cb>#-loop\u003C/b> | string | disables animation/video/audio loop |\n\n\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/media_uv_template_fragments.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n!Spec\n\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#list-of-uri-fragments\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\n\u003Cbr>\u003CBr>\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/14]]\u003Cbr>\n","tags":"level [[๐Ÿ“œ level3: Media Fragments]]","title":"#loop ๐ŸŒฑ","modified":"20250909135248836","type":"text/vnd.tiddlywiki"}, {"created":"20230815160020110","text":"> NOTE: in the next iteration of the spec, this will be non-normative. \u003Cbr>Reason: in VR/AR setting the 'lookat' of the camera is not possible (while keeping headtracking-sensors active), leading to ambigious results compared to desktop.\n\nset the rotation of the camera (or queried object(s)).\n\n| fragment | type | access | functionality |\n| \u003Cb>#rot\u003C/b>=0,90,0 | [[vector3|vector]] |๐Ÿ”“ ๐ŸŽฒ ๐Ÿ’ฅ ๐Ÿ”—| rotate camera (or [[filtered|#filters]] object(s)) |\n\nYou can add this URI Fragment to the top-level URLbar, or as [[href]] value (to trigger via click) in a 3D model Editor (Blender e.g.):\u003Cbr>\u003Cbr>\n\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/gettingstarted2024.mp4#t=295\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Ch2>Developers only:\u003C/h2>\n\n[[ยป example implementation|https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/js/three/xrf/rot.js]]\u003Cbr>\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/7]]\u003Cbr>\n\n!Spec\n\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#navigating-3d\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n","tags":"[[๐Ÿงช levelX: non-normative metadata]] [[๐Ÿงช experimental]]","title":"#rot","modified":"20250910094218671","type":"text/vnd.tiddlywiki"}, @@ -1071,7 +1073,7 @@ button.sidebar-toggle{ {"created":"20230523124940866","title":"$:/config/DefaultSidebarTab","text":"Home","modified":"20250211170701446"}, {"created":"20230424093821723","text":"yes","tags":"","title":"$:/config/HtmlParser/DisableSandbox","modified":"20230424142930452"}, {"created":"20230424140117603","text":"allowvr allowfullscreen allow-scripts","tags":"","title":"$:/config/HtmlParser/SandboxTokens","modified":"20230424142737213"}, -{"created":"20230423174843715","text":"tidgraph","title":"$:/config/Manager/Filter","modified":"20250922195851269"}, +{"created":"20230423174843715","text":"simple starting","title":"$:/config/Manager/Filter","modified":"20250925103035516"}, {"created":"20230423164137536","text":"","title":"$:/config/Manager/System","modified":"20240718185732477"}, {"created":"20240718202303000","title":"$:/config/Manager/Tag","text":"","modified":"20240719125709259"}, {"created":"20230425162854560","title":"$:/config/Navigation/UpdateAddressBar","text":"permalink","modified":"20230427180247389"}, @@ -1116,8 +1118,8 @@ button.sidebar-toggle{ {"created":"20230425164931250","title":"$:/state/folded/AFRAME template","text":"show","modified":"20230425164935940"}, {"created":"20230425164931250","title":"$:/state/folded/GLSL shader template","text":"show","modified":"20230425164939576"}, {"created":"20230424142403302","text":"checked","title":"$:/state/import/select-all","modified":"20230424142404392"}, -{"created":"20230423163640468","title":"$:/state/notebook-sidebar","text":"yes","modified":"20250922183501076"}, -{"created":"20230423163641722","title":"$:/state/notebook-sidebar-section","text":"Home","modified":"20250922201456965"}, +{"created":"20230423163640468","title":"$:/state/notebook-sidebar","text":"yes","modified":"20250925102951313"}, +{"created":"20230423163641722","title":"$:/state/notebook-sidebar-section","text":"","modified":"20250925112056019"}, {"created":"20230427102758222","title":"$:/state/plugin-info--1887569658-$:/plugins/ihm/tidgraph--50210113","text":"documentation","modified":"20230427102759911"}, {"created":"20230427092525294","title":"$:/state/plugin-info--391242618-$:/plugins/tiddlywiki/browser-storage","text":"yes","modified":"20230427092525375"}, {"created":"20230427093219686","title":"$:/state/plugin-info--391242618-$:/plugins/tiddlywiki/browser-storage--605768392","text":"settings","modified":"20230427094141558"}, @@ -1125,7 +1127,7 @@ button.sidebar-toggle{ {"created":"20240627123502664","title":"$:/state/plugin-info-1605320774-$:/themes/nico/notebook--1711715474","text":"contents","modified":"20240627123505187"}, {"created":"20230424093627704","title":"$:/state/plugin-info-833095967-Draft of '$:/core'---1604322978","text":"readme","modified":"20230424093629208"}, {"created":"20230423163649566","title":"$:/state/showeditpreview","text":"no","modified":"20250207145432476"}, -{"created":"20230504174435745","title":"$:/state/sidebar","text":"โ€œnoโ€","modified":"20250922183458759"}, +{"created":"20230504174435745","title":"$:/state/sidebar","text":"โ€œnoโ€","modified":"20250925101902472"}, {"created":"20230423163453188","title":"$:/state/tab--1963855381","text":"$:/core/ui/ControlPanel/Palette","modified":"20240718192009185"}, {"created":"20230427092954391","title":"$:/state/tab--2112689675","text":"$:/core/ui/ControlPanel/Advanced","modified":"20250211170652750"}, {"created":"20230424093058379","title":"$:/state/tab--697582678","text":"$:/core/ui/ControlPanel/Settings/TiddlyWiki","modified":"20230427093030201"}, @@ -1144,6 +1146,7 @@ button.sidebar-toggle{ {"created":"20250902140446967","title":"$:/state/toc/level3-๐ŸŽž Media Fragments-1869724228","text":"close","modified":"20250902140447802"}, {"created":"20241007085320030","title":"$:/state/toc/Reference-๐Ÿ“œ level 1 spec--403145756","text":"open","modified":"20241007085320030"}, {"created":"20241007085406064","title":"$:/state/toc/Reference-๐Ÿ“œ level 1 spec: URL--403145756","text":"open","modified":"20241007085406064"}, +{"created":"20250924095259064","title":"$:/state/toc/Reference-๐Ÿ“œ level0: File--403145756","text":"open","modified":"20250924095259064"}, {"created":"20241007085601222","title":"$:/state/toc/Reference-๐Ÿ“œ level1: URL--403145756","text":"open","modified":"20250903122950136"}, {"created":"20250922160153227","title":"$:/state/toc/Reference-๐Ÿ“œ level2: explicit hyperlinks--403145756","text":"open","modified":"20250922160153227"}, {"created":"20250902140915727","title":"$:/state/toc/Reference-๐Ÿ“œ level2: explicit links--403145756","text":"open","modified":"20250903120156897"}, @@ -1187,7 +1190,7 @@ button.sidebar-toggle{ {"created":"20230622104329622","title":"$:/state/toc/Reference/js/AFRAME-THREE.js--403145756","text":"open","modified":"20230622104329622"}, {"created":"20230622111759784","title":"$:/state/toc/Reference/The parser-THREE.js--403145756","text":"open","modified":"20230622111759784"}, {"title":"$:/status/RequireReloadDueToPluginChange","text":"no"}, -{"title":"$:/StoryList","created":"20250922200712105","text":"","list":"[[XR Fragments]]","modified":"20250922202140554"}, +{"title":"$:/StoryList","created":"20250925103025480","text":"","list":"[[XR Fragments]]","modified":"20250925103025480"}, {"created":"20230423163445948","title":"$:/theme","text":"$:/themes/nico/notebook","modified":"20240718191943667"}, {"created":"20240627122947980","text":"{\n \"tiddlers\": {\n \"$:/themes/nico/notebook/LICENSE\": {\n \"title\": \"$:/themes/nico/notebook/LICENSE\",\n \"created\": \"20200419141443144\",\n \"modified\": \"20210118213330307\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\nMIT License Copyright (c) 2020 [[Nicolas Petton|https://nicolas.petton.fr]] nicolas@petton.fr\\n\\nPermission is hereby granted, free of charge, to any person obtaining a copy\\nof this software and associated documentation files (the \\\"Software\\\"), to deal\\nin the Software without restriction, including without limitation the rights\\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\\ncopies of the Software, and to permit persons to whom the Software is furnished\\nto do so, subject to the following conditions:\\n\\nThe above copyright notice and this permission notice (including the next\\nparagraph) shall be included in all copies or substantial portions of the\\nSoftware.\\n\\nTHE SOFTWARE IS PROVIDED \\\"AS IS\\\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS\\nOR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\\nWHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF\\nOR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\\n\"\n },\n \"$:/themes/nico/notebook/themetweaks\": {\n \"title\": \"$:/themes/nico/notebook/themetweaks\",\n \"created\": \"20201217172915960\",\n \"modified\": \"20210123211851680\",\n \"tags\": \"$:/tags/ControlPanel/Appearance\",\n \"caption\": \"{{$:/language/ThemeTweaks/ThemeTweaks}}\",\n \"text\": \"\\\\define lingo-base() $:/language/ThemeTweaks/\\n\\nYou can tweak certain aspects of the ''Notebook'' theme.\\n\\n! \u003C\u003Clingo Options>>\\n\\n|\u003C$link to=\\\"$:/themes/nico/notebook/options/stickytitles\\\">\u003C\u003Clingo Options/StickyTitles>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Options/StickyTitles/Hint>>// |\u003C$select tiddler=\\\"$:/themes/nico/notebook/options/stickytitles\\\">\u003Coption value=\\\"no\\\">{{$:/language/No}}\u003C/option>\u003Coption value=\\\"yes\\\">{{$:/language/Yes}}\u003C/option>\u003C/$select> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/options/codewrapping\\\">\u003C\u003Clingo Options/CodeWrapping>>\u003C/$link> |\u003C$select tiddler=\\\"$:/themes/tiddlywiki/vanilla/options/codewrapping\\\">\u003Coption value=\\\"pre\\\">{{$:/language/No}}\u003C/option>\u003Coption value=\\\"pre-wrap\\\">{{$:/language/Yes}}\u003C/option>\u003C/$select> |\\n|\u003C$link to=\\\"$:/themes/nico/notebook/options/reveal-tiddler-controls-on-hover\\\">Reveal tiddler controls on mouseover\u003C/$link> |\u003C$select tiddler=\\\"$:/themes/nico/notebook/options/reveal-tiddler-controls-on-hover\\\">\u003Coption value=\\\"no\\\">{{$:/language/No}}\u003C/option>\u003Coption value=\\\"yes\\\">{{$:/language/Yes}}\u003C/option>\u003C/$select> |\\n\\n! \u003C\u003Clingo Settings>>\\n\\n|\u003C$link to=\\\"$:/themes/nico/notebook/settings/fontfamily\\\">\u003C\u003Clingo Settings/FontFamily>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/settings/fontfamily\\\" default=\\\"\\\" tag=\\\"input\\\"/> | |\\n|\u003C$link to=\\\"$:/themes/nico/notebook/settings/codefontfamily\\\">\u003C\u003Clingo Settings/CodeFontFamily>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/settings/codefontfamily\\\" default=\\\"\\\" tag=\\\"input\\\"/> | |\\n|\u003C$link to=\\\"$:/themes/nico/notebook/settings/editorfontfamily\\\">\u003C\u003Clingo Settings/EditorFontFamily>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/settings/editorfontfamily\\\" default=\\\"\\\" tag=\\\"input\\\"/> | |\\n\\n! \u003C\u003Clingo Metrics>>\\n\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\\\">\u003C\u003Clingo Metrics/FontSize>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/fontsize\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\\\">\u003C\u003Clingo Metrics/LineHeight>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/lineheight\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize\\\">\u003C\u003Clingo Metrics/BodyFontSize>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/metrics/bodyfontsize\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/bodylineheight\\\">\u003C\u003Clingo Metrics/BodyLineHeight>>\u003C/$link> |\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/metrics/bodylineheight\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\\\">\u003C\u003Clingo Metrics/SidebarBreakpoint>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/SidebarBreakpoint/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/nico/notebook/metrics/sidebar-width\\\">\u003C\u003Clingo Metrics/SidebarWidth>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/SidebarWidth/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/metrics/sidebar-width\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n|\u003C$link to=\\\"$:/themes/nico/notebook/metrics/story-width\\\">\u003C\u003Clingo Metrics/StoryWidth>>\u003C/$link>\u003Cbr>//\u003C\u003Clingo Metrics/StoryWidth/Hint>>// |^\u003C$edit-text tiddler=\\\"$:/themes/nico/notebook/metrics/story-width\\\" default=\\\"\\\" tag=\\\"input\\\"/> |\\n\\n\"\n },\n \"$:/themes/nico/notebook/base\": {\n \"title\": \"$:/themes/nico/notebook/base\",\n \"created\": \"20200419141443144\",\n \"modified\": \"20210120224227503\",\n \"tags\": \"$:/tags/Stylesheet\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline\\n\\n\\\\define if-sidebar(text)\\n \u003C$reveal state=\\\"$:/state/notebook-sidebar\\\" type=\\\"match\\\" text=\\\"yes\\\">\\n $text$\\n \u003C/$reveal>\\n\\\\end\\n\\n\\\\define if-reveal-tiddler-controls-on-hover(text)\\n \u003C$reveal state=\\\"$:/themes/nico/notebook/options/reveal-tiddler-controls-on-hover\\\" type=\\\"match\\\" text=\\\"yes\\\">\\n $text$\\n \u003C/$reveal>\\n\\\\end\\n \\n/* Top and bottom bars */\\n\\n/* Hide the top-right bar */\\n.tc-topbar.tc-topbar-right {\\n display: none;\\n}\\n\\ndiv.tc-sidebar-header {\\n padding: 0;\\n min-height: 0;\\n}\\n\\n.tc-story-river {\\n padding: 6px 0 !important;\\n width: 100% !important;\\n max-width: {{$:/themes/nico/notebook/metrics/story-width}} !important;\\n margin: 0 auto !important;\\n margin-top: 34px !important;\\n}\\n\\ndiv.tc-tiddler-frame {\\n width: 100%;\\n margin: 20px 0;\\n background: \u003C\u003Ccolour tiddler-background>>;\\n box-shadow: 0 5px 20px rgba(0,0,0, 0.12);\\n border-radius: 6px;\\n padding: 42px 60px 60px 60px;\\n}\\n\\nh1.tc-site-title {\\n margin-top: 14px;\\n font-size: 1.5em !important;\\n}\\n\\n.nc-bar {\\n padding: 10px;\\n height: {{$:/themes/nico/notebook/metrics/topbar-height}};\\n background: \u003C\u003Ccolour page-background>>;\\n display: flex;\\n justify-content: space-between;\\n}\\n\\n.nc-topbar-wrapper {\\n position: fixed;\\n top: 0;\\n left: 0;\\n right: 0;\\n /* The z-index needs to be above the z-index used in tiddlers in zoomin view */\\n z-index: 501;\\n}\\n\\n.nc-bar.nc-topbar {\\n top: 0;\\n background: \u003C\u003Ccolour page-background>>ee;\\n max-width: calc({{$:/themes/nico/notebook/metrics/story-width}} + 40px);\\n padding: 10px 20px;\\n margin: 0 auto;\\n}\\n\\n.nc-bar.nc-bottombar {\\n position: fixed;\\n bottom: 0;\\n left: 0;\\n right: 0;\\n /* The z-index needs to be above the z-index used in tiddlers in zoomin view */\\n z-index: 501;\\n}\\n\\n.nc-bar .left svg {\\n fill: \u003C\u003Ccolour sidebar-controls-foreground>>;\\n}\\n\\n.nc-bar input[type=\\\"search\\\"] {\\n width: 200px;\\n padding: .6em 1em;\\n margin-top: -.2em;\\n background: \u003C\u003Ccolour sidebar-button-foreground>>44;\\n color: \u003C\u003Ccolour foreground>>cc;\\n transition: all ease-in .2s;\\n border: 1px solid transparent;\\n outline: 0;\\n}\\n\\n.nc-bar input[type=\\\"search\\\"]:focus {\\n width: 300px;\\n background: \u003C\u003Ccolour tiddler-background>>;\\n color: \u003C\u003Ccolour foreground>>;\\n border: 1px solid \u003C\u003Ccolour primary>>;\\n box-shadow: 0 0 .2rem 0 \u003C\u003Ccolour primary>>;\\n}\\n\\ninput[type=\\\"search\\\"]::-webkit-search-cancel-button {\\n -webkit-appearance: auto;\\n}\\n\\n.nc-bar .tc-block-dropdown.tc-search-drop-down {\\n margin-left: 0;\\n width: 400px;\\n border: 0;\\n box-shadow: 0 0 6px 0 rgba(0,0,0,.2);\\n border-radius: 6px;\\n padding: 20px 0;\\n}\\n\\n.nc-bar p {\\n margin: 0;\\n}\\n\\n.nc-bar .tc-page-controls {\\n margin-top: 0;\\n}\\n\\n.nc-bar .tc-page-controls button {\\n margin-right: .8em;\\n}\\n\\n.nc-bar .tc-page-controls button .tc-btn-text {\\n font-size: 14px;\\n}\\n\\n.nc-bar .tc-block-dropdown {\\n max-height: 70vh;\\n overflow: auto;\\n}\\n\\n@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .nc-topbar {\\n display: none;\\n }\\n\\n .tc-story-river {\\n padding: 0 !important;\\n margin-top: 0 !important;\\n margin-bottom: 60px !important;\\n }\\n\\n div.tc-tiddler-frame {\\n margin: 0;\\n box-shadow: none;\\n border-radius: 0;\\n border-top: 0;\\n }\\n}\\n\\n@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .nc-bottombar {\\n display: none;\\n }\\n}\\n\\n@media(max-width: 1100px) {\\n .nc-bar input[type=\\\"search\\\"] {\\n width: 200px;\\n }\\n}\\n\\n/* Sidebar */\\n\\n@keyframes sidebar-appear {\\n 0% {\\n left: -{{$:/themes/nico/notebook/metrics/sidebar-width}};\\n }\\n 100% {\\n left: 0;\\n }\\n}\\n\\n\u003C\u003Cif-sidebar \\\"\\\"\\\"\\n@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .nc-sidebar {\\n animation: sidebar-appear .14s;\\n padding-top: 10px;\\n }\\n}\\n\\\"\\\"\\\">>\\n\\n.nc-sidebar {\\n background: \u003C\u003Ccolour tiddler-background>>;\\n border-right: 1px solid \u003C\u003Ccolour tiddler-border>>;\\n width: {{$:/themes/nico/notebook/metrics/sidebar-width}};\\n overflow-y: auto;\\n overflow-x: hidden;\\n z-index: 100;\\n}\\n\\n.nc-sidebar .segment {\\n border-bottom: 1px solid rgba(0,0,0,.1);\\n}\\n\\n.nc-sidebar ol {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n line-height: 1.8em;\\n}\\n\\n.nc-sidebar ol ol {\\n padding-left: 18px;\\n}\\n\\n@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .mobile-only {\\n display: none;\\n }\\n}\\n\\n@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .desktop-only {\\n display: none;\\n }\\n}\\n\\n.nc-sidebar h1.tc-site-title {\\n margin: 0;\\n}\\n\\n.nc-sidebar p {\\n margin: 6px 0;\\n}\\n\\n.nc-sidebar .tc-site-subtitle {\\n color: \u003C\u003Ccolour site-title-foreground>>;\\n}\\n\\n.nc-sidebar .section .label {\\n padding: 2px 0;\\n color: \u003C\u003Ccolour site-title-foreground>>;\\n fill: \u003C\u003Ccolour site-title-foreground>>;\\n font-weight: bold;\\n line-height: 1.6em;\\n display: block;\\n width: 100%;\\n text-align: left;\\n padding: 8px 15px;\\n border-radius: 0;\\n}\\n\\n.nc-sidebar .section:not(.open) .label:hover {\\n background: rgba(0,0,0,.06);\\n}\\n\\n.nc-sidebar .section.open .label {\\n color: \u003C\u003Ccolour tiddler-background>>;\\n fill: \u003C\u003Ccolour tiddler-background>>;\\n background: \u003C\u003Ccolour primary>>;\\n border-bottom: 1px solid rgba(0,0,0,.1);\\n}\\n\\n.nc-sidebar .section .label .caret {\\n display: inline-block;\\n width: 15px;\\n float: right;\\n}\\n\\n.nc-sidebar .content {\\n padding: 6px 15px;\\n font-size: 1em;\\n}\\n\\n.nc-sidebar .tc-tiddlylink {\\n color: \u003C\u003Ccolour primary>>;\\n}\\n\\n@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .nc-sidebar {\\n position: fixed;\\n left: 0;\\n top: 0;\\n bottom: 0;\\n }\\n}\\n\\n\u003C\u003Cif-sidebar \\\"\\\"\\\"\\n@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n @keyframes sidebar-slide {\\n 0% {\\n left: -100vw;\\n }\\n 100% {\\n left: 0;\\n }\\n }\\n .nc-sidebar {\\n overflow: auto;\\n position: fixed;\\n width: 100%;\\n left: 0;\\n top: 0;\\n bottom: 48px;\\n z-index: 3000;\\n animation: sidebar-slide ease-in .2s;\\n animation-fill-mode: forwards;\\n }\\n}\\n\\n@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .tc-page-container {\\n margin-left: {{$:/themes/nico/notebook/metrics/sidebar-width}} !important;\\n }\\n\\n .nc-topbar-wrapper {\\n left: {{$:/themes/nico/notebook/metrics/sidebar-width}};\\n }\\n}\\n\\\"\\\"\\\">>\\n\\n/* Animate the hamburger button */\\n\\n@keyframes menu-bars-1 {\\n 0% {}\\n 100% {\\n transform: rotate(-45deg) translateY(-10px) translateX(-6px);\\n fill: \u003C\u003Ccolour foreground>>;\\n }\\n}\\n\\n@keyframes menu-bars-2 {\\n 0% {}\\n 100% { opacity: 0; }\\n}\\n\\n@keyframes menu-bars-3 {\\n 0% {}\\n 100% {\\n transform: rotate(45deg) translateY(6px) translateX(2px);\\n fill: \u003C\u003Ccolour foreground>>;\\n }\\n}\\n\\n.sidebar-toggle {\\n /* position: fixed; */\\n /* top: 6px; */\\n /* left: 6px; */\\n /* z-index: 600; */\\n /* padding: 4px; */\\n /* border-radius: 8px; */\\n margin-right: 10px;\\n transition: all ease-in-out .2s;\\n fill: \u003C\u003Ccolour sidebar-controls-foreground>>;\\n}\\n\\n.sidebar-toggle:hover,\\n.sidebar-toggle.open {\\n fill: \u003C\u003Ccolour sidebar-controls-foreground-hover>>;\\n}\\n\\n/* @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { */\\n/* .sidebar-toggle { */\\n/* top: auto; */\\n/* bottom: 10px; */\\n/* left: 10px; */\\n/* } */\\n/* } */\\n\\n.sidebar-toggle .bars .bar {\\n transform: rotate(0) translateY(0) translateX(0);\\n opacity: 1;\\n transform-origin: 20px 10px;\\n transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;\\n}\\n\\n.sidebar-toggle .bars .bar:nth-of-type(3) {\\n transform-origin: 20px 20px;\\n}\\n\\n.sidebar-toggle.open .bars .bar:nth-of-type(1) {\\n animation: menu-bars-1 .6s;\\n animation-fill-mode: forwards;\\n}\\n.sidebar-toggle.open .bars .bar:nth-of-type(2) {\\n animation: menu-bars-2 .6s;\\n animation-fill-mode: forwards;\\n}\\n.sidebar-toggle.open .bars .bar:nth-of-type(3) {\\n animation: menu-bars-3 .6s;\\n animation-fill-mode: forwards;\\n}\\n\\n@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n div.tc-tiddler-frame {\\n padding: 14px;\\n }\\n}\\n\\n/* Inputs */\\n\\ninput, textarea {\\n transition: border .14s ease-in-out;\\n background: \u003C\u003Ccolour tiddler-editor-background>>;\\n border: 1px solid \u003C\u003Ccolour tiddler-editor-border>>;\\n padding: .5em;\\n border-radius: 4px;\\n}\\n\\ninput:focus, textarea:focus {\\n box-shadow: 0 0 0.2rem 0 \u003C\u003Ccolour primary>>;\\n outline: 0;\\n border-color: \u003C\u003Ccolour primary>>;\\n}\\n\\nbutton {\\n border-radius: 1.5em;\\n border: 1px solid #ccc;\\n background: \u003C\u003Ccolour tiddler-background>>;\\n padding: .3em 1em;\\n cursor: pointer;\\n transition: box-shadow ease-in .1s;\\n color: \u003C\u003Ccolor foreground>>;\\n}\\n\\nbutton:focus, button:active {\\n outline: 0 none;\\n}\\n\\nbutton.tc-btn-invisible {\\n border-radius: 0;\\n}\\n\\n.tc-editor-toolbar button,\\n.tc-editor-toolbar button.tc-btn-invisible {\\n border-radius: 3px;\\n background: \u003C\u003Ccolour tiddler-editor-background>>;\\n color: \u003C\u003Ccolour foreground>>;\\n fill: \u003C\u003Ccolour foreground>>;\\n border: 1px solid \u003C\u003Ccolour tiddler-editor-border>>;\\n}\\n\\n.tc-editor-toolbar button:hover,\\n.tc-editor-toolbar button:active {\\n border-color: \u003C\u003Ccolour primary>>;\\n background: \u003C\u003Ccolour primary>>;\\n color: \u003C\u003Ccolour background>>;\\n fill: \u003C\u003Ccolour background>>;\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor,\\n.tc-tiddler-frame textarea.tc-edit-texteditor,\\n.tc-tiddler-frame iframe.tc-edit-texteditor {\\n transition: border .14s ease-in-out;\\n border: 1px solid \u003C\u003Ccolour tiddler-editor-border>>;\\n background: \u003C\u003Ccolour tiddler-editor-background>>;\\n padding: 4px;\\n border-radius: 4px;\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor:focus,\\n.tc-tiddler-frame textarea.tc-edit-texteditor:focus,\\n.tc-tiddler-frame iframe.tc-edit-texteditor:focus {\\n box-shadow: 0 0 0.2rem 0 \u003C\u003Ccolour primary>>;\\n outline: 0;\\n border-color: \u003C\u003Ccolour primary>>;\\n}\\n\\n.tc-tiddler-controls .tc-btn-text {\\n font-size: 16px;\\n}\\n\\n\u003C\u003Cif-reveal-tiddler-controls-on-hover \\\"\\\"\\\"\\n@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .tc-tiddler-frame .tc-tiddler-controls svg {\\n opacity: 0;\\n transition: all .2s ease-in;\\n }\\n\\n .tc-tiddler-controls svg.tc-image-close-button,\\n .tc-tiddler-controls .py-toggle-todo-button svg,\\n .tc-tiddler-controls svg.tc-image-done-button,\\n .tc-tiddler-frame .tc-tiddler-controls:hover svg {\\n opacity: 1;\\n }\\n\\n .tc-tiddler-controls .py-toggle-todo-button .done svg {\\n fill: #2da562;\\n }\\n}\\n\\\"\\\"\\\">>\\n\\nbutton.tc-tag-label, span.tc-tag-label {\\n padding: 0.3em 1em !important;\\n}\\n\\n/* Fonts */\\n\\nhtml, body {\\n font-family: {{$:/themes/nico/notebook/settings/fontfamily}};\\n}\\n\\n.tc-tiddler-frame input.tc-edit-texteditor,\\n.tc-tiddler-frame textarea.tc-edit-texteditor,\\n.tc-tiddler-frame iframe.tc-edit-texteditor {\\n font-family: {{$:/themes/nico/notebook/settings/editorfontfamily}};\\n}\\n\\npre, code {\\n font-family: {{$:/themes/nico/notebook/settings/codefontfamily}};\\n}\\n\\n.tc-titlebar, .tc-site-title {\\n font-size: 28px !important;\\n line-height: 34px !important;\\n font-weight: 600 !important;\\n letter-spacing: -0.5px !important;\\n}\\n\\nh1, h2, h3, h4, h5, h6 {\\n font-weight: 600;\\n}\\n\\n.tc-tiddler-body h1,\\n.tc-tiddler-body h2,\\n.tc-tiddler-preview-preview h1,\\n.tc-tiddler-preview-preview h2 {\\n font-weight: bold;\\n}\\n\\ndiv.tc-tiddler-frame .tc-tiddler-body {\\n font-size: {{$:/themes/nico/notebook/metrics/bodyfontsize}};\\n line-height: {{$:/themes/nico/notebook/metrics/bodylineheight}};\\n}\\n\\n/* Tabs */\\n\\ndiv.tc-tab-buttons {\\n margin-bottom: -4px;\\n}\\n\\ndiv.tc-tab-buttons button {\\n font-weight: bold;\\n font-size: 1.2em;\\n line-height: 1em;\\n padding: .6em .8em .4em .8em;\\n border: 0;\\n border-radius: 0;\\n background: transparent;\\n cursor: pointer;\\n transition: background ease-in .2s;\\n}\\n\\ndiv.tc-tab-buttons button:hover {\\n background: rgba(0,0,0,.03);\\n}\\n\\ndiv.tc-tab-buttons button.tc-tab-selected {\\n border: 0;\\n background: transparent;\\n border-bottom: 4px solid \u003C\u003Ccolour primary>>;\\n}\\n\\n/* Dropdowns */\\n\\n@keyframes pop {\\n 0% {\\n transform: scale(0.8);\\n opacity: 0;\\n }\\n\\n 80% {\\n transform: scale(1.03);\\n opacity: 1;\\n }\\n\\n 100% {\\n transform: scale(1);\\n opacity: 1;\\n }\\n}\\n\\n.tc-drop-down {\\n box-shadow: 0 0 10px rgba(0,0,0,.2);\\n border-radius: 6px;\\n padding: 10px 0 !important;\\n animation: pop .15s ease-in forwards;\\n}\\n\\n.tc-drop-down a, .tc-drop-down button {\\n padding: 3px 15px !important;\\n}\\n\\n.tc-search-results {\\n line-height: 2em;\\n}\\n\\n.tc-search-results em {\\n font-weight: bold;\\n font-style: normal;\\n}\\n\\n/* Draft list */\\n\\n.tc-drafts-list {\\n font-size: .9em;\\n left: auto;\\n right: 0;\\n}\\n\\n.tc-drafts-list a {\\n padding: 6px 12px;\\n font-weight: bold;\\n border-top-left-radius: 6px;\\n border-top-right-radius: 6px;\\n display: inline-block;\\n}\\n\\n.nc-refs {\\n color: #888;\\n font-size: .9em;\\n}\\n\\n.nc-refs h4 {\\n margin-bottom: 4px;\\n}\\n\\n.nc-post-created {\\n color: #acacac;\\n font-size: .8em;\\n}\\n\"\n },\n \"$:/themes/nico/notebook/changelog\": {\n \"title\": \"$:/themes/nico/notebook/changelog\",\n \"caption\": \"ChangeLog\",\n \"created\": \"20201217180707912\",\n \"modified\": \"20210202214001915\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"! 1.4.1\\n\\n!! Fixes\\n\\n* Fix the transclusion mode of sidebar sections\\n* Fix section title rendering for tiddlers without a caption field\\n* Fix the colour of links in the sidebar when using Notebook palettes with Vanilla\\n\\n! 1.4.0\\n\\n!! Features\\n\\n* New redesigned topbar layout\\n* Add a configuration setting for the story width\\n* Add support for keyboard navigation in the search dropdown\\n\\n! 1.3.6\\n\\n!! Improvements\\n\\n* Improve the style of tabs\\n* New animation for drop-downs\\n* Use a lighter page background colour in the beige palette\\n\\n!! Fixes\\n\\n* Fix the default ctrl+shift+F shortcut for focusing the search input\\n\\n! 1.3.5\\n\\n!! Features\\n\\n* Add an option to reveal tiddler controls on mouseover\\n\\n! 1.3.4\\n\\n!! Improvements\\n\\n* Add a keyboard shortcut (alt+shift+s) to toggle Notebook sidebar\\n* Add missing colours to tiddler editor fields in the dark palette\\n\\n!! Fixes\\n\\n* Fix the size of toolbar button labels when the $:/config/Toolbar/Text is set to yes\\n\\n! 1.3.3\\n\\n!! Improvements\\n\\n* Make the sidebar more generic by using the default sidebar sections\\n\\n! 1.3.2\\n\\n!! Improvements\\n\\n* Add colours for messages in the dark palette\\n* Add colours for notification in the dark palette\\n* Set colours for messages in the beige palette\\n\\n! 1.3.1\\n\\n!! Features\\n\\n* New font family settings distinct from the Vanilla theme\\n\\n!! Improvements\\n\\n* Use a slightly lighter colour as the search input background\\n* Improve contrast of sidebar buttons in the dark palette\\n\\n!! Fixes\\n\\n* Fix tiddler control button colours in all three palettes\\n* Fix tab colours in palette-dark\\n\\n! 1.3.0\\n\\n!! Improvements\\n\\n* New dark colour palette\\n* Use a darker color for tiddler subtitles\\n* Add back the WebKit search cancel button in search inputs\\n\\n!! Fixes\\n\\n* Fix the z-index of the topbar for the zoomin story view\\n* Fix the font weight of tiddler titles in edit mode\\n\\n! 1.2.0\\n\\n!! Improvements\\n\\n* Better support for dark colour palettes\\n\\n!! Fixes\\n\\n* Fix rendering of overflowing/wrapping text in the sidebar\\n\\n! 1.1.0\\n\\n!! Features\\n\\n* New theme tweaks tab dedicated to Notebook in the control panel\\n* Inputs in the edit template are now styled consistently with other inputs\\n\\n!! Fixes\\n\\n* Fixes the position of sticky tiddler titles when the option is turned on\\n\"\n },\n \"$:/config/ShortcutInfo/notebook-focus-search\": {\n \"title\": \"$:/config/ShortcutInfo/notebook-focus-search\",\n \"text\": \"Focus on the topbar search field\"\n },\n \"$:/config/shortcuts/notebook-focus-search\": {\n \"title\": \"$:/config/shortcuts/notebook-focus-search\",\n \"text\": \"ctrl+shift+F\"\n },\n \"$:/config/Search/AutoFocus\": {\n \"title\": \"$:/config/Search/AutoFocus\",\n \"text\": \"false\"\n },\n \"$:/config/shortcuts/sidebar-search\": {\n \"title\": \"$:/config/shortcuts/sidebar-search\",\n \"text\": \"\"\n },\n \"$:/themes/nico/notebook/images/bars\": {\n \"title\": \"$:/themes/nico/notebook/images/bars\",\n \"created\": \"20200428212322206\",\n \"modified\": \"20201210210231235\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Csvg class=\\\"bars\\\" height=\\\"21pt\\\" viewBox=\\\"0 0 42 42\\\" enable-background=\\\"new 0 0 32 22.5\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n \u003Cg class=\\\"svg-menu-toggle\\\" sketch:type=\\\"MSLayerGroup\\\">\\n \u003Crect class=\\\"bar\\\" x=\\\"8\\\" y=\\\"28\\\" width=\\\"26\\\" height=\\\"4\\\">\u003C/rect>\\n \u003Crect class=\\\"bar\\\" x=\\\"8\\\" y=\\\"19\\\" width=\\\"26\\\" height=\\\"4\\\">\u003C/rect>\\n \u003Crect class=\\\"bar\\\" x=\\\"8\\\" y=\\\"10\\\" width=\\\"26\\\" height=\\\"4\\\">\u003C/rect>\\n \u003C/g>\\n\u003C/svg>\\n\"\n },\n \"$:/themes/nico/notebook/images/caret-down\": {\n \"title\": \"$:/themes/nico/notebook/images/caret-down\",\n \"created\": \"20200429194348688\",\n \"modified\": \"20201210210230919\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Csvg width=\\\"6pt\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 320 512\\\">\u003Cpath d=\\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\\"/>\u003C/svg>\\n\"\n },\n \"$:/themes/nico/notebook/images/caret-right\": {\n \"title\": \"$:/themes/nico/notebook/images/caret-right\",\n \"created\": \"20200429194305719\",\n \"modified\": \"20201210210230909\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Csvg width=\\\"4pt\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 192 512\\\">\u003Cpath d=\\\"M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z\\\"/>\u003C/svg>\\n\"\n },\n \"$:/themes/nico/notebook/images/color-switch\": {\n \"title\": \"$:/themes/nico/notebook/images/color-switch\",\n \"created\": \"20201210170859810\",\n \"creator\": \"nico\",\n \"modified\": \"20201210205606403\",\n \"modifier\": \"nico\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Csvg width=\\\"20px\\\" height=\\\"20px\\\" viewBox=\\\"0 0 16 16\\\" class=\\\"bi bi-circle-half\\\" fill=\\\"currentColor\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n \u003Cpath fill-rule=\\\"evenodd\\\" d=\\\"M8 15V1a7 7 0 1 1 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\\\"/>\\n\u003C/svg\\n\"\n },\n \"$:/themes/nico/notebook/metrics/bodyfontsize\": {\n \"title\": \"$:/themes/nico/notebook/metrics/bodyfontsize\",\n \"created\": \"20200428203454207\",\n \"modified\": \"20201210205606363\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"15px\\n\"\n },\n \"$:/themes/nico/notebook/metrics/bodylineheight\": {\n \"title\": \"$:/themes/nico/notebook/metrics/bodylineheight\",\n \"created\": \"20200428203454207\",\n \"modified\": \"20201210205606363\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"22px\"\n },\n \"$:/themes/nico/notebook/metrics/sidebar-width\": {\n \"title\": \"$:/themes/nico/notebook/metrics/sidebar-width\",\n \"created\": \"20200429144554294\",\n \"modified\": \"20201210210231246\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"350px\\n\"\n },\n \"$:/themes/nico/notebook/metrics/story-width\": {\n \"title\": \"$:/themes/nico/notebook/metrics/story-width\",\n \"created\": \"20210123210054185\",\n \"modified\": \"20210123211911688\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"800px\\n\"\n },\n \"$:/themes/nico/notebook/metrics/topbar-height\": {\n \"title\": \"$:/themes/nico/notebook/metrics/topbar-height\",\n \"created\": \"20200428203454207\",\n \"modified\": \"20201210205606363\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"52px\\n\"\n },\n \"$:/themes/nico/notebook/options/stickytitles\": {\n \"title\": \"$:/themes/nico/notebook/options/stickytitles\",\n \"text\": \"no\"\n },\n \"$:/themes/nico/notebook/options/codewrapping\": {\n \"title\": \"$:/themes/nico/notebook/options/codewrapping\",\n \"text\": \"pre-wrap\"\n },\n \"$:/themes/nico/notebook/options/reveal-tiddler-controls-on-hover\": {\n \"title\": \"$:/themes/nico/notebook/options/reveal-tiddler-controls-on-hover\",\n \"text\": \"no\"\n },\n \"$:/core/ui/PageTemplate/sidebar\": {\n \"title\": \"$:/core/ui/PageTemplate/sidebar\",\n \"created\": \"20200430072116835\",\n \"modified\": \"20201217174129501\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\\whitespace trim\\n\\\\define config-title()\\n$:/config/SideBarSegments/Visibility/$(listItem)$\\n\\\\end\\n\\nOverwritten by $:/themes/nico/notebook so that the default sidebar does not get rendered.\\n\"\n },\n \"$:/themes/tiddlywiki/vanilla/themetweaks\": {\n \"title\": \"$:/themes/tiddlywiki/vanilla/themetweaks\",\n \"caption\": \"{{$:/language/ThemeTweaks/ThemeTweaks}}\",\n \"created\": \"20201217163834291\",\n \"modified\": \"20201217163914434\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"Overwritten by $:/themes/nico/notebook so that the Vanilla theme tweaks do not appear in the control panel. \"\n },\n \"$:/themes/nico/notebook/palettes/palette-beige\": {\n \"title\": \"$:/themes/nico/notebook/palettes/palette-beige\",\n \"text\": \"alert-background: #ffe476\\nalert-border: #b99e2f\\nalert-highlight: #881122\\nalert-muted-foreground: #b99e2f\\nbackground: #ffffff\\nblockquote-bar: \u003C\u003Ccolour muted-foreground>>\\nbutton-background:\\nbutton-foreground:\\nbutton-border:\\ncode-background: #f7f7f9\\ncode-border: #e1e1e8\\ncode-foreground: #dd1144\\ndirty-indicator: #c63636\\ndownload-background: #66cccc\\ndownload-foreground: \u003C\u003Ccolour background>>\\ndragger-background: \u003C\u003Ccolour foreground>>\\ndragger-foreground: \u003C\u003Ccolour background>>\\ndropdown-background: \u003C\u003Ccolour background>>\\ndropdown-border: #ddd\\ndropdown-tab-background-selected: #fff\\ndropdown-tab-background: #ececec\\ndropzone-background: #da8548\\nexternal-link-background-hover: inherit\\nexternal-link-background-visited: inherit\\nexternal-link-background: inherit\\nexternal-link-foreground-hover: inherit\\nexternal-link-foreground-visited: #0000aa\\nexternal-link-foreground: #0000ee\\nforeground: #3F3B3B\\nmessage-background: #e6f5e8\\nmessage-border: #2b5532\\nmessage-foreground: #2b5532\\nmodal-backdrop: \u003C\u003Ccolour foreground>>\\nmodal-background: \u003C\u003Ccolour background>>\\nmodal-border: #999999\\nmodal-footer-background: #f5f5f5\\nmodal-footer-border: #dddddd\\nmodal-header-border: #eeeeee\\nmuted-foreground: #999999\\nnotification-background: #ffffdd\\nnotification-border: #999999\\npage-background: #f5f5ee\\npre-background: #f6f6f6\\npre-border: #cccccc\\nprimary: #7f4bca\\nselect-tag-background:\\nselect-tag-foreground:\\nsidebar-button-foreground: #a6a69c\\nsidebar-controls-foreground-hover: #000000\\nsidebar-controls-foreground: \u003C\u003Ccolour sidebar-button-foreground>>\\nsidebar-foreground-shadow: rgba(255,255,255, 0.8)\\nsidebar-foreground: #acacac\\nsidebar-muted-foreground-hover: #444444\\nsidebar-muted-foreground: #c0c0c0\\nsidebar-tab-background-selected: #ffffff\\nsidebar-tab-background: \u003C\u003Ccolour tab-background>>\\nsidebar-tab-border-selected: \u003C\u003Ccolour tab-border-selected>>\\nsidebar-tab-border: \u003C\u003Ccolour tab-border>>\\nsidebar-tab-divider: \u003C\u003Ccolour tab-divider>>\\nsidebar-tab-foreground-selected: \u003C\u003Ccolour tab-foreground-selected>>\\nsidebar-tab-foreground: \u003C\u003Ccolour tab-foreground>>\\nsidebar-tiddler-link-foreground-hover: \u003C\u003Ccolour primary>>\\nsidebar-tiddler-link-foreground: \u003C\u003Ccolour tab-foreground>>\\nsite-title-foreground: #353748\\nstatic-alert-foreground: #aaaaaa\\ntab-background-selected: #ffffff\\ntab-background: #eeeeee\\ntab-border-selected: #cccccc\\ntab-border: #cccccc\\ntab-divider: #d8d8d8\\ntab-foreground-selected: \u003C\u003Ccolour foreground>>\\ntab-foreground: #888888\\ntable-border: #dddddd\\ntable-footer-background: #a8a8a8\\ntable-header-background: #f0f0f0\\ntag-background: #ffeedd\\ntag-foreground: #000\\ntiddler-background: \u003C\u003Ccolour background>>\\ntiddler-border: #dbdbc7;\\ntiddler-controls-foreground-hover: #888888;\\ntiddler-controls-foreground-selected: #888888;\\ntiddler-controls-foreground: #cccccc\\ntiddler-editor-background: \u003C\u003Ccolour background>>\\ntiddler-editor-border-image: #ffffff\\ntiddler-editor-border: rgba(0,0,0,.2)\\ntiddler-editor-fields-even: #e0e8e0\\ntiddler-editor-fields-odd: #f0f4f0\\ntiddler-info-background: #f8f8f8\\ntiddler-info-border: #dddddd\\ntiddler-info-tab-background: #f8f8f8\\ntiddler-link-background: \u003C\u003Ccolour background>>\\ntiddler-link-foreground: \u003C\u003Ccolour primary>>\\ntiddler-subtitle-foreground: #aaaaaa\\ntiddler-title-foreground: #333\\ntoolbar-new-button:\\ntoolbar-options-button:\\ntoolbar-save-button:\\ntoolbar-info-button:\\ntoolbar-edit-button:\\ntoolbar-close-button:\\ntoolbar-delete-button:\\ntoolbar-cancel-button:\\ntoolbar-done-button:\\nuntagged-background: #999999\\nvery-muted-foreground: #888888\\n\",\n \"type\": \"application/x-tiddler-dictionary\",\n \"description\": \"A beige colour palette for Notebook\",\n \"name\": \"Notebook Beige\",\n \"tags\": \"$:/tags/Palette $:/tags/notebook/Palette\"\n },\n \"$:/themes/nico/notebook/palettes/palette-dark\": {\n \"title\": \"$:/themes/nico/notebook/palettes/palette-dark\",\n \"text\": \"alert-background: #643b43\\nalert-border: #3f181f\\nalert-highlight: #881122\\nalert-muted-foreground: #bc8b94\\nbackground: #383e49\\nblockquote-bar: \u003C\u003Ccolour muted-foreground>>\\nbutton-background:\\nbutton-border:\\nbutton-foreground:\\ncode-background: #2c323b\\ncode-border: #111\\ncode-foreground: #dd1144\\ndirty-indicator: #c63636\\ndownload-background: #98be65\\ndownload-foreground: \u003C\u003Ccolour background>>\\ndragger-background: \u003C\u003Ccolour foreground>>\\ndragger-foreground: \u003C\u003Ccolour background>>\\ndropdown-background: \u003C\u003Ccolour background>>\\ndropdown-border: #111\\ndropdown-tab-background-selected: #fff\\ndropdown-tab-background: #ececec\\ndropzone-background: #da8548\\nexternal-link-background-hover: inherit\\nexternal-link-background-visited: inherit\\nexternal-link-background: inherit\\nexternal-link-foreground-hover: inherit\\nexternal-link-foreground-visited: #61afef\\nexternal-link-foreground: #c678dd\\nforeground: #c8ced8\\nmessage-background: #2c323e\\nmessage-border: #111\\nmessage-foreground: #d5e2f1\\nmodal-backdrop: \u003C\u003Ccolour foreground>>\\nmodal-background: \u003C\u003Ccolour background>>\\nmodal-border: #999999\\nmodal-footer-background: #f5f5f5\\nmodal-footer-border: #dddddd\\nmodal-header-border: #eeeeee\\nmuted-foreground: #999999\\nnotification-background: #3a5e39\\nnotification-border: #192c19\\npage-background: #262b33\\npre-background: \u003C\u003Ccolour page-background>>\\npre-border: \u003C\u003Ccolour tiddler-border>>\\nprimary: #bf93ff\\nselect-tag-background:\\nselect-tag-foreground:\\nsidebar-button-foreground: #5e646f\\nsidebar-controls-foreground-hover: #cad2e5\\nsidebar-controls-foreground: \u003C\u003Ccolour sidebar-button-foreground>>\\nsidebar-foreground-shadow: rgba(255,255,255, 0.8)\\nsidebar-foreground: #cad2e5\\nsidebar-muted-foreground-hover: #444444\\nsidebar-muted-foreground: #c0c0c0\\nsidebar-tab-background-selected: \u003C\u003Ccolour tab-background-selected>>\\nsidebar-tab-background: \u003C\u003Ccolour tab-background>>\\nsidebar-tab-border-selected: \u003C\u003Ccolour tab-border-selected>>\\nsidebar-tab-border: \u003C\u003Ccolour tab-border>>\\nsidebar-tab-divider: \u003C\u003Ccolour tab-divider>>\\nsidebar-tab-foreground-selected: \u003C\u003Ccolour tab-foreground-selected>>\\nsidebar-tab-foreground: \u003C\u003Ccolour tab-foreground>>\\nsidebar-tiddler-link-foreground-hover: \u003C\u003Ccolour primary>>\\nsidebar-tiddler-link-foreground: \u003C\u003Ccolour tab-foreground>>\\nsite-title-foreground: \u003C\u003Ccolour foreground>>\\nstatic-alert-foreground: #aaaaaa\\ntab-background-selected: \u003C\u003Ccolour background>>\\ntab-background: \u003C\u003Ccolour page-background>>\\ntab-border-selected: \u003C\u003Ccolour foreground>>\\ntab-border: #cad2e5\\ntab-divider: #cad2e5\\ntab-foreground-selected: #ecf2ff\\ntab-foreground: #cad2e5\\ntable-border: #aaaaaa\\ntable-footer-background: #a8a8a8\\ntable-header-background: #262b33\\ntag-background: #fcb671\\ntag-foreground: #000\\ntiddler-background: \u003C\u003Ccolour background>>\\ntiddler-border: #111\\ntiddler-controls-foreground-hover: #cad2e5\\ntiddler-controls-foreground-selected: #cad2e5\\ntiddler-controls-foreground: #5e646f\\ntiddler-editor-background: \u003C\u003Ccolour background>>\\ntiddler-editor-border-image: #ffffff\\ntiddler-editor-border: rgba(255, 255, 255, 0.3)\\ntiddler-editor-fields-even: \u003C\u003Ccolour background>>\\ntiddler-editor-fields-odd: #2c323b\\ntiddler-info-background: #f8f8f8\\ntiddler-info-border: #dddddd\\ntiddler-info-tab-background: #f8f8f8\\ntiddler-link-background: \u003C\u003Ccolour background>>\\ntiddler-link-foreground: \u003C\u003Ccolour primary>>\\ntiddler-subtitle-foreground: #aaaaaa\\ntiddler-title-foreground: \u003C\u003Ccolour foreground>>\\ntoolbar-cancel-button:\\ntoolbar-close-button:\\ntoolbar-delete-button:\\ntoolbar-done-button:\\ntoolbar-edit-button:\\ntoolbar-info-button:\\ntoolbar-new-button:\\ntoolbar-options-button:\\ntoolbar-save-button:\\nuntagged-background: #999999\\nvery-muted-foreground: #888888\\n\",\n \"type\": \"application/x-tiddler-dictionary\",\n \"description\": \"A dark colour palette for Notebook\",\n \"name\": \"Notebook Dark\",\n \"tags\": \"$:/tags/Palette $:/tags/notebook/Palette\"\n },\n \"$:/themes/nico/notebook/palettes/palette-grey\": {\n \"title\": \"$:/themes/nico/notebook/palettes/palette-grey\",\n \"text\": \"alert-background: #ffe476\\nalert-border: #b99e2f\\nalert-highlight: #881122\\nalert-muted-foreground: #b99e2f\\nbackground: #ffffff\\nblockquote-bar: \u003C\u003Ccolour muted-foreground>>\\nbutton-background:\\nbutton-foreground:\\nbutton-border:\\ncode-background: #f7f7f9\\ncode-border: #e1e1e8\\ncode-foreground: #dd1144\\ndirty-indicator: #c63636\\ndownload-background: #66cccc\\ndownload-foreground: \u003C\u003Ccolour background>>\\ndragger-background: \u003C\u003Ccolour foreground>>\\ndragger-foreground: \u003C\u003Ccolour background>>\\ndropdown-background: \u003C\u003Ccolour background>>\\ndropdown-border: #ddd\\ndropdown-tab-background-selected: #fff\\ndropdown-tab-background: #ececec\\ndropzone-background: #da8548\\nexternal-link-background-hover: inherit\\nexternal-link-background-visited: inherit\\nexternal-link-background: inherit\\nexternal-link-foreground-hover: inherit\\nexternal-link-foreground-visited: #0000aa\\nexternal-link-foreground: #0000ee\\nforeground: #283c46\\nmessage-background: #ecf2ff\\nmessage-border: #cfd6e6\\nmessage-foreground: #547599\\nmodal-backdrop: \u003C\u003Ccolour foreground>>\\nmodal-background: \u003C\u003Ccolour background>>\\nmodal-border: #999999\\nmodal-footer-background: #f5f5f5\\nmodal-footer-border: #dddddd\\nmodal-header-border: #eeeeee\\nmuted-foreground: #999999\\nnotification-background: #ffffdd\\nnotification-border: #999999\\npage-background: #f4f4f4\\npre-background: #f6f6f6\\npre-border: #cccccc\\nprimary: #127edd\\nselect-tag-background:\\nselect-tag-foreground:\\nsidebar-button-foreground: #a6a69c\\nsidebar-controls-foreground-hover: #000000\\nsidebar-controls-foreground: \u003C\u003Ccolour sidebar-button-foreground>>\\nsidebar-foreground-shadow: rgba(255,255,255, 0.8)\\nsidebar-foreground: #acacac\\nsidebar-muted-foreground-hover: #444444\\nsidebar-muted-foreground: #c0c0c0\\nsidebar-tab-background-selected: #ffffff\\nsidebar-tab-background: \u003C\u003Ccolour tab-background>>\\nsidebar-tab-border-selected: \u003C\u003Ccolour tab-border-selected>>\\nsidebar-tab-border: \u003C\u003Ccolour tab-border>>\\nsidebar-tab-divider: \u003C\u003Ccolour tab-divider>>\\nsidebar-tab-foreground-selected: \u003C\u003Ccolour tab-foreground-selected>>\\nsidebar-tab-foreground: \u003C\u003Ccolour tab-foreground>>\\nsidebar-tiddler-link-foreground-hover: \u003C\u003Ccolour primary>>\\nsidebar-tiddler-link-foreground: \u003C\u003Ccolour tab-foreground>>\\nsite-title-foreground: #353748\\nstatic-alert-foreground: #aaaaaa\\ntab-background-selected: #ffffff\\ntab-background: #eeeeee\\ntab-border-selected: #cccccc\\ntab-border: #cccccc\\ntab-divider: #d8d8d8\\ntab-foreground-selected: \u003C\u003Ccolour foreground>>\\ntab-foreground: #888888\\ntable-border: #dddddd\\ntable-footer-background: #a8a8a8\\ntable-header-background: #f0f0f0\\ntag-background: #ffeedd\\ntag-foreground: #000\\ntiddler-background: \u003C\u003Ccolour background>>\\ntiddler-border: #ddd\\ntiddler-controls-foreground-hover: #888888;\\ntiddler-controls-foreground-selected: #888888;\\ntiddler-controls-foreground: #cccccc\\ntiddler-editor-background: \u003C\u003Ccolour background>>\\ntiddler-editor-border-image: #ffffff\\ntiddler-editor-border: rgba(0,0,0,.2)\\ntiddler-editor-fields-even: #e0e8e0\\ntiddler-editor-fields-odd: #f0f4f0\\ntiddler-info-background: #f8f8f8\\ntiddler-info-border: #dddddd\\ntiddler-info-tab-background: #f8f8f8\\ntiddler-link-background: \u003C\u003Ccolour background>>\\ntiddler-link-foreground: \u003C\u003Ccolour primary>>\\ntiddler-subtitle-foreground: #aaaaaa\\ntiddler-title-foreground: #333\\ntoolbar-new-button:\\ntoolbar-options-button:\\ntoolbar-save-button:\\ntoolbar-info-button:\\ntoolbar-edit-button:\\ntoolbar-close-button:\\ntoolbar-delete-button:\\ntoolbar-cancel-button:\\ntoolbar-done-button:\\nuntagged-background: #999999\\nvery-muted-foreground: #888888\\n\",\n \"type\": \"application/x-tiddler-dictionary\",\n \"description\": \"A grey color palette for Notebook\",\n \"name\": \"Notebook Grey\",\n \"tags\": \"$:/tags/Palette $:/tags/notebook/Palette\"\n },\n \"$:/themes/nico/notebook/settings/codefontfamily\": {\n \"title\": \"$:/themes/nico/notebook/settings/codefontfamily\",\n \"created\": \"20210101213404232\",\n \"modified\": \"20210101214210227\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\"Fira Mono\\\",\\\"Liberation Mono\\\",Menlo,Courier,monospace\\n\"\n },\n \"$:/themes/nico/notebook/settings/fontfamily\": {\n \"title\": \"$:/themes/nico/notebook/settings/fontfamily\",\n \"created\": \"20210101213404232\",\n \"modified\": \"20210101213411800\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\"Segoe UI\\\",Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\",\\\"Segoe UI Symbol\\\"\\n\"\n },\n \"$:/themes/nico/notebook/shortcuts/notebook-focus-search\": {\n \"title\": \"$:/themes/nico/notebook/shortcuts/notebook-focus-search\",\n \"created\": \"20201210122048919\",\n \"key\": \"((notebook-focus-search))\",\n \"modified\": \"20210115130024907\",\n \"tags\": \"$:/tags/KeyboardShortcut\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003C$action-sendmessage $message=\\\"tm-focus-selector\\\" $param=\\\".nc-topbar input\\\"/>\\n\"\n },\n \"$:/themes/nico/notebook/shortcuts/toggle-sidebar\": {\n \"title\": \"$:/themes/nico/notebook/shortcuts/toggle-sidebar\",\n \"created\": \"20210115130000707\",\n \"key\": \"((toggle-sidebar))\",\n \"modified\": \"20210115130021883\",\n \"tags\": \"$:/tags/KeyboardShortcut\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003C$list\\n filter=\\\"[[$:/state/notebook-sidebar]is[missing]] [{$:/state/notebook-sidebar}removeprefix[yes]]\\\"\\n emptyMessage=\\\"\\\"\\\"\u003C$action-setfield $tiddler=\\\"$:/state/notebook-sidebar\\\" text=\\\"yes\\\"/>\\\"\\\"\\\"\\n>\\n \u003C$action-setfield $tiddler=\\\"$:/state/notebook-sidebar\\\" text=\\\"no\\\"/>\\n\u003C/$list>\\n\"\n },\n \"$:/themes/nico/notebook/stickytitles\": {\n \"title\": \"$:/themes/nico/notebook/stickytitles\",\n \"created\": \"20201217172915960\",\n \"modified\": \"20201217180034682\",\n \"tags\": \"$:/tags/Stylesheet\",\n \"text\": \"\u003C$reveal state=\\\"$:/themes/nico/notebook/options/stickytitles\\\" type=\\\"match\\\" text=\\\"yes\\\">\\n\\n.tc-tiddler-title {\\n position: -webkit-sticky;\\n position: -moz-sticky;\\n position: -o-sticky;\\n position: -ms-sticky;\\n position: sticky;\\n top: {{$:/themes/nico/notebook/metrics/topbar-height}};\\n background: \u003C\u003Ccolour tiddler-background>>;\\n z-index: 500;\\n}\\n\\n@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {\\n .tc-tiddler-title {\\n top: 0;\\n }\\n}\\n\\n\u003C$list filter=\\\"[range[100]]\\\">\\n`.tc-story-river .tc-tiddler-frame:nth-child(100n+`\u003C$text text=\u003C\u003CcurrentTiddler>>/>`) {\\nz-index: `\u003C$text text={{{ [[200]subtract\u003CcurrentTiddler>] }}}/>`;\\n}\\n`\\n\u003C/$list>\\n\u003C/$reveal>\\n\"\n },\n \"$:/themes/nico/notebook/tags/Sidebar\": {\n \"title\": \"$:/themes/nico/notebook/tags/Sidebar\",\n \"created\": \"20200429164516951\",\n \"list\": \"$:/themes/nico/notebook/ui/Buttons/menu $:/themes/nico/notebook/ui/Sidebar/Headings $:/themes/nico/notebook/ui/Sidebar/Search $:/themes/nico/notebook/Sidebar/Sections\",\n \"modified\": \"20201210205606504\",\n \"type\": \"text/vnd.tiddlywiki\"\n },\n \"$:/themes/nico/notebook/tags/SidebarSection\": {\n \"title\": \"$:/themes/nico/notebook/tags/SidebarSection\",\n \"created\": \"20200429201017275\",\n \"list\": \"$:/themes/nico/notebook/ui/Sidebar/Open $:/themes/nico/notebook/ui/Sidebar/Recent $:/themes/nico/notebook/ui/Sidebar/Tools $:/themes/nico/notebook/ui/Sidebar/More\",\n \"modified\": \"20201210215658901\",\n \"type\": \"text/vnd.tiddlywiki\"\n },\n \"$:/themes/nico/notebook/ui/Bottombar\": {\n \"title\": \"$:/themes/nico/notebook/ui/Bottombar\",\n \"created\": \"20200429113453340\",\n \"modified\": \"20201210210230886\",\n \"tags\": \"$:/tags/PageTemplate\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003C$reveal state=\\\"$:/state/notebook-bottombar\\\" type=\\\"match\\\" text=\\\"yes\\\" default=\\\"yes\\\" retain=\\\"yes\\\" animate=\\\"yes\\\">\\n \u003Cdiv class=\\\"nc-bar nc-bottombar\\\">\\n \u003C$list filter=\\\"[all[shadows+tiddlers]tag[$:/tags/NotebookTopbar]!has[draft.of]]\\\" variable=\\\"listItem\\\">\\n \u003C$reveal type=\\\"nomatch\\\" state=\u003C\u003Cconfig-title>> text=\\\"hide\\\" tag=\\\"div\\\">\\n \u003C$transclude tiddler=\u003C\u003ClistItem>> mode=\\\"block\\\"/>\\n \u003C/$reveal>\\n \u003C/$list>\\n \u003Cdiv class=\\\"left\\\">\\n {{$:/themes/nico/notebook/ui/Buttons/menu}}\\n \u003C/div>\\n \u003Cdiv class=\\\"right\\\">\\n {{$:/core/ui/SideBarSegments/page-controls}}\\n \u003C/div>\\n \u003C/div>\\n\u003C/$reveal>\\n\\n\"\n },\n \"$:/themes/nico/notebook/ui/Buttons/SwitchPalette\": {\n \"title\": \"$:/themes/nico/notebook/ui/Buttons/SwitchPalette\",\n \"created\": \"20201210171047824\",\n \"description\": \"Toggle between grey/beige colour palette\",\n \"modified\": \"20210118213335643\",\n \"tags\": \"$:/tags/PageControls\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Cspan class=\\\"desktop-only\\\">\\n \u003C$vars\\n palettes=\\\"[all[tiddlers+shadows]tag[$:/tags/notebook/Palette]]\\\"\\n popupTiddler=\u003C\u003Cqualify \\\"$:/state/notebook/palette-dropdown\\\">>\\n >\\n \u003C$button\\n popup=\u003C\u003CpopupTiddler>>\\n tooltip=\\\"Switch colours\\\"\\n aria-label=\\\"Switch colours\\\"\\n class=\u003C\u003Ctv-config-toolbar-class>>\\n >\\n \u003C$list filter=\\\"[\u003Ctv-config-toolbar-icons>match[yes]]\\\">\\n\\t{{$:/themes/nico/notebook/images/color-switch}}\\n \u003C/$list>\\n\\n \u003C$list filter=\\\"[\u003Ctv-config-toolbar-text>match[yes]]\\\">\\n\\t\u003Cspan class=\\\"tc-btn-text\\\">Switch colours\u003C/span>\\n \u003C/$list>\\n\\n \u003C$reveal state=\u003C\u003CpopupTiddler>> type=\\\"popup\\\" position=\\\"belowleft\\\" class=\\\"tc-drop-down\\\">\\n\\t\u003C$list filter=\u003C\u003Cpalettes>>>\\n\\t \u003C$button class=\\\"tc-btn-invisible\\\">\\n\\t {{!!name}}\\n\\t \u003C$action-setfield $tiddler=\\\"$:/palette\\\" text={{!!title}}/>\\n\\t \u003C/$button>\\n\\t\u003C/$list>\\n \u003C/$reveal>\\n\\n \u003C/$button>\\n \u003C/$vars>\\n\u003C/span>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Buttons/menu\": {\n \"title\": \"$:/themes/nico/notebook/ui/Buttons/menu\",\n \"created\": \"20200429115248943\",\n \"modified\": \"20210124211756417\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003C$reveal state=\\\"$:/state/notebook-sidebar\\\" type=\\\"match\\\" text=\\\"yes\\\" default=\\\"no\\\" retain=\\\"yes\\\" animate=\\\"no\\\">\\n \u003C$button set=\\\"$:/state/notebook-sidebar\\\" setTo=\\\"no\\\" tooltip=\\\"Toggle menu\\\" class=\\\"tc-btn-invisible sidebar-toggle open\\\">\\n {{$:/themes/nico/notebook/images/bars}}\\n \u003C/$button>\\n\u003C/$reveal>\\n\\n\u003C$reveal type=\\\"nomatch\\\" state=\\\"$:/state/notebook-sidebar\\\" text=\\\"yes\\\">\\n \u003C$button set=\\\"$:/state/notebook-sidebar\\\" setTo=\\\"yes\\\" tooltip=\\\"Toggle menu\\\" class=\\\"tc-btn-invisible sidebar-toggle\\\">\\n {{$:/themes/nico/notebook/images/bars}}\\n \u003C/$button>\\n\u003C/$reveal>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Search\": {\n \"title\": \"$:/themes/nico/notebook/ui/Search\",\n \"created\": \"20200429191943257\",\n \"modified\": \"20210126170723413\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\\define advanced-search-actions()\\n\u003C$action-setfield $tiddler=\\\"$:/temp/advancedsearch/input\\\" text={{$:/temp/notebook-search}}/>\\n\u003C$action-setfield $tiddler=\\\"$:/temp/advancedsearch/refresh\\\" text=\\\"yes\\\"/>\\n\u003C$action-navigate $to=\\\"$:/AdvancedSearch\\\"/>\\n\\\\end\\n\\n\\\\define input-accept-actions()\\n\u003C$list filter=\\\"[\u003C__tiddler__>get[text]!is[missing]] ~[\u003C__tiddler__>get[text]is[shadow]]\\\">\\n \u003C$action-navigate $to={{{ [\u003C__tiddler__>get[text]] }}}/>\\n \u003C$action-deletetiddler $filter=\\\"[[$:/temp/search]] [\u003CsearchTiddler>] [\u003CsearchListState>]\\\"/>\\n\u003C/$list>\\n\\\\end\\n\\n\\\\define cancel-search-actions()\\n\u003C$list filter=\\\"[\u003CsearchTiddler>get[text]!match{$:/temp/search}]\\\" emptyMessage=\\\"\\\"\\\"\u003C$action-deletetiddler $filter=\\\"[[$:/temp/search]] [\u003CsearchTiddler>] [\u003CsearchListState>]\\\"/>\\\"\\\"\\\">\\n \u003C$action-setfield $tiddler=\\\"$:/temp/search\\\" text={{{ [\u003CsearchTiddler>get[text]] }}}/>\\n \u003C$action-setfield $tiddler=\\\"$:/temp/search/refresh\\\" text=\\\"yes\\\"/>\u003C/$list>\\n\\\\end\\n\\n\u003C$vars editTiddler=\\\"$:/temp/search\\\"\\n searchTiddler=\\\"$:/temp/search/input\\\"\\n searchListState=\u003C\u003Cqualify \\\"$:/state/search-list/selected-item\\\">>>\\n \u003C$macrocall $name=\\\"keyboard-driven-input\\\"\\n\\t tiddler=\u003C\u003CeditTiddler>>\\n\\t storeTitle=\u003C\u003CsearchTiddler>>\\n\\t selectionStateTitle=\u003C\u003CsearchListState>>\\n\\t refreshTitle=\\\"$:/temp/search/refresh\\\"\\n\\t type=\\\"search\\\"\\n\\t tag=\\\"input\\\"\\n\\t focus={{$:/config/Search/AutoFocus}}\\n\\t focusPopup=\\\"$:/state/popup/notebook-search\\\"\\n\\t class=\\\"tc-popup-handle\\\"\\n\\t filterMinLength={{$:/config/Search/MinLength}}\\n\\t placeholder=\\\"Search...\\\"\\n\\t inputAcceptActions=\u003C\u003Cinput-accept-actions>>\\n\\t inputCancelActions=\u003C\u003Ccancel-search-actions>>\\n\\t cancelPopups=\\\"yes\\\"\\n\\t configTiddlerFilter=\\\"[[$:/state/search/currentTab]!is[missing]get[text]] ~[{$:/config/SearchResults/Default}]\\\"\\n\\t />\\n \u003C$button\\n tooltip={{$:/language/Buttons/AdvancedSearch/Hint}}\\n aria-label={{$:/language/Buttons/AdvancedSearch/Caption}}\\n class=\\\"tc-btn-invisible tc-page-controls\\\"\\n >\\n {{$:/core/images/advanced-search-button}}\\n \u003C\u003Cadvanced-search-actions>>\\n \u003C/$button>\\n \u003C$reveal tag=\\\"div\\\" class=\\\"tc-block-dropdown-wrapper\\\" state=\\\"$:/state/popup/notebook-search\\\" type=\\\"nomatch\\\" text=\\\"\\\" default=\\\"\\\">\\n \u003C$list filter=\\\"[\u003CsearchTiddler>get[text]minlength{$:/config/Search/MinLength}limit[1]]\\\" emptyMessage=\\\"\\\" variable=\\\"listItem\\\">\\n \u003Cdiv class=\\\"tc-block-dropdown tc-search-drop-down\\\">\\n \u003C$tiddler tiddler=\u003C\u003CconfigTiddler>>>\\n {{$:/themes/nico/notebook/ui/Sidebar/SearchResults}}\\n \u003C/$tiddler>\\n \u003C/div>\\n \u003C/$list>\\n \u003C/$reveal>\\n\u003C/$vars>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Sidebar/Headings\": {\n \"title\": \"$:/themes/nico/notebook/ui/Sidebar/Headings\",\n \"created\": \"20200429160014174\",\n \"modified\": \"20201210210231267\",\n \"tags\": \"$:/themes/nico/notebook/tags/Sidebar\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Cdiv class=\\\"segment\\\">\\n \u003Cdiv class=\\\"content\\\">\\n \u003Ch1 class=\\\"tc-site-title\\\">\\n {{$:/SiteTitle}}\\n \u003C/h1>\\n \u003Cdiv class=\\\"tc-site-subtitle\\\">\\n {{$:/SiteSubtitle}}\\n \u003C/div>\\n \u003C/div>\\n\u003C/div>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Sidebar/Search\": {\n \"title\": \"$:/themes/nico/notebook/ui/Sidebar/Search\",\n \"created\": \"20200429191943257\",\n \"modified\": \"20210124220152702\",\n \"tags\": \"$:/themes/nico/notebook/tags/Sidebar\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003Cdiv class=\\\"mobile-only\\\">\\n \u003Cdiv class=\\\"segment\\\">\\n \u003Cdiv class=\\\"content search\\\">\\n {{$:/themes/nico/notebook/ui/Search}}\\n \u003C/div>\\n \u003C/div>\\n\u003C/div>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Sidebar/SearchResults\": {\n \"title\": \"$:/themes/nico/notebook/ui/Sidebar/SearchResults\",\n \"created\": \"20200429191943257\",\n \"modified\": \"20210126164631418\",\n \"tags\": \"\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\\define searchResultList()\\n \u003Csmall>{{$:/language/Search/Matches/Title}}\u003C/small>\\n\\n \u003C$list filter=\\\"[!is[system]search:title{$(searchTiddler)$}sort[title]limit[250]]\\\">\\n \u003Cspan class={{{[\u003CcurrentTiddler>addsuffix[-primaryList]] -[\u003CsearchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>\\n \u003C$transclude tiddler=\\\"$:/core/ui/ListItemTemplate\\\"/>\\n \u003C/span>\\n \u003C/$list>\\n\\n \u003Csmall>{{$:/language/Search/Matches/All}}\u003C/small>\\n\\n \u003C$list filter=\\\"[!is[system]search{$(searchTiddler)$}sort[title]limit[250]]\\\">\\n \u003Cspan class={{{[\u003CcurrentTiddler>addsuffix[-secondaryList]] -[\u003CsearchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>\\n \u003C$transclude tiddler=\\\"$:/core/ui/ListItemTemplate\\\"/>\\n \u003C/span>\\n \u003C/$list>\\n\\\\end\\n\\n\u003Cdiv class=\\\"tc-search-results\\\">\\n \u003C\u003CsearchResultList>>\\n\u003C/div>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Sidebar/SectionTemplate\": {\n \"title\": \"$:/themes/nico/notebook/ui/Sidebar/SectionTemplate\",\n \"created\": \"20200429161226897\",\n \"modified\": \"20210202213859460\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\\define sidebarHeading()\\n\u003C$vars tv-wikilinks=\\\"no\\\">\\n \u003C$transclude field=\\\"caption\\\">\\n \u003C$view field=\\\"title\\\"/>\\n \u003C/$transclude>\\n\u003C/$vars>\\n\\\\end\\n\\n\u003C$reveal state=\\\"$:/state/notebook-sidebar-section\\\" type=\\\"match\\\" text=\u003C\u003CcurrentTiddler>> default=\\\"no\\\" animate=\\\"no\\\">\\n \u003Cdiv class=\\\"segment section open\\\">\\n \u003C$button set=\\\"$:/state/notebook-sidebar-section\\\" setTo=\\\"\\\" class=\\\"tc-btn-invisible label\\\">\\n \u003C\u003CsidebarHeading>>\\n \u003Cspan class=\\\"caret\\\">{{$:/themes/nico/notebook/images/caret-down}}\u003C/span>\\n \u003C/$button>\\n \u003Cdiv class=\\\"content\\\">\\n \u003C$transclude $tiddler=\u003C\u003CcurrentTiddler>> mode=\\\"block\\\"/>\\n \u003C/div>\\n \u003C/div>\\n\u003C/$reveal>\\n\u003C$reveal state=\\\"$:/state/notebook-sidebar-section\\\" type=\\\"nomatch\\\" text=\u003C\u003CcurrentTiddler>> default=\\\"yes\\\" animate=\\\"no\\\">\\n \u003Cdiv class=\\\"segment section\\\">\\n \u003C$button set=\\\"$:/state/notebook-sidebar-section\\\" setTo=\u003C\u003CcurrentTiddler>> class=\\\"tc-btn-invisible label\\\">\\n \u003C\u003CsidebarHeading>>\\n \u003Cspan class=\\\"caret\\\">{{$:/themes/nico/notebook/images/caret-right}}\u003C/span>\\n \u003C/$button>\\n \u003C/div>\\n\u003C/$reveal>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Sidebar/Sections\": {\n \"title\": \"$:/themes/nico/notebook/ui/Sidebar/Sections\",\n \"created\": \"20200429163239707\",\n \"modified\": \"20210112213620486\",\n \"tags\": \"$:/themes/nico/notebook/tags/Sidebar\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003C$list filter=\\\"[all[shadows+tiddlers]!has[draft.of]tag[$:/tags/SideBar]]\\\">\\n {{||$:/themes/nico/notebook/ui/Sidebar/SectionTemplate}}\\n\u003C/$list>\\n\"\n },\n \"$:/themes/nico/notebook/ui/Sidebar\": {\n \"title\": \"$:/themes/nico/notebook/ui/Sidebar\",\n \"created\": \"20200428201218885\",\n \"modified\": \"20210112213605486\",\n \"tags\": \"$:/tags/PageTemplate\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\\\\whitespace trim\\n\\\\define config-title()\\n$:/config/SideBarSegments/Visibility/$(listItem)$\\n\\\\end\\n\\n\u003C$reveal state=\\\"$:/state/notebook-sidebar\\\" type=\\\"match\\\" text=\\\"yes\\\" default=\\\"no\\\" retain=\\\"yes\\\" animate=\\\"no\\\">\\n \u003C$scrollable fallthrough=\\\"no\\\">\\n \u003Cdiv class=\\\"nc-sidebar\\\">\\n \u003C$list filter=\\\"[all[shadows+tiddlers]tag[$:/themes/nico/notebook/tags/Sidebar]!has[draft.of]]\\\" variable=\\\"listItem\\\">\\n \u003C$reveal type=\\\"nomatch\\\" state=\u003C\u003Cconfig-title>> text=\\\"hide\\\" tag=\\\"div\\\">\\n \u003C$transclude tiddler=\u003C\u003ClistItem>> mode=\\\"inline\\\"/>\\n \u003C/$reveal>\\n \u003C/$list>\\n \u003C/div>\\n \u003C/$scrollable>\\n\u003C/$reveal>\\n\\n\"\n },\n \"$:/themes/nico/notebook/ui/Topbar\": {\n \"title\": \"$:/themes/nico/notebook/ui/Topbar\",\n \"created\": \"20200428203101797\",\n \"modified\": \"20210124213834458\",\n \"tags\": \"$:/tags/PageTemplate\",\n \"type\": \"text/vnd.tiddlywiki\",\n \"text\": \"\u003C$reveal state=\\\"$:/state/notebook-topbar\\\" type=\\\"match\\\" text=\\\"yes\\\" default=\\\"yes\\\" retain=\\\"yes\\\" animate=\\\"yes\\\">\\n \u003Cdiv class=\\\"nc-topbar-wrapper\\\">\\n \u003Cdiv class=\\\"nc-bar nc-topbar tc-adjust-top-of-scroll\\\">\\n \u003C$list filter=\\\"[all[shadows+tiddlers]tag[$:/tags/NotebookTopbar]!has[draft.of]]\\\" variable=\\\"listItem\\\">\\n \u003C$reveal type=\\\"nomatch\\\" state=\u003C\u003Cconfig-title>> text=\\\"hide\\\" tag=\\\"div\\\">\\n \u003C$transclude tiddler=\u003C\u003ClistItem>> mode=\\\"block\\\"/>\\n \u003C/$reveal>\\n \u003C/$list>\\n \u003Cdiv class=\\\"left\\\">\\n\\t{{$:/themes/nico/notebook/ui/Buttons/menu}}\\n {{$:/themes/nico/notebook/ui/Search}}\\n \u003C/div>\\n \u003Cdiv class=\\\"right\\\">\\n {{$:/core/ui/SideBarSegments/page-controls}}\\n \u003C/div>\\n \u003C/div>\\n \u003C/div>\\n\u003C/$reveal>\\n\\n\"\n }\n }\n}","bag":"default","revision":"0","version":"1.4.1","type":"application/json","title":"$:/themes/nico/notebook","source":"https://github.com/NicolasPetton/Notebook","plugin-type":"theme","name":"Notebook theme","list":"LICENSE changelog","description":"A clean, uncluttered TiddlyWiki theme","dependents":"$:/themes/tiddlywiki/vanilla $:/plugins/nico/notebook-mobile","core-version":">=5.1.22","author":"NicolasPetton","modified":"20240627123010609"}, {"created":"20200429144554294","title":"$:/themes/nico/notebook/metrics/sidebar-width","modified":"20230423163514560","tags":"","type":"text/vnd.tiddlywiki","text":"300px"}, @@ -1228,7 +1231,7 @@ button.sidebar-toggle{ {"created":"20250905132936742","text":"There are loads of 3D editors and 3D file formats out there.\u003Cbr>\nFor maximum interoperability the [glTF](https://khronos.org/glTF) (`.glb` and `.gltf`) is suggested as fileformat.\u003Cbr>\nFor editors the following [FOSS](https://wikipedia.org/FOSS) (free) 3D editors are suggested for importing/exporting glTF files:\n\u003Cbr>\n* [ThreeJS editor](https://threejs.org/editor/) #web\n* [Blender](https://blender.org) #desktop\n* [Godot](https://godot.org) #desktop #web \n","tags":"howto","title":"Edit a 3D scene file","modified":"20250905133331695","type":"text/markdown"}, {"created":"20240223092012710","text":"> **NOTE**: Embedding is only possible via user-interactions. This is to ensure portable 3D scenes.\n\nCreate an empty mesh object (in Blender it's called an 'Empty') and add an [[href]] with a value prefixed with optionally a [[#!]] (toggle) or [[#*]] (multiply)\n\n* `href`: `#!menu` (teleports object 'menu' in front of user)\n* `href`: `#*cube` (duplicates object 'cube' in front of user)\n* `href`: `https://foo.com/menu.glb` (imports menu in front of user (*))\n* `href`: `https://foo.com/menu.glb#bar` (imports object bar in front of user (*))\n\n> * = when file contains 0 [[href]]'s and 0 sidecar-files (see [[๐Ÿ“œ level0: File]])\n\nThe best practice is to show a lowpoly preview-version, or image-texture of the embedded object/file.\nThis hints the user what to expect.\u003Cbr>\n\n> NOTE: the [[src]] attribute has been ''deprecated'' as it can lead to ","tags":"","title":"embed a 3D object","modified":"20250920083647683"}, {"created":"20240722085406030","text":"Since 2020, Next Generation Internet (NGI) programmes, part of European Commission's Horizon programme, fund free software in Europe using a cascade funding mechanism (see for example NLnet's calls). This year, according to the Horizon Europe working draft detailing funding programmes for 2025, we notice that Next Generation Internet is not mentioned any more as part of Cluster 4.\n\nNGI programmes have shown their strength and importance to support the European software infrastructure, as a generic funding instrument to fund digital commons and ensure their long-term sustainability. We find this transformation incomprehensible, moreover when NGI has proven efficient and ecomomical to support free software as a whole, from the smallest to the most established initiatives. This ecosystem diversity backs the strength of European technological innovation, and maintaining the NGI initiative to provide structural support to software projects at the heart of worldwide innovation is key to enforce the sovereignty of a European infrastructure.\nContrary to common perception, technical innovations often originate from European rather than North American programming communities, and are mostly initiated by small-scaled organizations.\n\nPrevious Cluster 4 allocated 27 millions euros to:\n\n \"Human centric Internet aligned with values and principles commonly shared in Europe\" ;\n \"A flourishing internet, based on common building blocks created within NGI, that enables better control of our digital life\" ;\n \"A structured eco-system of talented contributors driving the creation of new internet commons and the evolution of existing internet commons\" .\n\nIn the name of these challenges, more than 500 projects received NGI funding in the first 5 years, backed by 18 organisations managing these European funding consortia.\n\nNGI contributes to a vast ecosystem, as most of its budget is allocated to fund third parties by the means of open calls, to structure commons that cover the whole Internet scope - from hardware to application, operating systems, digital identities or data traffic supervision. This third-party funding is not renewed in the current program, leaving many projects short on resources for research and innovation in Europe.\n\nMoreover, NGI allows exchanges and collaborations across all the Euro zone countries as well as \"widening countries\"ยน, currently both a success and and an ongoing progress, likewise the Erasmus programme before us. NGI also contributes to opening and supporting longer relationships than strict project funding does. It encourages to implement projects funded as pilots, backing collaboration, identification and reuse of common elements across projects, interoperability in identification systems and beyond, and setting up development models that mix diverse scales and types of European funding schemes.\n\nWhile the USA, China or Russia deploy huge public and private resources to develop software and infrastructure that massively capture private consumer data, the EU can't afford this renunciation.\nFree and open source software, as supported by NGI since 2020, is by design the opposite of potential vectors for foreign interference. It lets us keep our data local and favors a community-wide economy and know-how, while allowing an international collaboration.\nThis is all the more essential in the current geopolitical context: the challenge of technological sovereignty is central, and free software allows to address it while acting for peace and sovereignty in the digital world as a whole.\n\nLโ€™Union Europรฉenne doit poursuivre le financement des logiciels libres\nDepuis 2020, les programmes Next Generation Internet (NGI), sous-branche du programme Horizon Europe de la Commission Europรฉenne financent en cascade (via les appels de NLnet) le logiciel libre en Europe. Cette annรฉe, ร  la lecture du brouillon du Programme de Travail de Horizon Europe dรฉtaillant les programmes de financement de la commission europรฉenne pour 2025, nous nous apercevons que les programmes Next Generation Internet ne sont plus mentionnรฉs dans le Cluster 4.\n\nLes programmes NGI ont dรฉmontrรฉ leur force et leur importance dans le soutien ร  lโ€™infrastructure logicielle europรฉenne, formant un instrument gรฉnรฉrique de financement des communs numรฉriques qui doivent รชtre rendus accessibles dans la durรฉe. Nous sommes dans lโ€™incomprรฉhension face ร  cette transformation, dโ€™autant plus que le fonctionnement de NGI est efficace et รฉconomique puisquโ€™il soutient lโ€™ensemble des projets de logiciel libre des plus petites initiatives aux mieux assises. La diversitรฉ de cet รฉcosystรจme fait la grande force de lโ€™innovation technologique europรฉenne et le maintien de lโ€™initiative NGI pour former un soutien structurel ร  ces projets logiciels, qui sont au cล“ur de lโ€™innovation mondiale, permet de garantir la souverainetรฉ dโ€™une infrastructure europรฉenne. Contrairement ร  la perception courante, les innovations techniques sont issues des communautรฉs de programmeurs europรฉens plutรดt que nord-amรฉricains, et le plus souvent issues de structures de taille rรฉduite.\n\nLe Cluster 4 allouait 27 millions dโ€™euros au service de :\n\n ยซ Human centric Internet aligned with values and principles commonly shared in Europe ยป ;\n ยซ A flourishing internet, based on common building blocks created within NGI, that enables better control of our digital life ยป ;\n ยซ A structured eco-system of talented contributors driving the creation of new internet commons and the evolution of existing internet commonยซ .\n\nAu nom de ces enjeux, ce sont plus de 500 projets qui ont reรงu un financement NGI0 dans les 5 premiรจres annรฉes dโ€™exercice, ainsi que plus de 18 organisations collaborant ร  faire vivre ces consortia europรฉens.\n\nNGI contribue ร  un vaste รฉcosystรจme puisque la plupart du budget est dรฉvolue au financement de tierces parties par le biais des appels ouverts (open calls). Ils structurent des communs qui recouvrent lโ€™ensemble de lโ€™Internet, du matรฉriel aux applications dโ€™intรฉgration verticale en passant par la virtualisation, les protocoles, les systรจmes dโ€™exploitation, les identitรฉs รฉlectroniques ou la supervision du trafic de donnรฉes. Ce financement des tierces parties nโ€™est pas renouvelรฉ dans le programme actuel, ce qui laissera de nombreux projets sans ressources adรฉquates pour la recherche et lโ€™innovation en Europe.\n\nPar ailleurs, NGI permet des รฉchanges et des collaborations ร  travers tous les pays de la zone euro et aussi avec ceux des widening countriesยน, ce qui est actuellement une rรฉussite tout autant quโ€™un progrรจs en cours, comme le fut le programme Erasmus avant nous. NGI0 est aussi une initiative qui participe ร  lโ€™ouverture et ร  lโ€™entretien de relation sur un temps plus long que les financements de projets. NGI encourage รฉgalement ร  lโ€™implรฉmentation des projets financรฉs par le biais de pilotes, et soutient la collaboration au sein des initiatives, ainsi que lโ€™identification et la rรฉutilisation dโ€™รฉlรฉments communs au travers des projets, lโ€™interopรฉrabilitรฉ notamment des systรจmes dโ€™identification, et la mise en place de modรจles de dรฉveloppement intรฉgrant les autres sources de financements aux diffรฉrentes รฉchelles en Europe.\n\nAlors que les ร‰tats-Unis dโ€™Amรฉrique, la Chine ou la Russie dรฉploient des moyens publics et privรฉs colossaux pour dรฉvelopper des logiciels et infrastructures captant massivement les donnรฉes des consommateurs, lโ€™Union Europรฉenne ne peut pas se permettre ce renoncement. Les logiciels libres et open source tels que soutenus par les projets NGI depuis 2020 sont, par construction, ร  lโ€™opposรฉe des potentiels vecteurs dโ€™ingรฉrence รฉtrangรจre. Ils permettent de conserver localement les donnรฉes et de favoriser une รฉconomie et des savoirs-faire ร  lโ€™รฉchelle communautaire, tout en permettant ร  la fois une collaboration internationale. Ceci est dโ€™autant plus indispensable dans le contexte gรฉopolitique que nous connaissons actuellement. Lโ€™enjeu de la souverainetรฉ technologique y est prรฉpondรฉrant et le logiciel libre permet dโ€™y rรฉpondre sans renier la nรฉcessitรฉ dโ€™ล“uvrer pour la paix et la citoyennetรฉ dans lโ€™ensemble du monde numรฉrique.\n\nDans ces perspectives, nous vous demandons urgemment de rรฉclamer la prรฉservation du programme NGI dans le programme de financement 2025.\n\nยน Tels que dรฉfinis par Horizon Europe, les ร‰tats Membres รฉlargis sont la Bulgarie, la Croatie, Chypre, la Rรฉpublique Tchรจque, lโ€™Estonie, la Grรจce, la Hongrie, la Lettonie, la Lituanie, Malte, la Pologne, le Portugal, la Roumanie, la Slovaquie et la Slovรฉnie. Les pays associรฉs รฉlargies (sous conditions dโ€™un accord dโ€™association) lโ€™Albanie, lโ€™Armรฉnie, la Bosnie Herzรฉgovine, les Iles Fรฉroรฉ, la Gรฉorgie, le Kosovo, la Moldavie, le Montรฉnรฉgro, le Maroc, la Macรฉdoine du Nord, la Serbie, la Tunisie, la Turquie et lโ€™Ukraine. Les rรฉgions รฉlargies dโ€™outre-mer sont : la Guadeloupe, la Guyane Franรงaise, la Martinique, La Rรฉunion, Mayotte, Saint-Martin, Les Aรงores, Madรจre, les Iles Canaries.\nIn this perpective, we urge you to claim for preserving the NGI programme as part of the 2025 funding programme.\n\nยน As defined by Horizon Europe, widening Member States are Bulgaria, Croatia, Cyprus, the Czech Republic, Estonia, Greece, Hungary, Latvia, Lituania, Malta, Poland, Portugal, Romania, Slovakia and Slovenia. Widening associated countries (under condition of an association agreement) include Albania, Armenia, Bosnia, Feroe Islands, Georgia, Kosovo, Moldavia, Montenegro, Morocco, North Macedonia, Serbia, Tunisia, Turkey and Ukraine. Widening overseas regions are : Guadeloupe, French Guyana, Martinique, Reunion Island, Mayotte, Saint-Martin, The Azores, Madeira, the Canary Islands.","tags":"","title":"EU keeps/stops funding FOSS?","modified":"20240722085846049","type":"text/markdown"}, -{"created":"20240624125444313","text":"\u003Cstyle type=\"text/css\">\n .examples img{\n\t border: 1px solid #CCC;\n\t\tborder-radius:6px;\n\t\tmargin: 20px 20px 20px 0px;\n\t\tdisplay:block;\n\t\twidth:100%;\n\t}\n\u003C/style>\n\n\u003Cdiv class=\"examples\">\n \u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/index.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>index.glb\u003C/b> kitchensink \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/example.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/example.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>example.glb\u003C/b> simple startingpoint \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/website.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/website.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>website.glb\u003C/b> website startingpoint \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"https://coderofsalvation.codeberg.page/xrfragment-elearning-templates/?https://coderofsalvation.codeberg.page/xrfragment-elearning-templates/index.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/elearning.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>elearning.glb\u003C/b> quiz startingpoint \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/telescopic.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/telescopic.png\"/>\n\t \u003C/a>\n\t\t\u003Cb>telescopic.glb\u003C/b> reveal via [[href]] + \u003Ca href=\"#๐ŸŽž%20Media%20Fragments\">media fragments\u003C/a>\n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/victory-garden-cdrom.glb#rot=0,180,0&pos=-2,0,-8\" target=\"_blank\">\n\t \u003Cimg src=\"https://codeberg.org/coderofsalvation/xrfragment.media/raw/commit/90256763ddbc7bf727a8597ac62152a1c2c62b98/images/mediafragments-cdrom.gif\"/>\n\t \u003C/a>\n\t\t\u003Cb>cdrom.glb\u003C/b> with animations controlled via [[href]] + \u003Ca href=\"#๐ŸŽž%20Media%20Fragments\">media fragments\u003C/a>\n\t\u003C/div>\t\t\n \u003Cdiv>\n \u003Ca href=\"example/aframe/xrsh\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/xrsh.jpg\"/>\n\t \u003C/a>\n\t\t\u003Ca href=\"https://xrsh.isvery.ninja\" target=\"_blank\">xrsh\u003C/a> overlay showing aria-descriptions + scene transcripts\n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"https://searxr.me\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/searxr.jpg\"/>\n\t \u003C/a>\n\t\t\u003Ca href=\"https://searxr.me\" target=\"_blank\">\u003Cb>searxr.me\u003C/b>\u003C/a> metasearch engine supporting XR Fragments\n\t\u003C/div>\t\n\u003C/div>","tags":"$:/tags/SideBar","title":"Examples","modified":"20250218134240827","list-before":"Reference"}, +{"created":"20240624125444313","text":"\u003Cstyle type=\"text/css\">\n .examples img{\n\t border: 1px solid #CCC;\n\t\tborder-radius:6px;\n\t\tmargin: 20px 20px 20px 0px;\n\t\tdisplay:block;\n\t\twidth:100%;\n\t}\n\u003C/style>\n\n\u003Cdiv class=\"examples\">\n \u003Cb>NOTE:\u003C/b> some examples were made during experimental stages of \u003Ca href=\"http://localhost:8080/doc/RFC_XR_Fragments.html\" target=\"_blank\">the spec\u003C/a>, they will be removed in the future.\n \u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/example.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/example.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>example.glb\u003C/b> simple startingpoint \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/website.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/website.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>website.glb\u003C/b> website startingpoint \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"https://coderofsalvation.codeberg.page/xrfragment-elearning-templates/?https://coderofsalvation.codeberg.page/xrfragment-elearning-templates/index.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/elearning.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>elearning.glb\u003C/b> quiz startingpoint \n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/telescopic.glb\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/telescopic.png\"/>\n\t \u003C/a>\n\t\t\u003Cb>telescopic.glb\u003C/b> reveal via [[href]] + \u003Ca href=\"#๐ŸŽž%20Media%20Fragments\">media fragments\u003C/a>\n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/index.glb.jpg\"/>\n\t \u003C/a>\n\t\t\u003Cb>index.glb\u003C/b> kitchensink (buggy WIP)\n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"example/aframe/sandbox?./../../assets/victory-garden-cdrom.glb#rot=0,180,0&pos=-2,0,-8\" target=\"_blank\">\n\t \u003Cimg src=\"https://codeberg.org/coderofsalvation/xrfragment.media/raw/commit/90256763ddbc7bf727a8597ac62152a1c2c62b98/images/mediafragments-cdrom.gif\"/>\n\t \u003C/a>\n\t\t\u003Cb>cdrom.glb\u003C/b> with animations controlled via [[href]] + \u003Ca href=\"#๐ŸŽž%20Media%20Fragments\">media fragments\u003C/a>\n\t\u003C/div>\t\t\n \u003Cdiv>\n \u003Ca href=\"example/aframe/xrsh\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/xrsh.jpg\"/>\n\t \u003C/a>\n\t\t\u003Ca href=\"https://xrsh.isvery.ninja\" target=\"_blank\">xrsh\u003C/a> overlay showing aria-descriptions + scene transcripts\n\t\u003C/div>\n\t\u003Cdiv>\n \u003Ca href=\"https://searxr.me\" target=\"_blank\">\n\t \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/searxr.jpg\"/>\n\t \u003C/a>\n\t\t\u003Ca href=\"https://searxr.me\" target=\"_blank\">\u003Cb>searxr.me\u003C/b>\u003C/a> metasearch engine supporting XR Fragments\n\t\u003C/div>\t\n\u003C/div>","tags":"$:/tags/SideBar","title":"Examples","modified":"20250925103536855","list-before":"Reference"}, {"title":"feedback.png","text":"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","type":"image/png"}, {"created":"20240619105321821","text":"3D Objects inside a 3D model can be referenced/shown/hidden via URI filters:\n\u003Cbr>\n\n\u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/filters.gif\" style=\"width:100%\"/>\n\nThis allows high re-usability of 3D modes for remote-, local- and recursive (embedded `src`) usecases:\n\u003Cbr>\u003Cbr>\n\n\u003Cpre>\n\u003Ccode>\n my.io/scene.usdz Embeddable as:\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n โ”‚ sky โ”‚ src: http://my.io/scene.udsz#sky (includes building,mainobject,floor)\n โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ โ”‚ \n โ”‚ โ”‚ building โ”‚ โ”‚ src: http://my.io/scene.udsz#building (includes mainobject,floor)\n โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ โ”‚ โ”‚\n โ”‚ โ”‚ โ”‚ mainobject โ”‚ โ”‚ โ”‚ src: http://my.io/scene.udsz#mainobject (includes floor)\n โ”‚ โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ โ”‚ โ”‚ โ”‚\n โ”‚ โ”‚ โ”‚ โ”‚ floor โ”‚ โ”‚ โ”‚ โ”‚ src: http://my.io/scene.udsz#floor (just floor object)\n โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ”‚\n โ”‚ โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ โ”‚ โ”‚ โ”‚ href: http://my.io/scene.udsz#-mainobject (hides mainobject when clicked)\n โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ โ”‚ โ”‚\n โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ โ”‚\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n\u003C/code>\n\u003C/pre>\n\nThe [[href]] and [[src]] documentation show various examples, but the full syntax is explained in the spec below.\u003Cbr>\nOn top of that, [[tagged objects]] allow using `tag` metadata to group objects to trigger grouped features\n\n\u003Ch2>What does \"&-interactions*\" do in the demo scene?\u003C/h2>\n\nThe scene-node (3D root) of the [[demo scene|example/assets/index.glb]] indeed contains (startup) [[#]] metadata (`#pos=start&rot=0,40,0&t=0&-interactions*`).\n\u003Cbr>\nIts hiding all 3D objects (and their children) which are tagged with 'interactions'.\u003Cbr>\nFor example: you can see all the menu-items in Blender, but not in the browser.\u003Cbr>\n\n* `&` is just a separator ('AND do the following:')\n* `-` means 'hide'\n* `interactions` selects all objects with name 'interactions' or tag: interactions metadata\n* `*` selects all objects inside those selected objects too (text-objects etc)\n\n> For more on syntax see the spec below\n\n\u003Cbr>\u003Cbr>\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#xr-fragment-filters\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\nFragment identifiers are derived from \u003Cb>metadata\u003C/b> inside the loaded 3D Model.\u003Cbr>More specific: \u003Cb>object-\u003C/b>, \u003Cb>material-\u003C/b>, and \u003Cb>camera-\u003C/b>names via a strategy called 'Fragment-to-metadata mapping':\n\n\u003Cbr>\u003Cbr>\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#fragment-to-metadata-mapping\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\n","tags":"[[๐Ÿงช experimental]]","title":"filters","modified":"20250902143004749"}, {"created":"20230808113746326","text":"Just get your hands on a 3D editor (see this [[๐Ÿ–ฅ Blender โœ…๐Ÿ”ฅ]] guide) and follow the steps in the video:\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/gettingstarted2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"https://matrix.to/#/#xrfragments:matrix.org\" target=\"_blank\" style=\"padding:10px 30px\">Join Matrix Community\u003C/a>\n\u003C/center>\n\nHere are various ways to create/test 3D files with XR Fragments:\n\n| ''scenario'' | ''how'' | ''notes'' |\n| easiest | see the [[๐Ÿ–ฅ Blender โœ…๐Ÿ”ฅ]] workflow using the \u003Ca href=\"/example/aframe/sandbox\" target=\"_blank\">Sandbox\u003C/a> on xrfragment.org | export 3D file (.glb) in \u003Ca href=\"https://blender.org\" target=\"_blank\">Blender\u003C/a>, after adding [[href]], [[src]] and [[tag]] \u003Cb>metadata\u003C/b> as \u003Ca href=\"https://docs.blender.org/manual/en/2.79/data_system/custom_properties.html\" target=\"_blank\">custom properties\u003C/a>, and load exported files into \u003Ca href=\"/example/aframe/sandbox\" target=\"_blank\">the sandbox\u003C/a> (see video above)|\n\n\u003Cbr>\n\n\u003Ch2>Developers\u003C/h2>\n\nFor developers wanting to integrate or build your own 3D hypermedia browser, the easiest is WebXR:\n\n\u003Ca href=\"example/aframe/sandbox\" target=\"_blank\">» View \u003Cb>index.glb\u003C/b> online\u003C/a> or \u003Ca href=\"index.glb\" target=\"_blank\">download \u003Cb>index.glb\u003C/b> and open\u003C/a> it in \u003Ca href=\"https://blender.org\" target=\"_blank\">Blender\u003C/a>.\u003Cbr>\n(developers can extend a 3D model viewer here \u003Ca href=\"https://codepen.io/coderofsalvation/pen/yLwedvX\" target=\"_blank\">this codepen\u003C/a>)\n\u003Cbr>\u003Cbr>\n\nBut there are also other approaches, as XR Fragments is not tied to any XR-technology or fileformat:\n\n| ''scenario'' | ''how'' | ''notes'' |\n| dev #godot | load the \u003Ca href=\"#%F0%9F%A7%B0%20GODOT\">example project\u003C/a> | |\n| dev #threejs #github #modular | fork \u003Ca href=\"https://github.com/coderofsalvation/xrfragment-three-helloworld\">xfragment-three-helloworld\u003C/a> | requires javascript- and \u003Ca href=\"https://threejs.org\" target=\"_blank\">threejs\u003C/a> developer-knowledge |\n| dev #polyglot | use the [[XR Fragment parser|https://github.com/coderofsalvation/xrfragment/tree/main/dist]] | lowlevel approach, more suitable for other scenarios |\n| dev #spec #browser | implement [[the spec|๐Ÿ“œ XR fragments]] yourself | the spec is simple: parse URL and iterate over a scene |\n| dev #aframe #github | hosted sandbox by \u003Ca href=\"https://github.com/coderofsalvation/xrfragment-helloworld\" target=\"_blank\">forking xrfragment-helloworld\u003C/a> | Basically #1 but it will be hosted for free at your own github URL |\n| dev #aframe #github #modular | fork \u003Ca href=\"https://github.com/coderofsalvation/xrfragment-aframe-helloworld\">xfragment-aframe-helloworld\u003C/a> | requires javascript- and \u003Ca href=\"https://aframe.io\" target=\"_blank\">aframe.io\u003C/a> developer-knowledge |\n\nNext to that, familiarize yourself with XR Fragments by checking these videos: \n\n1. \u003Ca href=\"https://github.com/coderofsalvation/xrfragment.media\" target=\"_blank\">All videos on github\u003C/a> (tip: star the repo)\u003Cbr>\n2. \u003Ca href=\"https://www.youtube.com/playlist?list=PLctjJGlTmeE64XPSQER2BSbjmqVGaWM4J\" target=\"_blank\">All videos on Youtube\u003C/a> (tip: subscribe or add to 'Watch-later' list)","tags":"Home","title":"Getting started","modified":"20250211170414759","type":"text/vnd.tiddlywiki","list-before":"Philosophy & FAQ"}, @@ -1236,7 +1239,7 @@ button.sidebar-toggle{ {"created":"20240924135721168","text":"XR Fragments is \u003Cb>not a\u003C/b> fileformat-specific extension, it's a spec for \u003Cb>deeplinking\u003C/b> any 3D file.\u003Cbr>\nThe level2 metadata (See reference) is easy to embed in any 3D editor (not only blender) than it would be to support new GLTF extensions.\u003Cbr>\nThis is not to say extensions are bad (they are superior in certain cases).\u003Cbr>\n\n> Just like URLs allow fileformat-agnostic navigation, 3D asset 'extras' are fileformat-agnostic too, which together allow for XR Fragments.\n\n# How to deal with overlapping functionality?\n\u003Cbr>\nWell, \u003Cb>extensions take precende, otherwise 'fallback' applies\u003C/b>.\n\u003Cbr>\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Cbr>\u003Cbr>\n\n\u003Ciframe sandbox=\"allow-scripts\" src=\"doc/RFC_XR_Fragments.html#overlap-with-fileformat-specific-extensions\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\nFor more info see [How it works](#How%20it%20works)\n","tags":"Reference","title":"glTF extensions","modified":"20250906101827796","type":"text/markdown"}, {"created":"20240226111559175","text":"The hashbus sits inbetween HTML's traditional `href` and the toplevel URL.\u003Cbr>\nSay what?\u003Cbr>\n\u003Cbr>\n> Because of historical reasons the `href` bundles interaction (a click) and navigation (replacing the viewport with another resource).\n\nXR Fragments also allows separating these historicially merged actions, by introducing a hashbus:\n\n| href value | updates top-level URL |\n|-|-|\n| `#foo` | yes |\n|`xrf://#foo` | no |\n\nThis allows much more document interactions, with the following benefits:\n\n* interactions don't clutter URLs for back/forward button navigation\n* many usecases don't require a scripting language anymore (hiding/scrolling via [#uv](#uv) e.g.)\n* use same URI Fragment DSL for navigation and interactions\n* re-use URI Templates across 3D nodes\n* allow 3D nodes publish updates to other 3D nodes (via hashbus)\n\nIn short, a complete **hypermediatic feedback loop** (HFL).\n\n\u003Cbr>\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#hypermediatic-feedbackloop-for-xr-browsers\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\n","tags":"","title":"hashbus","modified":"20240228122229072","type":"text/markdown"}, {"created":"20250211165942341","text":"\u003C\u003Ctoc-selective-expandable 'Home' sort[weight]>>","tags":"$:/tags/SideBar","title":"Home","modified":"20250211170130825","list-before":"Examples"}, -{"created":"20230428150217784","text":"''Short answer:'' its making 3D objects bookmarkable, clickable & teleportable. \n\n> XR Fragments turns 3D files into (e-learning) \u003Cb>XR experiences\u003C/b>.\n\n!! Explain it like I'm 5 y/o\n\nSure, press play below:\n\n\u003Cdiv style=\"text-align:center\">\n\u003Cb style=\"font-size:11px\">~10min podcast deepdive\u003C/b>\u003Cbr>\n\u003Caudio controls>\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/podcast-xrfragments-spec-xrwg.mp3\" type=\"audio/mpeg\" />\n\u003C/audio>\n\u003C/div>\n\u003Cbr>\n\n!! Soundtrack, subtitles, thumbnail \n\n[[XR Movies]] anyone?\u003Cbr>\n''Simple:'' just add those files and name them accordingly (`mymovie.xrf.ogg` for `mymovie.xrf.glb` e.g.) as [[sidecar-files|๐Ÿ“œ level0: File]]\n\n!! Clickable links\n\nWhen clicking an ''href''-value, the user(camera) is teleported to the referenced object.\n\nThe imported/teleported destination can be another object in the same scene-file, or a different file.\n\n!! Adding a link\n\n[img[xrfragment.jpg]]\n\n> Above a typical \u003Cb>level1\u003C/b>-syntax. See [[โ“ What are levels?]] for more.\n\n!! How can XR Browsers surf these worlds?\n\nUsing an \u003Cb>URL-bar\u003C/b> in your browser, app or OS, or button-object inside your 3D file (with [[href]] extra).\u003Cbr>\nThe URL should points to an 3D scene or file ([[glTF|https://en.wikipedia.org/wiki/GlTF]], [[USDZ|https://en.wikipedia.org/wiki/Universal_Scene_Description]], [[OBJ|https://en.wikipedia.org/wiki/Wavefront_.obj_file]], [[COLLADA|https://en.wikipedia.org/wiki/COLLADA]], [[FBX|https://en.wikipedia.org/wiki/FBX]] e.g.):\n\u003Cbr>\u003Cbr>\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big\" style=\"width:160px; display: inline-block\">2D documents:\u003C/span>\n\t\u003Cspan class=\"big hi1\">https ://\u003C/span>\n\t\u003Cspan class=\"big hi2\">foo.org/article.html\u003C/span>\n\t\u003Cspan class=\"big hi1\">#chapter2\u003C/span>\n\u003C/div>\n\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #F0F\">\n\t\u003Cspan class=\"big\" style=\"width:160px; display: inline-block\">3D documents:\u003C/span>\n\t\u003Cspan class=\"big hi1\">protocol ://\u003C/span>\n\t\u003Cspan class=\"big hi2\">foo.org/world.glb\u003C/span>\n\t\u003Cspan class=\"big hi1\">#room2\u003C/span>\n\u003C/div>\n\n\u003Cbr>\n\n> Above a typical \u003Cb>level1\u003C/b>-syntax. See [[โ“ What are levels?]] for more.\n\n!! Example: internal & external teleport\n\n```\n\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ \n โ”‚ โ”‚\n โ”‚ index.glb โ”‚\n โ”‚ โ”‚ โ”‚ during teleport:\n โ”‚ โ”œโ”€โ”€ โ—ป roomB โ”‚ camera's Y-coord will be set\n โ”‚ โ”‚ โ”‚ ~1.6m above (roomB's) origin\n | | | except in case of camera-rig\n โ”‚ โ”œโ”€โ”€ โ—ป buttonA โ”‚ (=non-root camera for VR e.g.)\n โ”‚ โ”‚ โ”” href: #roomB โ”‚\n | โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n โ”‚ โ””โ”€โ”€ โ—ป buttonB โ”‚ | other.usdz |\n โ”‚ โ”” href: other.usdz#foo โ”‚ | | |\n โ”‚ โ”‚ | โ”œโ”€โ”€ โ—ป camera |\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ | โ””โ”€โ”€ โ—ป foo |\n | โ””โ”€โ—ป camera3 | \n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n clicking buttonA will teleport the user to roomB \n (or import roomB if it's not XR Fragment-compatible)\n \n clicking buttonB will teleport the user to foo in other.usdz \n (or import foo if it's not XR Fragment-compatible)\n \n\t \n```\n\n> See [[href]] for more explanation\n\n!! Example: internal && external importing objects\n\n```\n\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ \n โ”‚ โ”‚\n โ”‚ index.glb โ”‚ Usecase: trigger\n โ”‚ โ”‚ โ”‚ interactive experiences\n โ”‚ โ”œโ”€โ”€ โ—ป bar โ”‚ in front of the user\n โ”‚ โ”‚ โ””โ—ป chart โ”‚ \n | | | \n โ”‚ โ”œโ”€โ”€ โ—ป buttonA โ”‚ \n โ”‚ โ”‚ โ”” href: #!bar โ”‚\n โ”‚ โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n โ”‚ โ””โ”€โ”€ โ—ป buttonB โ”‚ | other.usdz |\n โ”‚ โ”” href: other.usdz#!infographic&t=0 โ”‚ | | |\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ | โ””โ”€โ”€ โ—ป infographic |\n | โ””โ”€โ—ป KPIs | \n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n clicking buttonA will reposition (and play) the chart in front of the user\n clicking buttonB will clone (and play) the infographic from other.usdz \n\n\n```\n\n> See [[#!]]-operator for more explanation\n\n!! How can I add interactions to existing 3D assets/scenes?\n\nBy manually adding \u003Cb>metadata\u003C/b> inside 3D objects/asset/scene or via a [[sidecar-file|๐Ÿ“œ level0: File]], which gives a 3D file interactive powers.\n\n\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/sharing.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cbr>\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#spatial-referencing-3d\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\n\n\n> the above paradigm allows spatial ''teleportation'', but also ''sourceportation'' (teleporting to the (author) world of which an embedded `src` object belongs). \u003Cbr>\u003Cb>NOTE\u003C/b>: the [[AFRAME/THREE libraries|https://github.com/coderofsalvation/xrfragment/tree/main/dist]] do this for you out of the box.\n\n\nsee [[Getting started]] to get going!","title":"How it works","modified":"20250922202043916","type":"text/vnd.tiddlywiki","tags":"Home"}, +{"created":"20230428150217784","text":"''Short answer:'' its making 3D objects bookmarkable, clickable & teleportable. \n\n> XR Fragments turns 3D files into (e-learning) \u003Cb>XR experiences\u003C/b>.\n\n!! Explain it like I'm 5 y/o\n\nSure, press play below:\n\n\u003Cdiv style=\"text-align:center\">\n\u003Cb style=\"font-size:11px\">~10min podcast deepdive\u003C/b>\u003Cbr>\n\u003Caudio controls>\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/podcast-xrfragments-spec-xrwg.mp3\" type=\"audio/mpeg\" />\n\u003C/audio>\n\u003C/div>\n\u003Cbr>\n\n!! Soundtrack, subtitles, thumbnail \n\n[[XR Movies]] anyone?\u003Cbr>\n''Simple:'' just add those files and name them accordingly (`mymovie.xrf.ogg` for `mymovie.xrf.glb` e.g.) as [[sidecar-files|๐Ÿ“œ level0: File]]\n\n!! Clickable links\n\nWhen clicking an ''href''-value, the user(camera) is teleported to the referenced object.\n\nThe imported/teleported destination can be another object in the same scene-file, or a different file.\n\n!! Adding a link\n\n[img[xrfragment.jpg]]\n\n> Above a typical \u003Cb>level1\u003C/b>-syntax. See [[โ“ What are levels?]] for more.\n\n!! How can XR Browsers surf these worlds?\n\nUsing an \u003Cb>URL-bar\u003C/b> in your browser, app or OS, or button-object inside your 3D file (with [[href]] extra).\u003Cbr>\nThe URL should points to an 3D scene or file ([[glTF|https://en.wikipedia.org/wiki/GlTF]], [[USDZ|https://en.wikipedia.org/wiki/Universal_Scene_Description]], [[OBJ|https://en.wikipedia.org/wiki/Wavefront_.obj_file]], [[COLLADA|https://en.wikipedia.org/wiki/COLLADA]], [[FBX|https://en.wikipedia.org/wiki/FBX]] e.g.):\n\u003Cbr>\u003Cbr>\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #888\">\n\t\u003Cspan class=\"big\" style=\"width:160px; display: inline-block\">2D documents:\u003C/span>\n\t\u003Cspan class=\"big hi1\">https ://\u003C/span>\n\t\u003Cspan class=\"big hi2\">foo.org/article.html\u003C/span>\n\t\u003Cspan class=\"big hi1\">#chapter2\u003C/span>\n\u003C/div>\n\u003Cbr>\n\u003Cdiv class=\"border padding\" style=\"border:4px solid #F0F\">\n\t\u003Cspan class=\"big\" style=\"width:160px; display: inline-block\">3D documents:\u003C/span>\n\t\u003Cspan class=\"big hi1\">protocol ://\u003C/span>\n\t\u003Cspan class=\"big hi2\">foo.org/world.glb\u003C/span>\n\t\u003Cspan class=\"big hi1\">#room2\u003C/span>\n\u003C/div>\n\n\u003Cbr>\n\n> Above a typical \u003Cb>level1\u003C/b>-syntax. See [[โ“ What are levels?]] for more.\n\n!! Example: internal & external teleport\n\n```\n\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ \n โ”‚ โ”‚\n โ”‚ index.glb โ”‚\n โ”‚ โ”‚ โ”‚ during teleport:\n โ”‚ โ”œโ”€โ”€ โ—ป roomB โ”‚ camera's Y-coord will be set\n โ”‚ โ”‚ โ”‚ ~1.6m above (roomB's) origin\n | | | except in case of camera-rig\n โ”‚ โ”œโ”€โ”€ โ—ป buttonA โ”‚ (=non-root camera for VR e.g.)\n โ”‚ โ”‚ โ”” href: #roomB โ”‚\n | โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n โ”‚ โ””โ”€โ”€ โ—ป buttonB โ”‚ | other.usdz |\n โ”‚ โ”” href: other.usdz#foo โ”‚ | | |\n โ”‚ โ”‚ | โ”œโ”€โ”€ โ—ป camera |\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ | โ””โ”€โ”€ โ—ป foo |\n | โ””โ”€โ—ป camera3 | \n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n clicking buttonA will teleport the user to roomB \n (or import roomB if it's not XR Fragment-compatible)\n \n clicking buttonB will teleport the user to foo in other.usdz \n (or import foo if it's not XR Fragment-compatible)\n \n\t \n```\n\n> See [[href]] for more explanation\n\n!! Example: internal && external importing objects\n\n```\n\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ \n โ”‚ โ”‚\n โ”‚ index.glb โ”‚ Usecase: trigger\n โ”‚ โ”‚ โ”‚ interactive experiences\n โ”‚ โ”œโ”€โ”€ โ—ป bar โ”‚ in front of the user\n โ”‚ โ”‚ โ””โ—ป chart โ”‚ \n | | | \n โ”‚ โ”œโ”€โ”€ โ—ป buttonA โ”‚ \n โ”‚ โ”‚ โ”” href: #!bar โ”‚\n โ”‚ โ”‚ โ”‚ +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n โ”‚ โ””โ”€โ”€ โ—ป buttonB โ”‚ | other.usdz |\n โ”‚ โ”” href: other.usdz#!infographic&t=0 โ”‚ | | |\n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+ | โ””โ”€โ”€ โ—ป infographic |\n | โ””โ”€โ—ป KPIs | \n +โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€+\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n clicking buttonA will reposition (and play) the chart in front of the user\n clicking buttonB will clone (and play) the infographic from other.usdz \n\n\n```\n\n> See [[#!]]-operator for more explanation\n\n!! How can I add interactions to existing 3D assets/scenes?\n\nBy manually adding \u003Cb>metadata\u003C/b> inside 3D objects/asset/scene or via a [[sidecar-file|๐Ÿ“œ level0: File]], which gives a 3D file interactive powers.\n\n\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/sharing.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cbr>\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#spatial-referencing-3d\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n\n!! AR vs VR?\n\n> ''fact:'' Some 3D files include a skybox, and some don't.\u003Cbr>\n\nHow can application's force loading files for ''AR''-usage? (without skybox)\u003Cbr>.\n\n| Method | Example | Usecase |\n| [[href]] | `https://my.org/foo.glb` | works for 3D files which don't contain skybox |\n| [[href]] deeplink with [[#+-]] | `https://my.org/foo.glb#-skyboxmat` | hides materialname 'skyboxmat' of skybox|\n| [[href]] deeplink with [[#+-]] | `https://my.org/foo.glb#-skybox` | hides objectname 'skybox' |\n\n\nsee [[Getting started]] to get going!","title":"How it works","modified":"20250924100543898","type":"text/vnd.tiddlywiki","tags":"Home"}, {"created":"20250902141401836","text":"\u003C\u003Ctoc-selective-expandable 'howto' sort[title]>>","tags":"$:/tags/SideBar","title":"Howto","modified":"20250902141443289","list-before":"$:/core/ui/SideBar/Open"}, {"created":"20230522115709081","text":"!!! Adding links to 3D objects\n\nadding href metadata ('extras') to a 3D object (in a 3D file), hints the viewer that the user ''can interact'' with that object :\n\n> ''Clicking'' the object, will teleport or import the reference from the same scene-file, or a different file.\n\n\u003Cbr>\u003Chr>\n\n[img[xrfragment.jpg]]\n\n\u003Chr>\u003Cbr>\n\n| property | type | example value |\n|`href`| string (uri) | `#bar`\u003Cbr>`#pyramid`\u003Cbr>`xrf://#-someobject`\u003Cbr>`://somefile.gltf#foo`\u003Cbr> |\n\n!! Interaction behaviour\n\n1. when clicking a ''href''-value (`#bar` e.g.), the user(camera) is teleport to the referenced object.\n\n2. when clicking a remote ''href''-value (`https://foo.org/hello.glb#bar` e.g.), then that 3D file replaces the current scene (+user(camera) is teleported to any referenced object `roomB`).\n\n> ''XR Safety Exception:'' when linking to a 3D file which has zero signs of XR Fragments (see [[๐Ÿ“œ level0: File]]), it will be treated as an [[Object import|#!]]\n\n!Spec\n\nSee the full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>\n\n> solutions in the spec were abducted from [[this|https://i.imgur.com/E3En0gJ.png]] and [[this|https://i.imgur.com/lpnTz3A.png]] survey result\n\n!!!Demo\n\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/href.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\n> capture of \u003Ca href=\"./example/aframe/sandbox\" target=\"_blank\">aframe/sandbox\u003C/a>\n\n!! XR Viewer implementation\n\n| ''spec'' | ''action'' | ''feature'' |\n| level0+1 | hover 3D file [[href]] | show the preview PNG thumbnail (if any). See [[๐Ÿ“œ level0: File]]) |\n| level0+1 | launch 3D file [[href]] | replace the current scene with a new 3D file (`href: other.glb` e.g.) |\n| level2 | click internal 3D file [[href]] (`#roomB` e.g.) | teleport the camera to the origin of object(name `roomB`). See [[teleport camera]].|\n| level2 | click external 3D file [[href]] (`foo.glb` e.g.) | replace the current scene with a new 3D file (`href: other.glb` e.g.) |\n| level2 | hover external 3D file [[href]] | show the preview PNG thumbnail (if any sidecar [[๐Ÿ“œ level0: File]]) |\n| level2 | click [[href]] | hashbus: execute without changing the toplevel URL location (`href: xrf://#someObjectName` e.g.) |\n| level3 | click [[href]] | set the global 3D animation timeline to its Media Fragment value (`#t=2,3` e.g.) |\n\n> NOTE: hashbus links (`xrf://#foo&bar`) don't change the toplevel URL, which makes it ideal for interactions (in contrast to typical `#roomC` navigation, which benefit back/forward browser-buttons), see \u003Ca href=\"#hashbus\">hashbus\u003C/a> for more info.\n\n","tags":"[[๐Ÿ“œ level2: explicit hyperlinks]] level2","title":"href","modified":"20250922161428470","type":"text/vnd.tiddlywiki"}, {"created":"20230706161915394","text":"> Let's look at the browser thru the lens of XR, and not the other way around (it's a trap).\n\n* a \u003Cb>2D hyperlink\u003C/b> navigates/replaces the current document (or opens a tab)\n* a \u003Cb>hyperpreview\u003C/b> simply links/shows/summarizes an 2D/3D object/document/image\n\nA \u003Cb>hyperpreview\u003C/b> promotes \u003Cb>approximated summaries\u003C/b> of text documents, instead of fully supporting/rendering them.\u003Cbr>\nThat way, opening the content (spatially) will be offloaded to (other applications) on the client or operating system.\u003Cbr>\nThis is in contrast with traditional 2D (space-restricted) way of opening hyperlinks in new tabs (or replacing the current document).\n\n\n> Basically: the moment you want to implement HTML iframes into your spatial experience, you're looking at XR thru the lens of 2D (a common trap). The higher-dimensional recursive nature of XR Fragments \u003Cb>already allows\u003C/b> recursive (spatial i)frames.\n\n## Spec 0.5\n\n1. mimetype `text/html` instanced by [src](#src) should should be \u003Cb>hyperpreviewable\u003C/b> (a non-interactive 2D image-texture).\n\n2. When interacting with a \u003Cb>hyperpreview\u003C/b>, the XR Fragment host/client should offer copy/share of the adress (to clipboard and optionally other applications which can handle the mimetype).\n\n3. \u003Cb>hyperpreviews\u003C/b> should not aim for achieving 100% render-compatibility of all mimetypes. The goal is \u003Cb>addressbility\u003C/b> and \u003Cb>approximated summarization\u003C/b>, not embedding javascript-supported browser-iframes.\n\n4. Designers can solve unsupported mimetypes by using `src` for an image-thumbnail and `href` for the content (which should be offloaded to the (applications on) the operatingsystem)\n\nmimetype behaviour when user interacts with `src`:\n\n| mimetype | render | hyperpreview | action | update URL fragment | clipboard contents after clicking |\n|-|-|-|-|-|-|\n|\u003Cb>unknown mimetypes\u003C/b>| no | \n|text/html| no | yes |\u003Cb>summarize\u003C/b> HTML-text (first paragraph hinted by a fragment identifier e.g.) using crude html-to-image | name of object (`#website`) |\n|\u003Cb>3d objects\u003C/b>\u003Cbr>model/gltf+json\u003Cbr>model/glb\u003Cbr>model/obj\u003Cbr>..and so on | yes | no | highlight \u003Cbr>(draw boundingbox e.g.) | name of object (`#cube` e.g.) | `src`-value + linebreak + url with fragment: `http://other.com/other.gltf`\u003Cbr>`https://foo.com/#cube`\u003Cbr>Sharing such 'trail' (with the clipboardmanager) promotes backwards-reasoning (`other.gltf` is a cube in `scene.gltf` e.g.)\n|\u003Cb>images\u003C/b>\u003Cbr>image/png\u003Cbr>image/jpg\u003Cbr>image/gif\u003Cbr>..and so on | yes | no | highlight \u003Cbr>(draw border/boundingbox e.g.) | name of object (`#poster` e.g.) | object url with fragment (`https://foo.com/#cube` e.g.)\n\n\u003Chr>\n\n\u003Cb>Example\u003C/b>: embed an HTML document into your scene\n\n* create a plane with custom property [src](#src) and value `https://mysite.com/foo.html#summary` or `https://mysite.com/foo.html#chapter1`. \n* add custom property [\nso that the XR Fragment client can easily render a html-to-image conversion to a texture.\u003Cbr>\nThis is perfect for simple text.\u003Cbr>\nCRUD/scripting/animations don't belong in \u003Cb>hyperpreviews\u003C/b> and can partially be re-used in the 3D assets (using [src](#src) or fbx/gltf animations).\u003Cbr>\n\n\u003Chr>\n\n\u003Cb>Q\u003C/b>: How can I embed text from a textfile on a server?\n\n\u003Cb>A\u003C/b>: create an [src](#src) with value `https://mysite.com/foo.txt` so that the XR Fragment client can easily render a html-to-image conversion to a (non)scrolling texture.\u003Cbr>\n\n\u003Cbr>\n\n## Why are hyperpreviews so limited?\n\nBecause \u003Cb>hyperpreviews\u003C/b> separate the following concerns of hyperlinks: navigation, addressibility, interaction and rendering.\n\u003Cbr>\nIn \u003Cb>2D hyperlinks\u003C/b> we click links, which \u003Cb>navigates us to\u003C/b> AND \u003Cb>renders\u003C/b> the destination.\n\u003Cbr>\n\u003Cbr>\nIn Spatial Experiences endusers are better off \u003Cb>hyperpreviewing\u003C/b> hyperlinks, which optionally can (due to their \u003Cb>addressibility\u003C/b> be opened in another application or device).\u003Cbr>\n\u003Cbr>\n> The aim/goal of forcing a user to interact with all mimetypes spatially is not realistic.\n\nIf we would indulge on the latter, we're opening a can of worms regarding:\n\n* security (malicious actors thrive when going beyond read-only previews or `HTTP GET`)\n* the spatial browser becomes **mimetype-rendering-silos** (ballooning in size & support)\n* rendering speed / framedropping","tags":"","title":"hyperpreview vs 2D hyperlinks","modified":"20230707090417999","type":"text/markdown"}, @@ -1290,7 +1293,7 @@ button.sidebar-toggle{ {"created":"20230620103309687","text":"> NOTE: **''deprecated''** for portability/design reasons/issues (for safely importing remote content without breaking the design use [[#!]]\n\n`src` is the 3D version of the \u003Ca target=\"_blank\" href=\"https://www.w3.org/html/wiki/Elements/iframe\">iframe\u003C/a>.\u003Cbr>\nIt instances content (in objects) in the current scene/asset.\n\n| fragment | type | example value |\n|`src`| string (uri or [[predefined view|predefined_view]] or [[query|queries]]) | `#cube`\u003Cbr>`#-ball_inside_cube`\u003Cbr>`#-/sky&-rain`\u003Cbr>`#-language&english`\u003Cbr>`#price:>2&price:\u003C5`\u003Cbr>`https://linux.org/penguin.png`\u003Cbr>`https://linux.world/distrowatch.gltf#t=1,100`\u003Cbr>`linuxapp://conference/nixworkshop/apply.gltf#q=flyer`\u003Cbr>`androidapp://page1?tutorial#pos=0,0,1&t1,100`\u003Cbr>foo.mp3#t=0,0,0|\n\n> NOTE: when the enduser clicks `href: #cube` while object `cube` has a timeline-supported `src` set (`src: foo.mp3` `src: bar.mp4#t=0,0,0` e.g.), then `#t=1,1,0` (play oneshot) will be executed for that `src`(see [[#t|t]]).\n\n[[ยป example implementation|https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/js/three/xrf/src.js]]\u003Cbr>\n[[ยป example 3D asset|https://github.com/coderofsalvation/xrfragment/blob/main/example/assets/query.gltf#L192]]\u003Cbr>\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/4]]\u003Cbr>\n\u003Cbr>\u003Cbr>\n\n!!Non-euclidian portals / lenses\n\n\u003Cimg style=\"width:100%;max-width:800px;border-radius:5px;box-shadow:none;padding:20px\" class=\"border\" src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/xrlens.png\"/>\n\nWhen `src` values are projected on flat 3D objects, they will be project [[non-euclidian]] as:\n\n1. \u003Cb>A portal\u003C/b>: render objects ALSO inside portal (which the enduser can walk into)\n2. \u003Cb>A lens\u003C/b>: render objects ONLY visible inside lens\n\n> Read more on the [[non-euclidian portals & lenses]] page\n\n!!XR audio/video integration\n\n* add a `src: foo.mp3` or `src: bar.mp4` metadata to a 3D object (`cube` e.g.)\n* to disable auto-play: add `#t=0,0,0` (`src: bar.mp3#t=0,0,0` e.g.)\n* to play it, add `href: #cube` somewhere else \n* when the enduser clicks the `href`, `#t=1,0,0` (play) will be applied to the `src` value\n\n> for more info see [[#t|t]].\n\n\u003Cbr>\n\u003Ciframe class=\"border\" src=\"./example/aframe/sandbox?./assets/src.gltf#pos=0,0,0&embed=1\" frameborder=\"0\" style=\"width:100%; height:70%; min-height:500px; max-width:1000px\"/>\n\u003Cbr>\n\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/src.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\n\n!Spec\n\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe src=\"doc/RFC_XR_Fragments.html#embedding-xr-content-src-instancing\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n","tags":"[[๐Ÿงช levelX: non-normative metadata]]","title":"src","modified":"20250910094525899","type":"text/vnd.tiddlywiki"}, {"created":"20231128144347734","text":"> NOTE: `tag` is non-normative\n\n`tag` metadata allows tagging objects with strings (similar to `id` and `class` in HTML).\u003Cbr>\nIt is used by [[filters]] to reference groups of objects, and the [[XRWG]] to associate things with eachother.\u003Cbr>\n\n| fragment | type | example value |\n|`tag`| string (space separated) | `#cube`\u003Cbr>`#cubes`\u003Cbr>`#-sky&rain`\u003Cbr>`#-language&english`\u003Cbr>`#price=>2&price=\u003C5`|\n\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/11]]\u003Cbr>\n","tags":"[[๐Ÿงช levelX: non-normative metadata]]","title":"tag","modified":"20250910094537660","type":"text/vnd.tiddlywiki"}, {"created":"20240130113718711","text":"XR Fragment-capable clients can reference objects with a certain `name` or `tag`, take for example this URL:\n\n`https://foo.com/index.glb#cubes`\n\nAfter loading the scene, all [[tags]] and object-names will be loaded into the XRWG, so that:\n\n1. objects with name `cubes` will be matched\n\u003Cbr>\n2. objects with [[tag]] `cubes` will be matched\n\u003Cbr>\n\u003Cbr>\nIf objects are matched, the client can draw visible links to/from the objects/visitor to 'point' to those objects of interest.\u003Cbr>\u003CBr>\n\nsee [[predefined_view]] for more info\n","tags":"[[๐Ÿงช experimental]]","title":"tagged objects","modified":"20250902143004764"}, -{"created":"20230815155307052","text":"> ''IMPORTANT:'' `#pos=roomB` has been deprecated in favor of `#roomB` to simplify the spec.\n\nset the position of the camera ([[filtered|filters]] object(s)).\n\n| fragment | type | functionality |\n| \u003Cb>#roomB\u003C/b> | string | position camera to position of object with name `roomB` |\n| \u003Cb>#cam2\u003C/b> | string | position camera to position of camera with name `cam02`, and make it active camera [follow animation e.g.] |\n\n> the usercamera is repositioned to the ''origin'' and ''upvector'' of the target object (1.6m height is added ''in VR only'')\n\nAnd to enable VR elevators e.g.:\n\n> the camera is attach/parented to that object (so it animates along with the object)\n\n\n\nYou can add this URI Fragment to the top-level URLbar, or as [[href]] value (to trigger via click) in a 3D model Editor (Blender e.g.):\u003Cbr>\u003Cbr>\n\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/gettingstarted2024.mp4#t=295\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Ch2>Developers only:\u003C/h2>\n\n[[ยป example implementation|https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/js/three/xrf/pos.js]]\u003Cbr>\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/5]]\u003Cbr>\n\n!Spec\n\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe sandbox=\"allow-scripts\" src=\"doc/RFC_XR_Fragments.html#navigating-3d\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n","tags":"[[๐Ÿ”— URL]] level1","title":"teleport camera","modified":"20250906101637786","type":"text/vnd.tiddlywiki"}, +{"created":"20230815155307052","text":"> ''IMPORTANT:'' `#pos=roomB` has been deprecated in favor of `#roomB` to simplify the spec.\n\nset the position of the camera ([[filtered|filters]] object(s)).\n\n| fragment | type | functionality |\n| \u003Cb>#roomB\u003C/b> | string | position camera to position of object with name `roomB` |\n| \u003Cb>#cam2\u003C/b> | string | position camera to position of camera with name `cam02`, and make it active camera [follow animation e.g.] |\n\n> the usercamera (default at `0,0,0`) is repositioned to the ''origin'' and ''upvector'' of the target object (1.6m height is added ''in VR only'')\n\nAnd to enable VR elevators e.g.:\n\n> the camera is attach/parented to that object (so it animates along with the object)\n\n\n\nYou can add this URI Fragment to the top-level URLbar, or as [[href]] value (to trigger via click) in a 3D model Editor (Blender e.g.):\u003Cbr>\u003Cbr>\n\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/gettingstarted2024.mp4#t=295\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Ch2>Developers only:\u003C/h2>\n\n[[ยป example implementation|https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/js/three/xrf/pos.js]]\u003Cbr>\n[[ยป discussion|https://github.com/coderofsalvation/xrfragment/issues/5]]\u003Cbr>\n\n!Spec\n\nBelow is the related section of the spec (full spec here: \u003Ca href=\"doc/RFC_XR_Fragments.html\" target=\"_blank\">HTML\u003C/a>, \u003Ca href=\"doc/RFC_XR_Fragments.txt\" target=\"_blank\">TXT\u003C/a>)\n\n\u003Ciframe sandbox=\"allow-scripts\" src=\"doc/RFC_XR_Fragments.html#navigating-3d\" frameborder=\"0\" class=\"spec\">\u003C/iframe>\n","tags":"[[๐Ÿ”— URL]] level1","title":"teleport camera","modified":"20250924094417760","type":"text/vnd.tiddlywiki"}, {"created":"20230426160615931","text":"\u003Cdiv class=\"scene\">\u003C/div>\n\n\u003C\u003Cscript>>\n\u003Cscript>\n $scene = document.querySelector(\".scene\")\n\tscene = new THREE.Scene();\n camera = new THREE.PerspectiveCamera( 75, $scene.offsetWidth / $scene.offsetHeight, 0.1, 1000 );\n\n\trenderer = new THREE.WebGLRenderer();\n renderer.setSize( $scene.offsetWidth, $scene.offsetHeight );\n $scene.appendChild( renderer.domElement );\n\t\n\tvar geometry = new THREE.BoxGeometry( 1, 1, 1 );\n\tvar material = new THREE.MeshBasicMaterial( { color: 0x0a84ff } );\n\tvar cube = new THREE.Mesh( geometry, material );\n\tscene.add( cube );\n\tscene.background = new THREE.Color( 0x18181c );\n\n\tcamera.position.z = 2;\n\n\tfunction animate() {\n\t\trequestAnimationFrame( animate );\n\n\t\tcube.rotation.x += 0.004;\n\t\tcube.rotation.y += 0.004;\n\n\t\trenderer.render( scene, camera );\n\t}\n\n\tanimate();\t\n\tlog(\"hello world\")\n\u003C/script>","title":"THREE template","modified":"20230523125639178","tags":""}, {"created":"20230425154949623","text":"\u003Cscript async src=\"https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js\">\u003C/script>\n\n\u003Cscript type=\"importmap\">\n{\n\t\"imports\": {\n\t\t\"three\": \"https://unpkg.com/three@0.151.3/build/three.module.js\",\n\t\t\t\"three/addons/\": \"https://unpkg.com/three@0.151.3/examples/jsm/\"\n\t}\n}\n\u003C/script>\n\n\u003Cscript type=\"module\">\nimport * as THREE from 'three';\n\nimport { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';\nimport { VRButton } from 'three/addons/webxr/VRButton.js';\nimport { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';\n\nlet camera, scene, raycaster, renderer;\nlet controller1, controller2;\nlet controllerGrip1, controllerGrip2;\n\nlet room, marker, floor, baseReferenceSpace;\n\nlet INTERSECTION;\nconst tempMatrix = new THREE.Matrix4();\n\ninit();\nanimate();\n\nfunction init() {\n\n\tscene = new THREE.Scene();\n\tscene.background = new THREE.Color( 0x505050 );\n\n\tcamera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );\n\tcamera.position.set( 0, 1, 3 );\n\n\troom = new THREE.LineSegments(\n\t\t\tnew BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),\n\t\t\tnew THREE.LineBasicMaterial( { color: 0x808080 } )\n\t\t\t);\n\tscene.add( room );\n\n\tscene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );\n\n\tconst light = new THREE.DirectionalLight( 0xffffff );\n\tlight.position.set( 1, 1, 1 ).normalize();\n\tscene.add( light );\n\n\tmarker = new THREE.Mesh(\n\t\t\tnew THREE.CircleGeometry( 0.25, 32 ).rotateX( - Math.PI / 2 ),\n\t\t\tnew THREE.MeshBasicMaterial( { color: 0x808080 } )\n\t\t\t);\n\tscene.add( marker );\n\n\tfloor = new THREE.Mesh(\n\t\t\tnew THREE.PlaneGeometry( 4.8, 4.8, 2, 2 ).rotateX( - Math.PI / 2 ),\n\t\t\tnew THREE.MeshBasicMaterial( { color: 0x808080, transparent: true, opacity: 0.25 } )\n\t\t\t);\n\tscene.add( floor );\n\n\traycaster = new THREE.Raycaster();\n\n\trenderer = new THREE.WebGLRenderer( { antialias: true } );\n\trenderer.setPixelRatio( window.devicePixelRatio );\n\trenderer.setSize( window.innerWidth, window.innerHeight );\n\trenderer.outputEncoding = THREE.sRGBEncoding;\n\n\trenderer.xr.addEventListener( 'sessionstart', () => baseReferenceSpace = renderer.xr.getReferenceSpace() );\n\trenderer.xr.enabled = true;\n\n\tdocument.body.appendChild( renderer.domElement );\n\tdocument.body.appendChild( VRButton.createButton( renderer ) );\n\n\t// controllers\n\n\tfunction onSelectStart() {\n\n\t\tthis.userData.isSelecting = true;\n\n\t}\n\n\tfunction onSelectEnd() {\n\n\t\tthis.userData.isSelecting = false;\n\n\t\tif ( INTERSECTION ) {\n\n\t\t\tconst offsetPosition = { x: - INTERSECTION.x, y: - INTERSECTION.y, z: - INTERSECTION.z, w: 1 };\n\t\t\tconst offsetRotation = new THREE.Quaternion();\n\t\t\tconst transform = new XRRigidTransform( offsetPosition, offsetRotation );\n\t\t\tconst teleportSpaceOffset = baseReferenceSpace.getOffsetReferenceSpace( transform );\n\n\t\t\trenderer.xr.setReferenceSpace( teleportSpaceOffset );\n\n\t\t}\n\n\t}\n\n\tcontroller1 = renderer.xr.getController( 0 );\n\tcontroller1.addEventListener( 'selectstart', onSelectStart );\n\tcontroller1.addEventListener( 'selectend', onSelectEnd );\n\tcontroller1.addEventListener( 'connected', function ( event ) {\n\n\t\t\tthis.add( buildController( event.data ) );\n\n\t\t\t} );\n\tcontroller1.addEventListener( 'disconnected', function () {\n\n\t\t\tthis.remove( this.children[ 0 ] );\n\n\t\t\t} );\n\tscene.add( controller1 );\n\n\tcontroller2 = renderer.xr.getController( 1 );\n\tcontroller2.addEventListener( 'selectstart', onSelectStart );\n\tcontroller2.addEventListener( 'selectend', onSelectEnd );\n\tcontroller2.addEventListener( 'connected', function ( event ) {\n\n\t\t\tthis.add( buildController( event.data ) );\n\n\t\t\t} );\n\tcontroller2.addEventListener( 'disconnected', function () {\n\n\t\t\tthis.remove( this.children[ 0 ] );\n\n\t\t\t} );\n\tscene.add( controller2 );\n\n\t// The XRControllerModelFactory will automatically fetch controller models\n\t// that match what the user is holding as closely as possible. The models\n\t// should be attached to the object returned from getControllerGrip in\n\t// order to match the orientation of the held device.\n\n\tconst controllerModelFactory = new XRControllerModelFactory();\n\n\tcontrollerGrip1 = renderer.xr.getControllerGrip( 0 );\n\tcontrollerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );\n\tscene.add( controllerGrip1 );\n\n\tcontrollerGrip2 = renderer.xr.getControllerGrip( 1 );\n\tcontrollerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );\n\tscene.add( controllerGrip2 );\n\n\t//\n\n\twindow.addEventListener( 'resize', onWindowResize, false );\n\n}\n\nfunction buildController( data ) {\n\n\tlet geometry, material;\n\n\tswitch ( data.targetRayMode ) {\n\n\t\tcase 'tracked-pointer':\n\n\t\t\tgeometry = new THREE.BufferGeometry();\n\t\t\tgeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );\n\t\t\tgeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );\n\n\t\t\tmaterial = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );\n\n\t\t\treturn new THREE.Line( geometry, material );\n\n\t\tcase 'gaze':\n\n\t\t\tgeometry = new THREE.RingGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );\n\t\t\tmaterial = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );\n\t\t\treturn new THREE.Mesh( geometry, material );\n\n\t}\n\n}\n\nfunction onWindowResize() {\n\n\tcamera.aspect = window.innerWidth / window.innerHeight;\n\tcamera.updateProjectionMatrix();\n\n\trenderer.setSize( window.innerWidth, window.innerHeight );\n\n}\n\n//\n\nfunction animate() {\n\trenderer.setAnimationLoop( render );\n}\n\nfunction render() {\n\n\tINTERSECTION = undefined;\n\n\tif ( controller1.userData.isSelecting === true ) {\n\t\ttempMatrix.identity().extractRotation( controller1.matrixWorld );\n\t\traycaster.ray.origin.setFromMatrixPosition( controller1.matrixWorld );\n\t\traycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );\n\t\tconst intersects = raycaster.intersectObjects( [ floor ] );\n\t\tif ( intersects.length > 0 ) {\n\t\t\tINTERSECTION = intersects[ 0 ].point;\n\t\t}\n\t} else if ( controller2.userData.isSelecting === true ) {\n\t\ttempMatrix.identity().extractRotation( controller2.matrixWorld );\n\t\traycaster.ray.origin.setFromMatrixPosition( controller2.matrixWorld );\n\t\traycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );\n\t\tconst intersects = raycaster.intersectObjects( [ floor ] );\n\t\tif ( intersects.length > 0 ) {\n\t\t\tINTERSECTION = intersects[ 0 ].point;\n\t\t}\n\t}\n\n\tif ( INTERSECTION ) marker.position.copy( INTERSECTION );\n\tmarker.visible = INTERSECTION !== undefined;\n\trenderer.render( scene, camera );\n\n}\n\n\u003C/script>\n","tags":"","title":"THREE template #online","modified":"20230523125650516","type":"text/html"}, {"created":"20240207134625973","text":"Fragment's can be dynamic thanks to URI Templating [RFC6570](https://www.rfc-editor.org/rfc/rfc6570).\n\u003Cbr>\nThis allows for dynamic and reactive fragments in `src` and `href`.\u003Cbr>\n\n> NOTE 1: the domain+path of an URL cannot be modified\n\n> NOTE 2: `src`, `href` and `tag` object metadata is mutable, however default metadata (`#`) not.\n\nHere are some examples:\n\u003Cbr>\u003Cbr>\n\n## dynamic teleports (escape-room)\n\n```\n\n foo.usdz \n โ”‚ \n โ”œโ”€โ”€ โ—ป level2\n โ”‚ \n โ””โ”€โ”€ โ—ป level1\n |\n โ”œโ”€โ”€ โ—ป secretbutton \n โ”‚ โ”” href: #nextlevel=level2\n โ”‚ \n โ””โ”€โ”€ โ—ป exitdoor\n โ”” href: #pos={nextlevel}\n\n```\n\n\n## a simple videoplayer\n\n```\n\n foo.usdz \n โ”‚ \n โ”‚ \n โ”œโ”€โ”€ โ—ป stopbutton \n โ”‚ โ”œ #: #-stopbutton\n โ”‚ โ”” href: #player=stop&-stopbutton (stop and hide stop-button)\n โ”‚ \n โ””โ”€โ”€ โ—ป plane \n โ”œ play: #t=l:0,10\n โ”œ stop: #t=0,0\n โ”œ href: #player=play&stopbutton (play and show stop-button)\n โ”” src: cat.mp4#{player}\n\n\n```\n","tags":"[[๐Ÿงช experimental]] [[๐Ÿงช levelX: non-normative metadata]]","title":"URI templates (reactivity)","modified":"20250906075907414","type":"text/markdown"}, @@ -1300,7 +1303,7 @@ button.sidebar-toggle{ {"created":"20230427204906096","text":"comma-separated coordinates e.g. which after parsing can be accessed using `.x`, `.y`, `.z` etc.\n\n| type | example |\n|-|-|\n| vector2 | `1.2,3` or `0.4,0.6` | \n| vector3 | `1.2,3,4` or `0.4,0.6,5` | \n\nhere are some interactive examples:\n\n\u003Cdiv>\n \u003Ctextarea spellcheck=\"false\" autofocus class=\"sandboxify\">frags = {}\nok = xrfragment.Parser.parse('pos','1.2,2,3',frags)\nconsole.log( frags.pos.z )\n\n\u003C/textarea>\n\t\u003Cpre class=\"result\">\u003C/pre>\n\u003C/div>\n","tags":"","title":"vector","modified":"20230427205327718","type":"text/markdown"}, {"created":"20250904105246150","text":"> **NOTE**: a subtitle-file allows for hasslefree [XR movies](#XR%20Movies) optimized for accessibility (screenreader, text-to-speech)\n\nSubtitle files must be provided as [sidecar-files](#๐Ÿ“œ%20level0:%20File) either in:\n\n* standard SRT format (with the header renamed to WEBVTT, and `.srt` to `.vtt`)\n* WebVTT format (`.vtt`), in which case only the SRT-equivalent subset of features will be processed. Specifically, the parser recognizes plain cue blocks consisting of an optional identifier, a start --> end timestamp line, and unstyled text. Any additional WebVTT features such as styling, positioning, regions, notes, or metadata will be ignored.\n\n## Example .vtt file\n\n```\nWEBVTT\n\n1\n00:00:01.000 --> 00:00:04.000\nHello, world!\n\n2\n00:00:05.000 --> 00:00:07.000\nThis is an example subtitle.\n```\n\n","tags":"","title":"WebVTT subtitles","modified":"20250904105904428","type":"text/markdown"}, {"created":"20230427103350051","text":"","tags":"","title":"WebXR","modified":"20230427103400217"}, -{"created":"20230424092557827","text":"\u003Cb>Hyperlink the 3D world\u003C/b>.\u003Cbr>\nA standard for (deep)linking 3D files.\u003Cbr>\n''Turn'' 3D files ''into'' local-first, interactive, accessible \u003Ca href=\"#XR%Movies\">XR movies\u003C/a> & 3D websites.\n\u003Cbr>\u003Cbr>\n\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/hyperlinking-the-3d-world.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cbr>\nEmpower existing 3D\n\u003Cu tabindex=\"0\">fileformats\n \u003Cspan>like \u003Cb>glTF\u003C/b>, \u003Cb>usdz\u003C/b>, \u003Cb>obj\u003C/b>, \u003Cb>collada\u003C/b> which are used in websites, Game Engines, and like \u003Ca href=\"#Edit%20a%203D%20scene%20file\">3D editors\u003C/a>.\u003Cbr>XR Fragments makes 3D files interactive \u003C/span>\n\u003C/u> via \n\u003Cu tabindex=\"0\">URLS\n \u003Cspan>, using any \n \u003Cu tabindex=\"0\">protocol\n \u003Cspan>, not necessarily served via HTTP, but also \u003Ca href=\"https://ipfs.com\" target=\"_blank\">IPFS\u003C/a>, \u003Ca href=\"https://hypercore-protocol.github.io/new-website/guides/getting-started/\" target=\"_blank\">hypercore\u003C/a>, \u003Ca href=\"https://github.com/webtorrent/webtorrent\" target=\"_blank\">webtorrent\u003C/a> e.g\u003C/span>\n\t \u003C/u>\n\t\u003C/span>\n\u003C/u>.\nThis allows spatial\n \u003Cu tabindex=\"0\">interactions \n\t \u003Cspan>, like browser-navigation, teleportation, importing scenes, spatial hypermedia, allowing useful audiovisual immersive\u003C/span>\n\t\t\u003Cu tabindex=\"0\">experiences\n\t\t \u003Cspan>like e-learnings, quiz, realtime-rendered 3D movies, and audiovisual storytelling\u003C/span>\n\t\t\u003C/u>\n\t\u003C/u>\nvia 3D \n\u003Cu tabindex=\"0\">metadata\n \u003Cspan>, so called 'extras' embedded in 3D files ('custom properties' in \u003Ca href=\"https://blender.org\" target=\"_blank\">Blender\u003C/a>)\u003C/span>\n\u003C/u>\nand promote URI's and \n\u003Cu tabindex=\"0\">Local-First\n \u003Cspan> data, which lives local, and ideally only syncs/shares elsewhere via ''open user-operated internet'' protocols.\u003C/span>\n\u003C/u>\n.\n\n\n\u003Cdiv style=\"text-align:center\">\n\u003Cb style=\"font-size:11px\">~10 mins podcast introduction\u003C/b>\u003Cbr>\n\u003Caudio controls src=\"https://coderofsalvation.codeberg.page/xrfragment.media/podcast-xrfragments-intro.mp3\" type=\"audio/mpeg\">\n\u003C/audio>\n\u003C/div>\n\u003Cbr>\nAvoid \u003Cb>cloud lock-in\u003C/b>, and make your 3D experiences \u003Cb>outlast\u003C/b> current technologies.\n\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"example/aframe/sandbox\" target=\"_blank\" style=\"padding:10px 30px\">Try demo viewer\u003C/a>\n\u003C/center>\n\n\u003Cbr>\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/showreel_2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cdiv>#spatialweb #openinternet #interoperable #accessibility #3Dhypermedia\u003C/div>\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"https://matrix.to/#/#xrfragments:matrix.org\" target=\"_blank\" style=\"padding:10px 30px\">Join Matrix Community\u003C/a>\n\u003C/center>\n\u003Cbr>\n\n\u003Ctable style=\"border:none\">\n \u003Ctr>\n\t \u003Ctd style=\"border:none;vertical-align:top; width:49%\">\n\t\t\t\u003Cb>๐ŸŽจ no-code design-first\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿ„ surf 3D scenes in AR/VR\u003C/b>\u003Cbr/>\n\t \u003Cb>๐Ÿ“Ž embeddable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿค interoperable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โ›” network-agnostic, local-first\u003C/b>\u003Cbr/>\n \u003Cb>๐Ÿ’พ compatible with glTF FBX USDZ OBJ and more\u003C/b>\u003Cbr/>\t\t\t\t\t\n\t\t\u003C/td>\n\t\t\u003Ctd style=\"border:none;vertical-align:top\">\n\t\t\t\u003Cb>๐Ÿ”ฎ 99% compatible with \u003Cb>future fileformats\u003C/b>\u003C/b>\u003Cbr/>\n \u003Cb>๐ŸŒฑ friendly to opensource & corporations\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โค๏ธ \u003Cb>no\u003C/b> fileformat or editor lock-in\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿง‘โ€๐ŸŒพ solo-user read-only 3D content\u003C/b>\u003Cbr/>\n\t\t\u003C/td>\n\t\u003C/tr>\n\u003C/table>\n\u003Cbr>\n\n\u003Ch2>Made for 3D designers\u003C/h2>\n[img[xrfragment.jpg]]\n\u003Cbr>\u003CBr>\n\n\n\u003C\u003C\u003C\nSee [[How it works]]\n\u003C\u003C\u003C\n\n\n\u003Ch2>TLDR\u003C/h2>\n\nThe \u003Cb>TLDR\u003C/b> of processing 3D files with XR Fragments [pseudocode]:\n\u003Cbr>\u003Cbr>\n\u003Cdiv>\n \u003Ctextarea spellcheck=\"false\" class=\"sandboxify noresult\" style=\"min-height:190px;width:100%;max-width:800px;\">foreach object in scene:\n if object.extra.href:\n\t object.onClick = updateCameraFromURL(object.extra.href, camera, timeline)\n \nif changed(app.URL):\n camera.updateCameraFromURL(app.URL)\n \t\ndocument.location.href = 'my.org/foo.glb#roomC'\n\n\u003C/textarea>\n\u003C/div> \n\u003Cbr>\n\u003Ch2>Virtual worlds without lock-in\u003C/h2>\n\nScale beyond companies, appstores, network protocols and file-formats:\n\n\u003Cdiv style=\"max-width:600px;box-shadow:none;padding:15px\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/xrfragment.bumper2.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\n\n\u003Ch3>Virtual worlds connected via URLs\u003C/h3>\n\n[img[urls.svg]]\n\n\u003Cbr>\n\nXR Fragments is a spec to link 3D models into a basic interactive XR experience.\u003Cbr>\nThink of it as bundling virtual worlds into a \u003Cb>spatial book\u003C/b>.\u003Cbr>\n\u003Cb>Basically:\u003C/b> 3D hypermedia files (the middle greenzone below).\u003Cbr>\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"width:100%;max-width:900px;border-radius:15px;box-shadow:none;padding:20px\" class=\"border\">\n[img[xrfsweetspot.jpg]]\n\u003C/div>\n\u003Cbr>\u003Cbr>\nXR Fragments \u003Cb>empowers designers\u003C/b> to embed \u003Cb>simple interactions & navigation\u003C/b> inside a \u003Cb>3D file\u003C/b>.\u003Cbr>\nThis \u003Cb>no longer\u003C/b> requires developers to implement trivial interactive stuff.\u003Cbr>\nIt promotes \u003Cb>design-first, secure, durable and interoperable\u003C/b> XR experiences from \u003Cb>3D models\u003C/b>, basically 3D hypermedia, mitigating \u003Cb>handcoded-XR-apps-as-3D-content-burial-sites\u003C/b>.\u003Cbr>\n\u003Cbr>\n\u003Ch2>Why focus on designers and 3D files?\u003C/h2>\n\u003Cbr>\n\u003Cquote>\u003Ci>\"Future 3D file formats commoditize yesterdays 3D engines\"\u003C/i> ~ Leon van Kammen\u003C/quote>\n\u003Cbr>\u003Cbr>\nDevelopers tend to fall in love with \u003Cb>specific shiny\u003C/b> 3D technologies, which typically \u003Cb>buries\u003C/b> 3D content inside them.\u003Cbr>\nThese however, still lack \u003Cb>addressibility\u003C/b> and \u003Cb>interoperability\u003C/b> unlike \u003Cb>3D Models\u003C/b>, which can use XR Fragments \u003Cb>URLs\u003C/b> as a basic primitive.\n\u003Cbr>\u003Cbr>\n\u003Ch2>Getting Started\u003C/h2>\n\nJust get your hands on a 3D editor and follow the steps in the video:\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/gettingstarted2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\u003CBr>\nCheck [[How it works|How it works]], or \u003Ca href=\"example/aframe/sandbox\" target=\"_blank\">view a \u003Cb>demo.glb\u003C/b> scene right now\u003C/a>, or see the menu in the left corner for more.\n\u003Cbr>\u003Cbr>\n\u003Ch2>Presentation\u003C/h2>\n\u003Cbr>\n\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/bfxqm1q_GXw?start=1445\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen>\u003C/iframe>\n\n\u003C!-- persist telescopic unfolds -->\n\u003C\u003Cscript>>\n\u003Cscript>\n([...document.querySelectorAll('u')]).map( (u) => {\n u.addEventListener('click', e => e.target.className = 'show' )\n});\n\u003C/script>\n\u003C\u003Cscript 0>>\n","tags":"Home","title":"XR Fragments","modified":"20250922202134500","list-before":"How it works"}, +{"created":"20230424092557827","text":"\u003Cb>Hyperlink the 3D world\u003C/b>.\u003Cbr>\nA standard for (deep)linking 3D files.\u003Cbr>\n''Turn'' 3D files ''into'' local-first, interactive, accessible \u003Ca href=\"#XR%Movies\">XR movies\u003C/a> & 3D websites.\n\u003Cbr>\u003Cbr>\n\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/hyperlinking-the-3d-world.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cbr>\nEmpower existing 3D\n\u003Cu tabindex=\"0\">fileformats\n \u003Cspan>like \u003Cb>glTF\u003C/b>, \u003Cb>usdz\u003C/b>, \u003Cb>obj\u003C/b>, \u003Cb>collada\u003C/b> which are used in websites, Game Engines, and like \u003Ca href=\"#Edit%20a%203D%20scene%20file\">3D editors\u003C/a>.\u003Cbr>XR Fragments makes 3D files interactive \u003C/span>\n\u003C/u> via \n\u003Cu tabindex=\"0\">URLS\n \u003Cspan>, using any \n \u003Cu tabindex=\"0\">protocol\n \u003Cspan>, not necessarily served via HTTP, but also \u003Ca href=\"https://ipfs.com\" target=\"_blank\">IPFS\u003C/a>, \u003Ca href=\"https://hypercore-protocol.github.io/new-website/guides/getting-started/\" target=\"_blank\">hypercore\u003C/a>, \u003Ca href=\"https://github.com/webtorrent/webtorrent\" target=\"_blank\">webtorrent\u003C/a> e.g\u003C/span>\n\t \u003C/u>\n\t\u003C/span>\n\u003C/u>.\nThis allows spatial\n \u003Cu tabindex=\"0\">interactions \n\t \u003Cspan>, like browser-navigation, teleportation, importing scenes, spatial hypermedia, allowing useful audiovisual immersive\u003C/span>\n\t\t\u003Cu tabindex=\"0\">experiences\n\t\t \u003Cspan>like e-learnings, quiz, realtime-rendered 3D movies, and audiovisual storytelling\u003C/span>\n\t\t\u003C/u>\n\t\u003C/u>\nvia 3D \n\u003Cu tabindex=\"0\">metadata\n \u003Cspan>, so called 'extras' embedded in 3D files ('custom properties' in \u003Ca href=\"https://blender.org\" target=\"_blank\">Blender\u003C/a>)\u003C/span>\n\u003C/u>\nand promote URI's and \n\u003Cu tabindex=\"0\">Local-First\n \u003Cspan> data, which lives local, and ideally only syncs/shares elsewhere via ''open user-operated internet'' protocols.\u003C/span>\n\u003C/u>\n.\n\n\n\u003Cdiv style=\"text-align:center\">\n\u003Cb style=\"font-size:11px\">~10 mins podcast introduction\u003C/b>\u003Cbr>\n\u003Caudio controls src=\"https://coderofsalvation.codeberg.page/xrfragment.media/podcast-xrfragments-intro.mp3\" type=\"audio/mpeg\">\n\u003C/audio>\n\u003C/div>\n\u003Cbr>\nAvoid \u003Cb>cloud lock-in\u003C/b>, and make your 3D experiences \u003Cb>outlast\u003C/b> current technologies.\n\n\u003Cdiv style=\"display:inline-block; padding:0px 20px; border-radius:5px 5px 0px 0px; border:2px solid #555;background: #ededed;font-weight: bold;font-size: 16px;border-bottom: none;\">website.glb#scene1\u003C/div>\n\u003Ca href=\"/example/aframe/sandbox?./../../assets/website.glb\" target=\"_blank\">\n \u003Cimg src=\"https://coderofsalvation.codeberg.page/xrfragment.media/images/website.glb.jpg\" style=\"border-left: 2px solid #555; cursor:pointer\">\n\u003C/a>\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"/example/aframe/sandbox?./../../assets/website.glb\" target=\"_blank\" style=\"padding:10px 30px\">Try 3D file\u003C/a>\n\u003C/center>\n\n\u003Cbr>\n\u003Cdiv style=\"max-width:800px;box-shadow:none\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/showreel_2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\n\u003Cdiv>#spatialweb #openinternet #interoperable #accessibility #3Dhypermedia\u003C/div>\n\u003Ccenter>\n \u003Ca class=\"btn\" href=\"https://matrix.to/#/#xrfragments:matrix.org\" target=\"_blank\" style=\"padding:10px 30px\">Join Matrix Community\u003C/a>\n\u003C/center>\n\u003Cbr>\n\n\u003Ctable style=\"border:none\">\n \u003Ctr>\n\t \u003Ctd style=\"border:none;vertical-align:top; width:49%\">\n\t\t\t\u003Cb>๐ŸŽจ no-code design-first\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿ„ surf 3D scenes in AR/VR\u003C/b>\u003Cbr/>\n\t \u003Cb>๐Ÿ“Ž embeddable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿค interoperable\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โ›” network-agnostic, local-first\u003C/b>\u003Cbr/>\n \u003Cb>๐Ÿ’พ compatible with glTF FBX USDZ OBJ and more\u003C/b>\u003Cbr/>\t\t\t\t\t\n\t\t\u003C/td>\n\t\t\u003Ctd style=\"border:none;vertical-align:top\">\n\t\t\t\u003Cb>๐Ÿ”ฎ 99% compatible with \u003Cb>future fileformats\u003C/b>\u003C/b>\u003Cbr/>\n \u003Cb>๐ŸŒฑ friendly to opensource & corporations\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>โค๏ธ \u003Cb>no\u003C/b> fileformat or editor lock-in\u003C/b>\u003Cbr/>\n\t\t\t\u003Cb>๐Ÿง‘โ€๐ŸŒพ solo-user read-only 3D content\u003C/b>\u003Cbr/>\n\t\t\u003C/td>\n\t\u003C/tr>\n\u003C/table>\n\u003Cbr>\n\n\u003Ch2>Made for 3D designers\u003C/h2>\n[img[xrfragment.jpg]]\n\u003Cbr>\u003CBr>\n\n\n\u003C\u003C\u003C\nSee [[How it works]]\n\u003C\u003C\u003C\n\n\n\u003Ch2>TLDR\u003C/h2>\n\nThe \u003Cb>TLDR\u003C/b> of processing 3D files with XR Fragments [pseudocode]:\n\u003Cbr>\u003Cbr>\n\u003Cdiv>\n \u003Ctextarea spellcheck=\"false\" class=\"sandboxify noresult\" style=\"min-height:190px;width:100%;max-width:800px;\">foreach object in scene:\n if object.extra.href:\n\t object.onClick = updateCameraFromURL(object.extra.href, camera, timeline)\n \nif changed(app.URL):\n camera.updateCameraFromURL(app.URL)\n \t\ndocument.location.href = 'my.org/foo.glb#roomC'\n\n\u003C/textarea>\n\u003C/div> \n\u003Cbr>\n\u003Ch2>Virtual worlds without lock-in\u003C/h2>\n\nScale beyond companies, appstores, network protocols and file-formats:\n\n\u003Cdiv style=\"max-width:600px;box-shadow:none;padding:15px\" class=\"border\">\n\u003C$videojs _autoplay controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/xrfragment.bumper2.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\n\n\u003Ch3>Virtual worlds connected via URLs\u003C/h3>\n\n[img[urls.svg]]\n\n\u003Cbr>\n\nXR Fragments is a spec to link 3D models into a basic interactive XR experience.\u003Cbr>\nThink of it as bundling virtual worlds into a \u003Cb>spatial book\u003C/b>.\u003Cbr>\n\u003Cb>Basically:\u003C/b> 3D hypermedia files (the middle greenzone below).\u003Cbr>\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"width:100%;max-width:900px;border-radius:15px;box-shadow:none;padding:20px\" class=\"border\">\n[img[xrfsweetspot.jpg]]\n\u003C/div>\n\u003Cbr>\u003Cbr>\nXR Fragments \u003Cb>empowers designers\u003C/b> to embed \u003Cb>simple interactions & navigation\u003C/b> inside a \u003Cb>3D file\u003C/b>.\u003Cbr>\nThis \u003Cb>no longer\u003C/b> requires developers to implement trivial interactive stuff.\u003Cbr>\nIt promotes \u003Cb>design-first, secure, durable and interoperable\u003C/b> XR experiences from \u003Cb>3D models\u003C/b>, basically 3D hypermedia, mitigating \u003Cb>handcoded-XR-apps-as-3D-content-burial-sites\u003C/b>.\u003Cbr>\n\u003Cbr>\n\u003Ch2>Why focus on designers and 3D files?\u003C/h2>\n\u003Cbr>\n\u003Cquote>\u003Ci>\"Future 3D file formats commoditize yesterdays 3D engines\"\u003C/i> ~ Leon van Kammen\u003C/quote>\n\u003Cbr>\u003Cbr>\nDevelopers tend to fall in love with \u003Cb>specific shiny\u003C/b> 3D technologies, which typically \u003Cb>buries\u003C/b> 3D content inside them.\u003Cbr>\nThese however, still lack \u003Cb>addressibility\u003C/b> and \u003Cb>interoperability\u003C/b> unlike \u003Cb>3D Models\u003C/b>, which can use XR Fragments \u003Cb>URLs\u003C/b> as a basic primitive.\n\u003Cbr>\u003Cbr>\n\u003Ch2>Getting Started\u003C/h2>\n\nJust get your hands on a 3D editor and follow the steps in the video:\n\u003Cbr>\u003Cbr>\n\u003Cdiv style=\"max-width:600px\">\n\u003C$videojs controls=\"controls\" aspectratio=\"16:9\" preload=\"auto\" poster=\"\" fluid=\"fluid\" class=\"vjs-big-play-centered\">\n \u003Csource src=\"https://coderofsalvation.codeberg.page/xrfragment.media/gettingstarted2024.mp4\" type=\"video/mp4\"/>\n\u003C/$videojs>\n\u003C/div>\n\u003Cbr>\u003CBr>\nCheck [[How it works|How it works]], or \u003Ca href=\"example/aframe/sandbox\" target=\"_blank\">view a \u003Cb>demo.glb\u003C/b> scene right now\u003C/a>, or see the menu in the left corner for more.\n\u003Cbr>\u003Cbr>\n\u003Ch2>Presentation\u003C/h2>\n\u003Cbr>\n\u003Ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/bfxqm1q_GXw?start=1445\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen>\u003C/iframe>\n\n\u003C!-- persist telescopic unfolds -->\n\u003C\u003Cscript>>\n\u003Cscript>\n([...document.querySelectorAll('u')]).map( (u) => {\n u.addEventListener('click', e => e.target.className = 'show' )\n});\n\u003C/script>\n\u003C\u003Cscript 0>>\n","tags":"Home","title":"XR Fragments","modified":"20250925102926494","list-before":"How it works"}, {"created":"20250903111630328","text":"The viewer should ideally \u003Cb>presents a play-button\u003C/b> when:\n\n* at least one animationdata-item is defined in the 3D file\n* and/or when a timeline file (soundtrack or subtitle) sidecar-file is detected\n\nSee [complementary file](#๐Ÿ“œ%20level0:%20File) for detection of sidecar-files, for enhanced accessibility via [WebVTT subtitles](#WebVTT%20subtitles), thumbnails, soundtrack e.g.\n\n\n\n","tags":"","title":"XR Movies","modified":"20250904105805727","type":"text/markdown"}, {"created":"20250516081212327","text":"How can applications discover 3D experiences on a network?\n\n> Answer: the **XRF microformat** \n\nThe XRF microformat are **OPTIONAL** network heuristics which applications can detect across various usecases.\n\n## via HTML webpage\n\nIf the browser/application requests an webpage (`https://nlnet.nl` e.g.) it should check for the [rel-me microformat](https://gmpg.org/xfn/) :\n\n```\n\u003Clink rel=\"me\" href=\"scene.xrf.glb\"/>\n```\n\nThis way the application loads `https://nlnet.nl/scene.glb` when the user types `nlnet.nl` into the URLbar.\u003Cbr>\nOptionally, `type` can be specified for dynamically generated 3D files:\n\n```\n\u003Clink rel=\"me\" href=\"https://worlds.org/scene.php\" type=\"model/gltf+binary\" />\n```\n\nThe `type`-attribute is for fallback-purposes.\u003Cbr>\nViewer-supported 3D file-extensions (`.glb` e.g.) will **ALWAYS** take precedence over the (non)presence of the `type` attribute.\u003Cbr>\nThe reason is that platforms (Mastodon 'labels' e.g.) don't allow specifying type-attributes.\u003Cbr>\nAnother reason is that XR Fragments is filetype-agnostic, so flexibility is expected on the viewer-side.\n\n> NOTE: in case of multiple 3D files mentioned in `\u003Clink rel=\"me\"`, only the first (supported 3D filetype) will be chosen.\n\n## via WebFinger\n\nWhen John has an account on foo.com, how can other applications request his 3D homepage by simply entering `john@foo.com`?\n\n> Answer: it can be requested at `https://foo.com/.well-known/webfinger?resource=acct:john@foo.com`, resulting in:\n\n```\n{\n \"subject\": \"acct:john@foo.com\",\n \"aliases\": [\n \"https://mastodon.example/social/john\",\n \"https://john.foo.com\",\n \"https://3d.john.foo.com/model/scene.glb\"\n ],\n \"properties\": {\n \"http://schema.org/name\": \"John Doe\",\n \"http://schema.org/description\": \"Developer, 3D Enthusiast, and Social Explorer\"\n },\n \"links\": [\n {\n \"rel\": \"http://ostatus.org/schema/1.0/subscribe\",\n \"template\": \"https://mastodon.example/social/john/{uri}\"\n },\n {\n \"rel\": \"self\",\n \"type\": \"text/html\",\n \"href\": \"https://john.foo.com\"\n },\n {\n \"rel\": \"me\",\n \"type\": \"text/html\",\n \"href\": \"https://john.foo.com\"\n },\n {\n \"rel\": \"me\",\n \"type\": \"model/gltf+binary\",\n \"href\": \"https://3d.john.foo.com/model/scene.xrf.glb\"\n }\n ]\n}\n```\n\nThis way the application will load `https://3d.john.foo.com/model/scene.glb` when the user types `john@foo.com` into the user field.\n\n## via Text (URI)\n\nAnother way for an application to trigger loading a 3D scene is by detecting URI's of 3D scene-files any text:\n\n* `foo.glb` (or any other popular 3D extension)\n* `https://foo.com/scene.glb` (or any other popular protocol)\n\nThis way, the application can highlight the link whenever it detects the URI (in a text-file or text-section of a 3D model)","tags":"[[๐Ÿ“œ level1: URL]]","title":"XRF microformat","modified":"20250922171213120","type":"text/markdown"}, {"created":"20250910100333866","text":"Prefixing the `xrf:` to [href](#href)-values **will prevent** [level2](#๐Ÿ“œ%20level2:%20explicit%20links) [href](#href)-values from changing the top-Level URL.\n\n> **Usecase**: for non-shareable URLs like `href: xrf:#t=4,5`, to display a stateful msg e.g.).\n\n**Reason:** XR Fragments is inspired by HTML's [href-attribute](https://en.wikipedia.org/wiki/Hyperlink), which does various things:\n\n1. it updates the browser-location\n2. it makes something clickable\n3. it jumps to another document / elsewhere in the same document\n4. and more\n\nThe `xrf:` scheme will just do 2 & 3 (so the URL-values will not leak into the top-level URL).\n\n## compliance with RFC 3986\n\n* unimplemented/unknown URI schemes (`xrf:...` e.g.) will not update the top-level URL","tags":"[[๐Ÿ“œ level4: prefix operators]] level4","title":"xrf: URI scheme","modified":"20250910100955904","type":"text/markdown"},