weird - Dave's Blog

Search

Tiny browser features: JSBrowser zoom

2018 May 10, 3:49

JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing zoom.

My plan to implement zoom is to add a zoom slider to the settings div that controls the scale of the WebView element via CSS transform. My resulting zoom change is in git and you can try the whole thing out in my JSBrowser fork.

Slider

I can implement the zoom settings slider as a range type input HTML element. This conveniently provides me a min, max, and step property and suits exactly my purposes. I chose some values that I thought would be reasonable so the browser can scale between half to 3x by increments of one quarter. This is a tiny browser feature after all so there's no custom zoom entry.

<a><label for="webviewZoom">Zoom</label><input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>

To let the user know this slider is for controlling zoom, I make a label HTML element that says Zoom. The label HTML element has a for attribute which takes the id of another HTML element. This lets the browser know what the label is labelling and lets the browser do things like when the label is clicked to put focus on the slider.

Scale

There are no explicit scale APIs for WebView so to change the size of the content in the WebView we use CSS.

        this.applyWebviewZoom = state => {
const minValue = this.webviewZoom.getAttribute("min");
const maxValue = this.webviewZoom.getAttribute("max");
const scaleValue = Math.max(Math.min(parseInt(this.webviewZoom.value, 10), maxValue), minValue) / 100;

// Use setAttribute so they all change together to avoid weird visual glitches
this.webview.setAttribute("style", [
["width", (100 / scaleValue) + "%"],
["height", "calc(" + (-40 / scaleValue) + "px + " + (100 / scaleValue) + "%)"],
["transform", "scale(" + scaleValue + ")"]
].map(pair => pair[0] + ": " + pair[1]).join("; "));
};

Because the user changes the scale at runtime I accordingly replace the static CSS for the WebView element with the script above to programmatically modify the style of the WebView. I change the style with one setAttribute call to do my best to avoid the browser performing unnecessary work or displaying the WebView in an intermediate and incomplete state. Applying the scale to the element is as simple as adding 'transform: scale(X)' but then there are two interesting problems.

The first is that the size of the WebView is also scaled not just the content within it. To keep the WebView the same effective size so that it still fits properly into our browser UI, we must compensate for the scale in the WebView width and height. Accordingly, you can see that we scale up by scaleValue and then in width and height we divide by the scaleValue.

transform-origin: 0% 0%;

The other issue is that by default the scale transform's origin is the center of the WebView element. This means when scaled up all sides of the WebView would expand out. But when modifying the width and height those apply relative to the upper left of the element so our inverse scale application to the width and height above aren't quite enough. We also have to change the origin of the scale transform to match the origin of the changes to the width and height.

PermalinkCommentsbrowser css-transform javascript JS jsbrowser uwp webview win10

Retweet of TheAVClub

2016 Jan 25, 4:05
ICYMI: “Weird Al” Yankovic joins Comedy Bang! Bang! as bandleader and co-host http://avc.lu/1nkaxWC 
PermalinkComments

Tweet from David_Risney

2015 Aug 23, 8:03
Thought final line of Sparks was weird joke then heard post TAH show. Do I need to re-review all Ginny West material now? @ThrillingAdv
PermalinkComments

laughingsquid: An ‘American Psycho’ Parody Starring Huey Lewis...

2013 Apr 4, 5:33


laughingsquid:

An ‘American Psycho’ Parody Starring Huey Lewis & Weird Al

Hey its the high school band audition judge from Back to the Future.

PermalinkCommentshumor weird-al huey-lewis american-psycho video

