I've got custom view, which draws a scale and handles touch event (horizontall scroll of that scale). Drawing part:
#Override
public void onDraw(Canvas canvas){
startingPoint = mainPoint;
counter = 0;
int i = 0;
while (startingPoint <= scaleWidth) {
if(i % 4 == 0) {
size = scaleHeight / 4;
if (counter < 24) {
counter = counter + 1;
} else {
counter = 1;
}
String c = Integer.toString(counter);
canvas.drawText(c, startingPoint, endPoint - (size + 20), textPaint);
} else {
if(i % 2 == 0) {
size = scaleHeight / 8;
} else {
size = scaleHeight / 16;
}
}
if(startingPoint >= closest) {
//метки шкалы
canvas.drawLine(startingPoint, endPoint - size, startingPoint, endPoint, rulerPaint);
}
startingPoint = startingPoint + pxmm;
i = i + 1;
}
}
And TouchEvent:
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
float x = event.getX();
prevx = x;
System.out.println(x);
break;
case MotionEvent.ACTION_MOVE:
float z = event.getX();
float dist = z - prevx;
mainPoint = prevsp + dist;
closest = mainPoint - ((int)(mainPoint / pxmm)) * pxmm;
break;
case MotionEvent.ACTION_UP:
float y = event.getX();
prevsp = mainPoint;
break;
}
invalidate();
return true;
}
In activity_main.xml i paste two copies of this view:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|top">
<net.manualuser.calibr.TimeScale
android:id="#+id/my_scale"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white" />
<net.manualuser.calibr.TimeScale
android:id="#+id/my_scale1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white" />
What should i do to synchronize these two views so that when i scroll either scale another one moves simultaneously. If i'm correct i need to set OnTouchListener for my custom views in MainActivity:
TimeScale defScale = (TimeScale)findViewById(R.id.my_scale);
TimeScale defScale1 = (TimeScale)findViewById(R.id.my_scale1);
defScale.setOnTouchListener(this);
defScale1.setOnTouchListener(this);
And write some code to synchronize them in onTouch method (in MainActivity). But i have now idea how do i do it?
To get it working i need to pass event to both of my views in onTouch in MainActivity:
public boolean onTouch(View v, MotionEvent event){
defScale.onTouchEvent(event);
defScale1.onTouchEvent(event);
return false;
}
Related
(Xamarin with Visual Studio 2015 ) I want to implement a simple Activity inwith an Imageview, which can be moved/dragged with touch: This is what I have implemented, but the Image is flickering and moving slower. Can you give me an example how to implement this?
Thanks for your help!
private void TouchMeImageViewOnTouch(object sender, View.TouchEventArgs touchEventArgs)
{
View bild = (View)sender;
RelativeLayout.LayoutParams layouti = (RelativeLayout.LayoutParams)bild.LayoutParameters;
switch (touchEventArgs.Event.Action & MotionEventActions.Mask)
{
case MotionEventActions.Down:
xDelta = touchEventArgs.Event.GetX()-layouti.LeftMargin;
yDelta = touchEventArgs.Event.GetX() - layouti.LeftMargin;
break;
case MotionEventActions.Move:
int wert = (int)touchEventArgs.Event.GetX();
yvalue = touchEventArgs.Event.GetY()-yDelta;
xvalue = touchEventArgs.Event.GetX()-xDelta;
float xdpi = (int) Resources.DisplayMetrics.Density;
layouti.LeftMargin = (int)xvalue;
layouti.TopMargin = (int)yvalue;
container.Invalidate();
break;
case MotionEventActions.Up:
break;
default:
break;
}
xPositionText.Text = xvalue.ToString();
yPositionText.Text = yvalue.ToString();
}
I have tried to implement a dragable imageview for testing. the drag is slow in the android emulator. But by testing it in the real device it works fine and move fast.
Try the following code sample：
public class MainActivity : Activity, IOnTouchListener
{
Button dragAbleBt;
ImageView imgV1;
int screenWidth = 0;
int screenHeight = 0;
int lastX = 0, lastY = 0;
public bool OnTouch(View v, MotionEvent e)
{
MotionEventActions ea = e.Action;
switch (ea) {
case MotionEventActions.Down:
lastX = (int)e.RawX;
lastY = (int)e.RawY;
break;
case MotionEventActions.Move:
int dx = (int)e.RawX - lastX;
int dy = (int)e.RawY - lastY;
int left = v.Left + dx;
int right = v.Right + dx;
int top = v.Top + dy;
int bottom = v.Bottom + dy;
if (left < 0)
{
left = 0;
right = left + v.Width;
}
if (right > screenWidth)
{
right = screenWidth;
left = right - v.Width;
}
if (top < 0)
{
top = 0;
bottom = top + v.Height;
}
if (bottom > screenHeight)
{
bottom = screenHeight;
top = bottom - v.Height;
}
v.Layout(left, top, right, bottom);
lastX = (int) e.RawX;
lastY = (int) e.RawY;
v.PostInvalidate();
break;
case MotionEventActions.Up:
break;
}
if (v.Id == Resource.Id.imageView1)
{
return true;
}
return false;
}
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView (Resource.Layout.Main);
//DisplayMetrics dm = Resources.DisplayMetrics;
//screenWidth = dm.WidthPixels;
//screenHeight = dm.HeightPixels;
dragAbleBt = FindViewById<Button>(Resource.Id.button1);
imgV1 = FindViewById<ImageView>(Resource.Id.imageView1);
dragAbleBt.SetOnTouchListener(this);
imgV1.SetOnTouchListener(this);
}
public override void OnWindowFocusChanged(bool hasFocus)
{
base.OnWindowFocusChanged(hasFocus);
if (hasFocus)
{
Rect outRect = new Rect();
this.Window.FindViewById(Window.IdAndroidContent).GetDrawingRect(outRect);
screenWidth = outRect.Width();
screenHeight = outRect.Height();
}
}
}
Please refer the source code to the github
How to apply pinch zoom on stickerView or ClipArt or custom view android. I tried this demo.
but not succeeded sometimes it will disappear view some time view become stuck, it worked fine when i want to zoom-in zoom-out from button but not on multi-touch.
screenshot:
Java
public class ClipArt extends RelativeLayout {
int baseh;
int basew;
int basex;
int basey;
ImageButton btndel;
ImageButton btnrot;
ImageButton btnscl;
RelativeLayout clip;
Context cntx;
boolean freeze = false;
int h;
int i;
ImageView image;
String imageUri;
boolean isShadow;
int iv;
RelativeLayout layBg;
RelativeLayout layGroup;
RelativeLayout.LayoutParams layoutParams;
public LayoutInflater mInflater;
int margl;
int margt;
float opacity = 1.0F;
Bitmap originalBitmap;
int pivx;
int pivy;
int pos;
Bitmap shadowBitmap;
float startDegree;
String[] v;
public ClipArt(Context paramContext) {
super(paramContext);
cntx = paramContext;
layGroup = this;
basex = 0;
basey = 0;
pivx = 0;
pivy = 0;
mInflater = ((LayoutInflater) paramContext.getSystemService("layout_inflater"));
mInflater.inflate(R.layout.clipart, this, true);
btndel = ((ImageButton) findViewById(R.id.del));
btnrot = ((ImageButton) findViewById(R.id.rotate));
btnscl = ((ImageButton) findViewById(R.id.sacle));
layoutParams = new RelativeLayout.LayoutParams(250, 250);
layGroup.setLayoutParams(layoutParams);
image = ((ImageView) findViewById(R.id.clipart));
image.setImageResource(R.drawable.ic_launcher);
setOnTouchListener(new View.OnTouchListener() {
final GestureDetector gestureDetector = new GestureDetector(ClipArt.this.cntx,
new GestureDetector.SimpleOnGestureListener() {
public boolean onDoubleTap(MotionEvent paramAnonymous2MotionEvent) {
return false;
}
});
public boolean onTouch(View paramAnonymousView, MotionEvent event) {
if (!ClipArt.this.freeze) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
layGroup.invalidate();
gestureDetector.onTouchEvent(event);
layGroup.performClick();
basex = ((int) (event.getRawX() - layoutParams.leftMargin));
basey = ((int) (event.getRawY() - layoutParams.topMargin));
break;
case MotionEvent.ACTION_MOVE:
int i = (int) event.getRawX();
int j = (int) event.getRawY();
layBg = ((RelativeLayout) getParent());
if ((i - basex > -(layGroup.getWidth() * 2 / 3))
&& (i - basex < layBg.getWidth() - layGroup.getWidth() / 3)) {
layoutParams.leftMargin = (i - basex);
}
if ((j - basey > -(layGroup.getHeight() * 2 / 3))
&& (j - basey < layBg.getHeight() - layGroup.getHeight() / 3)) {
layoutParams.topMargin = (j - basey);
}
layoutParams.rightMargin = -1000;
layoutParams.bottomMargin = -1000;
layGroup.setLayoutParams(layoutParams);
break;
}
return true;
}
return true;
}
});
this.btnscl.setOnTouchListener(new View.OnTouchListener() {
#SuppressLint({ "NewApi" })
public boolean onTouch(View paramAnonymousView, MotionEvent event) {
if (!ClipArt.this.freeze) {
int j = (int) event.getRawX();
int i = (int) event.getRawY();
layoutParams = (RelativeLayout.LayoutParams) layGroup.getLayoutParams();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
ClipArt.this.layGroup.invalidate();
ClipArt.this.basex = j;
ClipArt.this.basey = i;
ClipArt.this.basew = ClipArt.this.layGroup.getWidth();
ClipArt.this.baseh = ClipArt.this.layGroup.getHeight();
int[] loaction = new int[2];
layGroup.getLocationOnScreen(loaction);
margl = layoutParams.leftMargin;
margt = layoutParams.topMargin;
break;
case MotionEvent.ACTION_MOVE:
float f2 = (float) Math.toDegrees(Math.atan2(i - ClipArt.this.basey, j - ClipArt.this.basex));
float f1 = f2;
if (f2 < 0.0F) {
f1 = f2 + 360.0F;
}
j -= ClipArt.this.basex;
int k = i - ClipArt.this.basey;
i = (int) (Math.sqrt(j * j + k * k)
* Math.cos(Math.toRadians(f1 - ClipArt.this.layGroup.getRotation())));
j = (int) (Math.sqrt(i * i + k * k)
* Math.sin(Math.toRadians(f1 - ClipArt.this.layGroup.getRotation())));
k = i * 2 + ClipArt.this.basew;
int m = j * 2 + ClipArt.this.baseh;
if (k > 150) {
layoutParams.width = k;
layoutParams.leftMargin = (ClipArt.this.margl - i);
}
if (m > 150) {
layoutParams.height = m;
layoutParams.topMargin = (ClipArt.this.margt - j);
}
ClipArt.this.layGroup.setLayoutParams(layoutParams);
ClipArt.this.layGroup.performLongClick();
break;
}
return true;
}
return ClipArt.this.freeze;
}
});
this.btnrot.setOnTouchListener(new View.OnTouchListener() {
#SuppressLint({ "NewApi" })
public boolean onTouch(View paramAnonymousView, MotionEvent event) {
if (!ClipArt.this.freeze) {
layoutParams = (RelativeLayout.LayoutParams) ClipArt.this.layGroup.getLayoutParams();
ClipArt.this.layBg = ((RelativeLayout) ClipArt.this.getParent());
int[] arrayOfInt = new int[2];
layBg.getLocationOnScreen(arrayOfInt);
int i = (int) event.getRawX() - arrayOfInt[0];
int j = (int) event.getRawY() - arrayOfInt[1];
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
ClipArt.this.layGroup.invalidate();
ClipArt.this.startDegree = layGroup.getRotation();
ClipArt.this.pivx = (layoutParams.leftMargin + ClipArt.this.getWidth() / 2);
ClipArt.this.pivy = (layoutParams.topMargin + ClipArt.this.getHeight() / 2);
ClipArt.this.basex = (i - ClipArt.this.pivx);
ClipArt.this.basey = (ClipArt.this.pivy - j);
break;
case MotionEvent.ACTION_MOVE:
int k = ClipArt.this.pivx;
int m = ClipArt.this.pivy;
j = (int) (Math.toDegrees(Math.atan2(ClipArt.this.basey, ClipArt.this.basex))
- Math.toDegrees(Math.atan2(m - j, i - k)));
i = j;
if (j < 0) {
i = j + 360;
}
ClipArt.this.layGroup.setRotation((ClipArt.this.startDegree + i) % 360.0F);
break;
}
return true;
}
return ClipArt.this.freeze;
}
});
this.btndel.setOnClickListener(new View.OnClickListener() {
public void onClick(View paramAnonymousView) {
if (!ClipArt.this.freeze) {
layBg = ((RelativeLayout) ClipArt.this.getParent());
layBg.performClick();
layBg.removeView(ClipArt.this.layGroup);
}
}
});
}
public void disableAll() {
this.btndel.setVisibility(4);
this.btnrot.setVisibility(4);
this.btnscl.setVisibility(4);
}
public ImageView getImageView() {
return this.image;
}
public void setFreeze(boolean paramBoolean) {
this.freeze = paramBoolean;
}
}
Layout file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
<ImageButton android:id="#+id/rotate" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:adjustViewBounds="true" android:background="#android:color/transparent" android:scaleType="fitCenter" android:src="#drawable/rotation"/>
<ImageButton android:id="#+id/sacle" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:adjustViewBounds="true" android:background="#android:color/transparent" android:scaleType="fitCenter" android:src="#drawable/pointer"/>
<ImageButton android:id="#+id/del" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:adjustViewBounds="true" android:background="#android:color/transparent" android:scaleType="fitCenter" android:src="#drawable/close"/>
<ImageView android:id="#+id/clipart" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp"/>
</RelativeLayout>
I have a view that is been dragged around the screen. how do i check if the view has reached the edge of its parent right before applying the next transformation?
full class https://github.com/thuytrinh/android-collage-views/blob/master/libraries/collage-views/src/main/java/com/thuytrinh/android/collageviews/MultiTouchListener.java
here is my current code:
case MotionEvent.ACTION_MOVE: {
// Find the index of the active pointer and fetch its position.
int pointerIndex = event.findPointerIndex(mActivePointerId);
if (pointerIndex != -1) {
float currX = event.getX(pointerIndex);
float currY = event.getY(pointerIndex);
// Only move if the ScaleGestureDetector isn't processing a
// gesture.
if (!mScaleGestureDetector.isInProgress()) {
adjustTranslation(view, currX - mPrevX, currY - mPrevY);
}
}
break;
}
private static void adjustTranslation(View view, float deltaX, float deltaY) {
float[] deltaVector = {deltaX, deltaY};
view.getMatrix().mapVectors(deltaVector);
view.setTranslationX(view.getTranslationX() + deltaVector[0]);
view.setTranslationY(view.getTranslationY() + deltaVector[1]);
}
xml: the view been dragged around is the Collage view(with id "CollageView1"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="#545454">
<FrameLayout
android:layout_width="295dp"
android:layout_height="170dp"
android:splitMotionEvents="true" >
<ImageView
android:id="#+id/collageBgView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#868686" />
<com.thuytrinh.android.collageviews.CollageView
android:id="#+id/collageView1"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/stamp_003" />
</FrameLayout>
</RelativeLayout>
A check has to be made for X ad Y translations, here is the code:
for X translations:
private static boolean hasReachedEdgeX(View v, float newTransX){
if(canCrossParentBoundries){
return false;
}
Boolean reachedEdge = true;
int adjustedWidth = (int) ((v.getWidth() * v.getScaleX() - v.getWidth()) / 2.f);
int viewLeft = v.getLeft() - adjustedWidth;
int viewRight = v.getRight() + adjustedWidth;
View p = (View) v.getParent();
ViewGroup.MarginLayoutParams pLayoutParams = (ViewGroup.MarginLayoutParams) p.getLayoutParams();
int pLeft = p.getLeft() - pLayoutParams.leftMargin;
int pRight = p.getRight() - pLayoutParams.leftMargin - pLayoutParams.rightMargin;
float newViewRight = viewRight + newTransX;
float newViewLeft = viewLeft + newTransX;
//checks if the view has reached the boundaries of its parent
if((newViewLeft > pLeft) && (newViewRight < pRight)){
reachedEdge = false;
}
return reachedEdge;
}
For Y translations:
private static boolean hasReachedEdgeY(View v, float newTransY){
if(canCrossParentBoundries){
return false;
}
Boolean reachedEdge = true;
int adjustedHeight = (int) ((v.getHeight() * v.getScaleY() - v.getHeight()) / 2.f);
int viewTop = v.getTop() - adjustedHeight;
int viewBottom = v.getBottom() + adjustedHeight;
View p = (View) v.getParent();
ViewGroup.MarginLayoutParams pLayoutParams = (ViewGroup.MarginLayoutParams) p.getLayoutParams();
int parentTop = p.getTop() - pLayoutParams.topMargin;
int parentBottom = p.getBottom() - pLayoutParams.topMargin - pLayoutParams.bottomMargin;
float newViewTop = viewTop + newTransY;
float newViewBottom = viewBottom + newTransY;
//checks if the view has reached the boundaries of its parent
if((newViewBottom < parentBottom) && (newViewTop > parentTop)){
reachedEdge = false;
}
return reachedEdge;
}
I hope that helps who ever is also tackling this problem. For full code head over to the github ripo:
https://github.com/kcochibili/android-collage-views/blob/master/libraries/collage-views/src/main/java/com/thuytrinh/android/collageviews/MultiTouchListener.java
I have a custom ListView that shows items "page by page". So I've written OnTouch method and it works perfect, now I want to write OnFling method that will realize smooth and inertial scrolling of my ListView.
The problem is the scrolling animation of smoothScrollToPosition(int position) isn't smooth, it's very fast. smoothScrollToPosition(int position, int offset, int duration) works, but my minSdk must be 8 and besides this functions place current element badly despite on offset.
This is the code of my OnFling method:
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
{
if(null == getAdapter()) return false;
boolean returnValue = false;
float pty1 = 0, pty2 = 0;
if (e1 == null || e2 == null)
return false;
pty1 = e1.getY();
pty2 = e2.getY();
if (pty1 - pty2 > swipeMinDistance && Math.abs(velocityY) > swipeThresholdVelocity)
{
float currentVelocity = Math.min(Math.abs(velocityY), Math.abs(swipeMaxVelocity));
final int shift = (int) ((currentVelocity / swipeMaxVelocity) * swipeMaxElements + 1);
if (activeItem < getAdapter().getCount() - shift - 1)
activeItem = activeItem + shift;
else
{
activeItem = getAdapter().getCount() - 1;
return false;
}
returnValue = true;
}
else if (pty2 - pty1 > swipeMinDistance && Math.abs(velocityY) > swipeThresholdVelocity)
{
float currentVelocity = Math.min(Math.abs(velocityY), Math.abs(swipeMaxVelocity));
final int shift = (int) ((currentVelocity / swipeMaxVelocity) * swipeMaxElements + 1);
if (activeItem >= shift)
activeItem = activeItem - shift;
else
{
activeItem = 0;
return false;
}
returnValue = true;
}
smoothScrollToPosition(activeItem);
return returnValue;
}
The xml content is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<konteh.example.errortest.CardsListView
android:id="#+id/cardsListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:smoothScrollbar="true"
/>
Solved! My solution is:
int pixelCount = height * shift * (isForward ? 1 : -1); // calculate approximately shift in pixels
smoothScrollBy(pixelCount, 2 * DURATION * shift);//this smooth scroll works!
postDelayed(new Runnable()
{
public void run()
{
smoothScrollBy(0, 0); // Stops the listview from overshooting.
smoothScrollToPosition(activeItem + 1);
}
},
DURATION * shift);
Maybe it's not the best solution, but it works!
I made two nested RelativeLayouts, filled one with some TextViews and made reaction on finger drag guesture.
But it works badly:
1) moving group leaves garbage traces as if background does not redraw
2) the column with leftMargin==800 does not draw
The XML layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/stator"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:id="#+id/mover"
android:background="#android:color/darker_gray"
>
</RelativeLayout>
</RelativeLayout>
The java code:
public class SymbolPadActivity extends Activity {
private RelativeLayout mover;
private RelativeLayout stator;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mover = (RelativeLayout) findViewById(R.id.mover);
RelativeLayout.LayoutParams labelParams;
TextView textView;
for(int leftMargin = 0; leftMargin<1500; leftMargin += 200) {
for(int topMargin=0; topMargin<800; topMargin += 80) {
// I can't omit these 3 lines
labelParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
labelParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
labelParams.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
labelParams.leftMargin = leftMargin;
labelParams.topMargin = topMargin;
textView = new TextView(this);
textView.setText("(" + leftMargin + "," + topMargin + ")");
mover.addView(textView, labelParams);
}
}
stator = (RelativeLayout) findViewById(R.id.stator);
stator.setOnTouchListener(new View.OnTouchListener() {
private int startleft, starttop;
private float startx, starty;
private boolean started;
#Override
public boolean onTouch(View v, MotionEvent event) {
if( event.getActionMasked() == MotionEvent.ACTION_DOWN ) {
started = true;
startx = event.getX();
starty = event.getY();
startleft = mover.getLeft();
starttop = mover.getTop();
return true;
}
else if( event.getActionMasked() == MotionEvent.ACTION_UP ) {
started = false;
startx = starty = 0;
return true;
}
else if( event.getActionMasked() == MotionEvent.ACTION_MOVE ) {
mover.setLeft( startleft + (int)(event.getX() - startx) );
mover.setTop( starttop + (int)(event.getY() - starty) );
return true;
}
else {
return false;
}
}
});
}
}
How to implement my goal correctly (in brief)?