Update README.md / version

newemka · May 19, 2024 · e1dd1d6 · e1dd1d6
1 parent 231481a
commit e1dd1d6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,28 +1,39 @@
 # 🌤️MSDFtron🌈
-[![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/newemka/msdftron/total?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtNzQyLDApIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEyMSwwKSI+CiAgICAgICAgICAgIDxyZWN0IHg9IjYyMSIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBzdHlsZT0iZmlsbDpub25lOyIvPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNTE4NTE5LDMyOCwtMi4wNzQwNykiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwMiwxMy42NDNMNjAyLDRMNTk4LDRMNTk4LDEzLjY0M0w1OTIuOTI5LDEzLjY0M0w2MDAsMjEuMzU3TDYwNy4wNzEsMTMuNjQzTDYwMiwxMy42NDNaIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNSwzMjgsLTEuNSkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTU4NiwzMUw2MTQsMzFMNjE0LDIxTDYxMCwyMUw2MTAsMjdMNTkwLDI3TDU5MCwyMUw1ODYsMjFMNTg2LDMxWiIgc3R5bGU9ImZpbGw6d2hpdGU7Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=&label=%F0%9F%93%A6)](#) [![last commit](https://img.shields.io/github/last-commit/newemka/msdftron)](#) 
+[![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/newemka/msdftron/total?logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtNzQyLDApIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEyMSwwKSI+CiAgICAgICAgICAgIDxyZWN0IHg9IjYyMSIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBzdHlsZT0iZmlsbDpub25lOyIvPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNTE4NTE5LDMyOCwtMi4wNzQwNykiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwMiwxMy42NDNMNjAyLDRMNTk4LDRMNTk4LDEzLjY0M0w1OTIuOTI5LDEzLjY0M0w2MDAsMjEuMzU3TDYwNy4wNzEsMTMuNjQzTDYwMiwxMy42NDNaIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNSwzMjgsLTEuNSkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTU4NiwzMUw2MTQsMzFMNjE0LDIxTDYxMCwyMUw2MTAsMjdMNTkwLDI3TDU5MCwyMUw1ODYsMjFMNTg2LDMxWiIgc3R5bGU9ImZpbGw6d2hpdGU7Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=&label=%F0%9F%93%A6)](#) [![last commit](https://img.shields.io/github/last-commit/newemka/msdftron)](#)
 
+[![Download](https://img.shields.io/badge/Download_MSDFtron_v1.0.0_beta-FF3A9E?style=for-the-badge&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtNzQyLDApIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEyMSwwKSI+CiAgICAgICAgICAgIDxyZWN0IHg9IjYyMSIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBzdHlsZT0iZmlsbDpub25lOyIvPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNTE4NTE5LDMyOCwtMi4wNzQwNykiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwMiwxMy42NDNMNjAyLDRMNTk4LDRMNTk4LDEzLjY0M0w1OTIuOTI5LDEzLjY0M0w2MDAsMjEuMzU3TDYwNy4wNzEsMTMuNjQzTDYwMiwxMy42NDNaIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNSwzMjgsLTEuNSkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTU4NiwzMUw2MTQsMzFMNjE0LDIxTDYxMCwyMUw2MTAsMjdMNTkwLDI3TDU5MCwyMUw1ODYsMjFMNTg2LDMxWiIgc3R5bGU9ImZpbGw6d2hpdGU7Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=
+)](https://github.com/newemka/MSDFTron/releases/tag/v1.0.0-beta)
 
+### Goal
 
-The goal of this project is to democratize and hopefully simplify the process of converting fonts for [Tooll3](https://tooll.io/) users. 
+The goal of this project is to democratize and hopefully simplify the process of converting fonts for [Tooll3](https://tooll.io/) users and artists who are not always up to use command line for such task.
 
-In Tooll, the [Text], [TextOutline2] and [TextSprites] operators are using *.fnt* files combined with a bitmap *.png*.
+In Tooll3, the [Text], [TextOutline2] and [TextSprites] operators are using *.fnt* files combined with a bitmap *.png*.
 
-MSDFtron will help you generate this couple of files for .ttf, .otf and .woff font files so you can easily use any font. 
+MSDFtron will help you generate this couple of files for .ttf, .otf and .woff files so you can easily use any font.
 
-MSDFtron offers GUI experience instead of the command line process described here:
-[Tooll3 wiki: Adding Fonts](https://github.com/tooll3/t3/wiki/help.AddingFonts)
+### Portable application
+No need to bother with an installer, just **unpack and run MSDFtron.exe**
 
-[![Download](https://img.shields.io/badge/Download_MSDFtron_v0.2.0_alpha-FF3A9E?style=for-the-badge&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtNzQyLDApIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEyMSwwKSI+CiAgICAgICAgICAgIDxyZWN0IHg9IjYyMSIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBzdHlsZT0iZmlsbDpub25lOyIvPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNTE4NTE5LDMyOCwtMi4wNzQwNykiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwMiwxMy42NDNMNjAyLDRMNTk4LDRMNTk4LDEzLjY0M0w1OTIuOTI5LDEzLjY0M0w2MDAsMjEuMzU3TDYwNy4wNzEsMTMuNjQzTDYwMiwxMy42NDNaIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNSwzMjgsLTEuNSkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTU4NiwzMUw2MTQsMzFMNjE0LDIxTDYxMCwyMUw2MTAsMjdMNTkwLDI3TDU5MCwyMUw1ODYsMjFMNTg2LDMxWiIgc3R5bGU9ImZpbGw6d2hpdGU7Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=
-)](https://github.com/newemka/MSDFTron/releases/tag/v0.2.0-alpha)
+### GUI
+MSDFtron offers graphic user interface experience, instead of the command line process described here: [Tooll3 wiki: Adding Fonts](https://github.com/tooll3/t3/wiki/help.AddingFonts)
 
+[![Download](https://img.shields.io/badge/Download_MSDFtron_v1.0.0_beta-FF3A9E?style=for-the-badge&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE0IDE0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MjsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtNzQyLDApIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQzIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEyMSwwKSI+CiAgICAgICAgICAgIDxyZWN0IHg9IjYyMSIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBzdHlsZT0iZmlsbDpub25lOyIvPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNTE4NTE5LDMyOCwtMi4wNzQwNykiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTYwMiwxMy42NDNMNjAyLDRMNTk4LDRMNTk4LDEzLjY0M0w1OTIuOTI5LDEzLjY0M0w2MDAsMjEuMzU3TDYwNy4wNzEsMTMuNjQzTDYwMiwxMy42NDNaIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjUsMCwwLDAuNSwzMjgsLTEuNSkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTU4NiwzMUw2MTQsMzFMNjE0LDIxTDYxMCwyMUw2MTAsMjdMNTkwLDI3TDU5MCwyMUw1ODYsMjFMNTg2LDMxWiIgc3R5bGU9ImZpbGw6d2hpdGU7Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=
+)](https://github.com/newemka/MSDFTron/releases/tag/v1.0.0-beta)
 
+### How to use it?
+Once the zip file unpacked, run MSDFtron.exe 
+
+- Make sure you have a folder with the fonts you want to convert. (MSDFtron will generate the data and png files in the same folder)
+- Click on *Select a font file* 
+- Browse to the folder containing your fonts, select a font a click open. (Don't use Windows font folder)
+- Click the *Convert* button 
+- Open the folder containing your font, check the png file (We want to maximize the use of the space)
+- If there is too much empty space, increase the Font Size 
+- If more than one png file are generated, you can increase the Texture Size
+- Click *Convert* again 
 
 ### References
 [msdfgen](https://github.com/Chlumsky/msdfgen) by Chlumsky who developed the MSDF technique.
 
 [msdf-bmfont-xml](https://soimy.github.io/msdf-bmfont-xml/) by soimy, used to create font texture atlas.
-
-
-
-
-
diff --git a/src/about.html b/src/about.html
@@ -16,7 +16,7 @@
       <h2>🌤️MSDFtron🌈</h2>
       <p>Simplifies font conversion<br>
         for <a href="https://tooll.io/">TOOLL3</a> users.<br>
-        version: Alpha v0.2.0 <br><a href="https://github.com/newemka/MSDFTron">github repository</a></p>
+        version: 1.0.0 Beta <br><a href="https://github.com/newemka/MSDFTron">github repository</a></p>
 
       <p>MIT license</p>
       <p>by <a href="https://github.com/newemka">newemka</a></p>

diff --git a/src/index.html b/src/index.html
@@ -41,15 +41,20 @@ <h1>🌤️MSDFtron🌈</h1>
               alt="reset to default setting value" height="15" width="15" />Font
             Size</div><input type="number" id="FontSize" step="1" value="82" required>
           <span class="tooltiptext">Increase if too much empty space in created image; decrease if two images were
-            created</span>
+            created <span class="highlight">(Tooll3 supports only one atlas map per font)</span>. You might need to
+            increase this
+            value for
+            fonts
+            with lots of small details (i.e. a grunge font)</span>
         </div>
 
         <div class="tooltip">
           <div class="setting" data-target="TextureSize"><img src="images/reset_setting.svg"
               alt="reset to default setting value" height="15" width="15" />Texture Size</div><input type="number"
             id="TextureSize" step="256" value="1024" required>
-          <span class="tooltiptext">Higher value doesn't mean you'll get better result. Use 2048 for fonts with fine
-            structures or curves</span>
+          <span class="tooltiptext">A higher value doesn't mean you'll get better result. Use high resolution for fonts
+            with lots of small details (i.e. a grunge font) or if you need to pack a lot of glyphs (Chinese, Japanese,
+            Korean...) </span>
         </div>
 
         <div class="tooltip">
@@ -58,7 +63,7 @@ <h1>🌤️MSDFtron🌈</h1>
             id="DistanceRange" step="1" value="4" required>
           <span class="tooltiptext">This will impact the softness of the font rendering and range of shadow. Too low
             causes
-            aliasing. Too high artifacts.</span>
+            aliasing. Too high artifacts. </span>
         </div>
 
         <div class="tooltip">
@@ -73,7 +78,7 @@ <h1>🌤️MSDFtron🌈</h1>
           <label class="switch">
             <input id="JsonXml" type="checkbox" checked>
             <span class="slider"></span>
-            <span class="tooltiptext">Data type, keep it checked for Tooll3, if unchecked you'll get a json file</span>
+            <span class="tooltiptext">Data type, keep it checked for Tooll3. </span>
           </label>
 
         </div>
@@ -117,7 +122,7 @@ <h1>🌤️MSDFtron🌈</h1>
   </div>
 
   <div class="ribbon right rainbow">
-    <p>Alpha v0.2.1</p>
+    <p>v1.0.0 Beta</p>
   </div>
 
 </body>

diff --git a/src/style.css b/src/style.css
@@ -234,10 +234,18 @@ input {
 
   &:focus {
     outline: 0;
-    border-color: #ff00b3;
+    border: 1px solid #ff00b3;
   }
 }
 
+textarea:focus,
+select:focus,
+button:focus {
+  border: none;
+  outline: 1px solid #ff00b3;
+  /*box-shadow: 0 0 10px #ff00b3;*/
+}
+
 
 .hidden {
   visibility: hidden;
@@ -280,7 +288,7 @@ input {
   visibility: hidden;
   /*width: 240px;*/
   background-color: rgb(0, 78, 109);
-  color: #fff;
+  color: rgb(133, 220, 255);
   text-align: center;
   border-radius: 6px;
   padding: 2px 2px 2px 10px;
@@ -323,20 +331,24 @@ input {
   width: 60px;
 }
 
+.highlight {
+  color: white;
+}
+
 /*#myForm:hover~.czone {
 
   opacity: 0.3 !important;
 
 }*/
 
-h1 {
+/* h1 {
   -webkit-user-select: none;
-  /* Safari */
+
   -ms-user-select: none;
-  /* IE 10 and IE 11 */
+  
   user-select: none;
-  /* Standard syntax */
-}
+
+} */
 
 /* Button */
 .genButton {