Howdy, Stranger!
We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Categories
- All Categories 25.7K
- Announcements & Guidelines 13
- Common Questions 30
- Using Processing 22.1K
- Programming Questions 12.2K
- Questions about Code 6.4K
- How To... 4.2K
- Hello Processing 72
- GLSL / Shaders 292
- Library Questions 4K
- Hardware, Integration & Other Languages 2.7K
- Kinect 668
- Arduino 1K
- Raspberry PI 188
- Questions about Modes 2K
- Android Mode 1.3K
- JavaScript Mode 413
- Python Mode 205
- Questions about Tools 100
- Espanol 5
- Developing Processing 548
- Create & Announce Libraries 211
- Create & Announce Modes 19
- Create & Announce Tools 29
- Summer of Code 2018 93
- Rails Girls Summer of Code 2017 3
- Summer of Code 2017 49
- Summer of Code 2016 4
- Summer of Code 2015 40
- Summer of Code 2014 22
- p5.js 1.6K
- p5.js Programming Questions 947
- p5.js Library Questions 315
- p5.js Development Questions 31
- General 1.4K
- Events & Opportunities 288
- General Discussion 365
p5 app for phone/pad/laptop/desktop clients?
I are skilled in developing Processing sketches and asp.net web apps. But I am new to both P5 and writing web apps with wildly different screen-sized clients (phones, desktops, etc.). Simple content and layout, but I need to scale the size and do things like add some input buttons for touch devices that are hidden from devices with keyboards and mice.
Any suggestions for starting points greatly appreciated.
Tagged:
Answers
Do you want these buttons to be part of the sketch, meaning on canvas? Then you can conditionally add or remove them based on a width and height.
If you are about html-buttons, you can use css to show and hide elements. There is a library called modernizr that helps to identify browser's features, including if it is touch-screen.
Some css frameworks already have classes that allow to show or hide elements on different screen sizes automatically, and these are generally designed to create responsive designes. Bootstrap for example.
Are you familiar with responsive web design (see also: google devs, smashing magazine etc...).
If you can stick to adding interface elements like buttons etc. using standard HTML, rather than directly on the canvas, then a responsive approach can be used and will make your life far simpler: e.g. you can show-hide interface elements using CSS media queries.
The canvas itself can be 'responsive' - i.e. resize to best fit the target device. I'd recommend a separate init function that sets all relevant variables relative to screen size; and that is called in setup and then whenever the screen resizes (e.g. when screen orientation changes). Note that you may also need to reset the position of canvas contents on resize.
I've been experimenting with this myself recently; though not in p5. It may be a while before I get the time to do so; but at some point I'll try and document the approach I've used ;)
https://forum.Processing.org/two/discussions/tagged?Tag=windowresized()
Outstanding tips and links, thanks for the launch!