Web-Drafter update: Color Picker

My very tiny vector graphics application is improving at a snail pace.

I managed to make a colour picker using jQuery and the HTML range input element.

The code isn’t exactly succinct, but it gets the job done.

Because the program is growing larger, I’m trying to use the OOP facets of JavaScript and put the functions in their respective objects as much as possible, the loose functions in the posfunc.js file creates the dialog:

function color_selector_form(color) {
    frgb = color.get_fill_rgb();
    srgb = color.get_stroke_rgb();

    var red_slider = "<input class='fill_slider' id='red_slider' value="+frgb[0]+" type=\"range\" min=\"0\" max=\"255\"> <br> <div id='rfval' >"+frgb[0]+"</div><br> ";
    var green_slider = "<input class='fill_slider' id='green_slider' value="+frgb[1]+" type=\"range\" min=\"0\" max=\"255\"> <br> <div id='gfval' >"+frgb[1]+"</div><br>";
    var blue_slider = "<input class='fill_slider' id='blue_slider' value="+frgb[2]+" type=\"range\" min=\"0\" max=\"255\"> <br> <div id='bfval' >"+frgb[2]+"</div><br>";
    var fcbox = "<span id=\"fillbox\" style=\"background-color: "+color.fill+"; display: block; height: 50px; width: 50px;\">&nbsp</span>";

    var red_stroke_slider = "<input class='stroke_slider' id='red_stroke_slider' value="+srgb[0]+" type=\"range\" min=\"0\" max=\"255\"> <br> <div id='rsval' >"+srgb[0]+"</div><br> ";
    var green_stroke_slider = "<input class='stroke_slider' id='green_stroke_slider' value="+srgb[1]+" type=\"range\" min=\"0\" max=\"255\"> <br> <div id='gsval' >"+srgb[1]+"</div><br>";
    var blue_stroke_slider = "<input class='stroke_slider' id='blue_stroke_slider' value="+srgb[2]+" type=\"range\" min=\"0\" max=\"255\"> <br> <div id='bsval' >"+srgb[2]+"</div><br>";
    var scbox = "<span id=\"strokebox\" style=\"background-color: "+color.stroke+"; display: block; height: 50px; width: 50px;\">&nbsp</span>";

    var retval = "<table><tr><td>Fill<br><br>";
    retval += "Red: <br>" + red_slider + "Green: <br>" + green_slider + "Blue: <br>" + blue_slider + "<br>" + fcbox;
    retval += "</td><td>&nbsp&nbsp&nbsp</td><td>Stroke<br><br>";
    retval += "Red: <br>" + red_stroke_slider + "Green: <br>" + green_stroke_slider + "Blue: <br>" + blue_stroke_slider + "<br>" + scbox;
    retval += "</td></tr></table>";
    return retval;
}

While the pos.js has the $(document).ready() functions for the dynamically created elements:

jQuery(document).on("change mousemove", ".fill_slider", function() {
   selected_color.update_fill(jQuery(this).val(), jQuery(this).attr("id"));
   var id = jQuery(this).attr("id");
   //console.log(id + " " +jQuery(this).val());
   if(id.substring(1, 2) == "r") {
        jQuery("#red_val").html(jQuery(this).val());
       } else  if(id.substring(1, 2) == "g") {
           jQuery("#green_val").html(jQuery(this).val());
       } else  if(id.substring(1, 2) == "b") {
           jQuery("#blue_val").html(jQuery(this).val());
       }
   });

Which in turn calls the appropriate methods in the MyColor object.

MyColor.prototype.update_fill = function(colorval, id) {
    var hexredval = parseInt(colorval).toString(16);
    if(hexredval.length < 2)
        hexredval = "0" + hexredval;
    var channel = id.substring(0,1);
    if(channel == "r")
        this.fill = (this.fill.substring(0, 1) + hexredval.substring(0, 2) + this.fill.substring(3)).toUpperCase();
    else if(channel == "g")
        this.fill = (this.fill.substring(0, 3) + hexredval.substring(0, 2) + this.fill.substring(5)).toUpperCase();
    else if(channel == "b")
        this.fill = (this.fill.substring(0, 5) + hexredval.substring(0, 2)).toUpperCase();
    jQuery("#" + channel + "fval").html(colorval);
    jQuery("#fillbox").css("background-color", this.fill);
    update_color(this);
}

