We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Color plugin for Verge3D:create a color picker easily and quickly

Home Forums Plugins Color plugin for Verge3D:create a color picker easily and quickly

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #39950
    zjbcool
    Customer

    Hi,
    The Color plugin for Verge3D can create a color picker easily and quickly and with no need for HTML/CSS/JS or images, just a few puzzles.
    Here is an example to show how to set up.
    color-plugin-example

    Buy On Gumroad [$29] :heart:

    Attachments:
    You must be logged in to view attached files.
    #39953

    excellent work! :good: :good: :good:

    Chief 3D Verger | LinkedIn | Twitter

    #40155
    GLiFTeK
    Customer

    This plugin has so much potential for places in so many projects! :good:

    #55702
    raykjvdl
    Customer

    Is it possible to get a short tutorial. I’ve torn through this plugin and cannot find how you inserted Div id=default. I understand the concept but have not been able to get the picker to appear in my app.

    #55703
    kdv
    Participant

    Try this

    And don’t forget to add load script puzzle in the Init section

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #55728
    Raykjvdl
    Customer

    I see the problem I was having. I was not loading the script

    I also didn’t realize the puzzle created the html div automatically. I thought I had to create the div and assign it within the puzzle. Is there a way to do that using the “element” option? I would like to put the the picker into a html/css drawer that appears when its clicked or hovered. Right now the the div that is created has an inline style of “absolute” I would like to have it bare bones so I can style it and place it where I want within the html.

    
    <body>
      <div id="v3d-container">
        <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
        <div id="default_test" class="default-test">Color Picker here</div>
      </div>
    </body>

    The current setup I have isn’t working as I had hoped. See attachment.

    Thanks in advance.

    Attachments:
    You must be logged in to view attached files.
    #55732
    kdv
    Participant

    So what’s the problem? You can add this color picker to any element on the page.

    For example, here’s the color picker appended to an annotation.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #55735
    Raykjvdl
    Customer

    I’m wanting it to appear in a div of my choosing. i guess maybe im not understanding.

    In this instance attached. I would think it would be inside of a div with the id “wheel_drawer” is this wrong?

    Attachments:
    You must be logged in to view attached files.
    #55737
    kdv
    Participant

    element – “wheel_drawer” (it’s a parent element)
    id = “default” (it’s a color picker element)

    The result: a color picker element with id “default” will be appended to an element with id “wheel_drawer” (if this id is present in HTML)

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #55742
    Raykjvdl
    Customer

    Thanks for continuing to help. Still am not able to get it to appear. When I use the base puzzle that comes with the plugin I’m able to get it to work in my app. When I try to attach it to an element, I’m not able to get it to work. I set it up as you described above and nothing populates the div “wheel_drawer”

    See attached images for puzzle and html.

    Attachments:
    You must be logged in to view attached files.
    #55746
    kdv
    Participant

    on event of color:change is the event for a color picker with id “default”. “wheel_drawer” is just a parent node to which this color picker is attached. why do you listen to it to get color?

    On your screenshot the “wheel_drower” node is empty. What are the reasons to append the color picker to an empty node that shows nothing?

    On my side I see no problems. The attached color picker node follows its parent position and visibility…
    https://v3d.net/9cj

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #55749
    Raykjvdl
    Customer

    I’m not wanting to attach the color picker to a node. I want to put it into a div that is manually coded. In the demo example the color picker is attached to an element in the 3d model, I can accomplish that, but I’m not interested in doing that. I am wanting to create an HTML interface and place the color picker into a div that that interacts with css and html.

    For example the Scooter demo has a drawer on the right for changing the color of the scooter paint. Based on the same premise I would like to have the color picker inside the drawer, instead of having to have a button for each color.

    The puzzle in the previous screen shot is my attempt to get the picker to show up in the html div id “wheel_color”. In the screen shot of the code, it is empty because I cant figure out how to get it to populate in that spot.

    https://cdn.soft8soft.com/demo/applications/scooter/index.html

    I hope this helps clarify what I am trying to achieve.

    Thanks in advance!

    #55751
    kdv
    Participant

    And still I see no problem on my side. Just created <div> and attached the color picker to it.

    I’m not wanting to attach the color picker to a node

    <div> is a node.

    In the screen shot of the code, it is empty because I cant figure out how to get it to populate in that spot.

    Looks like you first create a color picker, trying to attach it to an unexisting <div> node “wheel_drawer”, than later in the code you create this node and as a result it’s empty )))

    This variant is not working. You can’t append a childe node to an unexisting parent.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #55778
    Raykjvdl
    Customer

    Okay, I see. I was under the impression that I could manually code the div “wheel_drawer” into my index.html without using a puzzle. Then assign the color picker to that div.

    I am creating a custom interface in an index.html and bringing the model in through and iframe. Just like the attached video tutorial.

    I am able to get what you shown above to work. But I would like to nest the color picker into a div that is already coded into the .html page and not have the div generated by a puzzle.

    #55780
    kdv
    Participant

    Seems like you have a little ptoblem… The color picker puzzle that appends it to the chosen <div> doesn’t have one important option: in parent doc. That’s why you cannot append it to a <div> element in index.html. To do what you want you need to re-work a little the plugin (and the loaded script iro.js) to make it look for the necessary <div> in the parent document…

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.