Feat: UI Tools Trim & Conceal Connect to Map

[raditzlawliet]

• [x] Basic sync Conceal Tool Marker & Selected (with show/hide) with Map
• [x] Basic sync select session with hide/show conceal on map
• [x] Ordering Feature

https://github.com/openivity/openivity.github.io/assets/3763178/9bb1fc26-47fc-4d03-a37a-66ce4eb406c8

[raditzlawliet]

Since Trim & Conceal can selected together, any idea how behavior will show on map?

[muktihari]

Since Trim & Conceal can selected together, any idea how behavior will show on map?

Just show as in the video, but with conceal and trim marker having different color (or different icon or both, up to u)

[muktihari]

1. The zIndex of start and dest route icons better be above all marker, it was covered by trim/conceal LineString feature.

   

2. The zIndex conceal/trim icons better be above LineString feature, the conceal icon is covered by trim LineString.

   

3. Can we switch the color between trim and conceal, trim should be look "stronger" or more "firm" than conceal

   

4. Just my personal taste nothing to do with the behaviour: I am not fan of the orange color and the conceal/trim icons, if you don't mind I might change that later 😅

Other than that, everything looks great 👍

[raditzlawliet]

Is not done yet, basic functionality is already good enough for now. (we can optimize later)

1. The zIndex of start and dest route icons better be above all marker, it was covered by trim/conceal LineString feature.

Of course, All Icon will be above of all route/line.

2. The zIndex conceal/trim icons better be above LineString feature, the conceal icon is covered by trim LineString.

since trim/conceal feature using different layer, we can't simply using zIndex. But i got your point, Conceal still behind Trim Route, this will do with number 1.

3. Can we switch the color between trim and conceal, trim should be look "stronger" or more "firm" than conceal
4. Just my personal taste nothing to do with the behaviour: I am not fan of the orange color and the conceal/trim icons, if you don't mind I might change that later 😅

I'm good with orange, because it reflected "Openivity" title color. We can change it later, current color are using the reference we discuss on issue.

In current theme, Trim use weak color "Light Grey" because it will be gone. we can see the "Orange" as "Visible" part and "Dark Grey" as "Conceal" part. (Like photoshop crop but inverted, because Orange + Dark Grey looks solid together vs The brighter Map Tile ) I already try swap the color, but this still better. You can find another reference.

[raditzlawliet]

Yup, i think all basic behavior and functionality is done. Including Point feature show on top of all route.

[muktihari]

Is not done yet, basic functionality is already good enough for now. (we can optimize later)

Yes, the functionality is good, I don't see any bug when sliding the slider.

since trim/conceal feature using different layer, we can't simply using zIndex. But i got your point, Conceal still behind Trim Route, this will do with number 1.

Ah yes it was also determined by layering order.

I'm good with orange, because it reflected "Openivity" title color. We can change it later, current color are using the reference we discuss on issue.

Tbh, I don't want it to look like Strava 😬. Can we keep the previous one? I think the change of color is not part of the issue's scope. We can issue the design change later, we might change it again on the final re-layouting design ,so let's don't bother about what we currently have.

In current theme, Trim use weak color "Light Grey" because it will be gone. we can see the "Orange" as "Visible" part and "Dark Grey" as "Conceal" part.

There is a different perspective on this, (disclaimer: there is no right or wrong ya), in my opinion, trim is like a cut, something that cut should be sharp, while conceal is like just hide something that an overlay should be enough. But we can keep it as now.

[raditzlawliet]

There is a different perspective on this, (disclaimer: there is no right or wrong ya), in my opinion, trim is like a cut, something that cut should be sharp, while conceal is like just hide something that an overlay should be enough. But we can keep it as now.

Do you have any color style idea/ref? We can search again in the next issue to have a good style for this.

[raditzlawliet]

I think the current color is already "Good" enough and differ the trim/conceal/route. If you think this "Bad" color (not personal perspective), we can change right now. "Bad" means, as a user, we can't know what is this.

If it taste to get great style, we can move on to "find a great style" for this.

[raditzlawliet]

Tbh, I don't want it to look like Strava 😬. Can we keep the previous one? I think the change of color is not part of the issue's scope. We can issue the design change later, we might change it again on the final re-layouting design ,so let's don't bother about what we currently have.

I don't think so, if we keep the previous one, We need to distinct the color right now to avoid confusion. 3 line color with same family (dark gray/ gray/ light gray) can make confusion.