Follow the link for other great Al themed artwork. (via...

2012 Mar 7, 7:50


Follow the link for other great Al themed artwork.

(via http://twitter.com/alyankovic/statuses/177517595874951171)

PermalinkCommentshumor weird-al art

Copyright King: Why the "I Have a Dream" Speech Still Isn't Free (vice.com)

2012 Jan 17, 9:37

There’s weird stuff you’d think is public domain but isn’t including Martin Luther King Jr.‘s “I Have a Dream” speech. FTA: ”If you want to watch the whole thing, legally, you’ll need to get the $20 DVD.

That’s because the King estate, and, as of 2009, the British music publishing conglomerate EMI Publishing, owns the copyright of the speech and its recorded performance.”

PermalinkCommentscopyright mlk speech public-domain

Save the Rich - Garfunkel and Oates with Weird Al Yankovic

2011 Dec 23, 6:45PermalinkCommentshumor video weird-al garfunkel-and-oates 99-percent occupy-wallstreet

iPod Godfather Tony Fadell Finally Reveals His New Product: A Thermostat. No, Really. | TechCrunch

2011 Oct 25, 5:37
An original iPod guy has a new company that makes... wait for it... thermostats. Weird. Well they look cool anyway.
PermalinkCommentstechnical

And The Band Played On (Featuring Weird Al Yankovic) - CollegeHumor Video

2011 Jul 13, 3:31PermalinkCommentsweird-al video humor music titanic

Dare To Be Stupid | Vinyl Rewind on blip.tv

2011 Jul 1, 10:04Eric outs himself as a Weird Al fan covering Dare To Be Stupid and I get a mention.

On a related note, have you seen the Perform This Way video from Weird Al's latest album? It took me way too long to realize that wasn't Al's body. Performing this one live is going to make the Fat suit look like a cake walk.PermalinkCommentseric-callero weird-al memories history

YouTube - Star Trek's White and Nerdy

2011 Apr 18, 2:18PermalinkCommentsstartrek humor remix white-and-nerdy weird-al data

Funny Or Die Beats Weird Al at Twitter from Al Yankovic, NickCorirossi, CharlesIngram, Scott Gairdner, AaronMoorhead, and FOD Team

2011 Apr 14, 5:19PermalinkCommentsweird-al humor video twitter funny-or-die

CYRIAK'S AMAZING VIDEO BLOG

2010 Aug 3, 3:04
And if you think the following video is weird, take a look at everything else on this person's blog...
PermalinkCommentscyriak video weird humor design art animation

Rodeohead

2010 Jun 6, 10:51
Chris Hardwick as half of Hard'n Phrim does Rodeohead -- its a bluegrass medley of Radiohead songs sort of in the style of Weird Al's polka medleys. And "it’s not on iTunes for licensing reasons so please take it for free if you don’t already have it."

Hard 'n Phirm - Rodeohead (mp3)

PermalinkCommentsmusic humor weird-al radiohead chris-hardwick hard-n-phirm

Mike Phirman

2010 May 19, 7:17A creative-commons released comedy album. Heard him on the Nerdist podcast where he played live several of the songs you'd imagine someone having a tough time playing live. Humorous and is that Weird Al I hear in Street Meat?PermalinkCommentsmusic humor mike-phirman cc creativecommons

"Weird: The Al Yankovic Story" from Eric Appel, Aaron Paul, Olivia Wilde, Al Yankovic, Patton Oswalt, Paul Scheer, BRIAN HUSKEY, and christiansprenger - Video

2010 Mar 23, 12:02"Trailer for the upcoming Weird Al Yankovic biopic. This film is sure to sweep next year's Academy Awards."
PermalinkCommentshumor video weird-al parody trailer

Kempa.com » Absolutely surreal excerpt from a New Yorker profile of Vampire Weekend

2010 Jan 6, 1:58Tom DeLonge tries to sell Vampire Weekend a website. "...this whole thing reads like a scene from a modern-day Spinal Tap. Weird music industry insanity crossed with internet startup hucksterism with a dash of awkward standoffishness. I love it. All of this is heightened by the fact that BOTH parties are being followed by separate documentary film crews, who are filming the insanity. How weird is that?"PermalinkCommentsinternet music vampire-weekend band documentary via:waxy

YouTube - "Weird Al" Yankovic - CNR

2009 Aug 5, 7:22Weird Al relates the awesome exploits of Charles Nelson Reilly in the style of the White Stripes. Notice the head of Chuck Norris mounted on CNR's trophy wall at 0:55s.PermalinkCommentshumor video weird-al charles-nelson-reilly music music-video

YouTube - "Weird Al" Yankovic - Craigslist

2009 Jun 16, 10:41Multiple friends on Facebook posted "Weird Al" Yankovic's Craigslist. Obviously a great topic for a Weird Al song: plenty of room for rhyming arbitrary nouns.PermalinkCommentsvideo humor weird-al doors music music-video youtube psychadelic

YouTube - Iain Lee Hosts Celebrity Soup

2009 Jun 4, 10:22"Iain Lee Hosts Celebrity Soup". Its weird because it sounds and is paced just like The Soup except everyone has a British accent.PermalinkCommentsiain-lee the-soup tv england british soup
Older Entries Creative Commons License Some rights reserved.