Start a new topic

crop feature, how does it work because im lost....

ok im at my wits end again with this damn compiler and almost useless features.


now for me when i think of cropping an image that involves trimming of areas/excess that you dont want but how the heck does it get used with nextion editor for dealing with rounded button images??


i have my images all adjusted for size and background removed but as like many others i will always end up with black(or whatever) color corners that look unsightly.


the "tutorials" that itead famously provide either in video or limited text/graphic formats really dont cover enough in how that particular feature works.


so how in the hell am i supposed to use that feature if i cant really find a good visual and explained examples.


the only time i do find anything that mentions crop their is yet again no real explananation of how to use it correctly, i have tried using it but all it does is block out any buttons that i use it with (both visually and functionally) and doesnt display anything usefull and yet again i cant find any usefull information to use this feature properly, FFS!! get it together itead.


1 person likes this idea

There are many examples floating throughout these threads.  Many topics on cropping.  Failure to want to look or perhaps use the SEARCH bar above, well ...um, yeah.


iTead provides level 2 support to ensure hardware is working, and does not provide software support (although they did provide an Arduino Library).  Example with crop can be found in Demos, check FAQ, Announcements, Blog - by following the links, or perhaps with the SEARCH bar above.


yes patrick, i did use the search feature, did you ever consider that some people need more than a single line or two that mentions about the feature in limited detail and that some people need a good visual description to show somethings use.


the itead instructions just mention it in a line or two with no more real information about how to use it, and searching doesnt give any better results to shed more light on it.


as for the demos i have looked at many of those and yet again they dont give enough usefull info for people like me who need good visual examples of the function and the differences of before and after using it to show how it works.


"Many topics on cropping.  Failure to want to look or perhaps use the SEARCH bar above, well ...um, yeah." 


maybe you should get down of your high horse their before you fall !!!



tony


1 person likes this

Nah, it's not all that Tony.


You state: "the "tutorials" that itead famously provide ...", while in the FAQs that is over and above and not within iTeads Service Level Agreement.  And before you start slamming me, I'd read a few threads before you start thinking I am the bad guy.  I think that I contribute a lot of details to the discussions on this board, providing chapters and actually creating HMI files that have been specific for the person asking a question, while some of the other people drop about 16-25 words.


It's just that I already know there are some HMI in the threads with some good discussions on the hows and whys and what to try and tweak and ... yeah.  So, I am not sure it is a "high horse" when I question if it should be done again if it is already there.  A few other good people on this board have put time and effort into explanations and provided their example HMIs.  Sometimes it takes some digging, and along the way if you read the thread through - you pick up a lot of tid-bits.


So here is the skinny on cropping.  You have to have a image that will be a "background" for the crop to  pull from.  If my crop component is located at xy (10,10) and is (100,40) in size, it is going to pull that rectangle (10,10,110,50) and only that rectangle from your "background" picture and that is what is displayed in your crop.  If using a crop component you have the attribute .picc that is set to the number of the Picture you are going to use as the "background".   You can even set a command up q0.picc=2 saying that it will use (starting 0,1,2,3,4) Picture 2.


Soeren was working on a project with Sliders (like on a mixing board) that uses cropping, and that discussion and his HMI is in This Thread


So to crop is basically cut the background pic out at your position on the screen and fill in your component with that background image.  So what happens when I have a 320x240 screen and I use a 20x20 picture ... there was nothing much for it to pull forward.


Rounded buttons, Gerhard recently put something up with an HMI on rounded buttons.  I am sure it was less than two weeks ago - just that I am not going to search for where that one was.


The big issue with demos is that almost everyone has their own host MCU and are using various programming techniques to make their solutions work.  So it is hard to put one demo together in JavaScript, and then all the other languages (I prefer Kylix), others yet, Basic, C++, Arduino ... etc.  And since in programming there are so many ways to approach the issues, it becomes senseless.  If 4 out of 200 programmers ever agreed on a method - you now have a majority consensus.


But I will tell you that those on this board that have a real handle on the designing did so before demos, it was through popping a component on the screen, moving it, trying it, changing values incrementally and reading and discussion what others have written.  I will refer you back to Soeren's HMI in the link above, where the slider knob is not - is cropping occurring - he already has it made, just download, experiment, and observe the behaviour.


OH, and there is no transparency other than in cropping and fonts, and that is limited to allowing a background to bleed through - not making the edges of a button transparent.  But Gerhard's round buttons as his background and using hotspots not only saves space in Flash, but even runs smoother.  I could fashion it as a font, you'd only get a single color for the button (which could be changed by programming text color changes, but the background would bleed through where the button wasn't.  Gerhard's buttons were nicer having gradients and shading - get a good graphics program.


And that is somewhat the skinny on cropping.  Everyone has their ways they accomplish what they want, and few are ever the same.


Lastly, "FFS!! get it together itead" ... it ain't their mandate.  Never was.




and i have downloaded countless .hmi files that mention crop that are provided with the "tutorials" to open them in the editor and still not be any clearer on what they have done using that feature, and right now im not looking for a host mcu specific example, just one that uses what is provided/available with the display as standalone to get some progress.


"So here is the skinny on cropping.  You have to have a image that will be a "background" for the crop to  pull from.  If my crop component is located at xy (10,10) and is (100,40) in size, it is going to pull that rectangle (10,10,110,50) and only that rectangle from your "background" picture and that is what is displayed in your crop.  If using a crop component you have the attribute .picc that is set to the number of the Picture you are going to use as the "background".   You can even set a command up q0.picc=2 saying that it will use (starting 0,1,2,3,4) Picture 2."


as great as it is to provide this written example again as i said it doesnt really help to clear it up as i need visual components to follow as well as written text, this is why this is so frustrating to make progress as i have to spend more time trying to find suitable information than i do trying to make progress with the display on certain areas.

Yeah ... so go ahead and 


1) Download Soeren's FaderTest.HMI.  I linked to the thread above, its about 1/2 down the thread.

2) Open in up in the Nextion Editor. Then we both have it opened.

3) You will notice in the picture section, Picture1 is his full screen "background"

4) This was set in the Page0 component by setting the .pic attribute to 1 (double click the 1 right of the word pic in the Attribute section for page0 - and a list of all the pics come up.  Select #1 and click ok).

5) Checking his pictures, only one full screen pic, so pic #1 is the only one suitable for cropping

6) Locate the slider h3 (fourth from left) and click on it.

7) It the attribute section notice that the .sta is set to crop image.

8) change .sta to solid color

9) change .sta to image

10) change the .sta back to crop image.


In step 8, there is no background used, no cropping, and behind the slider is solid green

In step 9, there you used the image pic1, but as you see it was solid

In step 10 - now that is cropping.  The position of the h3 slider rectangle on page0 matching the same location and rectangle in pic1 and that portion of the picture is cropped from the "background" to fill in the missing spots for the h3 slider.


Login or Signup to post a comment