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

Tweet from NASA Planetquest

2017 Jan 26, 10:25
See another solar system! These are real images of a 4-planet system ~130 light-years from . Read about it: http://go.nasa.gov/2kySSt1 
PermalinkComments

Tweet from Acid Burn

2016 Oct 12, 1:14
HACK THE PLANET! HACK THE PLANET!
PermalinkComments

Tweet from David Risney

2016 Sep 19, 3:04
Playing No Man's Sky collecting resources on an hospitable planet and suddenly notice several creatures approaching. I quickly scan them.
PermalinkComments

Tweet from David Risney

2016 Sep 8, 3:05
Planet vs dwarf planet pluto controversy similar to 'is a hotdog a sandwich' controversy. http://www.smbc-comics.com/comic/space 
PermalinkComments

Tweet from David Risney

2016 Aug 18, 5:40
Mother Jones on ending private prisons and their previous piece inside private prisons: http://www.motherjones.com/politics/2016/08/department-justice-plans-end-private-prison  https://twitter.com/AlexCKaufman/status/766300516007682048 
PermalinkComments

Tweet from Lux Alptraum

2016 Apr 26, 4:07
I *totally* consider my IUD a cyborg implant. http://fusion.net/story/294770/women-body-hackers/ 
PermalinkComments

Tweet from Bobak Ferdowsi

2016 Apr 22, 4:40
Hi, you may know me from space, but did you know Earth is my favorite planet? Love it & each other.
PermalinkComments

Tweet from David_Risney

2016 Feb 10, 9:56
OK Go is in vomit comet for new video: http://boingboing.net/2016/02/11/ok-gos-new-video-was-shot-in.html …. Looks amazing but I'm constantly worried plane is about to pull up.
PermalinkComments

4 people are living in an isolated habitat for 30 days. Why? Science!

2016 Feb 1, 3:27

nasa:

This 30 day mission will help our researchers learn how isolation and close quarters affect individual and group behavior. This study at our Johnson Space Center prepares us for long duration space missions, like a trip to an asteroid or even to Mars.

image

The Human Research Exploration Analog (HERA) that the crew members will be living in is one compact, science-making house. But unlike in a normal house, these inhabitants won’t go outside for 30 days. Their communication with the rest of planet Earth will also be very limited, and they won’t have any access to internet. So no checking social media kids!

The only people they will talk with regularly are mission control and each other.

image

The crew member selection process is based on a number of criteria, including the same criteria for astronaut selection.

What will they be doing?

Because this mission simulates a 715-day journey to a Near-Earth asteroid, the four crew members will complete activities similar to what would happen during an outbound transit, on location at the asteroid, and the return transit phases of a mission (just in a bit of an accelerated timeframe). This simulation means that even when communicating with mission control, there will be a delay on all communications ranging from 1 to 10 minutes each way. The crew will also perform virtual spacewalk missions once they reach their destination, where they will inspect the asteroid and collect samples from it. 

A few other details:

  • The crew follows a timeline that is similar to one used for the ISS crew.
  • They work 16 hours a day, Monday through Friday. This includes time for daily planning, conferences, meals and exercises.  
  • They will be growing and taking care of plants and brine shrimp, which they will analyze and document.

But beware! While we do all we can to avoid crises during missions, crews need to be able to respond in the event of an emergency. The HERA crew will conduct a couple of emergency scenario simulations, including one that will require them to maneuver through a debris field during the Earth-bound phase of the mission. 

image

Throughout the mission, researchers will gather information about cohabitation, teamwork, team cohesion, mood, performance and overall well-being. The crew members will be tracked by numerous devices that each capture different types of data.

image

Past HERA crew members wore a sensor that recorded heart rate, distance, motion and sound intensity. When crew members were working together, the sensor would also record their proximity as well, helping investigators learn about team cohesion.

Researchers also learned about how crew members react to stress by recording and analyzing verbal interactions and by analyzing “markers” in blood and saliva samples.

image

In total, this mission will include 19 individual investigations across key human research elements. From psychological to physiological experiments, the crew members will help prepare us for future missions.

Make sure to follow us on Tumblr for your regular dose of space: http://nasa.tumblr.com

PermalinkComments

4 people are living in an isolated habitat for 30 days. Why? Science!

2016 Feb 1, 3:27

nasa:

This 30 day mission will help our researchers learn how isolation and close quarters affect individual and group behavior. This study at our Johnson Space Center prepares us for long duration space missions, like a trip to an asteroid or even to Mars.

