ku-fpg / blank-canvas Goto Github PK
View Code? Open in Web Editor NEWA Haskell API into HTML5 Canvas
License: BSD 3-Clause "New" or "Revised" License
A Haskell API into HTML5 Canvas
License: BSD 3-Clause "New" or "Revised" License
Blank canvas sometimes crashes.
Implement the trigger command, that triggers an event, but from the Haskell end.
There are reports from EECS 776 that blank canvas slows down after playing a blank canvas game for a bit (~30 seconds). We need to figure out if that is a blank canvas issue, or an idiom issue.
To reproduce this bug:
.cabal-sandbox/bin/blank-canvas-example-html5canvastutorial
The application will then fail with the alert message "Image /images/fan.jpg not found. Add as a static file to fix this."
Have a version of send that generates JavaScript, for use outside blank-canvas.
I've create a wiki page for discussions.
Unicode escapes in strings are not supported properly.
(Try sending the Unicode for (c), for example.)
Right now, we have a function (#) :: a -> (a -> b) -> b
such that a # f = f a
. It works, but there's been talk of using the (#)
as a natural transformation instead (currently in the wakarusa
repo). With this, we could define natural transformations such as:
instance Transformation Canvas IO DeviceContext where
(#) = send
However, this would not work for things that we currently use the blank-canvas
(#)
for, such as grd # addColorStop(0, "#8ED6FF")
and (defFont [sansSerif]) { fontSize = 30 # pt }
. I think the best way to mitigate such a change would be to use the (&) :: a -> (a -> b) -> b
function that was introduced in GHC 7.10 in Data.Function
(if one is using an older version of GHC, it's easy to redefine it: a & f = f a
). There's also a bit of history in that (&)
is also used in lens
, so it's not a completely arbitrary choice of name.
@andygill, what are your thoughts?
Right now, font
is of type Text -> Canvas ()
, which is pretty risky since CSS fonts have a pretty specific syntax that can be easy to goof up. To make using fonts more strongly typed, we should introduce a Font
ADT (similar in spirit to the one in diagrams-lib
) that one can use to optionally overload font
.
Fonts have two required arguments: a size and a family, so the function that constructs it would probably look like mkFont :: FontSize -> FontFamily -> Font
. The other four arguments are optional, so to prevent an excessive number of functions with combinations of optional arguments, we can allow the user to set them via record syntax, e.g.:
mkFont 16 "Droid Serif" {
fontStyle = Italics
, fontVariant = SmallCaps
, fontWeight = 400
}
This was originally a debugging mechanism. I used it quite a bit in story-board.
We should consider
type Canvas a = CanvasM Pure a
Then allowing LiftIO for CanvasM IO.
(Or not. I can refactor story-board if needed.)
Add the ability to apply a JavaScript fn to a canvas, without going to Haskell.
The documentation for many Canvas API functions is lacking or non-existent at the moment. This can be intimidating for beginners, so let's at least add a basic description of what each function does (perhaps using this overview of <canvas>
).
async
should wait until the command being send has been picked up by the browser.
Should size have type
size :: Canvas (Float,Float)
or
size :: () -> Canvas (Float,Float)
On the one hand, this is a JavaScript DSL, on the other, its not really Haskell-like.
Now that we have a newAudio
query working, we should figure out what actions a user can perform with audio, and implement them. Some ideas:
saveRestore should have type C a -> C a, not C () - C ().
Assuming CanvasContext
's are not erased.
place :: Int -> Canvas ()
Where the argument is the z value.
Without -threaded, blank-canvas hangs without a message.
blank-canvas
currently requires transformers-0.3.*
, but the latest version is 0.4.1.0. I can compile it with 0.4.1.0 without any changes, so raising the upper version bound should suffice.
Can someone estimate when the version on Hackage will support GHC-7.10? It looks like HEAD already does, but maybe some upstream packages (stringsearch
) do not.
We're preparing for a 1.3 Diagrams release, so I'm wondering if the next release of diagrams-canvas
will be able to support GHC-7.10.
drawImage
and putImageData
are variadic JavaScript functions, which we accomodate by making their blank-canvas
equivalents accept lists of Float
s as arguments. Since drawImage
expects exactly 2, 4, or 8 Float
arguments, and putImageData
expects exactly 2 or 6 Float
arguments, using lists can be error-prone. Thus, we should create variants of drawImage
and putImageData
that require exact numbers of Float
arguments.
Make one type, Event, which has a name.
The wiki-suite test seems to never finish, noticed both on ubuntu when building stackage nightly and when running it on OS X. On OS X I just get a blank browser window, after Ctrl-C
ing some errors appear before exiting:
Test suite wiki-suite: RUNNING...
("blank-canvas.wiki/images/Load_Image_Data_URL_2.png","Load_Image_Data_URL_2")
"Load_Image_Data_URL_2"
# open (for blank-canvas.wiki/images/Load_Image_Data_URL_2.png)
"Exception in blank-canvas application:"
images/Haskell.jpg: openBinaryFile: does not exist (No such file or directory)
wiki-suite: images/Haskell.jpg: openBinaryFile: does not exist (No such file or directory)
"Exception in blank-canvas application:"
images/Haskell.jpg: openBinaryFile: does not exist (No such file or directory)
wiki-suite: images/Haskell.jpg: openBinaryFile: does not exist (No such file or directory)
"Exception in blank-canvas application:"
images/Haskell.jpg: openBinaryFile: does not exist (No such file or directory)
wiki-suite: images/Haskell.jpg: openBinaryFile: does not exist (No such file or directory)
user interrupt
Test suite wiki-suite: FAIL
Test suite logged to: dist/test/blank-canvas-0.6-wiki-suite.log
I've disabled running the test-suite on stackage for this reason.
Additionally the test suite also doesn't work if used with stack since there's no dist directory then:
./dist/build/wiki-suite/wiki-suite: createProcess: runInteractiveProcess: exec: does not exist (No such file or directory)
If this fails
imageObj <- newImage "/images/Haskell.jpg"
Then there is no warning message, ever.
Replace the usage of strings with Text, or something better.
This issue happens on Windows and not on Linux, so I'll assume it's Windows-specific. When running a blank-canvas
application, refresh the browser. After a brief pause, the console running the blank-canvas
application will print out receiveloop: failed (No error)
. Other than this "failure", nothing seems broken.
As an alternative to console_log
, it would be convenient to be able to print messages directly to stdout, e.g.,
liftIO $ putStrLn "debug"
To that end, Canvas
should be made an instance of MonadIO
.
This would help the performance improvements we want to do
Add some way of seeing when the application throws an exception.
Provide a way of changing the mouse counter
cursor :: Text -> Canvas ()
Have a way of scaling, based on the devicePixelRatio, or the considerations.
Background: 1px on the canvas is 2x2px on the screen. So text looks fuzzy.
By having the css value 1/2 the actual size, real pixels can be used.
sync, which waits for the browser, remains.
Clean up the many warnings
Is this a known issue?
[ 190s] [ 4 of 17] Compiling Graphics.Blank.JavaScript ( Graphics/Blank/JavaScript.hs, dist/build/Graphics/Blank/JavaScript.p_o )
[ 198s] ghc: panic! (the 'impossible' happened)
[ 198s] (GHC version 7.10.3 for i386-unknown-linux):
[ 198s] Simplifier ticks exhausted
[ 198s] When trying UnfoldingDone eta_aoW1
[ 198s] To increase the limit, use -fsimpl-tick-factor=N (default 100)
[ 198s] If you need to do this, let GHC HQ know, and what factor you needed
[ 198s] To see detailed counts use -ddump-simpl-stats
[ 198s] Total ticks: 8
There appear to be a number of features from the WHATWG HTML Living Standard for the <canvas>
API that blank-canvas
does not currently implement. The ones that are widely supported among popular web browsers are:
Support accessing the requestAnimationFrame
concepts from blank canvas.
If you try and load an image, and there is no static image available, there is no error message.
ImageData is a byte array of RGBA values. We should be able to read and write it to the canvas.
Currently, the Read
/IsString
instance for Cursor
s don't take into account quotes URLs that have quotes themselves. For example, this will not parse currently: "url(\"https://en.wikipedia.org/wiki/\"Heroes\"\"), default"
. This should be fixable by tracking quotes with a stack.
This would allow small independent canvases.
Add support for dynamically adding possible URLs for loading images, and artifacts.
We already support data URLs.
But better would be
url <- loadAsURL("foo/jayhawk.jpg")
img <- newImage (url)
This is because the browser can request it directly (via scotty), rather than send all the data via the command channel.
There is strong reason not to use Float.
I have an USB-dongle that (wirelessly) activates PageUP/Down keys on my keyboard. I have a Mac. However those keystrokes (as well as arrow keys etc. from the keyboard) do not arrive on the server side. I use story-board
as the server app, and Chome as the client browser (same with Safari).
Any idea where the change should be made to fix this?
Here is the Event from a keypress. ePageXY should be Nothing.
Event {eMetaKey = False, ePageXY = Just (NaN,NaN), eType = "keypress", eWhich = Just 32})
sync returns (), which breaks the rule about return () merges with next command.
The ideas is instead return the round trip time.
sync :: Canvas Float -- how long it took, in seconds
async :: Canvas Float -- also how long it took
The Haddocks now have lots of example code, so let's make them collapsible using the new Haddock syntax (example here),
Add a way of saving a subset of Canvas operation offline, for playback.
Add the ability to read the URL query, so that a webpage can use blank-canvas + iframe to render things.
One of the HTML5 Canvas tutorial examples (1.8.6) currently crashes.
{-# LANGUAGE OverloadedStrings #-}
module Main where
import Data.Monoid
import qualified Data.Text as Text
import Graphics.Blank
main :: IO ()
main = blankCanvas 3000 $ \ctx -> send ctx $ do
let (w,h) = (width ctx, height ctx)
let x = w / 2
let y = h / 2 - 10;
let text = "Hello World!"
font "30pt Calibri"
textAlign "center"
fillStyle "blue"
fillText(text, x, y)
TextMetrics w' <- measureText text
font "20pt Calibri"
textAlign "center"
fillStyle "#555"
fillText("(" <> Text.pack (show w') <> "px wide)", x, y + 40)
This yields a runtime error:
"Exception in blank-canvas application:"
user error (key "width" not present)
MeasureTextCrashes.hs: user error (key "width" not present)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.