As you can see, the code isn’t really DRY, but I find that making a clumsy solution is a great way to start a project and get anything done whatsoever, and then improve on it (or just keep it until it becomes cluttered).

Interactive jQuery Menu

A few days ago I was asked to update the layout of the website for a store I used to work at.

I thought this was a good chance to get to know jQuery animations, so I put together a bunch of stock images as background, edited pictures of frames and put some text in the frames for the icons.

I worked with artboards in Affinity Designer so I could export multiple images to different files, I also worked with groups and a transparent background so I could make .png files of the frames and put them on top of the background images.

That way I used the background-image css property, with display set to block and could superimpose a png with transparency over another image.

With jQuery I selected all images, where each image has a class “RT” and I used the reserved word this to select the particular instance for mouseover and mouseleave events.

With this I managed to make a fun little menu where the frame with the text grows and shrinks according to mouse-events.

The result can be seen here.

C

I noticed that my programming page was sadly empty.

So to have some actual content I started writing a bit about C so I can rehash and remind myself of what I’ve learned about the C programming language.

It’s some really basic stuff, and of course, I’ve made programs to do a lot more than just print to terminal and work on simple variables, but I have to start somewhere when I write about that stuff.

Let's start at the very beginning. 

A very good place to start.

When you read you begin with ABC.

When you code you compile with G C C

Fontstats Plugin

Today I finished a little WordPress plugin I’ve been working on.

It’s a two part plugin, one php script collects data from any Norwegian designer on DaFont by visiting each site, and by the power of Regex-Grayskull it inserts it into a database on my website.

The WordPress plugin then selects the last sampled date and displays it in a HTML-table on any post or page where I insert the registered shortcode.

Here’s the result:

No.DownloadsDesignerDate SampledCountry
1105053478Måns Grebäck2018-08-15Sweden
222476627Pizzadude - Jakob Fischer2018-08-15Denmark
34482752Johan Waldenström2018-08-15Sweden
43383418Mr.fisk Fonts - Mike Larsson2018-08-15Sweden
53228048Carl Krull2018-08-15Denmark
63213926Fontourist - Hans Gerhard Meier2018-08-15Norway
72696364Listemageren - Klaus Johansen2018-08-15Denmark
82549288Johan Aakerlund2018-08-15Denmark
92381537CheapProFonts - Roger S. Nelsson2018-08-15Norway
101574602HENRIavecunK2018-08-15Sweden
111252004Flight of the Dragon - Hasan Guven2018-08-15Norway
121046455Christian Munk2018-08-15Denmark
13711443Your Own Font - Ellinor Rapp2018-08-15Sweden
14549289Vinterstille TypeFaceLab - Klaus Nielsen2018-08-15Denmark
15548663Adam Ericsson2018-08-15Sweden
16539852bogstav2018-08-15Denmark
17478246Viktor Hammarberg2018-08-15Sweden
18434258Moonbase Press - Svein Kåre Gunnarson2018-08-15Norway
19405213Espen Morten Kvalheim2018-08-15Norway
20349163Staffan Vilcans2018-08-15Sweden
21320365Martin Holm2018-08-15Norway
22319423Thor Christopher Arisland2018-08-15Norway
23313542Jonas Borneland Hansen2018-08-15Denmark
24232922Norwegian Ink / Design for Dough - Frode Nordbø2018-08-15Norway
25204647Anton - Anton Lundström2018-08-15Sweden
26204352David Engelby2018-08-15Denmark
27197461dawnland - Daniel Viberg2018-08-15Sweden
28174658211178 Creative Agency - Morten Talleivsen2018-08-15Norway
29132431Martin Sørensen2018-08-15Denmark
3093643McKack2018-08-15Norway
3191577Andreas Larsen2018-08-15Denmark
3289783Nils Kähler2018-08-15Denmark
3389454Joaquim Marquès Nielsen2018-08-15Denmark
3482460Pär Lundkvist2018-08-15Sweden
3581362Anton Bohlin2018-08-15Sweden
3675469Digital Flame Studios - sindre små2018-08-15Norway
3772604Intense2018-08-15Norway
3862578huskmelk - Rashid Akrim2018-08-15Norway
3960365Kyrre Honohan2018-08-15Norway
4054773Pia Hed Aspell2018-08-15Sweden
4152950Nadia Rosenfeldt2018-08-15Denmark
4251262Linn Mustanoja2018-08-15Sweden
4348790Lars Håhus2018-08-15Sweden
4443621ronjam - Ronja Melcker2018-08-15Sweden
4540805Atle Mo2018-08-15Norway
4635944Erik Jeddere-Fisher2018-08-15Norway
4733222charmingfan2018-08-15Denmark
4832113benjamin rauber2018-08-15Sweden
4930891Arman Ay2018-08-15Sweden
5026875Mark Lund2018-08-15Norway
5125818Botond Bokor2018-08-15Sweden
5225801Andrew Nordquist2018-08-15Sweden
5325763Lisa2018-08-15Norway
5425718Dan Thorup2018-08-15Denmark
5524420Aske Ching2018-08-15Denmark
5621583Andreas2018-08-15Sweden
5721040Carl Enlund2018-08-15Sweden
5820587Bull - Sandra Madsen2018-08-15Denmark
5920237Henrik Johansson2018-08-15Sweden
6020197David Lindecrantz2018-08-15Sweden
6120025Erik Holm2018-08-15Norway
6219772Kristian Dalen2018-08-15Norway
6316964Mandy Pandy2018-08-15Sweden
6416640Studio Indigo - Helena Öhman2018-08-15Sweden
6514532Christian Koch2018-08-15Denmark
6612918Alexander Rossebø2018-08-15Norway
6712518Johan Brodd2018-08-15Sweden
6811158Viktor Örneland2018-08-15Sweden
699507Mathias Alvebring2018-08-15Sweden
709393Boksen2018-08-15Norway
717670vardcentralen2018-08-15Sweden
727514Mathias Rue2018-08-15Denmark
736855Manuela Hardy2018-08-15Norway
746582Caesar2018-08-15Sweden
756511Sara Lindberg2018-08-15Sweden
766497Gröt Havregrynsson2018-08-15Sweden
776272Mattis Folkestad2018-08-15Norway
785465Oliver Waldemar2018-08-15Sweden
794907Simon Jakobsson2018-08-15Sweden
804211KingDGaming - Elias Eriksson2018-08-15Sweden

