…Here’s how you can do just that, opening the current page in a floating popup window with a custom size and user agent!

To achieve this you can use Automator to set up a service which will be accessible from the “Services” sub-menu of the main Safari menu.

1 Open /Applications/Automator and when the main window opens, select “Service” as the type of document that you want to create.

2 Once selected you can start constructing the workflow. Above the main workflow area (where is says “Drag actions or files here to build your workflow”) you should see a panel with “Service recieves” and several controls. Modify the controls to read “Service recieves no input in Safari”.

3 Now, from the Library of actions in the left-hand column select “Internet”, and the from the second column, drag the “Get Current Webpage from Safari” and “Website Popup” actions into the main workflow area.

4 Finally in the “Website Popup” action choose a size and user agent – I’ve selected 375x667px for iPhone7 and the iPhone user agent – then save the workflow.

You should now be able to preview the current tab in Safari by selecting your new workflow from the “Services” sub-menu of the main Safari menu.

If you want to try this with a different browser it should be possible with just a little bit of extra work. I haven’t tried it myself but it should work if you replace Safari in stage 2 with the browser you want to use, and replace the first action “Get Current Webpage from Safari” with the “Run AppleScript” action. You will then need to write an AppleScript to get the current URL from the browser window – but maybe that’s something for another post…

This is an image of the kind of thing we’re aiming to create.

To create the image we will be using Webkit2Png – a command line tool created by Paul Hammond, and to make this tool available from Safari, we will be using Automator which comes installed on every Mac.

1 First of all download a copy of webkit2png to the desktop of your Mac. Download Webkit2Png. Save this file as ‘webkit2png‘ without any file extension.

2 If you are using Mac OSX 10.11+ (El Capitan), you will need to make a small edit to the script before can continue:

Open webkit2png in your chosen Text Editor / IDE and search for the line 422:

app = AppKit.NSApplication.sharedApplication()

Add the following code before line 422:

# Handles ATS HTTPS requirement introduced in El Cap
    if options.ignore_ssl_check:
        AppKit.NSBundle.mainBundle().infoDictionary()['NSAppTransportSecurity'] = dict(NSAllowsArbitraryLoads = True)

This extra code is to get past the App Transport Security error that El Capitan throws when you request a non-https site.
Now save the file.

3 Now you need to move this file to you /usr/bin/local/ directory. To do this, open Terminal.app that resides in your Utilities directory. If you don’t know where the Utilities directory is located you can open it directly by using the keyboard shortcut ‘⌘⇧U‘ in the Finder. Once Terminal.app is open, you can move the Webkit2Png file from your Desktop to to your /usr/bin/local/ directory with the following command:

sudo mv ~/Desktop/webkit2png /usr/local/bin/

You will be asked to enter your account password, and then the file will be moved to the  /usr/local/bin/ directory.

4 The next thing to do is set the correct file permissions on the webkit2png script. Again using Terminal.app, enter the following command to update the permissions on the file:

chmod a+x /usr/local/bin/webkit2png

5 At this point, webkit2png is ready to use. If you’re happy using the command line, you can simply capture webpages by typing the following command in to Terminal.app:

webkit2png https://www.midwinter-dg.com/my-blog --width=1280 -F --delay=5 --ignore-ssl-check

This command will save a full length screenshot of the url https://www.midwinter-dg.com/my-blog, with a width of 1280px. The flag -F is for full width, the delay to ensure the page and any scripts have time to load and the –ignore-ssl-check is to ensure non https pages will be saved.

However, we want to set up Automator to save a screenshot of the current page directly from Safari to the Desktop…

6 Open Automator.app and select ‘Service‘ from the Document type menu. Above the main workflow panel of the Automator app you will see some dropdown menus that read as follows:
‘Service receives text in any application‘.
Modify this to read:
‘Service receives no input in Safari‘.
Next, from the Library on the left select Internet, and then drag the ‘Get Current Webpage from Safari‘ in to the main workflow panel.

7 Now, from the Library select ‘Utilities‘ and drag the ‘Run Shell Script‘ action in to the workflow panel below the previous action. Modify the ‘Pass input’ menu in the ‘Run Shell Script’ action to read ‘as arguments’, and edit the contents of the action to read:

/usr/local/bin/webkit2png $@ --dir=/Users/***/Desktop/ -w 1280 --clipwidth 1 -F --delay=5 --ignore-ssl-check

where *** is the name of your user account Home folder.
Then save the workflow. In the example above, the screenshot is being saved with a width of 1280px, so I named it ‘Capture Page @ 1280px‘. I also created services for several different widths.

