HTML5 Editor proof of concept

paulwagener · 2010-09-15 00:43:42

Hi guys!

I wanted to post this to the mailinglist but for some reason it's blocking me. So I'll just post it here.

A few weeks ago there was talk about an iPad editor and that we should
instead work on an html5 editor because it would have more forward
compatibility. Inspired by this idea I set off to make an actual html5
editor.

http://paulwagener.nl/osm/editor.xhtml
Tada! The editor uses SVG which is pretty well supported in modern
browsers. Nodes are rendered as <circle> and ways are rendered as <path>.
All interaction is done through javascript in onmouse* callbacks. It's
still very rough around the edges, selecting nodes and ways shouldn't be as
hard as it is now.

So here's the good news:
- It works in Firefox, Safari & Chrome (though Firefox works the best). I
didn't even bother testing it in IE.
- Performance is surprisingly good, especially on Chrome.
- It renders on the iPhone and presumably also the iPad!
- It is possible to style the editor directly with css. It should be
fairly easy to make them look identical to their bitmap counterparts.

But the bad news is that it's impossible to control the editor on the
iPhone. This is because all zooming and dragging operations are hijacked by
Safari for controlling the browser viewport. I haven't found a way to
disable this.

Is there any interest in making this a full-fledged official shiny html5
editor? I know the community isn't very liberal towards new editors. So I'm
just going to throw this out there and see what you guys have to say.

Kind regards,
Paul

wyo · 2010-09-15 11:23:51

paulwagener wrote:

I wanted to post this to the mailinglist ...

Lucky for me, I don't read the mailing list.

paulwagener wrote:

... I set off to make an actual html5 editor.

Perfect! I wanted to do a similar project yet due to my limited time, I haven't started. While my time still is rather limited, I can't do much programming. But I can support you with ideas, critism, suggestion, tests and so on. Anything which doesn't need much time.

So first, why did you choose SVG? I would have choosen Canvas instead. I haven't really checked but guess Canvas are much simpler and need much less download capacity and performs better. Just think in a tight area there might be thousends of elements be downloaded and displayed. Openlayers already uses Canvas (http://openlayers.org/dev/examples/canvas.html) so it might be possible to share knowledge.

Please tell me your reasons for choosing SVG.

Wyo

paulwagener · 2010-09-15 14:19:46

The reason I chose svg is that it's more suitable for rendering vector data. Atleast I think, that's what the internet says.
It's also easier because I don't have to worry about which ways to render, hopefully the browser does that for me in an efficient way. We should do a canvas version to see which performs better.

wyo · 2010-09-15 16:39:30

paulwagener wrote:

The reason I chose svg is that it's more suitable for rendering vector data. Atleast I think, that's what the internet says.

With rendering you mean converting OSM data into SVGs? I don't think so.

paulwagener wrote:

It's also easier because I don't have to worry about which ways to render, hopefully the browser does that for me in an efficient way.

Again I think browsers can render Canvas faster.

paulwagener wrote:

We should do a canvas version to see which performs better.

That would be perfect. I've played around a little with http://paulwagener.nl/osm/editor.xhtml, as soon as zoom level goes down your script uses too much time. With level 16 SeaMonkey starts complaining.

Could you tell me/us from which database (format) you start and if you convert to a single SVG or multiple.

Wyo

paulwagener · 2010-09-16 10:31:38

I transform .osm format to svg in javascript but it's not as static as it sounds. All the ways and circles are part of the HTML dom so it's easy to manipulate them. The <svg> tag in this context is only a container element.

I haven't tested SeaMonkey but with Chrome and Firefox I haven't had any performance problems. It only starts slowing down when it displays a significant chunk of downtown london, and even then it's usable.

Last edited by paulwagener (2010-09-16 10:41:24)

Nightdive · 2010-09-16 15:01:34

Seamonkey is using Gecko like Firefox and the difference is only the UI.

wyo · 2010-09-16 16:31:04

paulwagener wrote:

I haven't tested SeaMonkey ...

Well maybe my computer is becomming too slow and too old. Still we have to keep an eye on the performance.

