fable-compiler / fable-graphics Goto Github PK

View Code? Open in Web Editor NEW

23.0 23.0 8.0 3.87 MB

Fable bindings for graphic tools: D3, DC, Three, Pixi

Home Page: https://fable-compiler.github.io/fable-graphics/

License: Apache License 2.0

F# 99.91% Batchfile 0.02% Shell 0.07%

fable-graphics's People

Contributors

Stargazers

Watchers

Forkers

leolorenzoluis et1975 2scomplement cloudstu ncthbrt yukibonji whitetigle darrix

fable-graphics's Issues

D3: Using parentheses in interface members wraps it arguments in tuples

In Fable.Import.D3.fs many arguments of abstract members are in brackets, like so:

type Zoom<'Datum> =
  abstract scaleExtent: unit -> float * float
  abstract scaleExtent: extent: (float * float) -> Zoom<'Datum>

The ways to call method scaleExtent is:

let a = 1., 1.
D3.Behavior.Globals.zoom().scaleExtent(a)
let (1., 1.) |> D3.Behavior.Globals.zoom().scaleExtent
D3.Behavior.Globals.zoom().scaleExtent ((1.,1.))

If you try D3.Behavior.Globals.zoom().scaleExtent(1., 1) you get exception : "scaleExtent does not take two arguments". That is because (float * float) type compiled as a Tuple in IL. Better way is to define arguments in interfaces without brackets: abstract scaleExtent: float * float -> Zoom<'Datum>. So now I can write: D3.Behavior.Globals.zoom().scaleExtent(1., 1.).

I suppose that Fable.Import.D3.fs generated by some script? So it makes no sense to make changes in Fable.Import.D3.fs directly, am I right?

Add tests and CI

It would be good to have some tests for tracking feature availability. Also it would help keeping quality across binding updates. In the end we should have a CI too.

Bump to Pixi 4.x

We should track the progress for Pixi 4.x

Using DC in Elmish apps

What I've managed to achieve reading the binding file and https://github.com/dc-js/dc.js/blob/master/web/examples/line.html:

let root model dispatch =
  div []
    [ let chart = Globals.lineChart "#chart"
      

      yield
        chart
            .width(768.)
            .height(480.)
            .x(Scale.Globals.linear().domain([|0.; 20.|]))
            .renderLabel(true)
            .yAxis("Y")
            .dimension()
            .group()
            .renderHorizontalGridLines(true)

    ]

:))

Update Browse Doc target

@whitetigle : Do you think it would possible to rebuild the doc for one sample only when needed?

@MangelMaxime Yes this is possible normally, we should have the BrowseTarget in Fake which allow us to start a webserver and have auto refresh and build when one sample change (build is only for this sample). I need to check if this is still working or if I need to patch it.

Just create this issue to keep track of it.
Don't have the time to do this at the moment.

Update sample versions to latest version

Template for generating samples are tied to old version of Fable. We need to update the samples version to latest and start using rollup when building samples.

Build errors

First attempt: build.sh in project root:

  1) Building /Users/jacereda/src/fsharp/fable-graphics/bindings/Fable.Graphics.fsproj failed with exitcode 1.
  2) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4155,41): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  3) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4466,44): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  4) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4466,74): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  5) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4493,121): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  6) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4494,105): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  7) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4495,72): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  8) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4496,103): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
  9) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4497,92): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 10) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4500,89): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 11) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4501,122): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 12) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4502,43): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 13) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4502,106): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 14) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4508,87): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 15) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4510,100): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 16) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4525,90): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 17) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4527,46): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 18) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4533,105): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 19) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4534,65): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 20) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4535,124): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 21) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4536,64): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 22) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4537,62): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 23) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4547,55): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 24) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4619,44): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 25) FS0039: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(4619,82): The namespace or module 'p2' is not defined. Maybe you want one of the following:�   P2
 26) FS0501: /Users/jacereda/src/fsharp/fable-graphics/bindings/fable-import-phaser/Fable.Import.Phaser.fs(372,9): The object constructor 'Sprite' takes 5 argument(s) but is here given 0. The required signature is 'new : game:Phaser.Game * x:float * y:float * ?key:U4<string,Phaser.RenderTexture,Phaser.BitmapData,PIXI.Texture> * ?frame:U2<string,float> -> Phaser.Sprite'.

Second attempt, in samples/pixi/basic after running npm update in samples:

