Mobile version

Lets you draw with touches. There's also a manifest.webapp for open web apps
(such as for Firefox OS). Modernizr is used for detecting whether the device
supports touches, but this is _not_ 100% reliable, yet:

Modernizr/Modernizr#548

Currently, the points are 15px off on the Y axis.

Cakefile

@@ -1,11 +1,13 @@
 task "build", "compile assets", ->
   {spawn} = require 'child_process'
+  spawn "cp", ["views/modernizr.js", "public/"], stdio: 'inherit'
   spawn "node_modules/.bin/coffee", ["-o", "public", "views/*.coffee"], stdio: 'inherit'
   spawn "node_modules/.bin/stylus", ["-o", "public", "views/*.styl"], stdio: 'inherit'
   spawn "node_modules/.bin/jade", ["-o", "public", "views/*.jade"], stdio: 'inherit'
 
 task "watch", "compile assets on the fly", ->
   {spawn} = require 'child_process'
+  spawn "cp", ["views/modernizr.js", "public/"], stdio: 'inherit'
   spawn "node_modules/.bin/coffee", ["-o", "public", "-w", "views/"], stdio: 'inherit'
   spawn "node_modules/.bin/stylus", ["-o", "public", "-w", "views/"], stdio: 'inherit'
   spawn "node_modules/.bin/jade", ["-o", "public", "-w", "views/"], stdio: 'inherit'

app.js

@@ -3,6 +3,7 @@ var morgan = require('morgan')
 var nib = require('nib')
 var path = require('path')
 var app = express()
+var pkg = require('./package.json')
 
 app.set('view engine', 'jade')
 app.set('views', path.join(__dirname, 'views'))
@@ -15,9 +16,30 @@ app.get('/', function(req, res) {
   res.render('index')
 })
 
+webapp = {
+  name: pkg.name,
+  version: pkg.version,
+  description: pkg.description,
+  launch_path: "/",
+  developer: pkg.author,
+  icons: {
+    128: "/icon@128.png",
+    512: "/icon@512.png"
+  },
+  default_locale: "en",
+  fullscreen: true
+}
+
+app.get('/manifest.webapp', function(req, res) {
+  res.set('Content-Type', 'application/x-web-app-manifest+json')
+  res.end(JSON.stringify(webapp))
+})
+
 var server = app.listen(process.env.PORT || 3000, function() {
-  var name = require('./package').name
+  var name = pkg.name
+  var version = pkg.version
   var host = server.address().address
   var port = server.address().port
-  console.log("%s listening at %s:%s", name, host, port)
+  console.log("%s v%s listening at %s:%s", name, version, host, port)
+  var version = pkg.version
 })

views/index.coffee

@@ -1,60 +1,49 @@
+Sceitse = (element) ->
+  canvas = document.createElement('canvas')
+  element.appendChild(canvas)
 
-Sceitse = (canvas) ->
+  MARGIN = 15
   [_painting, _savepoints, _x, _y, _d] = [false, [], [], [], []]
+  context = canvas.getContext('2d')
 
   mouseup = (event) ->
-    return if touchAvailable
     _painting = false
-    canvas.classList.remove 'painting'
 
   mouseleave = (event) ->
-    return if touchAvailable
     _painting = false
-    canvas.classList.remove 'painting'
 
   mousedown = (event) ->
-    return if touchAvailable
     _painting = true
     _savepoints.push(_x.length)
-    canvas.classList.add 'painting'
     [x, y] = [event.pageX - @offsetLeft, event.pageY - @offsetTop]
     paint(x, y)
 
   mousemove = (event) ->
-    return if touchAvailable
     return unless _painting
     [x, y] = [event.pageX - @offsetLeft, event.pageY - @offsetTop]
     paint(x, y, true)
 
   touchstart = (event) ->
-    return unless touchAvailable
-    _painting = true
-    canvas.classList.add 'painting'
-    console.log "TOUCH START", event
-
+    mousedown.call(@, touch) for touch in event.touches
+
   touchmove = (event) ->
-    return unless touchAvailable
-    console.log "TOUCH MOVE", event
+    event.preventDefault()
+    mousemove.call(@, touch) for touch in event.touches
 
   touchend = (event) ->
