chemicalcrux
/
macrovision
1
0
Fork 0
Code Issues 5 Pull Requests 0 Releases 10 Wiki Activity
Browse Source

Replace the help menu with a much nicer looking screen

tags/v0.1.0
Fen Dweller 5 years ago
parent
e8f954d951
commit
82a321b1e1
5 changed files with 289 additions and 97 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      logos/discord.svg
  2. +72
    -0
      logos/ko-fi.svg
  3. +133
    -51
      macrovision.css
  4. +56
    -34
      macrovision.html
  5. +27
    -12
      macrovision.js

+ 1
- 0
logos/discord.svg View File

@@ -0,0 +1 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 272.1"><style>.st0{fill:#FFFFFF;}</style><path class="st0" d="M142.8 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11s-4.6-11-10.2-11zM106.3 120.1c-5.7 0-10.2 4.9-10.2 11s4.6 11 10.2 11c5.7 0 10.2-4.9 10.2-11 .1-6.1-4.5-11-10.2-11z"/><path class="st0" d="M191.4 36.9h-134c-11.3 0-20.5 9.2-20.5 20.5v134c0 11.3 9.2 20.5 20.5 20.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 18.7V57.4c-.1-11.3-9.3-20.5-20.6-20.5zm-38.6 129.5s-3.6-4.3-6.6-8c13.1-3.7 18.1-11.8 18.1-11.8-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.4-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.6-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.2-1.8-1-2.8-1.7-2.8-1.7s4.8 7.9 17.5 11.7c-3 3.8-6.7 8.2-6.7 8.2-22.1-.7-30.5-15.1-30.5-15.1 0-31.9 14.4-57.8 14.4-57.8 14.4-10.7 28-10.4 28-10.4l1 1.2c-18 5.1-26.2 13-26.2 13s2.2-1.2 5.9-2.8c10.7-4.7 19.2-5.9 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.5 0 0-7.9-7.5-24.9-12.6l1.4-1.6s13.7-.3 28 10.4c0 0 14.4 25.9 14.4 57.8 0-.1-8.4 14.3-30.5 15zM303.8 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1h33.2c17.8.1 34.5-8.8 34.5-29.2v-29.8c.1-20.8-16.6-29.9-34.4-29.9zm174 59.7v-30.6c0-11 19.8-13.5 25.8-2.5l18.3-7.4c-7.2-15.8-20.3-20.4-31.2-20.4-17.8 0-35.4 10.3-35.4 30.3v30.6c0 20.2 17.6 30.3 35 30.3 11.2 0 24.6-5.5 32-19.9l-19.6-9c-4.8 12.3-24.9 9.3-24.9-1.4zM417.3 113c-6.9-1.5-11.5-4-11.8-8.3.4-10.3 16.3-10.7 25.6-.8l14.7-11.3c-9.2-11.2-19.6-14.2-30.3-14.2-16.3 0-32.1 9.2-32.1 26.6 0 16.9 13 26 27.3 28.2 7.3 1 15.4 3.9 15.2 8.9-.6 9.5-20.2 9-29.1-1.8l-14.2 13.3c8.3 10.7 19.6 16.1 30.2 16.1 16.3 0 34.4-9.4 35.1-26.6 1-21.7-14.8-27.2-30.6-30.1zm-67 55.5h22.4V79.7h-22.4v88.8zM728 79.7h-33.2V117l22.1 19.9v-36.2h11.8c7.5 0 11.2 3.6 11.2 9.4v27.7c0 5.8-3.5 9.7-11.2 9.7h-34v21.1H728c17.8.1 34.5-8.8 34.5-29.2v-29.8c0-20.8-16.7-29.9-34.5-29.9zm-162.9-1.2c-18.4 0-36.7 10-36.7 30.5v30.3c0 20.3 18.4 30.5 36.9 30.5 18.4 0 36.7-10.2 36.7-30.5V109c0-20.4-18.5-30.5-36.9-30.5zm14.4 60.8c0 6.4-7.2 9.7-14.3 9.7-7.2 0-14.4-3.1-14.4-9.7V109c0-6.5 7-10 14-10 7.3 0 14.7 3.1 14.7 10v30.3zM682.4 109c-.5-20.8-14.7-29.2-33-29.2h-35.5v88.8h22.7v-28.2h4l20.6 28.2h28L665 138.1c10.7-3.4 17.4-12.7 17.4-29.1zm-32.6 12h-13.2v-20.3h13.2c14.1 0 14.1 20.3 0 20.3z"/></svg>

+ 72
- 0
logos/ko-fi.svg View File

