I have a site that is in need of a drawing program. My users need to be able to draw floor plans and add text to these images. I'm wondering if anyone has come across a nice SVG WYSIWYG editor.
Otherwise I'm going to have to use a Flash or Java app which I'm not fond of.
The only one I know is svg-edit. It is not nearly as powerful or mature as editors like CKEditor, TinyMCE or FCKEditor are in their field of application, and it won't be as simple to implement, since it is more a script like a component, and finally I don't know how easy it is to customize it.
But I heavily doubt that there is something similar with more comfort.
You might have a try here or here (just to mention, won't work in Internet Explorer - although the site states that it would work if you have Chrome Frame installed but I can't confirm that).
Maybe you could tell us how far this meets your requirements ;-)
One impressive example of a polished and very intuitive webbased "drawing" app is accidentsketch.com. Uses both svg and html.
Related
I'm pretty new to Web Development and am beginning to fool around looking at different 'features' websites have. I have recently come across the StarCraft remastered page and halfway down the page they have a "window" in which you man slide a slider back and forth seeing the old graphics and the new graphics of a scene. I think this is really neat and am wondering if I can find the source code of how they achieve this effect. Here is the image of the described "window".
Also, as a side note, is it unethical to try to recreate a features I find on other sites? I'm really new to this and I don't know what is okay and what is not and I don't think I would be able to create that feature myself without seeing how they acheived it.
Not unethical at all, this is how web developers learn new stuff. In general, the developer tools of your browser should become your best friend.
Regarding the example that you provided, essentially this can be achieved with a ui control that is commonly called "divider" or "split panel". And you can find a lot of plugins that provide such functionality (ex split.js). With this, and a bit of css for styling, you can achieve the same effect as the one you liked in starcraft page.
On any modern browser of choice, right click your mouse on the image, then click 'Inspect', 'Inspect Element' or some variant thereof depending on browser and version. I'm using the most recent version of Chrome which is just 'Inspect'.
This will open your developer tools to get a deeper look into the front-end of a website or web application.
This is probably a trivial question, but I feel like it would be useful toward web design. I really like the style of some of the Rainmeter widgets and I wanted to know if there was any way to maybe incorporate them into a website. To be honest, I don't really care for its practical purposes, otherwise I would have gone with the usual widgets you can find on the web which were developed for websites. I am more worried about its aesthetics, and frankly... The widgets I've seen for the web are not the easiest on the eyes (Maybe you know a place where there are some beautiful widgets). Perhaps this is no longer even a widget in a sense, but just an image. An animated image. Surely there is a way though to incorporate the resources you find for Rainmeter onto a website. I tried to answer it myself, and so far only came up with this: create the image on a photo editing program, and then animate it on the website (could be tricky). Perhaps there is a way to edit a widget's style? So my question is really, how would you create/incorporate the widgets you find in the Rainmeter libraries? For example, to recreate what you see on the link below. (With animation).
http://customize.org/rainmeter/skins/67189
Thanks!
You are probably searching for the wrong keywords. You should be looking for charts and/ or gauges and maybe graphs. The most examples/ libraries will be found including the keyword "javascript" or "css" and now "html5"
This will probably never have a concrete answer, as it seems new browsers introduce new inconsistencies in the way the process or integrate html standards. I've noticed this especially with JavaScript animation. The browsers that support them tend to be more consistent in the way they display CSS transformations. I, personally, haven't delved too much into HTML5 canvas, but that will most likely be the way to go in the near future.
Alternatively, search for dashboard themes.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
I dont know whether I am reiventing the wheel.
I need to design an online WYSIWYG where users can make one/two/three-column layout page.The WYSIWYG should adjactly show the contents in design mode as well as preview mode.Therefore, the WYSIWYG should also have the supports for Header and Footer too.Therefore, the WYSIWYG will have at least three boxes(Header, Content,Footer) and in max it may contain six boxes.
IFRAME supports designmode (on/off) and it has content editable property and it also supported by most browsers. Though DIV also has the content editable properly in the latest browsers. Since there are many users who use IE6 still, probably choosing IFRAME is better(need your kind advice).
Now the question is whether I should use 6 IFrames or only one Ifrmae or no Iframe at all? Please suggest.
Thanks.
It sounds to me like you are trying to reinvent the wheel. You should be able to use one of the existing WYSIWYG editors with template support built-in. So I'd suggest you have a look at CKEditor, which probably has all the features you need.
Choose whatever existing editor that you like, but don't try to recreate one yourself, you'll become crazy.
I don't even know what do you understand as different between WYSIWYG and "Rich Text Editor", the main difference might be that no web-based editor can be really "What You Get", because there are lots of little problems.
Anyway, it seems that you want to create a page with one toolbar and several editing instances, I think that all the main editors does support that, but I would avoid using one based on a framework (YUI or Google closure) unless you are already using that framework.
Check instead the features of stand alone editors like CKEditor or TinyMCE. You'll hardly get anything better that those ones.
Don't reinvent the wheel! If you decide that you need to support designmode iframes as well as contenteditable, Google Closure Editor has a very performant implementation of multiple editing surfaces that only creates one iframe at a time.
I would look at YUI Editor from Yahoo, The YUI stuff does support a drag and drop column editing. I would say reuse in this case.
EDIT: Since you say you want to edit multiple areas per page you should also check out the YUI Editor's Multi edit example page
by simple I mean, having buttons:
bold,
italic,
numbered list
bullet point list
indent left
indent right
spell check (obviously supported by ready made js component)
by custom I mean: having custom icons - so really just custom design
no frameworks, written from scratch, lightweight, compatible with major browsers
this is one of the main components of the webapp, so it has to be super lightweight, that's why I don't want frameworks
Unless you are targeting one browser, editors are immensely complicated components to get to work cross browser. There's no reason to do it yourself, unless you want to learn.
Use one of the many available that allow customization:
tinymce,
fckeditor,
wysihat,
others
Writing an editor that works cross-platform can be difficult, but, you should create your own framework as you do it, as it is a large project.
If you just want custom icons, that will depend on how long it takes you to make them, but, to get some basic functionality isn't that hard, probably less than 40 hrs of work if you know what you are doing.
In Unix writing your own shell used to be a rite of passage, in javascript it may be writing your own editor. :)
Where it gets tricky is if I have
<b>some text</b><i>more text</i>
and I decide to remove the tags from this text, then how to fix it will get tricky.
If you want to use only css then it gets to be more of a problem as you are grouping text from span tags, and fixing css classes, while the user is continuing to make changes.
I am dealing with this currently as I want an editor that works in XHTML2.0, and it is not a trivial issue, much harder than it is to do in a desktop application.
I would suggest getting it to work on Firefox 3 and Safari first, then, once it is working, go back and add in the code to get it to work on IE8, and if you want IE7, since MS is pushing IE8 out as a critical update now.
Don't.
Go get something else (any of those Jason mentioned, or e.g. what SO itself uses, WMD). Swap out its images. The end.
Seriously you don't want to write your own editor unless you have a very good reason for it functionally, not just what it looks like.
Read through the first chapters of the emacs tutorial, and you will see that there is not anything like a "simple" editor. But google will give you lots of easy customizable editors.