8 To use the new service, open Safari, open a webpage and then from the Safari menu select Services and choose your new service. After a short delay you should see the screenshot saved to your desktop.

If you want to play around with the options available, open Terminal.app and type

webkit2png -- help

to see a full list of all available options.
Enjoy!

Following on form my previous article: How I created a set of Pantone swatches for the Mac OSX color picker, I have created some more additional Mac OSX color palettes.

The following palettes can be found on my resources page:

• CSS Named Colors
• TOYO Swatches
• Focoltone Swatches
• Trumatch Swatches

You can download them from the OSX Color Palettes section

Stage 1 – getting a list of swatches

Whilst it’s very easy to create a custom color palette and add your own colors to it I had no particular desire to try and enter an entire Pantone swatch book by hand. A quick search online revealed several sites with lists of swatches and their respective rgb values. So that’s great – the difficult part has already been done by someone else! I checked out a few lists and in the end settled on this one: http://en.labelpartners.com/pantone_coated_table.html which gave a full set with hex and rgb values laid out in a <table> just perfect for scraping with php.

Stage 2 – scraping the data into a database

The next task was to get the data off the webpage and into a database. For tasks like this I always use PHP Simple HTML DOM Parser. It’s very easy to learn – and makes this kind of task very simple.

Before writing a script to scrape the data I set up a myqsl database ‘pantone_swatches’ with a table ‘coated_swatches’ to hold the data. The table structure was as follows:

CREATE TABLE `coated_swatches` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `hex` varchar(7) DEFAULT NULL,
  `red` varchar(5) DEFAULT NULL,
  `green` varchar(5) DEFAULT NULL,
  `blue` varchar(5) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

At this point I wasn’t really sure if I needed the rgb values or the hex values so I decided to get everything just in case.

Now, with the database ready it was time to scrape the data. I wrote the following php script making use of PHP Simple HTML DOM Parser to sort through each table row (<tr>) and get the text content from each table data cell (<td>) and inset as a row in the database:

//connect to mysql...
$user="root";
$host="localhost";
$password="YOUR_PASSWORD_HERE";
$database="pantone_swatches";
$table="coated_swatches";
$cxn = mysqli_connect ($host, $user, $password, $database)
or die (mysqli_error($cxn));

//include simple html dom...
require('simple_html_dom.php');

//get page source...
$html = file_get_html('http://en.labelpartners.com/pantone_coated_table.html');

$count = 0;

//loop through each <tr>...
foreach($html->find('tr') as $row) {

	//extract values from each <td>...    
	$name 	= $row->find('td', 0)->innertext;		
	$hex 	= $row->find('td', 1)->innertext;
	$red 	= $row->find('td', 2)->innertext;
	$green 	= $row->find('td', 3)->innertext;
	$blue 	= $row->find('td', 4)->innertext;
	
	//ignore <table> 'header' row...
	if($count > 0) {
	
		echo $count.': '.$name.'<br>';
		
		//inset in to db...
		$query="
			INSERT INTO
			$table
			(name, hex, red, green, blue)
			VALUES
			('$name', '$hex', '$red', '$green', '$blue')
		";
		
		$result = mysqli_query ($cxn,$query) or die (mysqli_error($cxn));		
	}
	
	$count++;
}

Once the script was ready I launched it and waited for it to complete then checked out the new table to see if everything was OK. The script performed perfectly but now, how to get those values into the Mac OSX color picker?

Stage 3 – building a list of NSColors

You can manually create a custom color palette by opening the color picker, clicking on the third tab ‘color palettes’ and then clicking on the small ‘gear’ icon and selecting ‘new’. When you do this the new palette is saved in ~/Library/Colors/ with .clr for its file extension. The first thing I tried to do was open one of these .clr files in a text editor. Once I had tried that I quickly realised it wasn’t as simple as copying the structure and saving a new file! So, back to the internet and a bit more research revealed a way to generate a .clr file using Xcode. .clr files can be generated by creating a new NSColorList object and setting colors, like this:

//create list
NSColorList *list = [NSColorList.alloc initWithName:@"My Custom Color Palette"];

//add colors
[list setColor:[NSColor colorWithRed:0.831 green:0.835 blue:0.831 alpha:1.0] forKey:@"Custom Color 1"];
[list setColor:[NSColor colorWithRed:0.765 green:0.773 blue:0.769 alpha:1.0] forKey:@"Custom Color 2"];
[list setColor:[NSColor colorWithRed:0.725 green:0.733 blue:0.733 alpha:1.0] forKey:@"Custom Color 3"];

