2
edits
Changes
mLine 412:
Line 412: + + + Line 428:
Line 431: + Line 452:
Line 456: − + − + Line 465:
Line 469: − + − The two unknown button numbers may have been intended for the Home and Power buttons, but they are always 0, even if the web browser is used while the Home and/or Power buttons are pressed.+ + − + − + + + + Line 873:
Line 881: − ** Most RGB colors on the web are specified in RGB8 format, but the 2D canvas <code>setFillColor</code> and <code>setStrokeColor</code> functions accept RGB565 colors when provided with parameters for red, green, blue, and alpha, respectively. Line 879:
Line 886: − + − + − + − + + + + Line 927:
Line 937: − + − + Line 938:
Line 948: − + − + Line 949:
Line 959: − + Line 968:
Line 978: − + − +
Update link to ImageShare
The browser's now-outdated gamepad API provides information about the states of the circle pad, C-stick, and every button aside from the Home and Power buttons. The gamepad, which has an ID of <code>New Nintendo 3DS Controller</code>, is contained within the array returned by the <code>navigator.webkitGetGamepads</code> function.
The browser's now-outdated gamepad API provides information about the states of the circle pad, C-stick, and every button aside from the Home and Power buttons. The gamepad, which has an ID of <code>New Nintendo 3DS Controller</code>, is contained within the array returned by the <code>navigator.webkitGetGamepads</code> function.
Both of the gamepad's arrays, which contain the states of various inputs, seem to be reconstructed each time they are accessed via their gamepad object. It is not known if the values within the arrays can update upon each access of the array, but the values <em>can</em> update frequently enough to obtain accurate readings of the system's controls.
===== Axes =====
The gamepad's <code>axes</code> array contains four floating-point numbers in the following order:
The gamepad's <code>axes</code> array contains four floating-point numbers in the following order:
Each coordinate ranges from -1.0 (left/up) to 1.0 (right/down). Neutral position is indicated by 0.0. Drift and/or inaccurate calibration may make these exact values unattainable.
Each coordinate ranges from -1.0 (left/up) to 1.0 (right/down). Neutral position is indicated by 0.0. Drift and/or inaccurate calibration may make these exact values unattainable.
===== Buttons =====
The gamepad's <code>buttons</code> array contains numbers for the following numbers:
The gamepad's <code>buttons</code> array contains numbers for the following numbers:
{|class="wikitable" width="20%"
{|class="wikitable" width="20%"
| 9 || Start
| 9 || Start
|-
|-
| 10 || Unknown
| 10 || Unused
|-
|-
| 11 || Unknown
| 11 || Unused
|-
|-
| 12 || Up
| 12 || Up
|}
|}
Each number is 0 while its associated button is not pressed, and 1 while the button is pressed.
Each button's value is 0 while the button is not pressed, and 1 while the button is pressed.
Based on the Gamepad API's specifications, buttons 10 and 11 are reserved for left stick presses and right stick presses respectively, which the 3DS does not support.
==== Notes ====
==== Notes ====
* Viewport information can be specified with the <meta> element.
* The html "color" <input> type is not supported.
* The html "color" <input> type is not supported.
* 3D images appear as their right-eye image within webpages.
* 3D images appear as their right-eye image within webpages.
* Webpages are locked to the bottom screen when zooming is disabled, the webpage's initial scale is 100%, and the entire webpage can fit within the bottom screen's dimensions (320x212).
* Webpages are locked to the bottom screen when zooming is disabled, the webpage's initial scale is 1, and the entire webpage can fit within the bottom screen's dimensions (320x212).
* Interactable elements that are positioned partially outside of the bottom screen can temporarily be moved further inside the bottom screen by tapping them with the touchscreen.
* Interactable elements that are positioned partially outside of the bottom screen can temporarily be moved further inside the bottom screen by tapping them with the touchscreen.
* Favicons can be changed using Javascript, but only until a short time after the <code>DOMContentLoaded</code> event fires.
* Favicons can be changed using Javascript, but they become unchangeable once the document's <em>readystatechange</em> event finishes firing with a ready state of "complete".
* Focusing on text-editable elements via Javascript will always open the keyboard.
* Focusing on text-editable elements via Javascript will always open the keyboard.
* Webpage content is usually rendered at 30 FPS despite the <code>webkitRequestAnimationFrame</code> function allowing code to run at a rate of 60 FPS.
** As a result, display-related routines may only show half of their intended updates.
** This issue can be mitigated by rendering on every other frame. However, various factors (such as touchscreen input and sleep mode) make this fairly inconsistent.
== Old3DS browser ==
== Old3DS browser ==
* HTML5Test.com say that Drag and drop is supported but it's not (code on WebKit is ready, but it's not implemented on interface of browser)
* HTML5Test.com say that Drag and drop is supported but it's not (code on WebKit is ready, but it's not implemented on interface of browser)
* Webpages are rendered with the RGB565 color format.
* Webpages are rendered with the RGB565 color format.
==Tips==
==Tips==
=== Detect User Agent ===
=== Detect User Agent ===
To detect if the user agent is Nintendo 3DS Browser :
To detect if the user agent is the Nintendo 3DS Internet Browser (not including mobile site mode):
<script type="text/javascript">
<script type="text/javascript">
if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) { //If the UserAgent is not "Nintendo 3DS"
if(navigator.userAgent.indexOf("Nintendo 3DS") == -1) { // If the user agent does not contain "Nintendo 3DS"
location.replace('http://www.3dbrew.org'); //Redirect to an other page
location.replace("http://www.3dbrew.org"); // Redirect to another page
}
}
</script>
</script>
* You can check <em>navigator.platform=="Nintendo 3DS"</em> as well.
* You can check using <code>navigator.platform.indexOf("Nintendo 3DS") > -1</code> as well.
* The New 3DS Internet Browser's "Request Mobile Sites" setting affects the user agent. To detect if the New 3DS Internet Browser is being used with this option enabled, use <code>screen.pixelDepth == 16 && navigator.platform == "iPhone"</code>.
** This relies on the fact that the internet browser renders its webpages in 16-bit color, which is (hopefully?) not possible with a real iPhone.
** Keep in mind that the previous browser-detection examples do not account for this setting.
=== Scrolling ===
=== Scrolling ===
==== Touch/Mouse Events ====
==== Touch/Mouse Events ====
The <em>mousedown</em>, <em>mouseup</em>, and <em>click</em> events are all triggered by the browser. However, the <em>mousedown</em> event doesn't trigger until you lift the stylus or you've held it on the screen long enough to trigger text selection mode. Text selection mode requires pressing the touchscreen for approximately 1.05 seconds in the Old3DS browser, or pressing the touchscreen for approximately 0.41 seconds in the New3DS browser. Also, the <em>mousedown</em> event is only dispatched while text selection mode is active. The events cannot have their default action cancelled.
The <em>mousedown</em>, <em>mouseup</em>, and <em>click</em> events are all triggered by the browser. However, the <em>mousedown</em> event doesn't trigger until you lift the stylus or you've held it on the screen long enough to trigger text selection mode. Text selection mode requires pressing the touchscreen for approximately 1.05 seconds in the Old3DS browser, or pressing the touchscreen for approximately 0.41 seconds in the New3DS browser. Also, the <em>mousedown</em> event is only dispatched while text selection mode is active. Mouse events cannot have their default actions cancelled.
Touch/gesture events are not supported.
Touch events are not supported in the Old3DS browser, and the <em>touchcancel</em> event does not seem to be used by either browser. Touches cannot start within the bottom browser bar, but they can move to be within it. The rotation angle, contact radii, and pressure of each touch are always zero, as the 3DS touchscreen is not capable of detecting these values. Only one touch can be detected at a time due to the touchscreen's hardware limitations as well. Unlike mouse events, touch events can have their default actions cancelled. Doing so will prevent the touchscreen from being used to scroll through the webpage, highlight text, zoom out, and interact with the bottom browser bar.
==== System Font Characters ====
==== System Font Characters ====
The up screen resolution is 400×240. However, the viewable area in the browser is only <b>400×215</b>.
The up screen resolution is 400×240. However, the viewable area in the browser is only <b>400×215</b>.
The touch screen resolution is 320×240. However, the viewable area in the browser is only <b>320×212</b>.
The touch screen resolution is 320×240. However, the viewable area in the browser is <b>320×212</b> <em>or</em> <b>320×240</b>, depending on if the bottom browser bar is visible. The New3DS browser's bottom bar can hidden by scrolling and/or attempting to zoom in/out with the C-stick, unless scrolling and zooming have both been disabled.
You can have a page span both screens. However, the browser will behave as if the bottom screen is the only active screen and the top screen is scrolled off. This is important when computing CSS coordinates. Items positioned from "bottom" will be positioned based on 215px and not the full 427px of both screens.
You can have a page span both screens. However, the browser will behave as if the bottom screen is the only active screen and the top screen is scrolled off. This is important when computing CSS coordinates. Items positioned from the "bottom" will be positioned based on the height of the bottom screen, not the cumulative height of both screens.
== Using Both Screens ==
== Using Both Screens ==
<html>
<html>
<head>
<head>
<meta name="viewport" content="width=320, initial-scale=1">
<meta name="viewport" content="width=400, initial-scale=1">
<style>
<style>
body { margin: 0px; }
body { margin: 0px; }
}, 0);
}, 0);
This automatically resets the position if the user accidentally scrolls the page. Zooming should probably also be disabled by adding <code>user-scalable=no</code> to the <meta> viewport element.
This automatically resets the position if the user accidentally scrolls the page. Zooming should probably also be disabled by adding <code>user-scalable=no</code> to the <meta> viewport element, though this will only have an effect in the New3DS browser.
==Example Sites==
==Example Sites==
<!-- If you have a website that demonstrates these techniques, place it here! -->
<!-- If you have a website that demonstrates these techniques, place it here! -->
* [http://www.nintendo.com/3ds/internetbrowser/bookmarks Nintendo 3DS Bookmarks]: This is the first bookmark pre-installed in the browser.
* [http://www.nintendo.com/3ds/internetbrowser/bookmarks Nintendo 3DS Bookmarks]: This is the first bookmark pre-installed in the browser.
* [https://imgsharetool.herokuapp.com ImageShare]: Image uploader for the 3DS ([https://github.com/corbindavenport/image-share source code])
* [http://theimageshare.com ImageShare]: Image uploader for the 3DS ([https://github.com/corbindavenport/imageshare source code])
* [http://3ds.andysmith.co.uk/jFox.html jFox] (Short URL: http://bit.ly/iB7FqW)
* [http://3ds.andysmith.co.uk/jFox.html jFox] (Short URL: http://bit.ly/iB7FqW)
* [http://ditto3d.com/3ds Ditto3D (Dead Link)] (Short URL: http://bit.ly/oVreWA)
* [http://ditto3d.com/3ds Ditto3D (Dead Link)] (Short URL: http://bit.ly/oVreWA)