@@ -0,0 +1,72 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1654.77 600" style="enable-background:new 0 0 1654.77 600;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;fill:#444B57;}
.st2{display:inline;opacity:0.48;}
.st3{fill:#FFFFFF;}
.st4{font-family:'Quicksand-Bold';}
.st5{font-size:22.186px;}
.st6{fill:#29ABE0;}
.st7{fill:#FF5E5B;}
</style>
<g id="Background-Exp" class="st0">
<rect x="0" y="0.34" class="st1" width="1654.77" height="600"/>
<g class="st2">
<text transform="matrix(1 0 0 1 1441.1548 34.5146)" class="st3 st4 st5">Color Background</text>
</g>
</g>
<g id="Layer_1">
<circle class="st6" cx="300" cy="300" r="300"/>
<g id="layer1_8_" transform="translate(-37.579964,-135.49927)">
<g id="g40_8_" transform="matrix(1.1421528,0,0,-1.1421528,265.93398,460.73095)">
<g id="g4184_8_">
<path id="path38_8_" class="st3" d="M199.05-4.01c-15.41-1.93-27.94-0.48-27.94-0.48v94.38h18.97
c12.53,0,24.63-5.22,32.81-14.72c5.76-6.69,10.36-16.1,10.36-29.1C233.24,14.29,216.87,1.77,199.05-4.01 M280.24,62.25
c-5.53,29.22-21.26,47.42-37.38,58.68c-16.67,11.64-36.64,17.62-56.97,17.62h-288.57c-10.04,0-13.88-9.8-13.92-14.71
c0-0.64,0.02-3.2,0.02-3.2s-0.47-127.67,0.42-195.85c2.72-40.26,43.06-40.24,43.06-40.24s131.68,0.39,194.84,0.78
c2.96,0.02,5.92,0.34,8.79,1.06c35.96,9,39.68,42.4,39.29,61.02C242.09-56.62,293.08-5.62,280.24,62.25"/>
<path id="path42_10_" class="st7" d="M24.74-62.51c3.14-1.58,5.14,0.38,5.14,0.38S75.81-20.21,96.51,3.93
c18.4,21.6,19.6,57.99-12,71.59c-31.6,13.6-57.61-16-57.61-16c-22.55,24.8-56.68,23.54-72.46,6.76
c-15.78-16.78-10.27-45.59,1.5-61.62c11.05-15.05,59.64-58.35,67-65.68C22.94-61.02,23.48-61.58,24.74-62.51"/>
</g>
</g>
</g>
<g>
<g>
<path class="st3" d="M945.68,421.3c1.13,3.25,1.7,6.29,1.7,9.11c0,7.63-2.9,13.98-8.69,19.07c-5.79,5.08-12.5,7.63-20.13,7.63
c-3.67,0-7.2-0.85-10.59-2.54c-3.39-1.7-6.22-4.09-8.47-7.2l-91.94-121.17l-40.25,38.56v66.52c0,7.63-2.48,13.84-7.41,18.64
c-4.95,4.81-11.37,7.2-19.28,7.2c-7.63,0-13.92-2.47-18.85-7.41c-4.95-4.94-7.42-11.08-7.42-18.43V186.37
c0-7.34,2.54-13.48,7.63-18.43c5.08-4.94,11.58-7.42,19.49-7.42c7.63,0,13.84,2.4,18.64,7.2c4.8,4.81,7.2,11.02,7.2,18.64v115.24
l135.58-133.46c6.49-6.5,13.41-9.75,20.76-9.75c6.49,0,12,2.69,16.52,8.05c4.51,5.37,6.78,11.02,6.78,16.95
c0,5.93-2.54,11.44-7.63,16.52l-92.36,88.13l94.48,124.99C943.14,415.3,944.55,418.06,945.68,421.3z"/>
<path class="st3" d="M1190.14,404.78c-10.17,17.94-24.08,31.85-41.73,41.73c-17.66,9.89-37.07,14.83-58.26,14.83
c-21.47,0-40.96-4.94-58.47-14.83c-17.52-9.88-31.35-23.79-41.52-41.73c-10.17-17.93-15.25-38.2-15.25-60.8
c0-22.59,5.08-42.86,15.25-60.8c10.17-17.93,24-31.92,41.52-41.94c17.51-10.02,37-15.04,58.47-15.04
c21.18,0,40.6,5.02,58.26,15.04c17.65,10.03,31.56,24.01,41.73,41.94c10.17,17.94,15.25,38.21,15.25,60.8
C1205.4,366.58,1200.31,386.84,1190.14,404.78z M1145.87,306.9c-5.79-10.87-13.56-19.28-23.3-25.21
c-9.75-5.93-20.55-8.9-32.41-8.9s-22.67,2.97-32.41,8.9c-9.75,5.93-17.52,14.34-23.3,25.21c-5.79,10.88-8.69,23.24-8.69,37.07
c0,13.84,2.89,26.13,8.69,36.86c5.79,10.74,13.56,19.07,23.3,25c9.74,5.93,20.55,8.9,32.41,8.9s22.67-2.97,32.41-8.9
c9.74-5.93,17.51-14.26,23.3-25c5.79-10.73,8.69-23.02,8.69-36.86C1154.56,330.14,1151.66,317.78,1145.87,306.9z"/>
<path class="st3" d="M1248.82,345.25c-4.95-4.8-7.41-10.87-7.41-18.22c0-7.06,2.47-12.99,7.41-17.79
c4.94-4.8,11.08-7.2,18.43-7.2h73.72c7.34,0,13.49,2.48,18.43,7.41c4.94,4.95,7.42,11.09,7.42,18.43
c0,7.06-2.48,12.92-7.42,17.58c-4.94,4.66-11.09,6.99-18.43,6.99h-73.72C1259.91,352.45,1253.76,350.05,1248.82,345.25z"/>
<path class="st3" d="M1504.09,196.75c-3.96,5.51-5.93,11.51-5.93,18.01v19.91h38.56c6.78,0,12.43,2.19,16.95,6.57
c4.52,4.38,6.78,9.96,6.78,16.74c0,6.78-2.26,12.36-6.78,16.74c-4.52,4.38-10.17,6.57-16.95,6.57h-38.56v149.99
c0,7.35-2.4,13.49-7.2,18.43c-4.81,4.94-10.88,7.41-18.22,7.41c-7.35,0-13.42-2.47-18.22-7.41c-4.81-4.94-7.2-11.08-7.2-18.43
V281.27h-22.88c-6.78,0-12.43-2.18-16.95-6.57c-4.52-4.38-6.78-9.96-6.78-16.74c0-6.78,2.26-12.35,6.78-16.74
c4.52-4.38,10.17-6.57,16.95-6.57h22.88v-19.49c0-21.18,7.27-38.41,21.82-51.69c14.54-13.27,35.52-19.91,62.92-19.91
c10.45,0,19.56,2.12,27.33,6.36c7.77,4.24,11.65,10.74,11.65,19.49c0,6.78-1.98,12.29-5.93,16.52
c-3.96,4.24-8.76,6.35-14.41,6.35c-1.42,0-2.9-0.14-4.45-0.42c-1.56-0.28-3.18-0.56-4.87-0.85c-6.78-1.7-12.43-2.54-16.95-2.54
C1514.83,188.48,1508.05,191.24,1504.09,196.75z M1593.92,198.23c-3.96-3.1-5.93-8.61-5.93-16.52v-8.05
c0-7.9,2.12-13.41,6.36-16.52c4.24-3.1,11.02-4.66,20.34-4.66c9.88,0,16.8,1.56,20.76,4.66c3.95,3.11,5.93,8.62,5.93,16.52v8.05
c0,8.2-2.05,13.77-6.14,16.74c-4.1,2.97-11.09,4.45-20.97,4.45C1604.65,202.89,1597.87,201.34,1593.92,198.23z M1632.89,449.69
c-4.81,4.94-10.88,7.41-18.22,7.41c-7.35,0-13.42-2.47-18.22-7.41c-4.81-4.94-7.2-11.08-7.2-18.43V256.27
c0-7.34,2.4-13.49,7.2-18.43c4.8-4.94,10.87-7.42,18.22-7.42c7.34,0,13.41,2.48,18.22,7.42c4.8,4.95,7.2,11.09,7.2,18.43v174.98
C1640.1,438.61,1637.69,444.75,1632.89,449.69z"/>
</g>
</g>
</g>
</svg>

+ 133
- 51
macrovision.css View File

@@ -215,7 +215,6 @@ body.show-extra-options .options-block.options-block-optional {
width: 100%;
}


#entities {
position: absolute;
user-select: none;
@@ -380,7 +379,7 @@ body.toggle-top-name .top-name.top-name-needed {
position: fixed;
width: 150px;
height: 50px;
z-index: 349539534;
z-index: 10001;
transform: translate(-50%, 0pt);
}

@@ -437,55 +436,6 @@ body.toggle-bottom-name .bottom-name {
}
}

#help {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
position: absolute;
width: 60vw;
height: 60vh;
margin: 0pt;
padding-top: 20vh;
padding-bottom: 20vh;
padding-left: 20vw;
padding-right: 20vw;
text-align: center;
background: #333;
opacity: 0;
z-index: 9999999;
backdrop-filter: blur(5px);
}

#help.visible {
display: flex;
opacity: 0.9;
justify-content: center;
}

