You are not logged in.

Dear visitor, welcome to Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.


Monday, March 3rd 2014, 9:45pm

Radar Plugin

Can someone explain me what is linecolor, linewidth, linealpha, fillcolor and fillalpha? How to change their values, and be able to see something different on the screen?
The documentation is really vague on that topic:
I even removed some of those settings from the radar plugin section and nothing changed, no errors at all. Thanks in advance.


Monday, March 3rd 2014, 10:54pm

If someone is looking to change the fill color of the radar (it's white by default):

- Open radar.js ( located inside the plugins folder )
- Search for this code: fillStyle="rgba("+(m>>16&255)+","+(m>>8&255)+","+(m&255)
- The numbers on blue represent the RGB color code to use. First number is the R code, second number is the G code, and the last number is the B code.
- Orange is R:255 G:193 B:44
- Save, and upload the file.

To change the line color:

- Open radar.js ( located inside the plugins folder )

- Search for this code: f.strokeStyle="rgba("+(n>>16&255)+","+(n>>8&255)+","+(n&255)
- And change the 3 numbers on blue. They represent the RGB color code.
- Save and upload the file.

Alexey Tkachenko


Posts: 760

Location: Sevastopol, Crimea, Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message


Tuesday, March 4th 2014, 8:26am

Why changing these values inside the .js if you can easily change them in xml? *confused*

What do you mean by "documentaion is vague"? It's quite clear and easy to understand. The radar cone consists of a inner fill color and a border line. These values help adjust either alpha&color of the border line or alpha&color of the inner fill.



Wednesday, March 5th 2014, 10:59am

The concept is clear but I changed the values in the XML file, and nothing happened. I even deleted the lines containing the code, and nothing happened. No color change, no errors, nada.
The documentation is vague because doesn't specify what needs to be changed to get X results. I have some experience in the field, so I don't need too much explanation, but probably someone else will need that kind of information. If I try and it doesn't work, then I have to solve the problem in one way or another one.

Changing the js file was the solution I found.

Alexey Tkachenko


Posts: 760

Location: Sevastopol, Crimea, Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message


Wednesday, March 5th 2014, 11:11am

I use radar regularly and it colors always worked. So I found it strange. Maybe you did something wrong in the xml. Did you specify the color in the format of "0xFFFFFF" (for white). Because if everything right in the xml and radar still doesn't work - then we should report it to Klaus as a bug.



Friday, March 7th 2014, 4:13pm

- Search for this code: fillStyle="rgba("+(m>>16&255)+","+(m>>8&255)+","+(m&255)
- The numbers on blue represent the RGB color code to use.
The numbers in blue here are the bit-masks, not the direct colors itself, but when the original color is white, that changing these values will work of course .

But that's definitely not the right way to change the colors and normally there should be also no need to change the .js files.

When changing the settings in the xml isn't working, something in the xml must be wrong and should be fixed there.

Best regards,


Friday, March 7th 2014, 7:58pm

I didn't want to start a new thread, but Im having trouble getting the radar to work with a tour. Attached is my current "scenes-with-imagemap.xml". I have the map displayed in the upper right hand corner with two scenes. The point hotspots show up and also work. The only thing that doesn't work is the radar itself. I also had to replace "startup()" with my little planet code. Any help would be greatly appreciated.

scenes with imagemap example
- tour navigation via image map
- radar at current map point
- radar room masking via parent container layer elements
<krpano version="1.17" title="" debugmode="false" showerrors="true" onstart="startup();">
<!-- Startup actions default in krpano, run for platform without support effect little planet-->
<action name="startup" devices="html5+css3d|ios" >
if(startscene === null, copy(startscene,scene[0].name));
loadscene(get(startscene), null, MERGE);

<!--Startup actions effect of little planet, running only on for supported platforms-->
<!-- when the loading is done, wait 2 seconds and then start with the animation to an normal view -->
<action name="startup" devices="flash|html5+webgl" >
if(startscene === null, copy(startscene,scene[0].name));set(display.flash10, off);
set(view.fisheye, 1.0);
set(view.fov, 155);
set(view.fovtype, VFOV);
set(view.fovmax, 150);
set(view.hlookat, -165);
set(view.vlookat, 77);
set(hotspot[spot1].alpha, 0.0);
delayedcall(2, normalview() );

<!-- set to normal view-->
<action name="normalview">
tween(view.hlookat, 2, 2.5, easeInOutQuad);
tween(view.vlookat, 0, 2.5, easeInOutQuad);
tween(view.fov, 115, 2.5, easeInOutQuad);
tween(view.fisheye, 0.0, 2.5, easeInOutQuad);
tween(hotspot[spot1].alpha, 1.0, 2.5, easeInOutQuad);
set(display.details, 24);
set(display.flash10, on);
set(view.fovmax, 135 );

<!-- start autorotate and playing the sound and etc. at globally for tour-->
<events name="currentpano" keep="true"
onnewpano="set(autorotate.enabled, true);
set(events[currentpano].onnewpano, null);"

<!-- autorotate -->
<autorotate enabled="false"

<!-- Intro text, layer-based, see other parameters for setting of layer in documentation by krpano-->
<layer name="intro_text" keep="true" url="%SWFPATH%/plugins/textfield.swf" align="center" x="0" y="-75"
visible="true" autoheight="true" background="false" border="false" enabled="false"
html="[br] "
css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:normal; font-size:32px; font-style:regular;"
onloaded="if(visible == true, delayedcall(3.0, tween(alpha, 0.0, 2.5, easeInOutQuad, set(visible,false);));); " />

<!-- the image map -->
<layer name="map" url="skin/Floorplan.png" keep="true" align="righttop" x="16" y="16" width="316" height="222"
<!-- 'rooms' and spots - the 'room' container elements were used for masking the radar -->
<layer name="room1" type="container" align="lefttop" x="2" y="120" width="187" height="115" maskchildren="true">
<layer name="spot1" url="skin/mappoint.png" align="lefttop" edge="center" x="91" y="59" zorder="2" onclick="loadscene(scene__DSC1933_Panorama, null, MERGE, BLEND(1));" />
<layer name="room2" type="container" align="lefttop" x="70" y="190" width="117" height="214" maskchildren="true">
<layer name="spot2" url="skin/mappoint.png" align="lefttop" edge="center" x="100" y="200" zorder="2" onclick="loadscene(scene__DSC2041_Panorama, null, MERGE, BLEND(1));" />


<!-- radar plugin, will be assigned to be a child of spot -->
<layer name="radar" keep="true" visible="false"
align="center" edge="center"
fillcolor="0xFFFFFF" fillalpha="0.5" scale="3.0"

<!-- activated spot image (child of the radar layer) -->
<layer name="activespot" parent="radar" url="skin/mappointactive.png" keep="true" align="center" edge="center" />

<!-- actions -->
<action name="closemap">
set(onclick, openmap() );

<action name="openmap">
set(onclick, closemap() );

<!-- activatespot action - %1 = the current spot, %2 = the current radar heading -->
<action name="activatespot">
set(layer[radar].parent, layer[%1]);
set(layer[radar].visible, true);
set(layer[radar].heading, %2);

<!-- the scenes -->
<scene name="scene__DSC1933_Panorama" onstart="activatespot(spot1, 0);">

<view hlookat="122.501" vlookat="7.196" fov="120" />

<preview type="grid(cube,32,32,256,0xDD3322,0xCC3322,0xFF0000);" details="16" />


<scene name="scene__DSC2041_Panorama" onstart="activatespot(spot2, 90);">

<view hlookat="122.501" vlookat="7.196" fov="120" />

<preview type="grid(cube,32,32,256,0x33DD22,0x33CC22,0x00FF00);" details="16" />




Friday, March 7th 2014, 11:42pm

I got it to work...the visibility was turned off in the code I was using.

Similar threads