Sie sind nicht angemeldet.

Extend (data) CSS (used in style defintion)

SunnyRed

Anfänger

  • »SunnyRed« ist der Autor dieses Themas

Beiträge: 11

  • Nachricht senden

1

Donnerstag, 20. Mai 2021, 19:23

Extend (data) CSS (used in style defintion)

I use some data CSS in an extending style definition like so:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style name="phx_basic"
         bgalpha="0"
         distorted="false"
         zoom="false"
         handcursor="false"
/>

<style name="phx_hotspot_marker"
         style="phx_basic"
         css="data: css_hotspot_marker"
         width="44"
         height="62"
         edge="bottom"
/>


the corresponding data CSS might look similar to this:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<data name="css_hotspot_marker">
    div {
    background: url("https://www.some-domain.com/img/marker/map-marker.png") no-repeat;
    background-size: cover;
    width: 42px;
    height: 60px;
    }

    img {
    position: absolute;
    top: 11px;
    left: 10px;
    width: 25px;
    height: 25px;
    }
</data>


Now under a certain condition I would like to override or more exactly extend the used CSS, like so

Quellcode

 
1
2
3
4

<data name="css_hotspot_marker_green">
    div {
    background: url("https://www.some-domain.com/img/marker/map-marker-green.png") no-repeat;
}


without duplicating the whole CSS and maybe style definition.

Is there a way to accomplish that?

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

2

Donnerstag, 20. Mai 2021, 21:52

the css="..." attribute is only for textfield layers and doesn't support css classes
https://krpano.com/plugins/textfield/#css
so, I'm pretty sure your data css does not work at all..

to set the image you can simply set the layers url="..." attribute

Quellcode

 
1
2

<layer name="normal" url="https://www.some-domain.com/img/marker/map-marker.png" style="phx_basic|phx_hotspot_marker" />
<layer name="green" url="https://www.some-domain.com/img/marker/map-marker-green.png" style="phx_basic|phx_hotspot_marker" />
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 9 mal editiert, zuletzt von »indexofrefraction« (20. Mai 2021, 22:16)

SunnyRed

Anfänger

  • »SunnyRed« ist der Autor dieses Themas

Beiträge: 11

  • Nachricht senden

3

Donnerstag, 20. Mai 2021, 22:36

I think I am using textfields, because in general the css stlyes do work

I am creating the hotspots dynamically, which might not be optimal as well, but I guess that's a topic on its own. As mentioned in the headline, the styles are generally loaded.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- create hotspot -->
addhotspot(get(name));
set(hotspot[get(name)],
ath=get(phx_spot.ath),
atv=get(phx_spot.atv),
phx_group=get(phx_spot.phx_group),
zorder=get(zorder),
visible="false",
type="text",
html=get(html),
onhover=get(onover_action),
onclick=get(onclick_action),
onout=get(onout_action)
);
hotspot[get(name)].loadstyle("phx_hotspot_marker");

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

4

Donnerstag, 20. Mai 2021, 23:09

can you show your css in a live example?

i still doubt that your class definitions work *whistling*
zFilter plugin -- zFlare plugin -- zSnapshot plugin

SunnyRed

Anfänger

  • »SunnyRed« ist der Autor dieses Themas

Beiträge: 11

  • Nachricht senden

5

Freitag, 21. Mai 2021, 14:42

Ok, beforehand I do want to mention, that I am still very new to krpano and might do some things in a "unexpected / inexperienced" way.

Additionally, I do want to state that I do prefer to split things up into multiple files, so here there isn't only a tour.xml. In the real project (this is a stripped down version) more data does exist (especially in the hotspots_data.xml).

Lastly, there might also be some unnecessary code, but for my original question please especially take a look at the styles.xml and how to avoid the code redundancy in

Quellcode

 
1

<data name="css_hotspot_overlay_marker">


Quellcode

 
1

<data name="css_hotspot_overlay_marker_neighbors">


So finally here is a link to a simplified live example: http://sandbox.duesselpix.com/vtour/tour.html

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »SunnyRed« (21. Mai 2021, 16:29)

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

6

Freitag, 21. Mai 2021, 17:24

ok, your way to use html/css does work indeed... i didnt expect that.
(just be aware that these hotspots won't work in VR mode)

about your actual problem on how to handle the redundancy ...

the only idea i have right now is to split up your <data name="css.." /> elements
and then use something like css="calc:data[x].content+data[y].content+data[z].content"

fyi: using calc() instead of txtadd() makes things a bit more readable
because it doesn't need get() for each variable
eg: textadd(var, get(a)," / ", get(c)); versus calc(var, a+" / "+c);
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Dieser Beitrag wurde bereits 6 mal editiert, zuletzt von »indexofrefraction« (22. Mai 2021, 11:23)

SunnyRed

Anfänger

  • »SunnyRed« ist der Autor dieses Themas

Beiträge: 11

  • Nachricht senden

7

Freitag, 28. Mai 2021, 16:56

Ok, many thanks.

So I'll guess when I start my next project I'll try to use less html and try it more traditionally and use more (or perhaps only) "normal" krpano layers. For my current project I unfortunately don't have enough time to clean things up and had to stick with my current implementation.

But, the hint you gave me to add css definitions via "calc" did indeed work. There were still some problems because my take is, that it doesn't extend same selectors but override them, but that is a fully acceptable "workaround".

So once again many thanks.

Ähnliche Themen