sylvainjule / kirby-annotator Goto Github PK
View Code? Open in Web Editor NEWKirby field for adding notes to images by pinning them to specific coordinates. Kirby 2 and 3.
License: MIT License
Kirby field for adding notes to images by pinning them to specific coordinates. Kirby 2 and 3.
License: MIT License
After updating to Kirby 3.6.1 I got the following error, when visiting the panel with an annotator field:
this.$store.state.languages ? this.$store.state.languages.current : this.$language
This is referring to this line in src/annotator.vue.
Switching back to 3.6.0 I got rid of the error. Unfortunately I have no idea what this.load()
is for, otherwise I would happily create a PR. 😉
(great work, exactly what I have been looking for!)
If your window width is much greater than the size of the map image (which is resized to 800px)
then the mappable area/block is larger than the image itself.
I think the simple fix is to
.imageannotator-ctn-img {
display: inline-block
}
Equally, you could make the image full width
.imageannotator-img { width: 100% }
But I think that might be a bit large in most circumstances.
I would like to annotate an image that is set in a parent page. Would you be open to extending the storage src
field to support arbitrary queries?
When having french as a site language, decimal points for the markers values get converted to commas (and then aren't valid CSS). I was able to circumvent this with a simple str_replace:
<?php echo str_replace(',', '.', markerStyle($marker)) ?>
but thought you'd like to know.
This one's a bit more serious though :(
Currently, if i create a new spot, the markerid number is not being saved.
there's no javascript error - i can see the an ID being generated. Not quite sure how/whether it relates to the entry-id?
If I change the markerid type to number, I can assign a unique number, which is a workaround.
If I change the type to readonly, instead of hidden, I get the message
'The readonly field is missing. Please add it to your installed fields or remove it from your blueprint'
Hej Sylivain 👋🏼,
first of all, thanks for your work on this plugin, that I'd like to support.
It seems like there is something broken in Kirby 3.8.1.1.
The section type "annotator" is available, but no matter what I do, i get the note "Der Bereichstyp "annotator" ist nicht gültig" which translates to "the section-type is not valid".
Am I missing something here?
Using:
"getkirby/cms": "^3.8.1.1"
"sylvainjule/annotator": "^1.0.5"
Heya, first of all: Thanks for this fantastic plugin.
While trying it out with the editor, I realized some SVGs cause scaling problems in the annotator preview:
The editor used an svg export from illustrator. A simple map.
The head of the SVG with the viewbox looks like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.95 498.3">
Now when I gave the SVG some height in the Inspector, it worked again:
So of course this could be solved with changed properties inside the SVG, but since this file might be changed or updated from time to time by the editors, I tried to find a css-only solution. This is where I am right now:
All elements inside the annotator inherit width: 100%
apart from .annotator-ctn .image-ctn, which only has:
{
max-width: 100%;
}
If I change this to width instead of max-width, the image scales to visibility But due to its dimensions ("Portrait mode" so to say), the values max-height: calc(100vh - 12rem);
are keeping it cropped. If i remove it, the image is of course huge, but seem to work fine.
I can imagine the max-heights are there for a reason, but so far that was my try on tackling this issue.
Cheers and thanks,
Fritz
It would be cool if there would be an image zoom function. with this you could zoom in/out on the image and set the markers even more precisely.
Hi,
I have an "Cannot read property 'current' of undefined" exception in the Panel when using the Annotator field. I think this was introduced in Kirby 3.3.0 and could be, from what I read, related to the refactoring of the Vuex form store module?
Thank you,
Georg
Hello,
Your plugin look great and I wanted to give it a try.
I tried the given exemple but when I load the panel page I'm getting this error :
this.$store.state.content is undefined
And annotator is not working.
Do you know how to fix it ?
Thanks !
If I accidentally can't hit the pin, it adds a pin immediately. The ability to optionally switch to double-click to avoid this would be great.
Are there any undocumented server requirements for Annotator to work? The plugin works perfect locally, but gives a The section type "annotator" is not valid
error in the panel on the remote server.
undefined is not an object (evaluating 'this.$annotator.updateFields')
This is what I get if I want to change the color when using the complete example from the docs in the latest Kirby Version.
On Refresh, all markers get on the left top. There's no way to get them back to the right Position. Also no resize or similar. Setup is done in the file blueprint as I want to use it with the builder field and there aren't sections possible.
Edit: I have found a solution, the values aren't saved in the structure field with a point, they are saved with a comma. Changing the fields to number format does the trick. In config.php we have set the correct local but without any changes.
Seems like this is similar to this: #13
I created a pull request, hope it's ok. I don't have many experience with github ...
it would be great if it were possible to limit the number of annotations. In my case, I only need 1 annotation and want to prevent multiple annotations from being added. Unfortunately I can't set this with "min" or "max". When I click on the image, unlimited annotation is added, even i add min or max to the structure fields in the marker section.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.