Screen Size Calculator

Tips & Tricks
, , ,
#1

Just sharing a tiddly gadget I made for personal use, that may be a fun novelty for anyone else interested. I’ve been trying to implement this for a while but only now did I find the time to familiarize myself enough with TiddlyWiki math operations and filters to accomplish this.

It is a simple screen size calculator that calculates physical dimensions for computer monitors, living room TVs, or generic displays, by converting between inches, millimeters, and calculating width and height from an aspect ratio and common commercial diagonal sizes (like 48’’, 55’’ or 65’’ TVs).

20231027_114719
20231027_114719686×697 12.5 KB

There is also a button at the bottom with templates to quickly introduce common commercial diagonal sizes.
In reality it can be used as a generic “right triangle calculator” to find any hypotenuses by using custom aspect ratios, and can even be used to find pixel dimensions if your introduce pixel counts instead of physical distances in one of the fields. May be useful to find out what TV size you will buy next, or what model best suits your living room, or what size fits your shelf space.

Beware that it doesn’t account for any bezels, frames, rims, or other adornments that are part of the equipment but external to the display itself, as those can vary a lot by specific model, and are impossible to extrapolate. Use it as rough guide at your own risk.

It is packed as a single self contained tiddler, doesn’t modify anything else in your wiki, and includes a little vanity SVG flair you can trim off for compactness sake.

It is probably inefficient and bloated code wise, I’m sure the gurus here could simplify it to alot more elegant solution, but from my testing it seems to be working accurately. If you catch any snags let me know.

Screen Size Calculator.tid (9.0 KB)

8 Likes
#2

Instead of

<$reveal type="popup" state="$:/ScreenSizeState">
<div class="tc-drop-down">
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 15>>">15 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 17>>">17 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 19>>">19 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 21>>">21 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 23>>">23 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 27>>">27 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 32>>">32 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 43>>">43 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 45>>">45 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 50>>">50 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 55>>">55 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 65>>">65 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 75>>">75 ″</$button>
<$button class="tc-btn-invisible tc-tiddlylink" actions="<<actions_menu 85>>">85 ″</$button>


</$reveal>

Use

<$reveal type="popup" state="$:/ScreenSizeState">
<div class="tc-drop-down">
<$list filter="15 17 19 21 23 27 32 43 45 50 55 65 75 85" variable=scr_size>
<$button class="tc-btn-invisible tc-tiddlylink" actions="""<$macrocall $name=actions_menu size=<<scr_size>>/>""" >
<$text text=<<scr_size>>/> ″
</$button>
</$list>
</div>
</$reveal>

In your code, you have forgotten a closing div.

2 Likes
#3

Hey nice optimization, works like a charm, certainly saves a few lines, and I’ve also learned a bit more about markup in the process.

Thanks for the contribution, updated the original post with your code.

1 Like