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
1103892827Måns Grebäck2018-06-20Sweden
222314418Pizzadude - Jakob Fischer2018-06-20Denmark
34459626Johan Waldenström2018-06-20Sweden
43374749Mr.fisk Fonts - Mike Larsson2018-06-20Sweden
53207765Fontourist - Hans Gerhard Meier2018-06-20Norway
63177631Carl Krull2018-06-20Denmark
72686023Listemageren - Klaus Johansen2018-06-20Denmark
82497831Johan Aakerlund2018-06-20Denmark
92364271CheapProFonts - Roger S. Nelsson2018-06-20Norway
101538700HENRIavecunK2018-06-20Sweden
111245929Flight of the Dragon - Hasan Guven2018-06-20Norway
121033442Christian Munk2018-06-20Denmark
13710330Your Own Font - Ellinor Rapp2018-06-20Sweden
14547420Vinterstille TypeFaceLab - Klaus Nielsen2018-06-20Denmark
15521459Adam Ericsson2018-06-20Sweden
16490328bogstav2018-06-20Denmark
17472594Viktor Hammarberg2018-06-20Sweden
18427638Moonbase Press - Svein Kåre Gunnarson2018-06-20Norway
19404483Espen Morten Kvalheim2018-06-20Norway
20348068Staffan Vilcans2018-06-20Sweden
21316580Martin Holm2018-06-20Norway
22312435Jonas Borneland Hansen2018-06-20Denmark
23301200Thor Christopher Arisland2018-06-20Norway
24232271Norwegian Ink / Design for Dough - Frode Nordbø2018-06-20Norway
25204023Anton - Anton Lundström2018-06-20Sweden
26203324David Engelby2018-06-20Denmark
27196948dawnland - Daniel Viberg2018-06-20Sweden
28173191211178 Creative Agency - Morten Talleivsen2018-06-20Norway
29131218Martin Sørensen2018-06-20Denmark
3093446McKack2018-06-20Norway
3189285Joaquim Marquès Nielsen2018-06-20Denmark
3288643Andreas Larsen2018-06-20Denmark
3387377Nils Kähler2018-06-20Denmark
3482373Pär Lundkvist2018-06-20Sweden
3580095Anton Bohlin2018-06-20Sweden
3675391Digital Flame Studios - sindre små2018-06-20Norway
3772448Intense2018-06-20Norway
3862211huskmelk - Rashid Akrim2018-06-20Norway
3960289Kyrre Honohan2018-06-20Norway
4054631Pia Hed Aspell2018-06-20Sweden
4152733Nadia Rosenfeldt2018-06-20Denmark
4251084Linn Mustanoja2018-06-20Sweden
4348458Lars Håhus2018-06-20Sweden
4443374ronjam - Ronja Melcker2018-06-20Sweden
4540511Atle Mo2018-06-20Norway
4635728Erik Jeddere-Fisher2018-06-20Norway
4733175charmingfan2018-06-20Denmark
4831792benjamin rauber2018-06-20Sweden
4930214Arman Ay2018-06-20Sweden
5026798Mark Lund2018-06-20Norway
5125735Lisa2018-06-20Norway
5225732Andrew Nordquist2018-06-20Sweden
5325604Botond Bokor2018-06-20Sweden
5425538Dan Thorup2018-06-20Denmark
5524350Aske Ching2018-06-20Denmark
5621522Andreas2018-06-20Sweden
5720533Bull - Sandra Madsen2018-06-20Denmark
5820114David Lindecrantz2018-06-20Sweden
5920091Henrik Johansson2018-06-20Sweden
6019733Kristian Dalen2018-06-20Norway
6119730Erik Holm2018-06-20Norway
6219452Carl Enlund2018-06-20Sweden
6316900Mandy Pandy2018-06-20Sweden
6414417Christian Koch2018-06-20Denmark
6512824Alexander Rossebø2018-06-20Norway
6612474Johan Brodd2018-06-20Sweden
6711047Viktor Örneland2018-06-20Sweden
689422Mathias Alvebring2018-06-20Sweden
699346Boksen2018-06-20Norway
707635vardcentralen2018-06-20Sweden
717486Mathias Rue2018-06-20Denmark
726803Manuela Hardy2018-06-20Norway
736531Caesar2018-06-20Sweden
746443Sara Lindberg2018-06-20Sweden
756359Gröt Havregrynsson2018-06-20Sweden
766245Mattis Folkestad2018-06-20Norway
776152Studio Indigo - Helena Öhman2018-06-20Sweden
785361Oliver Waldemar2018-06-20Sweden
794855Simon Jakobsson2018-06-20Sweden
804163KingDGaming - Elias Eriksson2018-06-20Sweden

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.

Sips is a lifesaver!

I just recently found out that macOS comes with a terminal-based batch processing application called sips, the scriptable image processing system.

One thing I found out I can do is write:

for i in *.NEF; do sips -s format jpeg $i --out "${i%.*}.jpg"; done

And convert all files in a directory from Nikon Raw files to jpeg.

Another useful option is

sips -Z 1000 *.jpg

This changes the size of all the images in a directory so that the longest size is 1000px at maximum, note that this will overwrite the files with the new resized files, so be sure to work on a copy of the directory and not the original.

What week is this?

Today I was a bit impulsive and registered the domain name weeknum.org.

Then I made a little php-application showing the day of the week, with the background color calculated using the week number, month and day to create a hex code.

I might even try out some AJAX and jQuery on this page and see if I can make it a little more stylish and interactive.

If you want to check start and end dates of another week number, just add the suffix /[week number] to the URL.

For example, if you want to find information about week number 42, then go to weeknum.org/42.