#help h1 {
font-size: 150%;
}

#help p {
font-size: 125%;
}

#help ul {
text-align: left;
list-style: circle;
width: 75%;
}

#help li {
padding: 10px;
}

#help button {
height: 10vh;
font-size: 9vh;
}

a {
color: #999;
}
@@ -806,4 +756,136 @@ button:enabled:active {
transform: translate(-50%, -20vh);
opacity: 0;
}
}

#help-menu *::-webkit-scrollbar {
height: 2px;
}
#help-menu *::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
#help-menu *::-webkit-scrollbar-thumb {
background: #e1e1e1;
border: 0px none #ffffff;
border-radius: 50px;
}
#help-menu *::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
#help-menu *::-webkit-scrollbar-thumb:active {
background: #000000;
}
#help-menu *::-webkit-scrollbar-track {
background: #00000000;
border: 0px none #ffffff;
border-radius: 50px;
}
#help-menu *::-webkit-scrollbar-track:hover {
background: #666666;
}
#help-menu *::-webkit-scrollbar-track:active {
background: #333333;
}
#help-menu *::-webkit-scrollbar-corner {
background: transparent;
}

#help-menu {
display: none;
position: absolute;
width: 100vw;
height: 100vh;
z-index: 100001;
overflow-x: hidden;
}

