How to create 2d shapes with ability to change their colors with code?

    Hi guys,

    I'm working on the tour which has a floorplan. What I'd like to do is to highlight the area on floorplan the viewer is currently in, for example:

    For the moment I overlay images of zones over the original floorplan:

    This works fine, but the problem is that I also would like to be able to quickly change the color of these fills - to test different color schems of the tour, for example, to change the colors of all elemets from orange to blue, etc

    With all other UI elements I can do it quickly with code, by since those color fills are png images, I have to change their color manualy in PS.

    Is there a more elegant and quick way to do this?

    Regards, Aleks.

    KOTIGER | 3D Rendering Studio

    Edited once, last by kotiger (March 31, 2024 at 12:45 PM).

    For example you could use css color transformation. Or a krpano filter/filter plugin. Or Make those patches from layers instead of pngs. Or create the pngs dynamically on the server and change the color there *wink*

    Edited once, last by s-maier (March 31, 2024 at 6:04 PM).

    Quote from s-maier

    For example you could use css color transformation. Or a krpano filter/filter plugin. Or Make those patches from layers instead of pngs. Or create the pngs dynamically on the server and change the color there *wink*

    Hi s-maier,

    Thank you for the tips. I'm not a developer, and new to the krpano, so these raises more questions, than gives answers *g*

    When you mention that I can make pathches from layers - how exactly can I do this? I thought that layers can only be rectangular, no?

    Hi,

    Perhaps it is an option to use svg('s) and style them with css / js?

    also zFilter could be your friend

    https://krpano.com/plugins/userplugins/zfilter/#top (unsure)


    Tuur*thumbsup*

    Quote from Tuur

    Hi,

    Perhaps it is an option to use svg('s) and style them with css / js?

    also zFilter could be your friend

    https://krpano.com/plugins/userplugins/zfilter/#top (unsure)


    Tuur*thumbsup*

    Hi Tuur,

    Thank you for the advice, I'll defenetly look into SVG. If I this will be to much coding for me, I think I can also use some sort of PS batch action to fill the existing PNGs with another color or something like that. I just thought maybe I'm missing sometihng obvious here *smile*

    Regards, Aleks

    So I made a little example on altering colors of PNGs using css color filters:

    krpano - PNG css color filter example

    With the slider you can rotate the color hue from 0-360 degrees.
    Of course changing the color further with saturation and other filters would be possible.

    To actually implement the color change into your map very little code is needed:

    First a little function:

        <action name="set_css_style" type="Javascript"><![CDATA[
            caller.sprite.style[ args[1] ] = args[2];
        ]]>
        </action>

    And then you just add this to all the <layer> or <hotspot> elements you want to change:

    onloaded="set_css_style('filter', 'hue-rotate(75deg)');" 

    Where 75deg is to replaced by the value you want.

    Edited 2 times, last by s-maier (April 6, 2024 at 8:15 PM).

    Ok guys, as I really liked the SVG idea to totally get rid of pixel graphics I also made an example for that.

    This is how it looks like - you can use the color picker to pick whatever RGB color you want (colorpicker may be restriced on mobile browsers) and change the color of the textbased SVG floorplan - with no more image files needed:

    krpano - svg color change example

    And here is the technical background:

    So the first step is to get a text base SVG from the photoshop generated pixel PNG graphic. I used this free converter: https://www.freeconvert.com/png-to-svg

    This gives us a much smaller text base filed with the following content:

    <?xml version="1.0" encoding="UTF-8"?>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="662" height="689">
    <path d="M0 0 C7.59 0 15.18 0 23 0 C23 2.31 23 4.62 23 7 C33.89 7 44.78 7 56 7 C56 28.12 56 49.24 56 71 C103.52 71 151.04 71 200 71 C200 72.65 200 74.3 200 76 C204.62 76 209.24 76 214 76 C214 108.01 214 140.02 214 173 C223.57 173 233.14 173 243 173 C243 174.65 243 176.3 243 178 C240.36 178 237.72 178 235 178 C235 200.77 235 223.54 235 247 C237.64 247 240.28 247 243 247 C243 248.65 243 250.3 243 252 C234.09 252 225.18 252 216 252 C216 265.86 216 279.72 216 294 C217.32 294 218.64 294 220 294 C220 308.52 220 323.04 220 338 C162.91 338 105.82 338 47 338 C47 347.9 47 357.8 47 368 C31.49 368 15.98 368 0 368 C0 246.56 0 125.12 0 0 Z " fill="#EF7F1B" transform="translate(371,185)"/>
    </svg>

    As we can see, the color is now directly coded into the text (fill="#EF7F1B") - so we could also easily use a text editor to just alter the image color and there is no more need for photoshop.

    However we can totally get rid of the image file and just put the text based image directly into krpoano:

        <data name="svg_image_data">
            data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22662%22%20height%3D%22689%22%3E%0A%3Cpath%20d%3D%22M0%200%20C7.59%200%2015.18%200%2023%200%20C23%202.31%2023%204.62%2023%207%20C33.89%207%2044.78%207%2056%207%20C56%2028.12%2056%2049.24%2056%2071%20C103.52%2071%20151.04%2071%20200%2071%20C200%2072.65%20200%2074.3%20200%2076%20C204.62%2076%20209.24%2076%20214%2076%20C214%20108.01%20214%20140.02%20214%20173%20C223.57%20173%20233.14%20173%20243%20173%20C243%20174.65%20243%20176.3%20243%20178%20C240.36%20178%20237.72%20178%20235%20178%20C235%20200.77%20235%20223.54%20235%20247%20C237.64%20247%20240.28%20247%20243%20247%20C243%20248.65%20243%20250.3%20243%20252%20C234.09%20252%20225.18%20252%20216%20252%20C216%20265.86%20216%20279.72%20216%20294%20C217.32%20294%20218.64%20294%20220%20294%20C220%20308.52%20220%20323.04%20220%20338%20C162.91%20338%20105.82%20338%2047%20338%20C47%20347.9%2047%20357.8%2047%20368%20C31.49%20368%2015.98%20368%200%20368%20C0%20246.56%200%20125.12%200%200%20Z%20%22%20fill%3D%22%23EF7F1B%22%20transform%3D%22translate%28371%2C185%29%22%2F%3E%0A%3C%2Fsvg%3E%0A
        </data>

    As you can see it looks kinda different - to not mess up our krpano xml file we need to url_encode our SVG data. One can use this free tool for that: https://www.urlencoder.org/

    So with our SVG data now directly in krpano we can play with it to change it's color to whatever we want. This just reqiures to load the SVG data into a varibale, use txtreplace to replace the color string and to replace the SVG data by our variable with the new color in it. Or just change it by hand *wink*

    With this method we can replace the color directly with whatever we want instead of having to deal with the not so much intuitive hue-rotate thingy.

    Also we totally get rid of the PNG files and reduce loading times and data size.

    Have fun!

    Edited 9 times, last by s-maier (April 7, 2024 at 6:12 PM).

    And one last addition:

    Found this tool that offers a optimizaiton which gives us this little snippet for the image.

    Isn't that aweseome?

    <svg xmlns="http://www.w3.org/2000/svg" width="662" height="689"><path d="M371 185h23v7h33v64h144v5h14v97h29v5h-8v69h8v5h-27v42h4v44H418v30h-47z" fill="#EF7F1B"/></svg>

    How much better in comparison to the photoshop created png could it become?

    Hi s-maier,

    Thank you for your efforts, both options look interesting! Its nice to see professionals at work *cool* I will try and test them and get back to share the result *smile*

    Regards, Aleks

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login