Jorges-MacBook-Pro:basic jacereda$ npm run build

> [email protected] build /Users/jacereda/src/fsharp/fable-graphics/samples/pixi/basic
> node ../../node_modules/fable-compiler

fable-compiler 0.7.51: Start compilation...
Compiled basic/basic.js at 14:54:38
Bundling...
Bundled public/bundle.js at 14:54:41
Jorges-MacBook-Pro:basic jacereda$ npm start

> [email protected] start /Users/jacereda/src/fsharp/fable-graphics/samples/pixi/basic
> node ../../server

module.js:529
    throw err;
    ^

Error: Cannot find module 'fable-core'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/jacereda/src/fsharp/fable-graphics/samples/server/index.js:28:18)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node ../../server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jacereda/.npm/_logs/2018-01-11T13_55_15_353Z-debug.log
Jorges-MacBook-Pro:basic jacereda$

What am I doing wrong?

The type 'KeyValueList' is not defined

Fable.Import.Pixi.fs isn't compatible with the latest Fable anymore.

We need to replace the KeyValueList attribute with a different approach I suppose.

Wrong repo location in npmjs.org

The repo location for:

are not pointed to fable-graphics.

Also, there is a repo https://www.npmjs.com/package/fable-import-phaser not affiliated to Fable-compiler. I don't know if this is known, because there is 2 repos for fable-import-phaser on github. (fable-graphic + this one)

Ping @alfonsogarciacaro :)

Functional game engine

Hi @whitetigle and @MangelMaxime! Let's start a new issue as the previous one went off-topic long ago ;)

I've a bit of experience with game engines in the past (before I learnt functional programming) so here are my thoughts:

We must do as @whitetigle says and start by creating a comparison with a pure JS sample like http://www.goodboydigital.com/pixijs/bunnymark_v3/ so we can always compare how well our engine performs against raw JS.
@MangelMaxime's adaptation of Fable architecture is a good start but there's room for improvement. I guess we can still remove some steps while keeping an API similar to the one for fable-virtualdom.
The idea of render with something like Canvas is different from a GUI framework like DOM (or Windows Forms or whatever). In the latter, render means updating the GUI component hierarchy to make some changes. This is expensive and it doesn't need to be done for every frame (actually the concept of frame is foreign to GUI frameworks), but virtualdom allows us to update the state without worrying too much about the actual DOM. On the other hand, with Canvas you draw raw pixel and everything must be rendered every frame (the only optimisation is to skip rendering of elements that are completely hidden).
Optimisation in games usually have to do with the update method, as it often involves expensive physic calculations. We need to receive the time elapsed (the argument in the callback to animation frame), first to do calculations by time and not by time frame (e.g. so bunnies rotate at the same speed even if the frame rate drops) and second to skip calculations that are not needed at that point.

So we need to take the classic game loop and try to make it more functional:

let gameLoop(dt) =
    update(dt)
    render()
    window.requestAnimationFrame(gameLoop)

I have a couple of concerns at the moment:

Events: we could take the events happening in every frame and put them in a buffer that is passed to the update function. Any ideas?
State: when dealing with thousand of sprites on screen I guess it's going to be difficult to keep the state functional and immutable. We'll probably have to use a mutable state, but we could try to do it in an elegant way.

Pixi: fail to use renderer

Hi!
I am trying to setup a very simple Pixi project. However I fail right at the start with a compilation error.
Since I am new to both Fable & F# there may be things I do wrong. Or maybe I did not understand the Erase attribute sample in the doc since Globals.autodetectRenderer returns a U2<WebGLRenderer, CanvasRenderer>

Anyway here is my code :

open System
open Fable.Core
open Fable.Core.JsInterop
open Fable.Import.PIXI
open Fable.Import.Browser

let currentRenderer =
  let renderer = Globals.autoDetectRenderer( 800., 600.  )
  match renderer with
    | U2.Case1 webgl -> webgl :> SystemRenderer
    | U2.Case2 canvas -> canvas :> SystemRenderer

document.body.appendChild( currentRenderer.view )

When I compile it says :

fable-compiler 0.5.8: Start compilation...
ERROR: Unsupported type test: GenericParam "b" (L27,8-L27,16)

which corresponds to my renderer value

match renderer with

I use fable-core 0.5.5.
I have tried other ways but I can't get past this error.
Thanks for your kind help!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.