Skip to content

The drag n drop element for ChiliPeppr. There's no real UI to this widget, thus it's considered an element.

Notifications You must be signed in to change notification settings

bastian-f/elem-dragdrop

 
 

Repository files navigation

com-chilipeppr-elem-dragdrop

An element that presents a drag and drop icon that allows files to be dragged onto it. A pubsub event called /com-chilipeppr-elem-dragdrop/ondropped is published when the drop is complete. The contents of the file are passed in the pubsub call so different widgets/elements can consume the contents of the file.

alt text

ChiliPeppr Element / Drag Drop

All ChiliPeppr widgets/elements are defined using cpdefine() which is a method that mimics require.js. Each defined object must have a unique ID so it does not conflict with other ChiliPeppr widgets.

Item Value
ID com-chilipeppr-elem-dragdrop
Name Element / Drag Drop
Description An element that presents a drag and drop icon that allows files to be dragged onto it. A pubsub event called /com-chilipeppr-elem-dragdrop/ondropped is published when the drop is complete. The contents of the file are passed in the pubsub call so different widgets/elements can consume the contents of the file.
chilipeppr.load() URL http://raw.githubusercontent.com/bastian-f/elem-dragdrop/master/auto-generated-widget.html
Edit URL http://ide.c9.io/bastianf/chili-elem-dragdrop
Github URL http://github.com/bastian-f/elem-dragdrop
Test URL https://preview.c9users.io/bastianf/chili-elem-dragdrop/widget.html

Example Code for chilipeppr.load() Statement

You can use the code below as a starting point for instantiating this widget inside a workspace or from another widget. The key is that you need to load your widget inlined into a div so the DOM can parse your HTML, CSS, and Javascript. Then you use cprequire() to find your widget's Javascript and get back the instance of it.

// Inject new div to contain widget or use an existing div with an ID
$("body").append('<' + 'div id="myDivElemDragdrop"><' + '/div>');

chilipeppr.load(
  "#myDivElemDragdrop",
  "http://raw.githubusercontent.com/bastian-f/elem-dragdrop/master/auto-generated-widget.html",
  function() {
    // Callback after widget loaded into #myDivElemDragdrop
    // Now use require.js to get reference to instantiated widget
    cprequire(
      ["inline:com-chilipeppr-elem-dragdrop"], // the id you gave your widget
      function(myObjElemDragdrop) {
        // Callback that is passed reference to the newly loaded widget
        console.log("Element / Drag Drop just got loaded.", myObjElemDragdrop);
        myObjElemDragdrop.init();
      }
    );
  }
);

Publish

This widget/element publishes the following signals. These signals are owned by this widget/element and are published to all objects inside the ChiliPeppr environment that listen to them via the chilipeppr.subscribe(signal, callback) method. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal Description
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/ondroppedWhen the file is dropped. Payload contains the file.
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/ondragoverWhen the mouse is hovering over drop area so you can hilite/react. Empty payload.
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/ondragleaveWhen mouse stops hovering so you can remove hilites. Empty payload.
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/ondragdoneWhen user drops the file onto browser so you can remove hilites. Empty payload. Don't confuse this with ondropped which is the pubsub that actually contains file that was dropped.

Subscribe

This widget/element subscribes to the following signals. These signals are owned by this widget/element. Other objects inside the ChiliPeppr environment can publish to these signals via the chilipeppr.publish(signal, data) method. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal Description
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/loadGcodeSend in this signal to load a string of Gcode with a payload of: { gcode: "your gcode text as a string", name: "name of file as string so the recent file list can show the name", lastModified: Date }. This signal will then generate an onDropped signal which is what all widgets listen to for loading of the file.
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/loadGcodeDoNotCreateRecentFileEntrySend in this signal to load a string of Gcode without creating a recent file menu entry. Send in the same payload as /loadGcode. This is useful if you have a macro or a widget that wants to send a lot of Gcode into ChiliPeppr over and over, but does not want to bloat the recent file menu. For example, the Auto-Leveller may want to let the user load Gcode over and over without creating a history.
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/loadGcodeFromUrlSend in this signal to load Gcode from a URL. The payload is simply the URL as a string.
/com-chilipeppr-elem-dragdrop/com-chilipeppr-elem-dragdrop/loadGcodeFromUrlDoNotCreateRecentFileEntrySend in this signal to load Gcode from a URL, but do not create a recent file entry in the process. This allows you to load Gcode over and over without bloating the recent file menu.