-    return unless touchAvailable
-    _painting = false
-    canvas.classList.remove 'painting'
-    console.log "TOUCH END", event
+    mouseup.call(@, touch) for touch in event.touches
 
   paint = (x, y, d = false) ->
     _x.push(x)
     _y.push(y)
     _d.push(d)
     redraw()
 
-  context = canvas.getContext('2d')
-  context.strokeStyle = 'green'
-  context.lineJoin = 'round'
-  context.lineWidth = 5
-
   redraw = ->
     context.clearRect(0, 0, canvas.width, canvas.height)
+    context.strokeStyle = 'green'
+    context.lineJoin = 'round'
+    context.lineWidth = 5
     max = _x.length
     for i in [0...max]
       context.beginPath()
@@ -81,16 +70,18 @@ Sceitse = (canvas) ->
     redraw()
 
   resize = (width, height) ->
-    canvas.width = window.innerWidth
-    canvas.height = window.innerHeight
-
-  canvas.addEventListener('mousedown', mousedown)
-  canvas.addEventListener('mousemove', mousemove)
-  canvas.addEventListener('mouseup', mouseup)
-  canvas.addEventListener('mouseleave', mouseleave)
-  canvas.addEventListener('touchstart', touchstart)
-  canvas.addEventListener('touchmove', touchmove)
-  canvas.addEventListener('touchend', touchend)
+    canvas.width = window.innerWidth - MARGIN * 2
+    canvas.height = window.innerHeight - MARGIN * 2
+
+  if Modernizr.touch and navigator.maxTouchPoints isnt 0
+    canvas.addEventListener('touchstart', touchstart)
+    canvas.addEventListener('touchmove', touchmove)
+    canvas.addEventListener('touchend', touchend)
+  else
+    canvas.addEventListener('mousedown', mousedown)
+    canvas.addEventListener('mousemove', mousemove)
+    canvas.addEventListener('mouseup', mouseup)
+    canvas.addEventListener('mouseleave', mouseleave)
 
   x: _x
   y: _y
@@ -100,9 +91,6 @@ Sceitse = (canvas) ->
   undo: undo
   resize: resize
 
-touchAvailable = 'ontouchstart' in window
 document.addEventListener 'DOMContentLoaded', ->
-  touchAvailable = window.ontouchstart isnt undefined
-  sceitse = new Sceitse(@querySelector('canvas#sceitse'))
-  console.log touchAvailable
-window.Sceitse = Sceitse
+  sceitse = new Sceitse(@querySelector('#sceitse'))
+  sceitse.resize()

views/index.jade

@@ -3,13 +3,14 @@ html(lang="en")
   head
     meta(charset="utf8")
     title Sceitse
-    meta(name="viewport" content="width=device-width, initial-scale=1")
+    meta(name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no")
+    meta(name="apple-mobile-web-app-capable" content="yes")
     link(rel="stylesheet" href="index.css")
+    link(rel="apple-touch-icon" sizes="180x180" href="/icon@180.png")
+    link(rel="apple-touch-icon" sizes="120x120" href="/icon@120.png")
+    link(rel="apple-touch-icon" sizes="152x152" href="/icon@152.png")
+    link(rel="apple-touch-icon" sizes="76x76" href="/icon@76.png")
+    script(src="modernizr.js")
     script(src="index.js")
   body
-    header
-      h1 Sceitse
-    article Hello
-      canvas#sceitse
-    footer
-      p © 2015 bjjb
+    #sceitse

views/index.styl

@@ -1,17 +1,21 @@
+// General styles
 body
-  margin 2em
+  padding 0
+  margin 0
+#sceitse
+  position relative
+  display block
+  height 100%
   color #555
   font-family sans-serif
   background-color cornsilk
+  canvas
+    display block
+    margin auto
+    margin 15px
+    background-color white
+    box-shadow 0px 2px 10px 1px rgba(0, 0, 0, 0.4)
+    cursor crosshair
 
-canvas#sceitse
-  display block
-  margin auto
-  background-color white
-  box-shadow 0px 2px 10px 1px rgba(0, 0, 0, 0.4)
-  cursor crosshair
-
-.touch-enabled
-  canvas#sceite
-    width 100%
-    height 100%
+// Overrides for touch-enabled devices
+//@media (max-width: 320px)