Learning HTML, CSS, Javascript & Observation

Hi everyone,

For someone who doesn't have any background knowledge on scripting, would you say that it is helpful/necessary to learn the language of HTML, CSS and Javascript in order to go in depth with OSC ?
Or OSC is not using the entire same language ?

To tell the truth, the documentation seems to be for someone who has at least some knowledge about those mentioned languages which makes it difficult (not impossible) for a beginner to get started.
At least having shared templates were more useful to look at than the documentation.

An example I'm seeing on the documentation is about "Writing a custom module":
Described as:

Using the server's custom-module option, users can load a custom javascript module that filters incoming and outgoing OSC / MIDI messages

Then immediately we see:

// Do whatever you want
// initialize variables
// declare functions
// load modules
// etc

module.exports = {

init: function(){
    // this will be executed once when the osc server starts
},

oscInFilter:function(data){
    // Filter incoming osc messages

    var {address, args, host, port} = data

    // do what you want

    // address = string
    // args = array of {value, type} objects
    // host = string
    // port = integer

    // return data if you want the message to be processed
    return {address, args, host, port}

},

oscOutFilter:function(data){
    // Filter outgoing osc messages

    var {address, args, host, port, clientId} = data

    // same as oscInFilter

    // return data if you want the message to be and sent
    return {address, args, host, port}
},

unload: function(){
    // this will be executed when the custom module is reloaded
},

}

