Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Freitag, 25. Mai 2018, 08:39

Example: html div inside krpano with scrolling support

Hi,

there were recently a few requests about how to bring a html div element into krpano and allow using the 'native' browser-based scrolling (e.g. by mouse-wheel, scroll-bars or touch-controls) inside it.

Just adding html-code would be possible also by using the textfield plugin and scrolling could be added by using the scrollarea plugin, but for letting the browser handle the scrolling it gets a bit more tricky because in this case the event-handling between krpano and the browser would need to get 'coordinated' correctly.

Therefore here a full example:
Example
XML Source

Is uses a normal <layer> container element puts any kind of html-content inside it.

I'm also considering bringing that functionality directly into krpano, maybe as extended textfield or as layer with type="html" or something like that.

Best regards,
Klaus

jordi

Fortgeschrittener

Beiträge: 424

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

2

Freitag, 25. Mai 2018, 09:21

nice code
everpano.com smart virtual tours

Beiträge: 814

Wohnort: Poland, Europe

Beruf: krpano developer : virtual tours

  • Nachricht senden

3

Freitag, 25. Mai 2018, 09:24

*w00t* *thumbup*


Thank you for this example. It is very useful.


Piotr
You own online, cloud tool for creating virtual tours - www.cms4vr.com

facebook page :: facebook group :: youtube

cms4vr team *thumbsup*

Beiträge: 719

Wohnort: Angers - France

Beruf: Photographer

  • Nachricht senden

4

Freitag, 25. Mai 2018, 09:24

Lovely ! you're the best Klaus !!!

Tuur

Erleuchteter

Beiträge: 3 024

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

5

Freitag, 25. Mai 2018, 10:17

*love*
http://www.virtualtuur.com
Skype:studiotuur

6

Freitag, 25. Mai 2018, 16:29

Hi,

Great, this has come along at a perfect time for me!

Maybe I am missing something as when I use the example xml provided and stick it in a tour created with the normal template, the loadscene in the startup actions causes the layer not to appear.

Thanks.

8

Samstag, 26. Mai 2018, 13:34

Maybe I am missing something as when I use the example xml provided and stick it in a tour created with the normal template, the loadscene in the startup actions causes the layer not to appear.

Either define the layer inside the scene where you want it - or add keep="true" to the layer when defining it outside a scene and using it for all scenes.

Beiträge: 732

Wohnort: Sevastopol, Crimea, Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

9

Montag, 28. Mai 2018, 13:40

Very cool example, Klaus! *thumbup*
Regards,

Alexey

Fernando

Fortgeschrittener

Beiträge: 190

Wohnort: Habana, Cuba

Beruf: Architect, Photographer, Programmer.

  • Nachricht senden

10

Donnerstag, 31. Mai 2018, 14:27

Thanks very much Klaus *thumbsup* Very useful example. This is a new feature that is going to allow other powerful javascript functions as autocomplete, input, search engine, etc., Now easier way.

11

Donnerstag, 31. Mai 2018, 21:20

a very useful example, klaus!
tx!

that layer with type="html" would be welcome :)

Fernando

Fortgeschrittener

Beiträge: 190

Wohnort: Habana, Cuba

Beruf: Architect, Photographer, Programmer.

  • Nachricht senden

12

Mittwoch, 6. Juni 2018, 19:11

Hi, this is a question about klaus´s example:

<data name="hosp"><![CDATA[
HOSPEDAJES:<br>
<span style="text-decoration:none;cursor:pointer;font-size:16px;" onclick="document.getElementById('krpanoSWFObject').call('miprueba();');" style="color:#FFFFFF;">Ambos Mundos. Hotel</span><br>

]]></data>

How to use this example either for mobile and normal devices? I need for example if mobile font-size:24px; else 16px.

Any idea?

Greets,
Fernando.

13

Mittwoch, 6. Juni 2018, 19:45

Hi,

you could e.g. define different data elements - one for desktop and tablets and one for mobiles:

Quellcode

1
2
3
4
5
6
7
<data name="hosp" devices="normal">
  ... font-size:16px; ...
</data>

<data name="hosp" devices="mobile">
  ... font-size:24px; ...
</data>


Best regards,
Klaus

Fernando

Fortgeschrittener

Beiträge: 190

Wohnort: Habana, Cuba