I've now looked more closely into canvas and realized it's not done via Dom. Then SVG might really be the better choice. Also SVG might be easier if style changes are wished.

Wyo

wyo · 2010-09-17 08:20:21

paulwagener wrote:

http://paulwagener.nl/osm/editor.xhtml

Could you tell me how to set up my own testing site? What are the requirements and what else is needed?

Wyo

paulwagener · 2010-09-17 10:02:46

Here are the sources:
http://trac.paulwagener.nl/browser/PaulWagener.nl/osm

If you comment out line 40 and re-enable line 42-45 you can even do without php.

wyo · 2010-09-19 20:20:45

paulwagener wrote:

If you comment out line 40 and re-enable line 42-45 you can even do without php.

PHP is no problem for me.

Could you change the web page so the map an the editor are next to each other. This would allow for a much better overview.

So far you style the vectors all in the same color, could you style at least some like they are done as in Potlatch? Just set up a starting css and I'll all more colors according to the tags.

Wyo

paulwagener · 2010-09-19 23:37:29

I've enabled the ability to style ways and nodes according to their tags.

wyo · 2010-09-20 17:51:09

paulwagener wrote:

http://trac.paulwagener.nl/browser/PaulWagener.nl/osm

Are these the right sources? My page looks completely different.

Otti
PS I tried to reach you by email without success.

paulwagener · 2010-09-20 23:02:24

They were indeed different. For some reason trac got out of sync. Fixed now.

wyo · 2010-09-21 18:30:14

paulwagener wrote:

They were indeed different. For some reason trac got out of sync. Fixed now.

And my error was I didn't saw the "original format" download link. See now http://www.orpatec.ch/osm/editor/editor.xhtml

I've commented out "parentNode.removeChild" in loadEditor and some other changes so that map and editor are both visible. Seems there's a problem with exact sizing of the vectors.

BTW is it possible to add a title element to show the actual zoom level on the +/- handle? Or is such a feature missing in OpenLayers?

wyo · 2010-09-21 18:38:16

Your "editor.css", does it have a similar structure as in OpenLayer? Is the format anywhere documented?

wyo · 2010-09-21 18:41:04

BTW why can't I mark and copy a text from the fields of a seleced node?

paulwagener · 2010-09-22 14:42:09

The svg editor doesn't zoom to the correct level. It's just a hardcoded value.
The CSS is just like HTML css. In fact it IS HTML CSS. I've given all ways and nodes classes according to their tags. A quick look through the DOM should reveL their pattern.
Why the inputs aren't editable is black magic to me. Seems like they should work.

wyo · 2010-09-22 20:55:38

paulwagener wrote:

The svg editor doesn't zoom to the correct level. It's just a hardcoded value.

Well how difficult is it to make it match?

paulwagener wrote:

The CSS is just like HTML css. In fact it IS HTML CSS. I've given all ways and nodes classes according to their tags. A quick look through the DOM should reveL their pattern.

Seems you convert tags like "buildings=yes" to "building-yes". Could change that to "building_yes"? It might be that "-" is contained in a tag. Isn't it possible to convert "name=..." to the name statement or doesn't SVG items have a name?

What's the meaning of the "null" class?

Wyo

wyo · 2010-09-23 17:11:59

wyo wrote:

Could change that to "building_yes"? It might be that "-" is contained in a tag.

Scrap that, any map feature tag uses "_". Unfortunaltely names (usually man made) do contain "-". Yet names could be moved to the name statement instead of another class.

I've colored the vectors a little see http://www.orpatec.ch/osm/editor/editor.xhtml. It would help if the zoom level would match somehow and if the map could be moved around in a larger area.

Filling rectangles overlaps other buildings (see Tower of London). You have to add the inner/outer rules of the buildings.

Wyo

WBSKI · 2010-12-07 00:37:16

Great work! Seems to be working fine in Chrome! I am interested in helping out with this if you are still interested Paul

Cheers
Russell

wyo · 2010-12-07 10:39:10

WBSKI wrote:

Great work! Seems to be working fine in Chrome! I am interested in helping out with this if you are still interested Paul

