Online design tool (Like Web2Print) with Angular 2 - angularjs

I'm looking to create an editor or design tool that allows me to create and save designs made from multiple uploaded images, custom controls, etc. Maybe using HTML5 canvas and JavaScript. Is there any good Angular 2 component for doing something like this?
Thank you for your help
Arturo M.

Related

Mobile hybrid t-shirt app, what framework/tools to use?

I want to create a mobile t-shirt app and I am just starting with mobile programming. The information is scattered and frankly I am not sure what are the best tools to use. I want to use AngularJS, and there are some directives to help with the canvas, but I am confused.
What do you think, what are the most appropriate tools to use? There will probably be a canvas as you should be able to choose a design and drop it on the t-shirt and customize the size or position further. Any help? Thanks a lot!
You don't actually need a canvas for that.
Have all designs as separate elements (may be png images). Initially have designs somewhere in other container which a user can pick, drag and drop onto t-shirt.You can use ngDraggable for achieving that. Change the css property "position" of dropped images to "absolute" so that user can place it anywhere on t-shirt. Next, user can select t-shirt and on touchmove event change css property "transform" to "scale" based on how much he drags(captured by touchmove's event object).
If you are planning for a hybrid app, go for Ionic Framework, as angular comes packaged with it. Else if are planning for a better UX (user experience, while all dragging and dropping events so that the feel of the app gives a native feel), you can see famo.us-angular Framwork.

Need to build a drag drop form designer in browser - Is AngularJS the right framerwork for this kind of a requirement

My requirement is a build a web form designer in a browser - just like how Zoho Creator (or something similar to other browser based designer tools like proto.io, protoshare, gomockingbird, lucidcharts etc).
Have a tool box/palate on one side, a canvas and a properties box that always shows the properties of the selected control.
I definitely don't think that using JQuery and working with DOM elements will give a scalable solution like these (proto.io, lucidchart etc.). After numerous trials, I feel that AngularJS is the way to go, but it does not have native support for drag-drop and hence I want inputs from community members like you may have more experience with AngularJS on whether what I am setting out to do, is Angularjs the right framework to use for this kind of a solution?
See screens shots of tools like Proto.io - something very similar to what I am setting out to build. Just that my palate will contain form controls like textbox, label etc which I will drag and drop on the canvas instead of the shapes that proto.io has.
Angular is fine. But the main idea of these kind of frameworks like Angular, Dojo, backbone is to structure your application with a specific designed pattern.Hence getting benefit from that pattern. And Angular will help you construct your app into MV* pattern. i may think what you need now is a graph library that support things with canvas , drag-drop , palettes, templates, overview, etc. Some may be useful are JointJS, MxGraph,Draw2D, Data-driven Documents, gojs, mindfusion.
Draw2D supports Angular as well. The lib has a boilerplate app whichs shows
how to use the draw2d stuff in combination with angluar.
The examples shows how to structure your app with Controller, Factories and two way
data binding.
I think you can use the draw2d boilderplate with any other DragDrop lib. It's just
a pattern how to integrate a third party lib into angular.
Angular has many hooks and pattern which supports any kind of lib
Greetings
Andreas

How to reuse content with Sencha Touch

I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.

Silverlight PDF Viewer

I want to be able to show PDF docs within my Silverlight 4 application. I know there is no native support for this and the only real way to do this is to use a third party control. I’ve looked around and found what looks to be a couple of good options, but they are expensive and somewhat limited. I don’t know much about PDF docs, but it seems that most of these controls are converting PDFs to something else; such as XOD or XPS.
I am considering writing my own PDF Viewer for my needs, but not sure where to start on something like this. What would be the best format to convert PDFs to for Silverlight and WPF? If I could convert to RTF, I could use existing controls to display the document.
I’m assuming since there is such a lack of PDF for Silverlight controls out there that this will not be easy. Any help or guidance is greatly appreciated.
Thanks,
-Scott
You do have one more option besides re-implementing a pdf control.
With a bit of javascript and silverlight's DOM bridge, you can render your PDF in the browser's native pdf plugin and display it in a 'window' over the top of your silverlight application.
This is how many of the 3rd party "web browser" controls for silverlight work as well.

Using the Extjs Framework

I am required to use the Extjs framework in my next project. So what features are available in it? There are so many javascript frameworks available in the market like the DOJO framework.
In my opinion, the principale avantage of ExtJS is the Store mecanism. you can have a store which hold your data (as a database table) and tell some UI widget to display data from the store.
this is great because:
you bind your widget to a store, then it automatically update it's ui when element in the store are added/modified/deleted
you can easily display your data in multiple form without worrying about updating echa place (each widget update itself automatically)
others thing done right:
event
ability to extend ExtJS classes
How it stands up to competition...
To see how Extjs stands up to its competitors, you could review the impressive comparison chart hosted on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Where to get it...
I'm sure you could find tons of information on http://www.extjs.com/. Keep in mind that you're going to pay a handsome fee to use Extjs.
How to learn it...
If your initial impression is good, you could peel into the Learning Center where you'll find API documentation, tutorials, and more.
To learn about different features, just have a look at the ExtJS Examples page. It should give you a good initial impression of what's available. There are grids, editable grids, tabbed views, trees, windows and other dialogs, menus, toolbars, etc.
Be aware that all of the functionality shown on the examples is not available out-of-the-box, though - some of them require you to include extensions (plugins) developed by the ExtJS user community.

Resources