zoo - Dave's Blog

Search
My timeline on Mastodon

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

Otter Pups Swim Lesson (by Columbuszoomedia)

2012 May 27, 1:37


Otter Pups Swim Lesson (by Columbuszoomedia)

PermalinkCommentshumor cute otter swimming video

The Dancebulance - Gov Ball 2012 Lineup (by...

2012 Apr 18, 6:10


The Dancebulance - Gov Ball 2012 Lineup (by nathanjbarnatt)

Another Nathan Barnatt video with awesome music and dance moves.  Also enjoying the music video for third song in this video “Barbara Streisand” by Duck Sauce: http://www.youtube.com/watch?v=uu_zwdmz0hE

PermalinkCommentshumor music dance nathan-barnatt video

Junkyard Jumbotron: join all your screens into one big one, no software install needed - Boing Boing

2011 Mar 14, 4:30A web service to turn multiple web browsing devices into one larger screen. Panning and zooming on one screen (for phones) changes the whole picture.
PermalinkCommentsqrcode web video ui tv

YouTube - Let's Enhance

2009 Dec 17, 5:43The zoom-in-&-enhance television trope video montage. 'Wait! Go back: There's a reflection!'PermalinkCommentsvia:waxy humor youtube tv movie

YouTube - 'You are being shagged by a rare parrot' - Last Chance To See ...

2009 Oct 8, 11:29The title sounds like its a line out of a text adventure. Actually its Stephen Fry and zoologist Mark Carwardine getting beaten by a parrot.PermalinkCommentsvideo humor parrot stephen-fry via:dad ecology bbc

Notes on Creating Internet Explorer Extensions in C++ and COM

2009 Mar 20, 4:51

Working on Internet Explorer extensions in C++ & COM, I had to relearn or rediscover how to do several totally basic and important things. To save myself and possibly others trouble in the future, here's some pertinent links and tips.

First you must choose your IE extensibility point. Here's a very short list of the few I've used:

Once you've created your COM object that implements IObjectWithSite and whatever other interfaces your extensibility point requires as described in the above links you'll see your SetSite method get called by IE. You might want to know how to get the top level browser object from the IUnknown site object passed in via that method.

After that you may also want to listen for some events from the browser. To do this you'll need to:

  1. Implement the dispinterface that has the event you want. For instance DWebBrowserEvents2, or HTMLDocumentEvents, or HTMLWindowEvents2. You'll have to search around in that area of the documentation to find the event you're looking for.
  2. Register for events using AtlAdvise. The object you need to subscribe to depends on the events you want. For example, DWebBrowserEvents2 come from the webbrowser object, HTMLDocumentEvents come from the document object assuming its an HTML document (I obtained via get_Document method on the webbrowser), and HTMLWindowEvents2 come from the window object (which oddly I obtained via calling the get_script method on the document object). Note that depending on when your SetSite method is called the document may not exist yet. For my extension I signed up for browser events immediately and then listened for events like NavigateComplete before signing up for document and window events.
  3. Implement IDispatch. The Invoke method will get called with event notifications from the dispinterfaces you sign up for in AtlAdvise. Implementing Invoke manually is a slight pain as all the parameters come in as VARIANTs and are in reverse order. There's some ATL macros that may make this easier but I didn't bother.
  4. Call AtlUnadvise at some point -- at the latest when SetSite is called again and your site object changes.

If you want to check if an IHTMLElement is not visible on screen due how the page is scrolled, try comparing the Body or Document Element's client height and width, which appears to be the dimensions of the visible document area, to the element's bounding client rect which appears to be its position relative to the upper left corner of the visible document area. I've found this to be working for me so far, but I'm not positive that frames, iframes, zooming, editable document areas, etc won't mess this up.

Be sure to use pointers you get from the IWebBrowser/IHTMLDocument/etc. only on the thread on which you obtained the pointer or correctly marshal the pointers to other threads to avoid weird crashes and hangs.

Obtaining the HTML document of a subframe is slightly more complicated then you might hope. On the other hand this might be resolved by the new to IE8 method IHTMLFrameElement3::get_contentDocument

Check out Eric's IE blog post on IE extensibility which has some great links on this topic as well.

PermalinkCommentstechnical boring internet explorer com c++ ihtmlelement extension

Nikon unveils Coolpix S60: Digital Photography Review

2008 Sep 27, 7:18"Nikon has launched the Coolpix S60 in addition to the four S-series compact cameras. This 10MP digital camera with 3.5" touch-panel LCD and 5x zoom lens, has Vibration Reduction along with features such as time-lapse movies, in-camera retouch and HDMi output."PermalinkCommentsnikon camera digital photography photo review

Fractal Scene Rendering - screamyGuy

2008 Jul 2, 3:41A java scene of a robot building a smaller robot building a smaller robot building ... . Zoom in as much as you like? OK!PermalinkComments3d java animation code recursive fractal visualization programming

TiltViewer

2008 Jun 6, 3:36A neat little flash thing that shows you flickr photos with 3d tilting and zooming.PermalinkCommentsvia:ethan_t_hein flickr flash mashup visualization

Warm Weekend

2008 Apr 14, 10:22

Cafe Pirouette ExteriorIt was warm and lovely out this past Saturday and Sarah I and went to a new place for lunch, then to Kelsey Creek Park, and then out for Jane's birthday. We ate at Cafe Pirouette which serves crepes and is done up with French decorations reminding me of my parent's house. We got in for just the end of lunch and saw the second to last customers, a gaggle of older ladies leaving. I felt a little out of place with my "Longhorn [heart] RSS" t-shirt on. The food was good and in larger portions that I expected.

Kelsey Creek FarmAfter that we went to Kelsey Creek Park and Farm. The park is hidden at the end of a quiet neighborhood, starts out with some tables and children's jungle gym equipment, then there's a farm which includes a petting zoo, followed by many little trails going off into the forrest. There weren't too many animals out and the ones we did see didn't seem to expect or want the sun and warm weather. We followed one of the trails for a bit and turned back before getting sun burned. You can see my weekend photos mapped out on Live Maps.

That night we went out with some friends for Jane's birthday. Eric was just back from the RSA conference and we met Jane and Eric and others at Palace Kitchen in Seattle located immediately adjascent to the monorail's route. The weather was still good so they left the large windows open through twilight and every so often you'd see the monorail pass by.

PermalinkCommentswashington bellevue weekend nontechnical

Zoo Trip

2007 Jun 7, 4:35TigerA few weekends ago Sarah and I visited the Woodland Park Zoo (Finding its website I'm amazed that its domain is 'zoo.org'. Somebody in Seattle was quick on the domain registration.) I liked the zoo except for all the children. Human children... As visitors to the zoo... What did you think I meant? The kids are everywhere! Shouldn't they be inside playing video games or something?

Gorilla HomelessThere was a gorilla that was wrapped in a dirty blanket. It looked like a homeless person and very sad. I'm reminded of the episode of the Simpsons in which the octuplets work at the zoo and the scene in which while Homer is breaking out the children a gorilla tries to get him to take her child too. Looking for a clip of this to post here I can only find clips from the Simpsons in German for some reason. Like this one.

HipposTwo thirds or so of the way through my camera started running low on power. We were forced to choose which animals were camera worthy. Is it too common? Is it cute enough? Etc. Sarah took a very nice shot of some hippos under these conditions. Unfortunately I couldn't get a good angle and view of the Elephants. But they were cool and had an interesting habitat (that's zoo for large-ish cage.)PermalinkCommentszoo personal nontechnical

HD View - Gigapixel Images and More (Tony Schreiner's WebLog)

2007 Apr 23, 1:46Control that does pan and zoom for high resolution images. As you zoom it dynamically loads more and more detail for that area.PermalinkCommentstony-schreiner hdview gigapixel photo photography images photos research microsoft blog article browser

NASA World Wind

2006 Mar 27, 2:30Navigate and zoom over satellite photos of EarthPermalinkCommentsearth tools windows software photos nasa map satellite
Older Entries Creative Commons License Some rights reserved.