#help-menu.visible {
display: flex;
}

#table-of-contents-holder {
flex: 1 1 30%;
padding: 15px;
background: #111;
overflow-y: auto;
}

#table-of-contents {
line-height: 2;
}

#table-of-contents li {
font-size: 150%;
user-select: none;
}

#table-of-contents li:hover {
color: #ccc;
}

#table-of-contents button {
position: relative;
width: 50pt;
height: 50pt;
font-size: 40pt;
}

#table-of-contents button i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#help-contents-holder {
flex: 1 1 70%;
background: #333;
padding: 25px;
overflow-y: auto;
}

#help-contents > h2 {
font-size: 250%;
}

#help-contents > h2 {
margin-bottom: 16pt;
}

#help-contents > h2:nth-child(1n+2) {
margin-top: 32pt;
}

#help-contents p {
text-indent: 20pt;
max-width: 80em;
line-height: 1.4em;
width: 80%;
margin-bottom: 8pt;
margin-top: 8pt;
}

#help-contents i.fas {
text-indent: 0pt;
margin-left: 2pt;
margin-right: 2pt;
}

#help-contents ul {
list-style: circle;
line-height: 1.4;
}

#help-contents b {
font-weight: bolder;
}

#help-contents li {
margin-left: 2em;
}

#help-contents img {
display: block;
margin: auto;
height: 60pt;
}

+ 56
- 34
macrovision.html View File

@@ -32,41 +32,63 @@

<body class="toggle-bottom-name toggle-top-name toggle-scale">
<input hidden="true" id="file-upload-picker" type='file' multiple='true'>
<div id="help">
<h1>Navigation</h1>
<p>
<ul>
<li>Drag to move entities</li>
<li>Alt-drag to ignore snapping and bounds</li>
<div id="help-menu">
<div id="table-of-contents-holder">
<ul id="table-of-contents">
<li><button id="close-help"><i class="fas fa-times"></i></button></li>
</ul>
</p>
<p>
<ul>
<li>Scroll to zoom.</li>
<li>Alt-scroll to zoom preserve positions on the screen.</li>
<li>Shift-scroll with an entity selected to scale it.</li>
<li>Shift-scroll without a selection to move horizontally.</li>
</ul>
</p>
<h1>Adding/removing entities</h1>
<p>
<ul>
<li>Add new entities with the selection boxes at the top</li>
<li>Remove the selected entity with the Delete key</li>
<li>Alternatively, drag them off the top of the screen</li>
</ul>
</p>
<h1>Sharing</h1>
<p>
<ul>
<li>You can copy a screenshot to your clipboard or save an image to your device in the topbar</li>
<li>To share a scene with others, you can get a link with the Permalink button</li>
<li>Alternatively, you can export the scene as text, or import one from your clipboard</li>
<li>You can also save one scene to your browser and load it later</li>
<li>The current scene is autosaved when closing the tool. You can reload it from the menu.</li>
</ul>
</p>
<button id="close-help">Close</button>
</div>
<div id="help-contents-holder">
<div id="help-contents">
<h2>Overview</h2>

<p>Macrovision is a tool for visualizing sizes. You can create, scale, and pose a variety of silhouettes, ranging from galactic structures to individual atoms.</p>

