Calder SVG not working

  • Resolved larryqd

    (@larryqd)


    8 years, 4 months ago

    Seems like a good plugin, but it doesn’t seem to work. First, the instructions for use are very sketchy and almost non-existent. Visited and read the sites for the included scripts, and one of those deals with “preparation of the SVG file”. I created a simple SVG in Inkscape. Cleaned it on the suggested site. Pasted it into the “Instant Vivus” script on their site and animated the SVG. Downloaded the animated version of the file. Re-uploaded to that site to check it out again. It’s a working animated SVG file per Vivus requirements.

    Uploaded the file to my site, and used the shortcode to implement the animation on a test page.

    No permutation (full URL, short URL, different locations on site) of URL placed in the location quotes, works. I tried placing the SVG file in the Plugin’s own “svg folder” where the demo files are located – as that is the instructions on the Calder page, though that’s not usually how one gets media files into WP. That didn’t work either. I tried using the demo files and they don’t work.

    There are no instructions to troubleshoot this issue. One of the scripts has info suggesting that a size must be used in order to make it visible. I have a size inside my SVG. The Calder plugin says nothing about parameter usage. There is still nothing visible at all except the text leading up to this location on the page.

Viewing 15 replies - 16 through 30 (of 30 total)
  • Thread Starter larryqd

    (@larryqd)

    As to the contents of “test01” directory, there is only the one SVG file there.

    test01/TestPattern003-clean_animated.svg

    Plugin Author termel

    (@munger41)

    Hi,
    I added debug infos in the new version of the plugin, can you please upgrade it and re-test.
    Also, are you on a wordpress multisite site ? If yes, you would have to modify your shortcode path to ../../uploads/sites/[siteID]/svg/folder
    Thanks for sending log message back please

    Thread Starter larryqd

    (@larryqd)

    Hi munger41, I’m not on a “multi-site” install. I have two WP installs, but they are separate databases and sites. I will update the plugin and check things out. Many thanks for your help with this!!!
    Larryqd

    Thread Starter larryqd

    (@larryqd)

    Hi Munger41,
    Here’s the latest logs after updating the plugin… Seems like it can’t find the right directory. Is there an “extra” quotation mark in there or is it missing one? Here’s the log:
    Today
    13:06:59 GMT-0800 (Pacific Standard Time)
    …CalderSVG init done

    Today
    13:06:59 GMT-0800 (Pacific Standard Time)
    CalderSVG activated, __construct exacuted…

    Today
    13:06:59 GMT-0800 (Pacific Standard Time)
    CalderSVG test

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    <script>window.svgArray = [];</script>

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    Array

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    0 files retrieved in

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    ERROR::directory does not exist /homepages/22/d412409512/htdocs/qdbase/cre/wp-content/plugins/calder-svg/”../../uploads/svg/test01/”

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    became real path

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    build path /homepages/22/d412409512/htdocs/qdbase/cre/wp-content/plugins/calder-svg/”../../uploads/svg/test01/”

    Today
    13:05:15 GMT-0800 (Pacific Standard Time)
    ####### svg_s_display_animation_fn #########

    Today
    13:05:14 GMT-0800 (Pacific Standard Time)
    loading script https://quantumdragonfly.com/wp-content/plugins/calder-svg/libs/anime/anime.min.js

    Today
    13:05:14 GMT-0800 (Pacific Standard Time)
    loading script https://quantumdragonfly.com/wp-content/plugins/calder-svg/libs/vivus/vivus.min.js

    Today
    13:05:14 GMT-0800 (Pacific Standard Time)
    loading script https://quantumdragonfly.com/wp-content/plugins/calder-svg/js/caldersvg-frontend.js

    Plugin Author termel

    (@munger41)

    Yes, two tests you can make:
    1) check if ” really are double quotes
    2) totally remove them

    Can you try that please?
    If it works, You should see ‘became real path’ with canonical path after on the log line.
    And this path must exist on the server

    Cheers

    Thread Starter larryqd

    (@larryqd)

    Well that got it working! In the shortcode, there are two quote symbols around the link statement. They both “looked” like regular quotes, but when I retyped them just to be sure, they ended up looking quite different. I’m not sure what they really were, but upon changing them, the plugin now works. However it has a bit different timing than it does when Vivus is running it directly. Also, with Vivus it stays centered in the space, but with Calder it shows up on the left side. Mostly, it is working.

    Thanks for your help!
    Larryqd

    Plugin Author termel

    (@munger41)

    Ok cool, actually yes calder svg is not supposed to do the same thing as vivus, it is a combination of different animations which was intended to render like the demo does. Soon will be added parameters for more control.
    Also, your svg file does not seem to be prepared for maximazing plugins’ power : need more path and more colors ??
    Can t see the problem with centering of image…

    Please set the issue solved and note the plugin if satisfied ??
    Cheers

    Thread Starter larryqd

    (@larryqd)

    Hi munger41, I understand that Calder is doing some different things than Vivus. I just noted that an identical file runs slightly differently. As to centering, I placed the shortcode inside a content box in which everything I place there defaults as centered to the box. Text centers, the svg with Vivus centers, and other added elements center. The Calder shortcode placed in the same location renders to the left edge, which I found to be a curious difference… I will have to deal with that difference.

    Yes, my sample image was super basic and simple, just for getting it working “from scratch”. Now I can work on learning more about Calder’s other capabilities. Thanks much for your help! I did set the issue as resolved on this forum. ??

    Larryqd

    Plugin Author termel

    (@munger41)

    Ok thanks, i’ll try to see what the centering problem is.
    Cheers

    Plugin Author termel

    (@munger41)

    By the way, i ll be glad to add your site as a link if you create something beautiful with Calder plugin, which is, i known, somehow subjective ??

    Thread Starter larryqd

    (@larryqd)

    Hi Munger 41, Thanks for all your help! I look forward to learning much more about using Calder. Eventually I will have some fancy stuff on the site but it may be a few weeks yet, depending on time, etc. When I do have something worth sharing, I’ll send you a link. Many thanks.

    larryqd

    You have to create a sub folder inside the plugin with all your SVGs : /wp-content/plugins/calder-svg/my-svg/my-folder

    And then set the folder to the sub directory : [caldersvg svgs=”my-svg/my-folder/”]

    Sorry but i don’t understand how can i do it.
    Could you help me please?
    Thanks

    Plugin Author termel

    (@munger41)

    Can you please specify what does not work @vale8883 ?
    you can see an example here : https://caldersvg.termel.fr/

    Thread Starter larryqd

    (@larryqd)

    Hi @vale8883, Unfortunately the Calder SVG plugin provides very little information on how to use it or even describing what it actually does. You will need to go and read all the tutorial stuff for the included JS scripts – on their own websites.

    Note the description: “Animate prepared SVG drawing as a mobile picture. Uses Anime.js and Vivus.js”… Where it says “prepared SVG”, that’s the key and a problem without ready answers… Both of those included scripts have many useful functions, with tutorial details (on their own websites) on how to prepare an SVG picture to work with their scripts. Calder SVG only uses some of those functions, but those steps to prepare the image are essential. The instructions for Vivus.js are detailed, including references to some online resources to “clean up” the SVG file so it is able to be used.

    To get Calder SVG working, start with the supplied images to test things and see it working. Then install your own specially prepared SVG. Until there are a LOT more instructions associated with Calder SVG, it is extremely difficult to use or understand. It may be easier to simply install and use Vivus.js by itself, and get the full functionality of that script since they do have a good tutorial.

    There is much good potential here, but a detailed tutorial is needed. Questions remain unanswered as to what features in Vivus and Animate can be used and which can’t. There should be details here about the whole preparation process along with a detailed list of options to use and how to implement them. The demo pictures were -prepared- (internal to the SVG files themselves) to do what they do, and just seeing them work is NOT an adequate tutorial for using the plugin.

    On the plus side, munger41 was very helpful and quick to respond and I did get the demos working on my site, and my own very simple test images animating… But there is no practical method to use this plugin until comprehensive instructions have been provided for that all important and somewhat complicated process of “preparation of the SVG”.

    Plugin Author termel

    (@munger41)

    Yes, i told @larryqd i have not enough time to enhance this plugin at the moment. In fact, nothing is parameterizable in the plugin, nor vivus, not anime, so find another one if this is what you need.
    This plugin just uses a fixed parameter set to anime SVG. No changes are possible from the user.
    Concerning the SVG format, please see svg files provided inside plugin directory.
    Thanks a lot

    • This reply was modified 7 years, 10 months ago by termel.
Viewing 15 replies - 16 through 30 (of 30 total)
  • The topic ‘Calder SVG not working’ is closed to new replies.