I’m using https://play.google.com/store/apps/details?id=com.ss.squarehome2&hl=en&gl=US
But I think for tiddlywiki, a new PageControl-like button list will be enough, because we only use up to 4 layouts per day, isn’t it? Just like we only use up to 10 apps on our phone per day.
I also think we can put the launcher on our home tiddler, so it is easier to open them, and “default layout” is still the “default layout”
A fast prototype, while some layout is not using standard icon field (like my whiteboard plugin), so can’t properly show its icon, I’m fixing this in whiteboard plugin.
\whitespace trim
<$linkcatcher to="$:/layout">
<div class="layout-launcher">
<$list filter="[all[tiddlers+shadows]tag[$:/tags/Layout]]">
<$set name="chosen-cls" filter="[all[current]compare:eq{$:/layout}]" value="layout-launcher-item tc-chosen" emptyValue="layout-launcher-item">
<$link to={{!!title}}>
<div class=<<chosen-cls>>>
<span class="layout-launcher-icon">
<$transclude tiddler={{{ [<currentTiddler>get[icon]] }}}/>
</span>
<span class="layout-launcher-title">
<$transclude field="name"/>
</span>
<span class="layout-launcher-description">
<$transclude field="description"/>
</span>
</div>
</$link>
</$set>
</$list>
</div>
</$linkcatcher>
<style>
.layout-launcher {
display: flex;
flex-direction: row;
width: 100%;
flex-wrap: wrap;
}
.layout-launcher-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 150px;
aspect-ratio: 1;
padding: 5px;
margin: 5px;
}
.layout-launcher-title {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
font-size: 1.2em;
}
.layout-launcher-icon {
width: 70%;
aspect-ratio: 1;
}
.layout-launcher-icon svg {
width: 100%;
height: 100%;
}
.layout-launcher-description {
display: none;
}
.layout-launcher-item:hover .layout-launcher-description {
display: block;
position: absolute;
top: 0;
left: 0;
width: 150px;
background: <<colour tiddler-info-background>>;
}
.layout-launcher-item a {
text-decoration: none;
}
</style>
https://tiddly-gittly.github.io/tw-gamification/
doesn’t load…
This is amazing! I tested on a small touch screen (6.67in) and it works great!
Thank you!
One small issue. The bottom pop ups shall be opened upward. Now when the bottom menu bar is open, touching a button for example storyvview opens the local popup downward.
I know this is a TW limitation.
I included a experimental wasm based game in this demo site, so it is 54MB+, will take a while to load.
Maybe wasm should be loaded using canonical_uri instead.
I move the wasm plugin to another rpeo. Now it is only 7MB.
Yes, there is an issue for that, but I think it need a npm package to fix it, which is not suitable for tw-core, so I don’t know a good way for this.
I want to find a JS library to build a Windows desktop or Android desktop that can have layout icons.
