Customize your BCS web pages

[missing_link]

Any update on when some of this might get put into the BCS?

Linc

[jIMBOGeorge]

Hi Jon

Noob question. What programming language are you using to make you own interface??

[Baron Ken]

Jon,
You are using your own html page for the main control page, correct? I'm trying that, but I'm running into cross-domain XHR (XmlHttpRequest) problems (here at work). I haven't tried it at home on my local network yet.

I like the way you've laid out your display/timers/outputs/etc. Any updates, or still running with the way you have it in your last pic above?

I'm wanting to streamline my display page to only show outputs, timers, etc. that I actually use for brewing and remove all the other elements (DINs, etc.).
My guess is that before long, everything will just be a widget and be placeable on the HMI wherever I want.

[JonW]

Ken,

Yes, I am using my own index.html. Honestly, I dropped documenting this project because the new HMI was coming out and I thought that would be a lot easier for people to use for customization (which it is). However, I am not using the HMI builder as it is still not as flexible as what I am doing.

In a nutshell, I'm using a proxy (Fiddler) in between my browser and the BCS and doing file substitution on the fly. I use a modifed version of index.html, control.js and a couple additonal files for my graphics.

Since there are several users here who are jumping into the custom javascript stuff head-first, I can post up the mini-tutorial that I made if you would find it useful.

Below is my current index screen (it is normally 1920x1080, but reduced to 1024x576 here for visibility). Note that it is optimized for touch control. A simple touch of any of the "Select Displayed Process" buttons changes the active display to show the timers, setpoints and exit conditions for that process. Also, a simple touch of one of the "Select Active Process State" buttons changes the displayed process to that state. (Because of this, I don't use any of the web user inputs).

Click this link for the full sized image: http://www.surfcitybrewing.com/images/b ... 0x1080.png

(image below is distorted due to scaling to show the full image!)

[Baron Ken]

In a nutshell, I'm using a proxy (Fiddler) in between my browser and the BCS and doing file substitution on the fly. I use a modifed version of index.html, control.js and a couple additonal files for my graphics.

Funny, as I was researching about the XHR problems, I came across Fiddler. I haven't tried it yet.

Since there are several users here who are jumping into the custom javascript stuff head-first, I can post up the mini-tutorial that I made if you would find it useful.

Much appreciated if you would share that.

Below is my current index screen (it is normally 1920x1080, but reduced to 1024x576 here for visibility). Note that it is optimized for touch control. A simple touch of any of the "Select Displayed Process" buttons changes the active display to show the timers, setpoints and exit conditions for that process. Also, a simple touch of one of the "Select Active Process State" buttons changes the displayed process to that state. (Because of this, I don't use any of the web user inputs).

So why have the web user inputs on there at all?
I didn't realize that the win buttons were basically just doing a force state jump (dictated by the exit condition) for me until your post above, duh! You are providing me with all kinds of insight, thanks. I use a win button in some cases though to go from one process to the next. However, if I were to make one of the the states a 'go to next process', I could eliminate the win buttons as well.

[Baron Ken]

Since there are several users here who are jumping into the custom javascript stuff head-first, I can post up the mini-tutorial that I made if you would find it useful.

Much appreciated if you would share that.

Jon,
Any update on this? If it includes how to set up Fiddler, that would be great.

Thanks.

[JonW]

Here is a download file that includes my customized versions of the js and html files to get the customized UI. The included PDF explains some of what is being done, but it is a very rough document. Likewise, some of the sample files are not as polished as I'd like them to be so some of the HTML elements don't line up perfect.

File download: http://www.surfcitybrewing.com/download ... s-JonW.rar

[Baron Ken]

Jon,
Thanks, that was helpful. I'm on a Mac so I had to try to find an alternative to Fiddler. I tried charlesproxy and that did what I wanted, but it is $50 (I just did the trial). Since I run my brewday from my iPad, I would have to set up my Mac to be a proxy for the iPad, etc to get it to serve up the proper pages for/from the BCS, and I'm not up to messing with all of that right now, heh. I will before long though as I at the very least want a different index.html page that only shows what I want on it. I'm having good luck getting everything else done by adding/overloading functions in the external.js file.

Btw, if you haven't seen my post here (http://forum.embeddedcc.com/viewtopic.p ... =507#p2964), it's about adding setpoint indicators on your gauges. IMO, they look nifty and lets you know at a glance what your setpoints are.

[JonW]

FYI - I'm now running my BCS through my IIS web server without having to use the Fiddler proxy that I was previously using. This accomplishes the same type of page substitution, but it makes it so I can access my customized BCS through any browser anywhere because the IIS server is doing the work. This also lets you embed the whole BCS system as a path under your top-level domain.

To make this work, you need IIS and two IIS plug-ins: ARR (Application Request Routing) and URL ReWrite.

If you want to see my remote BCS system, you can log in to it. I use a large touchscreen monitor, so the page is 1920x1080. You may need to adjust your zoom to get the whole screen to fit. If you are interested in my processes and states, you can save those as well. Note the "Fermentation" process is not being used right now as I am doing that as part of the "Refrigeration" process.

Site URL: http://www.SurfCityBrewing.com/bcs/index.html
Username: admin
Password: observer

[Baron Ken]

Jon,
Looks good. Since you modify your control.js (and/or use external.js), you could easily add the temp gauge setpoint indicators (with color!) that I added to my external.js