First Draft

First Draft of the Example Files
2020-12-10 13:21:38 +00:00
parent 77a7b57c4f
commit 0335342e00
1127 changed files with 46959 additions and 56 deletions
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>The HTML5 Canvas</title>
+    <script src='OSC.js'></script>
+  </head>
+  <body>
+    <canvas id='mycanvas' width='320' height='240'>
+      This is a canvas element given the ID <i>mycanvas</i>
+      This text is only visible in non-HTML5 browsers
+    </canvas>
+    <script>
+      canvas            = O('mycanvas')
+      context           = canvas.getContext('2d')
+      context.fillStyle = 'red'
+      S(canvas).border  = '1px solid black'
+
+      context.beginPath()
+      context.moveTo(160, 120)
+      context.arc(160, 120, 70, 0, Math.PI * 2, false)
+      context.closePath()
+      context.fill()
+    </script>
+  </body>
+</html>
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html> <!-- geolocation.html -->
+  <head>
+    <title>Geolocation Example</title>
+  </head>
+  <body>
+    <script>
+      if (typeof navigator.geolocation == 'undefined')
+         alert("Geolocation not supported.")
+      else
+        navigator.geolocation.getCurrentPosition(granted, denied)
+
+      function granted(position)
+      {
+        var lat = position.coords.latitude
+        var lon = position.coords.longitude
+        
+        alert("Permission Granted. You are at location:\n\n"
+          + lat + ", " + lon +
+          "\n\nClick 'OK' to load Google Maps with your location")
+
+        window.location.replace("https://www.google.com/maps/@"
+          + lat + "," + lon + ",14z")
+      }
+
+      function denied(error)
+      {
+        var message
+
+        switch(error.code)
+        {
+          case 1: message = 'Permission Denied'; break;
+          case 2: message = 'Position Unavailable'; break;
+          case 3: message = 'Operation Timed Out'; break;
+          case 4: message = 'Unknown Error'; break;
+        }
+
+        alert("Geolocation Error: " + message)
+      }
+    </script>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>HTML5 Video</title>
+  </head>
+  <body>
+    <video width='560' height='320' controls>
+      <source src='movie.mp4'  type='video/mp4'>
+      <source src='movie.webm' type='video/webm'>
+      <source src='movie.ogv'  type='video/ogg'>
+    </video>
+  </body>
+</html>
@@ -0,0 +1,3 @@
+function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
+function S(i) { return O(i).style                                            }
+function C(i) { return document.getElementsByClassName(i)                    }