Posts by s-maier

    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!

    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.


    Klaus hatte das oben schon beschrieben:

    You can test that also when enabling the 'deeplinking' setting in the tour.xml and checking the browser-url.

    Einfach mal in euerer tour.xml die deeplinking Einstellung aktivieren. Dann wirst du sehen,wie in der Adresszeile im Browser immer eine aktuelle URL angezeigt wird, die genau auf das verlinkt, was du gerade betrachtest.

    Genau damit könntest du (beispielsweise und auf einfache Art) auch euer Problem lösen.

    hallo klaus
    [...]

    Genau das könnt ihr über die oben erwähnten Methoden machen. Nutzt deeplinking oder sucht einfach nur die parameter über die Deeplinking-Funktion heraus oder übergebt einfach die hlookat und vlookat Werte über die URL.

    Allerdings werdet ihr doch dann noch etwas brauchen: Einen Knopf/Link um zur letzten Ansicht zurück zu kommen? Oder muss der Betrachter, nachdem er die neue "Abkürzung" genommen hat den Rückweg dann durch alle Panoramen hindurchklicken? Insofern könntet ihr einfach neben den Paramtern zur Ansicht auch noch einen Wert übergeben, aus welchem Panorama der Betrachter gerade kam und im Zielpanorama dann einen Link/Button setzen, mit welchem er direkt wieder dorthin kommt, wo er her kam *wink*

    Did you consider hosting outside of Cuba?

    I remember all the examples you shared so far were loading unexpectedly slow and kinda like "internet of year 2000 like" in performance.

    Also things like wrong mime type for simple images aren't a fail that you would expect from modern hosting solutions.

    Sudarchikov Andrey
    August 26, 2013 at 2:20 PM