[raditzlawliet]

how about this one color, i'm not fans of black/dark grey on map route. But i think this pallete is good.

Route: #161A30 Trim: #31304D Conceal: #B6BBC4 Outline: White / #F0ECE5

[muktihari]

I prefer this:

• red (#e74c3c) is like a danger: if you do this, it will be gone
• green (#2ecc71) is like a safe-zone: in this green area you are safe

This is the actual use case when I forgot to turn off device recording, the green is only to show that the color is still distinct than the forest color

With color we can remove the points actually, this is what it look like (I can't completely hide the points, the code for applying points are harder to read)

This will be simpler to maintain as well, less code less moving part.

[muktihari]

how about this one color, i'm not fans of black/dark grey on map route. But i think this pallete is good. Route: #161A30 Trim: #31304D Conceal: #B6BBC4 Outline: White / #F0ECE5

I haven't tried this, let me try first.

[muktihari]

I don't know why the trim color is like not rendered correctly (?)

Still prefer the one with red and green color earlier 🤔

[muktihari]

Update on red color, this is stronger red than previous one

red: #f50f30, green: #2ecc71

[raditzlawliet]

Let me clarify:

• Normal Route: dark gray #34495e
• To be trim route: Red #f50f30
• To be concealed route: Green #2ecc71

so the current route will be turn into green

Another from my pallete Route: #161A30 Trim: #31304D Conceal: #B6BBC4 Outline: White / #F0ECE5

[raditzlawliet]

Route: #161A30 Trim: #31304D Conceal: #B6BBC4 Outline: White / #F0ECE5

This kind funny, the trim has similar color with normal route. I'll skip this one

[raditzlawliet]

Normal Route: dark gray #34495e To be trim route: Red #f50f30 To be concealed route: Green #2ecc71

this quite fine, the green one lil mixed with normal route. normal route, it is still using the previous route color dark gray #34495e

so i think this one is ok

[muktihari]

Let me clarify: Normal Route: dark gray #34495e To be trim route: Red #f50f30 To be concealed route: Green #2ecc71 so the current route will be turn into green

Yes

This kind funny, the trim has similar color with normal route. I'll skip this one

I think open layer will convert the color on render (might not be using rgb), any color I put there is different that the actual rgb color.

this quite fine, the green one lil mixed with normal route. normal route, it is still using the previous route color dark gray #34495e so i think this one is ok

Nice, and also, can we remove the trim/conceal icons as well? We can go without icons for now (or just use normal circle icon like route's startingPoint), we can add the icons later if we found better icons.

[raditzlawliet]

I'll hide the icon, but the code still there. so we can change it later.

[muktihari]

I just open a file and the trim/conceal icons are showing unexpectedly

[muktihari]

I'll hide the icon, but the code still there. so we can change it later.

Sure, I'll help finding icons later.

[muktihari]

Suggestion on icons? I can change the color.

[raditzlawliet]

The 1st, 2nd and 4th looks good. can you attach all the svg? i'll put it

[muktihari]

The 1st, 2nd and 4th looks good. can you attach all the svg? i'll put it

Sure, here it is icons.zip

[raditzlawliet]

Fig. Example 1

Fig. Example 2

Fig. Example 4

[raditzlawliet]

Number 1 & 4 is good, i'll apply 4 first

[raditzlawliet]

try colored: The red+white is also good, but the green+white/black not good enough.

[muktihari]

I personally prefer the black one, more clean and elegant.

[muktihari]

Btw the blue circle is still show up. I just open the file without going to Tools section.

[raditzlawliet]

as we agree to use the black or 4th, let conclude it.

[raditzlawliet]

Btw the blue circle is still show up. I just open the file without going to Tools section.

not sure, what blue circle is. not showing up in my side

[muktihari]

not sure, what blue circle is. not showing up in my side

It only show when the page is refreshed (or a new page), then open a file, it will show both in chrome and firefox. The second file we open it's gone. Let me help investigate.

[raditzlawliet]

thanks for provide, i'll check it first

[raditzlawliet]

I found it's relate with undefined style on point feature. fix on next commit

[muktihari]

I confirm it's gone

as we agree to use the black or 4th, let conclude it.

Ok, let's change this to black, it's still showing red-green icon now

[muktihari]

After change the icon to the black (or the 4th), you can merge this PR. lgtm.