Beruf: Architect, Photographer, Programmer.

  • Nachricht senden

14

Mittwoch, 6. Juni 2018, 19:58

define different data elements
Thank very much Klaus, That had it thinking, but I have too many data elements: They are 40 categories or more than I would have to duplicate. Won't there be another solution based in javascript?

Best Regards,
Fernando

15

Mittwoch, 6. Juni 2018, 20:22

define different data elements
Thank very much Klaus, That had it thinking, but I have too many data elements: They are 40 categories or more than I would have to duplicate. Won't there be another solution based in javascript?

Best Regards,
Fernando

you can do that yourself.. use something like...

Quellcode

1
<data name="hosp" devices="normal"> ... {{FONTSIZE}} ... </data>

then before displaying the page
parse your data[hosp].content and replace {{FONTSIZE}} with your font size

Fernando

Fortgeschrittener

Beiträge: 190

Wohnort: Habana, Cuba

Beruf: Architect, Photographer, Programmer.

  • Nachricht senden

16

Mittwoch, 6. Juni 2018, 23:56

Thanks Index, it was my initial idea, that works but repeating code.
I want to adapt the good Klaus´s example optimized for my project: 40 categories, 200 item each.


Partial code:


<layer name="html_div" type="container"
(...)
onloaded.normal="
add_html_code(get(data[categ1_normal].content), 10);"
onloaded.mobile="
add_html_code(get(data[categ1_mobile].content), 10);"
/>

<data name="categ1_normal"><![CDATA[
HOSPEDAJES:<br>

<span style="text-decoration:none;cursor:pointer;font-size:16px;" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item1</span><br>

<span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item2</span><br>
(...)

<span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item200</span><br>


]]></data>

<data name="categ1_mobile"><![CDATA[
HOSPEDAJES:<br>

<span style="text-decoration:none;cursor:pointer;font-size:24px;" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item1</span><br>

<span style="text-decoration:none;cursor:pointer;font-size:24px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item2</span><br>
(...)

<span style="text-decoration:none;cursor:pointer;font-size:24px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item200</span><br>


]]></data>

In this solution we have to do it everything two times: one for NORMAL and another for MOBILE, an inefficient use to DEVICES in this case. For normal-simple projects that would be all right.

For that reason I look for javascript solution.


Best Regards,
Fernando
»Fernando« hat folgendes Bild angehängt:
  • ex1.jpg

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Fernando« (7. Juni 2018, 13:27)


17

Donnerstag, 7. Juni 2018, 05:18

i think you didnt understand what i suggested.

Quellcode

1
2
3
4
5
6
7
<data name="categ1"><![CDATA[
HOSPEDAJES:<br>
<span style="text-decoration:none;cursor:pointer;font-size:16px;" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item1</span><br>
<span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item2</span><br>
(...)
<span style="text-decoration:none;cursor:pointer;font-size:16px;"" onclick="document.getElementById('krpanoSWFObject').call('any_action();');" style="color:#FFFFFF;">Item200</span><br>
]]></data>


and

Quellcode

1
2
3
4
5
6
7
8
<action name="add_html_code" type="Javascript"><![CDATA[
...
var content = krpano.get(args[1]); 
var fs = krpano.device.mobile ? 24 : 16;
content = content.replace(/fontsize\:\d+px/, 'fontsize:'+fs+'px');
div.innerHTML = content;
...
]]></action>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »indexofrefraction« (7. Juni 2018, 09:59)


18

Mittwoch, 3. Oktober 2018, 20:24

how can I put a button inside the html to close html div?



best greetings
Suso

19

Donnerstag, 4. Oktober 2018, 11:01

how can I put a button inside the html to close html div?

Hi,

see the 'Here a link for testing the krpano JS API' part in the example.
It shows how to call any krpano code and that can be also used to remove or hide the layer (e.g. call removelayer or set visible to false).

Best regards,
Klaus

20

Donnerstag, 4. Oktober 2018, 17:03

how can I put a button inside the html to close html div?

Hi,

see the 'Here a link for testing the krpano JS API' part in the example.
It shows how to call any krpano code and that can be also used to remove or hide the layer (e.g. call removelayer or set visible to false).

Best regards,
Klaus


Hi Klaus

"Here a link"
I don´t see it



Thanks
Suso