Text Input Field to search for certain Pano

Anfänger

Donnerstag, 19. Juli 2018, 10:29

Hi everyone,

I'm currently building a tour with several Panoramas. Now i'd like to implement a input field, where the user can enter the name of a certain Pano to lead him to the concerned position. I've already looked for solutions to this in the forum but couldn't find valuable information - of course this forum is huge, so i might have missed something. If there is already a thread about this, feel free to show me where to find it, maybe i've been using the wrong search terms.

I guess i'll have to use either HTML5 oder Javascript for this, right? Is one of both preferable or easyer to use? I'm still quite new to krpano, so any help is appreciated. *smile*

Also if you prefer to answer me in german, feel free. *smile*

Thanks a lot,

with kind Regards

Marius

Zum Seitenanfang

pur

Schüler

Beiträge: 97

2

Samstag, 21. Juli 2018, 17:17

Marius,

What about using just implemented vtour thumb nail controll bar for your scenes?
Or use the combobox, which allows you to group scenes too? krpano combobox example

Regards,
Pavel

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

3

Samstag, 21. Juli 2018, 22:18

Hi, look this klaus´s example: https://krpano.com/forum/wbb/index.php?p…75751#post75751

The div content is searchable as any div web content, using the search engine of browser (CTR+F).

You can use too another search engine based in jquery, but the above solution is very fast. Other solution testing for me are very slow when the item to search is greater 200...

Greets,

fernando

Zum Seitenanfang

marius14

Anfänger

Beiträge: 5

4

Montag, 23. Juli 2018, 10:10

Hi Pavel, Hi Fernando,

thanks to both of you for your answers. I think i will first try using combobox, using the standard ctrl+F seems a little bit inelegant to me *smile*

Nevertheless, if the other attempts fail, i will definetly try this *smile*

Greetings,

Marius

Zum Seitenanfang

marius14

Anfänger

Beiträge: 5

5

Montag, 23. Juli 2018, 11:44

Okay, so i've tried using combobox - but even though in my .xml-file in the beginning it clearly says "krpano version 1.19", when i try to include combobox, it shows me an error saying "too old krpano version".

Also: the combobox-plugin doesn't really create a combobox, it's more of a dropdown-menu (at least in the example). I thought it would also involve a textfield, where you can enter some letters and the selectable options are then presented in the dropdown (like the input field in google), or am I wrong?

Thanks again.

Zum Seitenanfang

pur

Schüler

Beiträge: 97

6

Montag, 23. Juli 2018, 19:15

Yes, Marius,
the combox plugin requires the latest (krpano 1.19-pr16) version of the krpano. Before testing you need to download version 1.19-pr16 and upgrade your pano code using upgrade tool.
The combobox does not support any textfield as mentioned @Fernando. Apparently you are looking for a combination of regular scene navigation and CTRL+F option. I'm not aware of it. In the case you will build such an enhancement, please let me know!

Thank you,
Pavel

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

7

Dienstag, 24. Juli 2018, 15:06

Zitat von »marius14«

using the standard ctrl+F seems a little bit inelegant to me