I'm equally interested in an SVG editor and have set up a project page (http://wiki.openstreetmap.org/wiki/SVG-Editor). I'll collect any information about the project there.

Wyo

paulwagener · 2010-12-07 18:36:32

Nice to see there is still interest in it.

I've created a project on google code:
https://code.google.com/p/svg-mapeditor/

For everybody that wants to help out just send me a mail and i'll add you to the project.

wyo · 2010-12-07 20:22:37

paulwagener wrote:

https://code.google.com/p/svg-mapeditor/

Fine. I think it's easier for any visitors to have the project info here in the wiki while the code, etc goes into google. Is that okay for you?

First lets discuss the concept, e.g. I've alter the internal organisation (g-element) of the SVG. Any objections (see http://wiki.openstreetmap.org/wiki/SVG-Editor)?

Another issue is adding the tag information as <key>-<values>, I'm not satisfied with this yet haven't found a better solution.

I've set up my own test page (http://www.orpatec.ch/osm/editor/editor.xhtml) and added a CSS (http://www.orpatec.ch/osm/editor/editor.css) to colorize everything a little more.

Wyo

paulwagener · 2010-12-07 22:02:26

The Google project is purely for the code hosting so we can work with multiple people on it. I've deleted a few tabs to clear that up.

As for the key-values: We could just add each of them as actual attributes to the <circles> and <paths> and use the css attribute selectors to style them. I don't know if this is allowed and could be problematic for keys that happen to overlap with the existing attributes.

Wyo: Could you send me a private message with your e-mail so you can merge your changes into the source?

Last edited by paulwagener (2010-12-07 22:02:53)

E-Malte · 2010-12-07 22:52:55

paulwagener wrote:

As for the key-values: We could just add each of them as actual attributes to the <circles> and <paths> and use the css attribute selectors to style them. I don't know if this is allowed and could be problematic for keys that happen to overlap with the existing attributes.

In fact you have to introduce an own namespace then with valid DTD etc. But it should work with the arguments theirselves.
But I would prefer classes for that, as you can give multiple classes to an Element and I don't like CSS's handling of attributes.

Announcement

#1 2010-09-15 00:43:42

HTML5 Editor proof of concept

#2 2010-09-15 11:23:51

Re: HTML5 Editor proof of concept

#3 2010-09-15 14:19:46

Re: HTML5 Editor proof of concept

#4 2010-09-15 16:39:30

Re: HTML5 Editor proof of concept

#5 2010-09-16 10:31:38

Re: HTML5 Editor proof of concept

#6 2010-09-16 15:01:34

Re: HTML5 Editor proof of concept

#7 2010-09-16 16:31:04

Re: HTML5 Editor proof of concept

#8 2010-09-17 08:20:21

Re: HTML5 Editor proof of concept

#9 2010-09-17 10:02:46

Re: HTML5 Editor proof of concept

#10 2010-09-19 20:20:45

Re: HTML5 Editor proof of concept

#11 2010-09-19 23:37:29

Re: HTML5 Editor proof of concept

#12 2010-09-20 17:51:09

Re: HTML5 Editor proof of concept

#13 2010-09-20 23:02:24

Re: HTML5 Editor proof of concept

#14 2010-09-21 18:30:14

Re: HTML5 Editor proof of concept

#15 2010-09-21 18:38:16

Re: HTML5 Editor proof of concept

#16 2010-09-21 18:41:04

Re: HTML5 Editor proof of concept

#17 2010-09-22 14:42:09

Re: HTML5 Editor proof of concept

#18 2010-09-22 20:55:38

Re: HTML5 Editor proof of concept

#19 2010-09-23 17:11:59

Re: HTML5 Editor proof of concept

#20 2010-12-07 00:37:16

Re: HTML5 Editor proof of concept

#21 2010-12-07 10:39:10

Re: HTML5 Editor proof of concept

#22 2010-12-07 18:36:32

Re: HTML5 Editor proof of concept

#23 2010-12-07 20:22:37

Re: HTML5 Editor proof of concept

#24 2010-12-07 22:02:26

Re: HTML5 Editor proof of concept

#25 2010-12-07 22:52:55

Re: HTML5 Editor proof of concept

Board footer