0

I have a client that needs a browser based user-interface with complex moving, constantly changing graphics.

Example of the kind of graphics we need to support, it must flow smoothly, at least 10 frames per second (the gif-conversion is making the annoying choppiness of the image):

example graphics

We traditionally implement this using the LibGDX library to generate 2D graphics on the fly.

However the client sternly demands we follow some directives that make the traditional method forbidden and since we are not web developers we are stymied on what methods remain to be used, if any.

Allowed:

  • pure javascript
  • html/css

Not allowed:

  • canvas
  • frameworks (ajax, jquery etc)
  • transparency effects
  • > 8-bit images

Solutions we thought about but did not test yet so we don't know how viable they are:

  1. Generate the full screen graphics in the backend and transfer to browser 10 times/second
  2. Generate the changed parts of the screen in the backend and transfer to browser up to 10 times/second (less bandwidth/image decoding than #1)

We looked at CSS Animations but not sure they help since they have limited functionality.

Are there other solutions/capabilities of the browser (chromium 69-compatible) that we can use to enable this kind of graphics?

DHa
  • 659
  • 1
  • 6
  • 21
  • 1
    Do you know "why" they don't allow canvas? That sounds like a very surprising request, and the why they don't want it might exclude some other possible solutions (like SVG for instance). – Kaiido Nov 01 '22 at 08:01
  • `` is a perfect fit for this keep of job. – Layhout Nov 01 '22 at 08:26
  • They probably forgot to list SVG! Thanks, gives us another option. The client thinks the list equals 'efficiency' (true for simple static web pages), and cannot be convinced it becomes less efficient for moving graphics. – DHa Nov 01 '22 at 08:58
  • Could you reexplore with the client why they wont allow canvas - since it is listed that you can use HTML and canvas is just part of . DoHTML they actually know what canvas is or do they have some suspicion it involves an external package? – A Haworth Nov 01 '22 at 11:23
  • I trust your client determined those restrictions through requirements not yet conveyed in your question. The restrictions by themselves seem a bit strange to me atleast. It might have been a knee-jerk reaction, 'Don't need libGDX to render some charts' into 'no frameworks/canvas'. Nowadays, I wouldn't worry about achieving 60fps unless 1k+ entities are animated simultaneously. I would be more worried about maintainability and development time. Anyway, this [Q&A](https://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div) goes into more detail of the pros/cons of svg vs canvas. – Lars Nov 01 '22 at 21:31
  • As a side note, if you're looking to create nice data visualisations, I would recommend [D3.js](https://observablehq.com/@d3/bar-chart-race). That is a library though . – Lars Nov 01 '22 at 21:39
  • 1
    You could use GDX-video to create your own youtube-like client, and dynamically construct the video stream at the server. All libgdx code converts to javascript so within your remit plus you can stream at 60fps. – londonBadger Nov 03 '22 at 13:43

0 Answers0