glitch - 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

Search Art | OpenGameArt.org

2014 Jan 22, 11:40

Various folks on OpenGameArt have converted the now public domain Glitch art assets into SVG and PNG.

PermalinkCommentsart glitch copyright game technical

Super Mario World “Completed” in Under 3 Minutes by Corrupting the RAM | minimaxir

2013 Apr 3, 4:46

This is essentially an AV exploit against Super Mario World that results in running the end game code. Watch the video. “…there’s a glitch that’s been known for a while, where Yoshi can end up in the “I have an item in my mouth” state, but not actually have an item in his mouth. When he spits out this nothingness, the game crashes. …That address did not contain code, and so the system crashed. But wait a second. What if, by some sheer coincidence, that address did contain code? The specific address dropped him in somewhere amongst various data for the game’s internal random number generator, and the random number generator can be manipulated in a TAS. Could the game be coerced into running arbitrary code?…”

PermalinkCommentshumor game hack mario

Glitch Helperator

2012 Feb 29, 3:05

I've been working on the Glitch Helperator. It is a collection of tools and things I've put together for Glitch. It has a few features that I haven't seen elsewhere including:

Favorite Streets
A notebook in which you can save information about interesting streets and later use it to find your way back to them.
Birthday
Find out how old your Glitch is and the date of your next birthday in Glitch time or Earth time.
API Update History
A history of changes to the streets, skills and achievements of Glitch noting when new ones are added and when existing ones are changed.
It also has an interactive skill tree, find nearest feature tool, and achievement display. If you play Glitch, check it out.
PermalinkCommentsglitch tool glitch-helperator game

Why I Like Glitch

2012 Feb 17, 4:00

Sarah and I have been enjoying Glitch for a while now. Reviews are usually positive although occasionally biting (but mostly accurate).

I enjoy Glitch as a game of exploration: exploring the game's lands with hidden and secret rooms, and exploring the games skills and game mechanics. The issue with my enjoyment coming from exploration is that after I've explored all streets and learned all skills I've got nothing left to do. But I've found that even after that I can have fun writing client side JavaScript against Glitch's web APIs making tools (I work on the Glitch Helperator) for use in Glitch. And on a semi-regular basis they add new features reviving my interest in the game itself.

PermalinkCommentsvideo-game glitch glitch-helperator me project game

First Ur Problems meme | quickmeme

2012 Jan 16, 12:04PermalinkCommentsgame glitch humor meme

Haven't Been Posting Much

2011 Oct 18, 4:52
I haven't been updating my blog recently. But I have three excellent reasons:
PermalinkComments

Bogotissimo! / the aesthetics of being wrong

2008 Sep 29, 1:41"Lately I have been thinking about Glitch-Art, an emerging aesthetics inside Digital Art which takes the computational error as its subject."PermalinkCommentsart computer error glitch

YouTube - Tiger Woods 09 - Walk on Water

2008 Aug 22, 1:25This is the best its-not-a-bug-its-a-feature ever: "As a response to a fan video from Tiger Woods PGA TOUR 08, Tiger Woods and EA SPORTS demonstrate that the "glitch" Levinator25 thought he found in the game, is not a glitch at all."PermalinkCommentstiger-woods golf video videogame jesus humor

Vegas and New Year

2008 Jan 2, 8:57

Normal Sized Slot MachineTwo and half weeks ago Sarah and I went to Las Vegas where I got to see Jesse, Pat, Chris, and (briefly because he's some kind of big shot too busy for his friends now etc) Grib from college. They're mostly in San Jose and I hadn't seen them for a while so it was a lot of fun to hang out. We all stayed at the MGM which is a nice hotel with some good restaurants. In other Vegas related links, Sarah added Sarah's Las Vegas restaurant reviews to her reviews and Jesse has Jesse's Vegas photos up too.

Vegas DinnerSarah and I saw the Blue Man Group (video from a concert) and the Price is Right Live Show. The Blue Man Group was very cool although the music was all rock with a heavy drum focus (not depicted in the videos I linked) which I got a little tired of. But despite that I really enjoyed the show, very funny and I totally recommend it. The Price is Right Live Show is like the regular show on TV except the recording is not televised and its not hosted by Bob Barker or Drew Carey. So folks from the audience are still called up to play the same games and really win prizes. It was advertised as hosted by Todd Newton, B-list game show host, but was instead hosted by JD Roberto who hosted such things as "Reality Remix" and the show "Are You Hot? The Search for America's Sexiest People". The showcase showdown included the 2008 version of my car and thankfully I wasn't picked to compete for that because, well I don't know where they bought the car, but I would have gotten the price very wrong. We sat right next to the stage for that show and had a good time.

MGM Grand in Las VegasFor New Years Eve Sarah and I stayed in and watched the glitched Seattle Space Needle fireworks show from a safe distance. On New Years we went to a pot-luck at Todd's house and had a fun time. Todd's place is on the top of a hill and has a lovely view of Washington's snow-capped mountains.

PermalinkCommentsnewyear vegas lasvegas personal bluemangroup
Older Entries Creative Commons License Some rights reserved.