Hi, Marius, I agree, but maybe you can try with jquery autocomplete (https://jqueryui.com/autocomplete/) or java script inside div html, based in klaus's example. Is not tested for me yet, but seem a possible solution. Note for example that is possible to put INPUT html label in div...

Greets,

Fernando

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

8

Mittwoch, 25. Juli 2018, 17:05

Hi Marius, see this link too: http://www.javascripter.net/faq/searchin.htm I think that it is usable in DIV inside krpano as the klaus's example.

Greets,
Fernando

Zum Seitenanfang

marius14

Anfänger

Beiträge: 5

9

Donnerstag, 26. Juli 2018, 15:27

Hi,

I guess after all i'll have to learn programming javascript *g*

Will be a challenge, i think, but the autocomplete-tool it seems like a nice way, if i manage to do it *smile*

If i find anything else about this, i'll let you know.

Thanks for the help,

Greetings

Marius

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

10

Donnerstag, 26. Juli 2018, 20:55

Hi, Marius. I have not tried enough the autocomplete because I believe that does not work fine with characters as á ,é, í, ó, ú, ñ... and my project is in spanish...

I tried to call the search window (ctr+f) from a button although it show a search window, that does not work for the DIV.

	Quellcode
1 2	<layer name="test" keep="true"x="10"y="10"type="text"html="data:searching"align="topright"ondown=""/> <data name="searching">[a href="#" onclick="find();"]Search[/a]</data>

Other solution is invoking with a button the keys CTR+F... Does somebody know how to make this?

Your question is very interesting and sadly there are no answers still. *sad*

The closest solution is dirty: Typing manually CTR+F when the list (div) is open.

Does somebody have any other solution to search in krpano?

Greets,
Fernando

Zum Seitenanfang

Alexey Tkachenko

Profi

Beiträge: 770

Wohnort: Russian Federation

Beruf: Interpreting, Building virtual tours

11

Montag, 30. Juli 2018, 08:32

I've done the search recently. I needed to search inside the texts used in a VT.

I'm not a proger, but I managed to do this:

1. Put search 'input' inside the target Krpano layer.
2. Write action which gets the word typed into this 'search' input.
3. Make a Krpano action which loops through the texts used in the VT (used 'indexoftxt' action here) and shows the results of the search.

Not an ideal solution , because it searches only inside the given texts. But for my project it works okay.

Regards,

Alexey

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

12

Montag, 30. Juli 2018, 16:00

Hi, Alexey, thanks for your answer.

Zitat von »Alexey Tkachenko«

1. Put search 'input' inside the target Krpano layer.

For example: inside layer type="text" html="This is a text for search into, bla1, bla2, bla3" ... I need search for example de string "bla3": How to type the input text "bla3" for search? There is any input text krpano object? It is javascript object?

Can you show me example or link working?

Greets,
Fernando

Zum Seitenanfang

Alexey Tkachenko

Profi

Beiträge: 770

Wohnort: Russian Federation

Beruf: Interpreting, Building virtual tours

13

Montag, 30. Juli 2018, 16:10

There's a great example from Klaus here https://krpano.com/forum/wbb/index.php?p…&threadID=16187

It puts a div inside a Krpano container layer. I studied the code and modified it a bit for my needs. For example:

Quellcode

1
2

<action name="add_search_input" type="Javascript">		var search_input = document.createElement("input");		search_input.type = "search";		search_input.id = "search_field";		search_input.style.width  = "100%";		search_input.style.height = "100%";
		caller.sprite.appendChild(search_input);	</action>

And then add to some Krpano layer into which the target 'input' should go as a child:

	Quellcode
1	onloaded="add_search_input();"

In this case you can type whatever you want inside the 'input' and then get the typed text as document.getElementById("search_field").value and use it inside Krpano.

Regards,

Alexey

Zum Seitenanfang

Alexey Tkachenko

Profi

Beiträge: 770

Wohnort: Russian Federation

Beruf: Interpreting, Building virtual tours

14

Montag, 30. Juli 2018, 16:18

And the next step was to get what is typed in the 'input' field and cycle throught texts inside Krpano and show the results as text layers.

Regards,

Alexey

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

15

Dienstag, 31. Juli 2018, 04:16

Hi, Alexei, thanks very much for your help. I have taken a close look at your interesting example. I am on the lookout for a solution as the attachment:

The attachment shows a screen of the example of Klaus that you mentioned. Inspired in the
CTR+F of Mozilla there is an INPUT field and arrows for next a previous results that are
highlighted inside the text. The text will scroll if need be.

In my real application not exist a paragraph but a list of places that are link to panoramas or virtual tours. That's why results should place in the own list (div) and no in a krpano layer text type. For the moment I'am searching using CTR + F, but I agree that it is not very elegant and besides it is a little hide for the user.

Greets,
Fernando

»Fernando« hat folgendes Bild angehängt:

Zum Seitenanfang

Fernando

Fortgeschrittener

Beiträge: 330

Wohnort: Habana, Cuba

Beruf: Architect, Photographer.

16

Mittwoch, 1. August 2018, 19:27

screenshot of real example

Hi,
As one observes in the real example (atachment), the list ( div inside krpano ) is invoked when doing click in the icons of the scrollarea located at the bottom inferior of the screen.
The CTRL+F functionality is perfect, except that it is known to 10 % of users almost. The remainder this will not discover it by itself.

keep on thinking that there should be a solution with javascript that what's same do than CTRL +F and that it work in all the browsers. Although I have searched plenty of unsuccessfully.

A greeting
Fernando

»Fernando« hat folgendes Bild angehängt: