math - Dave's Blog

Search

Tiny browser features: JSBrowser zoom

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

Tweet from David Risney

2016 Oct 13, 6:19
TIME is really painting themselves into a corner. Still several weeks before election plus aftermath available for additional melting. https://twitter.com/TIME/status/786531960902524928 
PermalinkComments

Retweet of mathias

2016 Jan 27, 10:29
Take any Facebook/Instagram photo URL.👉 append `.txt` → ASCII art👉 append `.html` → colored ASCII artE.g. https://scontent-ams3-1.cdninstagram.com/t51.2885-15/e35/11906246_1700002456899911_1391970345_n.jpg.html …
PermalinkComments

Retweet of FakeUnicode

2016 Jan 3, 10:26
I mean, look at this crap. All these full-alphabet variants "Because math!" @asrivkin @PlanetDr @lukedones @grierja pic.twitter.com/qQ1POiqniv
PermalinkComments

Retweet of unconed

2015 Dec 19, 5:41
Here's an elaboration of that last thought. Mathematicians are insane. Q.E.D. pic.twitter.com/OqbJAokBTg
PermalinkComments

Retweet of industrial_book

2015 Mar 6, 6:11
Old war. New battlefield. #mathjoke pic.twitter.com/TvWxI0h8Xw
PermalinkComments

Retweet of TheBigEasyofOz

2014 Aug 12, 7:15
Mathematically speaking, any two ducks are already in a row. In order to get your ducks in a row, own exactly two ducks.
PermalinkComments

Monty Hall Problem - Numberphile The Monty Hall problem made...

2014 May 22, 5:22


Monty Hall Problem - Numberphile

The Monty Hall problem made intuitive: instead of 3 doors, you have 100. You pick one door and then Monty opens 98 more doors and lets you switch to the remaining door. Well yeah now I’m going to switch.

PermalinkCommentsmath video

Number 1 and Benford’s Law - Numberphile (by...

2013 Jun 25, 4:40


Number 1 and Benford’s Law - Numberphile (by numberphile)

I’d heard of Benford’s Law before but it sounded totally counter intuitive to me. This video does a good job explaining why one shows up as the leading digit in sets of random numbers that span large ranges.

PermalinkCommentsmath video benfords-law

Sci-fi short stories disguised as Internet docs

2013 May 29, 2:48
The recent short story Twitter API returning results that do not respect arrow of time by Tim May written as a Twitter bug report reminded me of a few other short sci-fi stories written in the style of some sort of Internet document:
PermalinkCommentscsc fiction sci-fi Scifi time-travel twitter

math - What is JavaScript's Max Int? What's the highest Integer value a Number can go to without losing precision? - Stack Overflow

2013 Feb 5, 11:23

In JavaScript numbers are 64bit floating point numbers which have 53 bits of mantissa. That means you can accurately represent [-2^53, 2^53] as integers in JavaScript. Aka [-9007199254740992, 9007199254740992].

PermalinkCommentsjavascript math integer technical programming

How To Make A Video About How To Make A Video About How To Make...

2012 Jul 10, 7:27


How To Make A Video About How To Make A Video About How To Make A Video About How To Make a Video… (by Vihart)

Malkovich?

PermalinkCommentshumor recursion math video

Numberphile - Videos about Numbers and Stuff

2012 Jun 25, 9:47

A series of videos with math profs explaining a specific number (or interesting topic with a contrived connection to a particular number)

PermalinkCommentshumor math video

Crypto breakthrough shows Flame was designed by world-class scientists | Ars Technica

2012 Jun 7, 9:12

So this is another Stuxnet by Israel/US?

The analysis reinforces theories that researchers from Kaspersky Lab, CrySyS Lab, and Symantec published almost two weeks ago. Namely, Flame could only have been developed with the backing of a wealthy nation-state. … “It’s not a garden-variety collision attack, or just an implementation of previous MD5 collisions papers—which would be difficult enough,” Matthew Green, a professor specializing in cryptography in the computer science department at Johns Hopkins University, told Ars. “There were mathematicians doing new science to make Flame work.”

PermalinkCommentstechnical security web internet md5 cryptography flame

C++ Algorithms: next_permutation()

2012 May 4, 1:56

Breakdown of the STL’s implementation of next_permutation.  Ever wondered how that works?

PermalinkCommentstechnical stl c++ algorithm permutation math programming

Rob Reid: The $8 billion iPod.  5min TED talk on copyright math

2012 Mar 15, 6:25
an>
PermalinkCommentshumor video ipod music mpaa riaa ted copyright

Using CSS without HTML (mathiasbynens.be)

2012 Feb 20, 6:11

Implied HTML elements, CSS before/after content, and the link HTTP header combines to make a document that displays something despite having a 0 byte HTML file.  Demo only in Opera/FireFox due to link HTTP header support.

PermalinkCommentstechnical humor hack css http html

A Perl Regular Expression That Matches Prime Numbers (catonmat.net)

2011 Dec 28, 3:36

perl -lne ‘(1x$_) =~ /^1?$|^(11+?)\1+$/ || print “$_ is prime”’

PermalinkCommentstechnical perl regexp prime math

tenso GRAPHICS

2010 Jun 19, 3:54
PermalinkCommentskeytar humor math diagram keyboard duck

Petition to make "Hella" the prefix for 1,000,000,000,000,000,000,000,000,000 - Boing Boing

2010 Mar 2, 1:15PermalinkCommentsinternet math humor hella
Older Entries Creative Commons License Some rights reserved.