<h2>Adjusting the View</h2>

<p>Zoom in and out with the scroll wheel. You can also manually change the size of the world in the sidebar, or use the <i class="fas fa-search-minus"></i> and <i class="fas fa-search-plus"></i> buttons on the sides of the viewer.</p>

<h2>Creating Entities</h2>

<p>Each thing in the world is an <b>entity</b>. Macrovision comes with many of these, grouped into categories. For example, in the Naturals category, you'll find large bodies such as stars, country borders, and planets.</p>

<p>If you want to compare something that doesn't exist yet, you can create a custom entity. There are three ways you can do this:</p>

<ul>
<li>Drop an image into the window</li>
<li>Select a file from the <i class="fas fa-bars"></i> menu</li>
<li>Paste an image from your clipboard</li>
</ul>

<p>Custom entities aren't saved or exported.</p>

<h2>Changing Entities</h2>

<p>When you have an entity selected, you'll see additional sections in the sidebar: one for the entity itself, and one for its current view.</p>

<p>The entity options control things like scale (how big the entity is compared to normal) and display name. You can also pick from one or more default sizes.</p>

<p>Each entity has one or more views. For example, many characters have a front view and a back view. Each view has its own properties -- most importantly, they each have their own heights. The different views for an entity are kept in sync. If you double the height of a character and switch to their back view, that view will be twice as tall as usual.</p>

<h2>Sharing</h2>

<p>You can take a screenshot of the current scene with the <b>Screenshot</b> <i class="fas fa-camera"></i> button. The screenshot will be copied to your clipboard. You can also use the <b>Download</b> <i class="fas fa-download"></i> button to download the current scene as an image. This currently only includes the scale and the silhouettes themselves; it won't include things like names.</p>

<p>If you want to show a scene to someone else, you can use <b>Permalink</b> <i class="fas fa-link"></i> to get a permalink. It'll be pretty large, since it represents where everything is. I'll probably add a link shortener at some point!</p>

<p>You can also export the current scene as text with <b>Export</b> <i class="fas fa-share"></i>, copying it to your clipboard. You can import a scene from the clipboard with <b>Import</b> <i class="fas fa-link"></i>.</p>
<h2>About</h2>

<p>This tool was created by me! I'm <b>chemicalcrux</b>.</p>

<p>If you've found the site helpful, consider joining the Discord server &mdash; and maybe support me on Ko-Fi, too!</p>

<a href="https://discord.gg/vqcKVV6"><img src="./logos/discord.svg"></a>
<a href="https://ko-fi.com/chemicalcrux"><img src="./logos/ko-fi.svg"></a>

</div>
</div>
</div>
<div id="popout-menu">


+ 27
- 12
macrovision.js View File

@@ -1288,7 +1288,7 @@ function prepareMenu() {
}
}

const lastHelpChange = 1587679987757;
const lastHelpChange = 1587847743294;

function checkHelpDate() {
try {
@@ -1351,10 +1351,36 @@ function doSize() {
}
}

function prepareHelp() {
const toc = document.querySelector("#table-of-contents");
const holder = document.querySelector("#help-contents-holder");
document.querySelectorAll("#help-contents h2").forEach(header => {
const li = document.createElement("li");
li.innerText = header.textContent;

li.addEventListener("click", e => {
holder.scrollTop = header.offsetTop;
});

toc.appendChild(li);

});
}

document.addEventListener("DOMContentLoaded", () => {
prepareMenu();
prepareEntities();
prepareHelp();

document.querySelector("#open-help").addEventListener("click", e => {
document.querySelector("#help-menu").classList.add("visible");
document.querySelector("#open-help").classList.remove("highlighted");
});

document.querySelector("#close-help").addEventListener("click", e => {
document.querySelector("#help-menu").classList.remove("visible");
});

document.querySelector("#copy-screenshot").addEventListener("click", e => {
copyScreenshot();
@@ -1477,17 +1503,6 @@ document.addEventListener("DOMContentLoaded", () => {
canvasWidth = document.querySelector("#display").clientWidth - 100;
canvasHeight = document.querySelector("#display").clientHeight - 50;

document.querySelector("#open-help").addEventListener("click", e => {
setHelpDate();
document.querySelector("#open-help").classList.remove("highlighted");
document.querySelector("#help").classList.add("visible");
});


document.querySelector("#close-help").addEventListener("click", e => {
document.querySelector("#help").classList.remove("visible");
});

document.querySelector("#options-height-value").addEventListener("change", e => {
updateWorldHeight();
})


Write Preview
Loading…
Cancel
Save