//save file to ~/Library/Colors/
[list writeToFile: [NSHomeDirectory() stringByAppendingPathComponent:@"Library/Colors/"]];

So now, all I needed to do was generate the objective-c code from the data in the database, the only difference being that the rgb values in the database range from 0 to 255 whereas the rgb values for the NSColor class range from 0 to 1. This small difference was rectified by dividing the database rgb values by 255 and rounding the result to 3 decimal places. The code I used to output the objective-c code was as follows:

//connect to mysql...
$user="root";
$host="localhost";
$password="YOUR_PASSWORD_HERE";
$database="pantone_swatches";
$table="coated_swatches";
$cxn = mysqli_connect ($host, $user, $password, $database)
or die (mysqli_error($cxn));

//get data...
$query = "SELECT * FROM $table";
$result = mysqli_query ($cxn,$query)
		or die (mysqli_error($cxn));
		
$nrows = mysqli_num_rows ($result);

//loop through data...
for($i=0;$i<$nrows;$i++) {

	$row = mysqli_fetch_assoc ($result);
	extract ($row);
	
	//divide rgb values by 255 and echo...
	echo '[list setColor:[NSColor colorWithRed:'.round(($red/255),3).' green:'.round(($green/255),3).' blue:'.round(($blue/255),3).' alpha:1.0] forKey:@"Pantone '.$name.'"];<br />';	
}

Which when executed produced the following result:

[list setColor:[NSColor colorWithRed:0.996 green:0.867 blue:0 alpha:1.0] forKey:@"Pantone Yellow C"];
[list setColor:[NSColor colorWithRed:1 green:0.843 blue:0 alpha:1.0] forKey:@"Pantone Yellow 012 C"];
[list setColor:[NSColor colorWithRed:0.996 green:0.314 blue:0 alpha:1.0] forKey:@"Pantone Orange 021 C"];
// etc…
// etc…
// etc…

Stage 4 – using Xcode to generate the .clr file

To generate the final .clr file I opened Xcode and created a new project of type Cococa Application. Once this was ready I opened the AppDelegate.m file and where the comment ‘// Insert code here to initialize your application’ appeared in the – (void)applicationDidFinishLaunching:(NSNotification *)aNotification method I replaced it with the following:

NSColorList *list = [NSColorList.alloc initWithName:@"Pantone Coated"];

/* COPY AND PASTE THE GENERATED LIST OF COLORS HERE */

[list writeToFile: [NSHomeDirectory() stringByAppendingPathComponent:@"Library/Colors/"]];

Once that was done I did a build and run and as soon as the application had launched I checked out the contents of my ~/Library/Colors/ folder to see a new Pantone Coated.clr file. The next thing to do was open an app (Sketch.app) and then open the color picker to check out the new color palette!

Conclusion

In hindsight the way I went about this was perhaps more lengthy that it could have been. There’s no reason why I couldn’t scrape the page and generate the objective-c code all in one step missing out the database. But as I was not sure how to proceed it seemed better to store the data then work out what to do next. Anyway here’s a short example that does just that:

//include simple html dom...
require('simple_html_dom.php');

//get page source...
$html = file_get_html('http://en.labelpartners.com/pantone_coated_table.html');

$count = 0;

echo 'NSColorList *list = [NSColorList.alloc initWithName:@"Pantone Coated"];';

//loop through each <tr>...
foreach($html->find('tr') as $row) {

	//extract values from each <td>...    
	$name 	= $row->find('td', 0)->innertext;		
	$hex 	= $row->find('td', 1)->innertext;
	$red 	= $row->find('td', 2)->innertext;
	$green 	= $row->find('td', 3)->innertext;
	$blue 	= $row->find('td', 4)->innertext;
	
	//ignore <table> 'header' row...
	if($count > 0) {
	
		//divide rgb values by 255 and echo objective-c code...
		echo '[list setColor:[NSColor colorWithRed:'.round(($red/255),3).' green:'.round(($green/255),3).' blue:'.round(($blue/255),3).' alpha:1.0] forKey:@"Pantone '.$name.'"];<br />';
			
	}
	
	$count++;
}

echo '[list writeToFile: [NSHomeDirectory() stringByAppendingPathComponent:@"Library/Colors/"]];';

There are many sites online with lists of Pantone colors. I also creates a Pantone Pastels, Pantone Metallics and a set of CMYK swatches using the CMYK values and creating the NSColors like this:

