Sie sind nicht angemeldet.

1

Freitag, 2. September 2022, 15:20

Text hotspot loses formatting when viewed on ipad/phone/safari

I've created a text hotspot as follows:


<hotspot name="store-room"
type="text"
ath="270" atv="-15" edge="center"
distorted="false"
renderer="css3d"
html="Store Room[br] [br]Code C1234X"
css="font-family:Tahoma; font-size:17px; color:#0000ff;"
vcenter="false"
padding="2"
wordwrap="true"
selectable="false"
bg="true"
bgcolor="0xFFFFFF"
bgalpha="1.0"
bgborder="0"
bgroundedge="0"
bgshadow=""
txtshadow=""
mergedalpha="true"
oversampling="2.0"
mipmapping="false"
onautosized=""
onclick="loadscene(pano9,null,merge);set(view.hlookat,0)"
/>

It displays fine on PC/laptop with chrome, edge and firefox, but on ipad/iphone the text formatting is lost. I don't want to create png/jpg's for the hotspots as I need to transfer text to/from a database to update the displayed text. I have attached two screen shots showing the problem.

I tried changing the rendering from webgl to css3d but it makes no difference.

Help and advice most appreciated, also is there a way to change the properties of the 'box' for example curved corners?

cheers Tim
»trek« hat folgende Bilder angehängt:
  • chrome-etc.jpg
  • safari.jpg

2

Mittwoch, 7. September 2022, 10:31

Hi,

do you mean the font?

If yes, Tahoma is a Windows-font and not supported/available on iOS.

Try to use Web-safe-fonts:
https://www.w3schools.com/cssref/css_websafe_fonts.asp

or use custom font files:
Embeddded fonts in HTML5?

For curved corners use the 'bgroundedge' setting:
https://krpano.com/plugins/textfield/#bgroundedge

Best regards,
Klaus

3

Freitag, 30. September 2022, 19:27

Hi Klaus

Many thanks for your help, will investigate further. Being able to create hotspots without needing a png is such a great feature and has saved me so much time on this project.

At the moment the description text for the hotspot is 'static' but for my project I will need to update it from time to time, for example when a new inspection is done.


For example:

html="Fire Door F32-F3[br]Inspected[br]8/9/22"


The 'inspected' and '8/9/22' strings could need to be changed to 'failed', '7/12/22'

I could create a separate xml file and then include it, something like....

set(f31-date,8/9/22));
set(f31-check,pass));

What is the best way to then overwrite the html string for the hotspot?

I did try - Set (hotspot[flat-32].html,get(propdesc));

where propdesc was already defined, which worked fine, but I need to overwrite multiple variables in the html string.

Thanks in advance for your help.

cheers
Tim

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »trek« (30. September 2022, 20:48)


4

Dienstag, 4. Oktober 2022, 20:34

Solved it!...

declare variables...

for example:



<data name="flat32-fd-name">Flat 31</data>
<data name="flat32-fd-floor">Floor 3</data>
<data name="flat32-fd-date"> 15/8/22</data>
<data name="flat32-fd-status"> passed</data>

create the hotspot:


<hotspot name="fire-door-f32-f3"
type="text"
style="fire-door-style"
ath="182.5" atv="5"
html=""
/>

Then 'overwrite' the html string...


txtadd(hotspot[fire-door-f32-f3].html,'',get(data[flat32-fd-name].content),[br],get(data[flat32-fd-floor].content),[br],get(data[flat32-fd-status].content),[br],get(data[flat32-fd-date].content));


Hope this is useful *smile*