Regex 101

Today I received an email from the store I used to work at asking me to make a printer friendly version of an online table of information.

As I learned more about regular expressions from the “INF3331” course I took this fall, solving this problem proved to be way easier than any previous attempts at the likes of it.

At times I’ve thought that regexes are harder to read and debug than ordinary programming languages, but with a good editor like Atom or the regex101 page, it all became a lot less stressful.

As far as editors go, I have to admit that I still use emacs when I’m not using an IDE or GUI-editor.

Note to self about regular expressions.

(.*?) to capture zero or more characters in a non-greedy manner

(?:.*?) for the same grouping without backreferences.

$1 or $[group-number] for backreferences in JavaScript and Atom

\1 or \[group-number] for backreferences in Python, PHP.

Perl and PHP also uses \g1 or \g[group-number] for backreferences.

The following characters need to be escaped in regex:

.^$*+?()[{\|

Web Drafter

A tiny online vector graphics application.

Click here to try it out.

As a small project to familiarise myself with JavaScript, jQuery and SVG I started working on a small vector graphics app using the SVG.js library.

At first I was thinking of manipulating SVG-text directly as I had done with my desktop Java applications, but since I found that simply appending or updating the inner html of divs didn’t refresh the SVG canvas and other annoying things I found it was smarter to just use a simple JavaScript library for this.

In addition to learning a lot of jQuery and JavaScript, especially understanding the specifics of JavaScripts idiosyncratic approach to OOP, I learned a bit about which existing libraries there are and how to use them. For this small application, SVG.js did nicely, but I also learned about a larger library called Raphaël, and an interesting little script called Flowtype, that automagically resizes the font size in relation to the window size.

I put the source code of my little application on GitHub here.

Up to now I’ve only managed to do the most basic rectilinear polygons, with the foundations set for snapping and I’m planning to create a simple colour-picker functionality for the stroke, fill and opacity.

The hotkeys are:

cmd+z – UNDO (mac)

ctrl+z – UNDO (windows, linux)

D – Delete the last polygon.

S – Show data on the selected polygon.

Polygons are created by closing the path.

This is done by creating a line where the end coordinate is the same as the first coordinate of the polygon.

Even more modular

Yet another font is in the works, right now it feels a bit like I’m working in a “pipeline” fashion making multiple fonts concurrently. My script font is basically finished (with some spacing and kerning issues to be addressed if it isn’t accepted on DaFont) and a link will be posted when it’s available on all the sites.