Foreign Publish

This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal Description
(No signals defined in this widget/element)

Foreign Subscribe

This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal Description
(No signals defined in this widget/element)

Methods / Properties

The table below shows, in order, the methods and properties inside the widget/element.

Method / Property Type Description
idstring"com-chilipeppr-elem-dragdrop"
urlstring"http://raw.githubusercontent.com/bastian-f/elem-dragdrop/master/auto-generated-widget.html"
fiddleurlstring"http://ide.c9.io/bastianf/chili-elem-dragdrop"
githuburlstring"http://github.com/bastian-f/elem-dragdrop"
testurlstring"http://chili-elem-dragdrop-bastianf.c9users.io/widget.html"
namestring"Element / Drag Drop"
descstring"An element that presents a drag and drop icon that allows files to be dragged onto it. A pubsub event called /com-chilipeppr-elem-dragdrop/ondropped is published when the drop is complete. The contents of the file are passed in the pubsub call so different widgets/elements can consume the contents of the file."
publishobjectPlease see docs above.
subscribeobjectPlease see docs above.
hasHtmlboolean
hasCssboolean
hasJsboolean
dropAreaobject
txtDomElemSelectorobject
initfunctionfunction ()
setupOpenFilefunctionfunction ()
setupDownloadfunctionfunction ()
onDownloadfunctionfunction (evt)
setupSubscribefunctionfunction ()
loadGcodeFromUrlDoNotCreateRecentFileEntryfunctionfunction (url)
loadGcodeFromUrlfunctionfunction (url)
loadGcodeDoNotCreateRecentFileEntryfunctionfunction (obj)
loadGcodefunctionfunction (obj, isDoNotCreateRecentFileEntry)
setupGlobalAjaxErrorfunctionfunction ()
loadTextfunctionfunction ()
loadUrlfunctionfunction (evt)
loadUrlDoNotCreateRecentFileEntryfunctionfunction (evt)
loadChiliPepprGcodeInchfunctionfunction (evt)
loadChiliPepprGcodefunctionfunction (evt, alturl)
deleteRecentFilesfunctionfunction ()
createRecentFileEntryfunctionfunction (fileStr, info)
buildRecentFileMenufunctionfunction ()
bindfunctionfunction (dropDomElemSelector, txtDomElemSelector)
forkSetupfunctionfunction ()

About ChiliPeppr

ChiliPeppr is a hardware fiddle, meaning it is a website that lets you easily create a workspace to fiddle with your hardware from software. ChiliPeppr provides a Serial Port JSON Server that you run locally on your computer, or remotely on another computer, to connect to the serial port of your hardware like an Arduino or other microcontroller.

You then create a workspace at ChiliPeppr.com that connects to your hardware by starting from scratch or forking somebody else's workspace that is close to what you are after. Then you write widgets in Javascript that interact with your hardware by forking the base template widget or forking another widget that is similar to what you are trying to build.

ChiliPeppr is massively capable such that the workspaces for TinyG and Grbl CNC controllers have become full-fledged CNC machine management software used by tens of thousands.

ChiliPeppr has inspired many people in the hardware/software world to use the browser and Javascript as the foundation for interacting with hardware. The Arduino team in Italy caught wind of ChiliPeppr and now ChiliPeppr's Serial Port JSON Server is the basis for the Arduino's new web IDE. If the Arduino team is excited about building on top of ChiliPeppr, what will you build on top of it?

About

The drag n drop element for ChiliPeppr. There's no real UI to this widget, thus it's considered an element.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Eagle 90.7%
  • JavaScript 6.1%
  • HTML 3.2%