[NSColor colorWithDeviceCyan: C_VALUE magenta: M_VALUE yellow: Y_VALUE black: K_VALUE alpha:1.0]

resources

Color Lists

http://en.labelpartners.com/pantone_coated_table.html

http://euro-bags.eu/pantone?limit=all

http://www.ediy.co.nz/pantone-to-rgb

http://www.umsiko.co.za/links/color.html

http://color2u.cocolog-nifty.com/color4u/archives.html

PHP Simple HTML DOM Parser

http://simplehtmldom.sourceforge.net

You can download an archive of compiled .clr containing a set of Pantone Coated, Metallic, Pastel and CMYK swatches on my resources page:
Pantone Swatches for the OSX Color Picker

Open Terminal.app /Applications/Utilities/Terminal.app, and copy and paste the following…

defaults write com.macrabbit.CSSEdit WebKitDeveloperExtras TRUE

…then press return.

You should now be able to right click in the preview window and select ‘Inspect Element’ from the contextual menu to open the Web Inspector.

Don’t like it?

defaults write com.macrabbit.CSSEdit WebKitDeveloperExtras FALSE

To put it back to how it was before.

So if you’re working on a design for a site that will use embedded Tweets, just drag the appropriate Tweet in to your design and edit it to suit.

You can download the Embedded Tweets kit for Sketch from my Resources page.

1 Open xCode and create a new project. Select OSX and Application from the left column, then choose Cocoa Application and type ‘Cocoa Bindings Demo’ for the Product Name. Once you choose a location on your Mac to create the project you will be presented with a standard blank application containing an AppDelegate class and a MainMenu.xib file.

2 You’re going to be adding a slider and text field to the main application window, and then connecting their values using cocoa bindings but first you will need a variable to store this value, so you must create a controller class to store this value.

Select File -> New -> File… (or press cmd N), then select OSX and Cocoa from the left column and then choose Objective-C class and click Next.

Call the new class ‘AppController’ with a Subclass of NSObject, click Next and create the object.

3 Now you need to add the AppController class to the workbench in InterfaceBuilder, so click on the MainMenu.xib to open it and from the Object Library in the Utilities sidebar select Object and drag an instance to the workbench.

Select the object in the workbench and click on the Identity Inspector in the Utilities sidebar. In the top section (Custom Class), click in the Class text field and type ‘AppController’ (you should find that it auto completes).

4 Now you can create the variable to hold the slider / text field value. Open the AppController.h and add an int. Call it sliderAmount. Your code should look like this:

#import <Foundation/Foundation.h>

@interface AppController : NSObject {
@private

	int sliderAmount;
	
}

@property int sliderAmount;

@end

You will also need to add a property, so that the int can be used with KVC and KVO, which is necessary for Cocoa Bindings to work.

Once that is done open the AppController.m and synthesize the sliderAmount. Your AppController.m file should look like this:

#import "AppController.h"

@implementation AppController

@synthesize sliderAmount;

@end

5 So now that you’ve got the Controller Class with an int to hold the value, it’s time to create the interface. Go back to the MainMenu.xib file and click on the Window object in the workbench to open the main application window. Once it is open, go to the Object Library and drag in a span class=”turquoise”>Horizontal Slider and a span class=”turquoise”>Text Field.

Note: In the example I’ve spent a bit of time sizing and positioning the objects, I’ve also given the slider tick marks, but I’ve left its default values of Minimum 0, Maximum 100 and Current 50.

6 So now it’s time for you to bind the interface elements to the int value in the Controller Class.

Click on the slider to select it, then in the Utilities sidebar, click on the Bindings Inspector. You will see a list of all the various values that you can bind. In our case we want to bind the value of the slider, so click the disclosure triangle next to ‘Value’ and click on the checkbox Bind, then from the drop-down menu, select App Controller. Finally, under the field for Model Key Path you should see that it has the value self. Remove this and add the name of the int in the AppController class: sliderAmount (it should auto complete). The slider is now bound to the int value in the AppController class – you should see the correct key path next to Value in the Bindings inspector – (App Controller.sliderAmount).

7 So now our slider is correctly bound to the int value but on its own not much is going to happen! Now it’s time to bind the text field to the same int value. To do that we just repeat the exact same procedure that we used to bind the slider.

8 Now that both interface elements are bound to the same int value it’s time to build an run the app. You should see that when the slider is moved, the text field updates to the new value. It’s fine, but there’s something not quite right – two things actually…

Firstly, the value in the text field only updates when the slider is released and secondly, wasn’t the default value of our slider set to 50?

