I have implemented User Configurable GCode Buttons

[ben.ro...@gmail.com]

Hi All,

Given I got no replies about how to log feature requests, I looked into implementing a new feature myself, and have now added user defined buttons. Configured from the front end, and stored on the server. If multiple web browsers are accessing the server at the same time, any changes are automatically pushed to the web browsers in real time.

Here is a screen shot of the buttons (only the first is configured)

And a screen shot of configuring a button (press the down arrow)

As a bonus the javascript code I wrote allows you to add static buttons to the HTML without any extra code (you just use the data selement of the button to embed the gcode you want to send). So I have used that for a Home and Unlock button up top.

If anybody is interested in the code / want to roll into the next release, let me know and I can send it to you. I have made it super simple, it a javascript file and 1 line to add to server.js for the server side, and a javascript file, 1 line to add to main.js and a bit of HTML for the buttons on the client side (within the ./i/ folder). In this instance I added 4 buttons, but the code works with as many buttons as you put in the HTML, no code changes needed.

Regards

Ben

[Peter van der Walt (Gmail)]

Use github issues to manage enhancement requests. 

Basically

1. Sign up for a free github account
2. Fork the project
3. Develop the feature (Open source is awesome and i like what you did)  and check the changes into your repo with a commit.
4. Git push your commit to your repo
5. Submit a Pull request on Git of your proposed changes,  back to Andrew - he can then choose to merge (accept) you development back into the source 

--
You received this message because you are subscribed to the Google Groups "XYZBots Support for GRBLWeb and RepRapWeb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xyzbots-suppo...@googlegroups.com.
To post to this group, send email to xyzbots...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/xyzbots-support/9c3934b0-74b6-4e96-ac71-6e506093fe18%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ben.ro...@gmail.com]

On Thursday, June 11, 2015 at 6:57:11 PM UTC+1, Peter van der Walt wrote:

Use github issues to manage enhancement requests. 

Basically

1. Sign up for a free github account
2. Fork the project
3. Develop the feature (Open source is awesome and i like what you did)  and check the changes into your repo with a commit.
4. Git push your commit to your repo
5. Submit a Pull request on Git of your proposed changes,  back to Andrew - he can then choose to merge (accept) you development back into the source 

Ok, so I have done 1 - 4 above. But a question about 5 and general git hub etiquette first (never used it before). Once I got the new fork it had some additional changes in for web cams. I was using the PI 1 build as I don't have a  PI 2 :-)

When I installed this version I noticed in my browser (safari on mac, other browsers could be different) that the box to enter the Gcode in was much smaller and floating to the right, instead of being full width as before. Looking at the code the webcam display gets auto hidden if no cam exists. So I figured that the GCode entry should really use all the space it has (like it did on the version I was using) if the web cam was not there. I force it to display the web cam for testing so I could see what happened, and that also seemed to have some alignment issues.

So I fixed those so that the GCode entry box aligns correctly to the right of the webcam display, and sizes its self to the width of the browser correctly.

Should I send a pull request for the commit separately to the one for the user buttons, or will one pull request give Andrew the option of accepting individual changes?

[ben.ro...@gmail.com]

I had a look at github and it seems you can only create a pull request for the all the changes, so I have done it.

The etiquette questions still stands though, should I have done a pull request for the display bug fix before committing the new features, and then done a separate request for that one?

Just for reference, if anybody wants to see the code its at https://github.com/bensuffolk/grblweb

Regards

Ben

[Andrew Hodel]

When you create a pull request it will track all changes you make prior to the point of merging, so you can have multiple changes or feature additions by just creating multiple commits.

I'll check it out.

Andrew

--

You received this message because you are subscribed to the Google Groups "XYZBots Support for GRBLWeb and RepRapWeb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xyzbots-suppo...@googlegroups.com.
To post to this group, send email to xyzbots...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/xyzbots-support/d158bc46-3b4f-432d-9548-255b2e393c56%40googlegroups.com.

[Gary Rantz]

Ben,

Is it possible to just copy the particular files you added/modified into an existing configuration of grrblweb or does it require a complete install?  I'd love to add some custom buttons to my setup, but I installed the XYZBOTS install for the Raspberry Pi2 and obviously, that doesn't have the updates available that you've created.  Which, by the way, I think are great!

Thanks,

Gary

[Andrew Hodel]

Just ssh to the pi, git clone his repo to another directory then cp newfilerepo/file to reprapweb/file for each of the changed files.

Andrew

--

You received this message because you are subscribed to the Google Groups "XYZBots Support for GRBLWeb and RepRapWeb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to xyzbots-suppo...@googlegroups.com.
To post to this group, send email to xyzbots...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/xyzbots-support/197b5803-8c0f-4593-8091-03590778c3bb%40googlegroups.com.

[Gary Rantz]

Perfect!  Thanks Andrew!  I'm doing this now.

Gary

[Gary Rantz]

Wait!  reprapweb/file or grblweb/file?

[bigbr...@gmail.com]

Hi Ben,

I'm interested in adding this to GRBLWeb on my RPI.  Could I please get the code for this please and if you have any instructions on how to get it in to the existing system. 

Manually telling my CNC to unlock and home is becoming a nuisance, not to mention trying to configure the work location and telling it to go there.

BTW do you perhaps know how I can add 0.1 and/or other numbers to the distance drop down?  If I change it under index.html is that sufficient or do I have to edit it somewhere else as well.

Thanks,

Marco

[Ben Suffolk]

Hi Marco,

The code is in a forked repository.

https://github.com/bensuffolk/grblweb

From memory, yes just change the values in the HTML to add a different distance.

Regards

Ben

[bigbr...@gmail.com]

Thanks Ben,

I already modified index.html to have 0.025, 0.05, 0.1, and 0.2 added and it worked.  I'm shocked it worked the first time I tried it.

I'll give your code in the repository a whirl.

Thanks again,

Marco

[bigbr...@gmail.com]

Hi Ben,

I got userButtons.js in /grblweb, userButton.js and userButton.css in /grblweb/i .  I had a look at all the other files in the repository,

I sorry but I couldn't figure out where or how these files are referenced so that it brings up the User Configurable Controls.

Thanks,

Marco

[Ben Suffolk]

There is a change to the index.html page, and the server.js, it should make sense if you have a look in them, but in brief:

server.js  you need to add this near the top :-

// Enable user configurable buttons

require('./userButtons')(io);

And in the index.html there is a little more as you need to add the actual buttons as well

<script src="userButton.js"></script>

And the buttons (as many as you want)

 <div class="btn-group btn-user" role="group">

  <button type="button" id="btn-user-1" class="btn btn-default btn-gcode" style="float: left; width: 150px;">User 1</button>

  <div class="btn-group" role="group">

   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

    <span class="caret"></span>

   </button>

   <div class="dropdown-menu">

    <input type="text" class="form-control" name="title" placeholder="User 1">

    <textarea rows=4 placeholder="GCode"></textarea>

   </div>

  </div>

 </div>

Ben

[bigbr...@gmail.com]

Hi Ben,

I had a look at the repository again, there is nothing like that in server.js or index.html.

Those two files appear to be identical to the files on the latest grblweb iso.

I tried putting the following code into server.js and rebooted, which broke the whole thing, nothing worked i just got webpage not found.

// Enable user configurable buttons
require('./userButtons')(io);

A configurable user button did appear though after I commented out the line from server.js and rebooted.

I'm by no means a Java or HTML pro, I'd say I know just enough to be dangerous ;)

Is there somewhere I can get the server.js and index.html files you used for this?  It would be easier for me to see where things come from and where they are going to make the modifications.

Thanks again for the help,

Marco