Export Stills from Adobe Premiere Pro using JavaScript

April 13, 2017 | JavaScript, Utilities, Video | 0 Comments

Most of the products in the Adobe Creative Cloud suite of applications have a scripting API that allows you to write JavaScript to automate tasks like moving layers around, adding patterns, or exporting images (e.g., Background repeats with Illustrator).

However, while Illustrator, Photoshop, After Effects, and other apps have a menu option to run a script, Adobe Premiere Pro doesn’t have this. Instead requires that you use their C++ SDK or package Javascript code into Panel and that must be signed before it can be distributed and used (Preimere DevNet, ProPanel example on Github). There are several marketplaces for these panels, but I just needed to do something quick – export still and timecodes from markers – and the panels available didn’t use the format we needed.

The good news is that you can use JavaScript in Adobe Premiere just by opening up the ExtendScript app and running it from there. It’s a little tricky to write these because the documentation is hard to find (the method activeSequence.exportFrameJPEG was not in the documentation and I had to guess it from the exportFrameJPEG used in the github example.

Here’s the current script:

Using CSS to Display Fonts for Greek and Hebrew, but not English

September 30, 2016 | Bible Tools, HTML/CSS | 4 Comments

If you have a website that mixes Latin characters languages like English or Spanish with characters from a non-Latin language like Greek, Hebrew, or Arabic it usually requires a lot of extra CSS classes and <span> tags.

The good news is that there’s an easier way. You can do all of this without <span> tags for each language using the the CSS unicode-range property. It’s lets you create a font stack per language. Here’s a complete example with both Greek and Hebrew:

CSS

@font-face {
	font-family: EzraSILW;
	src: url(SILEOT.woff);
	unicode-range: U+0590-05FF;
}
@font-face {
	font-family: GentiumPlusW;
	font-style: italic;
	src: url(GentiumPlus-I.woff);
	unicode-range: U+0370-03FF, U+1F00-1FFF;
}
body {
	font-family: EzraSILW, GentiumPlusW, Arial;
}

I’ve defined two @font-faces, one for Greek and one for Hebrew, and then specified that they should only apply to the Unicode range for Greek and Hebrew respectively. Then the body font stack will apply them only to the characters in that range and then fall back to Arial for those outside the range.

HTML

<p>This paragraph is in English, using the core Latin unicode letters (unicode-range: U+00-FF) </p>
	
<p>Below this paragraph is a sentence in Greek (unicode-range: U+00-FF) John 1:1</p>
	
<p>Ἐν ἀρχῇ ἦν ὁ λόγος, καὶ ὁ λόγος ἦν πρὸς τὸν θεόν, καὶ θεὸς ἦν ὁ λόγος.</p>

<p>Below this paragraph is a sentence in Hebrew (unicode-range: U+00-FF) Genesis 1:1</p>
	
<p>בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ׃</p>

This is just some simple paragraphs with no additional markup, but because I have all the necessary fonts and unicode ranges it all “just works.” To see it in action, just hit the link below. Also, more details and techniques from Drew McLellan on 24ways.

Live Example »

 

Creating a Logo Background in Adobe Illustrator Using JavaScript

March 21, 2016 | JavaScript | Comments Off on Creating a Logo Background in Adobe Illustrator Using JavaScript

Today, my team was working on options for creating a backdrop like you see at red carpet events or press conference with repeating logos. In our case, we wanted something our graduates could stand in front of at a commencement ceremony to take photos with their families.

One of our designers spent a lot of time manually positioning various sizes and colors of our logos to try out how different patterns might look work, and I thought this would be a perfect time to apply programming to get it just right and be able to iterate quickly. Thankfully Adobe has a great scripting library for doing just this sort of thing.

The Code

To make this work, open up Illustrator, create a new 16’x8′ document, make sure you have two images (JPG, SVG, AI, or anything Illustrator can understand) in the directory, then run the following script (File->Scripts->Other Script).

/*************************
Creates a repeating pattern of images on Illustrator
For a logo wall on a 16' x 8' area

John Dyer (http://j.hn/ 2016)
MIT license
**************************/

// variables/settings
var
	xRepeat = 9, // how many times the first logo will show on the top row (1 less for the second one)
	yRepeat = 5, // how many rows down
	xPadding = 0, // space from left and right edge (0 for bleed)
	yPadding = 400,	// space from top and bottom	
	item1Width = 650, // size in Illustrator units
	item2Width = 400, // size in Illustrator units
	item1Filename = 'DTS.seal.white.ai',
	item2Filename = 'DTS.logo.white.ai';


/// DO THE APP
if (typeof app != 'undefined') {
	runScript();
}

function runScript() {

	var
		// current document
		doc = app.documents[0],
		// add a new layer for our stuff
		layer = doc.layers.add(),

		// script file
		thisFile = new File($.fileName),
		basePath = thisFile.path,
		rootDir = basePath.replace('%20',' ') + '/';

		// open files for calculations
		file1 = new File(rootDir + item1Filename),
		item1 = layer.groupItems.createFromFile( file1 ),
		item1Ratio = item1.height / item1.width,
		item1Height = item1Width * item1Ratio,
		file2 = new File(rootDir + item2Filename),
		item2 = layer.groupItems.createFromFile( file2 ),
		item2Ratio = item2.height / item2.width,
		item2Height = item2Width * item2Ratio,

		// calculate image sizes and offsets
		largestHeight = Math.max(item1Height, item2Height),
		largestWidth =  Math.max(item1Width, item2Width),
		item1xOffset = largestWidth/2 - item1Width/2,
		item1yOffset = largestHeight/2 - item1Height/2,
		item2xOffset = largestWidth/2 - item2Width/2,
		item2yOffset = largestHeight/2 - item2Height/2,

		// calculate gaps
		docWidth = doc.width,
		docHeight = doc.height,
		xGap = (docWidth-largestWidth-xPadding*2) / (xRepeat-1),
		yGap = (docHeight-largestHeight-yPadding*2) / (yRepeat-1);

	// remove the images used for sizing
	item1.remove();
	item2.remove();

	layer.name = 'Fun new pattern';

	// main loop
	for (var x=0; x < xRepeat; x++) {

		for (var y=0; y < yRepeat; y++) {

			// check for the end of the row so we don't create too many
			var do1 = true;
			var do2 = true;

			if (x == xRepeat -1) {
				if (y % 2 == 0) {
					do1 = false;
				} else {
					do2 = false;
				}
			}

			if (do1) {
				var item1 = layer.groupItems.createFromFile( file1 ),
					item1x = xPadding + (x * xGap) + (y % 2 == 0 ? xGap/2 : 0) + item1xOffset,
					item1y = - (yPadding + (y * yGap) + item1yOffset);

				item1.name = 'logo1 ' + x + 'x' + y;
				item1.width = item1Width;
				item1.height = item1Height;
				item1.position = [item1x, item1y];
			}

			if (do2) {
				var item2 = layer.groupItems.createFromFile( file2 ),
					item2x = xPadding + (x * xGap) + (y % 2 != 0 ? xGap/2 : 0) + item2xOffset,
					item2y = - (yPadding + (y * yGap) + item2yOffset);

				item2.name = 'logo2 ' + x + 'x' + y;
				item2.width = item2Width;
				item2.height = item2Height;
				item2.position = [item2x, item2y];
			}
		}
	}
}

 

The Results

Here’s a few patterns we created. You can vary the logos, sizes, and spacing to make it work as needed.

Dallas Theological Seminary Logo Pattern Purple Reversed

Dallas Theological Seminary Logo Pattern White Commencement

Coloring Hebrew Vowels and Accents in HTML/CSS

May 18, 2013 | Bible Tools, HTML/CSS, JavaScript | 19 Comments

In a recent conversation with a Hebrew professor, we discussed adding color to Hebrew vowels and accents. If you’re unfamiliar, Hebrew is different from most Western languages in two main ways. First, it reads right to left (or rtl in HTML terms) and second vowels are represented as dots and lines that can be above or below the consonants.

Browsers seem to handle the rtl part pretty well, but they don’t do an awesome job with the vowel points. And for teaching purposes, it’s very hard to make the vowels a different color from the consonants. Below are a few attempts to do this using various combinations of HTML and JavaScript.

Standard Hebrew Text vs. Pointed Text

In the table below, you can see what Hebrew text looks like with and without vowels. Unlike English, when you remove the vowels the word still takes up the same amount of space.

Hebrew English
Consonants Only אלהים lhm
With Vowels אֱלֹהִים elohim

Coloring Individual Vowels

The first thing I wanted to try was adding <span> tags around vowels and coloring them differently. In the markup below you’ll see the letters pulled out of order with the English HTML, but it’ll give you an idea of what we’re trying to do.

Markup

א<span class="hebrew-vowel">ֱ</span>ל<span class="hebrew-vowel">ֹ</span>ה<span class="hebrew-vowel">ִ</span><span class="hebrew-accent-minor">֤</span>ים

CSS

.hebrew-vowel {
	color: #ff0000;
}
.hebrew-accent-minor, .hebrew-accent-major {
	color: #00ff00;
}

Demo

Hebrew English Result
Original אֱלֹהִ֤ים elohim Correct in all browsers
Span Colors אֱלֹהִ֤ים elohim Chrome/Safari: colored, but misaligned. Firefox/IE: aligned, but not colored

Results

In the example above if you’re using a Webkit based browser on a Mac, you’ll see nice red vowels and green accents. The only problem is that – depending on the font – the vowels are often shifted of place.

However, if you’re using Firefox or Internet Explorer, the vowels and accents stay in the right place, but apparently Firefox and IE can’t color them – they just stay black and ignore the CSS color. Lastly there is the strange case of PC/Chrome which renders the vowels as as standalone entities with an outline for the missing consonants (see screenshots at the end).

Layering Vowels with Absolute Positioning

Since Chrome can’t keep the vowels correctly aligned and Firefox and IE can’t color the vowels, I decided to try to layer the text using absolute positioning. In the example, I’ve tried putting the accents and vowels on a single layer and splitting them into two layers with different colors.

  1. Transparent: The bottom layer is the original text used to correctly size the outer span tag
  2. Green: The second layer has vowels removed and only leaves consonants and accents
  3. Red: The third layer has consonants removed and only leaves consonants and vowels
  4. Black: The top layer has only consonants layered on top of the colored layers below

Markup

<span class="hebrew-layers">
	<span class="hebrew-layers-original">אֱלֹהִים</span>
	<span class="hebrew-layers-accents">אלה֤ים</span>	
	<span class="hebrew-layers-vowels">אֱלֹהִים</span>
	<span class="hebrew-layers-consonants">אלהים</span>
</span>

CSS

.hebrew-layers {
	display: inline-block;
	position: relative;
}
.hebrew-layers .hebrew-layers-original {
	color: transparent;
}
.hebrew-layers .hebrew-layers-vowels {
	position: absolute;
	top: 0;
	right: 0;
	color: #ff0000;
}
.hebrew-layers .hebrew-layers-accents {
	position: absolute;
	top: 0;
	right: 0;
	color: #00ff00;
}
.hebrew-layers .hebrew-layers-consonants {
	position: absolute;
	top: 0;
	right: 0;
	color: #000000;
}

Demo: Layering

Style Demo Result
Original אֱלֹהִ֤ים Correct in all browsers.
Span Colors אֱלֹהִ֤ים Chrome/Safari: colored, but misaligned. Firefox/IE: aligned, but not colored
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים Mostly works. Webkit often misaligns.
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
Mostly works, but messes up accent/vowel pairs

Results

In this case, all browsers (including Firefox and IE) are now able to render different colors for the consonants and vowels. And, for the most part, they all put them in the right place.

There are, however, two problems. First, is that while IE and Firefox render things perfectly almost all the time, Chrome doesn’t always keep the consonants in the same position across layers and that creates what looks like a text-shadow effect. I love using and developing in Chrome, and this is one of the few ares I’ve ever found Chrome/Webkit to be the worst in an area (Chrome 26 vs. IE 10 vs. Firefox 21).

The second problem is a bit more obscure. Even in browsers that render more consistently (IE and Firefox), the layered solution isn’t perfect if you want a different color for accents and vowels. The reason is that the vowel and accent positions change depending on if a consonant has only a vowel, only an accent, or both an accent and a vowel. You can see this on the middle letter where the red dot [hiriq] and green arrow [yetiv] change positions in the two layers example. Since the accents are typically bigger I put them in a layer underneath the vowel point so the vowel would show up more clearly on top. So this effect is a kind of trade-off that may or may not be worth it depending on your teaching or reading goals.

Font Demos

While Chrome is by far the worst at rendering the layers consistently, all browsers have trouble at times with some popular Hebrew fonts. Below I’m including some popular ones (Ezra SIL and SBL Hebrew) with screenshots of how they render. At the end, there is a demo of an entire verse where problems are even more frequent.

Browser Font Matrix

Your Browser Mac/Chrome PC/Chrome Mac/Firefox PC/IE
Default Font
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-default pcchrome-default macfirefox-default ie-default
Ezra SIL
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-ezra pcchrome-ezra macfirefox-ezra ie-ezra
SBL Hebrew
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-sbl pcchrome-sbl macfirefox-sbl ie-sbl
Arial
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-arial pcchrome-arial macfirefox-arial ie-arial

Full Sentence Demo

I have this running in a Bible application:

Bible Web App: Hebrew style

And here is entire Hebrew sentence marked up in all the styles:

Original וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֙הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְה֑וֹם וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם׃
Span Colors וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֙הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְה֑וֹם וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם׃
Double Layered וְהָאָ֗רֶץוְהָאָרֶץוהא֗רץוהארץ הָיְתָ֥ההָיְתָההית֥ההיתה תֹ֙הוּ֙תֹהוּת֙הו֙תהו וָבֹ֔הוּוָבֹהוּוב֔הוובהו וְחֹ֖שֶׁךְוְחֹשֶׁךְוח֖שךוחשך עַלעַלעלעל־פְּנֵ֣יפְּנֵיפנ֣יפני תְה֑וֹםתְהוֹםתה֑וםתהום וְר֣וּחַוְרוּחַור֣וחורוח אֱלֹהִ֔יםאֱלֹהִיםאלה֔יםאלהים מְרַחֶ֖פֶתמְרַחֶפֶתמרח֖פתמרחפת עַלעַלעלעל־פְּנֵ֥יפְּנֵיפנ֥יפני הַמָּֽיִםהַמָּֽיִםהמיםהמים ׃

 

Conclusion

Right now, it seems there isn’t a perfect HTML/CSS way of colorizing the Hebrew pointing system, but the layering solution seems best for making it work across browsers as long as you don’t mind the accents being slightly out of place.

If you have any other ideas, please let me know!

This Site Best Viewed in Google Glass

April 17, 2013 | JavaScript | 15 Comments

Screen Shot 2013-04-17 at 1.35.20 PM

Google Glass is Coming!

You might have noticed that Google Glass is now shipping to early adopters and people who won the #ifihadglass competition.

Google has also released their developer documentation, and this means we’re about to start hearing about a lot of cool, new apps that people are building for Glass.

But sadly most of us won’t be able to test them out.

To remedy this sad state of affairs, I’ve come up with a simple tool to simulate using Glass on a website to start giving people ideas of how they might use it. I also really miss the “Best viewed in Internet Explorer” days of web development, so I’m doing what I can to bring back that culture.

Google Glass jQuery Plugin

Here’s the simple code (running on this post) to help people get started:

jQuery(function($) {

	// add Google's Roboto font
	$('<link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" />')
		.appendTo( $('head') );

	// insert helpful message with base64 image
	$('<div style="position: fixed; top: 0; right: 0; background: rgba(0,0,0,0.9); border: solid 1px #eee; color: #fff; font-family: Roboto, Helvetica, sanserif; z-index: 9999;">' +
			'<div style="padding: 10%; font-size:3.0em; line-height: 1.5;">' +				
				'<p>Google Glass not detected.<p>' + 
				'<p>Please upgrade to view the top right corner of this site.</p>' + 
			'</div>' +
			'<img alt="Glass Logo" style="position: absolute; bottom: 10%; right: 10%;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAA3CAYAAABJnAVSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpCOUI1NUI1QjA5MjA2ODExODA4M0MyODA3MkUyNTY4MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RTIzRjY0NTlGQjAxMUUyQjc2MkYzQTY2MkIzNTg4OSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RTIzRjY0NDlGQjAxMUUyQjc2MkYzQTY2MkIzNTg4OSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjlCNTVCNUIwOTIwNjgxMTgwODNDMjgwNzJFMjU2ODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjlCNTVCNUIwOTIwNjgxMTgwODNDMjgwNzJFMjU2ODAiLz4gPC9yZGY6RGVzY3Jp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" />' + 
		'</div>')
		.appendTo( $('body') )
		.width( $(window).width() / 2 )
		.height( $(window).height() / 2 );
});

How Will You Use It?

I really hope this gets your ideas flowing.

If you use this incredible powerful new script or come up with any additions, please let me know.

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.