To get the slider / text filed to update in realtime as the slider is moved, select the slider then in the Utilities sidebar click on the Attributes inspector. Under the ‘control’ section check the checkbox ‘Continuous’. A quick build and run should show the value updating as the slider is moved.

As for the initial value of the slider: normally it would be initialised with the value in the current field of the Attributes inspector, but as the slider is now bound to the int value of sliderAmount it is initialised with that value. To get it to start at 50 (or any other amount for that matter), you need to add an -init method to your AppController class. So open your AppController.m file and edit the code as follows:

#import "AppController.h"

@implementation AppController

@synthesize sliderAmount;

- (id)init
{
	self = [super init];
	
	if(self) {
		
		sliderAmount = 50;
		
	}
	
	return self;
}

@end

A final build and run should see your slider and text field starting with an initial value of 50.

You can find a sample xCode project of this tutorial on my Resources page.

Almost all my front-end design and interface design work is done using Sketch these days. I’m also a massive fan of Google Maps and the Google Maps API. To that end I have created this small kit for those moments when you need to create a mock-up design including a Google Map!

Download Google Maps for Sketch

Whilst I was creating the Google Maps for Sketch kit I made use of my latest app Image Vectorizer, to create the graphics.

the set-up

1 The html used is as before, a <figure> element containing an <img> and a <figcaption>, the only difference being this time I’m allowing myself to use a containing <div> that specifies the type of animation (horizontal, diagonal, vertical…).

<div class="vertical">
	<figure>
		<img src="images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
		<figcaption class="orange">Joni Mitchell</figcaption>
	</figure>
</div>

2 The containing <div> has a position of relative, and from there on the <figure>, <img> and <figcaption> elements are all set to position absolute so they are all positioned on top of each other.

3 Now, the <img> tab is flipped over using a transform. Because it has a backface-visibility of hidden it is now invisible.

4 The final effect is achieved on mouseover. On mouseover, the <figure> element is flipped using a transform that is animated using a css3 transition.

5 Once it if flipped, the <img> which is now flipped back becomes visible whilst the <figcaption> which is flipped over becomes hidden.

And here’s the full demo of my Animated image captions using the css backface-visibility property

*this probably applies to OSX 10.7 as well – I don’t know, as I jumped straight from OSX 10.6 to OSX 10.8.

This is where Automator comes in. Automator allows you to script many tedious tasks on you mac (see my previous posts on using Automator), in this case we will be selecting a new picture and then rewriting the desktop preferences file to use only that selected picture. The finished Automator script will be a ”Service“. It will be available in the Finder under Finder -> Services -> Change All Desktop Picutres…

1 Open Automator

Automator is in the Applications folder. Open it and select “Service” as the document type.

2 Start building your script

At the top of the workflow pane (the right-hand column where it says “Drag actions or files here to build your workflow.”) you will see “Service receives selected text in any application” where ‘text’ and ‘any application’ are select boxes. Change the select boxes to read “Service receives no input in Finder”.

3 Adding the first action “Ask for Finder Items”

From the Library column on the left of the Automator window select “Files & Folders” then from the second column double-click on “Ask for Finder Items” (or drag it in to the workflow).

4 Configuring the “Ask for finder Items” action.

First, change the “prompt” message to “Choose a desktop picture:”, then Select “Start at:” and navigate to where you keep your desktop pictures (I keep all mine in the default: /Library/Desktop Pictures/ folder). Finally make sure that “Allow Multiple Selection” is unchecked.

5 Adding the “Run Shell Script” action

Select “Utilities” from the library and then double-click or drag the “Run Shell Script” action to add it to your workflow.

6 Configuring the “Run Shell Script” action

Once you’ve added the action, make sure that the first two select boxes are set to:

Shell: /bin/bash
Pass input: to stdin

Now in the text area (Where it says cat), delete cat and replace it with the following shell script:

read -e PICTURE;
 
function set_all_desktops
{
defaults write com.apple.desktop Background "{default = {ImageFilePath='$PICTURE'; };}";
killall Dock
}

set_all_desktops

7 Saving and running the new Service

Choose File -> Save and call it “Change All Desktop Pictures…” and you’re done. Now to run your new service switch to the Finder and choose Finder -> Services -> “Change All Desktop Pictures…”. In the dialog that opens simply select the new picture and click on “Choose” and all your desktops will be updated.

In this example we have built the script as a Finder Service, however you could also build it as an Application which could then be put in the dock. In fact I already have and you can download it from the Automator Workflows section of my Software page.