Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • bh 292 posts 978 karma points
    Aug 23, 2018 @ 14:02
    bh
    0

    Hot Spot Property Editor

    Can anyone recommend a hot spot property editor? I need to be able to upload an image and identify multiple "hot spots" X/Y coordinates by % to be able to manage hot spots on a responsive image an example of the kind of end effect I'm going for is something like this.

  • Lee Kelleher 3947 posts 15176 karma points MVP 10x admin c-trib
    Aug 23, 2018 @ 14:15
    Lee Kelleher
    2

    Hi Ben,

    A few years ago, Matt Brailsford did a prototype called Photon. It wasn't released as a downloadable package on Our, but the source-code is available on GitHub.

    https://github.com/mattbrailsford/umbraco-photon

    I'm sure there's a video demo of it out there somewhere, but I can't find it at the moment.

    Hope this helps?

    Cheers,
    - Lee

  • bh 292 posts 978 karma points
    Aug 23, 2018 @ 14:29
    bh
    0

    Thank you @LeeKelleher! I install umbraco from *.zip Any idea how I would go about installing this? What's the chance this would work with 7.12.0 ?

  • Lee Kelleher 3947 posts 15176 karma points MVP 10x admin c-trib
    Aug 23, 2018 @ 14:32
    Lee Kelleher
    0

    There's a package zip download on the repo...

    https://github.com/mattbrailsford/umbraco-photon/raw/master/Package/Photon_0.1.zip

    It's worth bearing in mind that, I've never tried it myself, and it was developed 4 years ago.

    BUT... but if it does work, it'd be a pretty sweet solution, so worth the risk of trying it out, IMHO. :-)

    Good luck!

    Cheers,
    - Lee

  • Matt Brailsford 3051 posts 15816 karma points MVP 7x c-trib
    Aug 23, 2018 @ 14:36
    Matt Brailsford
    1

    It's defo on my list to update soon, but it should still work. You'll likely want to use the version in the media picker branch though, so this one:

    https://github.com/mattbrailsford/umbraco-photon/raw/wip/media-picker/Package/Photon_0.2.zip

    Hope it helps.

    Matt

  • bh 292 posts 978 karma points
    Aug 23, 2018 @ 14:44
    bh
    0

    @MattBrailsford thank you so much! So, I was asking @LeeKelleher about how to install this. Sorry, but I've never installed a package manually before. I saw in the package.xml about creating a "Photon" folder under "\app_plugins" does that hold everything from the *.zip but the *.dll and the *.dll goes in the "\bin" ? Thank you so much for creating this! Can't wait to get it installed!

  • bh 292 posts 978 karma points
    Aug 23, 2018 @ 14:48
    bh
    0

    Nevermind @MattBrailsford I read the packages.xml and figured out the file structure. Thanks again!

  • Lee Kelleher 3947 posts 15176 karma points MVP 10x admin c-trib
    Aug 23, 2018 @ 15:15
    Lee Kelleher
    0

    Ah sorry, I misread what you were asking. It's interesting, as I've been doing Umbraco for so long, I'd forgot that the initial steps aren't that straight forward, e.g. "How do I install a package?"

    You shouldn't need to manually extract the package files from the zip, they should be installable via the Developer/Packages section in the back-office.

    I had a look around the documentation section, but I couldn't find anything relevant. I did find this blog post from a Google search...

    http://www.jondjones.com/learn-umbraco-cms/umbraco-developers-guide/umbraco-packages/how-to-install-an-umbraco-7-package

    Hope this helps?

    Cheers,
    - Lee

  • bh 292 posts 978 karma points
    Aug 23, 2018 @ 15:21
    bh
    1

    Rock on! Drag and dropped the *.zip to the appropriate location and it worked like champ. I've installed packages from the "store" before, but never this way. Should have known. Thank you!

  • Lee Kelleher 3947 posts 15176 karma points MVP 10x admin c-trib
    Aug 23, 2018 @ 15:50
    Lee Kelleher
    0

    No worries at all. It's one of those, everything is obvious (once you know the answer).

    Cheers,
    - Lee

  • bh 292 posts 978 karma points
    Aug 27, 2018 @ 14:48
    bh
    0

    @MattBrailsford the Photon editor has an image upload and that's it. I don't see any mechanism to add/edit hotspots. enter image description here Am I missing something? Have I misconfigured it somehow?

  • Miguel Lopez 11 posts 93 karma points
    Sep 04, 2018 @ 12:48
    Miguel Lopez
    0

    Just a little note to make it work on the latest versions of Umbraco, you will need to remove the following line from the photon.js file:

    data.tabs.pop();
    

    This line is supposed to remove the last tab (Properties) from the edition dialog panel of the photon document types, but Umbraco is not using it anymore.

    Thanks @MattBrailsford for this great package!!

  • bh 292 posts 978 karma points
    Sep 04, 2018 @ 13:26
    bh
    0

    @Miguel I rem'd out that line of code. I see no difference in the property editor. Still, just the image upload without any mechanism to add/edit hot spots. Is there another step? Does something need to be recompiled?

  • Miguel Lopez 11 posts 93 karma points
    Sep 04, 2018 @ 15:11
    Miguel Lopez
    0

    Hi @bh, usually, to add the hotspots you need to literally draw them. Click with your mouse on top of the image and draw a rectangle while keeping it pressed. As far as I know it should work on all browsers.

  • bh 292 posts 978 karma points
    Sep 04, 2018 @ 16:14
    bh
    0

    Thank you @Miguel. That popped-up a pencil and a trashcan. I clicked the pencil and the editor is blank.enter image description here I was expecting to see the property editors for wHotspot there. enter image description here

    That's question 1: How to get the wHotspot property editor to show when you click the pencil?

    Question 2: How do I loop through the hotspots and access the wHotspot data in razor?

    Many thanks in advance!

  • Miguel Lopez 11 posts 93 karma points
    Sep 10, 2018 @ 11:14
    Miguel Lopez
    0

    Hi @bh,

    Please make sure you remove the line I suggested from the photon.js file, as it will prevent the document properties to be displayed on the latest versions of Umbraco. This should do the trick, otherwise try to debug using the developers tool to check what is going on.

    To get the hot spot properties you can adapt the code below:

    var hotspot = Model.Content.GetPropertyValue<object>("propertyAlias") as PhotonValue;
    var tags = hotspot.Tags;
    
    foreach (var tag in tags)
            {
                decimal x = tag.X;
                decimal y = tag.Y;
                decimal width = tag.Width;
                decimal height = tag.Height;
                IPublishedContent metadata = tag.MetaData;
            }
    

    You can then get the property values from the metadata object.

  • bh 292 posts 978 karma points
    Sep 10, 2018 @ 13:41
    bh
    0

    @Miguel thanks for responding! I have rem'd out the code data.tabs.pop(); That hasn't resolved the issue. I'm getting a 404 error looks to be coming from /dependencyHandler.axd

    I put several console.log() into photon.js and none of them fire. Wondering if the 404 is preventing the photon.js from running.

    The 404 error pops when I click on the HotSpot property editor tab to expand the left pane and show the image i'm adding hot spots to. I tried deleting the hotspot (item 1) and starting over and got the same 404 error.

    enter image description here

  • Miguel Lopez 11 posts 93 karma points
    Sep 21, 2018 @ 14:14
    Miguel Lopez
    0

    Hi @bh

    it looks like there is an error somewhere in the JS that is preventing it to work. You should be able to debug the code and find out exactly where it breaks. If you debug your solution locally, you should see the list of resources on your browser developer tools instead of the dependency handler file.

  • Adam Prendergast 33 posts 77 karma points c-trib
    Jan 28, 2019 @ 14:07
    Adam Prendergast
    0

    Hi @bh,

    Did you manage to get this plugin working. I'm thinking of giving it a try myself. Any help, gotchas would be much appreciated.

    Thanks, Adam

  • bh 292 posts 978 karma points
    Jan 28, 2019 @ 14:49
    bh
    0

    Never did get it to work. I created a stand alone page that allowed the user to upload an image. Anywhere the user clicked on the image it would display the x/y coordinates. The user could then enter those coordinates into the CMS. Not smooth, but effective.

  • Adam Prendergast 33 posts 77 karma points c-trib
    Jan 28, 2019 @ 15:08
    Adam Prendergast
    0

    Fair enough. I'm going to give it a go any way... I'll let you know if I have any luck!

  • Nik 1430 posts 6264 karma points MVP 3x c-trib
    Jan 28, 2019 @ 15:34
    Nik
    0

    I have this package working on an Umbraco v7.10.5 site. Don't remember having an issues getting it to work :-)

  • Adam Prendergast 33 posts 77 karma points c-trib
    Jan 28, 2019 @ 16:41
    Adam Prendergast
    0

    Hey @bh,

    I've managed to get it working.

    1) Installed the 'wip/media-picker' branch package that Matt mentioned above. (Photon_0.2.zip).

    2) Commented out the JS line recommended be @Miguel.

    3) Incremented the Client Dependency number and actioned an IIS app refresh.

    4) Created a doctype to as a template for 'meta data' and referenced this in the settings for the data type.

    @bh I wonder if steps 3 & 4 were what you were missing?

    Hope it helps someone anyway.

  • jake williamson 178 posts 790 karma points
    Sep 20, 2019 @ 08:55
    jake williamson
    0

    hey out there,

    i was wondering if anyone has had a stab at converting photon to version 8 of umbraco?!

    spent a couple of hours on it this arvo and so far, so good ;)

    managed to get as far as clicking the hotspot edit button and opening the dialog and then got stuck...

    the main question i have at the moment is if the DetachedPublishedContent class in photon has now been replaced by the new PublishedElement class?

    interestingly if i search for DetachedPublishedContent in the umbraco v8 core there's this comment:

    // notes:
    // a published element does NOT manage any tree-like elements, neither the original NestedContent (from Lee) nor the DetachedPublishedContent POC did.
    

    i'm guessing that's lee kelleher being referenced there ;)

    it feels like the editor window could use the same process as the recently released doc type grid editor

    enter image description here

    it's a sweet package, it'd be great to get it up and running in v8!

  • Neil Chapman 20 posts 123 karma points
    Jul 16, 2020 @ 16:30
    Neil Chapman
    0

    Hi Jake,

    Did you ever get this working in v8? Looks like you got it working to some degree at least!

    What did you have to do to get it working as I'm looking to use the same package if possible.

    Thanks!

  • bh 292 posts 978 karma points
    Jul 17, 2020 @ 15:44
    bh
    0

    @NeilChapman I never got it working. In fact I have an RFP out right now for someone to build a custom property editor for adding hot-spots to an image with tooltips for the hotspots.

  • jake williamson 178 posts 790 karma points
    Jul 19, 2020 @ 23:28
    jake williamson
    1

    hi @NeilChapman and @bh,

    i did indeed get it working in v8 and it's currently in use on a live client site ;)

    the only slight change i made was that the hotspot is a fixed dimension. the client in question was using the editor on a map image to set locations and we needed all the dots to be a square size on the frontend. ultimately i figured it could become a setting in the datatype editor i.e. you either say you want a fixed size, enter a pixel dimension for the hotspot or allow the user to draw whatever size they wanted - but i never got round to doing it...

    the plan was to push the code back into matts repo and see if i could get it merged back via a pull request...

    lemme drop him a line and see if he'd be interested, either that or i can bundle the code up and make it available for download somewhere

    i'll look into it today and get back to you,

    cheers,

    jake

  • Neil Chapman 20 posts 123 karma points
    Jul 20, 2020 @ 08:12
    Neil Chapman
    1

    Hi Jake,

    Thanks for getting back to me.

    I am investigating building my own package going the route you outlined as the later - allowing users to draw multiple hotspots on an image.

    If you are able to share any code that would be really helpful for me to learn from!

    Thank you

  • jake williamson 178 posts 790 karma points
    Jul 21, 2020 @ 09:54
    jake williamson
    1

    hi @NeilChapman and @bh,

    finaly found the time to bash the code together!

    everything is sitting in a forked branch:

    https://github.com/ribsdigital/umbraco-photon/tree/feature/upgrade-to-umbraco-8

    i've a few minor bits to update but the demo site is working. you should be able to check out the repo, fire the site up in visual studio, hit f5 and away you go

    let me know if you run into any issues?

    cheers,

    jake

  • Neil Chapman 20 posts 123 karma points
    Jul 23, 2020 @ 08:59
    Neil Chapman
    0

    This is awesome jake, thank you for sharing.

    The solution runs fine and is very similar to what I need. I need to make a couple of adjustments such as allowing free draw hotspots (polygons) and I want the hotspot editing to be done in an infinite editor window as think this will be a better experience.

    Your solution will really help me reference and write my code, thank you!

  • Sven 21 posts 113 karma points
    28 days ago
    Sven
    0

    Hey Jake,

    I was wondering if there was a nuget package available for this?

    Thanks!

  • jake williamson 178 posts 790 karma points
    27 days ago
    jake williamson
    0

    hi sven,

    sadly no - you could download the repo and create a local nuget package for use on your own machine or your own nuget server?

    matt hasn't touched the forked repo since 2018... i could submit my branch as a pull request but i'm not sure if it'd get picked up for a while...

    cheers,

    jake

Please Sign in or register to post replies

Write your reply to:

Draft