Hi folks,
I'm experimenting with the Node-RED dashboard on a small chinese LCD touch screen (attached to a Raspberry Pi Zero Wifi). It is working fine except from 1 problem: frequently white rectangles appear on top of my dashboard:
In this case:
- I enter numbers "21" via buttons that I show on my 'keypad' dashboard.
- Those numbers "21" are being displayed in the upper side of the screen.
- Then I (accidentally) touch the "1" (in the upper side of the screen), so the "1" become 'selected.
- From then on the large white rectangles appear whenever I touch the screen.
Since the dashboard is running on Chromium (on the RPI Zero), I could easily do remote debugging from my Windows portable. But in Chrome on my Windows portable I don't see the white artifacts (and at the same moment they are visible on the touch screen that I'm debugging...):
Since the number "1" is displayed inside the white rectangle, I assume that it is somehow related with that... So I changed the background color of the numbers paragraph yellow, but the rectangle still stays white. *** I get the impression that the grey selection rectangle (see around "1" in the emulator) somehow gets enlarged on the touch screen ...**** But I'm just guessing ...
To make sure the numbers cannot be selected, I added some CSS to that html paragraph:
/* See https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable */
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
That seems to work, but now I get white rectangles from time to time when I click the buttons...
Since I don't get problem in the emulator, I have no clue what might be causing this. Is it Chromium, is it AngularJs, is it the touchscreen, is it ...?
Does anybody can provide me some tips of things I could try? Because I cannot make the buttons 'unselectable' as you might understand ....
Getting nuts of this kind of problems
Thanks !!!
Bart