image

The Human Research Exploration Analog (HERA) that the crew members will be living in is one compact, science-making house. But unlike in a normal house, these inhabitants won’t go outside for 30 days. Their communication with the rest of planet Earth will also be very limited, and they won’t have any access to internet. So no checking social media kids!

The only people they will talk with regularly are mission control and each other.

image

The crew member selection process is based on a number of criteria, including the same criteria for astronaut selection.

What will they be doing?

Because this mission simulates a 715-day journey to a Near-Earth asteroid, the four crew members will complete activities similar to what would happen during an outbound transit, on location at the asteroid, and the return transit phases of a mission (just in a bit of an accelerated timeframe). This simulation means that even when communicating with mission control, there will be a delay on all communications ranging from 1 to 10 minutes each way. The crew will also perform virtual spacewalk missions once they reach their destination, where they will inspect the asteroid and collect samples from it. 

A few other details:

  • The crew follows a timeline that is similar to one used for the ISS crew.
  • They work 16 hours a day, Monday through Friday. This includes time for daily planning, conferences, meals and exercises.  
  • They will be growing and taking care of plants and brine shrimp, which they will analyze and document.

But beware! While we do all we can to avoid crises during missions, crews need to be able to respond in the event of an emergency. The HERA crew will conduct a couple of emergency scenario simulations, including one that will require them to maneuver through a debris field during the Earth-bound phase of the mission. 

image

Throughout the mission, researchers will gather information about cohabitation, teamwork, team cohesion, mood, performance and overall well-being. The crew members will be tracked by numerous devices that each capture different types of data.

image

Past HERA crew members wore a sensor that recorded heart rate, distance, motion and sound intensity. When crew members were working together, the sensor would also record their proximity as well, helping investigators learn about team cohesion.

Researchers also learned about how crew members react to stress by recording and analyzing verbal interactions and by analyzing “markers” in blood and saliva samples.

image

In total, this mission will include 19 individual investigations across key human research elements. From psychological to physiological experiments, the crew members will help prepare us for future missions.

Make sure to follow us on Tumblr for your regular dose of space: http://nasa.tumblr.com

PermalinkComments

Tweet from David_Risney

2016 Jan 27, 9:57
FCC proposes replacing cable card with software based equivalent. Would be amazing if it could happen. http://arstechnica.com/business/2016/01/cable-lobby-is-really-mad-about-fccs-set-top-box-competition-plan/ …
PermalinkComments

Tweet from David_Risney

2016 Jan 7, 9:30
'Works "produced by nature, animals, or plants" cannot be granted copyright protection the US Copyright Office said' http://arstechnica.com/tech-policy/2016/01/judge-says-monkey-cannot-own-copyright-to-famous-selfies/ …
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 thegrugq

2015 Dec 21, 5:26
Succinct explanation of the Dual EC travesty as realized in the Juniper debacle.https://storify.com/thegrugq/conversation-with-stewartbaker-ethan-heilman-matth … pic.twitter.com/tR1dDuJm8u
PermalinkComments

Tweet from David_Risney

2015 Dec 20, 11:32
FAA Grounds ‘Uber for Planes’ http://motherboard.vice.com/read/faa-grounds-uber-for-planes … via @motherboard
PermalinkComments

Tweet from David_Risney

2015 Nov 9, 9:28
Missing planet Vulcan predicted by Newtonian physics+Mercury's orbit. Decades of mistaken Vulcan sightings before GR http://www.theatlantic.com/science/archive/2015/11/science-doesnt-work-the-way-you-think-it-does/414744/ …
PermalinkComments

Tweet from David_Risney

2015 Apr 11, 8:52
"@newsycombinator: Programmers: Before you turn 40, get a plan B (2009) http://improvingsoftware.com/2009/05/19/programmers-before-you-turn-40-get-a-plan-b/ …" Bleh
PermalinkComments

Retweet of indiecom

2015 Mar 26, 1:33
"The best cyber film of the year!" -- Which year? Every year. #HackThePlanet #BeKindRewind pic.twitter.com/ZNCigxXgds
PermalinkComments

Retweet of TheOnion

2015 Mar 9, 12:11
How Cable Companies Plan To Fight Cord Cutting http://onion.com/1aXT9RD  pic.twitter.com/1e2qYRFCMN
PermalinkComments
Older Entries Creative Commons License Some rights reserved.