I'm trying to create a web-based WYSIWYG editor that consists of a canvas and a tool bar with widgets such as text object, shape object, line object, image object, video object and photo gallery object. A person can click and drag objects from the tool bar and place them into the canvas area. Once placed in canvas, they can change the properties of the objects. Properties they can change are width, height, color, z-index etc....
Does anyone know if there's an off the shelf solution I can start from and customize? If not, then what libraries and technologies should I be aware of to build this from scratch?
I'm primarily a backend developer, so I'm not up to speed with all the new things that come with HTML5 and CSS3, so not sure if they are relevant to what I need to do.
we (#work) have started a research project with University of Padua (italy - course of Software Engineering) aimed to obtain a web page generator. It's a WYSIWYG and you can Drag and drop widgets from toolbar into canvas :) unfortunately, the UI is in Italian but the code is very good.
It's an open source project and you can take a look # the source.
The technologies that have been used are:
HTML5 (<canvas> to easily represent shapes and easily zoom-in/out)
javascript/jQuery
Php (backend script to save/load templates)
references: http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)
Edit: another tool that could be helpful is https://gomockingbird.com/mockingbird/
About starting from scratch, I suggest you to use the following architecture/technologies:
HTML+css obv for the basic layout (widget toolbar, canvas area...)
Tons of JS to represent each different object. I.e. you could map a particular widget with a pure JS object that could have some properties. These props are rendered when you click the object inside the canvas area. When you want to drag an object inside the area, resize it etc you should use a js lib (personally, I prefer mootools, also coz it simplifies OO through the Class system).
Server side scripts (Php, ruby, java...) to save (XML, Json..DB?) and load.
check http://fabric.js
I am developing a diagram tool using this similar to dia , awesome support for drap-drop-scale
I recently stumbled across Hotglue, it works like that but unfortunately without canvas. I guess they (and me) would be very happy to transform it from div positioning to canvas, it is in their todo list for a far away release at least.
Related
I need to build a visual designer image or card designer that lets you add text boxes of text (multiple fonts), or images, drag them around, and resize them.
This seems rather simple but I would yet think common - but so far I haven't found anything I could use as a basis for this.
What I'm looking for is something like Keynote but super basic.
I've looked at:
remark.js: presentation only
reveal.js: Pretty close, but only the presentation engine is open source. The visual editor is a closed source service.
mxgraph / jgraph: designed for directed graphs or flowchart
gojs: designed for directed graphs or flowchart
contentbuilder: its a layout engine for a page with stacked layout modules, I need something that authors a card
Of course also staple javasript editors like ACE, CK and TinyMCE but they solve the font editing / font selection problem, but not the drag & drop boxes & layout issue.
What I'm trying to build is something you might use on tinyprints.com or minted when you design your card, or canva.com.
But my needs are really basic - so I'm thinking that possibly the reason there isn't a library for this is that its pretty easy to build it? Anyway, would love some input.
It's less of a layout editor/designer but Fabric JS has a lot of the features you are looking for (multiple fonts, dragging images around and resizing). It's Canvas-based but can export to JSON if you need to transfer to a non-raster format. Might be adaptable if this is still a need.
I'm trying to understand what people use canvas for?
I see it on job postings I read about it in Definitive JavaScript, but I don't quite get what it is used for.
I understand that you can draw 2d or 3d ( usually 2d ) objects but why no just use Gimp or Photoshop and upload the image.
Is it so you can create dynamic images based on say...user-specific data?
What is a practical example or perhaps a link to a professional implementation of canvas ( Definite JavaScript show basis stuff like drawing circles ).
MDN Tutorial
I have used a canvas to draw a graph, and it falls back to requesting a PHP-generated image if the browser doesn't support <canvas>. It's always a good idea to delegate processing from the server to the client, as this places less load on the server. In other words, instead of the server going "here's the stuff", it's more like "here's the data and the instructions to show it".
Another use I've seen is to highlight areas of an imagemap when moused over.
<canvas> is central in HTML5 game development, since it is used to draw the entire game viewport. Without it, there is no game.
Is it so you can create dynamic images based on say...user-specific data?
Yes
We used <canvas> to build interactive design editor for apparel in our e-commerce store — http://printio.ru/tees/new
The kind of interactivity we provide was only possible with Flash until recently.
Even on back end, we use Node.js and <canvas>-based image processing+generation to take data from online editor and create designs that are later used in store. These canvas-generated designs are eventually printed out on tshirts, mugs, caps, bags, and so on.
I think that's a pretty practical example :)
This is all done via Fabric.js canvas library (developed by us as well).
<canvas> is used for better Performance. <canvas> is much more faster and dynamic than jpeg or anything else. Example: http://www.profistart.com/internetseiten.html here was <canvas> used for Background.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.