search

WebThingsIO / gateway

WebThings Gateway
http://webthings.io/gateway
Mozilla Public License 2.0
2.61k stars 336 forks source link

Help in UI changes. #2653

Open MirzaAreebBaig opened 3 years ago

MirzaAreebBaig commented 3 years ago

Hey, I'm trying to develop a new look in the Mozilla gateway dashboard by making the logo in center & some minor changes in menu with more colors even though I'm changing the CSS still it's not reflecting in the dashboard what's the possible solution for this? Even I have designed some svg to replace but still the old one's are getting loaded. I have Mozilla gateway installed on raspberry pi 3 b+. Let me know what's the correct way to implement UI changes

benfrancis commented 3 years ago

Hi @MirzaAreebBaig,

Did you install WebThings Gateway on the Raspberry Pi using the pre-built image, or by following the build instructions at https://github.com/WebThingsIO/gateway/blob/master/README.md ?

All the CSS resources get smooshed together and compacted by webpack in the final image so if you want to hack on the code you're better off creating a local checkout and building it yourself. You then need to run npm start each time you make a change to the source code, for everything to be re-built and and for your change to take effect. You can also experiment with CSS changes using your browser's developer tools.

(I tried using npm run watch yesterday which should make the development cycle faster but unfortunately doesn't seem to be working).

MirzaAreebBaig commented 3 years ago

Sure thanks for the help Is there any android application for webthings? When can we expect the new webthings release :)

mrstegeman commented 3 years ago

No Android application. Instead, the web UI serves as a PWA which you can add to your home screen.

Version 1.0 of the gateway was just released this week!

MirzaAreebBaig commented 3 years ago

Hey thanks for your reply. Can we make an webview app for webthings users using webthings logo?

mrstegeman commented 3 years ago

Well... we could, but what does that gain users over the PWA?

MirzaAreebBaig commented 3 years ago

PWA is fine no doubt. But many of the users struggle to get it right instead they go to app store or play store to find applications for there usage.

mrstegeman commented 3 years ago

Yes, that’s certainly true. We’ve discussed several times in the past creating a native mobile application but never had the time or people to do it.

@benfrancis what are your thoughts on that these days?

kgiori commented 3 years ago

I like the idea. I agree that users are used to (and find it easier) to download an "app" for smart home control and management. (I have way too many such apps just to provision stuff that I later manage using the WebThings Gateway.) Is it possible to make an iOS one too? :)

MirzaAreebBaig commented 3 years ago

Hey, Yes we can have an app which automatically connects to http://gateway.local/ & have set of options in the menu to go on rules, floorplan, settings etc & when user is not using local network they can have an option to connect to gateway through the domain name. We can have this for both iOS & Android.

benfrancis commented 3 years ago

Thanks for the suggestion @MirzaAreebBaig.

As mentioned in my blog post last week, I would definitely like to see a native mobile app for WebThings...

This could potentially:

  1. Help to streamline the setup process of a WebThings Gateway
  2. Act as a client for native web things which don’t need a gateway
  3. Help with the standardisation process by providing a user friendly reference implementation of a Web of Things client

I see little value in a native Android and iOS app which only provides a webview to wrap around the existing web interface, for which we should encourage the use of the Progressive Web App already provided by the gateway. (Properly launching a web app requires more than just wrapping it in a webview and presenting the web app that way could create usability and security problems.)

I have many more thoughts on this, but discussion of a mobile app is really off-topic for this issue and this repository. I therefore propose the creation of a new sub-module of the WebThings project with its own GitHub repository(-ies) where we can discuss the requirements, design and implementation of mobile apps for Android and iOS.

The things-browser repo was originally intended for this purpose (and had some early UI mockups), but was archived a while back. Perhaps we should create a new one (or two)?

@mrstegeman Do you agree with the creation of a new sub-module(s) and do you think it makes more sense to have a single "mobile-app" repo or separate "android-app" and "ios-app" repos?

P.S. I'm happy to volunteer to be the module owner of an Android app as I have some limited experience with Android app development, but I have no experience with iOS app development.

mrstegeman commented 3 years ago

We also had the things-controller repo for a while. I'm happy to unarchive either of these, or we could start a new repo. Doesn't matter much to me. It probably does make sense to separate out Android and iOS, unless they're going to be built from one of the cross-platform frameworks. I'm not big on mobile development, so I don't know where those stand these days.

kgiori commented 3 years ago

Hey, Yes we can have an app which automatically connects to http://gateway.local/ & have set of options in the menu to go on rules, floorplan, settings etc & when user is not using local network they can have an option to connect to gateway through the domain name. We can have this for both iOS & Android.

Is this a difficult task? Although @benfrancis does not feel the need for an "app" that is similar/same as the PWA (web view) of the gateway, I actually think this would be helpful, and an interesting experiment. I would use the iOS app. Also, it might help market the WebThings Gateway if the apps get good reviews in their respective app stores.