Cool, but what is even the meaning of:
module.exports,
oscInFilter:function(data){
oscOutFilter:function(data){
unload: function(){

Again this is an example but this is how the documentation is mainly built.

What would be great is to have a documentation which is explaining everything clearly by using simple words that we all human can understand, at least to get started.
Having little examples either into a template or short videos of what is explained on the documentation or making it just more simple to everyone would be extremely beneficial, a time saver and stress free.

For instance:
I am pretty sure that most of us wanted to make a text bigger when we created one of our first widgets, it wasn't intuitive to find out how to do it for a beginner.
However, if it was well explained somewhere it would have been so much better to explain as follow:

To make a text bigger or smaller:
Go on the CSS section and write in
font-size:#% and replace "#" by a number between 1 to 100.

This way is simpler and easy for everyone to understand.

I don't know how you guys are doing to stay quiet about this, maybe you are all genius but I am definitely not one.
Anyway, the only way to go for me now is to learn the hard way, which is time consuming and nerve wracking but once I'll become more advanced, I will think about re-creating a documentation for everyone to understand as soon as they enter the OSC world.

Please understand that this message has nothing to do about how OSC works and what OSC can do/cannot do or a complain against @jean-emmanuel (who is doing an excellent job here at helping us as much as he can).

Now, I'm just trying to find out how to make OSC user friendly to everyone out there, especially for people who don't have the web language in their brain.

Now going back to my main question:
For someone who doesn't have any background knowledge on scripting, would you say that it is helpful/necessary to learn the language of HTML, CSS and Javascript in order to go in depth with OSC ?

All the best,

Swayrian

Yours is not an easy question to answer @swayrian.

I've been doing web development since the beginning. My knowledge of CSS has helped me assign colors and sizes where I need to and put dashed borders having attractive radiuses around my widgets. My knowledge of JavaScript has helped me do a bit of runtime configuration and to appreciate @jean-emmanuel's engineering prowess behind the scenes.

Open Stage Control provides a very powerful environment with an impressive level of documentation and yet I encounter obstacles to my getting it to do what I want pretty much every time I fire it up. I believe that practice, ongoing engagement with the tool, is the best way to learn and gain facility with it. I've found this discourse group to be a good resource when I get stuck.

If you see a clean separation between HTML and CSS then I would say a study of HTML should be your lowest priority. And an advanced topic like custom-module isn't the best thing to tackle if you are just starting out.

Can you identify the most appropriate widget for what you're trying to accomplish? Can you use the editor to place that widget, optimally, onscreen? Can you craft the widget to send the correct OSC message to do what you need your receiver to do? I don't believe that knowledge of JavaScript, CSS, or HTML provides any shortcut to using the tool, and you haven't really spelled out what you mean by "in depth".

Thank you for sharing your perspective @erictheise.

From your experiences it seems that having knowledge of CSS and JavaScript is useful.

I agree with the fact that OSC has an impressive level of documentation, but this "impressive" look is too advanced for someone who doesn't know anything about web development that is why it is not easy to get where we want easily.

Whenever we first learn anything for the first few times there must be baby steps at first.
As an analogy, if a kid wants to learn how to swim he needs some guidance and basic understanding on how to move his body into the water before throwing him deep into an ocean, it's not always instinctive - This is what I'm missing on the documentation.

I believe that practice, ongoing engagement with the tool, is the best way to learn and gain facility with it. I've found this discourse group to be a good resource when I get stuck.

=> That is ABSOLUTELY true and up to now that's how I learnt to work around OSC but knowing what to practice to get where we want is the missing puzzle. It is exhausting to look around multiple threads in details to find the answer of one single question, especially when most of the answers you get are not entirely the human language.

I can clearly answer yes to all the questions you asked and whatever the tools, documentation, videos we are looking at it definitely takes time to learn OSC but I believe that there are easier ways to learn faster and keeping the fun part.
So in the end, what I would like to try is to spend most of my time testing whatever ideas I have in mind rather than spending my time on researching a documentation which is too complex to understand, at least as non-web developer.

When I'm talking about learning OSC "in depth" I meant by that it would be great to have a place to learn what each widgets are able to do, what are the main and useful combinations we could do between widgets, what kind of useful script could be created for a single widget, multiple widgets or widgets which are meant to work together.
I know in the documentation all the widgets are covered but again it's not simple to understand, so covering them into short demos/videos or pre-built template we can all look at would be so much better, beneficial and it will start triggering new ideas we never thought about.
Of course it is not limited to widgets, it could be about learning how to send an OSC message but also receiving it at the same time, learning about the looks in details (CSS) a beginner would not know that we can give a round shape to a button and even less chance to know that we can give it an hexagonal shape because he or she is lacking that information, the knowledge.

Once most of the basics will be covered, I guess then our limit will be our own imagination.

In any case, thanks again for sharing your thoughts, I guess the next step for me would be to learn more about the web development language now and just keep hanging around here when my head is hitting a wall. I truly believe that there are so many genius out there who can learn things quickly (I'm a slow learner) but also experienced people who are super kind and generous who are helping when we are struggling - Love the OSC community !

Swayrian

Hi @swayrian
Well in general, software doc is often different than tutorials.The doc is the reference.
IMHO Open Stage Control is hard to learn because every one has very special needs, projects where a lot of technologies are invited to work together : midi,osc, css, html, javascript, different hardware (audio interface, mobile devices) different software (Ableton Live, Reaper, etc), it can be about networks topics too. So i would suggest you to use with the default theme provided by o-s-c to achieve your goals. Ask yourself "what do I want to do ?". Then read the doc, try, test then post your question on this forum. Start little and then you would get fluent with the osc syntax. And one day you will maybe need custom modules to answer your project needs and so you will learn how javascript modules work.
Another advise : practice every day not to forget your learnings as an example the syntax.

But yes i agree you it would be awesome if the o-s-c community publish more videos or articles to newbies @jean-emmanuel is the only developper on this huge project and always answers kindly to questions but i guess it would be happy to see more contributions from others o-s-c users to help.
See you and good luck !

2 Likes

Hi swayrian, you're not alone!
Interesting questions and suggestions because many of us have had to deal with the same challenges as you. That includes me - no genius either. OSC has a steep learning curve and I would have given up if it weren't almost exactly what I had been looking for. That made me very determined to learn it and gave me the necessary perspiration to get the results I was hoping for. Note: I was not familiar with Javascript and only slightly with CSS. I'm also not a coder even though I have done some programming ages ago. I’ll share some of my personal experiences too:

In the beginning, just like you, I couldn't understand most of the documention well enough to translate it into something useful. So I have been reading hundreds of posts here, many of them more than once. I've tried to analyze almost all available examples and sessions from others and have done lots of trial en error experiments. And also posting an ocasional question which was swiftly and kindly answered in a clear and concise way by Jean-Emmanuel or others. I also reread the documentation endlessly and studied some CSS and Javascript until I started to feel more acquainted with OSC - while still being a beginner.

It was a learning path along several concrete goals. The very first thing to test was simply to have OSC communicate with my DAW. I ended up with a separate computer for OSC which appeared the best solution to me. Then I wanted to be able to send system exclusive messages, after which I learned how to use variables. Next I focussed a on visual aspects, including the appearance of buttons. Then on integrating everything in tabs, panels and modals. Still to do: most on inacteractivity (two-way communication between OSC and DAW) and probably also some more optimisation and maybe custom modules.

It was my thoughts exactly to have some extra tutorial style examples as a kickstart for newcomers and even for more experienced users. It would have saved time and might learning OSC less of a challenge (albeit a positive one where one succeeds :wink: )
So, great idea of yours to work on a tutorial style document which is less cryptic for the beginner than the (otherwise fine) documentation. People might work together on this. I guess it’s good to start posting just bits of it, within one's scope of knowledge. These may accumulate gradually into a more extended bundle. This way one does't have to wait until one considers himself an expert in OSC (I may never), as long as the postings make sense of course.

I imagine an open space with smaller tutorials, how-to's and something like a library of useful examples (bare and simple or a little more fancy). Someone could post a nice demo and another one may suggest a way to improve on it (for instance by more elegant coding, or by making it more resource friendly). The latter is already done frequently in this group (often by Jean-Emmanuel himself) and the many questions and answers can be considered a knowlegde base. However it is not structured and doesn't cover several things a starter would like to know.

So, yes maybe your idea is an extra way to help newcomers, apart from the current question-and-answer format. While Jean-Emmanuel is extremely helpful to those who need help, we are part of a growing community where OSC-lovers may increasingly help eachother out. Good posts also from nlb and erictheise.

Good luck and enjoy your learning curve! :slight_smile:

2 Likes

Hi !
I've read your thoughts carefully and first of all I'm really amazed by the good vibes in this discussion. I feel I should say that OSC has been a learning journey for me too, a journey into coding but not only. As a musician and drum teacher, I found myself with a taste (and a need) for programming and ended up sharing and documenting this software (initially created for a band of mine) because I strongly believe in free softwares and free arts. There was never any plan of any sort and things just got bigger over the years, attracting more and more users with use cases I'd have never imagined. Writing documentation is hard and takes time, especially when the software is "hackable". I only managed to write a technical reference and not a true user guide, but hopefully with the help of the community it will get better !

8 Likes

Hey!

I had a hard time learning OSC too, and still have. Even with programming background it is by far not the easiest piece of software to take on. I abondoned the first time but know I am getting closer to the result I want. It's an awesome software, very powerful and unique. As a true supporter of free software and knowledge sharing I am pleased to be part of the adventure and you will probably here from me again!

The doumentation is great and very helpfull and you can to result quickly in a simple way. But it gets quickly more tricky and involved. Without any background it's quit difficult I think.

Maybe a code and project sharing section on the website could be something good for everyone and especially for learning. I found it difficult to find examples of thing I want to to do. How to point to widget states and properties editing, array declarations. More general syntax stuff. And this maybe be specially related to javascript and the informations are elsewhere...

Thanks for the good work Jean-emmanuel and have a fun programming and making music!

1 Like