Lets create the iPhone app (and android)

---

Recently I released my first iPhone app. I also have a working android app already.

My app is build with Cordova. Its an easy way to create app’s with html, css and javascript.

Today i found https://framework7.io this is a framework which supports the iOS design and the Android material design.

Its quite easy to use. So I thought, why not create an application for pimatic this way? with cordova and framework7 it just feels like a native app.

I thought there was already a topic how to use javascript with socket connections?

Have you already started or are you asking for help?

Well, just started 30 min ago

Socket connection added, on app load my pages are showing up and saved locally.

Just need a way to create dynamically new pages.

I started developing my own app (with the tools you mentioned) and it works. Up until now it is very static and I don’t have an ios developer account. So every 7 days I need to renew my app.

That’s my dashboard for my heating. Two rooms, “Küche” (kitchen) got 2 thermostats but it looks like one. Additionally there is a temperature sensor that is display in the circle. If a setpoint is set the circle color changes to orange.

The single devices know two 2 states in general:

• eco (see green leaf): temperature is above set point, no further heating needed
• heating (see orange background): heaters will heat until setpoint is reached

@leopoldkoenig That looks nice!

Did my “proof of concept”.

https://www.youtube.com/watch?v=K1a9tTst2rQ

How dit you communicate with pimatic? Can you post a simple example?

EDIT: https://pimatic.org/guide/api/ if anyone have the same question.

@sweebee nice one

@schmucke you can use the REST API.

I’m working in Javascript with websockets. Setting a new setpoint for my heating looks like that:

    // update variables
    socket.emit('call', {
      id: 'new-heating-setpoint',
      action: 'getVariableByName',
      params: {
        name: 'kitchen-heating-setpoint'
      }
    });
    
    // update new setpoint in UI
    socket.on('callResult', function(data){
      if(data.id === 'new-heating-setpoint') {
        //console.warn(data); // Debugging
        switch(data.result.variable.name) {
                
            case "kitchen-heating-setpoint":
                kitchen_heating_setpoint = data.result.variable.value;
            break;
                
            case "childs-room-heating-setpoint":
                childs_room_heating_setpoint = data.result.variable.value;
            break;
                
        }
      }
    }); 

Great! If you need alpha tester. Iam ready!

Not to discourage development but i am Just curious what advantages one could expect using An app instead of the responsive webinterface?

@Stokstaart good question.

Well, first of all speed. A native app starts much and much quicker and can run in the background.

Push notifications, you can integrate this. Also other native stuff like direct play of a camera stream. Creating widgets.

I use lightning as browser instead of Chrome. Lightning is indeed what its names mentions: fast, in starting up and in browsing.
The slowest part is the authorization part to pimatic. I don’t think that will be different for a native app.

I already tried the same things using appinventor which is another android RAD tool. One I have already used to create a number of apps.

Got it running on my iPhone, however I’m a bit stuck at creating the groups on the pages.

Also Its loading all the devices on the fly when entering a page. So could be a bit slow. Somehow I need to create all the pages with groups and devices on load of the app.

https://www.youtube.com/watch?v=4fgtFXS1G3w

Github repo: https://github.com/sweebee/pimatic-app

Thanks for sharing.
(Already since Yesterday I can’t download the Android Version 24 SDK. Not from one single computer. Something wrong on the google servers I suppose)

@sweebee said in Lets create the iPhone app (and android):

Got it running on my iPhone, however I’m a bit stuck at creating the groups on the pages.

Also Its loading all the devices on the fly when entering a page. So could be a bit slow. Somehow I need to create all the pages with groups and devices on load of the app.

https://www.youtube.com/watch?v=4fgtFXS1G3w

Github repo: https://github.com/sweebee/pimatic-app

Well, it’s still not native as it is contained in a webview but it feels like a native app, thanks to framework7!
I like the development

@Stokstaart said in Lets create the iPhone app (and android):

Not to discourage development but i am Just curious what advantages one could expect using An app instead of the responsive webinterface?

I just can speak for myself, the GUI is pragmatic and useful but it could look nicer.

With some changes I could also build @sweebee 's app but in my case for android.

Of course I had to change the index.html to adapt to the android material css but it works.

@sweebee
A change that I think is necessary is in the index.html, line 80.
I downloaded jquery.min-3.1.1.min.js and put it in the js folder and changed "https://wiebenieuwenhuis.nl/fotografie/wp-content/themes/wiebe/js/jquery.min.js" to "js/jquery.min-3.1.1.js"

@Harry-van-der-Wolf yea that’s true, I was to lazy to include the jquery locally, and forgot to add it later.

Somehow the Back option is missing in the android app on the pages. I have already been looking at it but what creates this “< BACK” option?

@Harry-van-der-Wolf it’s here https://github.com/sweebee/pimatic-app/blob/master/www/devices.html

Yeah. But it doesn’t show in the android webview. I will have a look tomorrow.

@sweebee you said, an advantage would be speed, but as you are using cordova the app isn’t really native. That’s also just a native wrapper for a web view. I don’t really see the advantage. Maybe in the case of android, but for me HomeKit in iOS is sufficient.