A random thought
How can you figure out a dynamic ui layout based on sensor data that has been just now added, where previous the interface had no idea from?
113 Replies
i think you'll need to add more context, like what ui, what sensor, why responsive design is not enough...
what do you want to show from the sensor? and how?
Like for school my team are gonna build a modular board where you can click in your sensors that will automatically be connected to the Arduino. Using i2cscanner library I can apparently dynamically detect new sensors being added and display the name on the interface. Each sensor would get it's own detail page showcase their own values in a nice way (not just plain text). Since every sensor has it's own unique data that can be displayed several ways some of them are more appropriate then others. So how can be UI be dynamically build nicely when adding these new sensors. For the assignment we gonna fully configure 2 sensors and 2 actuators (these are hard requirements) and display the data properly. As extra it would be nice to somehow allow the user add random sensors to it and the data gets displayed properly (potentially with an editor they could then use the values to make actual changes to the behaviour of the Arduino themselves).
I've been working with web components for the past month, so when you have a hammer everything looks like a nail...
Still needs more context, but would something like that work
^ and I'm assuming you want very specific layouts for each type; if you just want some parts of your layout to change then I'd make each of those parts a component and pass in the data from your Arduino and display based off type like I'm doing above
I don't think these sensor has the types, but I can add a add sensor button where they can add the newly added sensors they can select the autogenerated one. This would go to an edit page where they could add a type to the various input values and even add a thumbnail voor the image.
basically, you want something like an home assistant dashboard?
In a way.
Definitly a dashboard.
Idk how else to explain it.
and how do you want to display the information?
Some data make sense as a graph others as a number, some as a switch.
other data as a gauge, other as multiple formats
Uhu, that's the unpredictable part. We don't know what sensors they would be adding. One why to solve it is like vince figure out the type and then display the data according to that type.
it's not really
if you have a list of sensor and capabilities, then each capability has different ways of being represented, then you are set
for example, a temperature sensor that can also report relative humidity
you can show the temperature and the humidity in a percentage
but a sensor that doesn't have humidity just doesn't show humidity
it also depends on how granular you want to be
or you can do the inverse: you can show a temperature then pick sensors capable of reporting temperatures
But the thing is we don't know what that list is, we can have a list of the sensors that we will do for the assignment specifically but what if the users adds a sensor that we don't know about?
you can either request the sensor it's capabilities or you manually assign them based on a list you have
Will the i2cscanner automatically receive the data with their types?
that's a good question
Ik it does the names or at least an id thing that you can use with a lookup from a quick research. I will watch a video about it at some point. If that's the case we gotta make several components for several types and then display that component when that type is requested.
i've never tried to do a lot with i2c
most i did was to connect a 4-pin display to a raspberry pi pico
Did you even needed i2c for that? Xd
i think it is i2c
maybe it was spi
To my understanding i2c loops over your pins to detect how many sensors are connected with like ID or something.
I need to get myself more familiar to what i2c can do.
If I'm understanding correctly why don't you make a 'map' of types to each id?
not all sensor types are equal
for example, temperature sensors sometimes can give you relative humidity or air pressure
Can't you just look at the type of data it gives you then and map it based off that?
it's not like you get a binary chunk that says "temperature"
if (sensorData.hasOwnProperty("humidity")
Ohh yea that's interesting
I have no idea about any of this stuff I'm just spitballing from JS world lolfrom my understanding, some sensors work by sending a byte and you get data
or a few bytes, depends
Can JS work at the byte level?
Or would you even want to work at the byte level with JS?
yeah with bitwise operations
I know there's bit shifting but I've never touched that
That sounds like a chatGPT operation to me 😄
also, not all sensors send the data the same way
that sounds like a fun project honestly
i love doing that stuff, like the organizational parts to map the code cleanly
it does
Receiving the data from Arduino gonna be with C for Arduino. The. The processed data will be send via a broker so I can receive it with js to display it in the interface.
Ye, I love fully dynamic systems.
Are you making the broker?
Prolly ye a local one, apparently it's not hard to setup. A classmate did it for us for an class assignment when we worked together (different person),he did it in like a couple minutes.
Cuz it's gotta be usable locally without wifi.
Oh nice so sounds pretty easy from a mapping perspective
So it's just mapping that data correctly in the broker to be nicely ingestible via JS
That depends on what i2c actually returns.
I figured the broker would be robust enough to not be a headache 😭
I actually only know about i2c from a question I asked to Gemini haha.
haha yea I haven't heard abt it til now
If the i2c returns the data with it's types and the sensor name then it's just about sendin the data via the broker and using a switch case like you showed.
If it doesnt returns the data with it's types then it's gonna be more difficult I think.
This project sounds both as really easy but also insanely difficult at the same time lmao.
But me and my classmate are confident in it.
or just have a way to also manually assign capabilities to the sensor
We will also have to design the main board that will house an Arduino and maybe some click system to connect extra boards to it etc.
Apparently the i2cscanner returns the i2c addresses, I am guessing these are the onces from each sensor that are connected?
technically, no
Wdym?
that it simply shows the address of something in the bus
Right, but it's only things that are connected physically to the Arduino right?
yes
but it can be a whole sensor or part of a sensor
for example, a temperature sensor could have 2 addresses - one for temperature, one for humidity
Ah, actually that's nicer.
it depends on the sensor
some may require commands, some may have 2 different addresses
you have to read the documentation
https://learn.adafruit.com/i2c-addresses/the-list
I looked and found this list.
I2C Addresses and Troublesome Chips
I2C addresses from 0x00 to 0x7F (inclusive). Flaky I2C devices.
@vince 🙂
that's mostly a list of products that adafruit sells, which is understandable
We have to buy our sensors anyways still we don't have the onces that we need. Except for the ultrasonic sensor.
According to an official Arduino server mod adafruit doesnt make ics.
which is exactly what i didn't say
Ah ig they don't make em but they sell them. Ig I just translated that if I where to buy that module somewhere else that it wouldnt work.
no, it's just products that they have
they do assemble some, somehow
they have their own brands of stuffs
But I didn't had to buy my sensors via them for the addresses to be same right? Like if the list has an address for an ultrasonic sensor it's gonna be the same for the one I already have?
i don't know
check the manufacturers' site, not a """"random"""" list of sensors from a specific vendor
We prolly gonna be using NFC tags and configure the IDs ourselves. Gonna make housings for the sensors seperatly that can be connected to the board.
which type of nfc tags?
No idea yet, was talking to someone who gave that idea. Cuz NFT tags don't use power and send only IDs.
yeah, and then what do you do?
Nothing yet? I am just thinkering around.
and you had any ideas for it?
can you store anything in those?
In the NFT tags? Me was told it cant send any data only IDs which I actually think is weird. Cuz headphone and smartphones have NFC for audio.
Need to dive deeper into it.
it depends on the tag
the cheapest of the cheap tags only send an id, others can send some data
If I can send the data over with NFC I can make it so it can use just one wire to the board for power.
Which possibly simplifies a lot of things.
remember that nfc doesn't send much data, and not for a long distance
im talking about 1cm or so
Ye ik, but it's all relatively close to each other anyways. NFC can do further then 1cm tho. But jg that depends again on the NFC tag itself.
I think NFC/bleutooth is the way to go.
nfc, if you can write to it, is amazing for 1 thing: storing configs
I mean that's all it gotta do for the project no?
Actually doing calculations etc is happening via the dashboard. Arduino is just gonna send over the data in a consistent manner.
If NFC doesnt work I can use a bleutooth module.
Me and my teammate can*
there's probably easier, like matter, zigbee or others
or thread
They do similar?
Sending data wirelessly?
similar to bluetooth
Ah gotcha, ye we definitly gonna look into what's gonna be easiest to use and what makes sense for the product.
I still think the sensor needs to be physically connected to the module that will do the data transfers and each sensor has different amount of pins that do different things.
That's the trickiest part.
that's the thing: it can have it's own power
Ye but having a battery for each sensor is gonna get expensive fast (I think), I'd rather have one centralized bigger battery.
not at all
cr2032 are cheap as fuck
Oh those batteries.
or even AA or AAA batteries
How long do they laste tho? Also are they rechargable?
they last months and years, and they may or may not be rechargable
it depends on the battery, battery quality and how much power you use
Hmm, honestly having wirelessly connected sensor modules sounds a lot cooler.
If we gonna be using batteries I want them to be regarchable less e-waste and all.
They should be easy to remove but also not by accident.
I am liking where this is going
you can look for cr2032 batteries that are rechargable
you can use small and expensive lithium batteries
you can also use 18650 batteries
Honestly ye we might, they're more expensive but we can leave an opening for a usb-c cable to be plugged in the housing if needed.
Then they don't have to reassmble there things potentially in order to charge the sensors.
you will need to buy charger circuits
We will have to make a list of things we need anyways.
Motors, camera sensor, wireless module (still need to be discussed what type), lamps, batteries, charger circuits.
Also whatever is discussed here isn't final, still need to be talked to with my teammate.
We have like 2 months-ish
there's a lot of alternatives for batteries
you can also do what some people do: find disposable vapes and take the batteries off of it
We can 3D model housings for like 2 pins 3 pins 4 pins, if you have a sensor for 4 pins you 3D print a housing for 4 pins and you would be able to click the sensor in it or something.
Each of the housings will have some type of wireless data transfer module, a battery (preferably small and/or rechargable) and a resistor if needed.
Some of the sensors/actuators etc, are square some of them rectangle the pins aren't always on the same place.
basically like lego for sensors?
There will be connection points for lego/knex whatever you want so in a way yes, lego for sensors.
We cant make a housing for each sensor individually, but we can potentially design a base for it and then the surroundings can be custom made specifically for the needs for the sensors.
I really hope this works out lol
do you have to do a presentation later on?
Ye, gotta be like a kickstarter type thing.
that is interesting
I was wondering, we have to make a webinterface for it using a broker. We already decided that we gonna build a dashboard for it not an actual website. If we store the data from each sensor/actuators in objects per sensor/actuator and make them globally available, we could embed a code editor from a package and users can access the values through code via that. So they can read/write code to the correct sensors/actuators.
if you can make it work with js or python, would probably be really cool
Definitly gonna be js.
basically, you want to write something that lets people control servos and stuff from the web ui?
Ye, if I understand the word "servos" correctly. Basically having it's own development platform for IoTers to build on.
Which is gonna be easier I think then using Arduino IDE since their you need to figure out what pin the sensor is connected to etc.
Here it will already know.
"servos" means "servo motors"
We gonna be using motors for the car.
We are sticking to the grove system
Our cost for the project €43,11
that's not bad at all
Gonna be closer to 53,09 but still alright.
We miscounted xd.
Not including the 3D printed parts, but we can use the onces from school for free.
that is still a pretty nice price
Did you used react? Idk if you know a component library for charts that we could use?
Like line chart etc.
I can see some online but idk if there is a "go-to" one.
i've only used it for wordpress' shitty ui on the admin page
i can't help with that, and you should make a different post for that
It's for the same project tho but ig I just should make a showcase thread in the forum.
i mean, a new post in #help to ask about a component library with charts
Yikes forgot about shipping fees, is 69,32 without the motors (nice tho xd).