Jekyll2016-08-05T18:09:57+05:30http://sugarlabs.github.io/edit-fonts-activity/Sugar Font Editor ActivityKids Make FontsWelcome Page UX Concept2016-07-31T00:00:00+05:302016-07-31T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/welcome-page-ux-concept<p>This is just an idea I had last night for improving the welcome screen UX, if it’s too much work or Dave and Yash don’t like it I understand. However, I may try to code it myself for fun if Yash doesn’t have time. :-)</p>
<p>My fear is that when users start the Edit Fonts activity for the first time they will be be lost and not understand what to do. Some users might not even have a basic understand of what vector drawing is or how a font is made. This welcome screen will at least give the users a basic idea about how to use the activity. Most importantly, this makes the first screen visualy interesting, interactive and fun. Many users may not continue with the activity if the first page is dull and boring.</p>
<p>I’m proposing that the welcome screen have 4 options, represented by icons and text, plus an editable .glyph that reads “Edit Fonts” in the Geo typeface. The Edit-Fonts logotype will be one .glyph file that is only loaded and never saved. see below:</p>
<p><img src="files/img/wireframe_concept_01_welcome_page.svg" alt="UX concept 01" /></p>
<p><img src="files/img/wireframe_concept_02_welcome_page.svg" alt="UX concept 02" /></p>
<p>I have added a Geo-Regular.ufo file to the gh-pages repo with a special “editfonts.glyph” logotype:</p>
<p><a href="https://github.com/sugarlabs/edit-fonts-activity/tree/gh-pages/files/fonts/Geo-Regular.ufo">https://github.com/sugarlabs/edit-fonts-activity/tree/gh-pages/files/fonts/Geo-Regular.ufo</a></p>
<p><img src="files/img/wireframe_concept_welcome_page_03.png" alt="editfonts.glyph" /></p>
<p>There are two neat things about this approach. First, it uses components we already have, the only work will be laying out the page, which Dave or I can attempt if Yash is too busy. Second, if the user never realizes that the edit fonts logotype is editable, it still functions as a logotype. A similar UX design pattern was used for the start screen of the game Super Mario 64, see below:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/eBotFor1Xlw" frameborder="0" allowfullscreen=""></iframe>
<p><a href="https://youtu.be/eBotFor1Xlw">Mario 64 easter-egg</a></p>Eli HeuerThis is just an idea I had last night for improving the welcome screen UX, if it’s too much work or Dave and Yash don’t like it I understand. However, I may try to code it myself for fun if Yash doesn’t have time. :-)Continuous Integration With Travis and flake82016-07-13T00:00:00+05:302016-07-13T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/flake8<p>Last Saturday (July 9th) Eli and I met up to review the codebase, and the main issue I identified was that Travis was not set up with flake8 to test the codebase was conforming to the <a href="https://www.python.org/dev/peps/pep-0008/">pep8 guidelines</a>.</p>
<p>I’d filed <a href="https://github.com/sugarlabs/edit-fonts-activity/issues/17">Issue #17</a> for this, back at the start of the project on May 19.
Yash had started to develop the <code class="highlighter-rouge">[.travis.yml](https://github.com/sugarlabs/edit-fonts-activity/blob/gh-pages/.travis.yml)</code> file to build a .xo bundle but hadn’t complete this just yet, so I commended out most of the code and what remained is very simple:</p>
<div class="language-yml highlighter-rouge"><pre class="highlight"><code><span class="c1"># this makes travis run a fast Docker container system</span>
<span class="s">sudo</span><span class="pi">:</span> <span class="s">false</span>
<span class="c1"># we use python 2.7</span>
<span class="s">language</span><span class="pi">:</span> <span class="s">python</span>
<span class="s">python</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">2.7"</span>
<span class="c1"># we need to install flake8 to use it</span>
<span class="s">before_install</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">pip</span><span class="nv"> </span><span class="s">install</span><span class="nv"> </span><span class="s">flake8"</span>
<span class="c1"># we check the codebase</span>
<span class="s">script</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">flake8</span><span class="nv"> </span><span class="s">--statistics</span><span class="nv"> </span><span class="s">--ignore=E402</span><span class="nv"> </span><span class="s">--exclude=defcon,extractor,fontTools,fontmake,robofab,ufo2ft,ufoLib,snippets</span><span class="nv"> </span><span class="s">."</span>
</code></pre>
</div>
<p>You can see there’s a few arguments passed that are pretty simple.</p>
<p>Stastics prints the number of occurences of each error, so you can fix the most common issues across the codebase first.</p>
<p>E402 is about the order of imports, but since we need to import gi to version later imports, we can’t adhere to that rule, so we ignore it.</p>
<p>We also exclude all the third party libraries, and our snippets.</p>
<p>Eli and I worked together on this and I finished it up on Sunday in <a href="https://github.com/sugarlabs/edit-fonts-activity/pull/65">Pull Request #65</a></p>
<p>Yash had already set up Travis configuration, at <a href="https://travis-ci.org/sugarlabs/edit-fonts-activity">https://travis-ci.org/sugarlabs/edit-fonts-activity</a>, so once this was merged, our button went green:</p>
<p><img src="files/img/2016-07-13-travis-button.png" alt="travis button is green" /></p>
<p>Finally I added a <a href="https://github.com/sugarlabs/edit-fonts-activity/blob/master/CONTRIBUTING.md">CONTRIBUTING.md</a> file that explains how to use it.</p>
<p>I’ll get a similar travis set up for the gh-pages branch too.</p>
<p>Perhaps we could also set up a git hook that runs the flake8 command on each commit…</p>Dave CrosslandLast Saturday (July 9th) Eli and I met up to review the codebase, and the main issue I identified was that Travis was not set up with flake8 to test the codebase was conforming to the pep8 guidelines.Week 6 work2016-07-03T00:00:00+05:302016-07-03T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/week-6-work<p>In this past week I wasn’t able to do much due to some external reasons</p>
<p>I’ve been working on building a mimimum viable product as explained by Dave in his post <a href="https://sugarlabs.github.io/edit-fonts-activity/minimum-viable-product">here</a></p>
<p>We can now create a new Font as shown below
(the current form design is very basic and will be further improved upon after the v1 release)
<img src="files/img/create-new-font.gif" alt="2016-07-03 creating a font" /></p>Yash AgarwalIn this past week I wasn’t able to do much due to some external reasonsRedefining a Minimum Viable Product2016-07-03T00:00:00+05:302016-07-03T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/minimum-viable-product<p>I spoke to Yash on IM and he’s suffered a hardware failure over the weekend so he’s slipped a few days.</p>
<p>Going into Week 7 today, I am worried that we now have a bunch of stuff that is half done, but the <a href="core-user-story">core user story</a> still isn’t realised.</p>
<p>I want to get the development to the point where users can actually do something useful - even if it is very simple and limited - and then have the development structured for iteratation. We can make the product definition smaller and smaller but still wide enough to cover the core user story process. Then when we have something people can use productively, we can survey the whole project and look at the weakest parts and decide on priorities.</p>
<p>I suggest Yash focuses on the early part of core user story process: we need to be able to make a new font, add glyphs to it, and then add contours to those glyphs, and set their sidebearings.</p>
<ul>
<li>
<p>To simplify creating a new font, hardcode it with <a href="https://github.com/google/fonts/blob/master/tools/encodings/latin_unique-glyphs.nam#L3-L103">these 101 glyphs</a> and forget about adding arbitrary new glyphs.</p>
</li>
<li>
<p>To simplify the add contours part, let’s forget curves for now, and just allow for straight lines only; then we can make fonts likehttp://fonts.google.com/specimen/Geo</p>
</li>
<li>
<p>To simplify sidebearings just set them all to 600, and forget about editing them.</p>
</li>
</ul>
<p>Then, the user can make a new font, draw a some squarish letters in a monospaced design, and use their font in the write activity.</p>
<p>Once that works, I suggest to halt writing new code and work on the code documentation, and the .xo packaging, the travis build checking, and other ‘non code’ development tasks.</p>Dave CrosslandI spoke to Yash on IM and he’s suffered a hardware failure over the weekend so he’s slipped a few days.Week 5 Work2016-06-28T00:00:00+05:302016-06-28T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/week-5-work<p>The issue with the stars next to the fonts is solved, closing <a href="https://github.com/sugarlabs/edit-fonts-activity/issues/16">issue 16</a>:</p>
<p><img src="files/img/2016-06-28-stars.gif" alt="2016-06-28 stars bug solved" /></p>
<p>We can also change the Sample Text:</p>
<p><img src="files/img/2016-06-28-sample-text.gif" alt="2016-06-28 sample text" /></p>
<p>There are 2 types of fonts considered while making the Font Manager:
* <strong>System Fonts</strong>, stored in <code class="highlighter-rouge">/usr/share/fonts</code>, the activity will need root access to activate/deactivate fonts
* <strong>User Fonts</strong>, stored in <code class="highlighter-rouge">~/.fonts</code> if they are <strong>Active</strong> or in <code class="highlighter-rouge">/home/<u-name>/.fonts-inactive</code> is they are <strong>Inactive</strong></p>
<p>There are 3 states a font can be in:</p>
<ul>
<li><strong>Locked</strong>(<em>permanently active</em>): all <strong>System Fonts</strong> have this state as the activity cannot disable them
<img src="files/img/2016-06-28-locked-state.png" alt="2016-06-28 Locked State" /></li>
<li><strong>Active</strong>(<em>temporarily active</em>): all <strong>User Fonts</strong> which are active are shown with this icon
<img src="files/img/2016-06-28-active-state.png" alt="2016-06-28 Active State" /></li>
<li><strong>Inactive</strong>(<em>temporarily inactive</em>): all <strong>User Fonts</strong> which are inactive are shown with this icon
<img src="files/img/2016-06-28-inactive-state.png" alt="2016-06-28 Inactive State" /></li>
</ul>
<p>There is a edit font button in the row of the selected font next to active/inactive buttons.
When clicked it opens up the font in the editor to be edited:</p>
<p><img src="files/img/activate.gif" alt="2016-06-28 activating a font" /></p>
<p><img src="files/img/deactivate.gif" alt="2016-06-28 deactivating a font" /></p>Yash AgarwalThe issue with the stars next to the fonts is solved, closing issue 16:Detailed Feature and Task List Week 52016-06-28T00:00:00+05:302016-06-28T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/detailed-feature-list-week-5<h3 id="font-manager">Font Manager</h3>
<ul>
<li>[ ] Convert .ttf to .ufo
<ul>
<li>[x] Load a ttf file if file path is hardcoded</li>
<li>[x] Load a ttf using the Object Chooser Dialog</li>
<li>[ ] Load a ttf using font description from Gtk Pango Context</li>
</ul>
</li>
<li>[ ] Convert .ufo to .ttf using fontmake
<ul>
<li>[x] test this outside sugar</li>
<li>[ ] working inside sugar</li>
</ul>
</li>
<li>[ ] export .ttf file
<ul>
<li>requires conversion of .ufo to .ttf</li>
<li>[ ] save the file as a user given path</li>
</ul>
</li>
<li>[x] Show all the available fonts found in the system font directory</li>
<li>[ ] Allow the user to Activate/Deactivate fonts
<ul>
<li>[x] Build Activate/Deactivate/Lock buttons</li>
<li>[x] enable state change of click</li>
<li>[x] show the buttons only if the font is selected in the font manager</li>
<li>[ ] update the installed fonts list after the activation or deactivation of a font (issue)</li>
<li>[x] Add attribute to font object stating Deactivated or Activated</li>
<li>[ ] Write provisions that a font cannot be Deactivated and Favorite simultanously</li>
<li>[ ] Mark the font as <em>DISABLED</em></li>
</ul>
</li>
<li>[x] General text string preview for all fonts
<ul>
<li>[x] Add a text box in the top center where the user can write a text and all the fonts will render that particular string –No button click needed
<ul>
<li>[x] Take and store the text string every time the textbox text is changed</li>
<li>[x] Update the fontList view with the new string</li>
</ul>
</li>
</ul>
</li>
<li>[x] Allow the user to mark certain fonts as Favorites
<ul>
<li>[x] Add attribute to font object stating favorite</li>
<li>[x] Mark the star next to the font as <em>COLORED</em>
<ul>
<li>[x] when the font_star is clicked
<ul>
<li>[x] Add the font to the favorite list</li>
<li>[x] Save the changes to the main file</li>
</ul>
</li>
</ul>
</li>
<li>[ ] Make a favorite/all switcher button
<ul>
<li>[x] Figure out the UI/UX</li>
<li>[ ] when clicked this will be toggle the font filter in the fontList View</li>
</ul>
</li>
</ul>
</li>
<li>[ ] Allow to user to make ‘collections’ within the library
<ul>
<li>[ ] Add attribute to font object stating collection name</li>
</ul>
</li>
<li>[ ] Convert .ufo to .otf and viceversa
<ul>
<li>done when the .ttf version is done</li>
</ul>
</li>
<li>[ ] save .otf file
<ul>
<li>done when the .ttf version is done</li>
</ul>
</li>
</ul>
<h3 id="a-glyph-editing-interface-together-with-text-preview">A Glyph Editing interface together with text preview</h3>
<hr />
<ul>
<li>[ ] Load a .ufo file
<ul>
<li>[x] can do so if the ufo file path is hardcoded</li>
<li>[ ] can do so if the ufo file path is choosen by the Object Chooser Dialog</li>
</ul>
</li>
<li>[ ] Save .ufo file
<ul>
<li>[x] plainly save the .ufo file at a hardcoded position</li>
<li>[ ] exporting a journal entry with a file_path to the saved ufo</li>
</ul>
</li>
<li>[x] Character Map
<ul>
<li>[x] Display the font info button (i)
<ul>
<li>[x] clicking on this opens the font info page</li>
</ul>
</li>
<li>[x] Make a grid dipslay that makes a required number of boxes and is scrollable</li>
<li>[x] Make the Glyph Rendering class that shows the glyphs in these boxes</li>
<li>[x] if the glyphs are clicked open the glyph editing interface</li>
<li>[ ] add glyph button</li>
</ul>
</li>
<li>[ ] Basic Glyph editing interface
<ul>
<li>[ ] Make a drawing canvas on which the Glyph will be displayed as an outline
<ul>
<li>[x] Display the points and offcurve points</li>
<li>[x] User can move around points
<ul>
<li>[x] How can the user move around small circles ?</li>
</ul>
</li>
<li>[ ] The offcurve points for a curve with the smooth set as yes will stay collinear</li>
</ul>
</li>
</ul>
</li>
<li>[ ] Font Info Page
<ul>
<li>[x] Define the main info which will be in scope of this activity</li>
<li>[ ] Allow the user to edit this info</li>
</ul>
</li>
<li>[ ] Multi Glyph editing interface</li>
<li>[ ] Basic Curve Offsetting- Glyph editing interface</li>
<li>[ ] Caps Curve Offsetting- Glyph editing interface</li>
</ul>
<h3 id="a-testing-interface-for-the-font-manager">A Testing interface for the Font Manager</h3>
<ul>
<li>[ ] A separate more functional testing screen will be made apart from the live preview box.</li>
<li>[ ] A textbox in which the text is rendered using the font, to get visual feedback.</li>
<li>[ ] Provide predefined text templates eg. “the quick brown fox jumps over the lazy dog,” and</li>
<li>[ ] Export image button, to save an image of the rendered textbox</li>
</ul>Yash AgarwalFont ManagerUX Whiteboard Discussion2016-06-25T00:00:00+05:302016-06-25T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/ux-whiteboard-discussion<p>Yash has the core methods working (new, load, save, import, export) and is now working on the font manager parts of the activity.</p>
<p>Eli and I met up to brainstorm the full UX, so that these core methods can be hooked together with the font manager part, and provide a framework to hang the glyph editor part on.</p>
<p>This turned out as a 1h30m discussion:</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/71aY4_ayheg" frameborder="0" allowfullscreen=""></iframe>
<p><a href="https://youtu.be/71aY4_ayheg">https://youtu.be/71aY4_ayheg</a></p>
<p>Here’s some high-res photos of the whiteboard:</p>
<p><img src="files/img/ux-whiteboard-june25-001.jpg" alt="ux-whiteboard-june25" />
<img src="files/img/ux-whiteboard-june25-002.jpg" alt="ux-whiteboard-june25" />
<img src="files/img/ux-whiteboard-june25-003.jpg" alt="ux-whiteboard-june25" />
<img src="files/img/ux-whiteboard-june25-004.jpg" alt="ux-whiteboard-june25" />
<img src="files/img/ux-whiteboard-june25-005.jpg" alt="ux-whiteboard-june25" />
<img src="files/img/ux-whiteboard-june25-006.jpg" alt="ux-whiteboard-june25" /></p>Dave CrosslandYash has the core methods working (new, load, save, import, export) and is now working on the font manager parts of the activity.Bezier Curve Editing In Python2016-06-21T00:00:00+05:302016-06-21T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/bezier-editing-works<p>In the last day I have worked on the following features:</p>
<ul>
<li>Character Map class improved slightly</li>
<li>Multipage System improved</li>
<li>Vertical Toolbars improved</li>
<li>Repo cleaned up</li>
<li>Code merged into Gonzalo’s “Favorite Fonts” Activity on <a href="https://github.com/sugarlabs/edit-fonts-activity/tree/master">master branch</a></li>
</ul>
<p>Here is a gif showing all the features:</p>
<p><img src="files/img/2016-06-20-activity.gif" alt="2016-06-20 activity preview" /></p>
<p>Note that the icons in the vertical toolbars are temporary placeholders at the moment.</p>
<p>The biggest progress made today is that “Drag n Drop” of points is now working, enabling Bezier curves to be edited:</p>
<p><img src="files/img/2016-06-20-bezier.gif" alt="2016-06-20 bezier editing" /></p>Yash AgarwalIn the last day I have worked on the following features:Week 4 Work2016-06-19T00:00:00+05:302016-06-19T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/week-4-work<h2 id="new-features">New Features</h2>
<ul>
<li>few improvements to the Character Map class</li>
<li>Font Info Box added</li>
<li>Multipage System</li>
<li>Export/Import Buttons (they still require a little bit of work)</li>
</ul>
<p>Here is a gif showing all the features</p>
<p><img src="files/img/multipage.gif" alt="pic" /></p>
<h2 id="font-editor-area">Font Editor Area</h2>
<p><em>Its the box in the center of the screen where the user will be able to edit the glyphs or create new ones</em></p>
<p><img src="files/img/wireframe_concept_01_first_prototype.svg" alt="pic" /></p>
<p>I’m making a draggable object on a Gtk drawing area for the making control points for the Bezier curves in a Font Outline</p>
<p>You can find an Intreactable Bezier curve <a href="http://pomax.github.io/bezierinfo/#introduction">here</a> to get a better understand this. This is a great guide on bezier curves from <a href="https://twitter.com/TheRealPomax">Pomax</a>.</p>
<p>Up till now I can move the object from one place to another on mouse click or on any other event.
Here is a gif showing this</p>
<p><img src="files/img/moving-point.gif" alt="pic" /></p>
<p><strong>[Update, Sunday, 19th June]</strong></p>
<p>Now I have completed the Drag and Drop task.
Here is a gif
<img src="files/img/drag_point.gif" alt="pic" /></p>Yash AgarwalNew FeaturesThe core Font Editor User Story2016-06-17T00:00:00+05:302016-06-17T00:00:00+05:30http://sugarlabs.github.io/edit-fonts-activity/core-user-story<p>(Reposted from the sugar-devel list)</p>
<p>I think Yash’s main job for the next week is to make the core methods work: new, load, save, import, export.
These are around 90% at this moment and I expect Yash will nail them this weekend.</p>
<p>Once they are working well, then I suggest Yash moves on to the core methods needed to edit a glyph:
editing the points is half of that, and editing the sidebearings is the other half.
Probably sidebearings is the easier one!</p>
<p>For editing points, there is</p>
<ol>
<li>repositioning existing points</li>
<li>adding new points to existing contours</li>
<li>removing points from a contour that ‘breaks’ an closed contour into an open one</li>
<li>‘merging’ points, where they are removed from a closed contour without breaking it open</li>
<li>adding new points to make a new contour, a “pen tool.”</li>
</ol>
<p>Perhaps the best primer on the ‘pen tool’ is the video made by John Warnock - one of the Adobe founders, who invented Adobe Illustrator 30 years ago - that was included in the very first version of Adobe Illustrator:</p>
<iframe width="420" height="315" src="https://www.youtube-nocookie.com/embed/sAbjajnLZY0" frameborder="0" allowfullscreen=""></iframe>
<p><a href="https://youtu.be/sAbjajnLZY0">https://youtu.be/sAbjajnLZY0</a></p>
<p>There are various ways of calculating Bezier splines, and some are much faster than others.
<a href="http://incolumitas.com/2013/10/06/plotting-bezier-curves">incolumitas.com/2013/10/06/plotting-bezier-curves</a> has sample Python code, <a href="http://incolumitas.com/pages/impressum">which is public domain</a> and you can use freely.</p>
<p>And of course the best resource for learning about Bezier code is <a href="http://pomax.github.io/bezierinfo/">pomax.github.io/bezierinfo</a></p>
<h2 id="what-is-needed-for-a-v10">What is needed for a v1.0</h2>
<p>Imagine you are using it for the first time…
What are the essential things that you do?
That is the “core” <a href="https://en.wikipedia.org/wiki/User_story">User Story</a>…
Something like this:</p>
<ul>
<li>You need to make a new font,</li>
<li>add some glyphs,</li>
<li>add some contours to those glyphs,</li>
<li>move their points around and set their sidebearings,</li>
<li>save your work in a UFO,</li>
<li>export your font as a OTF,</li>
<li>install the OTF in the system,</li>
<li>and use it in another activity.</li>
</ul>
<p>When you can do that, you’ll have a v1.0 :)</p>Dave Crossland(Reposted from the sugar-devel list)