Hi me again!
Authoring tool - have added a hotgraphic with one pin. PNG image of a screesnhot.
When I preview the page I see my article and block and then a tiny square about 5 by 5 pixels, centred just below the block. If I click on this I see my pin, but it stays where it is irrespective of the coordinates I put in for the pin.
Also doesn't work if I change the hotrgraphic image.
Any ideas?
Thanks!
Oh I figured it out - I had set "Use graphics as pins" to true.
D'oh!
Is there a manual that explains how to use this feature.
It is clear how to use this component when showing the main graphic with the pins.
but how does this component work when I set "use graphics as pins" to true in the authoring tool.
According to the README for that component,
"When this is set to true, the item graphics can be used as 'pins'. When this is set to 'false' (per default), a main poster image is displayed, with pins overlayed to trigger the hot spots."
Does this help at all? I'm guessing you also need to set a _graphic property for each of the _items
I have read the readme :-)
When you set the property to true, all it seems to do is to show nothing. So what I would like to know is what exactly do I have to do to get the item images to show up. I have set all the properties in the "add item"- popup.
I am using the standard version of the authoring tool, so let's assume I have no access to any css or other files. But if it is impossible to use this functionality from the authoring tool, then I would still like to have some instructions on how to do this. Which files do I need to change, what needs to be changed and why. Maybe someone has an example of a working setup?
This could also be read as an appeal to the developers to only publish something if it is well documented how it should be used.
Hopefully this will help
A hot graphic component enables a user to click on hot spots over an image and display a detailed popup that includes an image with text. This component will change to a narrative on mobile devices, this means the actions may not match any instructional text used so it includes a Mobile Body field where you can add specific instructions for mobile users on how to click through the narrative.
Pin position – Top and Left are based on a percentage of the image so Top 0 Left 0 will position the pin to the top left hand corner, Top 50 and Left 50 will position the pin in the centre of your image and Top 100 Left 100 will position the pin in the bottom right hand corner.
To add new hot graphic pins click on Add.
Under the Main properties:
Under the items bar:
I've attached a screenshot which illustrates how the useGraphicsAsPins property can be used.
Note that you still have to set the left and top properties to set the initial position of the item, but by using classes you can layout the shape of the clickable area. As Mark has mentioned, right now you're limited to a 4x2 grid.
first of all: thank you both for your extensive replies.
unfortunately they are still very unclear. that has probably more to do with how understand it than with your explanation. so i will try to tell you where i still do not understand.
first here is what i understand: in stead of using a graphic, you can setup a grid that can be filled with the images set in the "hot graphics pins". when i click on one of these images, there will be a popup.
to setup the grid I would have to enter something in classes. so far so good?
my questions are mainly about what to enter in which classes-box:
1. which classes-box should I use. the classes-box on the main hot graphic, or the classes-box on the" Hot graphics pins". if it is the second: should I use the first or the second box.
2. what do i enter into the classes box to create the grid. for example if I want a 4x4 grid. or a 2x1/2x2? your excel shows that I should use .rows and .cols. but what exactly do I enter into the classes box.
my guess would be for a 4x4: " .rows-1 .cols-1 .rows-1 .cols-1 .rows-1 .cols-1 .rows-1 .cols-1 .rows-1 .cols-1.rows-1 .cols-1.rows-1 .cols-1.rows-1 .cols-1" but this seems very strange. please give an example that can be copy-pasted.
3. how do I assign a graphic to a box in this grid. do I assign the top and left to the coordinates of a box? so in a 4x4 the top left box would be top:0 left:0 and the second box would be top:0 left:25. do I need to do anything else?
4. is there any limitation to the size of the graphics?
as you can see, your explanation seems very straight forward, but in practice there are still some valid questions. maybe this feedback could be usefull for creating the documentation. I will keep trying, hopefully I will be able to answer the questions. What I could really use is some step by step instructions. I think I understand the concept. I am just unable to translate this into what to do in the builder.
Hi Sander
We've got a big push in v2 to update the documentation to make it more detailed and useful. I will make sure what Mark and Brian have added here gets included.
that would be very useful. but as I said above: the manual should not only explain the concept but should be more for us dummies who can not translate that into what to do exactly. there are lots of easy things that are apparent for the developers but not for the non-developers. for example: how to use a classes box. And where we can find what can go into a classes box.
Hi Sander,
We actually intend to provide a more user friendly UI for more complicated components in a future version of the authoring tool. The Hot graphic component is one of those.
I've attached a screenshot of how it looks in action.
Regards,
Brian
Hi,
Two further Screen shots of how to do that in the AT.
All of the classes are set to rows-1 cols-2
Here are some worked examples of using the classes on the 4x2 Grid.
Start with a blank grid and when you place your images onto that grid count the rows and cols that the image spans. Think of spanning as covering.
My images are the shaded regions. Apologies in advance for the poor handwriting.
Maybe some kind photoshop wizard could digitise my hand sketches as a nice graphic?
The other thing that adds to the complexity is that you still have to set the top and left pin positions.
This is a tough concept to grasp so keep asking questions if it's still not clear.
Thanks again,
I thought that everything was clear now. However nothing is showing up.
So I put my settings and stuff in a pdf document. I have made print screens of all the settings, the result and the generated html code. Everything seems to be okay, but I do not see the hotgraphic component with the boxes. There is something on the page, because I can find a link to a popup, but the table does not seem to be rendering. So I am wondering if I still have problems with:
1. Image sizes?
2. size of invisible background image?
3. a combination of 1 and 2
4. a setup problem with the builder (do I need a newer version)
5. maybe I am using an older component? we have updated everything to the latest versions
could you take a look at the pdf and try to see if something is wrong?
Hi Sander,
All that looks good to me. I think it's missing some base styling which is included in this PR
https://github.com/adaptlearning/adapt-contrib-hotgraphic/pull/96
Which leaves the hotgraphic @ version 1.1.7
okay, so I have updated the hot graphic component, but still nothing is showing.
removing the component and adding it again does not work.
I have attached the published course. If someone would be able to explain why this is not working as it should, I would be very grateful
Hi Sander,
I took the course folder from your test-course.zip file. Note that you had _useGraphicsAsPins set to false in this. I set it to true and removed the reference to the television image.
I couldn't be sure you're on the latest version of the code so I did the following.
You can see the output of the course attached but its working as expected now. I'd suspect a combination of the course being built with an old version of the hotgraphic component and the _useGraphicsAsPins being set to false caused this.
Regards,
Brian
the set to false flag was only in this build. I have tested with both on and off. sorry for that.
but I do not have access to grunt build and stuff like that. I need to solve this with the authoring tool only.
maybe I should rebuild the entire course. (so delete it and start over) will try that now.
How are you running the authoring tool?
Also, did you manually upgrade the hotgraphic component as Mark suggested?
Verify that it's the latest version (1.1.7). You can get this by Plugin Management > Components as shown on the screenshot below.
Also try re-selecting the Vanilla theme in your course and clicking Publish/Preview again. This will do a full re-build.
Regards,
Brian
Well, we can only update by pressing the update button in the tool. Since we do not have access to the server that is running the tool. We are running the tool on a webserver, zo every teammember can access it and work on a part of the project. (using the same username off course). We do this on purpose, because we want to use the builder, not the framework.
after updating I deleted the course and started on a new one, and guess what: I have images.
They are cut in half however. So I only see the top part of the images. The images are 600x600. I would expect that they would be sized correctly automatically. They are displayed correct if I change the grid to rows-1 cols--1. Resizing them to the correct size is not that difficult. (Now if only I could delete the images from the asset database. :-) )
So in short to make this work:
anything I forgot?
thanks for all the help.