#dataurl

[shizzymcfizzy]

[jsfmp]

Sparklines in FileMaker

There was a tweet a little while ago about getting sparklines* into FileMaker with just a font.  A reply to the tweet stated that to really be useful we'd need to install the font on client machines. Good point.

I saw that the font was open-sourced and hosted on GitHub, so I wondered if we could use the RawGit CDN to use it as a web font** in FileMaker web viewers, so there’d be no installation necessary... 

...and we can!

Caveats

Users must have an internet connection since this is a web font.

RawGit has no uptime or support guarantees so this should not be used for mission-critical solutions.

Product Support

In my testing, this works successfully in:

FileMaker Pro on Mac

FileMaker Pro on Windows

FileMaker Go

WebDirect on Mac  (tested on Mac FMServer)

WebDirect on Windows: Chrome only (tested on Mac FMServer)

Custom Web Publishing (as with any web font)

I did not get this to work in WebDirect in Edge or IE on Windows (Mac FMServer) but I didn't try to troubleshoot it. I leave that to you — and please reply below if you find a fix! :-)

The version of FileMaker shouldn't matter, although the OS version might, since web viewers use the browser engine that's native to the OS.

The demo

Download the demo   (no email registration necessary!)

I've put comments in the FileMaker file.  Basically, we need to define the @font-face(s) in the CSS, linking to the hosted version of each font you'll need. In my testing, Mac needs only the .woff version of the font and an abbreviated grammar of the CSS, but Windows needs more.  Instead of trial-and-error-ing until I found the right combination, I just used the full code from the example from the font’s creator.  If your solution is cross-platform, use the full code since it works on both.

Usage

The values in the sparkline need to be whole numbers from 0 to 100 and must be nested between curly braces { } , separated only by commas. Lucky for us, FileMaker gives us plenty of ways to compile our data into this structure.  

The values then need to be placed inside an HTML element that has the appropriate CSS class attached. Inside that element you can also place the first and last values—on either side of the curly braces—which will be output in the sparkline font (instead of any other font you might be using in that web viewer).

<span class='sparks-dotline-thin'>{10,20,45,70,90}</span>

<span class='sparks-bar-medium'>10{10,20,45,70,90}90</span>

About sparklines

*Sparklines were developed by Edward Tufte (yay!), who described them thusly:

A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography.

- Edward Tufte, Beautiful Evidence, 46-63. (scroll down)

And you can find lots more uses and examples of sparklines around the Internet.

About web fonts

**Web fonts:

Web fonts allow Web designers to use fonts that are not installed on the viewer's computer.

- Wikipedia

 Happy Sparklining!

[putsomestuffhere]

Read As DataURL - preview or get the dataURL of a file/image

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

[jsfmp]

A collection of FMP URL, Web Viewer and Data URL examples

If you have or know of any others, please add them in the comments.

During the unconference session:

I dove into my: • Responsive Web-Viewer Layouts: FMP URL & JavaScript  • DevCon2Go13_WebUI: A web-like UI for DevCon2Go 2013

Mark showed us his: Scheduling/project-management solution using FullCalendar (jQuery) & FMP URLs within a Web Viewer

Other cool examples:

A collection of videos, including Web Viewers as on-hover script triggers (without plug-ins), by Osamu Noda (@sam_oda)

WebViewers, Javascript and FileMaker: Enhanced integration possibilities via WebWorkers by Steve Senft-Herrera (Steve also has 2 other examples in the comments below)

Clickable map using SVGs & FMP URL in a Web Viewer by Mallverkstan (@mallverkstan)

The FileMaker Web Viewer as a Javascript Calculation Engine (CSV to JSON example) by Jason Young (@TeraPicoData)

Web Viewer DataURL examples from Dan Shockley (@DanShockley)'s DevCon 2013 session (FM12, see layouts: "Web Viewer 1-6")

Commercial calendar examples:

Calendario en HTML5 para FileMaker Pro 13 by José E López Rosario (@SolutionsCay) (free/unlocked for personal use)