The other ideas for a things-browser or things-controller app are still valid, but those feel like different things than what @MirzaAreebBaig first proposed here. I quite welcome this simple gateway app viewer suggestion if it's not too much trouble. For iOS, the PWA only worked with Safari so that was annoying. Might be why @benfrancis (who uses Android I think) didn't see as much benefit as I. :)

mrstegeman commented 3 years ago

FWIW, I use the PWA on iOS and it works great. The browser is irrelevant, because the PWA lives outside of the browser itself.

kgiori commented 3 years ago

Still, it could be useful for marketing purposes and the fact that many users have an expectation/desire for an "app" from an app store. Lots of people don't know what a PWA is nor how to add to homescreen to generate the icon for one. Are there any downsides with such an experiment other than that Apple I think requires fees to be part of their developer ecosystem?

benfrancis commented 3 years ago

@mrstegeman wrote:

We also had the things-controller repo for a while.

That was a bit different, it was software designed to be the system UI for smart speakers and smart displays rather than an installable app for smartphones which is a different kettle of fish.

@kgiori wrote:

Are there any downsides with such an experiment other than that Apple I think requires fees to be part of their developer ecosystem?

There are many reasons this is a bad idea, but the main downside is that (as I understand it) you wouldn't actually be allowed to publish the apps in either the Apple App Store or Google Play Store. Last time I checked it was against their app store policies to publish an app which is just a webview around a domain not controlled by the author.

kgiori commented 3 years ago

Last time I checked it was against their app store policies to publish an app which is just a webview around a domain not controlled by the author.

Ah, I see. If that is the case, then I should spend some time on improving WebThings documentation to show how to take advantage of the "add to homescreen" PWA capability of Android and iOS. Easy for users once it's set up. Unfortunately not yet a common thing for people to do...

RitvikSardana commented 3 years ago

@MirzaAreebBaig Hey bro i am also working on changing UI of webthings Can u tell me where the css files are, I am unable to find any. Thank you in advance

benfrancis commented 3 years ago

Can u tell me where the css files are, I am unable to find any.

https://github.com/WebThingsIO/gateway/tree/master/static/css

RitvikSardana commented 3 years ago

@benfrancis I mean in the index.HTML file of the UI It is not linked to any CSS files.

mrstegeman commented 3 years ago

Per the discussions on Matrix:

The CSS files are here https://github.com/WebThingsIO/gateway/tree/master/static/css and are are inserted into the HTML using a webpack configuration at build time (https://github.com/WebThingsIO/gateway/blob/master/webpack.config.js#L119)

Assuming you are using a local build of the gateway following the instructions in the README (https://github.com/WebThingsIO/gateway/blob/master/README.md#download-and-build-gateway), if you edit one of those CSS files and run "npm start", they will get re-built and your changes will take effect.

RitvikSardana commented 3 years ago

When i am using this static/index.html file I am getting white page on my browser rather that a proper UI. I dont understand why is it happening.

mrstegeman commented 3 years ago

You shouldn't be opening that file directly.

  1. Make your changes in static/css/*.css
  2. Run npm start
  3. Open http://localhost:8080 (or whatever host you're using) in your browser
RitvikSardana commented 3 years ago

The problem is while installing gateway and the using the command npm start I am getting the following error

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! webthings-gateway@1.0.0 start: npm run build && node build/app.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the webthings-gateway@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/pi/.npm/_logs/2021-01-29T18_04_52_810Z-debug.log

P.S - i am using the gateway on my raspbian Can u help me through any social media platofrm like discord, insta whatever suits you?

mrstegeman commented 3 years ago

Please post the rest of the output from the npm start. There should be more. I'm on Matrix if you want to chat directly.

RitvikSardana commented 3 years ago

The error is of more than 100 lines bro what is matrix??

mrstegeman commented 3 years ago

I can't tell you what's going on with the error unless you post the whole thing.

https://chat.mozilla.org/#/room/#iot:mozilla.org

RitvikSardana commented 3 years ago

@mrstegeman U got any social media handels? I can tell you there

mrstegeman commented 3 years ago

No, I don't use social media.

RitvikSardana commented 3 years ago 
Error: error:0909006C:PEM routines:get_name:no start line
    at Object.createSecureContext (_tls_common.js:135:17)
    at Server (_tls_wrap.js:903:27)
    at new Server (https.js:62:14)
    at Object.createServer (https.js:85:10)
    at createHttpsServer (/home/pi/gateway/build/app.js:100:28)
    at Object.<anonymous> (/home/pi/gateway/build/app.js:77:12)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webthings-gateway@1.0.0 start: `npm run build && node build/app.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webthings-gateway@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/pi/.npm/_logs/2021-01-29T18_04_52_810Z-debug.log

Here is the error

mrstegeman commented 3 years ago

Run this and then try again:

./tools/remove-tunnel-token.sh
RitvikSardana commented 3 years ago

./tools/remove-tunnel-token.sh: line 4: sqlite3: command not found ./tools/remove-tunnel-token.sh: line 5: sqlite3: command not found Failed to restart webthings-gateway.service: Unit webthings-gateway.service not found.

RitvikSardana commented 3 years ago

i texted u on matrix