Jump to content

TirochH

Members
  • Content Count

    21
  • Joined

  • Last visited

Everything posted by TirochH

  1. Dear Jack, thank you. I have one Problem found. "snap" does not run. "liveSnap" runs. When I have a misunderstanding please extend your codepen. Hans
  2. Hi Jack, thank you for your input. I think, I solved my problems. Sorry for the 700+ lines. I don't want and never expect that you analyze this code. But now I create a very compact codepen (Draggable / d3). With 127 lines "js", 0 lines "css", 0 lines "html". I think this codepen is also helpful for other people. It's "pure" JavaScript with no line "css" and no line "html". Your demo has 157 lines (101 "js", 33 "css" and 23 "html). Including "blank lines, sorry. My Solution runs perfectly. Some questions: 1. I need for dragging function "rtDial", you not, why? 2. function rtArc, look at (-rtOffset), why I need this and you not ? I think we use different versions of the SVG. Hans
  3. Interesting. I expect an Error. But it runs with draggable.js without problems. Thank you for this proposal. It runs with no problems. I changed "onPress" with "onClick" and delete the Code-Line with "this.startdrag(rt)". Two additional questions: 1. when I "drag" with the mouse or fingers a rotation of 100 degrees "Darggable" will return a rotation value of approximately 60 degrees. Is it possible to return the 100 % instead of 60%? 2. onClick position, smoothly change from the old position to the new position. Can you give me an example, how you solve this. I think thats the last 2 questions I have for this controls. Thanks Hans
  4. Hi Jack, following Questions are open: 1. Is the Draggable.min.js / Draggable.js error reproduce-able ? And some additional questions: 2. Position-by-tap smooth rotation to the new position. In your proposed example there is a "jump" to the new positon. Who you extend the solution, that a smooth rotations will be down ? 3. Differentiate between "short tap" and "tap-and-move" Variant 3.1: A "short tap" should rotatate smoothly" to the new "tapped position" Variant 3.2: In some cases I want suppress variant 3.1, depending on a "condition" Variant 3.3: tap-and-move should be possible, this is different to variant 3.a, now the "the rotation jumps to the new "tapped" position and moves from the "tapped" position. When you tap-and-move I want the "old" solution to begin the movement starting from the old existing position without jumping to the "tapped" position. Thanks Hans
  5. Dear Greensock Support, please answer .? Thanks Hans
  6. Dear Jack, I want reproduce this error in a reduced test case, based on your codepen (https://codepen.io/GreenSock/pen/dZYWEY). But I failed. My example - with members-only downloaded files - I cannot build on codepen. You need the codepen pro license. My error is only reproduce-able on iOS. I want, that you test only following simple test-case (with the complex code) to verify if the posted error is reproduce-able. You have only following steps, based on my HTML-example: <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>jack.html - test for hans</title> <script src="js/d3.v4.12.js"></script> <script src="js/jquery.v2.2.3.js"></script> <script src="js/ThrowPropsPlugin.min.js"></script> <script src="js/Draggable.min.js"></script> <!--script src="js/Draggable.js"></script--> <script src="js/TweenMax.min.js"></script> <style> svg { position:absolute; } /* insert code from codepen */ </style> </head> <body> <script src="my.js"></script> </body> </html> create a directory "js" and copy your actual files and additional jquery v2.2.3 and d3 v4.12 create a HTML "jack.html" based on my example (insert the few lines from the style-sheet) https://codepen.io/TirochH/pen/RjaNWL create a my.js from my codepen (just copy) https://codepen.io/TirochH/pen/RjaNWL run the "jack.html" on iOS, to see if my error is reproduce-able. My project runs now, without complications. But only with "Draggable.js", not with "Draggable.min.js". The only question is, why is this mistake? All described Greensock-Files are loaded from the member-section from Club Greensock (PlugIn's v1.20.3). Thanks Hans
  7. HI JACK, HI SAHIL, after longer interrupt time my example runs - thanks your help. My problem was, that the "this.rotationOrigin" is implemented only in the latest version of the Greensock-Library". I need longer to realize this. In my Application it runs the feature "Positioned by Mouse-Click" on a MAC with Safari or Chrome, always with the newest updates on all levels. But my Application on the iPad - with "Touch Interface" it doesn't run the feature "Positioned by Finger-Tap". Here my example on the end of this posting (sorry it is complex). Here it runs with the "Touch Interface". Can you give me an idea, what I can do to solve this problem? Additional Statement: I found the problem. When I insert the plugin's with the "web-link from the codepen.io" it run's OK with a local browser. But after a short time I get the "Wups, you are using a members-only plugin". When I insert the plugin's with the correct "legal members-only" downloaded files, the position-by-finger-tap doesn't run on the iPad, on the Mac (with mouse-click) all runs OK. From my point-of-view, it's the responsibility from Greensock to solve this problem. Final: The utility "Draggable.min.js" is the problem. With the utility "Draggable.js" all runs OK. Feedback/Impression: My impression is, when you are a "Newbie" it is more difficult to get a "good" and "quick" answer. I personally need "days" to find the "right" answer. Sorry, for this feedback to the support. But your products are fine. Additional "Newbie" question for a quick help: My enclosed sample is a lightbulb dimmer knob (0% to 100%). For example: The knob is positioned by 20%. When I tap on 80% the knob jumps "quick" to 80%. I want a smooth transition to the new position (with reduced more slowly at start and end). Can you give me a short recommendation. Hans Here my "codepen.io"-example, nearly 100% of the code based on JavaScript. With no html and nearly no css (used only to include the "digital font" in the "codepen.io"-environment) and SVG (scaleable-vector-graphic) based on d3 version 4 and Greensock's GSAP: https://codepen.io/TirochH/pen/RjaNWL
  8. Dear Sahil, dear Greensock support, i learned that I have exactly define what I want: I want a callback function that returns the rotation position where I touched (not dragged) the wheel. e.g.: .onTouchwithoutDrag or .onTouchwithoutMove or .onTap or .onClick. (.onClick exists, but with annother functionality). THIS IS THE SAME REQUIREMENT DEFINITION - IN OTHER WORDS - AS YOU (SAHIL) POSTED ON MONDAY 11:03 AM. All other input should only be a more detailed explanation. I hope that this is more clear. I do not want a UI functionality. This I build by my own. But it is clear, I need this functionality to build a UI. But from my view, all people who use Greensock Draggable build - more or less - a high sophisticated (animated) UI by their own. The only reason, why I used external libraries is to ease my life and not make it more complicated. This is the message I want send. Thats the reason I discussed this topic more intensively and more emotional. I read in this forum, that the business model from Greensock based on the principle to extend their functionality. The question from me is, in which direction? This is the job from Greensock to clearly define this. I also expect that the support help users such me to define a way that solves the problem, for me and for Greensock. But my minimal expectaction is to get an anwer. A positive nor negative. No answer is the situation now. Sorry. Hans
  9. my viewpoint is: we need a draggable KNOB in 2 variants: - one with the greensock's functionality (its a knob that spins) - a second with the functionality of https://radmie.github.io/ng-knob/ (this is, what needed functionality I described) From my point of view is this functionality with low manpower possible to build in Draggable-alternate (=working name) When you look in the code from ng-knob. you need only few lines-of-code. To combine this functionality global is a hard way and only necessary in some preselected parts, Hans
  10. Sorry, noone from greensock can help? Hans
  11. Thank you for your idea's. I also think that GreenSock need to clarify this. My expectation is a integrated functionality, comparable with ng-knob. The other alternative is, that I implement it with the same logic as ng-knob. I think it is d3.js I have to explore it. The svg's in my example based on d3 v4. Hans
  12. I don't find an example from the draggable knob that does following (based on my codepen live example): - knob is on position 15 percent - I tap (touch) on position 70 percent - knob moves to position 70 percent It is only possible to tap and move (drag) to that position. I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me. A link that explains what I want. https://radmie.github.io/ng-knob/ My link to my codepen live example. I want only show the missed functionality (compared to the upper example, based on ng-knob). For a review it's to complex. But interesting for you. Hopefully. When you want play with different predefined variants than change line 20 in "JS". https://codepen.io/TirochH/pen/eGqbNL Here a link from a "simple" example from "Greensock" with the same missed functionality (with rotation angle, instead percentage). https://codepen.io/PointC/pen/eWNRpe Hans
  13. Now I reduced my code again. I have insert always 'absolute'. Nothing change as I want. Hans PS: I add this also direct in CSS. You are right. Than it is O K: But I want use it without CSS: How I insert the identical in javascript?
  14. please can you help me. what is not right on my svg graphic (via snap.js). why the circles not overlap ? Hans
  15. My problem is, that my new knob from my posting (2;28 PM) is no SVG. Its build only with HTML "<DIV>"s. See the link to the codepen. Hans
  16. HI, 1. the starting position (position; 0) has not the defined color. Based on your logic, the color should be green. You are right "nothing is initialized. Bur how you initialize? 2. how you select the. stroke, that I get the color from yellow to red. 3. have you a demo ? Hans
  17. Thank you, it runs. For your info: The result of the knob: https://codepen.io/TirochH/pen/eWpWJm Annother questions: 1. when I start from rotation x, how I can "initialize", that at start I have the right color ? 2. when I want go from color (rotation 0) "yellow orange red", what I have to do? 3. Alternative to the color circle; - round circles around the knob - init state (rotation = 0): white or transparent - state by rotation = x, all circles from 0 to x, are on (color, color depending of rotation) Hans
  18. Thank you very much. I like your Vektor Grafik. I adapt your codeine. see: https://codepen.io/TirochH/pen/ZKGwdK?editors=0010 I want change the color of the wheel, dependent of the rotation. Can you help me. Hans
  19. Good Morning, how I can use the attached "greenDial.svg" instead "knob.png". I want change the color of the enclosed green svg-based circle. Hans greenDial.svg.zip
  20. Dear Carl, thank you very much for your answer. It was the first time I worked with your solution. I learned also important basic knowledge in the area of Javascript. My native language is German, and not English. Sorry. But in the meantime I solved the most, but not all Problems. I integrate the following two examples in my Home-Automation Solution. See following pictures: and here the codepen-link to my Example 1: https://codepen.io/TirochH/pen/oWNoeX?editors=0010 and the codepen example 2: https://codepen.io/TirochH/pen/bWGoKw?editors=0010 The animation features are amazing. You see not very often. Pure javascript, no HTML, no CSS. I love this approach. Please can you look over the code and give me a feedback. Following are not totally solved: - the start value - the interaction with the touch features, I copied this solution from Chris Gannon - the snap feature in example 2, should be 5% Please look about this code in example 2, with th jQuery.plugin (see codepen). In codepen, it does not run. But in my "simple" solution it runs perfect. The reason I need this, because I get by "ElementById" a Null-Pointer return. This is special by the "SVG". function initSVG(){ $('#dial-line-bg').waitUntilExists(function(){ oarg.item.xxapi.dialLineBg = document.getElementById('dial-line-bg'); //SVG TweenMax.set(oarg.item.xxapi.dialLineBg, { position:'absolute', alpha:0.1 }); }); I have more questions, but I find. This is enough for the first step. I want integrate your amazing features in my Home-Automation Solution. Examples are for "dimming" the light or volume of radio, etc. Greetings from Vienna. Its a little country in Europe. Hans
  21. I adapt following Example from Chris Gannon grKnob3.html In DEMO-Mode it runs perfect. But I have Problem with the integration in my App for Home-Automation, IN your demos you start always from the body-tag. I use in my tests different tags. In the example (3rd attachment ) I used the "container" tag. I have it on my screen on the top position. The wheel run perfect. But not on the right position in the popup window (down-right). I want the Picture with a predefined size (240x240). Additional Questions: How I get a value from the wheel? Or how I put a Value to the wheel? Your predefined value "initialFace" don't work........ Hans ^^^