FMCalendar by La Source multimédia (@lasourcefr)

Resources:

FMP URL protocol infographic (PDF) by Tony White (@tonywhitelive)

FMP URL Scheme and the 13.0v2 Improvement by iSolutions (@isolutionsinc)

Getting Started with Javascript and FileMaker by Soliant (@soliantconsult)

Native Web 2.0 Controls in FileMaker 12 Layouts by Brian Schick (@brian_schick)

Use single quotes for HTML attributes in FileMaker Data URL Web Viewers by me

Ongoing collection of my relevant blog posts & demos by me (@jsfmp)

[jsfmp]

FileMaker 13 Animated Slide Panels with Web Viewers

SeedCode just posted a cool example in which they "simulate a drawer effect in FileMaker where an animated slide panel appears to withdraw completely into the window edge". Unfortunately, they mention "the big downside here is that panels aren’t 'blockers' so buttons etc behind the tab panel still work".

This made me think of Web Viewers since they always float on top of all other elements on a layout, and they do block all interactions with any elements that lie beneath.  Thinking this could be another use-case for our friend FMP URL, I whipped up a quick demo.

UPDATE: This is my fastest blog-post-into-irrelevancy turnaround yet.  Per Daniel Wood's comment (see below), none of this Web Viewer stuff is necessary :-P  Still, maybe you'll find some of the techniques here of interest, even if not appropriate in this situation.  Or just carry on with the rest of your Interwebz.  Thanks, Daniel ;)

Download the demo file (.zip)  The Slide Panel buttons are on the top right.

What I did:

Placed a Web Viewer onto a new Panel of the Slide Control (so as to keep the original) and made it the same size and position as the original element

Set the Web Viewer to use a Data URL and set the CSS for the background to be the same gradient used in the original

Selected each button, opened it in the Preview app (via File>New) & saved it as a JPEG Normally I'd just use CSS for buttons, not images, but I wanted to make this (quickly) like the original

Created Base64 strings of each button image via an online Base64 image converter

Changed double-quotes in the Base64 image tag to single-quotes so there's no need to escape them

Wrapped each Base64 button inside an <a> element (for a clickable link), set the href attribute to an FMP URL, and placed them on the Web Viewer

Created a GoToLayoutByParameter script to be called by the FMP URL

Set the CSS for the images so they would center and be positioned like in the original

The FMP URL:

"<a href='fmp://$/" & Get ( FileName ) & "?script=GoToLayout&param=LayoutName'>"

What I noticed:

This worked well, and the Web Viewer did indeed block the behaviors of the underlying elements (on-hover visual changes and clickable buttons), however I discovered that the contents of the Web Viewer didn't render until the full panel was displayed, which meant that the background gradient and the buttons weren't visible during the sliding animation :(

What I changed:

Created an additional Panel of the Slide Control

Set the Web Viewer itself to have the same gradient as the original element (as opposed to the default solid color of white)

Placed copies of the button elements on top of the Web Viewer so they display during the slide animation (Once the Web Viewer is rendered, these buttons are hidden underneath) The images aren't perfectly lined up, but it's good enough for the demo.

What I think:

Well it ain't perfect.  The copies of the buttons on top of the Web Viewer in particular feels inelegant & kludgy.

Is it an improvement on the non-WebViewer versions?  Dunno.

What do you think?

[jsfmp]

Use single quotes for HTML attributes in FileMaker dataURL web viewers

Just a quickie:

At the recent PauseOnError conference in Portland, I saw a number of web viewers with Data URLs that had HTML elements inside.

So I use:

<input type=​'text' name='nameFirst' value='' id='nameFirst'> <a href=​'domain.com'>Go to site</​a>

instead of:

<input type=\"text\" name=\"nameFirst\" value=\"\" id=\"nameFirst\"> <a href=\"domain.com\">Go to site</​a>

Really, this goes for anytime you have HTML attributes inside any kind of FileMaker calculation dialog.

…

Single quotes are fully valid, according to the W3C specs:

By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39).

[kazu69]